'家长端'

components/products/h5.vue

@@ -13,30 +13,26 @@
       <div class="content-first wow animate__animated animate__lightSpeedInRight">
         <div class="content-first-info w1200">
           <div class="left">
-            <h4>一键转发，让课堂在微信中</h4>
-            <h4 class="left-h4" >自由传播</h4>
-            <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置， 便于用户分享好物，闲余赚取佣金</div>
+            <h4>轻松找到课堂入口 创造优质</h4>
+            <h4 class="content-h4">学习体验</h4>
+            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户</div>
+            <div class="desc">轻松发现你</div>
           </div>
           <div class="right">
-            <img
-              src="http://res.training.luojigou.vip/FuW2h91DrcKLqAi_23_KDxxf0sv5?imageView2/0/q/50|imageslim"
-              alt=""
-            >
+            <img :src="firstImg" alt="">
           </div>
         </div>
       </div>
       <div class="content-seconed wow animate__animated animate__lightSpeedInLeft">
         <div class="content-seconed-info w1200">
           <div class="left">
-            <img
-              src="http://res.training.luojigou.vip/Fs3zdJkuqy3nCEw9LIeUtQXqAv8H?imageView2/0/q/50|imageslim"
-              alt=""
-            >
+            <img :src="secondImg" alt="">
           </div>
           <div class="right">
-            <h4>轻松找到课堂入口 创造优质</h4>
-            <h4 class="right-h4">学习体验</h4>
-            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+            <h4>一键转发，让课堂在微信中</h4>
+            <h4 class="content-h4" >自由传播</h4>
+            <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置，</div>
+            <div class="desc">便于用户分享好物，闲余赚取佣金</div>
           </div>
         </div>
       </div>
