'课程ui'

pages/index.vue

@@ -80,7 +80,7 @@
     <div class="index-founder">
       <div class="founder-content-box">
         <div class="founder_img wow animate__animated animate__fadeInLeft">
-          <img src="~/assets/images/index/img_boss2.png" alt="">
+          <img src="~/assets/images/index/img_boss2.png" srcset="~/assets/images/index/img_boss2.png 1x, ~/assets/images/index/img_boss2@2x.png 2x" alt="">
           <div class="name founder-item">
             <!-- <span class="dot"></span> -->
             <p>中德智慧创始人</p>
@@ -219,7 +219,7 @@
               <li
                 class="products-kind thinking-products-kind"
                 v-for="(item, index) in courseCate"
-                :class="{active:index == clickProdIndex}"
+                :class="{active:index == currentCourseType}"
                 :key="index"
                 @click="handleCourse(item)"
               >
@@ -302,12 +302,14 @@
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
-                <div class="pc-small-img">
-                  <img src="~/assets/images/index/teach_01_icon_active.png" alt="" srcset="">
-                </div>
-                <div class="education-title-box">
-                  <p class="education-title">逻辑狗APP</p>
-                  <p class="education-sub-title">逻辑狗，与千万逻辑狗宝贝一起成长</p>
+                <div class="pc-education-top-content">
+                  <div class="pc-small-img">
+                    <img src="~/assets/images/index/teach_01_icon_active.png" alt="" srcset="">
+                  </div>
+                  <div class="education-title-box">
+                    <p class="education-title">逻辑狗APP</p>
+                    <p class="education-sub-title">逻辑狗，与千万逻辑狗宝贝一起成长</p>
+                  </div>
                 </div>
                 <div class="education-gzh">
                   <img src="~/assets/images/index/teach_gzh.png" alt="">
@@ -332,12 +334,14 @@
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
-                <div class="pc-small-img">
-                  <img src="~/assets/images/index/teach_02_icon_active.png" alt="" srcset="">
-                </div>
-                <div class="education-title-box">
-                  <p class="education-title">逻辑狗家长端APP</p>
-                  <p class="education-sub-title">随时了解宝宝的状态</p>
+                <div class="pc-education-top-content">
+                  <div class="pc-small-img">
+                    <img src="~/assets/images/index/teach_02_icon_active.png" alt="" srcset="">
+                  </div>
+                  <div class="education-title-box">
+                    <p class="education-title">逻辑狗家长端APP</p>
+                    <p class="education-sub-title">随时了解宝宝的状态</p>
+                  </div>
                 </div>
                 <div class="education-gzh">
                   <img src="~/assets/images/index/teach_gzh.png" alt="">
@@ -362,12 +366,14 @@
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
-                <div class="pc-small-img">
-                  <img src="~/assets/images/index/teach_03_icon_active.png" alt="" srcset="">
-                </div>
-                <div class="education-title-box">
-                  <p class="education-title">逻辑狗教师端APP</p>
-                  <p class="education-sub-title">实现园所互通</p>
+                <div class="pc-education-top-content">
+                  <div class="pc-small-img">
+                    <img src="~/assets/images/index/teach_03_icon_active.png" alt="" srcset="">
+                  </div>
+                  <div class="education-title-box">
+                    <p class="education-title">逻辑狗教师端APP</p>
+                    <p class="education-sub-title">实现园所互通</p>
+                  </div>
                 </div>
                 <div class="education-gzh">
                   <img src="~/assets/images/index/teach_gzh.png" alt="">
@@ -392,13 +398,15 @@
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
-                <div class="pc-small-img">
-                  <img src="~/assets/images/index/teach_04_icon_active.png" alt="" srcset="">
-                </div>
-                <div class="education-title-box">
-                  <p class="education-title">微信H5</p> 
-                  <p class="education-sub-title">逻辑狗官方商城</p>
-                  <p class="education-sub-title">逻辑狗家长训练营</p>
+                <div class="pc-education-top-content">
+                  <div class="pc-small-img">
+                    <img src="~/assets/images/index/teach_04_icon_active.png" alt="" srcset="">
+                  </div>
+                  <div class="education-title-box">
+                    <p class="education-title">微信H5</p> 
+                    <p class="education-sub-title">逻辑狗官方商城</p>
+                    <p class="education-sub-title">逻辑狗家长训练营</p>
+                  </div>
                 </div>
                 <div class="education-gzh">
                   <img src="~/assets/images/index/teach_gzh.png" alt="">
@@ -423,12 +431,14 @@
             </div>
             <div class="big-mobile-education">
               <div class="pc-education-top">
-                <div class="pc-small-img">
-                  <img src="~/assets/images/index/teach_05_icon_active.png" alt="" srcset="">
-                </div>
-                <div class="education-title-box">
-                  <p class="education-title">微信小程序</p>
-                  <p class="education-sub-title">中德智慧网校</p>
+                <div class="pc-education-top-content">
+                  <div class="pc-small-img">
+                    <img src="~/assets/images/index/teach_05_icon_active.png" alt="" srcset="">
+                  </div>
+                  <div class="education-title-box">
+                    <p class="education-title">微信小程序</p>
+                    <p class="education-sub-title">中德智慧网校</p>
+                  </div>
                 </div>
                 <div class="education-gzh">
                   <img src="~/assets/images/index/teach_gzh.png" alt="">
@@ -468,45 +478,45 @@
           </div>
           <div class="town-content-skill">
             <div class="town-content-img">
-              <img src="~/assets/images/index/town_img.png" alt="" srcset="">
+              <img src="~/assets/images/index/town_img.png" alt="" srcset="~/assets/images/index/town_img.png 1x, ~/assets/images/index/town_img@2x.png 2x">
               <div class="skill-item skill-item-01">
