<!-- 挪车码领取活动页面 -->
<template>
    <view style="background-color: #5797D5;">
        <view>
            <image style="width: 750rpx;height: 600rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/9da1c3c2d8374436bdf2782982090980.jpg"></image>
        </view>
        <view style="position: relative;top:-65rpx;margin: 0 auto; width: 706rpx;height: 938rpx; display: flex; justify-content: center;align-items: center;
            background: url('http://jdnc-oss.uzosp.com/2023/01/10/a2ca3df54fe449b78b711715b18f3bd2.png') no-repeat; background-size: 100% 100%;">
            <view style="margin-top: 58rpx; width: 550rpx; height: 770rpx;">
                <view class="car_info">
                    <!-- <view class="info_list" style="padding:20rpx 0;"> -->
                    <view class="info_list">
                        <view class="left" style="width: 170rpx;">
                            品牌车型:
                        </view>
                        <view class="right info" style="width:400rpx;" v-if="carInfo" @click="getCarList">
                            <image :src="carInfo.logoUrl" mode=""></image>
                            <view>
                                <view>
                                    {{carInfo.brand + "-" + carInfo.seriesName}}
                                </view>	
                                {{carInfo.carModel}}
                            </view>
                            <view class="gt">
                                <u-icon name="arrow-right" color="#fff"></u-icon>
                            </view>
                        </view> 
                        <view class="right" style="width:400rpx;" v-else @click="getCarList">
                            <u--text suffixIcon="arrow-right" align="right" size="28rpx" color="#fff" iconStyle="font-size: 28rpx;color:#fff;" text="请选择"></u--text>
                        </view>
                    </view>
                </view>
                <view>
                    <u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '30rpx', color : '#fff'}" labelWidth="200rpx" :model="actInfo" :rules="rules"  ref="form1">
                        <u-form-item label="收货人:" prop="userName" @click="checkLogin">
                            <u--input v-model="actInfo.userName" placeholder="请输入" placeholderStyle="color:rgba(255,225,255,.6)" fontSize="28rpx" color="#fff" maxlength="50" border="none" inputAlign="right"></u--input>
                        </u-form-item>
                        <u-line color="rgba(255,225,255,.1)"></u-line>
                        <u-form-item label="收货电话:" prop="telNumber" @click="checkLogin">
                            <u--input v-model="actInfo.telNumber" placeholder="请输入" placeholderStyle="color:rgba(255,225,255,.6)" fontSize="28rpx" color="#fff" maxlength="20" border="none" inputAlign="right"></u--input>
                        </u-form-item>
                        <u-line color="rgba(255,225,255,.1)"></u-line>
                        <u-form-item label="收货地址:" prop="address" @click="checkLogin">
                            <u--input v-model="actInfo.address" fontSize="28rpx" color="#fff"  placeholderStyle="color:rgba(255,225,255,.6)" @tap="chooseAddress" placeholder="省/市/区" disabled disabledColor="transparent"
                                border="none" inputAlign="right"></u--input>
                            <u-icon slot="right" name="arrow-right" color="#fff" @tap="chooseAddress"></u-icon>
                        </u-form-item>
                        <u-line color="rgba(255,225,255,.1)"></u-line>
                        <u-form-item label="详细地址:" prop="detailInfo" @click="checkLogin">
                            <u--input v-model="actInfo.detailInfo" placeholder="请输入"  placeholderStyle="color:rgba(255,225,255,.6)" fontSize="28rpx" color="#fff" maxlength="100" border="none" inputAlign="right"></u--input>
                        </u-form-item>
                        <u-line color="rgba(255,225,255,.1)"></u-line>
                        <u-form-item label="验证码:" prop="smsCode" @click="checkLogin">
                            <u--input v-model="actInfo.smsCode" placeholder="请输入"  placeholderStyle="color:rgba(255,225,255,.6)" type="number" fontSize="28rpx"  color="#fff" maxlength="6" border="none" inputAlign="right"></u--input>
                            <view slot="right" style="margin-left: 20rpx;border-left: 2rpx solid rgba(255,225,255,.1);padding-left:20rpx;">
                                <text style="font-size:28rpx;color:#fff" @tap="getCode">{{tips}}</text>
                            </view>
                        </u-form-item>
                    </u--form>
                    <view style="margin-top: 38rpx;display: flex; justify-content: center;">
                        <view v-if="!disabledSubmit" style="background: url('http://jdnc-oss.uzosp.com/2023/01/11/6ca8d901b4654bfaaeb6c43e64010b9e.png') no-repeat; background-size: 100% 100%; width: 481rpx; height: 120rpx;"
                            @click="submitAct">
                            <view style="display: flex;justify-content: center;align-items: center;height: 120rpx; width: 481rpx;position: relative; top:-6rpx;">
                                <text style="font-size: 38rpx;color:#8E3B09;font-weight: bold;line-height: 42rpx;">立即领取</text>
                                <image src="@/static/act/arrow-right.png" style="width:18rpx;height:28rpx; margin-left: 20rpx;"></image>
                            </view>
                        </view>
                        <view v-if="disabledSubmit" style="background: url('http://jdnc-oss.uzosp.com/2023/01/11/d9d70d0127e5424a9f9d51918b50d750.png') no-repeat; background-size: 100% 100%; width: 481rpx; height: 120rpx;"
                           @click="submitAct">
                            <view style="display: flex;justify-content: center;align-items: center;height: 120rpx; width: 481rpx;position: relative; top:-6rpx;">
                                <text style="font-size: 38rpx;color:#8E3B09; opacity: 0.3; font-weight: bold;line-height: 42rpx;">立即领取</text>
                                <image src="@/static/act/arrow-right-dis.png" style="width:18rpx;height:28rpx; margin-left: 20rpx;"></image>
                            </view>
                        </view>
                    </view>
                    <u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
                    
                    <address-picker :show="addressShow" @confirm="addressConfirm" @cancel="addressCancel"></address-picker>
                    
                    <!-- 爱车选择弹框 -->
                    <u-popup :show="selectCar" mode="bottom" round="10" @close="selectCar = false">
                        <view class="love_car_list">
                            <view class="love_title">
                                选择车辆
                                <text @click.stop="selectCar = false">x</text>
                            </view>
                            <view class="love_list">
                                <view v-if="carList.length != 0">
                                    <view class="love_item" v-for="(item,i) in carList" :key="i" @click="radioChange(item)">
                                        <image :src="item.logoUrl"></image>
                                        <view class="love_info">
                                            <view>
                                                {{item.brand + "-" + item.seriesName}}
                                            </view>
                                            <view>
                                                {{item.carModel}}
                                            </view>
                                        </view>
                                        <view class="radio">
                                            <image src="@/static/move-car/radio-active.png" v-if="item.id === radioValue"></image>
                                            <image src="@/static/move-car/radio.png" v-else></image>
                                        </view>
                                    </view>
                                </view>
                                <view style="padding-top:140rpx;text-align: center;" v-else>
                                    暂时没有车辆，请添加！
                                </view>
                            </view>
                            <view class="love_btn">
                                <button type="primary" @click="addCar">
                                    <image src="@/static/move-car/love-car5.png">添加车辆
                                </button>
                            </view>
                        </view>
                    </u-popup>
                </view>
            </view>
        </view>
        
        <view style="margin: 0 auto; width: 706rpx;">
            <image style="width: 706rpx;height: 527rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/550c77228abf46e49d9588568e14e57a.png"></image>
        </view>
        <view style="margin: 59rpx auto 0 auto; width: 710rpx;">
            <image style="width: 710rpx;height: 865rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/e4a7db688c274e76921025b0675a420c.png"></image>
        </view>
        <view style="margin: 59rpx auto 0 auto; width: 708rpx;padding-bottom: 87rpx;">
            <image style="width: 708rpx;height: 1429rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/f4c2093310604cf983b50b87f9ca99a4.png"></image>
        </view>
        
        <!-- 爱车选择弹框 -->
        <u-popup :show="inputCodeShow" mode="bottom" round="10"  @close="inputCodeShow = false">
            <view class="love_car_list">
                <view class="love_title">
                    输入图形验证码
                    <text @click.stop="inputCodeShow = false">x</text>
                </view>
                <view style="width: 600rpx; margin: 0 auto;">
                    <u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '30rpx'}" labelWidth="150rpx" :model="verifyInfo" :rules="verifyRules"  ref="form2">
                        <u-form-item label="验证码:" prop="vc">
                            <u--input v-model="verifyInfo.vc" maxlength="20" fontSize="28rpx" placeholder="请输入结果" border="bottom" inputAlign="right" ></u--input>
                            <image slot="right" :src="captchaImg" style="width: 101px; height: 38px;margin-left: 20rpx;" @click="getCaptchaImage"></image>
                        </u-form-item>
                    </u--form>
                </view>
                <view style="width: 600rpx; margin: 30rpx auto 0 auto;">
                    <u-button color="#1c81e8" text="确认" customStyle="width: 400rpx" @click="submitVerifyCode"></u-button>
                </view>
                
            </view>
        </u-popup>
        <!-- 领取成功 -->
        <u-popup :show="receiveSuccessShow" mode="center"  bgColor="transparent" @close="receiveSuccessShow = false">
            <view style="width: 522rpx; height: 396rpx;background: url('http://jdnc-oss.uzosp.com/2023/01/11/fc7e706ce66f46acb680e09de82a086b.png') no-repeat; background-size: 100% 100%;">
                <view style="margin: 18rpx auto 13rpx auto ;width: 72rpx; height: 72rpx;background: url('http://jdnc-oss.uzosp.com/2023/01/11/c564e7113fe2445cb526f4d6a9947fe5.png') no-repeat; background-size: 100% 100%;"></view>
                <view style="text-align: center;">
                    <text style="color:#E62929;font-size: 36rpx;line-height: 36rpx;font-weight: bold;">领取成功</text>
                </view>
                <view style="margin: 12rpx auto 0 auto;width:380rpx;text-align: center;">
                    <text style="font-weight: 400;color: #620F0F;font-size: 24rpx;">您已经免费领取京东汽车挪车牌，正在为您派送中，请耐心等待。</text>
                </view>
                <view @click="goToIndex" style="margin: 12rpx auto 0 auto;width: 398rpx; height: 108rpx;background: url('http://jdnc-oss.uzosp.com/2023/01/11/95802c8a6b594f648b826a93bf83d2c2.png') no-repeat; background-size: 100% 100%;">
                    <view style="display: flex;justify-content: center;align-items: center;height: 108rpx;position: relative; top:-6rpx">
                        <text style="font-size: 32rpx;color:#8E3B09;text-shadow: 0px 4px 8px rgba(146,66,25,0.27); font-weight: bold;line-height: 36rpx;">返回首页</text>
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- 已经领取 -->
        <u-popup :show="receivedFailShow" mode="center"  bgColor="transparent" @close="receivedFailShow = false">
            <view style="width: 522rpx; height: 396rpx;background: url('http://jdnc-oss.uzosp.com/2023/01/11/fc7e706ce66f46acb680e09de82a086b.png') no-repeat; background-size: 100% 100%;position: relative;">
                <view style="text-align: center;margin-top: 30rpx;">
                    <text style="color:#620F0F;font-size: 36rpx;line-height: 36rpx;font-weight: 500;">温馨提示</text>
                </view>
                <view style="margin: 23rpx auto 0 auto;width:380rpx;text-align: center;">
                    <text style="font-weight: 400;color: #620F0F;font-size: 24rpx;">{{ alreadyMsg}}</text>
                </view>
                <view style="position: absolute; bottom: 52rpx; width: 100%;">
                    <view @click="closeReceivedFail" style="margin:0 auto;width: 398rpx; height: 108rpx;background: url('http://jdnc-oss.uzosp.com/2023/01/11/95802c8a6b594f648b826a93bf83d2c2.png') no-repeat; background-size: 100% 100%;">
                        <view style="display: flex;justify-content: center;align-items: center;height: 108rpx;position: relative; top:-6rpx">
                            <text style="font-size: 32rpx;color:#8E3B09;text-shadow: 0px 4px 8px rgba(146,66,25,0.27); font-weight: bold;line-height: 36rpx;">知道了</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            receivedFailShow:false,
            receiveSuccessShow:false,
            inputCodeShow:false,
            
            addressShow:false,
            
            //获取短信验证码相关  begin
            disabled1: false,
            tips : '',
            //获取短信验证码相关  end
            
            //选择车辆相关  begin
            selectCar:false,
            radioValue:"",
            //选择车辆id
            carId: '',
            carList:[],
            carInfo: null,
            //选择车辆相关  end
            
            disabledSubmit:true,
            
            //是否已经领取过
            already: true,
            //已经领取的错误提示文案
            alreadyMsg : '',
            //是否要显示图形验证码
            captcha : false,
            captchaImg : '',
            
            verifyInfo: {
                vc:'',
                vi: '',
            },
            
            actInfo: {
                carId:'',
                userName: '',
                telNumber: '',
                address: '',
                detailInfo: '',
                smsCode: '',
            },
            rules: {
                'carId': [{
                    type: 'string',
                    required: true,
                    message: '请选择品牌车型',
                    trigger: ['blur', 'change']
                }],
                'userName': [{
                    type: 'string',
                    required: true,
                    message: '请填写收货人',
                    trigger: ['blur', 'change']
                }],
                'telNumber': [
                    {
                        type: 'string',
                        required: true,
                        message: '请填写收货电话',
                        trigger: ['blur', 'change']
                    },
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // uni.$u.test.mobile()就是返回true或者false的
                            return uni.$u.test.mobile(value);
                        },
                        message: '收货电话格式不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change','blur'],
                    }
                ],
                'address': [{
                    type: 'string',
                    required: true,
                    message: '请选择收货地址',
                    trigger: ['blur', 'change']
                }],
                'detailInfo': [{
                    type: 'string',
                    required: true,
                    message: '请输入详细地址',
                    trigger: ['blur', 'change']
                }],
                'smsCode': [{
                    type: 'number',
                    required: true,
                    message: '请输入短信验证码',
                    trigger: ['blur', 'change']
                }],
            },
            verifyRules: {
               'vc': [
                   {
                       type: 'string',
                       required: true,
                       message: '请输入结果',
                       trigger: ['blur', 'change']
                   }
               ],
            }
        }
    },
    methods: {
        closeReceivedFail() {
            this.receivedFailShow = false
        },
        goToIndex() {
            this.receiveSuccessShow = false
            uni.reLaunch({
                url: '/pages/main'
            })
        },
        chooseAddress() {
            this.checkLogin()
            if(this.disabledSubmit) {
                return
            }
            this.addressShow = true
        },
        addressConfirm(e) {
            this.addressShow = false
            this.actInfo.address = e.value.join('/');
        },
        addressCancel() {
            this.addressShow = false
        },
        codeChange(text) {
            this.tips = text;
        },
        checkLogin() {
            let token = uni.getStorageSync('userToken')
            if(!token) { 
                uni.setStorageSync('routerLogin', '/pagesA/pages/mrAct/index')
                //跳转到登录页
                let returnPage = '/pages/main';
                let pageType = "reLaunch"
                uni.navigateTo({
                	url: "/pages/login/index/index?returnPage=" + returnPage + '&pageType=' + pageType
                })
                return
            }
            if(this.disabledSubmit) {
                this.receivedFailShow = true
                return
            }
        },
        getCode() {
            let that = this
            that.checkLogin()
            if(that.disabledSubmit) {
                return
            }
            
            if(!that.actInfo.telNumber) {
                uni.$u.toast('请填写收货电话')
                return
            }
            if(!uni.$u.test.mobile(that.actInfo.telNumber)) {
                uni.$u.toast('收货电话格式不正确')
                return
            }
            if (that.$refs.uCode.canGetCode) {
                that.checkCaptchaInfo()
            } else {
                //uni.$u.toast('倒计时结束后再发送');
            }
        },
        sendSmsCode() {
            let that = this
            // 模拟向后端请求验证码
            uni.showLoading({
                title: '正在获取短信验证码'
            })
            let opts = {
            	url: '/app/smsCode/mr_activity',
            	method: 'post'
            }
            let data = {phone: that.actInfo.telNumber, vi : that.verifyInfo.vi, vc : that.verifyInfo.vc}
            that.http.httpTokenRequest(opts, data).then(res => {
                uni.hideLoading();
                let code = res.data.code
            	if (code == 200) {
            		
            		// 这里此提示会被this.start()方法中的提示覆盖
            		uni.$u.toast('别着急！短信已经发送了~');
            		// 通知验证码组件内部开始倒计时
            		that.$refs.uCode.start();
                    
                    this.inputCodeShow = false
            	} else if (code == 1000000004) {
                    that.getCaptchaImage()
                    uni.$u.toast(res.data.msg)
                }  else{
            		uni.$u.toast(res.data.msg)
            	}
            })
        },
        // 选择爱车
        radioChange(item){
        	this.carInfo = item
        	this.radioValue = item.id
        	this.selectCar = false
        	this.actInfo.carId = item.id
        },
        // 获取爱车列表
        getCarList(){
            this.checkLogin()
            if(this.disabledSubmit) {
                return
            }
        	this.$http.request({
        		url:'/app/vehicleAdmin/list',
        		method:'get',
        		data:{},
        		isFactory:false,
        	}).then(res => {
        		this.carList = res.data || []
        		this.selectCar = true
        	})
        },
        // 添加车辆
        addCar() {
        	this.selectCar = false
        	uni.navigateTo({
        		url: '/pages/transitionPage'
        	});
        },
        //活动检查信息
        getCaptchaImage() {
            let that = this
            that.$http.request({
            	url:'/app/move/activity/captchaImage',
            	method:'get',
            	data:{ },
            	load:false
            }).then(res => {
            	that.verifyInfo.vi = res.uuid
            	that.captchaImg = 'data:image/gif;base64,' + res.img
            })
        },
        //活动检查信息
        async getActCheckInfo() {
            let that = this
            await that.$http.request({
            	url:'/app/move/activity/c',
            	method:'get',
            	data:{ },
            	load:false
            }).then(res => {
                that.already = res.already
                if(that.already) {
                    that.disabledSubmit = true
                } else {
                    that.disabledSubmit = false
                }
                that.alreadyMsg = res.alreadyMsg
            })
        },
        //活动检查手机信息
        async checkCaptchaInfo() {
            let that = this
            await that.$http.request({
            	url:'/app/move/activity/c/m',
            	method:'post',
            	data:{ },
            	load:false
            }).then(res => {
                that.captcha = res.captcha
                //为true的时候加载图形验证码
                if(that.captcha) {
                    that.getCaptchaImage()
                    this.inputCodeShow = true
                } else {
                    that.sendSmsCode()
                }
            	
            })
        },
        submitVerifyCode() {
            let that = this
            that.$refs.form2.validate().then(res => {
                that.sendSmsCode()
            }).catch(errors => {
                if(errors && errors.length > 0) {
                    uni.$u.toast(errors[0].message)
                }
            })
        },
        //活动检查信息
        submitAct() {
            let that = this
            that.checkLogin()
            
            if(that.disabledSubmit) {
                this.receivedFailShow = true
                return
            }
            
            that.$refs.form1.validate().then(res => {
                let data = JSON.parse(JSON.stringify(that.actInfo))
                let address = data.address.split('/')
                data.address = null;
                data.province = address[0]
                data.city = address[1]
                data.district = address[2]
                
                let opts = {
                	url: '/app/move/activity',
                	method: 'post'
                }
                that.http.httpTokenRequest(opts, data).then(res => {
                    let code = res.data.code
                	if (code == 200) {
                		this.receiveSuccessShow = true
                        that.getActCheckInfo()
                	} else if (code == 1000000003) {
                        that.checkCaptchaInfo()
                        uni.$u.toast(res.data.msg)
                    } else if (code == 1000000005) { //禁用领取按钮
                        that.disabledSubmit = true
                    } else{
                		uni.$u.toast(res.data.msg)
                	}
                })
            }).catch(errors => {
                if(!that.actInfo.carId) {
                    uni.$u.toast('请选择品牌车型')
                    return
                }
                if(errors && errors.length > 0) {
                    uni.$u.toast(errors[0].message)
                }
            })
           
        },
        
    },
    onReady() {
        this.$refs.form1.setRules(this.rules)
    },
    onLoad(option) {
        let that = this
        let token = uni.getStorageSync('userToken')
        if(token) {
            that.getActCheckInfo()
        } 
    },
}
</script>

