From 7e8c5da59307646df76769164be804cbd6f25390 Mon Sep 17 00:00:00 2001 From: Kane Wang Date: Tue, 15 Nov 2022 17:56:34 +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 | 47 ---------- code/web/car_dealer/css/表单/表单.css | 55 +++++++++++ code/web/car_dealer/vue/keypath.html | 6 +- code/web/car_dealer/vue/表单.html | 108 +++++++++++++++------- 4 files changed, 132 insertions(+), 84 deletions(-) create mode 100644 code/web/car_dealer/css/表单/表单.css diff --git a/code/web/car_dealer/css/app.css b/code/web/car_dealer/css/app.css index 15aa805..543bd4d 100644 --- a/code/web/car_dealer/css/app.css +++ b/code/web/car_dealer/css/app.css @@ -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; -} diff --git a/code/web/car_dealer/css/表单/表单.css b/code/web/car_dealer/css/表单/表单.css new file mode 100644 index 0000000..0b74831 --- /dev/null +++ b/code/web/car_dealer/css/表单/表单.css @@ -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%; +} diff --git a/code/web/car_dealer/vue/keypath.html b/code/web/car_dealer/vue/keypath.html index b4ca498..b56c715 100644 --- a/code/web/car_dealer/vue/keypath.html +++ b/code/web/car_dealer/vue/keypath.html @@ -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 @@ keypath测试 - + +
a
b
c
+ - + + + + +