537 lines
13 KiB
Vue
537 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<u-sticky bgColor="#FFFFFF">
|
||
<view class="status_bar"></view>
|
||
<view class="college-bar">
|
||
<view class="college-bar-title">商学院</view>
|
||
<view class="college-bar-input">
|
||
<navigator class="navigator" url="">
|
||
<image class="navigator-icon" src="@/static/icons/search_icon.png"></image>
|
||
搜索
|
||
</navigator>
|
||
</view>
|
||
<view class="college-bar-icons">
|
||
<u-icon class="icon" name="bell" color="#333" bold size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
</u-sticky>
|
||
<!-- 轮播图 -->
|
||
<view class="banner">
|
||
<view class="banner-swiper">
|
||
<u-swiper
|
||
class="uswiper"
|
||
height="100%"
|
||
indicator
|
||
radius="6"
|
||
bgColor="#fff"
|
||
indicatorMode="dot"
|
||
:list="bannerArr"
|
||
></u-swiper>
|
||
</view>
|
||
</view>
|
||
<!-- 快捷入口 -->
|
||
<view class="diamond-flex">
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_00.png" mode="widthFix"></image>
|
||
<view class="text">公开课</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_01.png" mode="widthFix"></image>
|
||
<view class="text">网授课</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_02.png" mode="widthFix"></image>
|
||
<view class="text">面授班</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_03.png" mode="widthFix"></image>
|
||
<view class="text">图书</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_04.png" mode="widthFix"></image>
|
||
<view class="text">优选课程</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_05.png" mode="widthFix"></image>
|
||
<view class="text">课表</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_06.png" mode="widthFix"></image>
|
||
<view class="text">全国分校</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_07.png" mode="widthFix"></image>
|
||
<view class="text">师资团队</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_08.png" mode="widthFix"></image>
|
||
<view class="text">法律法规</view>
|
||
</view>
|
||
<view class="diamond-item">
|
||
<image class="icon" src="@/static/icons/diamond_icon_09.png" mode="widthFix"></image>
|
||
<view class="text">增补勘误</view>
|
||
</view>
|
||
</view>
|
||
<!-- 快捷入口 -->
|
||
<view class="quick-flex">
|
||
<view class="quick-flex-item" :style="'background-image: url(' + require('@/static/imgs/quick_back_00.png') + ');'">
|
||
<view class="quick-colum">
|
||
<view class="quick-title">考试习题</view>
|
||
<view class="quick-sumit">海量学习包</view>
|
||
<image class="quick-icon" src="@/static/icons/quick_icon.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="quick-flex-item" :style="'background-image: url(' + require('@/static/imgs/quick_back_01.png') + ');'" @click="onNav('CollegeTest')">
|
||
<view class="quick-colum">
|
||
<view class="quick-title">考试</view>
|
||
<view class="quick-sumit">专业考试题</view>
|
||
<image class="quick-icon" src="@/static/icons/quick_icon.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 热门网授课 -->
|
||
<view class="college-title">
|
||
<view class="college-title-text">热门网授课</view>
|
||
<navigator class="college-title-more" url="">
|
||
更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
|
||
</navigator>
|
||
</view>
|
||
<view class="hot">
|
||
<view class="hot-scroll">
|
||
<view class="hot-item" v-for="(item, index) in 3" :key="index">
|
||
<view class="cover">
|
||
<image src="@/static/imgs/hot_img.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="title nowrap">2022年至尊先锋VIP班</view>
|
||
<view class="flex">
|
||
<view class="price nowrap"><text>￥</text>2200</view>
|
||
<view class="number nowrap">1698人购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 名师面授班 -->
|
||
<view class="college-title">
|
||
<view class="college-title-text">名师面授班</view>
|
||
<navigator class="college-title-more" url="">
|
||
更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
|
||
</navigator>
|
||
</view>
|
||
<view class="famous">
|
||
<view class="famous-item" v-for="(item, index) in 3" :key="index">
|
||
<image class="famous-cover" src="@/static/imgs/famous_img.png" mode="aspectFill"></image>
|
||
<view class="famous-content">
|
||
<view class="title nowrap">e学主客一体延考上岸班（上海）</view>
|
||
<view class="number nowrap">2028人报名</view>
|
||
<view class="price nowrap"><text>￥</text>2200</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 热销图书 -->
|
||
<view class="college-title">
|
||
<view class="college-title-text">热销图书</view>
|
||
<navigator class="college-title-more" url="">
|
||
更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
|
||
</navigator>
|
||
</view>
|
||
<view class="new-book">
|
||
<view class="new-book-item" v-for="(item, index) in 4" :key="index">
|
||
<view class="cover">
|
||
<image src="@/static/imgs/new_book.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="new-content">
|
||
<view class="title nowrap">2022年客观题精讲8...</view>
|
||
<view class="flex">
|
||
<view class="price"><text>￥</text>2200</view>
|
||
<view class="number">1698人购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 法考资讯 -->
|
||
<view class="college-title">
|
||
<view class="college-title-text">法考资讯</view>
|
||
<navigator class="college-title-more" url="">
|
||
更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
|
||
</navigator>
|
||
</view>
|
||
<view class="news-lists">
|
||
<view class="news-lists-item" v-for="(item, index) in 3" :key="index">
|
||
<view class="text">
|
||
<view class="title">法律服务工作者</view>
|
||
<view class="submit">2028人浏览</view>
|
||
</view>
|
||
<image class="cover" src="@/static/imgs/news_img.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bannerArr: [
|
||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
onNav(e) {
|
||
this.$Router.push({
|
||
name: e
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 热门课程
|
||
.hot{
|
||
padding: 20rpx 0 30rpx;
|
||
.hot-scroll{
|
||
overflow-x: scroll;
|
||
white-space:nowrap;
|
||
.hot-item{
|
||
display: inline-block;
|
||
margin-left: 30rpx;
|
||
width: 40vw;
|
||
&:last-child{
|
||
margin-right: 30rpx;
|
||
}
|
||
.cover{
|
||
width: 100%;
|
||
padding-top: 67%;
|
||
position: relative;
|
||
border-radius: $radius-lg;
|
||
overflow: hidden;
|
||
image{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.title{
|
||
padding-top: 20rpx;
|
||
line-height: 40rpx;
|
||
color: #111111;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 40rpx;
|
||
padding-top: 10rpx;
|
||
.price{
|
||
width: 50%;
|
||
color: $text-price;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
text{
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
.number{
|
||
width: 50%;
|
||
text-align: right;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 名师课程班
|
||
.famous{
|
||
padding: 20rpx 30rpx 0;
|
||
.famous-item{
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.famous-cover{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: $radius;
|
||
overflow: hidden;
|
||
}
|
||
.famous-content{
|
||
width: calc(100% - 160rpx);
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
.title{
|
||
line-height: 40rpx;
|
||
font-weight: 400;
|
||
}
|
||
.number{
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
color: #999999;
|
||
}
|
||
.price{
|
||
padding-top: 30rpx;
|
||
line-height: 40rpx;
|
||
font-weight: bold;
|
||
color: $text-price;
|
||
font-size: 32rpx;
|
||
text{
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
// 热销图书
|
||
.new-book{
|
||
padding: 20rpx 15rpx 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
&-item{
|
||
width: calc(50% - 30rpx);
|
||
margin: 0 15rpx 30rpx;
|
||
background: white;
|
||
box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .02);
|
||
border-radius: $radius;
|
||
.cover{
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 67%;
|
||
overflow: hidden;
|
||
border-radius: $radius;
|
||
image{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.new-content{
|
||
padding: 20rpx;
|
||
.title{
|
||
font-size: 32rpx;
|
||
padding-bottom: 10rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
line-height: 40rpx;
|
||
.price{
|
||
width: 50%;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: $text-price;
|
||
text{
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
.number{
|
||
width: 50%;
|
||
text-align: right;
|
||
font-size: 26rpx;
|
||
color: gray;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 法考资讯
|
||
.news-lists{
|
||
padding-bottom: 30rpx;
|
||
&-item{
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.text{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: calc(100% - 200rpx);
|
||
.title{
|
||
font-size: 32rpx;
|
||
color: #111111;
|
||
line-height: 50rpx;
|
||
@extend .ellipsis;
|
||
}
|
||
.submit{
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.cover{
|
||
width: 200rpx;
|
||
height: 133rpx;
|
||
border-radius: $radius;
|
||
}
|
||
}
|
||
}
|
||
// 通用标题
|
||
.college-title{
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
&-text{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #111111;
|
||
}
|
||
&-more{
|
||
background: #F5F5F5;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
padding: 0 15rpx 0 25rpx;
|
||
border-radius: 25rpx;
|
||
}
|
||
.college-title-icon{
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-top: -8rpx;
|
||
}
|
||
}
|
||
// 快捷入口
|
||
.quick-flex{
|
||
padding: 20rpx 15rpx 30rpx;
|
||
display: flex;
|
||
&-item{
|
||
position: relative;
|
||
width: calc(50% - 30rpx);
|
||
padding-top: calc(24% - 10rpx);
|
||
background-size: cover;
|
||
border-radius: $radius;
|
||
margin: 0 15rpx;
|
||
.quick-colum{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: white;
|
||
.quick-title{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
@extend .nowrap;
|
||
}
|
||
.quick-sumit{
|
||
font-size: 24rpx;
|
||
@extend .nowrap;
|
||
}
|
||
.quick-icon{
|
||
margin-top: 10rpx;
|
||
width: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 金刚区
|
||
.diamond-flex{
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
.diamond-item{
|
||
width: 20%;
|
||
padding: 20rpx 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.icon{
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
.text{
|
||
padding-top: 15rpx;
|
||
color: #111111;
|
||
font-size: 28rpx;
|
||
@extend .nowrap;
|
||
}
|
||
}
|
||
}
|
||
// 轮播图
|
||
.banner{
|
||
padding: 10rpx 30rpx;
|
||
.banner-swiper{
|
||
width: 100%;
|
||
padding-top: 43%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.uswiper{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
// 自定义状态栏
|
||
.college-bar{
|
||
height: 44px;
|
||
padding: 5px 30rpx 9px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
&-title{
|
||
width: 150rpx;
|
||
font-weight: bold;
|
||
line-height: 30px;
|
||
color: #111111;
|
||
font-size: 36rpx;
|
||
@extend .nowrap;
|
||
}
|
||
&-input{
|
||
height: 30px;
|
||
width: calc(100% - 210rpx);
|
||
margin: 0 $margin;
|
||
.navigator{
|
||
position: relative;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
background: #F6F6F6;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-radius: 15px;
|
||
padding: 0 50rpx 0 60rpx;
|
||
color: #999999;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
.navigator-icon{
|
||
position: absolute;
|
||
left: 20rpx;
|
||
top: 50%;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-top: -18rpx;
|
||
}
|
||
}
|
||
}
|
||
&-icons{
|
||
width: 60rpx;
|
||
text-align: right;
|
||
.icon{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
</style>
|