细节调整

hookehuyr
Commit 3bfa53933576f19b9d3961855e7b7af139848b62 3bfa5393 1 parent 70d584f9
Showing 5 changed files with 84 additions and 45 deletions
components.d.ts
src/components/common/hagerFooter.vue
src/components/common/hagerHeader.vue
src/views/index.vue
src/views/product/index.vue
--- a/components.d.ts
View file @3bfa539
+++ b/components.d.ts
View file @3bfa539
@@ -19,6 +19,7 @@ declare module 'vue' {
     ElImage: typeof import('element-ui/lib/image')['default']
     ElInput: typeof import('element-ui/lib/input')['default']
     ElRow: typeof import('element-ui/lib/row')['default']
+    ElTooltip: typeof import('element-ui/lib/tooltip')['default']
     HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
     HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
     HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default']
--- a/src/components/common/hagerFooter.vue
View file @3bfa539
+++ b/src/components/common/hagerFooter.vue
View file @3bfa539
 <!--
  * @Date: 2024-09-26 13:42:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-27 20:31:41
+ * @LastEditTime: 2024-09-30 16:26:28
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @Description: 文件描述
 -->
@@ -124,7 +124,7 @@ export default {
       margin-bottom: 0.5rem;
     }
     .link-info {
-      font-size: 0.75rem;
+      font-size: 0.85rem;
       color: #FFF;
       line-height: 2;
       display: flex;
--- a/src/components/common/hagerHeader.vue
View file @3bfa539
+++ b/src/components/common/hagerHeader.vue
View file @3bfa539
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 11:34:14
+ * @LastEditTime: 2024-09-30 17:21:13
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -10,11 +10,11 @@
     <el-row class="hidden-xs-only" style="background-color: #fff;">
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
       <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
-        <el-row style="">
+        <el-row>
           <el-col :sm="16" :md="16" :lg="16" :xl="16">
             <div class="nav-wrapper">
               <div>图标</div>
-              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">产品中心</div>
+              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">产品中心</div>
               <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
               <div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
               <div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
@@ -24,13 +24,21 @@
             </div>
           </el-col>
           <el-col :sm="8" :md="8" :lg="8" :xl="8">
-            <div style="display: flex; height: 5rem; align-items: center;justify-content: right;">
+            <div class="nav-right">
-              <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5;  background-color: #e3f1f7; padding: 0.5rem 1rem;">
+              <div class="search">
-                <i class=el-icon-zoom-out></i>&nbsp;
+                <i class=el-icon-search></i>&nbsp;
                 <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
               </div>
-              <div style="margin: 0 1rem;"><i class=el-icon-eleme></i></div>
+              <div @click="goToWeb" class="tooltip">
-              <div><i class=el-icon-eleme></i></div>
+                <el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
+                  <i class=el-icon-orange style="font-size: 1.25rem;"></i>
+                </el-tooltip>
+              </div>
+              <div @click="goToLogin" class="tooltip">
+                <el-tooltip class="item" effect="dark" content="用户登录" placement="bottom">
+                  <i class=el-icon-user style="font-size: 1.25rem;"></i>
+                </el-tooltip>
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -229,6 +237,7 @@ export default {
   watch: {
     '$route' (to, from) {
       this.is_active = to.meta.tag;
+      this.show = false;
     }
   },
   methods: {
@@ -301,7 +310,15 @@ export default {
         }
       });
       this.closeMenu();
-    }
+    },
+    goToWeb () {
+      console.warn('暂无跳转');
+    },
+    goToLogin () {
+      this.$router.push({
+        path: '/login'
+      });
+    },
   }
 }
 </script>
@@ -407,5 +424,25 @@ export default {
         color: @primary-color;
       }
     }
+    .nav-right {
+      display: flex;
+      height: 5rem;
+      align-items: center;
+      justify-content: right;
+      .search {
+        display: flex;
+        align-items: center;
+        border-radius: 1rem;
+        border: 1px solid #f5f5f5;
+        background-color: #e3f1f7;
+        padding: 0.5rem 1rem;
+      }
+      .tooltip {
+        margin: 0 1rem;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
   }
 </style>
--- a/src/views/index.vue
View file @3bfa539
+++ b/src/views/index.vue
View file @3bfa539
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 16:21:59
+ * @LastEditTime: 2024-09-30 16:57:53
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -55,19 +55,7 @@
     <hager-box class="box-n">
       <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
       <div class="hager-product-center">
-        <div class="product-item">
+        <div v-for="(item, index) in 4" :key="index" class="product-item">
-          <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
-          <p style="margin-top: 1rem;">atS三型特决井天</p>
-        </div>
-        <div class="product-item">
-          <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
-          <p style="margin-top: 1rem;">atS三型特决井天</p>
-        </div>
-        <div class="product-item">
-          <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
-          <p style="margin-top: 1rem;">atS三型特决井天</p>
-        </div>
-        <div class="product-item">
           <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
           <p style="margin-top: 1rem;">atS三型特决井天</p>
         </div>
@@ -315,6 +303,12 @@ export default {
       color: #333;
       border-radius: 8px;
       background-color: #f3f3f3;
+      transition: transform 0.3s ease-in-out;
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.05);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      }
     }
   }
 }
--- a/src/views/product/index.vue
View file @3bfa539
+++ b/src/views/product/index.vue
View file @3bfa539
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 14:09:02
+ * @LastEditTime: 2024-09-30 16:48:54
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
@@ -22,24 +22,8 @@
             <div class="product-nav-title">按产品类别查找</div>
             <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
             <el-collapse v-model="activeNames" @change="handleChange">
-              <el-collapse-item title="低压主配电" name="1">
+              <el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
-                <div class="p-item">acb hw01 空气断路器</div>
+                <div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
-                <div class="p-item">unimes（优跃）开关柜</div>
-                <div class="p-item">unimes（优跃）面板开关</div>
-                <div class="p-item">acb hw04 空气断路器</div>
-                <div class="p-item">acb hwo5 空气断路器</div>
-                <div class="p-item">acb hw06 空气断路器</div>
-                <div class="p-item">acb hwo7 空气断路器</div>
-              </el-collapse-item>
-              <el-collapse-item title="分配电" name="2">
-              </el-collapse-item>
-              <el-collapse-item title="终端配电" name="3">
-              </el-collapse-item>
-              <el-collapse-item title="开关面板" name="4">
-              </el-collapse-item>
-              <el-collapse-item title="酒店客控" name="5">
-              </el-collapse-item>
-              <el-collapse-item title="智能家居" name="6">
               </el-collapse-item>
             </el-collapse>
           </div>
@@ -71,7 +55,22 @@ export default {
   data () {
     return {
       search_input: '',
-      activeNames: ['1']
+      activeNames: ['1'],
+      c_list: [{
+        title: '低压主配电',
+        name: '1',
+        list: [{
+          id: '',
+          name: 'acb hw01 空气断路器'
+        }]
+      }, {
+        title: '分配电',
+        name: '2',
+        list: [{
+          id: '',
+          name: 'acb hw01 空气断路器'
+        }]
+      }]
     }
   },
   mounted () {
@@ -80,6 +79,14 @@ export default {
   methods: {
     handleChange(val) {
       console.log(val);
+    },
+    goToP (item) { // 跳转产品详情
+      this.$router.push({
+        path: '/product/detail',
+        query: {
+          // id: id
+        }
+      });
     }
   }
 }