新增商品过渡页面以及对其它页面做了相应适配

src/views/ProductDetail.vue

@@ -100,6 +100,29 @@
             </div>
           </div>
 
+          <div class="detail-group-container">
+            <!-- 第一组：商品详情图标 + 文本 -->
+            <div class="detail-item-group"> <!-- 每组独立容器 -->
+              <img src="/imgs/productdetail/商品详情.png" alt="商品详情" class="detail-icon">
+              <span class="detail-text">商品材质||
+              <el-tag
+                  v-for="tag in product.tags"
+                  :key="tag"
+                  size="small"
+                  class="product-tag"
+              >
+                {{ tag }}
+              </el-tag>||品牌||产地
+            </span>
+            </div>
+
+            <!-- 第二组：小货车图标 + 文本 -->
+            <div class="detail-item-group"> <!-- 每组独立容器 -->
+              <img src="/imgs/productdetail/小货车.png" alt="小货车" class="detail-icon">
+              <span class="detail-text">预计两小时内发货，后天送达</span>
+            </div>
+          </div>
+
           <!-- 商品描述 -->
           <div class="product-description">
             <h3>商品描述</h3>
@@ -536,6 +559,39 @@ watch(
   color: #333;
 }
 
+.detail-group-container {
+  display: flex;
+  flex-direction: column; /* 让两组纵向堆叠（上下排列） */
+  gap: 12px; /* 两组之间的垂直间距（可根据需求调整，如 16px） */
+  margin: 16px 0; /* 与上下其他内容的间距，保持页面呼吸感 */
+}
+
+/* 每组容器：控制图标和文本的横向对齐 */
+.detail-item-group {
+  display: flex; /* 组内图标和文本横向排列 */
+  align-items: center; /* 图标与文本垂直居中（避免错位） */
+  gap: 8px; /* 图标和文本之间的横向间距（可调整） */
+}
+
+/* 图标样式：保持原大小，避免拉伸 */
+.detail-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain; /* 保持图片比例，不变形 */
+}
+
+/* 文本样式：保持原风格，优化 tag 间距 */
+.detail-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+
+/* 优化 tag 与文字的间距，避免拥挤 */
+.detail-text .product-tag {
+  margin: 0 4px; /* tag 左右留白，更美观 */
+}
+
 .product-description,
 .product-details {
   margin-bottom: 20px;