详情页面样式修改

components/common/layout/imgDes/imgCardLv2.vue

@@ -70,6 +70,7 @@ export default {
 
   .mta-card-content-pc {
     display: flex;
+    align-items: center;
     img {
       width: 480px;
       height: 370px;
@@ -90,19 +91,20 @@ export default {
   }
 
   .card-info {
+    width: 490px;
     h5 {
       font-size: 24px;
       font-weight: 800;
       text-align: left;
       color: #333;
-      margin-top: 40px;
-      margin-bottom: 23px;
+      margin:0 0 23px;
     }
     .card-info-num {
-      font-size: 37px;
+      font-size: 36px;
       font-weight: 500;
       color: #00B96B;
-      margin-bottom: 17px;
+      margin-bottom: 16px;
+      display: block;
     }
   }
 
@@ -136,10 +138,11 @@ export default {
 @media (max-width: 768px) {
   .mta-card-content-h5 {
     img {
-      width: 100%;
+      max-width: 100%;
     }
     // card--info
     .card-info {
+      width: 100%;
       h5 {font-size: 16px;margin: 20px 0 10px;}
       em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
       .card-des{

components/common/layout/imgDes/imgCardLv4.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mta-card-lv3">
+  <div class="mta-card-lv4">
 
     <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order > contentOrder ? 'img-left': 'img-right']">
       <img :style="`order:${img.order}`" :src="img.url">
@@ -17,6 +17,7 @@
       <div class="card-info">
         <p class="p-top">{{ des1 }}</p>
         <h5>解决方案</h5>
+        <em></em>
         <p class="p-bottom">{{des}}</p>
         <slot></slot>
       </div>
@@ -27,7 +28,7 @@
 
 <script>
 export default {
-  name: "imgCardLv3",
+  name: "imgCardLv4",
   props: {
     option: {
       type: Object,
@@ -64,7 +65,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.mta-card-lv3 {
+.mta-card-lv4 {
   margin: 0 auto 120px;
 
   .mta-card-content-pc {
@@ -75,13 +76,13 @@ export default {
     }
 
     .card-info {
+      width: 503px;
       h5 {
         font-size: 24px;
         font-weight: 800;
         text-align: left;
         color: #333;
-        margin-top: 40px;
-        margin-bottom: 23px;
+        margin: 0 0 20px;
         position: relative;
 
         &:before {
@@ -125,7 +126,23 @@ export default {
       margin-right: 100px;
     }
   }
+  @media (max-width: 768px) {
+    .mta-card-content-h5 {
+      img {
+        max-width: 100%;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+        h5 {font-size: 16px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        p{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
 
+  }
 
 
 

components/common/onlineInformationBtn.vue

@@ -33,32 +33,24 @@ export default {
 
 <style lang="scss">
 .zxzx-btn {
+  width: 154px;
+  height: 48px;
+  line-height: 48px;
+  border-radius: 24px;
+  border: 1px solid #00b96b;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
   &.level_1 {
-    width: 154px;
-    height: 48px;
-    line-height: 48px;
     color: #00b96b;
-    border-radius: 24px;
     background: #fff;
-    border: 1px solid #00b96b;
-    cursor: pointer;
-    display: inline-block;
-    text-align: center;
   }
   &.level_2 {
-    width: 154px;
-    height: 48px;
-    line-height: 48px;
     color: #fff;
-    border-radius: 24px;
     background: #00B96B;
-    border: 1px solid #00b96b;
-    cursor: pointer;
-    text-align: center;
   }
   @media (max-width: 768px) {
-    &.level_1 {width: 44%;height:35px;line-height:35px;max-width: 120px;margin: 0 3%;
-      display: inline-block;padding: 0;text-align: center;font-size: 14px;}
+    width: 44%;height:35px;line-height:35px;max-width: 120px;margin: 0 3%;font-size: 14px;
   }
 }