'h5'

components/products/h5.vue

@@ -10,30 +10,34 @@
     <slot></slot>
     <slot name="label"></slot>
     <div class="content">
-      <div class="content-seconed wow animate__animated animate__lightSpeedInLeft">
-        <div class="left">
-          <img
-            src="http://res.training.luojigou.vip/Fs3zdJkuqy3nCEw9LIeUtQXqAv8H?imageView2/0/q/50|imageslim"
-            alt=""
-          >
-        </div>
-        <div class="right">
-          <h4>轻松找到课堂入口 创造优质</h4>
-          <h4>学习体验</h4>
-          <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
-        </div>
-      </div>
       <div class="content-first wow animate__animated animate__lightSpeedInRight">
-        <div class="left">
-          <h4>一键转发，让课堂在微信中</h4>
-          <h4>自由传播</h4>
-          <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置， 便于用户分享好物，闲余赚取佣金</div>
+        <div class="content-first-info w1200">
+          <div class="left">
+            <h4>一键转发，让课堂在微信中</h4>
+            <h4 class="left-h4" >自由传播</h4>
+            <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置， 便于用户分享好物，闲余赚取佣金</div>
+          </div>
+          <div class="right">
+            <img
+              src="http://res.training.luojigou.vip/FuW2h91DrcKLqAi_23_KDxxf0sv5?imageView2/0/q/50|imageslim"
+              alt=""
+            >
+          </div>
         </div>
-        <div class="right">
-          <img
-            src="http://res.training.luojigou.vip/FuW2h91DrcKLqAi_23_KDxxf0sv5?imageView2/0/q/50|imageslim"
-            alt=""
-          >
+      </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=""
+            >
+          </div>
+          <div class="right">
+            <h4>轻松找到课堂入口 创造优质</h4>
+            <h4 class="right-h4">学习体验</h4>
+            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+          </div>
         </div>
       </div>
     </div>
