✨ feat: 新增公用颜色和样式

hookehuyr
Commit a86e211f53df24271fc70693b5d5ee47ac5942aa a86e211f 1 parent 2453fe7f
Showing 10 changed files with 102 additions and 33 deletions
src/common/mixin.js
src/components/common/hagerH1.vue
src/components/common/hagerHeader.vue
src/components/hagerCarousel.vue
src/route.js
src/styles/variables.less
src/views/index.vue
src/views/product/detail.vue
src/views/solution/index.vue
vite.config.js
--- a/src/common/mixin.js
View file @a86e211
+++ b/src/common/mixin.js
View file @a86e211
 /*
  * @Date: 2022-07-26 09:49:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-19 17:11:29
+ * @LastEditTime: 2024-09-30 09:44:55
- * @FilePath: /web/src/common/mixin.js
+ * @FilePath: /hager/src/common/mixin.js
  * @Description: 文件描述
  */
@@ -12,6 +12,11 @@ export default {
     mounted () {
       document.title = this.$route.meta.title;
     },
+    data () {
+      return {
+        top_img_height: '35rem',
+      };
+    },
     methods: {
     },
   },
--- a/src/components/common/hagerH1.vue
View file @a86e211
+++ b/src/components/common/hagerH1.vue
View file @a86e211
 <!--
  * @Date: 2024-09-29 10:07:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 15:19:21
+ * @LastEditTime: 2024-09-30 10:06:04
  * @FilePath: /hager/src/components/common/hagerH1.vue
  * @Description: 文件描述
 -->
@@ -44,12 +44,12 @@ export default {
 <style lang="less" scoped>
   .hagerH1 {
     .h1 {
-      color: #333;
+      color: @secondary-color;
       font-size: 1.75rem;
       font-weight: bold;
     }
     .sub {
-      color: #03aae3;
+      color: @primary-color;
       font-size: 1.25rem;
       font-weight: bold;
     }
--- a/src/components/common/hagerHeader.vue
View file @a86e211
+++ b/src/components/common/hagerHeader.vue
View file @a86e211
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 14:27:53
+ * @LastEditTime: 2024-09-30 09:59:51
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -12,20 +12,20 @@
       <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
         <el-row style="">
           <el-col :sm="16" :md="16" :lg="16" :xl="16">
-            <div style="display: flex;height: 5rem; align-items: center; justify-content: space-around;">
+            <div class="nav-wrapper">
               <div>图标</div>
-              <div @click="onClickProduct">产品中心</div>
+              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">产品中心</div>
-              <div>解决方案</div>
+              <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
-              <div>新闻中心</div>
+              <div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
-              <div>招聘信息</div>
+              <div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
-              <div>关于海格</div>
+              <div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
-              <div>联系我们</div>
+              <div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
-              <div>首页</div>
+              <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
             </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 style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid# f5f5f5;  background-color: #e3f1f7; padding: 0.5rem 1rem;">
+              <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5;  background-color: #e3f1f7; padding: 0.5rem 1rem;">
                 <i class=el-icon-zoom-out></i>&nbsp;
                 <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
               </div>
@@ -54,7 +54,7 @@
                   <div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
                     <div>{{ item.name }}</div>
                     <div>
-                      <div v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
+                      <div @click="goToP(p.id)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
                     </div>
                   </div>
                 </div>
@@ -70,6 +70,7 @@
 <script>
 import mixin from 'common/mixin';
+import { parseQueryString } from '@/utils/tools';
 export default {
   mixins: [mixin.init],
@@ -198,11 +199,20 @@ export default {
         }
       }],
       product_info: {},
+      is_active: '',
     }
   },
   mounted () {
     this.product_info = this.product_menu[0]['info'];
   },
+  watch: {
+    '$route' (to, from) {
+      this.is_active = to.meta.tag;
+      // console.warn(from);
+      // console.warn(location.hash);
+      // console.warn(parseQueryString(window.location.href));
+    }
+  },
   methods: {
     onClickProduct() {
       // 当鼠标悬停时
@@ -213,6 +223,22 @@ export default {
     },
     closeMenu () {
       this.show = false;
+    },
+    goTo (path) { // 跳转页面
+      if (this.$route.path !== path) { // 不能重复点击当前页面
+        this.$router.push({
+          path,
+        });
+      }
+    },
+    goToP (id) {
+      this.$router.push({
+        path: '/product/detail',
+        query: {
+          id: id
+        }
+      });
+      this.closeMenu();
     }
   }
 }
@@ -248,5 +274,19 @@ export default {
         }
       }
     }
+    .nav-wrapper {
+      display: flex;
+      height: 5rem;
+      align-items: center;
+      justify-content: space-around;
+      .item {
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      .active {
+        color: @primary-color;
+      }
+    }
   }
 </style>
--- a/src/components/hagerCarousel.vue
View file @a86e211
+++ b/src/components/hagerCarousel.vue
View file @a86e211
 <!--
  * @Date: 2024-09-27 19:49:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 14:58:52
+ * @LastEditTime: 2024-09-30 10:04:50
  * @FilePath: /hager/src/components/hagerCarousel.vue
  * @Description: 文件描述
 -->
