图标和文字调整

hookehuyr
Commit b0fcf7ee6123a8adc8da98c7f157e3bc5ac0941a b0fcf7ee 1 parent 1f355bbb
Showing 2 changed files with 35 additions and 23 deletions
src/components/common/hagerHeader.vue
src/views/index.vue
--- a/src/components/common/hagerHeader.vue
View file @b0fcf7e
+++ b/src/components/common/hagerHeader.vue
View file @b0fcf7e
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-15 16:53:54
+ * @LastEditTime: 2024-10-16 10:32:24
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -13,7 +13,7 @@
         <el-row>
           <el-col :sm="6" :md="6" :lg="6" :xl="6">
             <div class="nav-logo">
-              <div>图标</div>
+              <el-image style="width: auto; height: 2.5rem" src="https://cdn.ipadbiz.cn/hager/icon/logo@2x.png" fit="fit"></el-image>
             </div>
           </el-col>
           <el-col :sm="10" :md="10" :lg="10" :xl="10">
@@ -30,12 +30,14 @@
             <div class="nav-right" style="float: right;">
                 <div @click="goToWeb" class="tooltip">
                   <el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
-                    <i class=el-icon-orange style="font-size: 1.25rem;"></i>
+                    <!-- <i class=el-icon-orange style="font-size: 1.25rem;"></i> -->
+                    <el-image style="width: auto; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%AF%AD%E8%A8%80@2x.png" fit="fit"></el-image>
                   </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-image style="width: auto; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E7%99%BB%E9%99%86@2x.png" fit="fit"></el-image>
+                    <!-- <i class=el-icon-user style="font-size: 1.25rem;"></i> -->
                   </el-tooltip>
                 </div>
             </div>
@@ -51,7 +53,7 @@
           <el-col :sm="16" :md="16" :lg="16" :xl="16">
             <div class="nav-wrapper">
               <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">
-                <i class="el-icon-s-operation"></i>
+                <el-image style="width: auto; height: 0.65rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%8F%9C%E5%8D%95@2x.png" fit="fit"></el-image>
                 产品中心
               </div>
               <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
@@ -68,8 +70,8 @@
             <div style="display: flex; width: 100%;">
               <div class="product-left-wrapper">
                 <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
-                  <div style="display: flex; align-items: center;">
+                  <div class="icon-text">
-                    <el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
+                    <el-image style="width: auto; height: 1.65rem" :src="item.icon" fit="fit"></el-image>
                     &nbsp;
                     {{ item.name }}
                   </div>
@@ -138,6 +140,7 @@ export default {
       test1: true,
       product_menu: [{
         name: '配电产品',
+        icon: 'https://cdn.ipadbiz.cn/hager/icon/%E9%85%8D%E7%94%B5%E4%BA%A7%E5%93%81@2x.png',
         info: {
           name: '配电产品',
           desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
@@ -249,6 +252,7 @@ export default {
         }
       }, {
         name: '成套产品',
+        icon: 'https://cdn.ipadbiz.cn/hager/icon/%E4%BA%A7%E5%93%81@2x.png',
         info: {
           name: '成套产品',
           desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
@@ -256,6 +260,7 @@ export default {
         }
       }, {
         name: '开关面板',
+        icon: 'https://cdn.ipadbiz.cn/hager/icon/%E5%BC%80%E5%85%B3@2x.png',
         info: {
           name: '开关面板',
           desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
@@ -263,6 +268,7 @@ export default {
         }
       }, {
         name: '智能控制',
+        icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
         info: {
           name: '智能控制',
           desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
@@ -452,6 +458,10 @@ export default {
           i {
             color: @primary-color;
           }
+          .icon-text {
+            display: flex;
+            align-items: center;
+          }
         }
       }
       .product-right-wrapper {
@@ -498,6 +508,7 @@ export default {
               &:hover {
                 cursor: pointer;
                 text-decoration: underline;
+                color: @primary-color;
               }
             }
           }
@@ -521,6 +532,7 @@ export default {
         font-size: 0.95rem;
         &:hover {
           cursor: pointer;
+          color: @primary-color;
         }
       }
       .active {
--- a/src/views/index.vue
View file @b0fcf7e
+++ b/src/views/index.vue
View file @b0fcf7e
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-15 18:40:38
+ * @LastEditTime: 2024-10-16 10:25:22
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -13,7 +13,7 @@
       </el-carousel-item>
     </el-carousel>
     <hager-box class="box-n">
-      <hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
+      <hager-h1 title="海格全球" sub="Hager Group"></hager-h1>
       <div class="hager-global">
         <div class="hager-global-info-fold">
           <p>海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖<span class="strong">住宅、商业建筑、公共建筑和工业。</span><i v-if="is_fold" class="el-icon-arrow-up" @click="toggleFold(true)"></i><i v-else class="el-icon-arrow-down" @click="toggleFold(false)"></i></p>
@@ -84,7 +84,7 @@
       </div>
     </hager-box>
     <hager-box class="box-n">
-      <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
+      <hager-h1 title="产品中心" sub="Product"></hager-h1>
       <div v-if="!is_xs" class="hager-product-center">
         <el-row :gutter="15">
           <el-col :span="6" v-for="(item, index) in product_list" :key="index">
@@ -94,6 +94,9 @@
             </div>
           </el-col>
         </el-row>
+        <div class="more-box" style="margin-top: 2rem;">
+          <hager-more></hager-more>
+        </div>
       </div>
       <div v-else>
         <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
@@ -114,9 +117,6 @@
           </div>
         </div>
       </div>
-      <div class="more-box" style="margin-top: 2rem;">
-        <hager-more></hager-more>
-      </div>
     </hager-box>
     <hager-box v-if="!is_xs" class="box-2n">
       <hager-h1 title="最新资讯" sub="News"></hager-h1>
@@ -166,8 +166,8 @@
       </div>
     </div>
     <hager-box class="box-n">
-      <hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
+      <hager-h1 title="招聘信息" sub="Recruitment"></hager-h1>
-      <p style="margin: 2rem 0;">心国近心，支注万你。海恰人囫指员光工，然于則行！我们哦这音齐稱央那八我们附行列，共同书与成功的扁草。用你的才罕，刨道九限可能！</p>
+      <p style="margin: 2rem 0;">德国匠心，专注为你。海格集团招贤纳士，携手前行！我们诚邀各界精英加入我们的行列，共同书写成功的篇章。用你的才华，创造无限可能！ </p>
       <div class="more-box"  style="margin-top: 2rem;">
         <hager-more></hager-more>
       </div>
@@ -225,17 +225,17 @@ export default {
         title: '4住宅解决方案'
       }],
       product_list: [{
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
-        title: '三型特决井天'
+        title: 'hw01 空气断路器'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
-        title: '三型特决井天'
+        title: 'h3+ 智能塑壳断路器'
       }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
-        title: '三型特决井天'
+        title: 'ats自动转换开关'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
-        title: '三型特决井天'
+        title: 'KNX智能控制模块'
       }],
       swiperOption: {
         slidesPerView: 2,