首页

src/assets/css/style.css

@@ -111,3 +111,28 @@ body,
   background-position: 50% 50%;
   background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
+button[custom],
+button[custom="white"] {
+  min-width: 19.4rem;
+  height: 5rem;
+  padding: 0 1rem;
+  border-radius: 0;
+  border: none;
+  font-family: KaiseiOpti-Bold;
+  font-size: var(--button-font-size, 2rem);
+  color: var(--button-color, #232323);
+  background: var(--button-bgcolor, #fff);
+  cursor: pointer;
+}
+button[custom]:active,
+button[custom="white"]:active {
+  background: var(--button-click-bgcolor, #e4e4e4);
+  color: var(--button-click-color, #232323);
+}
+button[custom="black"] {
+  --button-bgcolor: #232323;
+  --button-color: #fff;
+  --button-click-bgcolor: #333;
+  --button-click-color: #fff;
+  --button-font-size: 1.6rem;
+}

src/assets/css/style.less

@@ -88,22 +88,31 @@ body,
 }
 
 .el-overlay {
-	--el-color-primary: #ff7a51;              // 主橙红色
-	--el-color-primary-light-3: #ffa785;       // 较浅的橙红（混合20%白）
-	--el-color-primary-light-5: #ffc2aa;       // 更浅的橙红（混合33%白）
-	--el-color-primary-light-7: #ffddcf;       // 浅橙红（混合47%白）
-	--el-color-primary-light-8: #ffe8df;       // 很浅的橙红（混合53%白）
-	--el-color-primary-light-9: #fff2ec;       // 极浅的橙红（混合60%白）
-	--el-color-primary-dark-2: #cc6241;        // 深橙红（加深20%）
+	--el-color-primary: #ff7a51; // 主橙红色
+	--el-color-primary-light-3: #ffa785; // 较浅的橙红（混合20%白）
+	--el-color-primary-light-5: #ffc2aa; // 更浅的橙红（混合33%白）
+	--el-color-primary-light-7: #ffddcf; // 浅橙红（混合47%白）
+	--el-color-primary-light-8: #ffe8df; // 很浅的橙红（混合53%白）
+	--el-color-primary-light-9: #fff2ec; // 极浅的橙红（混合60%白）
+	--el-color-primary-dark-2: #cc6241; // 深橙红（加深20%）
 }
-.el-select, .el-popper{
-	--el-color-primary: #6c6c6c;                    /* 主灰色 */
-	--el-color-primary-light-3: #8a8a8a;            /* 较浅的灰色（混合20%白） */
-	--el-color-primary-light-5: #a8a8a8;            /* 更浅的灰色（混合33%白） */
-	--el-color-primary-light-7: #c6c6c6;            /* 浅灰色（混合47%白） */
-	--el-color-primary-light-8: #d4d4d4;            /* 很浅的灰色（混合53%白） */
-	--el-color-primary-light-9: #e3e3e3;            /* 极浅的灰色（混合60%白） */
-	--el-color-primary-dark-2: #565656;             /* 深灰色（加深20%） */
+
+.el-select,
+.el-popper {
+	--el-color-primary: #6c6c6c;
+	/* 主灰色 */
+	--el-color-primary-light-3: #8a8a8a;
+	/* 较浅的灰色（混合20%白） */
+	--el-color-primary-light-5: #a8a8a8;
+	/* 更浅的灰色（混合33%白） */
+	--el-color-primary-light-7: #c6c6c6;
+	/* 浅灰色（混合47%白） */
+	--el-color-primary-light-8: #d4d4d4;
+	/* 很浅的灰色（混合53%白） */
+	--el-color-primary-light-9: #e3e3e3;
+	/* 极浅的灰色（混合60%白） */
+	--el-color-primary-dark-2: #565656;
+	/* 深灰色（加深20%） */
 }
 
 
@@ -112,13 +121,14 @@ body,
 	&::-webkit-scrollbar {
 		width: 0.4rem;
 	}
+
 	&::-webkit-scrollbar-thumb {
 		border-radius: 0.4rem;
 		background: rgba(0, 0, 0, 0.2);
 	}
 }
 
-.mosaic-bg{
+.mosaic-bg {
 	--mosaic-bg-size: 1rem;
 	--mosaic-bg-color1: #efefef;
 	--mosaic-bg-color2: #fff;
@@ -126,4 +136,33 @@ body,
 	background-repeat: repeat;
 	background-position: 50% 50%;
 	background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
+}
+
+
+// 自定义button按钮
+button[custom],
+button[custom="white"] {
+	min-width: 19.4rem;
+	height: 5rem;
+	padding: 0 1rem;
+	border-radius: 0;
+	border: none;
+	font-family: KaiseiOpti-Bold;
+	font-size: var(--button-font-size, 2rem);
+	color: var(--button-color, #232323);
+	background: var(--button-bgcolor, #fff);
+	cursor: pointer;
+
+	&:active {
+		background: var(--button-click-bgcolor, #e4e4e4);
+		color: var(--button-click-color, #232323);
+	}
+}
+
+button[custom="black"] {
+	--button-bgcolor: #232323;
+	--button-color: #fff;
+	--button-click-bgcolor: #333;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
 }

src/assets/icons/arrow_right.svg

@@ -0,0 +1,4 @@
+<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.998359 12.0798L24.1266 12.0798" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1094 1.0332L25.3052 12.2291L14.0357 23.2039" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>