fix: 企业文化适配移动端

src/views/Home/CulturePage.vue

@@ -13,7 +13,9 @@
             <div class="idea">经营理念</div>
             <div>客户至上 以人为本</div>
           </div>
+
           <img src="~@/assets/culture/02.jpg" />
+          >
         </div>
         <div class="idea-content hover-hl">
           <div class="content-text hover-hl-content">
@@ -88,7 +90,8 @@ export default {
 }
 
 .joshine-idea {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .manage-idea {
@@ -103,7 +106,7 @@ export default {
 }
 
 .manage-idea .manage-text {
-  font-size: 32px;
+  font-size: 1.66vw;
   color: #fff;
   font-weight: bold;
   position: absolute;
@@ -122,7 +125,7 @@ export default {
 }
 
 .idea-content .content-text {
-  font-size: 32px;
+  font-size: 1.66vw;
   color: #fff;
   font-weight: bold;
   position: absolute;
@@ -133,48 +136,48 @@ export default {
 
 .idea {
   position: relative;
-  margin-bottom: 50px;
+  margin-bottom: 2.6vw;
 }
 
 .idea::after {
   content: '';
   display: block;
-  width: 60px;
-  height: 6px;
+  width: 3.1vw;
+  height: 0.03vw;
   background-color: #fff;
   position: absolute;
   left: 0;
-  top: 50px;
+  top: 2.6vw;
 }
 .joshine-value {
   width: 80%;
   margin: 0 auto;
-  padding-top: 48px;
-  padding-bottom: 64px;
+  padding-top: 2.5vw;
+  padding-bottom: 3.33vw;
 }
 .value-content {
   font-size: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-  margin-top: 60px;
+  gap: 1.04vw;
+  margin-top: 3.1vw;
 }
 
 .value-title {
-  font-size: 64px;
+  font-size: 3.33vw;
   font-weight: 400;
   position: relative;
   color: #111;
 }
 
 .value-title::after {
-  width: 56px;
-  height: 2.4px;
+  width: 3.1vw;
+  height: 0.13vw;
   content: '';
   display: block;
   background: #f08917;
   position: absolute;
-  bottom: -24px;
+  bottom: -0.13vw;
 }
 
 .value-pic {
@@ -191,37 +194,71 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 28px;
+  font-size: 1.5vw;
   font-weight: 400;
   color: #fff;
   transition: all 0.8s;
 }
 
 .value-pic:hover .valuePicTitle {
-  top: 100px;
+  top: 5.2vw;
 }
 
 .value-pic:hover .valuePicContent {
-  top: 120px;
+  top: 6.3vw;
   opacity: 1;
 }
 
 .valuePicContent {
   position: absolute;
   text-align: center;
-  top: 130px;
+  top: 6.8vw;
   opacity: 0;
-  padding: 0 40px;
-  font-size: 16px;
+  padding: 0 2.1vw;
+  font-size: 0.8vw;
   font-family: lantingxh;
-  line-height: 24px;
+  line-height: 1.3vw;
   font-weight: 200;
   color: #fff;
   transition: all 0.8s;
 }
 
 .content-text .idea-des {
-  font-size: 26px;
+  font-size: 1.4vw;
   font-weight: 400;
 }
+
+@media screen and (max-width: 1000px) {
+  .joshine-idea {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1.04vw;
+    background-color: #eb8820;
+    padding: 1.66vw;
+  }
+  .manage-idea .manage-text {
+    font-size: 1.5vw;
+  }
+  .content-text .idea-des {
+    font-size: 1.3vw;
+  }
+
+  .value-content {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .value-title:after {
+    width: 5.8vw !important;
+    bottom: -2px !important;
+  }
+
+  .valuePicTitle {
+    top: 13.8vw !important;
+  }
+
+  .valuePicContent {
+    top: 18.8vw !important;
+    line-height: 2.8vw;
+    opacity: 1 !important;
+  }
+}
 </style>