保存进度！
This commit is contained in:
parent
d249fdd576
commit
7e8c5da593
|
|
@ -30,50 +30,3 @@ body {
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
border-radius: 5px;
|
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
|
* @Author: Kane
|
||||||
* @Date: 2022-11-02 11:22:37
|
* @Date: 2022-11-02 11:22:37
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-11-03 14:44:57
|
* @LastEditTime: 2022-11-07 16:45:06
|
||||||
* @FilePath: \car_dealer\vue\keypath.html
|
* @FilePath: \car_dealer\vue\keypath.html
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
|
|
@ -18,7 +18,9 @@
|
||||||
<title>keypath测试</title>
|
<title>keypath测试</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body></body>
|
<body>
|
||||||
|
<div>a<div>b</div>c</div>
|
||||||
|
</body>
|
||||||
<script>
|
<script>
|
||||||
const keypathReg = /[^\w.$]/;
|
const keypathReg = /[^\w.$]/;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-11-12 23:21:53
|
* @Date: 2022-11-12 23:21:53
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-11-14 07:33:52
|
* @LastEditTime: 2022-11-14 16:25:35
|
||||||
* @FilePath: \car_dealer\vue\表单.html
|
* @FilePath: \car_dealer\vue\表单.html
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
|
|
@ -10,41 +10,79 @@
|
||||||
-->
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>表单</title>
|
<title>表单</title>
|
||||||
<link rel="stylesheet" href="../css/root.css">
|
<link rel="stylesheet" href="../css/root.css" />
|
||||||
<link rel="stylesheet" href="../css/normalize.css">
|
<link rel="stylesheet" href="../css/normalize.css" />
|
||||||
<link rel="stylesheet" href="../css/button.css">
|
<link rel="stylesheet" href="../css/button.css" />
|
||||||
<link rel="stylesheet" href="../css/app.css">
|
<link rel="stylesheet" href="../css/app.css" />
|
||||||
|
<link rel="stylesheet" href="../css/表单/表单.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="grid-left grid-firstname">
|
<p class="grid-left">用户名：</p>
|
||||||
<p>姓：</p>
|
<input
|
||||||
</div>
|
class="grid-right"
|
||||||
<div class="grid-right grid-firstname"><input type="text" placeholder=""></div>
|
type="text"
|
||||||
<div class="grid-left grid-lasttname">
|
placeholder=""
|
||||||
<p>名：</p>
|
v-model="account.username"
|
||||||
</div>
|
/>
|
||||||
<div class="grid-right grid-lasttname"><input type="text"></div>
|
<p class="grid-left">密码：</p>
|
||||||
|
<input type="password" v-model="account.password" />
|
||||||
<div class="grid-left grid-sex">
|
<p class="grid-left">性别：</p>
|
||||||
<p>性别：</p>
|
<div class="cell-gender">
|
||||||
</div>
|
<input
|
||||||
<div class="grid-right grid-sex"><input type="radio" name="sex" id="male" value="male"><label
|
type="radio"
|
||||||
for="male">男</label>
|
name="gender"
|
||||||
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
|
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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script src="../js/vue/vue.global.js"></script>
|
<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>
|
</html>
|
||||||
Loading…
Reference in New Issue