美化此页面要求只使用页内样式：<div id="control"> <p>注册</p> <div>账号：<input placeholder="请输入账号" id="username" name="username" required v-model="pass.username"></div> <div id="check1"></div> <br> <div>密码：<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"> </div> <div id="check2"></div> <!-- <button id="btn" @click="ad()">登录</button>--> <a href="login.html"> <button>登录</button> </a> <a @click="ad"> <button>注册</button> </a> </div>

<style>
#control p {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}

#username,
#password {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}

#check1,
#check2 {
height: 20px;
margin-bottom: 20px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}

a {
text-decoration: none;
}

button:hover {
background-color: #3e8e41;
}

button:active {
background-color: #3e8e41;
transform: translateY(2px);
}
</style>

<div id="control">
<p>注册</p>
<div>账号：<input placeholder="请输入账号" id="username" name="username" required v-model="pass.username"></div>
<div id="check1"></div>
<br>
<div>密码：<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"></div>
<div id="check2"></div>
<a href="login.html"><button>登录</button></a>
<a @click="ad"><button>注册</button></a>
</div>