@@ -85,11 +89,13 @@ export default {
     height: 1792px;
 
     .content-first {
-      display: flex;
-      justify-content: space-between;
-      padding: 173px 408px 138px 359px;
+      // padding: 173px 408px 138px 359px;
       color: #262626;
       background-color: #f7fbff;
+      .content-first-info {
+        display: flex;
+        justify-content: space-between;
+      }
       .right {
         img {
           width: 576px;
@@ -101,35 +107,52 @@ export default {
         flex-direction: column;
         justify-content: center;
         h4 {
-          font-size: 30px;
+          // font-size: 30px;
+          font-size: 26px;
+          // font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 600;
+          color: #333333;
+          line-height: 37px;
+          &.left-h4 {
+            margin-bottom: 47px;
+          }
         }
         .desc {
-          width: 385px;
-          color: #3a3a3a;
-          font-size: 18px;
-          margin-top: 44px;
-          line-height: 30px;
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 28px;
         }
       }
     }
     .content-seconed {
-      display: flex;
-      justify-content: space-between;
-      padding: 153px 335px 138px 359px;
+      .content-seconed-info {
+        display: flex;
+        justify-content: space-between;
+      }
+      // padding: 153px 335px 138px 359px;
       color: #262626;
       .right {
         display: flex;
         flex-direction: column;
         justify-content: center;
         h4 {
-          font-size: 30px;
+          font-size: 26px;
+          // font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 600;
+          color: #333333;
+          line-height: 37px;
+          &.right-h4 {
+            margin-bottom: 24px;
+          }
         }
         .desc {
-          width: 385px;
-          color: #3a3a3a;
-          font-size: 18px;
-          margin-top: 44px;
-          line-height: 30px;
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 28px;
         }
       }
       .left {

components/products/label.vue

@@ -39,10 +39,12 @@ export default {
   justify-content: center;
   .label-item {
     position: relative;
-    color: #262626;
-    font-size: 24px;
-    font-family: PingFangSC-Semibold, PingFang SC;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
+    color: #666666;
+    line-height: 22px;
+
 
     img {
       width: 298px;
@@ -51,10 +53,13 @@ export default {
       transform: translateX(-36%);
     }
     .label {
-      font-size: 58px;
-      letter-spacing: 1.5px;
-      margin-top: 10px;
+      height: 65px;
+      font-size: 46px;
+      font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
+      color: #333333;
+      line-height: 65px;
+      letter-spacing: 1px;
     }
     .first-desc {
       margin-top: 40px;

components/products/parent.vue

@@ -15,7 +15,7 @@
         alt=""
       >
       <div class="content-list">
-        <div class="content-list-one wow animate__animated animate__lightSpeedInRight">
+        <div class="content-list-one w1200 wow animate__animated animate__lightSpeedInRight">
           <div class="left">
             <img
               src="http://res.training.luojigou.vip/FjidkWaOJvx87vZHje3VpIYyNaeV?imageView2/0/q/50|imageslim"
@@ -23,7 +23,8 @@
             >
           </div>
           <div class="right">
-            <div class="label">逻辑狗家长端记录为家长提 供宝宝成长记录</div>
+            <div class="label">逻辑狗家长端记录为家长提</div>
+            <div class="label">供宝宝成长记录</div>
             <div class="desc">点击下方下载苹果端和安卓端app，立即体验</div>
             <div class="download">
               <img
@@ -37,7 +38,7 @@
             </div>
           </div>
         </div>
-        <div class="content-list-two wow animate__animated animate__lightSpeedInLeft">
+        <div class="content-list-two w1200 wow animate__animated animate__lightSpeedInLeft">
           <div class="left">
             <div class="label">购买课程，更加便捷流畅的 抢课体验</div>
             <div class="desc">页面展示课程列表，实时展示课程的最新上线， 提供最优质的抢课体验</div>
@@ -49,7 +50,7 @@
             >
           </div>
         </div>
-        <div class="content-list-three wow animate__animated animate__lightSpeedInRight">
+        <div class="content-list-three w1200 wow animate__animated animate__lightSpeedInRight">
           <div class="left">
             <img
               src="http://res.training.luojigou.vip/Fv4R4SZiqrVipdyYDlwhKJ4vTjIE?imageView2/0/q/50|imageslim"
@@ -61,7 +62,7 @@
             <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
           </div>
         </div>
-        <div class="content-list-four wow animate__animated animate__lightSpeedInLeft">
+        <div class="content-list-four w1200 wow animate__animated animate__lightSpeedInLeft">
           <div class="left">
             <div class="label">购物商城，展现逻辑狗的系 列产品</div>
             <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
@@ -73,7 +74,7 @@
             >
           </div>
         </div>
-        <div class="content-list-five wow animate__animated animate__lightSpeedInRight">
+        <div class="content-list-five w1200 wow animate__animated animate__lightSpeedInRight">
           <div class="left">
             <img
               src="http://res.training.luojigou.vip/Fs6eujHZZwUgrrGDANQ3vdhR-mpG?imageView2/0/q/50|imageslim"
@@ -114,6 +115,63 @@ export default {
 </script>
 <style scoped lang="scss">
 .Parent-container {
+  .content-list {
+    .left {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .label {
+        height: 74px;
+        font-size: 26px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        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 {
+        width: 601px;
+        height: 586px;
+      }
+    }
+  
+    .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .label {
+        height: 74px;
+        font-size: 26px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 37px;
+      }
+      .desc {
+        width: 388px;
+        margin-top: 42px;
+        font-size: 18px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(58, 58, 58, 1);
+      }
+      // img {
+      //   width: 601px;
+      //   height: 586px;
+      // }
+    }
+  }
+
   .banner-img {
     position: relative;
     img {
@@ -121,10 +179,14 @@ export default {
       height: 595px;
     }
     .label {
+      width: 237px;
+      height: 65px;
+      font-size: 46px;
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
-      color: #ffffff;
-      font-size: 80px;
+      color: #262626;
+      line-height: 65px;
+      letter-spacing: 1px;
       position: absolute;
       top: 50%;
       left: 50%;
@@ -146,36 +208,36 @@ export default {
       position: absolute;
       top: 883px;
       left: 0;
-      padding: 0 344px;
+      // padding: 0 344px;
       box-sizing: border-box;
       .content-list-one {
         display: flex;
         justify-content: space-between;
         .left {
-          img {
-            width: 601px;
-            height: 586px;
-          }
+          // img {
+          //   width: 601px;
+          //   height: 586px;
+          // }
         }
         .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 {
-            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 {
+          //   margin-top: 42px;
+          //   font-size: 18px;
+          //   font-family: PingFangSC-Regular, PingFang SC;
+          //   font-weight: 400;
+          //   color: rgba(58, 58, 58, 1);
+          // }
           .download {
             margin-top: 81px;
             display: flex;
@@ -201,27 +263,27 @@ export default {
             height: 586px;
           }
         }
-        .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);
-          }
-        }
+        // .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);
+        //   }
+        // }
       }
       .content-list-three {
         display: flex;

components/products/xcx.vue

@@ -17,8 +17,9 @@
           </div>
           <div class="right">
             <h4>轻松找到课堂入口 创造优质</h4>
-            <h4>学习体验</h4>
+            <h4 class="right-h4">学习体验</h4>
             <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+            <div class="desc">轻松发现你</div>
           </div>
         </div>
       </div>
@@ -26,8 +27,9 @@
         <div class="content-seconed-info w1200">
           <div class="left">
             <h4>轻松找到课堂入口 创造优质</h4>
-            <h4>学习体验</h4>
-            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+            <h4 class="left-h4">学习体验</h4>
+            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户</div>
+            <div class="desc">轻松发现你</div>
           </div>
           <div class="right">
             <img
@@ -71,6 +73,7 @@ export default {
       height: 595px;
     }
     .label {
+
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
       color: #ffffff;
@@ -104,14 +107,21 @@ export default {
         flex-direction: column;
         justify-content: center;
         h4 {
-          font-size: 30px;
+          font-size: 26px;
+          // font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 600;
+          color: #333333;
+          line-height: 37px;
+          &.right-h4 {
+            margin-bottom: 24px;
+          }
         }
         .desc {
-          width: 385px;
-          color: #3a3a3a;
-          font-size: 18px;
-          margin-top: 44px;
-          line-height: 30px;
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 28px;
         }
       }
     }
@@ -126,14 +136,21 @@ export default {
           flex-direction: column;
           justify-content: center;
           h4 {
-            font-size: 30px;
+            font-size: 26px;
+            // font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 600;
+            color: #333333;
+            line-height: 37px;
+            &.left-h4 {
+              margin-bottom: 47px;
+            }
           }
           .desc {
-            width: 385px;
-            color: #3a3a3a;
-            font-size: 18px;
-            margin-top: 44px;
-            line-height: 30px;
+            font-size: 16px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 28px;
           }
         }
         .right {

pages/index.vue

@@ -1283,6 +1283,7 @@ export default {
     };
   },
   computed: {
+    // 思维芯产品
     lineStyle () {
       let site = 190 * this.currentTabId + 42* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
       if( site === 0 ) {
@@ -1290,14 +1291,15 @@ export default {
       }
       return `transform: translateX(${site + 'px'})`
     },
+    // 网校课程
     lineCourseStyle() {
       let site;
       if( this.currentCourseType === 0 ) {
         site = -0
-      } else if (this.currentCourseType === 3) {
-        site = 400 * this.currentCourseType - 86;
+      } else if (this.currentCourseType === 3) { // -72 + 46  26 13
+        site = 400 * this.currentCourseType - 60;
       } else {
-        site = 400 * this.currentCourseType - 38 * this.currentCourseType;
+        site = 400 * this.currentCourseType - this.currentCourseType * 23;
       }
       return `transform: translateX(${site + 'px'})`
     }
@@ -1330,6 +1332,7 @@ export default {
   async asyncData({ params, store }) {
     console.log(store.state.newsNav);
     const newsNav = store.state.newsNav;
+    
     const { data: { data: res1 } } = await axios(`${store.state.wordpressAPI}/official-api/article`, {
       params: {
         typeId: newsNav[0].id,

pages/product/list.vue

@@ -1,16 +1,23 @@
 <template>
   <section class="List-container">
    <img class="banner-img" :src="bannerImg" alt="" srcset="">
-   <div class="content">
+   <div class="content w1200">
      <div class="tabs">
-       <div class="tab-box">
+       <!-- <div class="tab-box">
          <div :class="['tabs-item', 'cp',  currentTabId === tab.id ? 'selectTabs': '']" @click="handleTag(tab)" v-for="tab in ListData" :key="tab.id">
           {{tab.label}}
         </div>
-       </div>
+       </div> -->
+        <ul class="cate-nav tab-box thinking-cate-nav">
+          <li :class="['tabs-item', 'cp',  currentTabId === tab.id ? 'selectTabs': '']" @click="handleTag(tab)" v-for="tab in ListData" :key="tab.id">
+            <!-- <nuxt-link to="/">{{ tab.label }}</nuxt-link> -->
+            <a href="javascript:void(0)">{{ tab.label }}</a>
+          </li>
+        </ul>
         <div class="bottom-line">
           <div class="bottom-line-img">
-            <img :style="lineStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt="">
+            <div :style="lineStyle" class="line-img-box"></div>
+            <!-- <img :style="lineStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt=""> -->
           </div>
         </div>
      </div>
@@ -376,12 +383,19 @@ export default {
   name: 'ListPage',
   computed: {
     lineStyle () {
-      let site = 190 * this.currentTabId + 40* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
+      let site = 190 * this.currentTabId + 42* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
       if( site === 0 ) {
-        site = -5
+        site = -0
       }
       return `transform: translateX(${site + 'px'})`
-    }
+    },
+    // lineStyle () {
+    //   let site = 190 * this.currentTabId + 40* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
+    //   if( site === 0 ) {
+    //     site = -5
+    //   }
+    //   return `transform: translateX(${site + 'px'})`
+    // }
   },
   head() {
     return {
@@ -435,6 +449,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "~static/common/style.sass";
+
 .List-container {
   background-color: #F0F2F5;
 }
@@ -446,34 +462,34 @@ export default {
 .content {
   padding-bottom: 300px;
   margin: 0 auto;
-  width: 1214px;
-  .tabs {
-    .tab-box {
-      width: 1214px;
-      display: flex;
-      justify-content: space-between;
-      margin: 0 auto;
-      .tabs-item {
-        color: #747885;
-        font-size: 32px;
-        font-family:PingFangSC-Regular,PingFang SC;
-        font-weight:400;
-      }
-    }
-    .bottom-line {
-      display: flex;
-      justify-content: center;
-      .bottom-line-img {
-        width: 1214px;
-          img {
-          width: 75px;
-          height: 30px;
-          transition: transform 1s;
-        }
-      }
+  // width: 1214px;
+  // .tabs {
+  //   .tab-box {
+  //     width: 1214px;
+  //     display: flex;
+  //     justify-content: space-between;
+  //     margin: 0 auto;
+  //     .tabs-item {
+  //       color: #747885;
+  //       font-size: 32px;
+  //       font-family:PingFangSC-Regular,PingFang SC;
+  //       font-weight:400;
+  //     }
+  //   }
+  //   .bottom-line {
+  //     display: flex;
+  //     justify-content: center;
+  //     .bottom-line-img {
+  //       width: 1214px;
+  //         img {
+  //         width: 75px;
+  //         height: 30px;
+  //         transition: transform 1s;
+  //       }
+  //     }
       
-    }
-  }
+  //   }
+  // }
   .screen {
     margin-top: 121px;
     display: flex;
@@ -631,6 +647,44 @@ export default {
   animation: fadeOutDown;
 }
 
+.tabs {
+  .tab-box {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    .tabs-item {
+      a {
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #747885;
+        line-height: 33px;
+      }
+    }
+  }
+  .bottom-line {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+    .bottom-line-img {
+      width: 100%;
+      .line-img-box {
+        width: 46px;
+        height: 4px;
+        background-color: $theme_color_fu;
+        box-shadow: 0px 2px 8px 0px rgba(111, 159, 254, 0.8);
+        border-radius: 100px;
+        transition: transform 1s;
+      }
+      // img {
+      //   width: 75px;
+      //   height: 30px;
+      //   transition: transform 1s;
+      // }
+    }
+  }
+}
+
 @keyframes fadeOutDown {
   from {
     opacity: 1;

pages/test.vue

@@ -0,0 +1,47 @@
+<template>
+  <div v-html="content"></div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      content: '',
+    }
+  },
+  // async asyncData() {
+  //   const { data } = await axios(`http://192.168.1.81:8101/parent/parentClub/activityGameHtml/?id=1`); // 测试html
+  //   console.log(data);
+  //   const content = data.data;
+  //   return {
+  //     content
+  //   }
+  // }
+  created() {
+    this.loadHtml(); 
+  },
+  methods: {
+    async loadHtml() {
+      const { data } = await axios(`http://192.168.1.81:8101/parent/parentClub/activityGameHtml/?id=1`); // 测试html
+      const content = this.decodeUnicode(data.data);
+      document.write(content);
+      // this.content = content;
+    },
+    decodeUnicode(str) {
+      str = str.replace(/\\/g, "%");
+      //转换中文
+      str = unescape(str);
+      //将其他受影响的转换回原来
+      str = str.replace(/%/g, "\\");
+      //对网址的链接进行处理
+      str = str.replace(/\\n/g, "");
+      str = str.replace(/\\t/g, "");
+      str = str.replace(/\\/g, "");
+      return str;
+    }
+
+  }
+
+}
+</script>

static/common/common.css

@@ -9,7 +9,7 @@ html {
   /* color: #474747; */
 }
 body {
-  font-family: "PingFang SC", 'Microsoft YaHei', 'Hiragino Sans GB', 'Arail';
+  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
   -webkit-box-sizing: border-box;
   margin: 0;
   background: #eee;