完善产品详情页样式和功能

hookehuyr
Commit 5682b3c8bac42eda08c35dddf5b849769749d2b3 5682b3c8 1 parent c250d7aa
Showing 3 changed files with 119 additions and 59 deletions
src/main.js
src/views/product/detail.vue
src/views/product/index.vue
--- a/src/main.js
View file @5682b3c
+++ b/src/main.js
View file @5682b3c
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 16:31:40
+ * @LastEditTime: 2024-09-30 15:31:44
  * @FilePath: /hager/src/main.js
  * @Description: 文件描述
  */
@@ -11,7 +11,7 @@ import App from './App.vue'
 import VueRouter from 'vue-router'
 import router from './router'
 // import ElementUI from 'element-ui';
-// import 'element-ui/lib/theme-chalk/index.css';
+import 'element-ui/lib/theme-chalk/index.css';
 import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，用于在某些条件下隐藏元素
 // import '@/styles/element-ui/element-variables.scss' // 自定义主题, 不需要展示屏蔽
 // import { Button, Row, Col, } from 'element-ui';
--- a/src/views/product/detail.vue
View file @5682b3c
+++ b/src/views/product/detail.vue
View file @5682b3c
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 10:06:55
+ * @LastEditTime: 2024-09-30 15:33:16
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -18,15 +18,15 @@
       </div>
     </hager-box>
     <hager-box class="box-n">
-      <el-row :gutter="10">
+      <el-row :gutter="10" style="margin-bottom: 3rem;">
         <el-col :span="10">
           <hager-carousel></hager-carousel>
         </el-col>
         <el-col :span="14">
-          <div>
+          <div class="product-detail-info">
-            <div style="font-size: 2rem; font-weight: bold;">HW+系列空气断路器</div>
+            <div class="product-title" style="">HW+系列空气断路器</div>
-            <div style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
+            <div class="product-sub" style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
-            <ul style="padding: 0 1rem;">
+            <ul class="product-info-list">
               <li>实现谐波测量，实时监测电能质量；</li>
               <li>图文显示多电量参数，系统状态一目了然；</li>
               <li>支持Modbus远程通讯协议，无线蓝牙连接等多种通讯方式，全方位提升客户的数字化体验。</li>
@@ -38,26 +38,11 @@
     <hager-box class="box-2n">
       <hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
       <div class="product-advantage" style="">
-        <div class="item">
+        <div class="item" v-for="(item, index) in 3" :key="index">
-          <p>极致的分断能力： 全系列Icu=Ics</p>
+          <el-row :gutter="0" v-for="(item, index) in 5" :key="index">
-          <p>极致的分断能力： 全系列Icu=Ics</p>
+            <el-col :span="6">极致的分断能力：</el-col>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
+            <el-col :span="18">标配独立的故障指示触点、远程复位、ZSI保护功能</el-col>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
+          </el-row>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-        </div>
-        <div class="item">
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-        </div>
-        <div class="item">
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
-          <p>极致的分断能力： 全系列Icu=Ics</p>
         </div>
       </div>
     </hager-box>
@@ -66,24 +51,25 @@
       <div class="product-info">
         <div class="info-control">
           <div class="control-left">
-            <div class="button active" style="margin-right: 1rem;">产品样本</div>
+            <div :class="['button', is_active === 0 ? 'active' : '']" @click="onClick(0)">产品样本</div>
-            <div class="button" style="margin-right: 1rem;">技术参数</div>
+            <div :class="['button', is_active === 1 ? 'active' : '']" @click="onClick(1)">技术参数</div>
-            <div class="button" style="margin-right: 1rem;">产品说明书</div>
+            <div :class="['button', is_active === 2 ? 'active' : '']" @click="onClick(2)">产品说明书</div>
-            <div class="button" style="margin-right: 1rem;">安装教程</div>
+            <div :class="['button', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
           </div>
           <div>
-            <div class="button">下载选中</div>
+            <div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">下载选中</div>
           </div>
         </div>
         <div>
-          <div class="info-list">
+          <div class="info-list" v-for="(item, index) in download_list" :key="index">
             <div class="info-list-title">
-              <i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;Hw+系列空气断路器&nbsp;&nbsp;17.77MB
+              <i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;{{ item.size }}
             </div>
             <div class="info-list-control">
