From 5018eefddb92af063bc4f8d45790a4950ec1cef7 Mon Sep 17 00:00:00 2001
From: Zhao Xin <7176466@qq.com>
Date: Fri, 5 Aug 2022 01:12:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=95=8C=E9=9D=A2=E5=B8=83?=
=?UTF-8?q?=E5=B1=80=E3=80=81=E6=A3=8B=E5=AD=90=E6=A0=B7=E5=BC=8F=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/index.html | 55 ++++++++++++++++++++++++++++---
public/style.css | 83 +++++++++++++++++++++++++++++++++++++++++++----
2 files changed, 128 insertions(+), 10 deletions(-)
diff --git a/public/index.html b/public/index.html
index ed8265c..eeed98b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,14 +5,61 @@
+
+
+
- 陆战棋游戏
+ 陆战棋
- 陆战棋游戏
-
-
+
diff --git a/public/style.css b/public/style.css
index 280f266..772e6fe 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,13 +1,84 @@
-button {
- padding: 0.5rem;
- color: lightgray;
- cursor: pointer;
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+ font-family: 'Noto Serif SC', serif;
+}
+
+body {
+ width: 1280px;
+ padding: 1rem;
+ margin: 0 auto;
+ background-color: #6a6;
+}
+
+#game {
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+}
+
+#gameboard {
+ width: 982px;
+ height: 1248px;
+ background-image: url(board.png);
+}
+
+#sidebar {
+}
+
+#display {
+ width: 240px;
+ height: 440px;
+ color: #030;
+ display: flex;
+ flex-flow: column;
+ gap: 20px;
+}
+
+#buttons-container,
+#pieces-container {
+ width: 240px;
+ padding: 20px;
+ gap: 20px;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+ border: 4px #363 dashed;
}
.player1 {
- color: black;
+ color: #333;
}
.player2 {
- color: red;
+ color: #833;
+}
+
+button,
+.piece {
+ width: 80px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 24px;
+ font-weight: 900;
+ border-radius: 4px;
+ border: double 3px black;
+ text-shadow: 0 1px 0px white;
+ box-shadow: 1px 1px 2px black;
+ background: linear-gradient(to bottom, #fff, #ccc, #ddd);
+}
+
+.title {
+ width: 80px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: 900;
}