<template>
	<div class="app-content">
		<div class="module-com">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">旧密码</div>
				<input placeholder-class="phcolor" class="tui-input" name="name" placeholder="首次设置不需要填写" maxlength="50" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">密码</div>
				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入密码" maxlength="50" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">确认密码</div>
				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入确认密码" maxlength="50" type="number" />
			</tui-list-cell>
            <div class="prompt-text">提示：余额支付时需要用到支付密码</div>
            <div class="btn-wrap">
			    <button class="button-com red big">确认</button>
            </div>
		</div>
	</div>
</template>

<script>
import tuiListCell from '@/components/plugin/list-cell'
export default {
	name: 'password',
	components: {
		tuiListCell
	},
	data() {
		return {}
	}
}
</script>

<style lang="scss" scoped>
	// 公共
	.line-cell {
		.tui-title {
			width: 210px;
			color: $fontColor2;
		}
		.tui-input {
			width: calc(100% - 210px);
			font-size: 28px;
		}
		.tui-placeholder {
			color: #ccc;
		}
		.phcolor {
			color: #ccc;
		}
    }
    .prompt-text {
        color: $fontColor3;
        margin-top: 20px;
        margin-left: 30px;
    }
    .btn-wrap {
        width: 90%;
        margin: 60px auto;
        .button-com {
            width: 100%;
            margin: 0 auto;
        }
    }
</style>
