<template>
    <!-- 顶部导航栏 -->
    <div class="content">
        <div class="consignment_title">寄售上架</div>
        <div class="consignment_tip">交易成功后该藏品将会被转移</div>
        <div class="consignment_set_price">1.设置价格(元）</div>
        <van-cell-group inset>
            <van-field v-model="number" type="number" placeholder="请输入价格"/>
        </van-cell-group>
        <div class="transaction_password">
            <div class="transaction_password_title">2.请输入交易密码</div>
            <div class="transaction_password_forget">
                忘记密码
                <van-divider />
            </div>
        </div>
        <!-- 密码输入框 -->
        <van-password-input
        :value="value"
        :focused="showKeyboard"
        :gutter="16"
        @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
        />
    </div>
    <div class="consignment_confirmation">
        <div class="consignment_confirmation_left">取消</div>
        <div class="consignment_confirmation_right">确认</div>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const value = ref('');
        const showKeyboard = ref(false);
        return{
            value,
            showKeyboard,
        }
        }
}
</script>

<style lang="less" scoped>
    .navBar{
        width: 100%;
        height: 44px;
    }
    .content{
        margin-top: 44px;
        width: 100%;
        height: 100%;
        position: absolute;
        background: #0A0A1B;
        padding: 16px;
        box-sizing: border-box;
        .consignment_title{
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 6px;
        }
        .consignment_tip{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            margin-bottom: 20px;
        }
        .consignment_set_price{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            margin-bottom: 10px;
        }
        /deep/ .van-cell-group{
            margin: 0;
        }
        /deep/ .van-cell{
            background: #29293F;
            border-radius: 8px;
            margin-bottom: 20px;
            .van-field__control{
                color: #ffffff;
            }
        }
        .transaction_password{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .transaction_password_title{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
            .transaction_password_forget{
                width: 48px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
            }
        }
        .van-password-input{
            margin: 0;
            /deep/ .van-password-input__security li{
                width: 44px;
                height: 44px;
                background: #29293F;
                border-radius: 8px;
                color: #ffffff;
            }
        }
    }
    .consignment_confirmation{
        width: 100%;
        height: 56px;
        background: #15152D;
        position: fixed;
        bottom: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
         text-align: center;
        .consignment_confirmation_left{
            width: 164px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid #28B6FF;
            color: #28B6FF;
            line-height: 40px;
        }
        .consignment_confirmation_right{
            width: 164px;
            height: 40px;
            background: #28B6FF;
            border-radius: 8px;
            color: #FFFFFF;
            line-height: 40px;
        }
    }
</style>