<style lang="scss" scoped>
    .u-popup-slot {
        width: 750rpx;
        height: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    // 爱车列表
    .love_car_list{
    	padding:30rpx 40rpx;
    	.love_title{
    		text-align: center;
    		font-size: 36rpx;
    		font-weight: bold;
    		margin-bottom:30rpx;
    		position: relative;
    		text{
    			position: absolute;
    			right:20rpx;
    			top:-4rpx;
    			font-size:40rpx;
    			font-weight:500;
    			color: #666;
    		}
    	}
    	.love_list{
    		height:400rpx;
    		overflow: auto;
    		.love_item{
    			padding:20rpx 0;
    			display: flex;
    			align-items: center;
    			justify-content: space-between;
    			border-top: 2rpx solid #E8E8E8;
    			&:first-child{
    				border:none;
    			}
    			image{
    				width:100rpx;height:100rpx;
    			}
    			.love_info{
    				width:450rpx;
    				>view{
    					&:first-child{
    						font-size:34rpx;
    						font-weight: bold;
    						margin-bottom:10rpx;
    					}
    					&:last-child{
    						font-size: 28rpx;
    						color:#666;
    					}
    				}
    			}
    			.radio{
    				width:60rpx;
    				>image{
    					width:48rpx;height:48rpx;
    				}
    			}
    		}
    	}
    	.love_btn{
    		padding:50rpx;
    		button {
    			height:80rpx;
    			line-height:80rpx;
    			border-radius:50rpx;
    			// background: linear-gradient(150deg, #E1251B, #E14A1B);
    			background: linear-gradient(-36deg, #1C81E8, #1CA2E8);
    			box-shadow:2rpx 4rpx 6rpx 0 rgba(20, 68, 225, 0.29);
    			// box-shadow: 0 6rpx 13rpx 2rpx rgba(225, 50, 27, 0.17);
    			border:0;
    			font-size:32rpx !important;
    			>image{
    				width:30rpx;height:30rpx;
    				margin-right:10rpx;
    				position: relative;
    				top:4rpx;
    			}
    		}
    	}
    }
    
    // 已绑定车辆信息
    .car_info{
    	//padding:0 40rpx;
    	position: relative;
    	top:-6rpx;
    	.select-car{
    		line-height:80rpx;
    		text-align: right;
    		font-size: 28rpx;
    		color: #E1251B;
    	}
    	.info_list{
    		line-height:90rpx;
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		border-bottom:2rpx solid rgba(255,225,255,.1);
    		
    		.left{
    			font-size: 30rpx;
                color:#fff;
    		}
    		.right{
    			font-size: 28rpx;
    			color: #666;
    			line-height: 1.8;
    			word-wrap:break-word;
    			text-align: right;
    			&.info{
    				display: flex;
    				align-items: center;
    				justify-content: flex-end;
    				text-align: left;
    				// padding:20rpx 0;
    				image{
    					max-width:48rpx;height: 48rpx;
    				}
    				>view{
    					
    					line-height: 1.5;
                        color: #fff;
                        font-size: 26rpx;
                        white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
    					>view{
    						font-weight:bold;
    						font-size: 30rpx;
    						color: #fff;
                            white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
    					}
    				}
    			}
    			.car__input{
    			    width: 100%;
    			}
    			.gt{
                    width: 45rpx !important;
    				// max-width:16rpx !important;height:20rpx !important;
    			}
    		}
    	}	
    	.car_btn{
    		width: 400rpx;
    		line-height: 76rpx;
    		background: #FFFFFF;
    		border: 2rpx solid #DDDDDD;
    		border-radius: 10rpx;
    		text-align: center;
    		margin:30rpx auto 0;
    		font-size: 32rpx;
    		color: #666;
    	}
    }
</style>