卡券

src/app.scss

@@ -46,9 +46,9 @@ view,text,div {
 /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
     font-family: 'iconfont';  /* Project id 3748689 */
-    src: url('//at.alicdn.com/t/c/font_3748689_reb152v2m2q.woff2?t=1684829670696') format('woff2'),
-         url('//at.alicdn.com/t/c/font_3748689_reb152v2m2q.woff?t=1684829670696') format('woff'),
-         url('//at.alicdn.com/t/c/font_3748689_reb152v2m2q.ttf?t=1684829670696') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_3748689_egbygrkz29u.woff2?t=1686722700642') format('woff2'),
+         url('//at.alicdn.com/t/c/font_3748689_egbygrkz29u.woff?t=1686722700642') format('woff'),
+         url('//at.alicdn.com/t/c/font_3748689_egbygrkz29u.ttf?t=1686722700642') format('truetype');
   }
 
 .iconfont {

src/pages.json

@@ -248,6 +248,12 @@
 						"navigationBarTitleText": "本地生活"
 					}
 				},
+				{
+					"path": "orderingfood/fineFood",
+					"style": {
+						"navigationBarTitleText": ""
+					}
+				},
 				{
 					"path": "orderingfood/payTheBill",
 					"style": {
@@ -332,6 +338,12 @@
 						"navigationBarTitleText": ""
 					}
 				},
