🐞 fix: 细节调整优化

hookehuyr
Commit 7ffc187b1f49f04c44b57b4d63fef6e394a6450b 7ffc187b 1 parent 91eefa08
Showing 4 changed files with 47 additions and 34 deletions
src/App.vue
src/components/common/hagerHeader.vue
src/views/solution/detail.vue
src/views/solution/index.vue
--- a/src/App.vue
View file @7ffc187
+++ b/src/App.vue
View file @7ffc187
 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-16 17:07:50
+ * @LastEditTime: 2024-10-17 09:45:26
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
@@ -81,6 +81,7 @@ body {
   .text {
     font-weight: bold;
     .title {
+      margin-bottom: 1rem;
       font-size: 2.5rem;
       color: @secondary-color;
     }
--- a/src/components/common/hagerHeader.vue
View file @7ffc187
+++ b/src/components/common/hagerHeader.vue
View file @7ffc187
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-16 10:32:24
+ * @LastEditTime: 2024-10-17 11:04:59
  * @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">
-              <el-image style="width: auto; height: 2.5rem" src="https://cdn.ipadbiz.cn/hager/icon/logo@2x.png" fit="fit"></el-image>
+              <el-image style="width: 8rem; 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">
@@ -31,12 +31,12 @@
                 <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> -->
-                    <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-image style="width: 1rem; 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">
-                    <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>
+                    <el-image style="width: 1rem; 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>
@@ -52,14 +52,14 @@
         <el-row>
           <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">
+              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">
-                <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>
+                <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>&nbsp;
-                产品中心
+                <span @mouseenter="onClickProduct">产品中心</span>
               </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>
-              <div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
+              <div :class="[is_active === 'about' ? 'active' : '', 'item']" @click="goTo('/about')">关于海格</div>
               <div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
               <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
             </div>
@@ -530,6 +530,7 @@ export default {
         color: @secondary-color;
         margin-right: 1.5rem;
         font-size: 0.95rem;
+        height: 1.5rem;
         &:hover {
           cursor: pointer;
           color: @primary-color;
--- a/src/views/solution/detail.vue
View file @7ffc187
+++ b/src/views/solution/detail.vue
View file @7ffc187
 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-16 17:42:18
+ * @LastEditTime: 2024-10-16 18:55:21
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -58,7 +58,8 @@
         <swiper-slide v-for="(item, index) in product_list" :key="index">
           <div class="card-box" @click="goToProduct(item)">
             <div class="card-image-wrapper">
-              <el-image :src="item.src" fit="fit"></el-image>
+              <!-- <el-image :src="item.src" fit="fit"></el-image> -->
+              <img :src="item.src" style="">
             </div>
             <p class="card-title">{{ item.title }}</p>
           </div>
@@ -239,33 +240,40 @@ export default {
   }
   .hager-success-cases {
     margin-top: 2rem;
-    display: grid;
+    // display: grid;
-    grid-template-columns: repeat(3, 1fr); /* 一行显示4个 */
+    // grid-template-columns: repeat(3, 1fr); /* 一行显示4个 */
-    gap: 1.5rem; /* 每个项目之间的间距 */
+    // gap: 1.5rem; /* 每个项目之间的间距 */
-    .case-item {
+    display: flex;
-      position: relative;
+    flex-wrap: wrap;
-      height: 12rem;
+    justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
-      padding: 1.5rem;
+    // .case-item {
-      text-align: center;
+    //   position: relative;
-      color: #FFF;
+    //   height: 12rem;
-      border-radius: 8px;
+    //   padding: 1.5rem;
-      background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+    //   text-align: center;
-      background-size: cover;
+    //   color: #FFF;
-      background-position: top center;
+    //   border-radius: 8px;
-      transition: transform 0.3s ease-in-out;
+    //   background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
-      &:hover {
+    //   background-size: cover;
-        transform: scale(1.05);
+    //   background-position: top center;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    //   transition: transform 0.3s ease-in-out;
-        cursor: pointer;
+    //   &:hover {
-      }
+    //     transform: scale(1.05);
-    }
+    //     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    //     cursor: pointer;
+    //   }
+    // }
     .card {
+      // margin: 0.5rem;
+      flex: 0 0 32.33%; /* 宽度为 1/3 */
+      margin-bottom: 1rem; /* 在元素之间添加间距 */
+      box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
       // width: 300px;
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       overflow: hidden;
       background-color: #fff;
-      margin: 0;
+      // margin: 0;
       transition: transform 0.3s ease-in-out;
       &:hover {
         transform: scale(1.05);
@@ -332,6 +340,11 @@ export default {
         // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         cursor: pointer;
       }
+      img {
+        width: 14rem;
+        margin-left: calc((100% - 14rem) / 2);
+        height: auto;
+      }
     }
     .card-title {
       color: @secondary-color;
--- a/src/views/solution/index.vue
View file @7ffc187
+++ b/src/views/solution/index.vue
View file @7ffc187
@@ -194,12 +194,10 @@ export default {
 <style lang="less" scoped>
 .hager-solution-index {
   .hager-solution-top {
-
     width: 100%;
     .banner-text-wrapper {
       height: 100%;
       display: flex;
-      // align-items: center;
       justify-content: center;
       flex-direction: column;
     }