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> |