TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

工作台

Browse Source
This commit is contained in:
唐明明
2022-12-26 09:31:55 +08:00
parent f7d357f738
commit 1f3f6b230a
218 changed files with 19796 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
pages/college/index.vue Normal file
View File

@@ -0,0 +1,536 @@
<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>