选课页面

pages4/courseTopic/goodsTopic.vue

@@ -1,15 +1,22 @@
 <template>
     <view class="goods_topic">
         <nav-bar title="选课中心"></nav-bar>
-        <view class="mains">
+        <view class="banner_header">
+            <image class="ban_img" src="../static/topic/banner_bg.png"></image>
             <view class="selects">
                 <view class="titles">
-                    考前培训：建造师-二级
+                    考前培训：二级建造师
                 </view>
                 <view class="icons">
-                    <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
+                    <u-icon name="arrow-right" color="#3E4055" size="26"></u-icon>
                 </view>
             </view>
+            <image class="banner" src="../static/topic/banner.png"></image>
+        </view>
+        <view class="mains">
+            
+            
+
         </view>
     </view>
 </template>
@@ -33,16 +40,61 @@ page {
 </style>
 
 <style lang="scss" scoped>
+@mixin dis_center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+@mixin dis_around {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
 .goods_topic {
     width: 100%;
-    .mains {
-        padding: 40rpx 40rpx 0rpx 40rpx;
+    
+    .banner_header {
+        
+        height: 378rpx;
+        position: relative;
+        top: 0rpx;
+        left: 0rpx;
+        .ban_img {
+            width: 100%;
+            height: 378rpx;
+            position: absolute;
+            top: 0rpx;
+            left: 0rpx;
+            z-index: 99;
+        }
+        .selects {
+            margin: 32rpx 0rpx 0rpx 40rpx;
+            width: 370rpx;
+            height: 64rpx;
+            background: rgba(255,255,255,0.6);
+            border-radius: 160rpx;
+            // opacity: 0.6;
+            @include dis_around();
+            position: absolute;
+            top: 0rpx;
+            left: 0rpx;
+            z-index: 100;
+            .icons {
+                width: 36rpx;
+                height: 36rpx;
+                background: #FFFFFF;
+                border-radius: 50%;
+                @include dis_center()
+            }
+        }
+        .banner {
+            width: 670rpx;
+            height: 250rpx;
+        }
     }
-    .selects {
-        width: 370rpx;
-        height: 64rpx;
-        background: rgba(255,255,255,0.6);
-        border-radius: 160rpx;
+    
+    .mains {
+        padding: 0rpx 40rpx 0rpx 40rpx;
     }
 }
 </style>