✨ feat: 产品中心详情自适应

hookehuyr
Commit a2f64af52a55d2300f5b00347b80053caa60bd3e a2f64af5 1 parent cc835e24
Showing 2 changed files with 62 additions and 15 deletions
src/views/product/detail.vue
src/views/product/index.vue
--- a/src/views/product/detail.vue
View file @a2f64af
+++ b/src/views/product/detail.vue
View file @a2f64af
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 15:33:16
+ * @LastEditTime: 2024-10-11 16:17:21
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="product-detail">
     <hager-box>
-      <div>
+      <div v-if="!is_xs">
         <el-breadcrumb separator="/">
           <el-breadcrumb-item>所有产品</el-breadcrumb-item>
           <el-breadcrumb-item>配电产品</el-breadcrumb-item>
@@ -18,7 +18,7 @@
       </div>
     </hager-box>
     <hager-box class="box-n">
-      <el-row :gutter="10" style="margin-bottom: 3rem;">
+      <el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;">
         <el-col :span="10">
           <hager-carousel></hager-carousel>
         </el-col>
@@ -34,11 +34,25 @@
           </div>
         </el-col>
       </el-row>
+      <div v-else>
+        <div class="product-detail-info">
+          <div class="product-title" style="">HW+系列空气断路器</div>
+          <div class="product-sub" style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
+          <ul class="product-info-list">
+            <li>实现谐波测量，实时监测电能质量；</li>
+            <li>图文显示多电量参数，系统状态一目了然；</li>
+            <li>支持Modbus远程通讯协议，无线蓝牙连接等多种通讯方式，全方位提升客户的数字化体验。</li>
+          </ul>
+        </div>
+        <div v-for="(item, index) in images" :key="index" class="product-item-img">
+          <el-image style="height: 14rem;" :src="item" fit="cover"></el-image>
+        </div>
+      </div>
     </hager-box>
     <hager-box class="box-2n">
       <hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
-      <div class="product-advantage" style="">
+      <div :class="['product-advantage', is_xs ? 'xs' : '']">
-        <div class="item" v-for="(item, index) in 3" :key="index">
+        <div :class="['item', is_xs ? 'xs' : '']" v-for="(item, index) in 3" :key="index">
           <el-row :gutter="0" v-for="(item, index) in 5" :key="index">
             <el-col :span="6">极致的分断能力：</el-col>
             <el-col :span="18">标配独立的故障指示触点、远程复位、ZSI保护功能</el-col>
@@ -50,13 +64,13 @@
       <hager-h1 title="产品资料" sub="Product Information"></hager-h1>
       <div class="product-info">
         <div class="info-control">
-          <div class="control-left">
+          <div class="control-left xs">
-            <div :class="['button', is_active === 0 ? 'active' : '']" @click="onClick(0)">产品样本</div>
+            <div :class="['button xs', is_active === 0 ? 'active' : '']" @click="onClick(0)">产品样本</div>
-            <div :class="['button', is_active === 1 ? 'active' : '']" @click="onClick(1)">技术参数</div>
+            <div :class="['button xs', is_active === 1 ? 'active' : '']" @click="onClick(1)">技术参数</div>
-            <div :class="['button', is_active === 2 ? 'active' : '']" @click="onClick(2)">产品说明书</div>
+            <div :class="['button xs', is_active === 2 ? 'active' : '']" @click="onClick(2)">产品说明书</div>
-            <div :class="['button', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
+            <div :class="['button xs', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
           </div>
-          <div>
+          <div v-if="!is_xs">
             <div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">下载选中</div>
           </div>
         </div>
@@ -101,7 +115,12 @@ export default {
         name: '产品样本',
         size: '123MB',
         checked: false
-      }]
+      }],
+      images: [
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      ]
     }
   },
   computed: {
@@ -180,6 +199,12 @@ export default {
       background-color: #f0f0f0;
       border-top: 4px solid @primary-color;
       line-height: 2;
+      &.xs {
+        padding-bottom: 1rem;
+      }
+    }
+    &.xs {
+      display: block;
     }
   }
   .product-info {
@@ -191,12 +216,19 @@ export default {
       .control-left {
         display: flex;
         flex: 1 0 0;
+        &.xs {
+          display: flex;
+          flex-wrap: nowrap; /* 禁止换行 */
+          overflow-x: auto; /* 启用横向滚动 */
+          -webkit-overflow-scrolling: touch; /* 使滚动更平滑，适用于移动端 */
+        }
       }
       .button {
         background-color: #f3f3f3;
         padding: 1rem 2.2rem;
         border-radius: 5px;
         margin-right: 1rem;
+        text-align: center;
         &:hover {
           cursor: pointer;
         }
@@ -204,6 +236,11 @@ export default {
           background-color: @primary-color;
           color: #fff;
         }
+        &.xs {
+          flex: 0 0 auto; /* 子元素保持固定大小 */
+          width: 5rem; /* 可以根据需要设置宽度 */
+          margin-right: 10px; /* 子元素之间的间距 */
+        }
       }
     }
     .info-list {
@@ -243,5 +280,15 @@ export default {
       }
     }
   }
+
+  .product-item-img {
+    height: auto;
+    padding: 1.5rem;
+    text-align: center;
+    color: #333;
+    border-radius: 8px;
+    background-color: #f3f3f3;
+    margin-bottom: 1rem;
+  }
 }
 </style>
--- a/src/views/product/index.vue
View file @a2f64af
+++ b/src/views/product/index.vue
View file @a2f64af
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 15:19:35
+ * @LastEditTime: 2024-10-11 15:25:43
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
@@ -34,7 +34,7 @@
               <div class="product-item-img">
                 <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
               </div>
-              <p class="product-item-title">acb hw 空气断路器</p>
+              <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
             </div>
           </div>
           <div style="height: 5rem;"></div>
@@ -45,7 +45,7 @@
           <div class="product-item-img">
             <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
           </div>
-          <p class="product-item-title">acb hw 空气断路器</p>
+          <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
         </div>
       </div>
       <div style="height: 5rem;"></div>