|
@@ -0,0 +1,916 @@
|
|
|
+<template>
|
|
|
+ <view class="pageBox">
|
|
|
+ <view class="userOff" v-if="actionCartItem">
|
|
|
+ <view class="navBox">
|
|
|
+ <view class="flex topIconBox">
|
|
|
+ <image @click="navTo('/pages/index/shopTab?type=1')" class="topIcon"
|
|
|
+ src="../../../static/images/controller_witchShop.png" mode="widthFix"></image>
|
|
|
+ <view v-if="actionCartItem" class="clamp padding-l-10 padding-r-10">
|
|
|
+ {{actionCartItem.car_name||''}}
|
|
|
+ </view>
|
|
|
+ <image @click="navTo('/pages/index/notice')" class="topIcon"
|
|
|
+ src="../../../static/images/controller_witchMessage.png" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ <view class="topIconNum flex" v-if="notify>0">
|
|
|
+ <text>
|
|
|
+ {{notify}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="actionBox">
|
|
|
+ <image class="cartImg" :src="actionCartItem.image" mode="aspectFit"></image>
|
|
|
+ <view class="timeBox" v-if="actionCartItem.day>0">
|
|
|
+ <view style="border-radius: 20rpx;"
|
|
|
+ class="rowContentBox flexCenter lineBorder padding-l-20 padding-r-20 padding-t-10 padding-b-10">
|
|
|
+ <view class="tipMen"></view>
|
|
|
+ <view class="dayBox" v-if="actionCartItem.car_operate">
|
|
|
+ <view>
|
|
|
+ {{actionCartItem.day}}
|
|
|
+ </view>
|
|
|
+ <view class="oldDay margin-t-10">
|
|
|
+ 剩余天数
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dayBox" v-else>
|
|
|
+ <view class="oldDay margin-t-10 font-color-red">
|
|
|
+ 已欠费
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="contentButtom flexCenter">
|
|
|
+ <view class="buttomBox flex">
|
|
|
+ <view class="leftBox">
|
|
|
+ <view class="buttom buttomLg ">
|
|
|
+ <view @click="authSet" class="rowContentBox flexCenter lineBorder">
|
|
|
+ <view class="tipMen"></view>
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon" src="../../../static/images/controller_shouquan.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 授权
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rightPaddingBg">
|
|
|
+ </view>
|
|
|
+ <view class="buttomPaddingBg">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="leftCenterButtom buttom" @click="navTo('/pages/user/money/recharge')">
|
|
|
+ <view class="rowContentBox flexCenter lineBorder">
|
|
|
+ <view class="tipMen"></view>
|
|
|
+ <view>
|
|
|
+ <view>
|
|
|
+ 充
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ 值
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="topBageBg"></view>
|
|
|
+ <view class="bottomBageBg"></view>
|
|
|
+ </view>
|
|
|
+ <view class="buttomLg buttom">
|
|
|
+ <view @click="navTo('/pages/user/reportForRepair/Report?id='+actionCartItem.car_number)"
|
|
|
+ class="rowContentBox flexCenter lineBorder">
|
|
|
+ <view class="tipMen"></view>
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon" src="../../../static/images/controller_baoxiu.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 报修
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="topPaddingBg"></view>
|
|
|
+ <view class="rightPaddingBg"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="centerBgBox">
|
|
|
+ <view class="centerBg lineBorder borderRadiusAll">
|
|
|
+ <view class="borTopHide"></view>
|
|
|
+ <view class="borBottomHide"></view>
|
|
|
+ </view>
|
|
|
+ <view class="bgGray borderRadiusAll"></view>
|
|
|
+ <view class="contentOrg borderRadiusAll">
|
|
|
+ <view class="contentOrgBg borderRadiusAll centerBox lineBorder2 flexCenter">
|
|
|
+ <view class="centerBoxJb borderRadiusAll lineBorder2">
|
|
|
+ <view class="boxBgJb borderRadiusAll flexCenter">
|
|
|
+ <view class="flex-center">
|
|
|
+ <view class="iconButtomBox borderRadiusAll flexCenter"
|
|
|
+ :class="{greedBg:actionCartItem.status==1||actionCartItem.status==3||actionCartItem.status==4}"
|
|
|
+ @click="tabCarStatus('tab',actionCartItem)">
|
|
|
+ <view class="mr borderRadiusAll "></view>
|
|
|
+ <view class="iconButtomJb">
|
|
|
+ <view>
|
|
|
+ <image class="img"
|
|
|
+ src="../../../static/images/controller_qidong.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10"
|
|
|
+ v-if="actionCartItem.status==1||actionCartItem.status==3||actionCartItem.status==4">
|
|
|
+ 启动
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10" v-else>
|
|
|
+ 关闭
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line left"></view>
|
|
|
+ <view class="line right"></view>
|
|
|
+ <view @click="alertCartList" class="topButtomTipBox posbuttom flexCenter">
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon"
|
|
|
+ src="../../../static/images/controller_huanche.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 换车
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rightButtomTipBox posbuttom flexCenter"
|
|
|
+ @click="tabCarStatus('seek',actionCartItem)">
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon"
|
|
|
+ src="../../../static/images/controller_xunche.png" mode="aspectFit">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 寻车
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ @click="openMap(actionCartItem.cartInfo.latitude,actionCartItem.cartInfo.longitude)"
|
|
|
+ class="bottomButtomTipBox posbuttom flexCenter">
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon"
|
|
|
+ src="../../../static/images/controller_dingwei.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 定位
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="leftButtomTipBox posbuttom flexCenter"
|
|
|
+ @click="tabCarStatus('unlock',actionCartItem)">
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon"
|
|
|
+ src="../../../static/images/controller_kaisuo.png" mode="aspectFit">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 开座垫
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rightBox">
|
|
|
+ <view class="rightButtom buttom flex">
|
|
|
+
|
|
|
+ <view class="centerTextBox">
|
|
|
+ <view>
|
|
|
+ {{actionCartItem.bfb||0}}%
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon" src="../../../static/images/controller_dianchi.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rightElectric flexCenter">
|
|
|
+ <view class="electric" :class="{greedBg:actionCartItem.bfb>91}"></view>
|
|
|
+ <view class="electric" :class="{greedBg:actionCartItem.bfb>83}"></view>
|
|
|
+ <view class="electric" :class="{greedBg:actionCartItem.bfb>75}"></view>
|
|
|
+ <view class="electric" :class="{greedBg:actionCartItem.bfb>66}"></view>
|
|
|
+ <view class="electric" :class="{yellowBg:actionCartItem.bfb>58}"></view>
|
|
|
+ <view class="electric" :class="{yellowBg:actionCartItem.bfb>50}"></view>
|
|
|
+ <view class="electric" :class="{yellowBg:actionCartItem.bfb>41}"></view>
|
|
|
+ <view class="electric" :class="{yellowBg:actionCartItem.bfb>33}"></view>
|
|
|
+ <view class="electric" :class="{redGb:actionCartItem.bfb>24}"></view>
|
|
|
+ <view class="electric" :class="{redGb:actionCartItem.bfb>16}"></view>
|
|
|
+ <view class="electric" :class="{redGb:actionCartItem.bfb>8}"></view>
|
|
|
+ <view class="electric" :class="{redGb:actionCartItem.bfb>0}"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class=" buttomLg buttom"
|
|
|
+ @click="navTo('/pages/index/route?id='+actionCartItem.car_number)">
|
|
|
+ <view class="topBageBg"></view>
|
|
|
+ <view class="rowContentBox flexCenter lineBorder">
|
|
|
+ <view class="tipMen"></view>
|
|
|
+ <view class="centerTextBox margin-l-40 padding-l-30">
|
|
|
+ <view>
|
|
|
+ <image class="tipIcon" src="../../../static/images/controller_xincheng.png"
|
|
|
+ mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="margin-t-10">
|
|
|
+ 行程
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="topPaddingBg"></view>
|
|
|
+ <view class="leftPaddingBg"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="popup" type="bottom" v-if="actionCartItem">
|
|
|
+ <view class="cartListAlertButtom">
|
|
|
+ <view class="cartTitle flex">
|
|
|
+ <view>
|
|
|
+ 请选择更换的车辆
|
|
|
+ </view>
|
|
|
+ <image @click="popupClose" class="exit" src="../../../static/images/goodsExit.png"
|
|
|
+ mode="scaleToFill">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="actionCartBox">
|
|
|
+ <view class="itemCart flex" :class="{action:item.id==actionCartItem.id}"
|
|
|
+ v-for="(item,index) in myCartList" @click="changeCart(index)" :key='index'>
|
|
|
+ <image class="cartImg" :src="item.image" mode="scaleToFill"></image>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title clamp2" :class="{action:item.id==actionCartItem.id}">
|
|
|
+ {{item.car_name||''}}
|
|
|
+ </view>
|
|
|
+ <view class="address margin-t-20" :class="{action:item.id==actionCartItem.id}">
|
|
|
+ {{item.address||"暂无定位信息"}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 1px;"></view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <pageFoot></pageFoot>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mycar,
|
|
|
+ getCarInfo,
|
|
|
+ getcar_status,
|
|
|
+ car_switch,
|
|
|
+ getUserInfo
|
|
|
+ } from '@/api/user.js';
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex';
|
|
|
+ import pageFoot from '@/components/pageFooter/index.vue';
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ notify: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ pageFoot
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chickedMyCart: 0, //默认选中的车辆
|
|
|
+ // 我的车辆
|
|
|
+ myCartList: [],
|
|
|
+ ladingCart: false, //判断是否已经加载过我的车辆
|
|
|
+ // #ifdef H5
|
|
|
+ iconPath: '../../static/image/location.png', //定位图标地址
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ iconPath: '../../../static/image/location.png', //定位图标地址
|
|
|
+ // #endif
|
|
|
+ timeOut: '', //用于存放调用定时获取对象数据
|
|
|
+ reachangeAlert: false, //判断是否已经提示过充值
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ reachange(newValue, oldValue) {
|
|
|
+ if (newValue && (this.actionCartItem.auth_num != -1)) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '错误',
|
|
|
+ content: '您的余额已不足三天支付是否马上充值',
|
|
|
+ cancelText: '关闭',
|
|
|
+ confirmText: '马上充值',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.navTo('/pages/user/money/recharge');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userInfo']),
|
|
|
+ actionCartItem() {
|
|
|
+ if (this.myCartList[this.chickedMyCart]) {
|
|
|
+ return this.myCartList[this.chickedMyCart]
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reachange() {
|
|
|
+ // 余额
|
|
|
+ const a1 = +this.userInfo.now_money;
|
|
|
+ if (!this.actionCartItem) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 三天内应该付的金额
|
|
|
+ const a2 = this.actionCartItem.day_deducted * 3;
|
|
|
+ if (a1 < a2 && !this.reachangeAlert && this.actionCartItem.day > 0) {
|
|
|
+ // 处理已加载提示用户充值信息
|
|
|
+ this.reachangeAlert = true;
|
|
|
+ return (new Date()).getTime()
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getUserInfo();
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ $paddingJg:40rpx;
|
|
|
+ // 按钮黑色背景
|
|
|
+ $bgBlack:#161727;
|
|
|
+ // 底色
|
|
|
+ $contentBg:#373c5a;
|
|
|
+ // 按钮包裹框背景颜色
|
|
|
+ $maxBoxBg:#1f2136;
|
|
|
+
|
|
|
+ .pageBox {
|
|
|
+ height: 0;
|
|
|
+ min-height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flexCenter {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navBox {
|
|
|
+ /* #ifdef APP */
|
|
|
+ padding-top: var(--status-bar-height);
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ /* #endif */
|
|
|
+ /* #ifdef H5 || MP */
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ /* #endif */
|
|
|
+ background-color: $contentBg;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topIconBox {
|
|
|
+ padding: 0 $paddingJg;
|
|
|
+ position: relative;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $uni-font-size-base + 2rpx;
|
|
|
+
|
|
|
+ .topIconNum {
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ font-size: $uni-font-size-sm;
|
|
|
+ min-width: 30rpx;
|
|
|
+ min-height: 30rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background-color: $uni-color-error;
|
|
|
+ padding: 5rpx;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topIcon {
|
|
|
+ transform: rotateZ(-90deg);
|
|
|
+ width: 45rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .userOff {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .actionBox {
|
|
|
+ background-color: #0f1025;
|
|
|
+ flex-shrink: 1;
|
|
|
+ flex-grow: 1;
|
|
|
+ text-align: center;
|
|
|
+ height: 400rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cartImg {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeBox {
|
|
|
+ position: absolute;
|
|
|
+ color: #FFFFFF;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 30rpx;
|
|
|
+ font-size: $uni-font-size-base;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .dayBox {
|
|
|
+ z-index: 1;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oldDay {
|
|
|
+ font-size: $uni-font-size-sm - 2rpx;
|
|
|
+ color: $uni-border-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipMen {
|
|
|
+ transform-origin: top left;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex-shrink: 0;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lineBorder {
|
|
|
+ border: 1px solid #aaaec7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lineBorder2 {
|
|
|
+ border: 1px solid #b7cbf2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowContentBox {
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: $contentBg;
|
|
|
+
|
|
|
+ .tipMen {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ transform-origin: top left;
|
|
|
+ margin-left: -40rpx;
|
|
|
+ transform: rotateZ(-45deg);
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-image: linear-gradient(to bottom, rgba(69, 75, 113, 1) 0%, transparent 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowContentBox,
|
|
|
+ .centerBox {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentButtom {
|
|
|
+
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100%;
|
|
|
+ background-color: $maxBoxBg;
|
|
|
+ font-size: $uni-font-size-base;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .centerTextBox {
|
|
|
+ text-align: center;
|
|
|
+ margin-left: -70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipIcon {
|
|
|
+ width: 46rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttomBox {
|
|
|
+ width: 750rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ color: #B2B9D3;
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ padding: 10rpx;
|
|
|
+ background-color: $bgBlack;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .rightPaddingBg,
|
|
|
+ .topPaddingBg,
|
|
|
+ .leftPaddingBg,
|
|
|
+ .buttomPaddingBg {
|
|
|
+ position: absolute;
|
|
|
+ background-color: $bgBlack;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topPaddingBg,
|
|
|
+ .buttomPaddingBg {
|
|
|
+ height: 12rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightPaddingBg,
|
|
|
+ .leftPaddingBg {
|
|
|
+ height: 180rpx;
|
|
|
+ width: 10rpx;
|
|
|
+ top: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topPaddingBg {
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttomPaddingBg {
|
|
|
+ button: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightPaddingBg {
|
|
|
+ right: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftPaddingBg {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topBageBg,
|
|
|
+ .bottomBageBg {
|
|
|
+ height: 30rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ background-color: $maxBoxBg;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topBageBg {
|
|
|
+ top: -30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomBageBg {
|
|
|
+ bottom: -30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerBox {
|
|
|
+ // background-image: linear-gradient(to bottom, #49548d 0%, transparent 100%);
|
|
|
+ background-color: rgba($color: #49548d, $alpha: 0.5);
|
|
|
+ box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5) inset;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .buttomLg {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .leftBox {
|
|
|
+ .leftCenterButtom {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background-size: 80rpx 120rpx;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .tipMen {
|
|
|
+ margin-left: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerBgBox {
|
|
|
+ flex-shrink: 1;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .borderRadiusAll {
|
|
|
+ border-radius: 1000rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgGray {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: $maxBoxBg;
|
|
|
+ width: 530rpx;
|
|
|
+ height: 530rpx;
|
|
|
+ z-index: 20;
|
|
|
+ left: -265rpx;
|
|
|
+ top: -265rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentOrg {
|
|
|
+ position: absolute;
|
|
|
+ background-color: $bgBlack;
|
|
|
+ width: 480rpx;
|
|
|
+ height: 480rpx;
|
|
|
+ left: -240rpx;
|
|
|
+ top: -240rpx;
|
|
|
+ z-index: 99;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .contentOrgBg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-color: $contentBg;
|
|
|
+ background-image: linear-gradient(to bottom, rgba($color: #454b71, $alpha: 1) 0%, transparent 25%, transparent 75%, rgba($color: #454b71, $alpha: 1) 100%);
|
|
|
+
|
|
|
+ .posbuttom {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ .centerTextBox {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topButtomTipBox {
|
|
|
+ top: 0;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomButtomTipBox {
|
|
|
+ bottom: 0;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomButtomTipBox,
|
|
|
+ .topButtomTipBox {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightButtomTipBox,
|
|
|
+ .leftButtomTipBox {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightButtomTipBox {
|
|
|
+ padding-left: 20rpx;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftButtomTipBox {
|
|
|
+ padding-right: 20rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(440rpx + 2px);
|
|
|
+ height: 20rpx;
|
|
|
+ border-top: 1px solid #b7cbf2;
|
|
|
+ border-bottom: 1px solid #b7cbf2;
|
|
|
+ border-left: 1px solid $bgBlack;
|
|
|
+ border-right: 1px solid $bgBlack;
|
|
|
+ background-color: $bgBlack;
|
|
|
+ box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5);
|
|
|
+
|
|
|
+ &.left {
|
|
|
+ transform: rotateZ(45deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ transform: rotateZ(-45deg);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerBoxJb {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ background-color: $bgBlack;
|
|
|
+ box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .boxBgJb {
|
|
|
+ background-color: $bgBlack;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .iconButtomBox {
|
|
|
+ font-size: $uni-font-size-base;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ background-color: #DEDEDE;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #F6C531;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.greedBg {
|
|
|
+ background-color: $uni-color-success;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mr {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-image: linear-gradient(to bottom, rgba($color: #FFFFFF, $alpha: 0.2) 0%, rgba($color: #FFFFFF, $alpha: 0) 50%, rgba($color: #FFFFFF, $alpha: 0) 100%);
|
|
|
+ box-shadow: 0px 0px 20rpx rgba($color: #FFFFFF, $alpha: 0.5) inset;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconButtomJb {
|
|
|
+ .img {
|
|
|
+ width: 75rpx;
|
|
|
+ height: 75rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .centerBg {
|
|
|
+ position: absolute;
|
|
|
+ left: -280rpx;
|
|
|
+ top: -280rpx;
|
|
|
+ background-color: $bgBlack;
|
|
|
+ width: 560rpx;
|
|
|
+ height: 560rpx;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .borTopHide {
|
|
|
+ top: -10rpx;
|
|
|
+ left: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .borBottomHide,
|
|
|
+ .borTopHide {
|
|
|
+ position: absolute;
|
|
|
+ height: 100rpx;
|
|
|
+ width: 316rpx;
|
|
|
+ background-color: $maxBoxBg;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .borBottomHide {
|
|
|
+ left: 120rpx;
|
|
|
+ bottom: -10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightBox {
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .rightElectric {
|
|
|
+ flex-direction: column;
|
|
|
+ padding-right: 6rpx;
|
|
|
+
|
|
|
+ .electric {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ // border-radius: 10rpx;
|
|
|
+ background-color: $maxBoxBg;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ // &:last-child{
|
|
|
+ // border-bottom-left-radius: 10rpx;
|
|
|
+ // border-bottom-right-radius: 10rpx;
|
|
|
+ // }
|
|
|
+ // &:first-child{
|
|
|
+ // border-top-left-radius: 10rpx;
|
|
|
+ // border-top-right-radius: 10rpx;
|
|
|
+ // }
|
|
|
+ &.greedBg {
|
|
|
+ background-color: $uni-color-success;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.yellowBg {
|
|
|
+ background-color: #F6C531;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.redGb {
|
|
|
+ background-color: #DE2C2C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightButtom {
|
|
|
+ position: relative;
|
|
|
+ z-index: 11;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 330rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .centerTextBox {
|
|
|
+ text-align: right;
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cartListAlertButtom {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ border-top-left-radius: 30rpx;
|
|
|
+ border-top-right-radius: 30rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ z-index: 999;
|
|
|
+ /* #ifdef H5 */
|
|
|
+ padding-bottom: var(--window-bottom);
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+ .actionCartBox {
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+
|
|
|
+ .itemCart {
|
|
|
+ background-color: #F3F6F8;
|
|
|
+ margin: 0 30rpx 30rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ background-color: $uni-color-success;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cartImg {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: $uni-font-size-base;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $uni-color-title;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ line-height: 1;
|
|
|
+ font-size: $uni-font-size-sm - 2rpx;
|
|
|
+ color: $uni-border-color;
|
|
|
+
|
|
|
+ &.action {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cartTitle {
|
|
|
+ margin: 0 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ font-size: $uni-font-size-lg;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .exit {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|