From 603f910e8b60d38ec66f5e5c1ded8ef874b45a83 Mon Sep 17 00:00:00 2001
From: wsy182 <2392948297@qq.com>
Date: Thu, 26 Mar 2026 14:47:18 +0800
Subject: [PATCH] =?UTF-8?q?style(game):=20=E6=9B=B4=E6=96=B0=E9=A3=8E?=
 =?UTF-8?q?=E5=90=91=E6=96=B9=E5=9D=97=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换三角形图标为正方形基础图标
- 移除四个三角形元素，改用对角线装饰设计
- 调整组件尺寸从128px改为96px，并增加圆角效果
- 更新阴影和渐变背景样式以提升视觉效果
- 优化风向标签的位置和大小布局
- 修改风向图标样式为全白色调显示
- 调整各个风向位置的坐标定位参数
---
 src/assets/images/icons/square.svg |   1 +
 src/components/game/WindSquare.vue | 147 ++++++++++++-----------------
 2 files changed, 63 insertions(+), 85 deletions(-)
 create mode 100644 src/assets/images/icons/square.svg

diff --git a/src/assets/images/icons/square.svg b/src/assets/images/icons/square.svg
new file mode 100644
index 0000000..d02986f
--- /dev/null
+++ b/src/assets/images/icons/square.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1774505292809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15817" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1024 127.937531v767.625183c0 70.665495-57.272035 127.937531-127.937531 127.93753h-767.625183c-70.665495 0-127.937531-57.272035-127.93753-127.93753v-767.625183c0-70.665495 57.272035-127.937531 127.93753-127.937531h767.625183c70.665495 0 127.937531 57.272035 127.937531 127.937531z" p-id="15818" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/components/game/WindSquare.vue b/src/components/game/WindSquare.vue
index 8e8c607..3e9efa9 100644
--- a/src/components/game/WindSquare.vue
+++ b/src/components/game/WindSquare.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import triangleIcon from '../../assets/images/icons/triangle.svg'
+import squareIcon from '../../assets/images/icons/square.svg'
 
 defineProps<{
   seatWinds: {
@@ -13,22 +13,21 @@ defineProps<{
 
 <template>
   <div class="wind-square">
-    <img class="triangle top" :src="triangleIcon" alt="" />
-    <img class="triangle right" :src="triangleIcon" alt="" />
-    <img class="triangle bottom" :src="triangleIcon" alt="" />
-    <img class="triangle left" :src="triangleIcon" alt="" />
+    <img class="square-base" :src="squareIcon" alt="" />
+    <div class="diagonal diagonal-a"></div>
+    <div class="diagonal diagonal-b"></div>
 
     <span class="wind-slot wind-top">
-      <img class="wind-icon" :src="seatWinds.top" alt="北位风" />
+      <img class="wind-icon" :src="seatWinds.top" alt="上方位风" />
     </span>
     <span class="wind-slot wind-right">
-      <img class="wind-icon" :src="seatWinds.right" alt="右位风" />
+      <img class="wind-icon" :src="seatWinds.right" alt="右方位风" />
     </span>
     <span class="wind-slot wind-bottom">
-      <img class="wind-icon" :src="seatWinds.bottom" alt="本位风" />
+      <img class="wind-icon" :src="seatWinds.bottom" alt="下方位风" />
     </span>
     <span class="wind-slot wind-left">
-      <img class="wind-icon" :src="seatWinds.left" alt="左位风" />
+      <img class="wind-icon" :src="seatWinds.left" alt="左方位风" />
     </span>
   </div>
 </template>
@@ -36,116 +35,94 @@ defineProps<{
 <style scoped>
 .wind-square {
   position: relative;
-  width: 128px;
-  height: 128px;
-  border-radius: 18px;
+  width: 96px;
+  height: 96px;
+  border-radius: 22px;
+  overflow: hidden;
+  box-shadow:
+    0 10px 18px rgba(0, 0, 0, 0.28),
+    inset 0 0 0 1px rgba(255, 240, 196, 0.2);
 }
 
-.wind-square::before {
+.square-base {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter:
+    sepia(1)
+    hue-rotate(92deg)
+    saturate(3.3)
+    brightness(0.22);
+}
+
+.wind-square::after {
   content: '';
   position: absolute;
-  inset: 18px;
-  border-radius: 10px;
+  inset: 0;
   background:
-    radial-gradient(circle at 50% 45%, rgba(244, 222, 151, 0.2), rgba(12, 40, 30, 0.05) 65%),
-    linear-gradient(145deg, rgba(21, 82, 58, 0.42), rgba(8, 38, 27, 0.16));
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 225, 165, 0.15),
-    0 6px 12px rgba(0, 0, 0, 0.24);
+    radial-gradient(circle at 28% 22%, rgba(255, 238, 191, 0.08), transparent 42%),
+    linear-gradient(145deg, rgba(5, 33, 24, 0.34), rgba(0, 0, 0, 0.16));
+  pointer-events: none;
 }
 
-.triangle {
+.diagonal {
   position: absolute;
-  width: 64px;
-  height: 64px;
-  object-fit: contain;
-  opacity: 0.96;
-  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 1px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(16, 40, 31, 0.22), rgba(25, 55, 42, 0.72), rgba(16, 40, 31, 0.22));
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.08);
+  transform-origin: center;
+  z-index: 1;
 }
 
-.triangle.top {
-  top: 4px;
-  left: 32px;
-  transform: rotate(0deg);
-  filter:
-    hue-rotate(-8deg)
-    saturate(1.35)
-    brightness(1.1)
-    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
+.diagonal-a {
+  transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.triangle.right {
-  top: 32px;
-  right: 4px;
-  transform: rotate(90deg);
-  filter:
-    hue-rotate(16deg)
-    saturate(1.28)
-    brightness(1.08)
-    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
-}
-
-.triangle.bottom {
-  bottom: 4px;
-  left: 32px;
-  transform: rotate(180deg);
-  filter:
-    hue-rotate(34deg)
-    saturate(1.2)
-    brightness(1.02)
-    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
-}
-
-.triangle.left {
-  top: 32px;
-  left: 4px;
-  transform: rotate(270deg);
-  filter:
-    hue-rotate(-26deg)
-    saturate(1.24)
-    brightness(1.06)
-    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
+.diagonal-b {
+  transform: translate(-50%, -50%) rotate(-45deg);
 }
 
 .wind-slot {
   position: absolute;
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9px;
-  background:
-    linear-gradient(180deg, rgba(255, 237, 186, 0.92), rgba(232, 191, 105, 0.84));
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.56),
-    0 3px 8px rgba(0, 0, 0, 0.26);
+  z-index: 2;
 }
 
 .wind-icon {
-  width: 24px;
-  height: 24px;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+  filter: brightness(0) invert(1);
 }
 
 .wind-top {
-  top: 12px;
-  left: 48px;
+  top: 10px;
+  left: 34px;
 }
 
 .wind-right {
-  top: 48px;
-  right: 12px;
+  top: 34px;
+  right: 10px;
 }
 
 .wind-bottom {
-  bottom: 12px;
-  left: 48px;
+  bottom: 10px;
+  left: 34px;
 }
 
 .wind-left {
-  top: 48px;
-  left: 12px;
+  top: 34px;
+  left: 10px;
 }
 </style>