课程开发平台运营页面开发

assets/scss/cus-client/cus-client-page.scss

@@ -2174,11 +2174,32 @@
     // 产品功能
     .course-product-function{
       background: #f3f8fe;
-    .course-product-box{
-      li{width: 50%;display: inline-block;}
-      h5{font-size: 24px;color: #fff;}
-      p{font-size: 16px;color: #fff;}
+      .course-product-box{
+        display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 80px 0;
+        li{width: 50%;}
+        h5{font-size: 24px;color: #fff;margin-bottom: 20px;}
+        p{width:380px;font-size: 16px;color: #fff;line-height: 24px;text-align: justify;}
+        div{width: 565px;height: 168px;padding: 24px 40px;box-sizing: border-box;margin: 20px auto;
+        background-repeat: no-repeat;background-position: center;background-size: cover;}
+        li:nth-child(1) div{background-image: url("~static/images/client/component/product-function-bj1.png");}
+        li:nth-child(2) div{background-image: url("~static/images/client/component/product-function-bj2.png");}
+        li:nth-child(3) div{background-image: url("~static/images/client/component/product-function-bj3.png");}
+        li:nth-child(4) div{background-image: url("~static/images/client/component/product-function-bj4.png");}
+        li:nth-child(5) div{background-image: url("~static/images/client/component/product-function-bj5.png");}
+        li:nth-child(6) div{background-image: url("~static/images/client/component/product-function-bj6.png");}
+      }
     }
+    @media (max-width: 768px){
+      // 产品功能
+      .course-product-function {
+        .course-product-box {
+          padding: 42px 0;
+          li {width: 100%;}
+          h5{font-size: 14px;margin-bottom: 6px;}
+          p{width:85%;font-size: 10px;line-height: 16px;}
+          div {width: 283px;height: 84px;margin: 10px auto;padding: 8px 16px;}
+        }
+      }
     }
   }