zc_saas_h5/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>
            <view class="imgs">
                <image class="banner" src="../static/topic/banner.png"></image>
            </view>
        </view>
        <view class="mains">
            <view class="titles">
                <image class="code" src="@/static/learn/act_icon.png" ></image>
                <text class="title">免费试听</text>
            </view>
            <view class="pictures">
                <view class="pic_imgs">
                    <image class="basic_img" src="../static/topic/basic.png" ></image>
                </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>

<script>
export default {
    name: 'goodsTopic',
    data() {
        return {
            courseName: [
                {
                    name: '黄金基础班',
                    type: 1
                },
                {
                    name: '钻石强化班',
                    type: 2
                },
                {
                    name: '至尊私塾班',
                    type: 3
                }
            ],
            courseNum: 0,
        }
    },
}
</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%;
    height: 100%;
    background: linear-gradient(180deg, rgba(223,236,253,0) 0%, #DFECFD 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()
            }
        }
        .imgs {
            position: absolute;
            bottom: 0rpx;
            left: 0rpx;
            z-index: 100;
            margin-left: 40rpx;
        }
        .banner {
            width: 670rpx;
            height: 250rpx;
            border-radius: 20rpx;
        }
    }
    
    .mains {
        padding: 0rpx 40rpx 40rpx 40rpx;
        .titles {
            margin: 72rpx 0rpx 0rpx 10rpx;
            .code {
                width: 38rpx;
                height: 24rpx;
            }
            .title {
                font-size: 40rpx;
                font-family: OPPOSans-Bold, OPPOSans;
                font-weight: bold;
                color: #222222;
                margin-left: 14rpx;
            }
        }
        .pictures {
            width: 100%;
            height: 522rpx;
            margin-top: 32rpx;
            .pic_imgs {
                width: 100%;
                height: 374rpx;
                .basic_img {
                    width: 100%;
                    height: 374rpx;
                }
            }
            .pic_title {
                width: 100%;
                height: 148rpx;
                background: #FFFFFF;
                border-radius: 0rpx 0rpx 24rpx 24rpx;
                font-size: 32rpx;
                font-family: OPPOSans-Bold, OPPOSans;
                font-weight: bold;
                color: #222222;
                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>