saas_miniprogram/pages4/courseTopic/goodsTopic.vue

<template>
    <view class="goods_topic">
        <nav-bar title="选课中心"></nav-bar>
        <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-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>

<script>
export default {
    name: 'goodsTopic',
    data() {
        return {
            
        }
    },
}
</script>

<style>
page {
    width: 100%;
    background: linear-gradient(180deg, rgba(223,236,253,0) 0%, #DFECFD 100%);
}
</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%;
    
    .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;
        }
    }
    
    .mains {
        padding: 0rpx 40rpx 0rpx 40rpx;
    }
}
</style>