From cdda49370f97fe8407080c5ebf8572242239c764 Mon Sep 17 00:00:00 2001 From: Kane Date: Sun, 13 Nov 2022 00:31:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- code/web/car_dealer/css/app.css | 69 +++++++++++++++++++++++++++++ code/web/car_dealer/css/button.css | 34 ++++++++++++++ code/web/car_dealer/css/colors.css | 19 ++++++++ code/web/car_dealer/css/kane.css | 31 +------------ code/web/car_dealer/vue/表单.html | 48 ++++++++++++++++++++ 5 files changed, 171 insertions(+), 30 deletions(-) create mode 100644 code/web/car_dealer/css/app.css create mode 100644 code/web/car_dealer/css/button.css create mode 100644 code/web/car_dealer/css/colors.css create mode 100644 code/web/car_dealer/vue/表单.html diff --git a/code/web/car_dealer/css/app.css b/code/web/car_dealer/css/app.css new file mode 100644 index 0000000..65ad86b --- /dev/null +++ b/code/web/car_dealer/css/app.css @@ -0,0 +1,69 @@ +/* + * @Author: Kane + * @Date: 2022-11-12 23:32:20 + * @LastEditors: Kane + * @LastEditTime: 2022-11-13 00:30:43 + * @FilePath: \car_dealer\css\app.css + * @Description: + * + * Copyright (c) ${2022} by Kane, All Rights Reserved. + */ +@import url("colors.css"); + +#root, +#app { + width: 100%; +} + +body { + background-color: var(--backupground-color); + padding: 50px; +} + +.content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #fff; + width: 25rem; + margin: 0px auto; + border-radius: 5px; +} + +#app { + padding: 15px; + display: grid; + grid-template-columns: 4rem auto; + grid-template-rows: repeat(3, 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; +} + +.grid-right { + display: inline-block; + grid-column: 2/3; + place-self: start; +} + +.grid-firstname { + grid-row: 1/2; +} + +.grid-lastname { + grid-row: 2/3; +} + +.grid-sex { + grid-row: 3/4; +} diff --git a/code/web/car_dealer/css/button.css b/code/web/car_dealer/css/button.css new file mode 100644 index 0000000..b844c47 --- /dev/null +++ b/code/web/car_dealer/css/button.css @@ -0,0 +1,34 @@ +/* + * @Author: Kane + * @Date: 2022-11-12 23:20:29 + * @LastEditors: Kane + * @LastEditTime: 2022-11-12 23:45:27 + * @FilePath: \car_dealer\css\button.css + * @Description: + * + * Copyright (c) ${2022} by Kane, All Rights Reserved. + */ +@import url("colors.css"); + +button { + padding: 5px 10px; + background-color: var(--btn-color-red); + color: var(--btn-font-color); + width: 10em; + border: none; + border-radius: 0.25em; + font-size: 1.5rem; + text-align: center; + -webkit-user-select: none; + user-select: none; +} + +button:hover { + cursor: pointer; +} + +/* 用于按钮点击时样式切换。 */ +button:active { + background-color: var(--btn-font-color); + color: var(--btn-color-red); +} diff --git a/code/web/car_dealer/css/colors.css b/code/web/car_dealer/css/colors.css new file mode 100644 index 0000000..a904fd8 --- /dev/null +++ b/code/web/car_dealer/css/colors.css @@ -0,0 +1,19 @@ +/* + * @Author: Kane + * @Date: 2022-11-12 23:22:59 + * @LastEditors: Kane + * @LastEditTime: 2022-11-12 23:23:29 + * @FilePath: \car_dealer\css\colors.css + * @Description: + * + * Copyright (c) ${2022} by Kane, All Rights Reserved. + */ + +html { + --backupground-color: #f4f5f7ff; + --btn-color-blue: #307dbe; + --btn-color-yellow: #f7b24d; + --btn-color-green: #5bad60; + --btn-color-red: #e56651; + --btn-font-color: #fff; +} diff --git a/code/web/car_dealer/css/kane.css b/code/web/car_dealer/css/kane.css index e44bbda..63ac4c5 100644 --- a/code/web/car_dealer/css/kane.css +++ b/code/web/car_dealer/css/kane.css @@ -2,7 +2,7 @@ * @Author: Kane * @Date: 2022-10-12 08:49:14 * @LastEditors: Kane - * @LastEditTime: 2022-11-03 23:46:05 + * @LastEditTime: 2022-11-12 23:34:06 * @FilePath: \car_dealer\css\kane.css * @Description: vue学习用的样式表！ * @@ -23,12 +23,6 @@ html { padding: 50px; } -/* #root, -#app * + * { - margin-top : 15px; - text-align : center; -} */ - .content { display: flex; flex-direction: column; @@ -50,29 +44,6 @@ hr { overflow : auto; } */ -button { - padding: 5px 10px; - background-color: var(--btn-color-red); - color: var(--btn-font-color); - width: 10em; - border: none; - border-radius: 0.25em; - font-size: 1.5rem; - text-align: center; - -webkit-user-select: none; - user-select: none; -} - -button:hover { - cursor: pointer; -} - -/* 用于按钮点击时样式切换。 */ -button:active { - background-color: var(--btn-font-color); - color: var(--btn-color-red); -} - input[type="text"] { border: none; outline: solid 2px #e56651; diff --git a/code/web/car_dealer/vue/表单.html b/code/web/car_dealer/vue/表单.html new file mode 100644 index 0000000..a5cb8df --- /dev/null +++ b/code/web/car_dealer/vue/表单.html @@ -0,0 +1,48 @@ + + + + + + + + + 表单 + + + + + + + +
+
+
+

姓：

+
+
+
+

名：

+
+
+ +
+

性别：

+
+
+ +
+
+
+ + + \ No newline at end of file