页面布局

pages4/courseTopic/goodsTopic.vue

@@ -26,6 +26,13 @@
                 </view>
                 <view class="pic_title">建筑全科 2022年二建精华班建筑知识全系列课程</view>
             </view>
+            <view class="titles">
+                <image class="code" src="@/static/learn/act_icon.png" ></image>
+                <text class="title">推荐课程</text>
+            </view>
+            <view class="courses">
+                <view v-for="(item, index) in  courseName" :key="index" class="cou_items" :class="{nactive: courseNum == index}">{{ item.name }}</view>
+            </view>
         </view>
     </view>
 </template>
@@ -35,7 +42,21 @@ export default {
     name: 'goodsTopic',
     data() {
         return {
-            
+            courseName: [
+                {
+                    name: '黄金基础班',
+                    type: 1
+                },
+                {
+                    name: '钻石强化班',
+                    type: 2
+                },
+                {
+                    name: '至尊私塾班',
+                    type: 3
+                }
+            ],
+            courseNum: 0,
         }
     },
 }
@@ -44,7 +65,8 @@ export default {
 <style>
 page {
     width: 100%;
-    background: linear-gradient(180deg, rgba(223,236,253,0) 0%, #DFECFD 100%);
+    
+    /* background: linear-gradient(180deg, rgba(223,236,253,0) 0%, #DFECFD 100%); */
 }
 </style>
 
@@ -61,9 +83,9 @@ page {
 }
 .goods_topic {
     width: 100%;
-    
+    height: 100%;
+    background: linear-gradient(180deg, rgba(223,236,253,0) 0%, #DFECFD 100%);
     .banner_header {
-        
         height: 378rpx;
         position: relative;
         top: 0rpx;
@@ -111,9 +133,9 @@ page {
     }
     
     .mains {
-        padding: 0rpx 40rpx 0rpx 40rpx;
+        padding: 0rpx 40rpx 40rpx 40rpx;
         .titles {
-            margin: 72rpx 0rpx 32rpx 10rpx;
+            margin: 72rpx 0rpx 0rpx 10rpx;
             .code {
                 width: 38rpx;
                 height: 24rpx;
@@ -129,6 +151,7 @@ page {
         .pictures {
             width: 100%;
             height: 522rpx;
+            margin-top: 32rpx;
             .pic_imgs {
                 width: 100%;
                 height: 374rpx;
@@ -149,6 +172,24 @@ page {
                 padding: 32rpx;
             }
         }
+        .courses {
+            margin-top: 44rpx;
+            display: flex;
+            align-items: center;
+            .cou_items {
+                font-size: 28rpx;
+                color: #969696;
+                margin-right: 48rpx;
+                &:nth-child(1) {
+                    margin-left: 16rpx;
+                }
+                &.nactive {
+                    font-size: 32rpx;
+                    font-weight: bold;
+                    color: #498AFE;
+                }
+            }
+        }
     }
 }
 </style>