产品属性非固定切空置位置自动补齐

src/views/homepage/product/details.vue

@@ -66,46 +66,60 @@
         </el-row>
         <el-divider />
         <div class="info-card-title" style="margin-bottom: 14px"><div class="title-li" /><span>产品属性</span></div>
-        <el-row :gutter="30">
-          <el-col :span="2"><div class="attribute-label">品牌</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeBrand||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">消耗电流</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeConsumptionCurrent||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">批号</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeBatchNumber||'-' }}</div></el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="2"><div class="attribute-label">额定功率</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeRatedPower||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">型号</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeModel||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">反应时间</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeReactionTime||'-' }}</div></el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="2"><div class="attribute-label">工作电压</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeWorkingVoltage||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">质量保证</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeQualityAssurance||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">封装</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeEncapsulation||'-' }}</div></el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="2"><div class="attribute-label">产地</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeProducingArea||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">数量</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeNumber||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label">颜色</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeColor||'-' }}</div></el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="2"><div class="attribute-label">适用场景</div></el-col>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeApplicableScenarios||'-' }}</div></el-col>
-          <el-col :span="2"><div class="attribute-label" /></el-col>
-          <el-col :span="6"><div class="attribute-value" /></el-col>
-          <el-col :span="2"><div class="attribute-label" /></el-col>
-          <el-col :span="6"><div class="attribute-value" /></el-col>
-        </el-row>
+        <div>
+          <div v-if="projectObj.attributeBrand" class="attribute-box">
+            <div class="attribute-label">品牌</div>
+            <div class="attribute-value">{{ projectObj.attributeBrand||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeConsumptionCurrent" class="attribute-box">
+            <div class="attribute-label">消耗电流</div>
+            <div class="attribute-value">{{ projectObj.attributeConsumptionCurrent||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeBatchNumber" class="attribute-box">
+            <div class="attribute-label">批号</div>
+            <div class="attribute-value">{{ projectObj.attributeBatchNumber||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeRatedPower" class="attribute-box">
+            <div class="attribute-label">额定功率</div>
+            <div class="attribute-value">{{ projectObj.attributeRatedPower||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeModel" class="attribute-box">
+            <div class="attribute-label">型号</div>
+            <div class="attribute-value">{{ projectObj.attributeModel||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeReactionTime" class="attribute-box">
+            <div class="attribute-label">反应时间</div>
+            <div class="attribute-value">{{ projectObj.attributeReactionTime||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeWorkingVoltage" class="attribute-box">
+            <div class="attribute-label">工作电压</div>
+            <div class="attribute-value">{{ projectObj.attributeWorkingVoltage||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeQualityAssurance" class="attribute-box">
+            <div class="attribute-label">质量保证</div>
+            <div class="attribute-value">{{ projectObj.attributeQualityAssurance||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeEncapsulation" class="attribute-box">
+            <div class="attribute-label">封装</div>
+            <div class="attribute-value">{{ projectObj.attributeEncapsulation||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeProducingArea" class="attribute-box">
+            <div class="attribute-label">产地</div>
+            <div class="attribute-value">{{ projectObj.attributeProducingArea||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeNumber" class="attribute-box">
+            <div class="attribute-label">数量</div>
+            <div class="attribute-value">{{ projectObj.attributeNumber||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeColor" class="attribute-box">
+            <div class="attribute-label">颜色</div>
+            <div class="attribute-value">{{ projectObj.attributeColor||'-' }}</div>
+          </div>
+          <div v-if="projectObj.attributeApplicableScenarios" class="attribute-box">
+            <div class="attribute-label">适用场景</div>
+            <div class="attribute-value">{{ projectObj.attributeApplicableScenarios||'-' }}</div>
+          </div>
+        </div>
         <el-divider />
         <div class="info-card-title"><div class="title-li" /><span>产品描述</span></div>
         <div style="min-height: 30vh" v-html="projectObj.productDescribe" />
@@ -486,12 +500,20 @@ export default {
       color: #666;
     }
   }
+  .attribute-box {
+    display: inline-block;
+    width: 33%;
+  }
   .attribute-label {
+    display: inline-block;
+    width: 34%;
     padding: 10px;
     font-size: 17px;
     color: #999;
   }
   .attribute-value {
+    display: inline-block;
+    width: 64%;
     padding: 10px;
     font-size: 17px;
     color: #333;