@@ -161,7 +161,7 @@ export default {
   }
   .thumbnail.active {
-    border: 2px solid #00f; /* 选中的缩略图边框样式 */
+    border: 2px solid @primary-color; /* 选中的缩略图边框样式 */
   }
   .main-image {
--- a/src/route.js
View file @a86e211
+++ b/src/route.js
View file @a86e211
 /*
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 16:11:58
+ * @LastEditTime: 2024-09-30 09:47:44
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  */
@@ -10,7 +10,8 @@ export default [{
   name: '首页',
   component: () => import('@/views/index'),
   meta: {
-    title: '海格电器'
+    title: '海格电器',
+    tag: 'index'
   },
   children: []
 }, {
@@ -18,7 +19,8 @@ export default [{
   name: '二级目录',
   component: () => import('@/views/product/index'),
   meta: {
-    title: '海格电器'
+    title: '海格电器',
+    tag: 'product'
   },
   children: []
 }, {
@@ -26,7 +28,8 @@ export default [{
   name: '详情页',
   component: () => import('@/views/product/detail'),
   meta: {
-    title: '海格电器'
+    title: '海格电器',
+    tag: 'product'
   },
   children: []
 }, {
@@ -34,7 +37,8 @@ export default [{
   name: '解决方案',
   component: () => import('@/views/solution/index'),
   meta: {
-    title: '海格电器'
+    title: '海格电器',
+    tag: 'solution'
   },
   children: []
 }, {
@@ -42,7 +46,8 @@ export default [{
   name: '解决方案详情',
   component: () => import('@/views/solution/detail'),
   meta: {
-    title: '海格电器'
+    title: '海格电器',
+    tag: 'solution'
   },
   children: []
 }]
--- a/src/styles/variables.less 0 → 100644
View file @a86e211
+++ b/src/styles/variables.less 0 → 100644
View file @a86e211
+// 自定义颜色
+@primary-color: #3498db;
+@secondary-color: #03467c;
+@text-color: #333;
+@background-color: #f5f5f5;
--- a/src/views/index.vue
View file @a86e211
+++ b/src/views/index.vue
View file @a86e211
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 17:12:34
+ * @LastEditTime: 2024-09-30 09:45:01
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-container">
-    <el-carousel height="40rem" :interval="8000">
+    <el-carousel :height="top_img_height" :interval="8000">
       <el-carousel-item v-for="item in 4" :key="item">
         <el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
       </el-carousel-item>
@@ -151,6 +151,13 @@ export default {
     //   boxes[boxes.length - 1].classList.add('other');
     // }
   },
+  watch: {
+    // 监听$route对象的变化
+    $route(to, from) {
+      console.log('路由变化了：', to.path);
+      // 在此处执行你想要的逻辑
+    }
+  },
   methods: {
   }
--- a/src/views/product/detail.vue
View file @a86e211
+++ b/src/views/product/detail.vue
View file @a86e211
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 15:44:40
+ * @LastEditTime: 2024-09-30 10:06:55
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -135,7 +135,7 @@ export default {
       box-sizing: border-box;      /* 确保padding和border不会影响宽度计算 */
       padding-top: 1rem;
       background-color: #f0f0f0;
-      border-top: 4px solid #03aae3;
+      border-top: 4px solid @primary-color;
       p {
         line-height: 2;
       }
@@ -144,7 +144,7 @@ export default {
   .product-info {
     .info-control {
       display: flex;
-      border-bottom: 4px solid #03aae3;
+      border-bottom: 4px solid @primary-color;
       padding-bottom: 1rem;
       margin-top: 2rem;
       .control-left {
@@ -159,7 +159,7 @@ export default {
           cursor: pointer;
         }
         &.active {
-          background-color: #03aae3;
+          background-color: @primary-color;
           color: #fff;
         }
       }
@@ -177,7 +177,7 @@ export default {
         span {
           &:hover {
             cursor: pointer;
-            color: #03aae3;
+            color: @primary-color;
             text-decoration: underline;
           }
         }
--- a/src/views/solution/index.vue
View file @a86e211
+++ b/src/views/solution/index.vue
View file @a86e211
 <template>
   <div class="hager-solution-index">
-    <el-image style="width: 100%; height: 35rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+    <el-image :style="{ width: '100%', height: top_img_height }" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
     <hager-box class="box-n">
       <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
       <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
--- a/vite.config.js
View file @a86e211
+++ b/vite.config.js
View file @a86e211
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 15:25:44
+ * @LastEditTime: 2024-09-30 09:58:00
  * @FilePath: /hager/vite.config.js
  * @Description: 文件描述
  */
@@ -77,6 +77,13 @@ return defineConfig({
     // mainFields: [''], // package.json 中，在解析包的入口点时尝试的字段列表。注意，这比从 exports 字段解析的情景导出优先级低：如果一个入口点从 exports 成功解析，主字段将被忽略。
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], // 导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会干扰 IDE 和类型支持。
   },
+  css: {
+    preprocessorOptions: {
+      less: {
+        additionalData: `@import "@/styles/variables.less";`, // 自动导入变量文件
+      },
+    },
+  },
   logLevel: 'info', // 调整控制台输出的级别，默认为 'info'。
   // clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。命令行模式下请通过 --clearScreen false 设置。
   server: {