项目

src/views/project/list/edit-formula.vue

@@ -1,27 +1,29 @@
 <template>
     <hc-drawer v-model="isShow" ui="hc-project-list-edit-formula-drawer" to-id="hc-layout-box" is-close @close="drawerClose">
         <hc-card is-action-btn>
-            <div class="hc-formula-card-box hc-flex mb-14px">
-                <div class="retain hc-flex w-194px">
+            <div class="hc-formula-card-box hc-flex mb-14px h-58px">
+                <div class="retain hc-flex h-full w-174px">
                     <el-checkbox v-model="isRetain" size="large" />
                     <span class="ml-5px text-14px">保留</span>
-                    <div class="relative ml-5px w-110px">
+                    <div class="relative ml-5px w-90px">
                         <el-input-number v-model="retainNum" block :step="1" :min="0" :max="5" :disabled="!isRetain" controls-position="right" />
                     </div>
                     <span class="ml-5px text-14px">位</span>
                 </div>
-                <div class="range w-155px">
-                    <el-button>允许偏差值范围</el-button>
+                <div class="range hc-flex h-full w-155px">
+                    <el-button :type="deviationRangeShow ? 'primary' : ''" @click="setDeviationRange">允许偏差值范围</el-button>
                 </div>
-                <div class="menu flex-1">
-                    <el-menu :default-active="formulaMenuIndex" mode="horizontal" @select="handleFormulaMenu">
-                        <el-sub-menu v-for="(arr, key, index) in formulaMenuList" :key="key" :index="key">
-                            <template #title>{{ key }}</template>
-                            <el-menu-item v-for="(item, i) in arr" :key="i" :index="`${index + 1}-${i + 1}`">{{ item?.name }}</el-menu-item>
-                        </el-sub-menu>
-                    </el-menu>
+                <div class="menu h-full flex-1">
+                    <hc-body padding="0">
+                        <el-menu :default-active="formulaMenuIndex" mode="horizontal" @select="handleFormulaMenu">
+                            <el-sub-menu v-for="(arr, key, index) in formulaMenuList" :key="key" :index="key">
+                                <template #title>{{ key }}</template>
+                                <el-menu-item v-for="(item, i) in arr" :key="i" :index="`${index + 1}-${i + 1}`">{{ item?.name }}</el-menu-item>
+                            </el-sub-menu>
+                        </el-menu>
+                    </hc-body>
                 </div>
-                <div class="hand w-100px">
+                <div class="hand hc-flex h-full w-100px">
                     <el-button>手写模式</el-button>
                 </div>
             </div>
@@ -79,6 +81,12 @@ const getDataApi = async () => {
 const isRetain = ref(false)
 const retainNum = ref(2)
 
+//允许偏差值范围
+const deviationRangeShow = ref(false)
+const setDeviationRange = () => {
+    deviationRangeShow.value = !deviationRangeShow.value
+}
+
 //获取顶部菜单数据
 const formulaMenuIndex = ref(null)
 const formulaMenuList = ref({})
@@ -144,11 +152,15 @@ const drawerClose = () => {
             border-right: 1px dashed #bbbbbb;
             .el-menu {
                 --el-menu-text-color: #838383;
-                --el-menu-item-height: 36px;
-                --el-menu-horizontal-height: 36px;
+                --el-menu-item-height: 40px;
+                --el-menu-horizontal-height: 40px;
                 --el-menu-base-level-padding: 14px;
                 border-bottom: 0;
             }
+            .el-menu--horizontal>.el-sub-menu .el-sub-menu__title,
+            .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
+                border-bottom: 0;
+            }
         }
         .hand {
             position: relative;