lixg 8-8 css修改

src/assets/styles/self-defined.scss

@@ -21,7 +21,8 @@
 }
 
 .marginbottom50px{
-    margin-bottom: 50px;
+    margin: 0px 80px 50px;
+    
 }
 
 .textaligncenter{
@@ -45,3 +46,34 @@
 .margintop10{
     margin-top:10px;
 }
+
+.el-step__icon {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    box-sizing: border-box;
+    background: var(--el-bg-color);
+    transition: .15s ease-out;
+  }
+  
+  .el-step.is-horizontal .el-step__line {
+    height: 2px;
+    top: 20px;
+    left: 0;
+    right: 0;
+  } 
+  .el-step__line-inner{
+    display: block;
+    border-width: 2px !important;
+    border-style: solid;
+    border-color: inherit;
+    transition: .15s ease-out;
+    box-sizing: border-box;
+    width: 0;
+    height: 0;
+  }

src/views/model/devicemodel/addmodel.vue

@@ -1,10 +1,9 @@
 <template>
-    <div class="app-container" 
+  <div class="app-container" v-loading="loading">
-      v-loading="loading">
     <!-- 添加或修改设备模型信息对话框 -->
     <div class="marginbottom50px">
       <el-steps :active="currentStep">
-            <el-step title="模型信息" description="名称、编号、序号、备注等" />
+        <el-step title="模型信息" description="名称、编号、序号、备注等" class="step" />
         <el-step title="参数类别配置" description="模型的参数类别" />
         <el-step title="调控策略" description="模型的调控策略" />
       </el-steps>
@@ -24,16 +23,9 @@
                 <el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序" />
               </el-form-item>
               <el-form-item label="上级" prop="pid">
-                <el-tree-select
+                <el-tree-select v-model="form.pid" :data="devicemodelOptions"
-                    v-model="form.pid"
+                  :props="{ value: 'id', label: 'modelName', children: 'children' }" value-key="id" placeholder="请选择上级"
-                    :data="devicemodelOptions"
+                  check-strictly :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" />
-                    :props="{ value: 'id', label: 'modelName', children: 'children' }"
-                    value-key="id"
-                    placeholder="请选择上级"
-                    check-strictly
-                    :default-expand-all="true" 
-                    :default-checked-keys="defaultCheckedKeys"
-                />
               </el-form-item>
               <el-form-item label="模型类别" key="selectmodelType" prop="modelTypeId">
                 <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable>
@@ -41,19 +33,11 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="是否是叶节点">
-                  <el-switch
+                <el-switch v-model="form.dc_is_leaf" @change="switch_isLeaf" class="ml-2i"
-                    v-model="form.dc_is_leaf"
+                  style="--el-switch-on-color: #13ce66" />
-                    @change="switch_isLeaf"
-                    class="ml-2i"
-                    style="--el-switch-on-color: #13ce66"
-                  />
               </el-form-item>
               <el-form-item label="是否可用">
-                  <el-switch
+                <el-switch v-model="form.dc_available" class="ml-2i" style="--el-switch-on-color: #13ce66" />
-                    v-model="form.dc_available"
-                    class="ml-2i"
-                    style="--el-switch-on-color: #13ce66"
-                  />
               </el-form-item>
               <el-form-item label="备注" prop="note">
                 <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
@@ -63,7 +47,8 @@
           <el-carousel-item :key="2" name="2" class="textaligncenter">
             <div class="widthhalfinlineblock">
               <div class="textalignright marginbottom5">
-                    <el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button>
+                <el-button type="primary" style="display: inline-block !important"
+                  @click="addParamModel">添加参数模版</el-button>
               </div>
               <el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing">
                 <el-table-column fixed label="序号" width="80">
@@ -115,7 +100,8 @@
           </el-form-item>
         </div>
       </el-form>
-        <el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
+      <el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body
+        :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
         <el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600">
           <el-table-column type="selection" width="55" :selectable="ifselectable" />
           <el-table-column label="ID" align="center" width="55" prop="id" />
@@ -142,12 +128,14 @@
 </template>
 <style lang="scss">
 @import "@/assets/styles/self-defined.scss";
+
 .customCarousel {
   div {
     button {
       display: none !important;
     }
   }
+
   ul {
     display: none !important;
   }
@@ -388,4 +376,3 @@
 getModelTypeList();
 </script>
   
-