|
@@ -0,0 +1,806 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <view class="top">
|
|
|
+ <view class="orderState">
|
|
|
+ <image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="SheetState" v-if="orderData.orderSheet.sheetState == 0">待确认</view>
|
|
|
+ <view class="SheetState" v-if="orderData.orderSheet.sheetState == 1">预约中</view>
|
|
|
+ <view class="SheetState" v-if="orderData.orderSheet.sheetState == 2">已到店</view>
|
|
|
+ <view class="SheetState" v-if="orderData.orderSheet.sheetState == 3">已取消</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 店铺信息 -->
|
|
|
+ <view class="shopBox">
|
|
|
+ <image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
|
|
|
+ <view class="shopCont">
|
|
|
+ <view class="shopName">{{orderData.shopInfo.shopName}}</view>
|
|
|
+ <view class="Address">{{orderData.shopInfo.province}}{{orderData.shopInfo.city}}{{orderData.shopInfo.area}}{{orderData.shopInfo.address}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="shopRightBox" @click="map">
|
|
|
+
|
|
|
+ <image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
|
|
|
+
|
|
|
+ <view class="shopRihgtTxt">地图</view>
|
|
|
+ </view>
|
|
|
+ <view class="shopsx"></view>
|
|
|
+ <view class="shopRightBox" @click="call">
|
|
|
+
|
|
|
+ <image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
|
|
|
+
|
|
|
+ <view class="shopRihgtTxt">电话</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="information">
|
|
|
+ <view class="detailedTitle">基本信息</view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">车牌号:</view>
|
|
|
+ <view class="informationNum">{{orderData.orderSheet.plateNumber}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">手机号:</view>
|
|
|
+ <view class="informationNum">{{orderData.orderSheet.mobilePhone}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">预约时间:</view>
|
|
|
+ <view class="informationNum">{{orderData.orderSheet.billDate}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">单号:</view>
|
|
|
+ <view class="informationNum">{{orderData.orderSheet.code}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">备注:</view>
|
|
|
+ <view class="informationNum">{{orderData.orderSheet.comment}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 项目明细 -->
|
|
|
+ <view class="detailedBox itemBox" v-if=" orderData.orderDetails.length!=0">
|
|
|
+ <view class="detailedTitle">预约项目</view>
|
|
|
+ <view class="detailedLineBox">
|
|
|
+ <view class="detailedLine" v-for="(v,index) in orderData.orderDetails">
|
|
|
+ <view class="detailedName">{{v.itemName}}</view>
|
|
|
+ <span>¥{{v.amountMoney}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="detailedLine" v-if=" orderData.orderDetails.length!=0">
|
|
|
+ <view class="detailedName">预估总价</view>
|
|
|
+ <span v-if="orderData.sumMoney>0">¥{{orderData.sumMoney}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="content">温馨提示:该报价仅为参考价格,实际以门店为准(不同品牌和车型费用会不同)</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="bottom" v-if="(orderData.orderSheet.sheetState == 0)||(orderData.orderSheet.sheetState == 1)">
|
|
|
+
|
|
|
+ <view class="cancel" @click="cancelBespeak" >取消预约</view>
|
|
|
+ <view class="defer" @click="cktime">延期</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 预约时间 -->
|
|
|
+ <timeSelect ref="timeSelect" :timedata="timedata" @changeTime="changeTime"></timeSelect>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import timeSelect from '@/components/timeSelect/timeSelect.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ timeSelect
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ location: '',
|
|
|
+ id: '',
|
|
|
+ orderData: '',
|
|
|
+ timedata:'',
|
|
|
+ billDate:'',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+
|
|
|
+ this.id = opt.id
|
|
|
+
|
|
|
+ if (this.id) {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ changeTime(data){
|
|
|
+ console.log(data)
|
|
|
+ this.billDate=data
|
|
|
+ this.upTime();
|
|
|
+ },
|
|
|
+ cktime(){
|
|
|
+ this.$refs.timeSelect.open();
|
|
|
+ },
|
|
|
+ upTime() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ var that = this
|
|
|
+ this.$http('openreservation/carOwner/updateTimeOfAppointment', {
|
|
|
+
|
|
|
+ id: this.id,
|
|
|
+ shopId: this.orderData.shopInfo.id,
|
|
|
+ billDate:this.billDate
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // var list = res.data.Items
|
|
|
+ var list = res.data
|
|
|
+ console.log("result+=",res.data);
|
|
|
+ uni.showToast({
|
|
|
+ title: '延期成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ that.getData();
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancelBespeak() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ var that = this
|
|
|
+ this.$http('openreservation/carOwner/updateState', {
|
|
|
+
|
|
|
+ id: this.id,
|
|
|
+ shopId: this.orderData.shopInfo.id,
|
|
|
+ sheetState:3
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // var list = res.data.Items
|
|
|
+ var list = res.data
|
|
|
+ uni.showToast({
|
|
|
+ title: '取消成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ that.getData();
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ map() {
|
|
|
+ console.log("打开地图")
|
|
|
+ var that = this;
|
|
|
+ if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '该店铺未设置定位',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: Number(that.orderData.shopInfo.lat),
|
|
|
+ longitude: Number(that.orderData.shopInfo.lng),
|
|
|
+ name: that.orderData.shopInfo.shopName,
|
|
|
+ address: that.orderData.shopInfo.province+that.orderData.shopInfo.city+that.orderData.shopInfo.area+that.orderData.shopInfo.address,
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ call() {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.orderData.orderSheet.mobilePhone
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ getData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$http('openreservation/orderSheetDetails', {
|
|
|
+ // lat: this.location.lat,
|
|
|
+ // lng: this.location.lng,
|
|
|
+ id: this.id,
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.orderData = res.data;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ goback() {
|
|
|
+
|
|
|
+ uni.navigateBack({})
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+
|
|
|
+ this.getData()
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F4F5F7;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 190rpx;
|
|
|
+ background-color: #FF0000;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderState {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .SheetState {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 15rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .timeEditImg {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .shopBoximg {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopRightImg {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopsx {
|
|
|
+ width: 1px;
|
|
|
+ height: 50rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-left: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBox {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ margin: 0rpx 24rpx;
|
|
|
+ margin-top: -60rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopCont {
|
|
|
+ width: 405rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopName {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .Address {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopRihgtTxt {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopRightBox {
|
|
|
+
|
|
|
+ padding-left: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .peopleCont {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .PlateNumberBox {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .PlateNumbercx {
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .PlateNumber {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ border: 1px solid #F19D01;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #F19D01;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .PlateNumberBoxTop {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .CarModel {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailedBox {
|
|
|
+
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 20rpx 24rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemBox {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carMes {
|
|
|
+ padding: 23rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plate {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mileage {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #F19D01;
|
|
|
+ padding: 0rpx 10rpx;
|
|
|
+ border: 1rpx solid #F19D01;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailedTitle {
|
|
|
+ padding: 23rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ align-content: flex-start;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .detailedLine {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 20rpx 0rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailedImg {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .detailedName {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+ span{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodscost {
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 15rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodscostLine {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsCostNum {
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information {
|
|
|
+ width: 702rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0rpx 0 15rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationLine {
|
|
|
+ display: flex;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 15rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationTxt {
|
|
|
+ width: 190rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationNum {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copyBtn {
|
|
|
+ width: 86rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderBottom {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancelBtn {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 2rpx solid #DDDDDD;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ margin-top: 21rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payBtn {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 2rpx solid #FF4F00;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FF4F00;
|
|
|
+ margin-top: 21rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeBox2 {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeLeftActive {
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeMain {
|
|
|
+ width: 100vw;
|
|
|
+ height: 70vh;
|
|
|
+ margin-top: 30vh;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 0px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timesfNo {
|
|
|
+ background: #F5F5F5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timesfActive {
|
|
|
+ background: #FF4F00;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .timesfActive .timeSfNum {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timesfActive .timeyy {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .timeTop {
|
|
|
+ display: flex;
|
|
|
+ line-height: 90rpx;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeTopTitle {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeCont {
|
|
|
+ height: calc(70vh - 210rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeSv {
|
|
|
+ height: calc(70vh - 210rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeLeft2 {
|
|
|
+ width: 162rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-top: 1px soid #F4F5F7;
|
|
|
+ border-right: 1px soid #F4F5F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeRight2 {
|
|
|
+ width: 588rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timesf {
|
|
|
+ width: 165rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ border-radius: 7rpx;
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeBottom {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .timerightBox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeCont {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeSfNum {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-top: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeyy {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timecomplete {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
|
|
|
+ border-radius: 37rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeleftLine {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+ padding: 28rpx 10rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yuyueBox {
|
|
|
+
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .yuyueTime {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 36rpx;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yuyueState {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .querenMa {
|
|
|
+
|
|
|
+ margin: 20rpx 0;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maBoximg {
|
|
|
+ width: 308rpx;
|
|
|
+ height: 308rpx;
|
|
|
+ margin: 30rpx 197rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightShou {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ background-color: #F4F5F7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ align-items: center;
|
|
|
+ height: 98rpx;
|
|
|
+ width: 100vw;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ }
|
|
|
+ .cancel{
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 1rpx solid #DDDDDD;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+ .defer {
|
|
|
+ color: #D53533;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 1rpx solid #D53533;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|