<template> <view> <view class="imgshead"></view> <view class="imgscontent"> <view class="conts paddtop13"> <view v-for="(item,index) in couponList" :key="index" class="conpon border-r height90 flleft marb10 "> <view class="width94 font15 fontwig6 fotlt fcorfff mart5"> 96折星巴克优惠券 </view> <view class="width80 fotct backcor99 mart5 linec6" style="opacity: 0.2;"></view> <view class="width90 font10 fotlt fcorfff mart3"> 满30-5元 </view> <view class="width90 font10 fotlt fcorfff mart3"> 有效时间: 30天 </view> <view class="width90 font10 fotlt fcorfff mart3"> 截止时间:2023年2月31日 </view> </view> </view> </view> <view class="imgsfoot"> <view class="width100 height50"></view> <view class="couponBtn fontlet font24 fotct fontwig6 width60w height45l">一键领取</view> </view> </view> </template> <script> let app = getApp(); export default { data() { return { imagewxUrl: app.globalData.imageWxImg, imgadres: 'share1.png', imgadres1: 'share2.png', couponList: [1, 2, 3, 4, 5, 6] } }, methods: { } } </script> <style lang="scss"> .imgshead { background-image: url(https://hsgcs.dctpay.com/filesystem/wxApplets/share1.png); background-size: 100% 230px; height: 230px; background-repeat: no-repeat; } .imgscontent { background-image: url(https://hsgcs.dctpay.com/filesystem/wxApplets/share2.png); background-size: 100% 320px; height: 320px; background-repeat: no-repeat; .conts { width: 74%; margin-left: 13%; } } .imgsfoot { background-image: url(https://hsgcs.dctpay.com/filesystem/wxApplets/share3.png); background-size: 100% 250px; height: 250px; background-repeat: no-repeat; } .conpon { background: linear-gradient(to bottom, #fe8e3f, #f14f21); width: 48%; margin-right: 1%; margin-left: 1%; } .couponBtn { letter-spacing: 3px; color: #ff482d; border-radius: 25px; background: linear-gradient(to right, #fea03c, #f7dd6a); } </style>