<template>
<view class="appCotent">
<div class="oneMoveCar">
    <div class="contentMoveCar">
        <div class="car_item__one">
            <div class="item__label item__label__one">
                车牌号：
            </div>
            <div class="item__content">
                京A123G63
            </div>
        </div>
        <div class="car_item__two">
            <div class="item__label">
                当前位置:
            </div>
            <div class="item__value">
                北京市朝阳区爱琴海停车场
                <div class="item__icon">
                    <image src="@/static/move-car/move-car-code1.png" />
                </div>
            </div>
        </div>
        <div class="car_item__three">
            我的车辆如果阻碍了您的爱车的通行，请点击下方按钮通知我，给您造成的不便敬请谅解！！！
        </div>
    </div>
    <div class="moveCarMsg">
        <div class="move-car__tips">
            点击下方按钮联系车主
        </div>
        <div class="move-car__btn" @click="call">
            拨打车主电话通知
        </div>
        <div class="move-car__wx">
            <u-checkbox-group  placement="row">
                <u-checkbox  v-model="checked"></u-checkbox>
            </u-checkbox-group> 微信通知(上限3次)
        </div>
        <div class="move-car__more">
            <div>
                获取同款挪车牌
                <span>
                    <image src="@/static/move-car/move-car-code2.png">
                </span>
            </div>
            <div class="center__shu">
                <image src="@/static/move-car/move-car-code3.png">
            </div>
            <div @click="goMyCar">
                查看我的挪车牌
                <span>
                    <image src="@/static/move-car/move-car-code2.png">
                </span>
            </div>
        </div>
    </div>
    	<u-action-sheet :actions="list" @close='close'  closeOnClickOverlay  round='6' :show="show"></u-action-sheet>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {
            show:false,
			list: [
                	{
					name:'2367虚拟号码345',
                    color:'#333333',
                    fontSize:'20',
				},
				{
					name:'呼叫',
                    color:'#3A86F7',
                    fontSize:'18',
				},
                	{
					name:'取消',
                    color:'#E6271D',
                    fontSize:'18',
				},
			],
            checked:false,
        }
    },
    methods: {
        call() {
            this.show = true;
        },
        close() {
            this.show = false;
        },
        selectClick(index){
			console.log(index)
		},
        goMyCar() {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/myMoveCar'
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.oneMoveCar {

    .u-checkbox-group {
        display: inline-block !important;
    }
    /deep/.u-checkbox-group--row {
        display: inline-block !important;
    }

    .contentMoveCar {

        padding: 40rpx;

        .item__label {
            font-size: 34rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 42rpx;
        }

        .item__label__one {
            padding-right: 34rpx;
        }

        .item__content {
            width: 500rpx;
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #F1251B;
            line-height: 42rpx;
            text-align: center;
            line-height: 100rpx;
            height: 100rpx;
            background: url(@/static/move-car/move-car-code5.png) no-repeat;
            background-size: contain;
        }

        .item__value {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 100rpx;
            width: 500rpx;
            height: 70rpx;
            background: url(@/static/move-car/move-car-code4.png) no-repeat;
            background-size: contain;
            line-height: 70rpx;
            text-indent: .5em;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .car_item__one {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
        }

        .car_item__two {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item__icon {

                padding-right: 40rpx;

                image {
                    width: 11rpx;
                    height: 18rpx;
                }
            }
        }

        .car_item__three {
            margin-top: 40rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #F88D28;
            line-height: 36rpx;
            text-indent: 2em;
            padding: 30rpx;
            box-sizing: border-box;
            background: url(@/static/move-car/move-car-code6.png) no-repeat;
            background-size: contain;
        }
    }

    .moveCarMsg {
        height: 454rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 32rpx 40rpx;
        position: relative;
        top: -56rpx;

        .move-car__tips {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 39rpx;
            text-align: center;
        }

        .move-car__btn {
            text-align: center;
            width: 400rpx;
            height: 76rpx;
            border-radius: 8rpx;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 76rpx;
            background: url(@/static/move-car/move-car-code7.png) no-repeat;
            background-size: contain;
            margin: 100rpx auto 30rpx auto;

        }

        .move-car__wx {

            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 42rpx;
            text-align: center;
            margin-bottom: 100rpx;
        }

        .move-car__more {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #F88D28;
            line-height: 42rpx;
            display: flex;
            justify-content: space-between;

            .center__shu {
                image {
                    width: 3rpx;
                    height: 27rpx;
                }
            }

            span {
                padding-left: 20rpx;

                image {
                    width: 11rpx;
                    height: 18rpx;
                }
            }
        }
    }
}
</style>
