商品详情样式调整

src/SDrpManagement/ProductGroup/modules/GroupDetail/groupDetail.vue

@@ -186,78 +186,29 @@
               width: 100%;
               background: #f6f6f6;
               margin-bottom: 20px;
-              padding: 20px 0 10px 20px;
+              padding: 10px 0 10px 20px;
             "
-            v-if="selectProduct.itemextend"
+            class="detail-style"
+            v-if="selectProduct.itemextend && selectProduct.itemextend.length"
           >
-            <el-row :gutter="20" v-if="selectProduct.itemextend.length">
-              <el-col :span="6" v-if="selectProduct.itemextend[0].device && siteid != 'HY'" style="margin-bottom: 10px">
-                <span class="search__label">{{ $t("装置") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].device
-                }}</span>
-              </el-col>
-              <el-col :span="6" v-if="selectProduct.itemextend[0].prodline" style="margin-bottom: 10px">
-                <span class="search__label">{{ $t("产线") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].prodline
-                }}</span>
-              </el-col>
-              <el-col :span="6" v-if="selectProduct.itemextend[0].pressure && siteid != 'HY'" style="margin-bottom: 10px">
-                <span class="search__label">{{ $t("压力等级") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].pressure
-                }}</span>
-              </el-col>
-              <el-col
-                :span="6"
-                v-if="selectProduct.itemextend[0].butterflyplatedrive && siteid != 'HY'"
-                style="margin-bottom: 10px"
-              >
-                <span class="search__label" >{{ $t("蝶板驱动") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].butterflyplatedrive
-                }}</span>
-              </el-col>
-              <el-col :span="6" v-if="selectProduct.itemextend[0].connection && siteid != 'HY'" style="margin-bottom: 10px">
-                <span class="search__label">{{ $t("连接形式") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].connection
-                }}</span>
-              </el-col>
-              <el-col
-                :span="6"
-                v-if="selectProduct.itemextend[0].valveplatematerial && siteid != 'HY'"
-                style="margin-bottom: 10px"
-              >
-                <span class="search__label">{{ $t("阀板材质") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].valveplatematerial
-                }}</span>
-              </el-col>
-              <el-col :span="6" v-if="selectProduct.itemextend[0].actuatortype" style="margin-bottom: 10px">
-                <span class="search__label">{{ $t("执行器类型") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].actuatortype
-                }}</span>
-              </el-col>
-              <el-col
-                :span="6"
-                v-if="selectProduct.itemextend[0].actuatorbrand"
-                style="margin-bottom: 10px"
-              >
-                <span class="search__label">{{ $t("执行器品牌") }}:</span>
-                <span class="tab-color">{{
-                  selectProduct.itemextend[0].actuatorbrand
-                }}</span>
-              </el-col>
-              <el-col :span="6" style="margin-bottom: 10px" v-if="selectProduct.itemextend[0].specalnote">
-                <span class="search__label">{{ $t("备注") }}:</span>
-                <span class="tab-color">{{
-                    selectProduct.itemextend[0].specalnote
-                  }}</span>
-              </el-col>
-            </el-row>
+            <itemextend v-if="selectProduct.itemextend[0].device && siteid != 'HY'"
+                        title="装置" :data="selectProduct.itemextend[0].device"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].prodline"
+                        title="产线" :data="selectProduct.itemextend[0].prodline"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].pressure && siteid != 'HY'"
+                        title="压力等级" :data="selectProduct.itemextend[0].pressure"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].butterflyplatedrive && siteid != 'HY'"
+                        title="蝶板驱动" :data="selectProduct.itemextend[0].butterflyplatedrive"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].connection && siteid != 'HY'"
+                        title="连接形式" :data="selectProduct.itemextend[0].connection"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].valveplatematerial && siteid != 'HY'"
+                        title="阀板材质" :data="selectProduct.itemextend[0].valveplatematerial"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].actuatortype"
+                        title="执行器类型" :data="selectProduct.itemextend[0].actuatortype"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].actuatorbrand"
+                        title="执行器品牌" :data="selectProduct.itemextend[0].actuatorbrand"></itemextend>
+            <itemextend v-if="selectProduct.itemextend[0].specalnote"
+                        title="备注" :data="selectProduct.itemextend[0].specalnote"></itemextend>
           </div>
         </div>
 
@@ -284,8 +235,10 @@
 </template>
 
 <script>
+import itemextend from "@/SDrpManagement/ProductGroup/modules/itemextend";
 export default {
   name: "",
+  components:{itemextend},
   data() {
     return {
       detail: "",
@@ -577,4 +530,9 @@ export default {
   font-size: 15px;
   /*font-weight: bold;*/
 }
+.detail-style::after {
+  content: "";
+  display: table;
+  clear: both;
+}
 </style>

src/SDrpManagement/ProductGroup/modules/itemextend.vue

@@ -0,0 +1,21 @@
+<template>
+  <div style="width: 290px;float: left">
+    <span class="search__label">{{title}}:</span>
+    <span class="tab-color">{{data}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "itemextend",
+  props:['title','data']
+}
+</script>
+
+<style scoped>
+.tab-color {
+  color: #ec2121;
+  font-size: 15px;
+  /*font-weight: bold;*/
+}
+</style>