fix: 首页优化

src/styles/common.scss

@@ -18,6 +18,11 @@ $primary-color: #e28e39;
 }
 }
 
 
 .fill-parent {
 .fill-parent {
+  width: 100%;
+  height: 100%;
+}
+
+.cover-parent {
   position: absolute;
   position: absolute;
   top: 0;
   top: 0;
   right: 0;
   right: 0;
@@ -32,9 +37,6 @@ $primary-color: #e28e39;
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
   }
   }
 
 
   .hover-hl-hidden {
   .hover-hl-hidden {
@@ -53,7 +55,7 @@ $primary-color: #e28e39;
     height: 100%;
     height: 100%;
     transition: 0.3s;
     transition: 0.3s;
     background-color: $primary-color;
     background-color: $primary-color;
-    z-index: 0;
+    z-index: 100;
   }
   }
 
 
   &:hover {
   &:hover {
@@ -61,7 +63,10 @@ $primary-color: #e28e39;
       transform: translate(16px, 16px);
       transform: translate(16px, 16px);
       opacity: 0.8;
       opacity: 0.8;
     }
     }
-
+    
+    .hover-hl-content {
+      z-index: 101;
+    }
 
 
     .hover-hl-hidden {
     .hover-hl-hidden {
       opacity: 1;
       opacity: 1;

src/styles/index.scss

@@ -5,6 +5,7 @@ html,
 body {
 body {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
+  overflow-x: hidden;
 }
 }
 
 
 body {
 body {

src/views/Home/CulturePage.vue

@@ -8,15 +8,15 @@
         <img src="../../assets/culture/08.jpg" alt="" class="mission-img" />
         <img src="../../assets/culture/08.jpg" alt="" class="mission-img" />
       </div>
       </div>
       <div class="joshine-idea">
       <div class="joshine-idea">
-        <div class="manage-idea">
-          <div class="manage-text">
+        <div class="manage-idea hover-hl">
+          <div class="manage-text hover-hl-content">
             <div class="idea">经营理念</div>
             <div class="idea">经营理念</div>
             <div>客户至上 以人为本</div>
             <div>客户至上 以人为本</div>
           </div>
           </div>
           <img src="~@/assets/culture/02.jpg" />
           <img src="~@/assets/culture/02.jpg" />
         </div>
         </div>
-        <div class="idea-content">
-          <div class="content-text">
+        <div class="idea-content hover-hl">
+          <div class="content-text hover-hl-content">
             <div class="idea">管理理念</div>
             <div class="idea">管理理念</div>
             <div class="idea-des">
             <div class="idea-des">
               决策正确、选贤育人、崇尚行动<br />保持创新、协同互助、达成目标
               决策正确、选贤育人、崇尚行动<br />保持创新、协同互助、达成目标
@@ -98,6 +98,8 @@ export default {
 
 
 .manage-idea img {
 .manage-idea img {
   width: 100%;
   width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 }
 
 
 .manage-idea .manage-text {
 .manage-idea .manage-text {

src/views/Home/IndexPage.vue

@@ -59,10 +59,10 @@
       <h2 class="underline-title news-report-title">新闻报道</h2>
       <h2 class="underline-title news-report-title">新闻报道</h2>
       <div class="news-wrapper">
       <div class="news-wrapper">
         <div v-for="(n, i) in news" :key="i" class="news-item">
         <div v-for="(n, i) in news" :key="i" class="news-item">
-          <div class="news-item-content fill-parent">
+          <div class="news-item-content cover-parent">
             <img class="news-img" :src="n.img" :alt="n.title" />
             <img class="news-img" :src="n.img" :alt="n.title" />
-            <div class="news-summary fill-parent hover-hl">
-              <div class="hover-hl-content">
+            <div class="news-summary cover-parent hover-hl">
+              <div class="hover-hl-content fill-parent">
                 <div class="underline-title"></div>
                 <div class="underline-title"></div>
                 <h4 class="news-title">{{ n.title }}</h4>
                 <h4 class="news-title">{{ n.title }}</h4>
                 <div class="news-brief hover-hl-hidden">{{ n.brief }}</div>
                 <div class="news-brief hover-hl-hidden">{{ n.brief }}</div>