CPICXIM/car_deal_util
CPICXIM
/
car_deal_util
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

保存进度！

This commit is contained in:
Kane Wang 2022-11-15 17:56:34 +08:00
parent d249fdd576
commit 7e8c5da593
4 changed files with 132 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
code/web/car_dealer/css/app.css
View File

@ -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;
}

55
code/web/car_dealer/css/表单/表单.css Normal file
View File

@ -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%;
}

6
code/web/car_dealer/vue/keypath.html
View File

@ -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.$]/;

108
code/web/car_dealer/vue/表单.html
View File

@ -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>
<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/表单/表单.css" />
</head>
<head> <body>
<meta charset="UTF-8"> <div class="content">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <div id="app">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <p class="grid-left">用户名：</p>
<title>表单</title> <input
<link rel="stylesheet" href="../css/root.css"> class="grid-right"
<link rel="stylesheet" href="../css/normalize.css"> type="text"
<link rel="stylesheet" href="../css/button.css"> placeholder=""
<link rel="stylesheet" href="../css/app.css"> v-model="account.username"
</head> />
<p class="grid-left">密码：</p>
<body> <input type="password" v-model="account.password" />
<div class="content"> <p class="grid-left">性别：</p>
<div id="app"> <div class="cell-gender">
<div class="grid-left grid-firstname"> <input
<p>姓：</p> type="radio"
</div> name="gender"
<div class="grid-right grid-firstname"><input type="text" placeholder=""></div> id="male"
<div class="grid-left grid-lasttname"> value="male"
<p>名：</p> v-model="account.gender"
</div> /><label for="male">男</label>&nbsp;
<div class="grid-right grid-lasttname"><input type="text"></div> <input
type="radio"
<div class="grid-left grid-sex"> name="gender"
<p>性别：</p> id="female"
</div> value="female"
<div class="grid-right grid-sex"><input type="radio" name="sex" id="male" value="male"><label v-model="account.gender"
for="male">男</label> /><label for="female">女</label>
<input type="radio" name="sex" id="female" value="female"><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>
</div> </div>
</div> </body>
</body> <script src="../js/vue/vue.global.js"></script>
<script src="../js/vue/vue.global.js"></script> <script src="../js/axios/1.1.3/axios.js"></script>
<script></script> <script>
const app = {
data() {
return {
account: {
username: "",
password: "",
gender: "",
age: "",
hobbies: [],
fruits: "",
},
fruits: ["香蕉", "梨子", "苹果"],
};
},
};
</html> const vm = Vue.createApp(app);
vm.mount("#app");
</script>
</html>