From 025e46e11cb2962fd7692adfa401333758cc779b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 02 九月 2025 14:00:34 +0800
Subject: [PATCH] 修改组件
---
src/pages_template/pages/coupon/index.vue | 402 --------------------------------------------------------
1 files changed, 6 insertions(+), 396 deletions(-)
diff --git a/src/pages_template/pages/coupon/index.vue b/src/pages_template/pages/coupon/index.vue
index 5807c62..53f6f94 100644
--- a/src/pages_template/pages/coupon/index.vue
+++ b/src/pages_template/pages/coupon/index.vue
@@ -1,92 +1,13 @@
<script setup>
+import MeituanCoupon from './components/meituan-coupon.vue';
+import JingdongCoupon from './components/jingdong-coupon.vue';
+import TaobaoCoupon from './components/taobao-coupon.vue';
</script>
<template>
<view class="u-wrap">
- <view class="meituan">
- <view class="content">
- <view class="left">
- <view class="sum">
- 锟�
- <text class="num">8</text>
- </view>
- <view class="type">鎶电敤鍒�</view>
- </view>
- <view class="centre">
- <view class="title">銆愭礂鐗欍��8鍏冩棤闂ㄦ绾㈠寘</view>
- <view class="valid-date">浠婃棩鍒版湡</view>
- </view>
- <view class="right">
- <view size="mini" class="immediate-use" :round="true">绔嬪嵆浣跨敤</view>
- </view>
- </view>
- <view class="tips">
- <view class="circle-left"></view>
- <view class="circle-right"></view>
- <view class="explain u-line-1">婊�8.1鍏冨彲鐢ㄣ�侀檺鏈�鏂扮増鏈鎴风浣跨敤</view>
- <view class="rule" @tap="xxx122">
- <text>浣跨敤瑙勫垯</text>
- <u-icon name="arrow-right" color="" :size="20" @click=""></u-icon>
- </view>
- </view>
- </view>
- <view class="jingdong">
- <view class="left">
- <view class="sum">
- 锟�
- <text class="num">100</text>
- </view>
- <view class="type">婊�149鍏冨彲鐢�</view>
- </view>
- <view class="right">
- <view class="top">
- <view class="title">
- <text class="tag">闄愬搧绫讳笢鍒�</text>
- <text>浠呭彲璐拱涓汉鎶ょ悊閮ㄥ垎鍟嗗搧</text>
- </view>
- <view class="bottom">
- <view class="date u-line-1">2020.01.01-2020.01.31</view>
- <view class="immediate-use">绔嬪嵆浣跨敤</view>
- </view>
- </view>
- <view class="tips">
- <view class="explain">
- <u-icon name="zhuanfa" class="transpond" :size="24"></u-icon>
- <text>鍙禒閫�</text>
- </view>
- </view>
- </view>
- </view>
- <view class="taobao">
- <view class="title">
- <view class="left">
- <image class="buddha"
- src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg"
- mode="aspectFill"></image>
- <view class="store">琚滃瓙绮句繚鎶ゅ崗浼�</view>
- </view>
- <view class="entrance">杩涘簵</view>
- </view>
- <view class="ticket">
- <view class="left">
- <image class="picture"
- src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578059523488&di=5f592ac19c1b983005d3e85add469756&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM00%2F2D%2FB9%2FwKhQs1QfUo6EdeM-AAAAALwk1hM072.jpg"
- mode="widthFix"></image>
- <view class="introduce">
- <view class="top">
- 锟�
- <text class="big">3</text>
- 婊�88鍑�3
- </view>
- <view class="type">搴楅摵浼樻儬鍒�</view>
- <view class="date u-line-1">2019.11.28-2020.1.24</view>
- </view>
- </view>
- <view class="right">
- <view class="use immediate-use" :round="true">鍘讳娇鐢�</view>
- </view>
-
- </view>
- </view>
+ <MeituanCoupon />
+ <JingdongCoupon />
+ <TaobaoCoupon />
</view>
</template>
@@ -98,316 +19,5 @@
.u-wrap {
padding: 24rpx;
-}
-
-.meituan {
- margin: 30rpx auto;
- background-color: #ffffff;
- width: 700rpx;
- // border: 10rpx;
- color: $u-warning;
- font-size: 28rpx;
-
- .content {
- display: flex;
- align-items: center;
- padding: 80rpx 20rpx;
- border: 10rpx;
- background-color: #fff5f4;
-
- .left {
- .sum {
- font-size: 32rpx;
-
- .num {
- font-size: 60rpx;
- font-weight: bold;
- }
- }
- }
-
- .centre {
- margin-left: 40rpx;
-
- .title {
- font-size: 32rpx;
- font-weight: bold;
- color: $u-main-color;
- margin-bottom: 20rpx;
- }
- }
-
- .right {
- margin-left: 30rpx;
-
- .immediate-use {
- padding: 0 20rpx;
- height: 50rpx;
- border-radius: 25rpx;
- line-height: 50rpx;
- background-color: $u-warning !important;
- color: #ffffff !important;
- font-size: 24rpx;
- border: none;
- word-break: keep-all;
- }
- }
- }
-
- .tips {
- padding: 0 20rpx;
- border: 10rpx;
- background-color: $u-info-light;
- position: relative;
- color: $u-tips-color;
- display: flex;
- justify-content: space-between;
- line-height: 60rpx;
- font-size: 24rpx;
-
- .circle-left,
- .circle-right {
- position: absolute;
- height: 36rpx;
- width: 18rpx;
- background-color: #f2f2f2;
- }
-
- .circle-right {
- border-radius: 40rpx 0 0 40rpx;
- right: 0;
- top: -18rpx;
- }
-
- .circle-left {
- border-radius: 0 40rpx 40rpx 0;
- left: 0;
- top: -18rpx;
- }
-
- .rule {
- font-size: 24rpx;
- display: flex;
- align-items: center;
-
- text {
- margin-right: 10rpx;
- flex: 1;
- }
- }
- }
-}
-
-.jingdong {
- margin-top: 40rpx;
- width: 700rpx;
- height: auto;
- background-color: #ffffff;
- display: flex;
-
- .left {
- padding: 0 30rpx;
- background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
- text-align: center;
- font-size: 28rpx;
- color: #ffffff;
-
- .sum {
- margin-top: 50rpx;
- font-weight: bold;
- font-size: 32rpx;
-
- .num {
- font-size: 80rpx;
- }
- }
-
- .type {
- margin-bottom: 50rpx;
- font-size: 24rpx;
- }
- }
-
- .right {
- padding: 20rpx 20rpx 0;
- font-size: 28rpx;
-
- .top {
- border-bottom: 2rpx dashed $u-border-color;
-
- .title {
- margin-right: 60rpx;
- line-height: 40rpx;
-
- .tag {
- padding: 4rpx 20rpx;
- background-color: rgb(73, 154, 201);
- border-radius: 20rpx;
- color: #ffffff;
- font-weight: bold;
- font-size: 24rpx;
- margin-right: 10rpx;
- }
- }
-
- .bottom {
- display: flex;
- margin-top: 20rpx;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 10rpx;
-
- .date {
- font-size: 20rpx;
- flex: 1;
- }
-
- .immediate-use {
- height: auto;
- padding: 0 20rpx;
- font-size: 24rpx;
- border-radius: 40rpx;
- line-height: 40rpx;
- color: rgb(117, 142, 165);
- border: 2rpx solid rgb(117, 142, 165);
- }
- }
- }
-
- .tips {
- width: 100%;
- line-height: 50rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 24rpx;
-
- .transpond {
- margin-right: 10rpx;
- }
-
- .explain {
- display: flex;
- align-items: center;
- }
-
- .particulars {
- width: 30rpx;
- height: 30rpx;
- box-sizing: border-box;
- padding-top: 8rpx;
- border-radius: 50%;
- background-color: $u-info-disabled;
- text-align: center;
- }
- }
- }
-}
-
-.taobao {
- margin-top: 40rpx;
- width: 700rpx;
- background-color: white;
- padding: 30rpx 20rpx 20rpx;
- border-radius: 20rpx;
-
- .title {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20rpx;
- font-size: 30rpx;
-
- .left {
- display: flex;
- align-items: center;
- }
-
- .store {
- font-weight: 500;
- }
-
- .buddha {
- width: 70rpx;
- height: 70rpx;
- border-radius: 10rpx;
- margin-right: 10rpx;
- }
-
- .entrance {
- color: $u-info;
- border: solid 2rpx $u-info;
- line-height: 48rpx;
- padding: 0 30rpx;
- background: none;
- border-radius: 15px;
- }
- }
-
- .ticket {
- display: flex;
-
- .left {
- width: 70%;
- padding: 30rpx 20rpx;
- background-color: rgb(255, 245, 244);
- border-radius: 20rpx;
- border-right: dashed 2rpx rgb(224, 215, 211);
- display: flex;
-
- .picture {
- width: 172rpx;
- height: 172rpx;
- border-radius: 20rpx;
- }
-
- .introduce {
- margin-left: 10rpx;
-
- .top {
- color: $u-warning;
- font-size: 28rpx;
-
- .big {
- font-size: 60rpx;
- font-weight: bold;
- margin-right: 10rpx;
- }
- }
-
- .type {
- font-size: 28rpx;
- color: $u-info-dark;
- }
-
- .date {
- margin-top: 10rpx;
- font-size: 20rpx;
- color: $u-info-dark;
- }
- }
- }
-
- .right {
- width: 30%;
- padding: 40rpx 20rpx;
- background-color: rgb(255, 245, 244);
- border-radius: 20rpx;
- display: flex;
- align-items: center;
-
- .use {
- height: auto;
- padding: 0 20rpx;
- font-size: 24rpx;
- border-radius: 40rpx;
- color: #ffffff !important;
- background-color: $u-warning !important;
- line-height: 40rpx;
- color: rgb(117, 142, 165);
- margin-left: 20rpx;
- }
- }
- }
}
</style>
--
Gitblit v1.9.3