推荐位页面布局

src/pages/home/index.vue

@@ -375,7 +375,20 @@
     <section class="course">
       <div class="container">
         <div class="course__header">
-          <div class="title">推荐课程</div>
+          <div class="lefts">
+            <div class="title">推荐课程</div>
+            <div class="tabs">
+              <div
+                v-for="(item, index) in courseName"
+                :key="index"
+                class="tab"
+                :class="couIndex === index ? 'active' : ''"
+                @click="changeCou(item.recommendId, index)"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
           <div class="course__footer">
             <div class="btn" @click="go('/course-list')">查看更多</div>
           </div>
@@ -410,17 +423,7 @@
             </template>
           </ul>
         </div> -->
-        <div class="tabs">
-          <div
-            v-for="(item, index) in courseName"
-            :key="index"
-            class="tab"
-            :class="couIndex === index ? 'active' : ''"
-            @click="changeCou(item.recommendId, index)"
-          >
-            {{ item.name }}
-          </div>
-        </div>
+        
         <div class="course__body">
           <p
             v-if="
@@ -460,7 +463,20 @@
     <section class="bank">
       <div class="container">
         <div class="bank__header">
-          <div class="title">推荐题库</div>
+          <div class="lefts">
+            <div class="title">推荐题库</div>
+            <div class="tabs">
+              <div
+                v-for="(item, index) in bankName"
+                :key="index"
+                class="tab"
+                :class="bankIndex === index ? 'active' : ''"
+                @click="changebank(item.recommendId, index)"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
           <div class="bank__footer">
             <div class="btn" @click="go('/bank-list')">查看更多</div>
           </div>
@@ -501,17 +517,7 @@
           </ul>
         </div> -->
 
-        <div class="tabs">
-          <div
-            v-for="(item, index) in bankName"
-            :key="index"
-            class="tab"
-            :class="bankIndex === index ? 'active' : ''"
-            @click="changebank(item.recommendId, index)"
-          >
-            {{ item.name }}
-          </div>
-        </div>
+        
         <div class="bank__body">
           <p
             v-if="
@@ -709,13 +715,13 @@ export default {
       paramList: [
 				{
 					pageNum: 1,
-					pageSize: 10,
+					pageSize: 15,
 					total: 0,
 				},
 				
 				{
 					pageNum: 1,
-					pageSize: 10,
+					pageSize: 15,
 					total: 0,
 				}
 			],
@@ -2105,7 +2111,11 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-
+      padding-bottom: 15px;
+      border-bottom: 1px solid #DCDCDC;
+      .lefts {
+        display: flex;
+      }
       .title {
         background: url("~@/assets/video.png") no-repeat left center;
         padding-left: 36px;
@@ -2125,21 +2135,12 @@ export default {
 
       .tab {
         cursor: pointer;
-        user-select: none;
-        // width: 88px;
-        padding: 0px 6px;
-        height: 24px;
-        border: 1px solid #f84e05;
-        border-radius: 12px;
-        text-align: center;
-        line-height: 24px;
-        color: #f84e05;
+        color: #888888;
         font-size: 14px;
-        margin: 0 4px;
-
+        margin-right: 32px;
         &.active {
-          color: #fff;
-          background: #f84e05;
+          font-weight: 600;
+          color: #222222;
         }
       }
     }
@@ -2163,15 +2164,16 @@ export default {
       overflow: hidden;
       .btn {
         cursor: pointer;
-        width: 146px;
-        height: 40px;
-        background: #e3eaf7;
-        border-radius: 8px;
-        margin: 20px auto 40px;
-        color: #3f8dfd;
+        width: 72px;
+        height: 28px;
+        line-height: 28px;
+        background: #D5E4FF;
+        border-radius: 4px;
+        // margin: 20px auto 40px;
+        color: #3F8DFD;
         text-align: center;
-        line-height: 40px;
         transition: all 0.2s;
+        
         &:hover {
           color: #fff;
           box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
@@ -2189,6 +2191,11 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding-bottom: 15px;
+      border-bottom: 1px solid #DCDCDC;
+      .lefts {
+        display: flex;
+      }
       .title {
         background: url("~@/assets/exercise.png") no-repeat left center;
         padding-left: 36px;
@@ -2208,21 +2215,12 @@ export default {
 
         .tab {
           cursor: pointer;
-          user-select: none;
-          padding: 0px 6px;
-          // width: 88px;
-          height: 24px;
-          border: 1px solid #437cff;
-          border-radius: 12px;
-          text-align: center;
-          line-height: 24px;
-          color: #437cff;
+          color: #888888;
           font-size: 14px;
-          margin: 0 4px;
-
+          margin-right: 32px;
           &.active {
-            color: #fff;
-            background: #437cff;
+            font-weight: 600;
+            color: #222222;
           }
         }
       }
@@ -2245,15 +2243,16 @@ export default {
       overflow: hidden;
       .btn {
         cursor: pointer;
-        width: 146px;
-        height: 40px;
-        background: #e3eaf7;
-        border-radius: 8px;
-        margin: 20px auto 40px;
-        color: #3f8dfd;
+        width: 72px;
+        height: 28px;
+        line-height: 28px;
+        background: #D5E4FF;
+        border-radius: 4px;
+        // margin: 20px auto 40px;
+        color: #3F8DFD;
         text-align: center;
-        line-height: 40px;
         transition: all 0.2s;
+        
         &:hover {
           color: #fff;
           box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);