feat: 商品卡片颜色单位显示一行，有面积时另起一行显示规格

src/pages/product/manage.vue

@@ -38,10 +38,15 @@
                 <text class="product-name">{{ item.name }}</text>
                 <text class="product-category" v-if="item.categoryName">{{ item.categoryName }}</text>
               </view>
-              <text class="product-spec">{{ item.spec || '-' }}</text>
+              <view class="product-row">
+                <text class="product-spec">{{ item.spec || '-' }}</text>
+                <text class="product-unit">/{{ item.unit }}</text>
+              </view>
+              <view class="product-spec-row" v-if="item.length && item.width">
+                <text class="spec-text">规格：{{ item.length }} x {{ item.width }} = {{ item.area }} m²</text>
+              </view>
               <view class="product-price">
                 <text class="price">¥{{ item.price }}</text>
-                <text class="unit">/{{ item.unit }}</text>
               </view>
               <view class="product-status">
                 <text :class="['status', item.status === 1 ? 'on' : 'off']">
@@ -474,10 +479,33 @@ export default {
 .product-spec {
   font-size: 24rpx;
   color: #999;
-  margin-top: 8rpx;
   display: block;
 }
 
+.product-row {
+  display: flex;
+  align-items: center;
+  margin-top: 8rpx;
+}
+
+.product-unit {
+  color: #999;
+  font-size: 24rpx;
+  margin-left: 4rpx;
+}
+
+.product-spec-row {
+  margin-top: 8rpx;
+}
+
+.spec-text {
+  font-size: 24rpx;
+  color: #666;
+  background: #f5f5f5;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+}
+
 .product-price {
   margin-top: 12rpx;
 }