|
@@ -1,6 +1,9 @@
|
|
|
<template>
|
|
|
<view class="center">
|
|
|
- <view class="status_bar"><!-- 这里是状态栏 --></view>
|
|
|
+ <view class="top">
|
|
|
+ <view class="status_bar"><!-- 这里是状态栏 --></view>
|
|
|
+ <view class="top-bg"><image src="../../static/img/index-bg.png" mode=""></image></view>
|
|
|
+ </view>
|
|
|
<view class="carousel">
|
|
|
<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
|
|
|
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.pic" /></swiper-item>
|
|
@@ -11,144 +14,38 @@
|
|
|
<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
|
|
|
</template>
|
|
|
</view>
|
|
|
- <!-- 通知栏 -->
|
|
|
- <view class="tongz flex">
|
|
|
- <view>
|
|
|
- <view class="tongz-bg"><image src="../../static/img/tongz-bg.png" mode=""></image></view>
|
|
|
- <view class="tongz-left flex">
|
|
|
- <image class="image-left" src="../../static/img/ling.png" mode=""></image>
|
|
|
- <u-notice-bar
|
|
|
- style="width: 100%;"
|
|
|
- mode="vertical"
|
|
|
- type="none"
|
|
|
- :volume-icon="false"
|
|
|
- :more-icon="true"
|
|
|
- :list="showList.infoList"
|
|
|
- @click="goDetails"
|
|
|
- @getMore="nav('/pages/index/nodeList')"
|
|
|
- ></u-notice-bar>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="box-body">
|
|
|
- <view class="navBox">
|
|
|
- <view class="navBox-left">
|
|
|
- <view class="navBox-item" @click="nav('./node')"><image src="../../static/img/index2.png" style="width: 385rpx; height: 398rpx;" mode=""></image></view>
|
|
|
- </view>
|
|
|
- <view class="navBox-right">
|
|
|
- <view class="navBox-item" @click="nav('./convert')"><image src="../../static/img/index3.png" style="width: 385rpx; height: 216rpx; " mode=""></image></view>
|
|
|
- <view class="navBox-item" @click="nav('/pages/index/appointment')">
|
|
|
- <image src="../../static/img/index6.png" style="width: 339rpx; height: 170rpx; margin-top: -12rpx;" mode=""></image>
|
|
|
- </view>
|
|
|
- <!-- <view class="navBox-item" @click="node()">
|
|
|
- <image src="../../static/img/index6.png" style="width: 339rpx; height: 170rpx; margin-top: -12rpx;" mode=""></image>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="shopBox" v-for="(item, index) in list" :key="index">
|
|
|
- <view class="shopBox-top">
|
|
|
- <view class="left"><image src="../../static/img/index4.png" mode=""></image></view>
|
|
|
- <view class="between" style="margin-left: -340rpx;">
|
|
|
- <text id="one">{{ item.name }}</text>
|
|
|
- <text id="two">{{ item.lun }}轮</text>
|
|
|
- </view>
|
|
|
- <view v-if="'childList' in item && item.type == 1">
|
|
|
- <text id="three" v-if="item.childList.next_pink_status">待开团</text>
|
|
|
- <text id="three" v-else>预约中</text>
|
|
|
- </view>
|
|
|
- <view v-if="item.type == 2"><text id="three" v-if="item.childList.next_pink_status">未开始</text></view>
|
|
|
- </view>
|
|
|
- <view class="shopBox-between">
|
|
|
- <view class="number">
|
|
|
- <text class="number-left">{{ 1 * item.cost }}</text>
|
|
|
- <text class="number-right">{{ item.cost_money_type }}/份</text>
|
|
|
- </view>
|
|
|
- <view class="quotient"><text class="quotient-children">每轮限购1组,每组限购一份</text></view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="main-item" v-for="(item,index) in main" :key="index">
|
|
|
+ <view class="pic">
|
|
|
+ <image :src="item.pic" mode=""></image>
|
|
|
</view>
|
|
|
- <image :src="item.background_image" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
|
|
|
- <view class="shopBox-bottom">
|
|
|
- <view class="forward">
|
|
|
- <view class="forward-left"></view>
|
|
|
- <view class="forward-right">每组分数:  11份</view>
|
|
|
- </view>
|
|
|
- <view class="consume">
|
|
|
- GAS消耗:
|
|
|
- <text>{{ 1 * item.ticket }}{{ item.ticket_money_type }}</text>
|
|
|
- </view>
|
|
|
- <view class="appointmentTime">
|
|
|
- 预约开始时间:
|
|
|
- <text>{{ item.start }}</text>
|
|
|
- </view>
|
|
|
- <view class="appointmentTime">
|
|
|
- 预约结束时间:
|
|
|
- <text>{{ item.end }}</text>
|
|
|
- </view>
|
|
|
- <view class="lotteryTime">
|
|
|
- 开奖时间:
|
|
|
- <text>{{ item.childList ? item.childList.next_pink.name : '' }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="btn-box flex">
|
|
|
- <view class="submit1" @click="lalaDetial(item.id)">当天预约</view>
|
|
|
- <view v-if="'childList' in item && item.type == 1">
|
|
|
- <view class="submit" v-if="item.childList.next_pink_status">待开团</view>
|
|
|
- <view class="submit" @click="buy(item)" v-else>预约</view>
|
|
|
- </view>
|
|
|
- <view v-if="item.type == 2"><view class="submit">未开始</view></view>
|
|
|
+ <view class="main-name">
|
|
|
+ {{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-popup v-model="show" mode="bottom" border-radius="40" height="868rpx" :closeable="true">
|
|
|
- <view class="yugo">
|
|
|
- <view class="Type flex" >
|
|
|
- <view class="moneyName clamp" @click="moneyshow = true">{{moneyType[index].text}}</view>
|
|
|
- <u-icon name="arrow-down-fill" color="#0F253A" size="10"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="zhu">
|
|
|
- 注:每轮限购1组,每组限购1份
|
|
|
- <span class="zhu-right">
|
|
|
- 最多可预约:
|
|
|
- <span class="zhu-num">1份</span>
|
|
|
- </span>
|
|
|
+ <!-- 商品栏 -->
|
|
|
+ <view class="commodity">
|
|
|
+ <view class="commodity-item" v-for="(item,index) in commodityList">
|
|
|
+ <view class="commodity-prc">
|
|
|
+ <image src="" mode=""></image>
|
|
|
+ <view class="fanli" v-if="item.type == 1">
|
|
|
+ <image src="../../static/img/index-fanl.png" mode=""></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="info-main">
|
|
|
- <view class="info-box">
|
|
|
- <view class="info-left">预约份数:</view>
|
|
|
- <view class="info-right"><u-number-box :max="max" v-model="value" @change="valChange"></u-number-box></view>
|
|
|
+ <view class="commodity-info">
|
|
|
+ <view class="commodity-name clamp">
|
|
|
+ {{item.name}}
|
|
|
</view>
|
|
|
- <view class="info-box">
|
|
|
- <view class="info-left">预约金额:</view>
|
|
|
- <view class="info-right">{{ moneyType[index].money*1 }}{{moneyType[index].text}}</view>
|
|
|
+ <view class="commodity-systom clamp">
|
|
|
+ {{item.systom}}
|
|
|
</view>
|
|
|
- <view class="info-box">
|
|
|
- <view class="info-left">预约门票:</view>
|
|
|
- <view class="info-right">{{ souxu }}</view>
|
|
|
+ <view class="commodity-price">
|
|
|
+ ¥{{item.price}}<text>¥{{item.price}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="btn" @click="submit()">确定</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <u-popup v-model="show1" mode="center" width="548rpx" border-radius="14">
|
|
|
- <view class="psw-wrapper">
|
|
|
- <view class="psw-title">请输入支付密码</view>
|
|
|
- <input type="password" v-model="password" class="psw-ipt" />
|
|
|
- <view class="psw-btn">
|
|
|
- <text @click="cancel">取消</text>
|
|
|
- <text class="psw-qd" @click="pswQd">确定</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- <view class="tishi" v-if="tishi">
|
|
|
- <view class="closeBox" @click="closetishi()">
|
|
|
- <view class="close">
|
|
|
- <image src="../../static/img/indexClose.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="main" @click="nav('/pages/index/teachList')">
|
|
|
- <image src="../../static/img/teach.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-action-sheet :list="moneyType" v-model="moneyshow" @click="changeIndex"></u-action-sheet>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -158,205 +55,96 @@ import { loadIndexs } from '@/api/user.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- tishi:true,//是否显示教程框
|
|
|
- show: false, //支付数量
|
|
|
- show1: false, //支付密码
|
|
|
- moneyshow:false,//支付方式开关
|
|
|
- moneyType:[{text:''}],//支付方式选择
|
|
|
- index:0,//判断支付方式是那个
|
|
|
- password: '',
|
|
|
- value: 1,
|
|
|
- list: [],
|
|
|
- money: '', //预约金额
|
|
|
- souxu: '', //预约手续费
|
|
|
- id: '', //购买产品
|
|
|
- max: 1,
|
|
|
- carouselList: [],
|
|
|
+ carouselList:[],
|
|
|
+ main:[{
|
|
|
+ name:'自动拼团',
|
|
|
+ pic:'../../static/icon/index1.png',
|
|
|
+ type:1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'11人团专区',
|
|
|
+ pic:'../../static/icon/index2.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'拼团合伙人',
|
|
|
+ pic:'../../static/icon/index3.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'素材分享',
|
|
|
+ pic:'../../static/icon/index4.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'邀请有礼',
|
|
|
+ pic:'../../static/icon/index5.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'拼购福利',
|
|
|
+ pic:'../../static/icon/index6.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'互助专区',
|
|
|
+ pic:'../../static/icon/index7.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'签到领钱',
|
|
|
+ pic:'../../static/icon/index8.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'服务器兑换',
|
|
|
+ pic:'../../static/icon/index9.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'话费充值',
|
|
|
+ pic:'../../static/icon/index10.png'
|
|
|
+ },
|
|
|
+ ],
|
|
|
swiperLength: 0,
|
|
|
swiperCurrent: 0,
|
|
|
- showList: [],
|
|
|
- start: '' ,//平团开始时间
|
|
|
- moneyType:['usdt','usdc'],//兑出币种类型
|
|
|
+ commodityList:[{
|
|
|
+ name:'古驰马衔扣单肩包',
|
|
|
+ systom:'1955系列单肩包女包',
|
|
|
+ price:'2690.32',
|
|
|
+ type:1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'古驰马衔扣单肩包',
|
|
|
+ systom:'1955系列单肩包女包',
|
|
|
+ price:'2690',
|
|
|
+ type:0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'古驰马衔扣单肩包',
|
|
|
+ systom:'1955系列单肩包女包',
|
|
|
+ price:'2690',
|
|
|
+ type:0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'古驰马衔扣单肩包',
|
|
|
+ systom:'1955系列单肩包女包',
|
|
|
+ price:'2690',
|
|
|
+ type:1
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
//页面加载即刻发生
|
|
|
onShow() {
|
|
|
- this.tishi = true,
|
|
|
this.loadDate();
|
|
|
},
|
|
|
methods: {
|
|
|
async loadDate() {
|
|
|
- const obj = this;
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中',
|
|
|
- // mask: true
|
|
|
- });
|
|
|
- loadIndexs({})
|
|
|
- .then(({ data }) => {
|
|
|
+ const obj = this
|
|
|
+ loadIndexs({}).then(({ data }) => {
|
|
|
console.log(data);
|
|
|
obj.carouselList = data.banner;
|
|
|
obj.swiperLength = data.banner.length;
|
|
|
- let arr = data.roll;
|
|
|
- let ar = [];
|
|
|
- arr.forEach(e => {
|
|
|
- console.log(e)
|
|
|
- ar.push(e.info);
|
|
|
- });
|
|
|
-
|
|
|
- arr.infoList = ar;
|
|
|
- obj.showList = arr;
|
|
|
- lala({
|
|
|
- page: 1,
|
|
|
- limit: 10
|
|
|
- }).then(({ data }) => {
|
|
|
- data.list.data.forEach((e, index) => {
|
|
|
- lalaDetial({ page: 1, limit: 1 }, e.id).then(les => {
|
|
|
- // e.childList = les.data
|
|
|
- //开团时间
|
|
|
- let date = les.data.open_times[0].name.split(' ');
|
|
|
- let start = date[0] + ' ' + les.data.lala_pink_open + ':00';
|
|
|
- start = new Date(start);
|
|
|
- start = start.getTime();
|
|
|
- obj.start = start;
|
|
|
- //当前时间
|
|
|
- let dateTime = new Date().valueOf();
|
|
|
- //结束时间
|
|
|
- let endTime = les.data.open_times[5].value * 1000;
|
|
|
- //如果当前时间在开团时间之前或在结束时间之后,显示未开始
|
|
|
- if (dateTime > start || dataTime < endTime) {
|
|
|
- e.type = 1;
|
|
|
- } else {
|
|
|
- e.type = 2;
|
|
|
- }
|
|
|
- //拼团结束时间
|
|
|
- e.end = getTime(les.data.next_pink.value - les.data.close_join * 60);
|
|
|
- for (let i = 0; i < les.data.open_times.length; i++) {
|
|
|
- if (les.data.open_times[i].value == les.data.next_pink.value) {
|
|
|
- //拼团的轮数
|
|
|
- e.lun = i + 1;
|
|
|
- //拼团开始时间
|
|
|
- if (i != 0) {
|
|
|
- let j = i - 1;
|
|
|
- e.start = getTime(les.data.open_times[j].value);
|
|
|
- } else {
|
|
|
- e.start = getTime(obj.start);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- obj.$set(e, 'childList', les.data);
|
|
|
- });
|
|
|
- });
|
|
|
- obj.list = data.list.data;
|
|
|
- obj.list.forEach(e =>{
|
|
|
- e.moneyType = [];
|
|
|
- if(e.cost_money_type !=e.cost_2_money_type){
|
|
|
- let type1 = {};
|
|
|
- let type2 = {};
|
|
|
-
|
|
|
- type1.text = e.cost_money_type;
|
|
|
- type1.money = e.cost;
|
|
|
- e.moneyType[0] = type1
|
|
|
- type2.text = e.cost_2_money_type;
|
|
|
- type2.money = e.cost_2;
|
|
|
- e.moneyType[1] = type2
|
|
|
- }else {
|
|
|
- let type1 = '';
|
|
|
-
|
|
|
- type1.text = e.cost_money_type;
|
|
|
- type1.money = e.cost;
|
|
|
- e.moneyType[0] = type1
|
|
|
- }
|
|
|
- console.log(e,'11111')
|
|
|
- })
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
- },
|
|
|
- closetishi() {
|
|
|
- this.tishi = false
|
|
|
- },
|
|
|
- nav(url) {
|
|
|
- console.log(url);
|
|
|
- uni.navigateTo({
|
|
|
- url: url
|
|
|
- });
|
|
|
- },
|
|
|
- changeIndex(e) {
|
|
|
- console.log(e);
|
|
|
- this.index = e;
|
|
|
- },
|
|
|
- buy(item) {
|
|
|
- this.money = 1 * item.cost + item.cost_money_type;
|
|
|
- this.souxu = 1 * item.ticket + item.ticket_money_type;
|
|
|
- this.moneyType = item.moneyType;
|
|
|
- this.index = 0;
|
|
|
- this.id = item.id;
|
|
|
- this.show = true;
|
|
|
- },
|
|
|
- valChange(e) {
|
|
|
- console.log(e);
|
|
|
- if (this.value > 1) {
|
|
|
- e.value = 1;
|
|
|
- this.value = 1;
|
|
|
- console.log(this.value);
|
|
|
- this.$api.msg('每组限购一份');
|
|
|
- }
|
|
|
- },
|
|
|
- submit() {
|
|
|
- if (this.value == 0) {
|
|
|
- this.$api.msg('预约份数不能为0');
|
|
|
- } else {
|
|
|
- this.show = false;
|
|
|
- this.show1 = true;
|
|
|
- }
|
|
|
- },
|
|
|
- cancel() {
|
|
|
- this.password = '';
|
|
|
- this.show1 = false;
|
|
|
- },
|
|
|
- pswQd() {
|
|
|
- const obj = this;
|
|
|
- buylala(
|
|
|
- {
|
|
|
- trade_psw: this.password,
|
|
|
- cost_type:this.moneyType[this.index].text
|
|
|
- },
|
|
|
- this.id
|
|
|
- )
|
|
|
- .then(e => {
|
|
|
- this.password = '';
|
|
|
- this.show1 = false;
|
|
|
- this.$api.msg('参与拼购成功');
|
|
|
})
|
|
|
- .catch(e => {
|
|
|
- this.password = '';
|
|
|
- this.show1 = false;
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- node() {
|
|
|
- this.$api.msg('敬请期待');
|
|
|
- },
|
|
|
- lalaDetial(id) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/index/datile?id=' + id
|
|
|
- });
|
|
|
},
|
|
|
//轮播图切换修改背景色
|
|
|
swiperChange(e) {
|
|
|
const index = e.detail.current;
|
|
|
this.swiperCurrent = index;
|
|
|
- this.titleNViewBackground = this.carouselList[index].background;
|
|
|
},
|
|
|
- goDetails(e) {
|
|
|
- uni.navigateTo({
|
|
|
- url: this.showList[e].url
|
|
|
- });
|
|
|
- }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -370,18 +158,34 @@ export default {
|
|
|
height: var(--status-bar-height);
|
|
|
width: 100%;
|
|
|
}
|
|
|
+.top {
|
|
|
+ width: 100%;
|
|
|
+ height: 338rpx;
|
|
|
+ position: relative;
|
|
|
+ .top-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 338rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.carousel {
|
|
|
- width: 690rpx;
|
|
|
+ width: 700rpx;
|
|
|
height: 300rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 26rpx auto 0;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin: -200rpx auto 0;
|
|
|
.bor {
|
|
|
- border-radius: 10rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
.carousel-item {
|
|
|
image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- border-radius: 10rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -406,392 +210,84 @@ export default {
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
-.tongz {
|
|
|
- width: 690rpx;
|
|
|
- height: 70rpx;
|
|
|
- margin: 48rpx auto 0;
|
|
|
- padding: 18rpx 30rpx 18rpx 24rpx;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- .tongz-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- width: 690rpx;
|
|
|
- height: 70rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .tongz-left {
|
|
|
- width: 640rpx;
|
|
|
- .image-left {
|
|
|
- width: 28rpx;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
- .tongz-font {
|
|
|
- margin-left: 22rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #0f253a;
|
|
|
- }
|
|
|
- }
|
|
|
- .tongz-right {
|
|
|
- position: relative;
|
|
|
- z-index: 11;
|
|
|
- width: 12rpx;
|
|
|
- height: 26rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.box-title {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
- height: 436rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 436rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.box-body {
|
|
|
+.main {
|
|
|
+ margin-top: 80rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- z-index: 10;
|
|
|
- margin-top: 20rpx;
|
|
|
- background: #f8fbfe;
|
|
|
-
|
|
|
- .navBox {
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .main-item {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ width: 20%;
|
|
|
display: flex;
|
|
|
-
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .navBox-left {
|
|
|
- // margin: 20rpx 5rpx 10rpx 10rpx;
|
|
|
- margin: 20rpx -24rpx 0 0;
|
|
|
-
|
|
|
- mar .navBox-item {
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .pic {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .navBox-right {
|
|
|
- margin: 20rpx 0 0 -24rpx;
|
|
|
-
|
|
|
- // margin: 20rpx 10rpx 5rpx 5rpx;
|
|
|
- .navBox-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- }
|
|
|
- }
|
|
|
+ .main-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .shopBox {
|
|
|
- padding: 0 30rpx;
|
|
|
- width: 690rpx;
|
|
|
- // height: 770rpx;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
|
- border-radius: 10px;
|
|
|
- margin: 45rpx auto 0;
|
|
|
-
|
|
|
- .shopBox-top {
|
|
|
- margin-top: 26rpx;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- height: 46rpx;
|
|
|
- width: 48rpx;
|
|
|
- }
|
|
|
-
|
|
|
- #one {
|
|
|
- font-size: 34rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.commodity {
|
|
|
+ padding: 36rpx 14rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .commodity-item {
|
|
|
+ width: 348rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
+ margin:10rpx 6rpx 0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ .commodity-prc {
|
|
|
+ width: 345rpx;
|
|
|
+ height: 345rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .commodity-info {
|
|
|
+ padding: 28rpx 20rpx 35rpx 24rpx;
|
|
|
+ .commodity-name {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
- color: #0f253a;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
-
|
|
|
- #two {
|
|
|
- margin-left: 11rpx;
|
|
|
+ .commodity-systom {
|
|
|
+ margin-top: 16rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- color: #6d7c88;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
-
|
|
|
- #three {
|
|
|
- font-size: 26rpx;
|
|
|
+ .commodity-price {
|
|
|
+ margin-top: 34rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #ff4c4c;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shopBox-between {
|
|
|
- margin-top: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .number {
|
|
|
- .number-left {
|
|
|
- font-size: 40rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #44969d;
|
|
|
- }
|
|
|
-
|
|
|
- .number-right {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E83F30;
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 6rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
- color: #44969d;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .quotient {
|
|
|
- .quotient-children {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #6d7c88;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .forward {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .forward-left {
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #44969d;
|
|
|
- }
|
|
|
-
|
|
|
- .forward-right {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #6d7c88;
|
|
|
- }
|
|
|
- }
|
|
|
- .consume,
|
|
|
- .appointmentTime,
|
|
|
- .lotteryTime {
|
|
|
- margin: 12rpx 0;
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #6d7c88;
|
|
|
- }
|
|
|
- .consume > text,
|
|
|
- .appointmentTime > text,
|
|
|
- .lotteryTime > text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- .submit {
|
|
|
- width: 280rpx;
|
|
|
- height: 70rpx;
|
|
|
- background: linear-gradient(90deg, #60bab0, #45969b);
|
|
|
- border-radius: 35rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- line-height: 70rpx;
|
|
|
- margin: 40rpx 10rpx;
|
|
|
- }
|
|
|
- .submit1 {
|
|
|
- width: 280rpx;
|
|
|
- height: 70rpx;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #60bab0;
|
|
|
- border-radius: 35rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #60bab0;
|
|
|
- text-align: center;
|
|
|
- line-height: 70rpx;
|
|
|
- margin: 40rpx 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.yugo {
|
|
|
- padding-top: 80rpx;
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- .Type {
|
|
|
- border-top: 1px solid #eeeeee;
|
|
|
- padding: 20rpx $page-row-spacing;
|
|
|
- justify-content: start;
|
|
|
- .moneyName {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: $font-color-dark;
|
|
|
- margin: 0 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .input {
|
|
|
- flex-grow: 1;
|
|
|
- height: 45rpx;
|
|
|
- line-height: 45rpx;
|
|
|
- margin-left: 40rpx;
|
|
|
- color: $font-color-light;
|
|
|
- border-bottom: 1px solid $border-color-light;
|
|
|
- }
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 2rpx;
|
|
|
- background-color: $font-color-dark;
|
|
|
- margin: 0 10rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .zhu {
|
|
|
- height: 112rpx;
|
|
|
- border-top: 1px #eeeeee solid;
|
|
|
- border-bottom: 1px #eeeeee solid;
|
|
|
- line-height: 112rpx;
|
|
|
- padding: 0 32rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #6d7c88;
|
|
|
- .zhu-right {
|
|
|
- display: inline-block;
|
|
|
- padding-left: 60rpx;
|
|
|
- }
|
|
|
- .zhu-num {
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- }
|
|
|
- .info-main {
|
|
|
- padding: 0 32rpx;
|
|
|
- .info-box {
|
|
|
- padding-top: 22rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .info-left {
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #6d7c88;
|
|
|
- }
|
|
|
- .info-right {
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #0f253a;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .btn {
|
|
|
- position: absolute;
|
|
|
- bottom: 50rpx;
|
|
|
- left: 50%;
|
|
|
- margin-left: -342rpx;
|
|
|
- width: 684rpx;
|
|
|
- height: 86rpx;
|
|
|
- background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 86rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-}
|
|
|
-.psw-wrapper {
|
|
|
- width: 548rpx;
|
|
|
- height: 344rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- .psw-title {
|
|
|
- width: 100%;
|
|
|
- font-size: 35rpx;
|
|
|
- padding: 43rpx 0 49rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
- .psw-ipt {
|
|
|
- display: block;
|
|
|
- background-color: #dce3ed;
|
|
|
- height: 90rpx;
|
|
|
- width: 464rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 80rpx;
|
|
|
- }
|
|
|
- .psw-btn text {
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
- width: 50%;
|
|
|
- padding-top: 29rpx;
|
|
|
- font-size: 35rpx;
|
|
|
- }
|
|
|
- .psw-qd {
|
|
|
- color: #45969b;
|
|
|
- }
|
|
|
-}
|
|
|
-.tishi {
|
|
|
- position: fixed;
|
|
|
- bottom: 400rpx;
|
|
|
- right: 20rpx;
|
|
|
- z-index: 100;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .closeBox {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- padding-top: 10rpx;
|
|
|
- .close {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin:auto ;
|
|
|
- }
|
|
|
- }
|
|
|
- .main {
|
|
|
- top: 40rpx;
|
|
|
- right: 20rpx;
|
|
|
- position: absolute;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|