|
@@ -1,8 +1,121 @@
|
|
|
<template>
|
|
|
+ <view class="message">
|
|
|
+ <view class="item" v-for="l in list">
|
|
|
+ <view class="img">
|
|
|
+ <image :src="l.img" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="top">
|
|
|
+ <view class="title">{{ l.title }}</view><view class="time">{{ l.time }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="concent clamp2">{{ l.concent }}</view><view class="icon" v-show="l.lookAll"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ img: require('../../static/icon/message1.png'),
|
|
|
+ title: "系统消息",
|
|
|
+ time: "2018-12-09 12:00:00",
|
|
|
+ concent: "恭喜你,你已从营长升级至团长!",
|
|
|
+ lookAll: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('../../static/icon/message2.png'),
|
|
|
+ title: "新增下线",
|
|
|
+ time: "2018-12-09 12:00:00",
|
|
|
+ concent: "恭喜你,[下线昵称]在[时间]成为你的下线!",
|
|
|
+ lookAll: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('../../static/icon/message3.png'),
|
|
|
+ title: "佣金通知",
|
|
|
+ time: "2018-12-09 12:00:00",
|
|
|
+ concent: "[下线昵称]在[时间]成功支付,恭喜你获得0.3元佣金!",
|
|
|
+ lookAll: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('../../static/icon/message4.png'),
|
|
|
+ title: "发货通知",
|
|
|
+ time: "2018-12-09 12:00:00",
|
|
|
+ concent: "您购买的[商品名称]在[时间]已成功发货!!",
|
|
|
+ lookAll: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('../../static/icon/message5.png'),
|
|
|
+ title: "开团通知",
|
|
|
+ time: "2018-12-09 12:00:00",
|
|
|
+ concent: "您于[时间]成功发起[商品名称]的拼购活动,快去邀请好友一起拼团吧!快去邀请好友一起拼团吧",
|
|
|
+ lookAll: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .message {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ background-color: #fff;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-bottom: solid 1rpx #f8f8f8;
|
|
|
+ .img {
|
|
|
+ margin: auto 0;
|
|
|
+ width: 110rpx;
|
|
|
+ margin-left: 0rpx;
|
|
|
+ image {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: calc(100% - 110rpx);
|
|
|
+ display: grid;
|
|
|
+ align-content: space-between;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title {
|
|
|
+ color: #000;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .concent {
|
|
|
+ width: calc(100% - 30rpx);
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ margin: auto 0;
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: #FB555C;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|