<template>
    <!-- 顶部导航栏 -->
    <van-nav-bar class="navBar" :fixed="true">
            <template #left>
                <div @click="$router.go(-1)">
                    <van-icon name="cross" size="18" color="#333333"/>
                </div>
            </template>
            <template #right>
                <van-icon name="ellipsis" size="18" color="#333333"/>
            </template>
    </van-nav-bar>
    <div class="content">
        <div class="account_security">账户安全</div>
        <div class="modify_list" v-for="(item,index) in modifyList" :key="index">
            <div class="modify_list_title">{{item.title}}</div>
            <img :src="item.img" alt="" class="modify_list_img">
        </div>
        <div class="log_out">
            <div class="log_out_con">退出登录</div>
        </div>
        <div class="cancellation_of_account">注销账户</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            modifyList: [
                {
                    title: "修改登录密码",
                    img: require('@assets/icon_inter.png')
                },
                {
                    title: "修改支付密码",
                    img: require('@assets/icon_inter.png')
                },
                {
                    title: "修改手机号",
                    img: require('@assets/icon_inter.png')
                }
            ]
        }
    }
};
</script>

<style lang="less" scoped>
    .navBar{
        width: 100%;
        height: 44px;
    }
    .content{
        margin-top: 44px;
        padding: 16px 10px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: absolute;
        background: @bg;
        .account_security{
            margin-left: 6px;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 20px;
        }
        .modify_list{
            height: 52px;
            background: #29293F;
            border-radius: 8px;
            padding: 14px 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .modify_list_title{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                margin-top: 4px;
            }
            .modify_list_img{
                width: 24px;
                height: 24px;
            }
        }
        .log_out{
            margin-top: 90px;
            padding: 0 58px;
            box-sizing: border-box;
            margin-bottom: 264px;
            .log_out_con{
                height: 40px;
                border-radius: 8px;
                border: 1px solid #939599;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #939599;
                line-height: 40px;
                text-align: center;
            }
        }
        .cancellation_of_account{
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #939599;
            text-align: center;
        }
    }
</style>