-                <img src="~/assets/images/index/icon_town_01.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_01.png" alt="" srcset="~/assets/images/index/icon_town_01.png 1x, ~/assets/images/index/icon_town_01@2x.png 2x">
                 <p>知识迁移</p>
               </div>
               <div class="skill-item skill-item-02">
-                <img src="~/assets/images/index/icon_town_02.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_02.png" alt="" srcset="~/assets/images/index/icon_town_02.png 1x, ~/assets/images/index/icon_town_02@2x.png 2x">
                 <p class="big-font">观察能力</p>
               </div>
               <div class="skill-item skill-item-03">
-                <img src="~/assets/images/index/icon_town_03.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_03.png" alt="" srcset="~/assets/images/index/icon_town_03.png 1x, ~/assets/images/index/icon_town_03@2x.png 2x">
                 <p>手眼协调</p>
               </div>
               <div class="skill-item skill-item-04">
-                <img src="~/assets/images/index/icon_town_04.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_04.png" alt="" srcset="~/assets/images/index/icon_town_04.png 1x, ~/assets/images/index/icon_town_04@2x.png 2x">
                 <p class="big-font">语言能力</p>
               </div>
               <div class="skill-item skill-item-05">
-                <img src="~/assets/images/index/icon_town_05.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_05.png" alt="" srcset="~/assets/images/index/icon_town_05.png 1x, ~/assets/images/index/icon_town_05@2x.png 2x">
                 <p class="big-font">想象能力</p>
               </div>
               <div class="skill-item skill-item-06">
-                <img src="~/assets/images/index/icon_town_06.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_06.png" alt="" srcset="~/assets/images/index/icon_town_06.png 1x, ~/assets/images/index/icon_town_06@2x.png 2x">
                 <p>分类能力</p>
               </div>
               <div class="skill-item skill-item-07">
-                <img src="~/assets/images/index/icon_town_07.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_07.png" alt="" srcset="~/assets/images/index/icon_town_07.png 1x, ~/assets/images/index/icon_town_07@2x.png 2x">
                 <p>推理能力</p>
               </div>
               <div class="skill-item skill-item-08">
-                <img src="~/assets/images/index/icon_town_08.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_08.png" alt="" srcset="~/assets/images/index/icon_town_08.png 1x, ~/assets/images/index/icon_town_08@2x.png 2x">
                 <p class="big-font">空间能力</p>
               </div>
               <div class="skill-item skill-item-09">
-                <img src="~/assets/images/index/icon_town_09.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_09.png" alt="" srcset="~/assets/images/index/icon_town_09.png 1x, ~/assets/images/index/icon_town_09@2x.png 2x">
                 <p class="big-font">专注能力</p>
               </div>
               <div class="skill-item skill-item-10">
-                <img src="~/assets/images/index/icon_town_10.png" alt="" srcset="">
+                <img src="~/assets/images/index/icon_town_10.png" alt="" srcset="~/assets/images/index/icon_town_10.png 1x, ~/assets/images/index/icon_town_10@2x.png 2x">
                 <p>数学能力</p>
               </div>
             </div>
@@ -1597,10 +1607,14 @@ ul.cate-nav {
     &:first-child {
       margin-left: 0;
     }
-    &.active,
-    &:hover {
+    &.active {
       a {
         color: $theme_color;
+        font-size: 28px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        line-height: 40px;
+        transition: 0.5;
       }
     }
     .line {
@@ -1678,7 +1692,7 @@ ul.cate-nav {
     box-sizing: border-box;
     width: 372px;
     margin-bottom: 42px;
-    margin-right: 36px;
+    // margin-right: 36px;
     &:nth-child(3n) {
       margin-right: 0px;
     }
@@ -1917,7 +1931,9 @@ ul.cate-nav {
         color: $theme_color_fu;
         // font-size: 42px !important;
         font-family:PingFangSC-Semibold,PingFang SC;
-        font: weight 600;
+        font-weight: 600;
+        font-size: 28px;
+        line-height: 40px;
       }
     }
   }
@@ -2131,15 +2147,23 @@ ul.cate-nav {
     margin-top: 82px;
     .course-product-item {
       width: 365px;
+      margin-right: 52px;
       transition: transform .3s ease-in-out;
+      &:nth-child(3n) {
+        margin-right: 0px;
+      }
       &:hover {
         transform: translate3d(0,-8px,0);
       }
       .course-product-item-img {
         position: relative;
         font-size: 0;
+        width: 365px;
+        height: 350px;
         img {
           width: 100%;
+          height: 100%;
+          object-fit: cover;
           border-radius: 18px 18px 0px 0px;
         }
         .course-product-item-play {
@@ -2240,7 +2264,7 @@ ul.cate-nav {
         .mobile-small-img {
           width: 50px;
           height: 47px;
-          margin: 68px auto 26px;
+          margin: 72px auto 32px;
           img {
             width: 50px;
             height: 47px;
@@ -2251,13 +2275,15 @@ ul.cate-nav {
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #333436;
-          line-height: 24px;
+          line-height: 20px;
         }
         .mobile-education-sub {
           font-size: 12px;
+          font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
-          color: #333;
-          line-height: 18px;
+          color: #38393A;
+          line-height: 17px;
+          height: 17px;
         }
         .mobile-education-img {
           width: 160px;
@@ -2286,7 +2312,11 @@ ul.cate-nav {
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
+          justify-content: space-between;
           margin-left: 36px;
+          .pc-education-top-content {
+            display: flex;
+          }
           .education-gzh {
             font-size: 0;
             margin-top: 32px;