保存进度！
This commit is contained in:
parent
d249fdd576
commit
7e8c5da593
|
|
@ -30,50 +30,3 @@ body {
|
|||
margin: 0px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#app {
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: 4rem auto;
|
||||
/* grid-template-rows: repeat(3, 1.5rem); */
|
||||
grid-auto-rows: 1.5rem;
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
|
||||
#app > * + * {
|
||||
/* margin-top: 15px; */
|
||||
}
|
||||
|
||||
.grid-left {
|
||||
display: inline-block;
|
||||
grid-column: 1/2;
|
||||
/* place-self: end; */
|
||||
text-align: right;
|
||||
place-items: right center;
|
||||
}
|
||||
|
||||
.grid-right {
|
||||
display: inline-block;
|
||||
grid-column: 2/3;
|
||||
place-items: left center;
|
||||
}
|
||||
|
||||
.grid-firstname {
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.grid-lastname {
|
||||
grid-row: 2/3;
|
||||
}
|
||||
|
||||
.grid-sex {
|
||||
grid-row: 3/4;
|
||||
}
|
||||
|
||||
/* .grid-left p {
|
||||
text-align: right;
|
||||
} */
|
||||
|
||||
.grid-right div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* @Author: Kane
|
||||
* @Date: 2022-11-14 10:50:51
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-14 11:44:15
|
||||
* @FilePath: \car_dealer\css\表单\表单.css
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
*/
|
||||
|
||||
@import url("../colors.css");
|
||||
|
||||
#app {
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: 4rem auto;
|
||||
/* grid-template-rows: repeat(3, 1.5rem); */
|
||||
grid-auto-rows: 2rem;
|
||||
grid-gap: 0.5rem;
|
||||
place-items: center center;
|
||||
}
|
||||
|
||||
#app > * + * {
|
||||
/* margin-top: 15px; */
|
||||
}
|
||||
|
||||
.grid-left {
|
||||
/* display: inline-block; */
|
||||
/* grid-column: 1/2; */
|
||||
/* place-self: end; */
|
||||
text-align: right;
|
||||
line-height: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-left + input {
|
||||
height: 1.8rem;
|
||||
width: 100%;
|
||||
outline-color: #f4f5f7;
|
||||
border: 1px solid #f4f5f7;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.grid-left + input:focus {
|
||||
outline: 2px solid #e56651;
|
||||
}
|
||||
|
||||
.cell-gender {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Kane
|
||||
* @Date: 2022-11-02 11:22:37
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-03 14:44:57
|
||||
* @LastEditTime: 2022-11-07 16:45:06
|
||||
* @FilePath: \car_dealer\vue\keypath.html
|
||||
* @Description:
|
||||
*
|
||||
|
|
@ -18,7 +18,9 @@
|
|||
<title>keypath测试</title>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
<body>
|
||||
<div>a<div>b</div>c</div>
|
||||
</body>
|
||||
<script>
|
||||
const keypathReg = /[^\w.$]/;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Kane
|
||||
* @Date: 2022-11-12 23:21:53
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-11-14 07:33:52
|
||||
* @LastEditTime: 2022-11-14 16:25:35
|
||||
* @FilePath: \car_dealer\vue\表单.html
|
||||
* @Description:
|
||||
*
|
||||
|
|
@ -10,41 +10,79 @@
|
|||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>表单</title>
|
||||
<link rel="stylesheet" href="../css/root.css">
|
||||
<link rel="stylesheet" href="../css/normalize.css">
|
||||
<link rel="stylesheet" href="../css/button.css">
|
||||
<link rel="stylesheet" href="../css/app.css">
|
||||
<link rel="stylesheet" href="../css/root.css" />
|
||||
<link rel="stylesheet" href="../css/normalize.css" />
|
||||
<link rel="stylesheet" href="../css/button.css" />
|
||||
<link rel="stylesheet" href="../css/app.css" />
|
||||
<link rel="stylesheet" href="../css/表单/表单.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="app">
|
||||
<div class="grid-left grid-firstname">
|
||||
<p>姓：</p>
|
||||
</div>
|
||||
<div class="grid-right grid-firstname"><input type="text" placeholder=""></div>
|
||||
<div class="grid-left grid-lasttname">
|
||||
<p>名：</p>
|
||||
</div>
|
||||
<div class="grid-right grid-lasttname"><input type="text"></div>
|
||||
|
||||
<div class="grid-left grid-sex">
|
||||
<p>性别：</p>
|
||||
</div>
|
||||
<div class="grid-right grid-sex"><input type="radio" name="sex" id="male" value="male"><label
|
||||
for="male">男</label>
|
||||
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
|
||||
<p class="grid-left">用户名：</p>
|
||||
<input
|
||||
class="grid-right"
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="account.username"
|
||||
/>
|
||||
<p class="grid-left">密码：</p>
|
||||
<input type="password" v-model="account.password" />
|
||||
<p class="grid-left">性别：</p>
|
||||
<div class="cell-gender">
|
||||
<input
|
||||
type="radio"
|
||||
name="gender"
|
||||
id="male"
|
||||
value="male"
|
||||
v-model="account.gender"
|
||||
/><label for="male">男</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="gender"
|
||||
id="female"
|
||||
value="female"
|
||||
v-model="account.gender"
|
||||
/><label for="female">女</label>
|
||||
</div>
|
||||
<p class="grid-left">年龄：</p>
|
||||
<input type="number" v-model.number="account.age" />
|
||||
<p class="grid-left">水果：</p>
|
||||
<select name="fruit" id="fruit" v-model="account.fruits">
|
||||
<option disabled value="">喜欢的水果</option>
|
||||
<option v-for="fruit in fruits" v-bind:value="fruit">
|
||||
{{fruit}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../js/vue/vue.global.js"></script>
|
||||
<script></script>
|
||||
<script src="../js/axios/1.1.3/axios.js"></script>
|
||||
<script>
|
||||
const app = {
|
||||
data() {
|
||||
return {
|
||||
account: {
|
||||
username: "",
|
||||
password: "",
|
||||
gender: "",
|
||||
age: "",
|
||||
hobbies: [],
|
||||
fruits: "",
|
||||
},
|
||||
fruits: ["香蕉", "梨子", "苹果"],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const vm = Vue.createApp(app);
|
||||
vm.mount("#app");
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue