<!--
 * @Author: euzhi
 * @Description: 爱车管理
-->
<template>
<view class="appCotent">
<div class="loveCar">
    <div class="love-car__title">
        我的爱车
    </div>
    <div class="love-car__list">
        <div class="love__item" v-for="(vo,inx) in 3" :key="inx">
            <div class="itme__img">
                <image src="@/static/move-car/love-car6.png" />
            </div>
            <div class="item__title">
                大众-捷达-1.4 手动 梦 想版时尚型
            </div>
            <div class="item__edit" @click="editCar">
                <image src="@/static/move-car/love-car2.png" />
            </div>
            <div class="item__del">
                <image src="@/static/move-car/love-car3.png" />
            </div>
        </div>
    </div>
    <div class="love__btn" @click="addCar">
        <image src="@/static/move-car/love-car5.png"> 添加车辆
    </div>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    methods: {
        addCar() {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/addCar'
            })
        },
        editCar() {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/editCar'
            })
        }

    },
}
</script>

<style lang="scss" scoped>
.loveCar {
    padding: 40rpx;

    .love-car__title {
        font-size: 38rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        position: relative;
        z-index: 999;
        margin-bottom: 30rpx;
    }

    .love-car__title::before {
        content: "";
        width: 76rpx;
        height: 14rpx;
        display: inline-block;
        background: url('@/static/move-car/love-car1.png') no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 7rpx;
        z-index: -1;

    }

    .love-car__list {
        margin-bottom: 60rpx;

        .love__item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
            border-radius: 20rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;

            .itme__img {
                image {
                    width: 100rpx;
                    height: 100rpx;
                }
            }

            .item__title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 48rpx;
                width: 350rpx;
            }

            .item__edit {
                image {
                    width: 32rpx;
                    height: 34rpx;
                }
            }

            .item__del {
                image {
                    width: 33rpx;
                    height: 36rpx;
                }
            }
        }
    }

    .love__btn {
        height: 76rpx;
        background: url('@/static/move-car/love-car4.png') no-repeat;
        background-size: contain;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 76rpx;
        text-align: center;

        image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;

        }
    }
}
</style>
