门类-baseInfo-style

src/views/category/baseInfo/index.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="base-info">
-    <el-form ref="form" :model="form" size="small" label-width="80px">
+    <!-- <el-form ref="form" :model="form" size="small" label-width="80px">
       <el-form-item label="门类名称" prop="fieldCnName">
         <el-input v-model="form.fieldCnName" class="input-width" :disabled="true" />
       </el-form-item>
       <el-form-item label="门类类型" prop="isDataType">
         <el-select v-model="form.isDataType" placeholder="请选择" class="input-width" :disabled="true">
-          <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
           <el-option label="区域二" value="beijing" />
         </el-select>
       </el-form-item>
@@ -19,7 +18,27 @@
       <el-form-item label="内容说明" prop="isDefaultValue">
         <el-input v-model="form.isDefaultValue" type="textarea" :rows="4" class="input-width" :disabled="true" />
       </el-form-item>
-    </el-form>
+    </el-form> -->
+    <div class="info-item">
+      <span>门类名称</span>
+      <p>{{ baseInfo.fieldCnName }}</p>
+    </div>
+    <div class="info-item">
+      <span>门类类型</span>
+      <p>{{ baseInfo.isDataType }}</p>
+    </div>
+    <div class="info-item">
+      <span>关联父级</span>
+      <p>{{ baseInfo.fieldName }}</p>
+    </div>
+    <div class="info-item">
+      <span>档号规则</span>
+      <p>{{ baseInfo.isColumnLength }}</p>
+    </div>
+    <div class="info-item info-content">
+      <span>内容说明</span>
+      <p>{{ baseInfo.isDefaultValue }}</p>
+    </div>
   </div>
 </template>
 
@@ -29,7 +48,7 @@ export default {
   data() {
     return {
       showFields: [],
-      form: {
+      baseInfo: {
         fieldCnName: '',
         isDataType: '',
         fieldName: '',
@@ -47,30 +66,31 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/variables.scss";
-::v-deep .el-form {
-  .el-form-item__label {
-    line-height: 36px;
-    color: $subMenuActiveText;
-    padding: 0px 20px 0 0;
-  }
-  .el-input__inner {
-    color: #fff;
-    border: 1px solid #339cff;
-    background-color: transparent !important;
-  }
-  .el-textarea__inner {
-    color: #fff;
-    border: 1px solid #339cff;
-    background-color: transparent !important;
-  }
-  .el-form-item--small.el-form-item {
-    margin-bottom: 24px;
-  }
-}
 .base-info {
   padding: 20px;
-}
-.input-width {
-  width: 360px;
+  .info-item{
+    display: flex;
+    font-size: 14px;
+    margin-bottom: 30px;
+    span{
+      display: block;
+      width: 80px;
+      height: 36px;
+      line-height: 36px;
+      font-weight: bold;
+      color: $subMenuActiveText;
+    }
+    p{
+      width: 340px;
+      padding: 0 10px;
+      line-height: 36px;
+      background-color: #02255f;
+      color: #fff;
+      border-radius: 4px;
+    }
+  }
+  .info-content p{
+    height: 120px;
+  }
 }
 </style>