138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="coupon-notice-page">
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<custom-navbar
|
|||
|
|
:title="title"
|
|||
|
|
:show-back="true"
|
|||
|
|
title-color="#000"
|
|||
|
|
background-color="#FFFFFF"
|
|||
|
|
:showHeadle="true"
|
|||
|
|
headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0b137ffb-6165-465c-9497-b5c9375bac74.png"
|
|||
|
|
@onHeadleClick="handleHeadleClick"
|
|||
|
|
></custom-navbar>
|
|||
|
|
<!-- 优惠通知卡片列表 -->
|
|||
|
|
<view class="message-list">
|
|||
|
|
<noData></noData>
|
|||
|
|
<!-- <view class="message-item">
|
|||
|
|
<view class="item-content">
|
|||
|
|
<view class="item-header">
|
|||
|
|
<view class="item-title-group">
|
|||
|
|
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/202a8ef8-55a3-4a33-ab92-fd0d7567cf90.png" mode="aspectFit"></image>
|
|||
|
|
<text class="item-title">您有一张新卡券</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="item-time">1月02日 11:00</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-body">
|
|||
|
|
<view class="item-info">
|
|||
|
|
<text class="item-line">恭喜您获得【新人现金券】，点击查看卡券详情</text>
|
|||
|
|
</view>
|
|||
|
|
<image class="item-product-img" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cca9c23f-2052-4335-8e50-27d5d2861eeb.png" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: '活动通知',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.coupon-notice-page {
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coupon-notice-page ::v-deep .right-area,
|
|||
|
|
.coupon-notice-page ::v-deep .icon-headle {
|
|||
|
|
width: 38rpx !important;
|
|||
|
|
height: 37rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-title-group {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-icon {
|
|||
|
|
width: 57rpx;
|
|||
|
|
height: 49rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-time {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #A5A5A5;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-body {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 39rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-line {
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-product-img {
|
|||
|
|
width: 128rpx;
|
|||
|
|
height: 78rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|