Browse Source

能源化工-详情页响应式开发

tanxue 3 years ago
parent
commit
c23416e29c
1 changed files with 21 additions and 2 deletions
  1. 21 2
      assets/scss/cus-client/cus-client-page.scss

+ 21 - 2
assets/scss/cus-client/cus-client-page.scss

@@ -1065,7 +1065,7 @@
         .change-content-left,.change-content-right{
           width: 100%;box-sizing: border-box;margin-bottom: 20px;
           p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
-          i{border-color: #fff;}
+          i{border-color: #fff;opacity: 1;}
         }
         .change-content-left{background-color: rgb(0, 102, 204);padding: 20px 16px;}
         .change-content-right{background-color: rgb(255, 186, 0);padding: 60px 16px 36px;}
@@ -1140,7 +1140,7 @@
         .change-content-left,.change-content-right{
           width: 100%;box-sizing: border-box;margin-bottom: 20px;
           p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
-          i{border-color: #fff;}
+          i{border-color: #fff;opacity: 1;}
         }
         .change-content-left{background-color: rgb(14, 60, 106);padding: 20px 16px;}
         .change-content-right{background-color: rgb(164, 3, 3);padding: 60px 16px 36px;}
@@ -1178,6 +1178,25 @@
         }
         img{position: absolute;top: -70px;left: 50%;margin-left: -50px;}
     }
+    @media (max-width: 768px) {
+      // 我们的系统为您改变了什么
+      .energy-change-box{
+        background-color: rgb(238, 238, 238);padding: 0 15px 15px;
+        // 模块上半部分
+        .change-box-top{width: 100%;height:auto;padding: 20px 16px;margin:20px 0 20px;border-radius:0;}
+        // 模块下半部分
+        .change-box-bottom{width: 100%;height:auto;padding: 60px 16px 36px;margin:0 0 20px;border-radius:0;background-color: rgb(255, 115, 5);}
+        .change-box-top,.change-box-bottom{
+          i{border: 1px solid #fff;opacity: 1;}
+          h5{margin-top: 20px;color: #fff;}
+          li:nth-of-type(odd){p{margin-right: 0}}
+        }
+        li{
+          width: 100%;display: block;margin-bottom: 16px;
+          p{margin-left: 20px;color: #fff;}
+        }
+      }
+    }
   }
 
   /********  describe: 交通运输-详情页  author: TX  date:2020-09-02  ********/