125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<template>
|
||
<view class="info-box">
|
||
<view v-if="list.length === 0" class="nothing-info">
|
||
<image src="../../static/img/fz_icon_wc/fz_icon_wc.png" class="image"></image>
|
||
<view class="zw">暂无消息</view>
|
||
<view class="noinfo">还没有消失通知</view>
|
||
</view>
|
||
<view v-else class="card-list">
|
||
<view v-for="(item, index) in list" :key="index">
|
||
<view class="time-class">{{item.time}}</view>
|
||
<view v-for="(item1, index1) in item.item" :key="index1">
|
||
<u-card :title="item1.title" :thumb="item1.thumb" :border="false">
|
||
<view class="" slot="body">
|
||
{{item1.content}}
|
||
</view>
|
||
</u-card>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
list: [
|
||
// {
|
||
// time: '2021-01-12 14:23:12',
|
||
// item: [
|
||
// {
|
||
// title: '短视频服务抖达人正式上线',
|
||
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
|
||
// content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
|
||
// },
|
||
// {
|
||
// title: '短视频服务抖达人正式上线',
|
||
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
|
||
// content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// time: '2021-01-12 14:23:12',
|
||
// item: [
|
||
// {
|
||
// title: '短视频服务抖达人正式上线',
|
||
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
|
||
// content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
|
||
// },
|
||
// {
|
||
// title: '短视频服务抖达人正式上线',
|
||
// thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
|
||
// content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
|
||
// }
|
||
// ]
|
||
// }
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.info-box {
|
||
height: 100%;
|
||
}
|
||
.nothing-info {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
& .image {
|
||
// width: 170rpx;
|
||
// height: 200rpx;
|
||
}
|
||
& .zw {
|
||
margin-top: 100rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 400;
|
||
color: #CED6F1;
|
||
line-height: 56rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
& .noinfo {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #9496B1;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.card-list {
|
||
.time-class {
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
margin-top: 30rpx;
|
||
}
|
||
& /deep/ .u-card {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
padding: 30rpx;
|
||
background-color: #2B3062;
|
||
}
|
||
& /deep/ .u-card__head {
|
||
margin-bottom: 25rpx;
|
||
border-bottom: 1rpx solid #576699;
|
||
padding: 0 0 20rpx 0 !important;
|
||
& /deep/ .u-card__head--left {
|
||
display: flex;
|
||
align-items: center;
|
||
& /deep/ .u-card__head--left__title {
|
||
color: #FFFFFF !important;
|
||
}
|
||
}
|
||
}
|
||
& /deep/ .u-card__body {
|
||
padding: 0 !important;
|
||
color: #9093B7;
|
||
}
|
||
}
|
||
</style>
|