+				{
+					"path": "directCharge/coupon",
+					"style": {
+						"navigationBarTitleText": "优惠券"
+					}
+				},
 
 				{
 					"path": "order/verificationCode",

src/pages/orderingfood/tabs.js

@@ -1,12 +1,12 @@
 export default [
   {
       ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/9b77a4e9651ebb272f58972297f15989c8e7dfe2png",
-      url: "",
+      url: "/pagesB/orderingfood/fineFood",
       tit: "餐厅"
   },
   {
       ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/c49b23e0145a7c4e52183ae0850d0948e2ada385png",
-      url: "",
+      url: "/pagesB/orderingfood/fineFood",
       tit: "饮品"
   },
   {
@@ -16,19 +16,24 @@ export default [
   },
   {
       ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/97d00306c223bd7568335b93189d9b40a386fc12png",
-      url: "/pagesB/directCharge/index",
+      url: "/pagesB/directCharge/index?type=1",
       tit: "音视频"
   },
   {
-      ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/cd4f1a2815a87ed4e118b8fe496468f826eeb594png",
-      url: "",
-      tit: "加油"
+      ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/8da4591235832a8475719f9b515d918132bda879png",
+      url: "/pagesB/directCharge/index?type=2",
+      tit: "折扣券"
   },
   {
       ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/06b44cf0c78938c9740a13826cd7b3777c7bb1c6png",
       url: "",
       tit: "手机充值"
   },
+  {
+      ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/cd4f1a2815a87ed4e118b8fe496468f826eeb594png",
+      url: "",
+      tit: "加油"
+  },
   {
       ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/83906365c174dcc7acf620d7247f80f9f1818d6epng",
       url: "",
@@ -44,11 +49,11 @@ export default [
       url: "",
       tit: "休闲娱乐"
   },
-  {
-      ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/9595dbbd82b99db56de906743b9456962d01857bpng",
-      url: "",
-      tit: "丽人医美"
-  },
+//   {
+//       ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/9595dbbd82b99db56de906743b9456962d01857bpng",
+//       url: "",
+//       tit: "丽人医美"
+//   },
   // {
   //     ico: "http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/8b0b0de11b1d5b2e3e97cf3b20d489ecdb32f27epng",
   //     url: "",

src/pagesB/components/number-box/number-box.md

@@ -0,0 +1,40 @@
+# fx-number-box组件
+
+### 使用方式
+
+#### 在 scripts 中引用组件:
+
+```
+import fxNumberBox from '@/components/fx-number-box/fx-number-box.vue';
+export default {
+    components: {
+        fxNumberBox
+    }
+}
+</script>
+
+```
+
+#### 在 template  中引用组件:
+```
+<fx-number-box></fx-number-box>
+<fx-number-box :min="0" :max="9"></fx-number-box>
+<fx-number-box @change="bindChange"></fx-number-box>
+```
+
+### 属性说明:
+
+
+| 属性            | 类型                     | 默认值 | 描述                                       |
+| --------------- | ------------------------ | ---- | ------------------------------------------ |
+| value        | Number                   | 0   | 输入框当前值                                   |
+| min  | Number                   | 0   | 最小值                                   |
+| max      | Number                 | 999   | 最大值                                   |
+| step          | Number                 | 1   | 每次点击改变的间隔大小 |
+
+### 事件说明
+
+
+| 事件名称           | 说明                     | 返回值 |
+| --------------- | ------------------------ | ---- |
+| change        | 输入框值改变时触发的事件，参数为输入框当前的 value                   | -  |

src/pagesB/components/number-box/number-box.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="fx-numbox">
+		<view class="fx-numbox__minus" @tap="_calcValue('minus')" @longpress="_longTapCalcValue('minus')" @touchend="_touchend" @touchcancel ="_touchcancel ">
+			<view class="iconfont">&#xe676;</view>
+			<!-- <view class="icon" :style="{backgroundImage:inputValue > min?'url(../../static/fx-number-box/icon_cancel.png)':'url(../../static/fx-number-box/icon_cancel_invalid.png)'}"></view> -->
+		</view>
+		<input class="fx-numbox__value" type="digit" v-model="inputValue" @blur="_onBlur" @input="onInput">
+		<view class="fx-numbox__plus" @tap="_calcValue('plus')" @longpress="_longTapCalcValue('plus')" @touchend="_touchend" @touchcancel ="_touchcancel ">
+			<view class="iconfont">&#xe659;</view>
+			<!-- <view class="icon" :style="{backgroundImage:inputValue < max?'url(../../static/fx-number-box/icon_add.png)':'url(../../static/fx-number-box/icon_add-invalid.png)'}"></view> -->
+		</view>
+	</view>
+</template>
+<script>
+	// window.addEventListener("centextmenu",(e)=>{
+	// 	e.preventDefault()
+	// })
+	var timer = null;
+	export default {
+		name: 'numbox',
+		props: {
+			value: {
+				type: Number,
+				default: 0
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 999
+			},
+			step: {
+				type: Number,
+				default: 1
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			}
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale
+				let step = this.step * scale
+				if (type === 'minus') {
+					value -= step
+					if (value < this.min) {
+						value = this.min
+					}
+				} else if (type === 'plus') {
+					value += step
+					if (value > this.max) {
+						value = this.max
+					}
+				}
+				this.inputValue = Math.floor((value/scale).toFixed(1)*10)/10;
+				this.$emit('change', this.inputValue);
+			},
+			onInput(e){
+				this.inputValue = Math.floor(Number(e.detail.value).toFixed(1)*10)/10;
+				this.$emit('change', this.inputValue);
+			},
+			_longTapCalcValue(type) {
+				var _this = this;
+				timer = setInterval(function(){
+					const scale = _this._getDecimalScale()
+					let value = _this.inputValue * scale
+					let step = _this.step * scale
+					if (type === 'minus') {
+						value -= step
+						if (value < _this.min) {
+							value = _this.min;
+							clearInterval(timer)
+							return false
+						}
+					} else if (type === 'plus') {
+						value += step
+						if (value > _this.max) {
+							value = _this.max
+							clearInterval(timer)
+							return false
+						}
+					}
+					_this.inputValue = Math.floor((value/scale).toFixed(1)*10)/10;
+					_this.$emit('change', _this.inputValue);
+				},150)
+			},
+			_touchend(){
+				clearInterval(timer)
+			},
+			_touchcancel(){
+				clearInterval(timer)
+			},
+			_getDecimalScale() {
+				let scale = 1
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, (this.step + '').split('.')[1].length)
+				}
+				return scale
+			},
+			_onBlur(event) {
+				let value = event.detail.value
+				if (!value) {
+					this.inputValue = 0
+					return
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max
+				} else if (value < this.min) {
+					value = this.min
+				}
+				this.inputValue = value
+			}
+		},
+		created() {
+			this.inputValue = +this.value;
+		}
+	}
+</script>
+<style lang="scss">
+	.fx-numbox {
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		height:60rpx;
+		position: relative;
+		&__minus,
+		&__plus {
+			margin: 0;
+			width:60rpx;
+			height: 60rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.icon{
+				width: 40rpx;
+				height: 40rpx;
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: cover;
+				pointer-events: none;
+			}
+		}
+
+		&__value {
+			width: 100rpx;
+			height:60rpx;
+			text-align: center;
+			padding: 0;
+		}
+	}
+</style>

src/pagesB/directCharge/coupon.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="discountCoupon">
+        <div class="products">
+            <scroll-view class="productList" scroll-x="true">
+                <div class="item" v-for="(i,s) in products" :key="s" @click="ontag(s)" :class="{active:i.checked}">
+                    <image :src="i.cover_url" class="p_img" mode="aspectFill">
+                        <div class="p_con">
+                            <div class="t">{{ i.product_name }}</div>
+                            <div class="p">{{ egralfun(i.official_price) }}</div>
+                            <div class="fp">官方价￥{{ $h.Div(i.official_price, 100) }}</div>
+                            <span v-if="i.checked" class="colg iconfont">&#xe62c;</span>
+                        </div>
+                </div>
+            </scroll-view>
+        </div>
+        <div class="product_con">
+            <div class="card">
+                <div class="li flex_r flex_jb">
+                    <span>购买数量</span>
+                    <numbox v-model="count" :min="1" @change="countchange"/>
+                </div>
+            </div>
+            <div class="money card">
+                <div class="li flex_r flex_jb">
+                    <span>消费金额</span>
+                    <span>￥{{ cartTotal || 0 }}</span>
+                </div>
+                <div class="li flex_r flex_jb">
+                    <span>消费金抵扣<span class="corg">{{Integral}}%</span></span>
+                    <span class="corg">-￥{{ deduction || 0 }}</span>
+                </div>
+                <div class="li flex_r flex_jb">
+                    <span>实付金额</span>
+                    <span>￥{{ actuallypaid || 0 }}</span>
+                </div>
+            </div>
+            <div class="money card">
+                <div class="li flex_r flex_jb">
+                    <span>赠送茶宝</span>
+                    <span>{{ chabao || 0 }}</span>
+                </div>
+            </div>
+            <div class="msg" v-html="selectitem.use_explain"></div>
+        </div>
+        <div class="footbtn" @click="pay">立即购买</div>
+    </div>
+</template>
+<script>
+import numbox from "@/pagesB/components/number-box/number-box.vue"
+import { post } from "@/request/api.js";
+import { ToPayOpre } from "@/utils/reqTools.js";
+let toPayOpre = new ToPayOpre();
+export default {
+    name: "discountCoupon",
+    props: {},
+    components: { numbox },
+    data() {
+        return {
+            count: 1,
+            topupBrand: {},
+            products: [],
+            egral: {},
+            selectitem: {},
+            cartTotal: 0,
+            Integral: 0,
+            deduction: 0,
+            actuallypaid: 0,
+            chabao: 0,
+        };
+    },
+    methods: {
+        getIntegral() {
+            post("local/getIntegral", { type: 3 }).then(res => {
+                if (res.code == 0) {
+                    this.egral = res.data;
+                }
+            })
+        },
+        egralfun(va) {
+            let i1 = this.egral.integral;
+            let cartTotal = this.$h.Div(va, 100)
+            let deduction = this.$h.Mul(cartTotal, i1).toFixed(2);
+            return this.$h.Sub(cartTotal, deduction);
+        },
+        load(va) {
+            post("local/coupon/productList", { type_name: va, type: 0 }).then(res => {
+                if (res.code == 0) {
+                    this.products = res.data;
+                    this.ontag(0);
+                }
+            })
+        },
+        ontag(key) {
+            let da = this.products;
+            da.forEach(value => this.$set(value, 'checked', false));
+            da[key].checked = true;
+            this.selectitem = da[key];
+            this.egralf();
+        },
+        egralf(){
+            let i1 = this.egral.integral, i2 = this.egral.chabao;
+            this.Integral = this.$h.Mul(i1,100);
+            this.cartTotal = this.$h.Mul(this.$h.Div(this.selectitem.official_price, 100),this.count)
+            this.deduction = this.$h.Mul(this.cartTotal,i1);
+            this.actuallypaid = this.$h.Sub(this.cartTotal,this.deduction);
+            this.chabao = this.$h.Mul(this.actuallypaid,i2);
+        },
+        countchange(va){
+            this.count = va
+            this.egralf();
+        },
+        pay() {
+            let da = {
+                type: 0,
+                count: this.count,
+                phone: uni.getStorageSync("userinfo").mobile,
+                product_no: this.selectitem.product_no,
+            }
+            post("local/coupon/addOrder", da).then(res => {
+                if (res.code == 0 && res.data.prepayid) {
+                    toPayOpre.toPay(res.data, (rea) => {
+                        if (!rea) {
+                            // 支付成功
+                            this.goto("/pagesB/orderingfood/orderlist")
+                        } else {
+                            // 支付失败
+                        }
+                    });
+                }
+            })
+        },
+    },
+    created() {
+        this.getIntegral();
+    },
+    onLoad(da) {
+        let va = uni.getStorageSync("topup_brand");
+        uni.setNavigationBarTitle({ title: va.name });
+        this.topupBrand = va;
+        this.load(va.name);
+    },
+    onShow() {},
+    mounted() {},
+};
+</script>
+<style scoped lang='scss'>
+.products {
+    background-color: #fff;
+    padding: 0 30rpx 28rpx;
+    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);
+}
+
+.productList {
+    box-sizing: border-box;
+    white-space: nowrap;
+    background-color: rgba($color: #000, $alpha: 0.05);
+    padding: 0 15rpx;
+    border-radius: 16rpx;
+}
+
+.item {
+    width: 380rpx;
+    display: inline-block;
+    background-color: #fff;
+    border-radius: 15rpx;
+    margin: 16rpx 15rpx;
+    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(0, 0, 0, 0.15);
+    vertical-align: middle;
+
+    .p_img {
+        width: 100%;
+        height: 235rpx;
+        border-radius: 15rpx 15rpx 0 0;
+    }
+
+    .p_con {
+        padding: 8rpx 20rpx;
+        position: relative;
+
+        .t {
+            font-size: 32rpx;
+            white-space: pre-wrap;
+            min-height: 82rpx;
+            line-height: 36rpx;
+        }
+
+        .p {
+            font-size: 35rpx;
+            font-weight: bold;
+
+            &:before {
+                content: "￥";
+                font-size: 20rpx;
+            }
+        }
+
+        .fp {
+            font-weight: 400;
+            color: #999;
+            font-size: 28rpx;
+            text-decoration: line-through;
+        }
+
+        .colg {
+            color: #18bb88;
+            position: absolute;
+            right: 28rpx;
+            bottom: 20rpx;
+        }
+    }
+
+    &.active {
+        border: 4rpx solid #18bb88;
+        box-shadow: 4rpx 4rpx 26rpx 2rpx rgba($color: #18bb88, $alpha: 0.3);
+
+        .p_con {
+            .p {
+                color: #18bb88;
+            }
+        }
+    }
+}
+
+.card {
+    background-color: #fff;
+    border-radius: 20rpx;
+    margin-bottom: 30rpx;
+    padding: 28rpx 30rpx;
+    font-size: 32rpx;
+    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.product_con{
+    padding: 28rpx 30rpx;
+}
+
+.money {
+    .li {
+        margin-bottom: 16rpx;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        span {
+            font-size: 30rpx;
+        }
+    }
+
+    .corg {
+        color: #18bb88;
+        margin-left: 5rpx;
+    }
+}
+
+.msg {
+    font-size: 26rpx;
+    margin-top: 50rpx;
+}
+
+.footbtn {
+    width: calc(100% - 60rpx);
+    height: 80rpx;
+    background: #17bb87;
+    border-radius: 45rpx;
+    position: fixed;
+    bottom: 50rpx;
+    left: 30rpx;
+    color: #fff;
+    font-size: 36rpx;
+    text-align: center;
+    line-height: 80rpx;
+}
+</style>

src/pagesB/directCharge/index.vue

@@ -23,11 +23,12 @@ export default {
     data() {
         return {
             brand: [],
+            btype: 0,
         };
     },
     methods: {
-        load(){
-            post("local/coupon/brandList",{type:1}).then(res=>{
+        load(da){
+            post("local/coupon/brandList",da).then(res=>{
                 if (res.code == 0) {
                     this.brand = res.data
                 }
@@ -35,11 +36,19 @@ export default {
         },
         ontab(da){
             uni.setStorageSync("topup_brand",da)
-            this.goto("/pagesB/directCharge/payment")
+            if(this.btype == 1) {
+                this.goto("/pagesB/directCharge/payment")
+            }
+            else if(this.btype == 2) this.goto("/pagesB/directCharge/coupon")
         }
     },
     onLoad(da) {
-        this.load();
+        this.load(da);
+        this.btype = da.type;
+        let tit = ""
+        if(da.type == 1) tit = "音视频会员"
+        else if(da.type == 2) tit = "优惠券"
+        uni.setNavigationBarTitle({ title: tit });
     },
     onShow() {},
     mounted() {},
@@ -70,7 +79,7 @@ export default {
         border-radius: 10rpx;
         .b_img,.b_name{
             display: inline-block;
-            vertical-align: top;
+            vertical-align: middle;
         }
         .b_img{
             width: 120rpx;

src/pagesB/directCharge/orderDetail.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
-import { ToPayOpre } from "@/utils/reqTools.js";
-let toPayOpre = new ToPayOpre();
+// import { ToPayOpre } from "@/utils/reqTools.js";
+// let toPayOpre = new ToPayOpre();
 import { post } from "@/request/api.js";
 export default {
     name: "orderDetail",

src/pagesB/directCharge/payment.vue

@@ -73,7 +73,7 @@ export default {
             return this.checked ? this.checked == da.next_name : true
         },
         getIntegral(){
-            post("local/getIntegral",{type:2}).then(res=>{
+            post("local/getIntegral",{type:3}).then(res=>{
                 if (res.code == 0) {
                     this.egral = res.data;
                 }
@@ -111,6 +111,7 @@ export default {
                 return;
             }
             let da = {
+                type: 1,
                 count: 1,
                 phone: this.phone,
                 product_no: this.selectitem.product_no,
@@ -120,7 +121,7 @@ export default {
                     toPayOpre.toPay(res.data, (rea) => {
                         if (!rea) {
                             // 支付成功
-                        this.goto("/pagesB/orderingfood/orderlist")
+                            this.goto("/pagesB/orderingfood/orderlist")
                         } else {
                             // 支付失败
                         }

src/pagesB/orderingfood/fineFood.vue

@@ -0,0 +1,147 @@
+<template>
+    <view class="loadingBox" v-if="loading">
+        <img class="loading" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/2caa2ae4dc849856f3eca4ff2b3abf7fd19e7632gif" />
+    </view>
+    <div class="list" v-else>
+        <div class="li_item" v-for="(i,s) in merchantList" :key="s" @click="goMerchant(i)">
+            <div class="li_title">{{ i.brand_name }}</div>
+            <div class="logo_img">
+                <img :src="i.restaurant_img" alt="">
+            </div>
+            <div class="con_box">
+                <div class="p1 ellipsis">{{ i.restaurant_name }}</div>
+                <div class="p2">{{ i.restaurant_address }}</div>
+                <div class="p3">{{ $h.Div(i.distance, 1000).toFixed(2) }} km</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { post } from "@/request/api.js";
+export default {
+    name: "fineFood",
+    props: {},
+    components: {},
+    data() {
+        return {
+            loading: true,
+            Query: {
+                lat: 113.9367,
+                lng: 22.5325,
+                page: 1,
+                rows: 20
+            },
+            merchant: {},
+            merchantList: [],
+        };
+    },
+    methods: {
+        // 获取附近商家
+        getlists() {
+            post("local/getMerchant", this.Query).then(res => {
+                if (res.code == 0) {
+                    this.loading = false
+                    let merchantList = res.data.data
+                    delete res.data.data
+                    this.merchant = res.data
+                    this.merchantList = [...this.merchantList, ...merchantList]
+                    this.Query.page++
+                }
+            })
+        },
+        // 获取当前位置
+        async getLocation() {
+            let adres = await uni.Location();
+            console.log("adres",adres);
+            this.Query = { ...this.Query, ...adres };
+            this.getlists();
+        },
+        // 去店铺
+        goMerchant(da) {
+            uni.setStorageSync("MerchantItem", da)
+            this.goto("/pagesB/orderingfood/orderingfood", {
+                brand_id: da.brand_id,
+                restaurant_id: da.restaurant_id
+            })
+        },
+    },
+    onLoad(da) {
+        this.getLocation();
+    },
+    onShow() {},
+    mounted() {},
+    onReachBottom() {
+        if (this.Query.page < this.merchant.last_page) this.getlists();
+    },
+};
+</script>
+
+<style scoped lang='scss'>
+.loadingBox {
+    text-align: center;
+    padding: 100rpx 0;
+
+    .loading {
+        width: 280rpx;
+        height: 280rpx;
+    }
+}
+.list {
+    padding: 30rpx;
+
+    .li_item {
+        margin-bottom: 20rpx;
+        padding: 28rpx 32rpx;
+        background-color: #fff;
+        border-radius: 10rpx;
+        box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);
+    }
+
+    .li_title {
+        font-size: 36rpx;
+        margin-bottom: 16rpx;
+    }
+
+    .logo_img,
+    .con_box {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .logo_img {
+        img {
+            height: 180rpx;
+            width: 180rpx;
+            border-radius: 10rpx;
+        }
+    }
+
+    .con_box {
+        height: 180rpx;
+        width: calc(100% - 180rpx - 28rpx);
+        margin-left: 28rpx;
+        position: relative;
+
+        .p1 {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 6rpx;
+        }
+
+        .p2 {
+            font-size: 24rpx;
+            color: #999;
+        }
+
+        .p3 {
+            font-size: 24rpx;
+            color: #666;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+    }
+}
+</style>