You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.2 KiB
122 lines
3.2 KiB
<script lang="ts" setup>
|
|
import History from 'components/setting/History.vue'
|
|
import { ref } from 'vue'
|
|
|
|
import FormulaConfig from '@/components/formula/FormulaConfig.vue'
|
|
import Device from '@/components/setting/Device.vue'
|
|
import SystemDate from '@/components/setting/SystemDate.vue'
|
|
import User from '@/components/setting/User.vue'
|
|
import { useSettingStore } from '@/stores/settingStore'
|
|
|
|
const settingStore = useSettingStore()
|
|
const settingMenus = settingStore.settingMenus
|
|
const selectedMenuCode = ref('history')
|
|
// 选择菜单项的方法
|
|
const selectItem = (menuCode: string) => {
|
|
selectedMenuCode.value = menuCode
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dashboard-container">
|
|
<main class="main-content">
|
|
<div class="setting-left">
|
|
<div class="menu-container">
|
|
<ul class="menu-container">
|
|
<li
|
|
v-for="(item) in settingMenus"
|
|
:key="item.code"
|
|
:class="{ active: selectedMenuCode === item.code }"
|
|
class="setting-menu-li menu-item"
|
|
@click="selectItem(item.code)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="setting-right">
|
|
<History v-if="selectedMenuCode === 'history'" />
|
|
<div v-if="selectedMenuCode === 'defaultFormula'">
|
|
<FormulaConfig type="setting" />
|
|
</div>
|
|
<div v-if="selectedMenuCode === 'user'">
|
|
<User />
|
|
</div>
|
|
<div v-if="selectedMenuCode === 'date'">
|
|
<SystemDate />
|
|
</div>
|
|
<div v-if="selectedMenuCode === 'deviceInfo'">
|
|
<Device />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-content{
|
|
display: grid;
|
|
grid-template-columns: repeat(3,1fr);
|
|
height: $main-container-height;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
.setting-left{
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #FFFFFF 24%);
|
|
box-shadow: 0px 0px 4px #0000001f;
|
|
border-radius: 10px;
|
|
border: 1px solid #e1e1e1;
|
|
overflow: hidden;
|
|
}
|
|
.setting-right{
|
|
grid-column: 2 / 4;
|
|
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
|
|
background: #ffffff;
|
|
border: 1px solid #e1e1e1;
|
|
box-shadow: 0px 0px 4px #0000001f;
|
|
background: $gradient-color;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.menu-container {
|
|
padding: 10px;
|
|
.setting-menu-li{
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
padding: 15px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
height: 5rem;
|
|
}
|
|
li.active {
|
|
// color: #e6f7ff;
|
|
background: #e8f3ff;
|
|
border-radius: 10px;
|
|
color: #2892F3;
|
|
}
|
|
|
|
.menu-container {
|
|
width: 100%; /* 占满父容器 */
|
|
background: #fff;
|
|
// border: 1px solid #eee;
|
|
overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
|
|
}
|
|
.menu-item {
|
|
padding: 14px 20px; /* 更大触摸区域 */
|
|
font-size: 15px; /* 适配手机阅读 */
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
/* 最后一项去掉分隔线 */
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|