用css美化以下这个注册页面 <div> <h3 class="title">注册</h3> <form method="post"> <div> <input type="email" v-model="email" id="email" placeholder="请输入邮箱账号"> </div> <div> <input type="password" v-model="password" id="password" placeholder="设置密码"> </div> <div> <input type="password" v-model="passwordRepeat" id="passwordRepeat" placeholder="确认密码"> </div> <div> <input type="text" v-model="tel" id="tel" placeholder="请输入手机号"> </div> </form> <div> <input id="reader-me" type="checkbox" v-model="checked"> 点击表示您同意商城《服务协议》 </div> <div> <input type="submit" name="" :disabled="!checked" @click="mr_verify" value="注册"> </div> </div>

好的，这里是一个简单的样式设计，你可以根据需要进行修改：

<style>
    body {
        background-color: #f2f2f2;
    }
    .title {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
    }
    form {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }
    input {
        display: block;
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: none;
        border-radius: 5px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    }
    input[type="submit"] {
        background-color: #ff6700;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: #ff8c00;
    }
    #reader-me {
        margin-right: 10px;
        vertical-align: middle;
    }
    #reader-me + label {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<div>
    <h3 class="title">注册</h3>
    <form method="post">
        <div>
            <input type="email" v-model="email" id="email" placeholder="请输入邮箱账号">
        </div>
        <div>
            <input type="password" v-model="password" id="password" placeholder="设置密码">
        </div>
        <div>
            <input type="password" v-model="passwordRepeat" id="passwordRepeat" placeholder="确认密码">
        </div>
        <div>
            <input type="text" v-model="tel" id="tel" placeholder="请输入手机号">
        </div>
        <div>
            <input id="reader-me" type="checkbox" v-model="checked">
            <label for="reader-me">点击表示您同意商城《服务协议》</label>
        </div>
        <div>
            <input type="submit" name="" :disabled="!checked" @click="mr_verify" value="注册">
        </div>
    </form>
</div>