style(game): 更新风向方块组件样式
- 替换三角形图标为正方形基础图标 - 移除四个三角形元素，改用对角线装饰设计 - 调整组件尺寸从128px改为96px，并增加圆角效果 - 更新阴影和渐变背景样式以提升视觉效果 - 优化风向标签的位置和大小布局 - 修改风向图标样式为全白色调显示 - 调整各个风向位置的坐标定位参数
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user