@@ -52,7 +48,9 @@ export default {
   name: "H5Page",
   data() {
     return {
-      bannerImg: require('~/assets/images/products/banner-h5.png')
+      bannerImg: require('~/assets/images/products/banner-h5.png'),
+      firstImg: require('~/assets/images/products/h5_img_first.png'),
+      secondImg: require('~/assets/images/products/h5_img_second.png'),
     };
   },
   mounted() {
@@ -89,7 +87,7 @@ export default {
     height: 1792px;
 
     .content-first {
-      // padding: 173px 408px 138px 359px;
+      padding: 173px 0 138px 0;
       color: #262626;
       background-color: #f7fbff;
       .content-first-info {
@@ -113,9 +111,6 @@ export default {
           font-weight: 600;
           color: #333333;
           line-height: 37px;
-          &.left-h4 {
-            margin-bottom: 47px;
-          }
         }
         .desc {
           font-size: 16px;
@@ -131,7 +126,7 @@ export default {
         display: flex;
         justify-content: space-between;
       }
-      // padding: 153px 335px 138px 359px;
+      padding: 138px 0 153px 0;
       color: #262626;
       .right {
         display: flex;
@@ -143,9 +138,6 @@ export default {
           font-weight: 600;
           color: #333333;
           line-height: 37px;
-          &.right-h4 {
-            margin-bottom: 24px;
-          }
         }
         .desc {
           font-size: 16px;
@@ -157,11 +149,14 @@ export default {
       }
       .left {
         img {
-          width: 664px;
-          height: 581px;
+          width: 575px;
+          height: 579px;
         }
       }
     }
   }
+  .content-h4 {
+    margin-bottom: 50px;
+  }
 }
 </style>

components/products/parent.vue

@@ -10,22 +10,23 @@
     <slot></slot>
     <slot name="label"></slot>
     <div class="content">
-      <img
+      <!-- <img
         src="http://res.training.luojigou.vip/lrW91RgYOMu18CYaH3qDbSUVE2bi?imageView2/0/q/50|imageslim"
         alt=""
-      >
+      > -->
       <div class="content-list">
         <div class="content-list-one w1200 wow animate__animated animate__lightSpeedInRight">
           <div class="left">
-            <img
+            <!-- <img
               src="http://res.training.luojigou.vip/FjidkWaOJvx87vZHje3VpIYyNaeV?imageView2/0/q/50|imageslim"
               alt=""
-            >
+            > -->
+            <img :src="firstImg" alt="">
           </div>
           <div class="right">
             <div class="label">逻辑狗家长端记录为家长提</div>
             <div class="label">供宝宝成长记录</div>
-            <div class="desc">点击下方下载苹果端和安卓端app，立即体验</div>
+            <div class="desc content-desc">点击下方下载苹果端和安卓端app，立即体验</div>
             <div class="download">
               <img
                 src="http://res.training.luojigou.vip/Fl_0R6Bwy75ByXLhmm2b1cpknZEv?imageView2/0/q/50|imageslim"
@@ -40,50 +41,58 @@
         </div>
         <div class="content-list-two w1200 wow animate__animated animate__lightSpeedInLeft">
           <div class="left">
-            <div class="label">购买课程，更加便捷流畅的 抢课体验</div>
-            <div class="desc">页面展示课程列表，实时展示课程的最新上线， 提供最优质的抢课体验</div>
+            <div class="label">购买课程，更加便捷流畅的</div>
+            <div class="label">抢课体验</div>
+            <div class="desc content-desc">页面展示课程列表，实时展示课程的最新上线，</div>
+            <div class="desc">提供最优质的抢课体验</div>
           </div>
           <div class="right">
-            <img
-              src="http://res.training.luojigou.vip/Fm096zbH-x0IxAcT8IinoIHeMCoi?imageView2/0/q/50|imageslim"
-              alt=""
-            >
+            <!-- <img src="http://res.training.luojigou.vip/Fm096zbH-x0IxAcT8IinoIHeMCoi?imageView2/0/q/50|imageslim" alt="" > -->
+            <img :src="secondImg" alt="" >
           </div>
         </div>
         <div class="content-list-three w1200 wow animate__animated animate__lightSpeedInRight">
           <div class="left">
-            <img
+            <!-- <img
               src="http://res.training.luojigou.vip/Fv4R4SZiqrVipdyYDlwhKJ4vTjIE?imageView2/0/q/50|imageslim"
               alt=""
-            >
+            > -->
+            <img :src="threeImg" alt="" >
           </div>
           <div class="right">
-            <div class="label">购物商城，展现逻辑狗的系 列产品</div>
-            <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
+            <div class="label">购物商城，展现逻辑狗的系</div>
+            <div class="label">列产品</div>
+            <div class="desc content-desc">精细的产品分类，你最短时间找到自己需要的</div>
+            <div class="desc">产品</div>
           </div>
         </div>
         <div class="content-list-four w1200 wow animate__animated animate__lightSpeedInLeft">
           <div class="left">
-            <div class="label">购物商城，展现逻辑狗的系 列产品</div>
-            <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
+            <div class="label">直播回放，体验APP原生大</div>
+            <div class="label">屏大视野</div>
+            <div class="desc content-desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
+            <div class="desc">产品</div>
           </div>
           <div class="right">
-            <img
+            <img :src="fourImg" alt="" >
+            <!-- <img
               src="http://res.training.luojigou.vip/FkdjYnOvv_62O27MOTJJ5Kmco6U8?imageView2/0/q/50|imageslim"
               alt=""
-            >
+            > -->
           </div>
         </div>
         <div class="content-list-five w1200 wow animate__animated animate__lightSpeedInRight">
           <div class="left">
-            <img
+            <img :src="fiveImg" alt="" >
+            <!-- <img
               src="http://res.training.luojigou.vip/Fs6eujHZZwUgrrGDANQ3vdhR-mpG?imageView2/0/q/50|imageslim"
               alt=""
-            >
+            > -->
           </div>
           <div class="right">
-            <div class="label">购物商城，展现逻辑狗的系 列产品</div>
-            <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
+            <div class="label">离线下载，更加便捷的学习</div>
+            <div class="label">方式</div>
+            <div class="desc content-desc">课程下载到app，随时随地自由学习</div>
           </div>
         </div>
       </div>
@@ -100,7 +109,13 @@ export default {
   data() {
     return {
       // showList,
-      bannerImg: require('~/assets/images/products/banner-app.png')
+      bannerImg: require('~/assets/images/products/banner-app.png'),
+      contentBgImg: require('~/assets/images/products/parent_bg.png'),
+      firstImg: require('~/assets/images/products/parent_img_first.png'),
+      secondImg: require('~/assets/images/products/parent_img_second.png'),
+      threeImg: require('~/assets/images/products/parent_img_three.png'),
+      fourImg: require('~/assets/images/products/parent_img_four.png'),
+      fiveImg: require('~/assets/images/products/parent_img_five.png'),
     };
   },
   mounted() {
@@ -121,22 +136,19 @@ export default {
       flex-direction: column;
       justify-content: center;
       .label {
-        height: 74px;
         font-size: 26px;
         font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: 600;
         color: #333333;
         line-height: 37px;
       }
       .desc {
-        width: 325px;
         height: 30px;
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #666666;
         line-height: 30px;
-        margin-top: 42px;
         font-size: 18px;
       }
       img {
@@ -150,16 +162,14 @@ export default {
       flex-direction: column;
       justify-content: center;
       .label {
-        height: 74px;
         font-size: 26px;
         font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: 600;
         color: #333333;
         line-height: 37px;
       }
       .desc {
         width: 388px;
-        margin-top: 42px;
         font-size: 18px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
@@ -174,29 +184,33 @@ export default {
 
   .banner-img {
     position: relative;
+    font-size: 0;
     img {
       width: 100%;
       height: 595px;
     }
     .label {
-      width: 237px;
-      height: 65px;
-      font-size: 46px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #262626;
-      line-height: 65px;
       letter-spacing: 1px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+      font-size: 66px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 92px;
+
     }
   }
   .content {
-    position: relative;
-    z-index: -1;
-    top: -653px;
+    background-image: url('~assets/images/products/parent_bg.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: top -451px left;
+    // position: relative;
+    // z-index: -1;
+    // top: -653px;
     img {
       width: 100%;
       height: 5210px;
@@ -204,12 +218,15 @@ export default {
       // z-index: 0;
     }
     .content-list {
-      width: 100%;
-      position: absolute;
-      top: 883px;
-      left: 0;
+      // width: 100%;
+      // position: absolute;
+      // top: 883px;
+      // left: 0;
       // padding: 0 344px;
       box-sizing: border-box;
+       .content-desc {
+         margin-top: 48px;
+       }
       .content-list-one {
         display: flex;
         justify-content: space-between;
@@ -259,7 +276,7 @@ export default {
         margin-top: 291px;
         .right {
           img {
-            width: 601px;
+            width: 512px;
             height: 586px;
           }
         }
@@ -291,30 +308,29 @@ export default {
         margin-top: 291px;
         .left {
           img {
-            width: 601px;
-            height: 586px;
+            width: 625px;
+            height: 581px;
           }
         }
         .right {
           display: flex;
           flex-direction: column;
           justify-content: center;
-          .label {
-            width: 369px;
-            height: 84px;
-            color: #262626;
-            font-size: 30px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
-          }
-          .desc {
-            width: 388px;
-            margin-top: 42px;
-            font-size: 18px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: rgba(58, 58, 58, 1);
-          }
+          // .label {
+          //   width: 369px;
+          //   height: 84px;
+          //   color: #262626;
+          //   font-size: 30px;
+          //   font-family: PingFangSC-Semibold, PingFang SC;
+          //   font-weight: 600;
+          // }
+          // .desc {
+          //   width: 388px;
+          //   font-size: 18px;
+          //   font-family: PingFangSC-Regular, PingFang SC;
+          //   font-weight: 400;
+          //   color: rgba(58, 58, 58, 1);
+          // }
         }
       }
       .content-list-four {
@@ -323,30 +339,29 @@ export default {
         margin-top: 291px;
         .right {
           img {
-            width: 601px;
-            height: 586px;
+            width: 488px;
+            height: 609px;
           }
         }
         .left {
           display: flex;
           flex-direction: column;
           justify-content: center;
-          .label {
-            width: 369px;
-            height: 84px;
-            color: #262626;
-            font-size: 30px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
-          }
-          .desc {
-            width: 388px;
-            margin-top: 42px;
-            font-size: 18px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: rgba(58, 58, 58, 1);
-          }
+          // .label {
+          //   width: 369px;
+          //   height: 84px;
+          //   color: #262626;
+          //   font-size: 30px;
+          //   font-family: PingFangSC-Semibold, PingFang SC;
+          //   font-weight: 600;
+          // }
+          // .desc {
+          //   width: 388px;
+          //   font-size: 18px;
+          //   font-family: PingFangSC-Regular, PingFang SC;
+          //   font-weight: 400;
+          //   color: rgba(58, 58, 58, 1);
+          // }
         }
       }
       .content-list-five {
@@ -355,30 +370,29 @@ export default {
         margin-top: 291px;
         .left {
           img {
-            width: 601px;
-            height: 586px;
+            width: 625px;
+            height: 609px;
           }
         }
         .right {
           display: flex;
           flex-direction: column;
           justify-content: center;
-          .label {
-            width: 369px;
-            height: 84px;
-            color: #262626;
-            font-size: 30px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
-          }
-          .desc {
-            width: 388px;
-            margin-top: 42px;
-            font-size: 18px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: rgba(58, 58, 58, 1);
-          }
+          // .label {
+          //   width: 369px;
+          //   height: 84px;
+          //   color: #262626;
+          //   font-size: 30px;
+          //   font-family: PingFangSC-Semibold, PingFang SC;
+          //   font-weight: 600;
+          // }
+          // .desc {
+          //   width: 388px;
+          //   font-size: 18px;
+          //   font-family: PingFangSC-Regular, PingFang SC;
+          //   font-weight: 400;
+          //   color: rgba(58, 58, 58, 1);
+          // }
         }
       }
     }

components/products/xcx.vue

@@ -73,7 +73,6 @@ export default {
       height: 595px;
     }
     .label {
-
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
       color: #ffffff;