Files
learning-system-mobile/components/system-news/system-news.vue
2022-11-09 19:16:20 +08:00

96 lines
1.8 KiB
Vue

<template>
<view>
<view class="news-page-btn">
<view class="btn-index">多选</view>
<view class="btn-index">清空</view>
<view class="btn-index">一键已读</view>
</view>
<view class="news-page-list">
<view class="list-index" v-for="item in 5">
<view class="list-index-img">
<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
</view>
<view class="list-index-cen">
<view class="cen-name">
李沐沐
</view>
<view class="cen-text">
收藏了你发布的课程···
</view>
</view>
<view class="list-index-time">
2022/9/20
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.news-page-btn{
height: 80upx;
padding: 30upx 32upx 0 36upx;
.btn-index{
font-size: 28upx;
color: #666666;
float: right;
margin-left: 20upx;
padding: 6upx 32upx 6upx 28upx;
border: 2upx solid rgba(153,153,153,0.2);
border-radius: 26upx;
}
.btn-index:first-child{
margin-left: 0;
float: left;
}
}
.news-page-list{
padding: 0 32upx 0 36upx;
box-sizing: border-box;
.list-index{
display: flex;
padding: 40upx 0;
border-bottom: 2upx solid rgba(153,153,153,0.1);;
.list-index-img{
width: 80upx;
}
.list-index-cen{
margin-left: 30upx;
width: 100%;
.cen-name{
font-size: 28upx;
font-weight: 500;
color: #333333;
margin-top: 4upx;
}
.cen-text{
font-size: 24upx;
color: #999999;
margin-top: 4upx;
}
}
.list-index-time{
margin-top: 4upx;
width: 130upx;
font-size: 24upx;
color: #999999;
}
}
}
</style>