-              <span>预览</span>&nbsp;
+              <span>预览</span>
-              <span>直接下载</span>&nbsp;
+              <span>直接下载</span>
-              <i class="el-icon-folder-checked"></i>
+              <i v-if="item.checked" @click="item.checked = !item.checked" class="el-icon-folder-checked download-checked"></i>
+              <i v-else @click="item.checked = !item.checked" class="el-icon-folder  download-unchecked"></i>
             </div>
           </div>
         </div>
@@ -97,20 +83,59 @@ import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import hagerCarousel from '@/components/hagerCarousel';
 import hagerH1 from '@/components/common/hagerH1.vue';
+import { MessageBox, Message } from 'element-ui';
 export default {
   components: { hagerBox, hagerCarousel, hagerH1 },
   mixins: [mixin.init],
   data () {
     return {
-
+      is_active: 0,
+      download_list: [{
+        id: '123',
+        name: '产品样本',
+        size: '123MB',
+        checked: false
+      }, {
+        id: '123',
+        name: '产品样本',
+        size: '123MB',
+        checked: false
+      }]
+    }
+  },
+  computed: {
+    is_download_checked () {
+      return this.download_list.filter(item => item.checked).length > 0;
     }
   },
   mounted () {
   },
   methods: {
-
+    onClick (n) {
+      this.is_active = n;
+    },
+    goToDownload () {
+      if (this.is_download_checked) {
+        MessageBox.prompt('请输入发送邮箱', '温馨提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: '邮箱格式不正确'
+        }).then(({ value }) => {
+          Message({
+            type: 'success',
+            message: '你的邮箱是: ' + value
+          });
+        }).catch(() => {
+          Message({
+            type: 'info',
+            message: '取消输入'
+          });
+        });
+      }
+    }
   }
 }
 </script>
@@ -125,6 +150,24 @@ export default {
     background-color: #f1f1f1;
     padding: 2rem 0;
   }
+  .product-detail-info {
+    .product-title {
+      font-size: 2rem;
+      font-weight: bold;
+      color: @secondary-color;
+    }
+    .product-sub {
+      margin: 1rem 0 2rem;
+      color: @text-color;
+    }
+    .product-info-list {
+      padding: 0 1rem;
+      li {
+        line-height: 2;
+        font-size: 0.9rem;
+      }
+    }
+  }
   .product-advantage {
     margin-top: 1rem;
     display: flex;
@@ -136,11 +179,9 @@ export default {
       padding-top: 1rem;
       background-color: #f0f0f0;
       border-top: 4px solid @primary-color;
-      p {
       line-height: 2;
     }
   }
-  }
   .product-info {
     .info-control {
       display: flex;
@@ -155,6 +196,7 @@ export default {
         background-color: #f3f3f3;
         padding: 1rem 2.2rem;
         border-radius: 5px;
+        margin-right: 1rem;
         &:hover {
           cursor: pointer;
         }
@@ -168,19 +210,36 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 2rem 0;
+      padding-top: 2rem;
       color: #6b6b6b;
       .info-list-title {
         display: flex; align-items: center;
       }
       .info-list-control {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         span {
+          margin-right: 1rem;
           &:hover {
             cursor: pointer;
             color: @primary-color;
             text-decoration: underline;
           }
         }
+        .download-checked {
+          font-size: 1.5rem;
+          color: @primary-color;
+          &:hover {
+            cursor: pointer;
+          }
+        }
+        .download-unchecked {
+          font-size: 1.5rem;
+          &:hover {
+            cursor: pointer;
+          }
+        }
       }
     }
   }
--- a/src/views/product/index.vue
View file @5682b3c
+++ b/src/views/product/index.vue
View file @5682b3c
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 14:00:01
+ * @LastEditTime: 2024-09-30 14:09:02
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
@@ -99,22 +99,7 @@ export default {
         margin-bottom: 0.5rem;
       }
     }
-  }
-  .el-collapse {
-    border-top: 0;
-  }
-  .el-collapse-item {
-    .el-collapse-item__header {
-      font-size: 0.9rem;
-    }
-    .p-item {
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
-      }
-    }
-  }
     .product-list {
       display: flex;
@@ -143,4 +128,20 @@ export default {
         text-decoration: underline;
       }
     }
+  }
+
+  .el-collapse {
+    border-top: 0;
+  }
+  .el-collapse-item {
+    .el-collapse-item__header {
+      font-size: 0.9rem;
+    }
+    .p-item {
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
 </style>