修改页面

2025-08-11 14:06:42 +08:00
parent 462073058e
commit 9c0be00fbd
31 changed files with 1180 additions and 309 deletions
--- a/bundle/pages/coupon/coupon_package.vue
+++ b/bundle/pages/coupon/coupon_package.vue
@ -0,0 +1,143 @@
+<template>
+    <view class="content">
+        <view class="item row-between"  v-for="(item, index) in 10" :key="index">
+            <view class="coupon2">
+                <view class="coupon-top2">
+                    <text>优惠券专享</text>
+                </view>
+                <view class="unit">
+                    <view>5</view>
+                    <view>元</view>
+                    <view class="u-m-l-10 u-m-r-10">x</view>
+                    <view>6</view>
+                    <view>张</view>
+                </view>
+                <view class="coupon-tips2">
+                    满11元可用
+                </view>
+            </view>
+            <view class="u-m-l-18 flex1 row-between">
+                <view>
+                    <view class="xl bold-600">30元神券包</view>
+                    <view class="surprise">惊喜折扣减12元</view>
+                    <view class="row u-m-t-38">
+                        <view class="primary">
+							<price-format :subscript-size="26" :first-size="40" :second-size="40" :price="18" :weight="600"></price-format>
+                        </view>
+                        <view class="text-858386 u-m-l-8">
+							<price-format :subscript-size="22" :first-size="22" :second-size="22" :price="30" :weight="400"></price-format>
+                        </view>
+                    </view>
+                </view>
+                <view class="buy" style="align-self: flex-end;">购买</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                checked: false
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+.bold-600 {
+    font-weight: 600;
+}
+
+.text-858386 {
+    color: #858386;
+}
+
+.content {
+    margin: 24rpx 24rpx 0;
+    padding-bottom: 12rpx;
+}
+
+.item {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 20rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.04);
+    padding: 24rpx;
+}
+
+.coupon2 {
+	margin-right: 20rpx;
+	position: relative;
+	width: 258rpx;
+	height: 161rpx;
+	background: #FFF5F3;
+	border-radius: 24rpx 24rpx 24rpx 24rpx;
+}
+
+.curved-rect {
+	width: 258rpx;
+	height: 64rpx;
+}
+
+.coupon-top2 {
+	position: absolute;
+	left: 50%;
+	top: 0;
+	transform: translateX(-50%);
+	width: 136rpx;
+	height: 30rpx;
+	background: #FFEBE3;
+	text-align: center;
+	border-bottom-left-radius: 24rpx;
+	border-bottom-right-radius: 24rpx;
+	color: #F1BFB6;
+	font-size: 22rpx;
+	line-height: 27rpx;
+}
+
+.unit {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 40rpx;
+	color: #F90004;
+	font-weight: 600;
+	padding-top: 40rpx;
+	text-align: center;
+}
+
+.coupon-tips2 {
+	background-image: url('/static/coupon_bg.png');
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	height: 66rpx;
+	text-align: center;
+	padding-top: 20rpx;
+	color: #fff;
+}
+
+.surprise {
+    width: 159rpx;
+    height: 31rpx;
+    line-height: 31rpx;
+    padding: 0 6rpx;
+    background-color: #FCEEED;
+    border-radius: 8rpx;
+    color: #EB441A;
+    text-align: center;
+    font-size: 20rpx;
+}
+
+.buy {
+    width: 159rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    background: #FD414B;
+    border-radius: 28rpx;
+    color: #fff;
+    text-align: center;
+}
+</style>