保存进度！

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

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);
+}

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

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;