From fe75cffbf3bae6777aa2794fd89fa5dc37f5df8d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 10:11:23 +0800
Subject: [PATCH] 项目初始化
---
src/pages_template/pages/coupon/index.vue | 413 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 413 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/coupon/index.vue b/src/pages_template/pages/coupon/index.vue
new file mode 100644
index 0000000..5807c62
--- /dev/null
+++ b/src/pages_template/pages/coupon/index.vue
@@ -0,0 +1,413 @@
+<script setup>
+</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>
+ </view>
+</template>
+
+<style lang="scss" scoped>
+page {
+ height: 100%;
+ background-color: rgb(244, 244, 244);
+}
+
+.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