<template>
    <div class="account">
        <el-row>
            <div class="content_title">
                <span>账户安全</span>
            </div>
        </el-row>
        <el-row style="margin-top:47px">
            <div class="row">
                <div class="one">手机号</div>
                <div class="two">已绑定手机号{{ phone }}</div>
                <div class="three" @click="$router.push({ name: 'editPhoneStep1' })">变更手机号</div>
            </div>
        </el-row>
        <el-row style="margin-top:47px">
            <div class="row">
                <div class="one">登录密码</div>
                <div class="two">已设置</div>
                <div class="three" @click="$router.push({ name: 'editPassword' })">
                    修改密码
                </div>
            </div>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'account',
    data() {
        return {};
    },
    computed: {
        phone() {
            if (this.userInfo && this.userInfo.phone) {
                return this.$http.decrypt(this.userInfo.phone);
            }
            return '';
        }
    }
};
</script>
<style lang="less" scoped>
.account {
    height: 520px;
}
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.row {
    font-size: 13px;
    display: flex;
    align-items: center;
    margin-left: 288px;
    .one {
        width: 56px;
        height: 22px;

        color: #313233;
        line-height: 22px;
        text-align: right;
        margin-right: 20px;
    }
    .two {
        width: 161px;
        height: 22px;
        color: #939599;
        line-height: 22px;
        margin-right: 30px;
    }
    .three {
        width: 65px;
        height: 18px;

        color: #bf1616;
        line-height: 18px;
        cursor: pointer;
    }
}
</style>
