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

958e66d4 · zhanglw · 8b3776e9 · 958e66d4
Commit 958e66d4 authored Aug 03, 2023 by zhanglw
Show whitespace changes
Inline Side-by-side

Showing with 62 additions and 40 deletions

details.vue src/views/homepage/product/details.vue +62 -40

No files found.
--- a/src/views/homepage/product/details.vue
+++ b/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">
+        <div>
-          <el-col :span="2"><div class="attribute-label">品牌</div></el-col>
+          <div v-if="projectObj.attributeBrand" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeBrand||'-' }}</div></el-col>
+            <div class="attribute-label">品牌</div>
-          <el-col :span="2"><div class="attribute-label">消耗电流</div></el-col>
+            <div class="attribute-value">{{ projectObj.attributeBrand||'-' }}</div>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeConsumptionCurrent||'-' }}</div></el-col>
+          </div>
-          <el-col :span="2"><div class="attribute-label">批号</div></el-col>
+          <div v-if="projectObj.attributeConsumptionCurrent" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeBatchNumber||'-' }}</div></el-col>
+            <div class="attribute-label">消耗电流</div>
-        </el-row>
+            <div class="attribute-value">{{ projectObj.attributeConsumptionCurrent||'-' }}</div>
-        <el-row :gutter="30">
+          </div>
-          <el-col :span="2"><div class="attribute-label">额定功率</div></el-col>
+          <div v-if="projectObj.attributeBatchNumber" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeRatedPower||'-' }}</div></el-col>
+            <div class="attribute-label">批号</div>
-          <el-col :span="2"><div class="attribute-label">型号</div></el-col>
+            <div class="attribute-value">{{ projectObj.attributeBatchNumber||'-' }}</div>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeModel||'-' }}</div></el-col>
+          </div>
-          <el-col :span="2"><div class="attribute-label">反应时间</div></el-col>
+          <div v-if="projectObj.attributeRatedPower" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeReactionTime||'-' }}</div></el-col>
+            <div class="attribute-label">额定功率</div>
-        </el-row>
+            <div class="attribute-value">{{ projectObj.attributeRatedPower||'-' }}</div>
-        <el-row :gutter="30">
+          </div>
-          <el-col :span="2"><div class="attribute-label">工作电压</div></el-col>
+          <div v-if="projectObj.attributeModel" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeWorkingVoltage||'-' }}</div></el-col>
+            <div class="attribute-label">型号</div>
-          <el-col :span="2"><div class="attribute-label">质量保证</div></el-col>
+            <div class="attribute-value">{{ projectObj.attributeModel||'-' }}</div>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeQualityAssurance||'-' }}</div></el-col>
+          </div>
-          <el-col :span="2"><div class="attribute-label">封装</div></el-col>
+          <div v-if="projectObj.attributeReactionTime" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeEncapsulation||'-' }}</div></el-col>
+            <div class="attribute-label">反应时间</div>
-        </el-row>
+            <div class="attribute-value">{{ projectObj.attributeReactionTime||'-' }}</div>
-        <el-row :gutter="30">
+          </div>
-          <el-col :span="2"><div class="attribute-label">产地</div></el-col>
+          <div v-if="projectObj.attributeWorkingVoltage" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeProducingArea||'-' }}</div></el-col>
+            <div class="attribute-label">工作电压</div>
-          <el-col :span="2"><div class="attribute-label">数量</div></el-col>
+            <div class="attribute-value">{{ projectObj.attributeWorkingVoltage||'-' }}</div>
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeNumber||'-' }}</div></el-col>
+          </div>
-          <el-col :span="2"><div class="attribute-label">颜色</div></el-col>
+          <div v-if="projectObj.attributeQualityAssurance" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeColor||'-' }}</div></el-col>
+            <div class="attribute-label">质量保证</div>
-        </el-row>
+            <div class="attribute-value">{{ projectObj.attributeQualityAssurance||'-' }}</div>
-        <el-row :gutter="30">
+          </div>
-          <el-col :span="2"><div class="attribute-label">适用场景</div></el-col>
+          <div v-if="projectObj.attributeEncapsulation" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value">{{ projectObj.attributeApplicableScenarios||'-' }}</div></el-col>
+            <div class="attribute-label">封装</div>
-          <el-col :span="2"><div class="attribute-label" /></el-col>
+            <div class="attribute-value">{{ projectObj.attributeEncapsulation||'-' }}</div>
-          <el-col :span="6"><div class="attribute-value" /></el-col>
+          </div>
-          <el-col :span="2"><div class="attribute-label" /></el-col>
+          <div v-if="projectObj.attributeProducingArea" class="attribute-box">
-          <el-col :span="6"><div class="attribute-value" /></el-col>
+            <div class="attribute-label">产地</div>
-        </el-row>
+            <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;