18 changed files with 1886 additions and 1580 deletions
@ -0,0 +1,108 @@ |
|||||||
|
<template> |
||||||
|
<view class="article-list"> |
||||||
|
<view class="article-item" v-for="(item,index) in list" :key="index" @click="toArticleDetail(item.id)"> |
||||||
|
<image :src="item.imageInput" mode="aspectFill"></image> |
||||||
|
<view class="article-content"> |
||||||
|
<view class="article-title line1">{{item.title}}</view> |
||||||
|
<view class="article-desc line1">{{item.synopsis}}</view> |
||||||
|
<view class="author-box acea-row row-between"> |
||||||
|
<view class="acea-row"> |
||||||
|
<view class="author">{{item.author}}</view> |
||||||
|
<view class="time">{{item.addTime.split(' ')[0]}}</view> |
||||||
|
<view>{{item.visit}}人阅读</view> |
||||||
|
</view> |
||||||
|
<view class="tips" |
||||||
|
:class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'"> |
||||||
|
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default{ |
||||||
|
props:{ |
||||||
|
list: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
toArticleDetail(id){ |
||||||
|
this.$yrouter.push({ |
||||||
|
path: '/pages/knowledge/detail', |
||||||
|
query: { |
||||||
|
id:id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.article-list{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 20rpx; |
||||||
|
.article-item{ |
||||||
|
width: 100%; |
||||||
|
background: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-bottom: 52rpx; |
||||||
|
box-shadow: 0px 2rpx 8rpx rgba(0, 0, 0, 0.16); |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 266rpx; |
||||||
|
border-radius: 10rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
.article-content{ |
||||||
|
padding: 28rpx 32rpx; |
||||||
|
} |
||||||
|
.article-title{ |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #333333; |
||||||
|
line-height: 50rpx; |
||||||
|
margin-bottom: 8rpx; |
||||||
|
} |
||||||
|
.article-desc{ |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #999999; |
||||||
|
line-height: 40rpx; |
||||||
|
margin-bottom: 30rpx; |
||||||
|
} |
||||||
|
.author-box{ |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
.author{ |
||||||
|
color: #EA533E; |
||||||
|
} |
||||||
|
.time{ |
||||||
|
margin: 0 12rpx; |
||||||
|
} |
||||||
|
.tips{ |
||||||
|
width: 100rpx; |
||||||
|
font-size: 20rpx; |
||||||
|
color: #FFAD3A; |
||||||
|
height: 34rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 34rpx; |
||||||
|
background: #fcd391; |
||||||
|
border-radius: 44rpx; |
||||||
|
} |
||||||
|
.free-bg{ |
||||||
|
background: #8FB85B; |
||||||
|
color: #D7FFA4; |
||||||
|
} |
||||||
|
.jifen{ |
||||||
|
background: #AAC8FA; |
||||||
|
color: #5693F9; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,124 @@ |
|||||||
|
<template> |
||||||
|
<view class="recommend-list-box acea-row row-between"> |
||||||
|
<view class="recommend-item" v-for="(item,index) in list" :key="index" @click="toCourseDetail(item.id)"> |
||||||
|
<view class="img-box"><image :src="item.coverImg" mode="aspectFill"></image></view> |
||||||
|
<view class="course-content"> |
||||||
|
<view class="course-title line1">{{item.courseName}}</view> |
||||||
|
<view class="course-tips-box acea-row"> |
||||||
|
<view class="course-tip-item blue">{{item.categoryName}}</view> |
||||||
|
</view> |
||||||
|
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view> |
||||||
|
<view class="price" v-if="item.level == 2">￥{{item.courseCharge}}</view> |
||||||
|
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> --> |
||||||
|
<view class="course-address acea-row row-between-wrapper"> |
||||||
|
<view class="address">{{item.coursePlace}}</view> |
||||||
|
<view class="course-time">{{item.enterStartTime}}-{{item.enterEndTime}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default{ |
||||||
|
props: { |
||||||
|
list: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
titImg: '../../../static/tit1.png', |
||||||
|
titleWord: '查看更多课程' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
toCourseDetail(id){ |
||||||
|
this.$yrouter.push({ |
||||||
|
path: '/pages/course/detail', |
||||||
|
query: { |
||||||
|
id:id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
seeMoreClick(){ |
||||||
|
uni.switchTab({ |
||||||
|
url: "/pages/course/index" |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.recommend-list-box{ |
||||||
|
width: 100%; |
||||||
|
.recommend-item{ |
||||||
|
width: 334rpx; |
||||||
|
background: #fff; |
||||||
|
border-radius: 10rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
margin-right: 22rpx; |
||||||
|
margin-bottom: 22rpx; |
||||||
|
box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16); |
||||||
|
image{ |
||||||
|
width: 334rpx; |
||||||
|
height: 216rpx; |
||||||
|
border-top-left-radius: 10rpx; |
||||||
|
border-top-right-radius: 10rpx; |
||||||
|
} |
||||||
|
.course-content{ |
||||||
|
width: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding:0 10rpx 20rpx; |
||||||
|
} |
||||||
|
.course-title{ |
||||||
|
line-height: 40rpx; |
||||||
|
} |
||||||
|
.course-tips-box{ |
||||||
|
margin: 12rpx 0 24rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
.course-tip-item{ |
||||||
|
min-width: 60rpx; |
||||||
|
height: 34rpx; |
||||||
|
line-height: 32rpx; |
||||||
|
text-align: center; |
||||||
|
background: #EDEFF8; |
||||||
|
border-radius: 4rpx; |
||||||
|
border: 1px solid #6E85EB; |
||||||
|
padding: 0 6rpx; |
||||||
|
font-size: 22rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
.blue{ |
||||||
|
color: #6E85EB; |
||||||
|
background: #EDEFF8; |
||||||
|
border-color: #6E85EB; |
||||||
|
} |
||||||
|
.yellow{ |
||||||
|
color: #F99C10; |
||||||
|
background: #FFEDCC; |
||||||
|
border-color: #F99C10; |
||||||
|
} |
||||||
|
} |
||||||
|
.price{ |
||||||
|
font-size: 32rpx; |
||||||
|
color: #EA533E; |
||||||
|
font-weight: 500; |
||||||
|
margin: 16rpx 0; |
||||||
|
} |
||||||
|
.course-address{ |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999999; |
||||||
|
} |
||||||
|
} |
||||||
|
.recommend-item:nth-child(2n){ |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,216 +1,214 @@ |
|||||||
<template> |
<template> |
||||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> |
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> |
||||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })"> |
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })"> |
||||||
<text class="title">首发新品</text> |
<text class="title">首发新品</text> |
||||||
<view class="group-people x-f"> |
<view class="group-people x-f"> |
||||||
<text class="tip">更多</text> |
<text class="tip">更多</text> |
||||||
<text class="cuIcon-right"></text> |
<text class="cuIcon-right"></text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="goods-box swiper-box x-f"> |
<view class="goods-box swiper-box x-f"> |
||||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
||||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
||||||
<view class="goods-list-box x-f"> |
<view class="goods-list-box x-f"> |
||||||
<block v-for="mgoods in goods" :key="mgoods.id"> |
<block v-for="mgoods in goods" :key="mgoods.id"> |
||||||
<view class="min-goods" |
<view class="min-goods" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })"> |
||||||
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })"> |
<view class="img-box"> |
||||||
<view class="img-box"> |
<view class="tag">new</view> |
||||||
<view class="tag">new</view> |
<image class="img" :src="mgoods.image" mode="widthFix"></image> |
||||||
<image class="img" :src="mgoods.image" mode="widthFix"></image> |
</view> |
||||||
</view> |
<view class="price-box"> |
||||||
<view class="price-box"> |
<view class="y-f"> |
||||||
<view class="y-f"> |
<text class="seckill-current">￥{{ mgoods.price }}</text> |
||||||
<text class="seckill-current">￥{{ mgoods.price }}</text> |
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> |
||||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
<view class="title"> |
||||||
<view class="title"> |
<slot name="titleText"></slot> |
||||||
<slot name="titleText"></slot> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</block> |
||||||
</block> |
</view> |
||||||
</view> |
</swiper-item> |
||||||
</swiper-item> |
</swiper> |
||||||
</swiper> |
<view class="swiper-dots" v-if="goodsList.length > 1"> |
||||||
<view class="swiper-dots" v-if="goodsList.length > 1"> |
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" :key="index"></text> |
||||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" |
</view> |
||||||
:key="index"></text> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import shActivityGoods from '@/components/sh-activity-goods.vue'; |
import shActivityGoods from '@/components/sh-activity-goods.vue'; |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "FirstNewProduct", |
name: "FirstNewProduct", |
||||||
components: { |
components: { |
||||||
shActivityGoods |
shActivityGoods |
||||||
}, |
}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
goodsList: [], |
goodsList: [], |
||||||
swiperCurrent: 0 |
swiperCurrent: 0 |
||||||
}; |
}; |
||||||
}, |
}, |
||||||
props: { |
props: { |
||||||
detail: Array |
detail: Array |
||||||
}, |
}, |
||||||
computed: {}, |
computed: {}, |
||||||
created() {}, |
created() {}, |
||||||
watch: { |
watch: { |
||||||
detail(next) { |
detail(next) { |
||||||
this.goodsList = this.sortData(next, 4); |
this.goodsList = this.sortData(next, 4); |
||||||
} |
} |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
swiperChange(e) { |
swiperChange(e) { |
||||||
this.swiperCurrent = e.detail.current; |
this.swiperCurrent = e.detail.current; |
||||||
}, |
}, |
||||||
// 数据分层 |
// 数据分层 |
||||||
sortData(oArr, length) { |
sortData(oArr, length) { |
||||||
let arr = []; |
let arr = []; |
||||||
let minArr = []; |
let minArr = []; |
||||||
oArr.forEach(c => { |
oArr.forEach(c => { |
||||||
if (minArr.length === length) { |
if (minArr.length === length) { |
||||||
minArr = []; |
minArr = []; |
||||||
} |
} |
||||||
if (minArr.length === 0) { |
if (minArr.length === 0) { |
||||||
arr.push(minArr); |
arr.push(minArr); |
||||||
} |
} |
||||||
minArr.push(c); |
minArr.push(c); |
||||||
}); |
}); |
||||||
|
|
||||||
return arr; |
return arr; |
||||||
}, |
}, |
||||||
jump(path, query) { |
jump(path, query) { |
||||||
this.$yrouter.push({ |
this.$yrouter.push({ |
||||||
path, |
path, |
||||||
query, |
query, |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
.group-goods { |
.group-goods { |
||||||
position: relative; |
position: relative; |
||||||
z-index: 9; |
z-index: 9; |
||||||
} |
} |
||||||
|
|
||||||
.swiper-box, |
.swiper-box, |
||||||
.carousel { |
.carousel { |
||||||
width: 700rpx; |
width: 700rpx; |
||||||
height: 240upx; |
height: 240upx; |
||||||
position: relative; |
position: relative; |
||||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||||
|
|
||||||
.carousel-item { |
.carousel-item { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
// padding: 0 28upx; |
// padding: 0 28upx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
} |
} |
||||||
|
|
||||||
.swiper-image { |
.swiper-image { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
// border-radius: 10upx; |
// border-radius: 10upx; |
||||||
background: #ccc; |
background: #ccc; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.swiper-dots { |
.swiper-dots { |
||||||
display: flex; |
display: flex; |
||||||
position: absolute; |
position: absolute; |
||||||
left: 50%; |
left: 50%; |
||||||
transform: translateX(-50%); |
transform: translateX(-50%); |
||||||
bottom: 0rpx; |
bottom: 0rpx; |
||||||
z-index: 66; |
z-index: 66; |
||||||
|
|
||||||
.dot { |
.dot { |
||||||
width: 45rpx; |
width: 45rpx; |
||||||
height: 3rpx; |
height: 3rpx; |
||||||
background: #eee; |
background: #eee; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
margin-right: 10rpx; |
margin-right: 10rpx; |
||||||
} |
} |
||||||
|
|
||||||
.dot-active { |
.dot-active { |
||||||
width: 45rpx; |
width: 45rpx; |
||||||
height: 3rpx; |
height: 3rpx; |
||||||
background: #a8700d; |
background: #a8700d; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
margin-right: 10rpx; |
margin-right: 10rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
// 今日必拼+限时抢购 |
// 今日必拼+限时抢购 |
||||||
.group-goods { |
.group-goods { |
||||||
background: #fff; |
background: #fff; |
||||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
|
|
||||||
.title-box { |
.title-box { |
||||||
padding-bottom: 20rpx; |
padding-bottom: 20rpx; |
||||||
|
|
||||||
.title { |
.title { |
||||||
font-size: 32rpx; |
font-size: 32rpx; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
} |
} |
||||||
|
|
||||||
.group-people { |
.group-people { |
||||||
.time-box { |
.time-box { |
||||||
font-size: 26rpx; |
font-size: 26rpx; |
||||||
color: #edbf62; |
color: #edbf62; |
||||||
|
|
||||||
.count-text-box { |
.count-text-box { |
||||||
width: 30rpx; |
width: 30rpx; |
||||||
height: 34rpx; |
height: 34rpx; |
||||||
background: #edbf62; |
background: #edbf62; |
||||||
text-align: center; |
text-align: center; |
||||||
line-height: 34rpx; |
line-height: 34rpx; |
||||||
font-size: 24rpx; |
font-size: 24rpx; |
||||||
border-radius: 6rpx; |
border-radius: 6rpx; |
||||||
color: rgba(#fff, 0.9); |
color: rgba(#fff, 0.9); |
||||||
margin: 0 8rpx; |
margin: 0 8rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.head-box { |
.head-box { |
||||||
.head-img { |
.head-img { |
||||||
width: 40rpx; |
width: 40rpx; |
||||||
height: 40rpx; |
height: 40rpx; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
background: #ccc; |
background: #ccc; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.tip { |
.tip { |
||||||
font-size: 28rpx; |
font-size: 28rpx; |
||||||
padding-left: 30rpx; |
padding-left: 30rpx; |
||||||
color: #666; |
color: #666; |
||||||
} |
} |
||||||
|
|
||||||
.cuIcon-right { |
.cuIcon-right { |
||||||
font-size: 30rpx; |
font-size: 30rpx; |
||||||
line-height: 28rpx; |
line-height: 28rpx; |
||||||
color: #666; |
color: #666; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.goods-box { |
.goods-box { |
||||||
.goods-item { |
.goods-item { |
||||||
margin-right: 22rpx; |
margin-right: 22rpx; |
||||||
|
|
||||||
&:nth-child(4n) { |
&:nth-child(4n) { |
||||||
margin-right: 0; |
margin-right: 0; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -0,0 +1,54 @@ |
|||||||
|
<template> |
||||||
|
<view class="title-box acea-row row-between-wrapper"> |
||||||
|
<view class="title"><image :src="titImg"></image></view> |
||||||
|
<view class="more" @click="seeMoreClick">{{titWord}}</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default{ |
||||||
|
name: 'ListTitleBox', |
||||||
|
props:{ |
||||||
|
// 标题图片 |
||||||
|
titImg:{ |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 标题内容 |
||||||
|
titWord: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 图片尺寸 |
||||||
|
width: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods:{ |
||||||
|
seeMoreClick(){ |
||||||
|
this.$emit('seeMoreClick') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.title-box{ |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 28rpx; |
||||||
|
image{ |
||||||
|
width: 206rpx; |
||||||
|
height: 58rpx; |
||||||
|
} |
||||||
|
.more{ |
||||||
|
font-size: 28rpx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
<template> |
||||||
|
<view class="study-list uni-padding-wrap uni-common-mt"> |
||||||
|
<scroll-view class="scroll-view_H" scroll-x="true"> |
||||||
|
<view class="study-item scroll-view-item_H" v-for="(item,index) in list" :key="index" @click="toStudyDetail(item.id)"> |
||||||
|
<view class="day-box acea-row row-middle"> |
||||||
|
<image src="../../../static/date-icon.png" v-if="index%2 == 0"></image> |
||||||
|
<image src="../../../static/date-icon2.png" v-if="index%2 != 0"></image> |
||||||
|
<text>{{item.clockTimes}}</text> |
||||||
|
</view> |
||||||
|
<view class="study-content"> |
||||||
|
<view class="study-title line1">{{item.listName}}</view> |
||||||
|
<view class="study-time acea-row-nowrap row-between-wrapper"> |
||||||
|
<view>{{item.listStartTime}}开始</view> |
||||||
|
<view>{{item.enterNum}}人已参与</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default{ |
||||||
|
props:{ |
||||||
|
list: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
toStudyDetail(id){ |
||||||
|
this.$yrouter.push({ |
||||||
|
path: '/pages/study/detail', |
||||||
|
query: { |
||||||
|
id:id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
.study-list{ |
||||||
|
width: 100%; |
||||||
|
.scroll-view_H{ |
||||||
|
white-space: nowrap; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.study-item{ |
||||||
|
width: 334rpx; |
||||||
|
height: 180rpx; |
||||||
|
display: inline-block; |
||||||
|
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%); |
||||||
|
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32); |
||||||
|
border-radius: 10rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
.day-box{ |
||||||
|
color: #E73D21; |
||||||
|
font-size: 48rpx; |
||||||
|
line-height: 58rpx; |
||||||
|
margin-left: 10rpx; |
||||||
|
image{ |
||||||
|
width: 34rpx; |
||||||
|
height: 34rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.study-content{ |
||||||
|
width: calc(100% - 12rpx); |
||||||
|
background: #fff; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32); |
||||||
|
border-radius: 10rpx; |
||||||
|
margin: 2rpx auto; |
||||||
|
padding:16rpx 10rpx 10rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.study-title{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #222222; |
||||||
|
line-height: 40rpx; |
||||||
|
margin-bottom: 12rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.study-item:nth-child(2n){ |
||||||
|
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%); |
||||||
|
.day-box{ |
||||||
|
color: #557AB3; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in new issue