wsy182
603f910e8b
- 替换三角形图标为正方形基础图标 - 移除四个三角形元素，改用对角线装饰设计 - 调整组件尺寸从128px改为96px，并增加圆角效果 - 更新阴影和渐变背景样式以提升视觉效果 - 优化风向标签的位置和大小布局 - 修改风向图标样式为全白色调显示 - 调整各个风向位置的坐标定位参数
129 lines
2.4 KiB
Vue
129 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import squareIcon from '../../assets/images/icons/square.svg'
|
|
|
|
defineProps<{
|
|
seatWinds: {
|
|
top: string
|
|
right: string
|
|
bottom: string
|
|
left: string
|
|
}
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="wind-square">
|
|
<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="上方位风" />
|
|
</span>
|
|
<span class="wind-slot wind-right">
|
|
<img class="wind-icon" :src="seatWinds.right" alt="右方位风" />
|
|
</span>
|
|
<span class="wind-slot wind-bottom">
|
|
<img class="wind-icon" :src="seatWinds.bottom" alt="下方位风" />
|
|
</span>
|
|
<span class="wind-slot wind-left">
|
|
<img class="wind-icon" :src="seatWinds.left" alt="左方位风" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wind-square {
|
|
position: relative;
|
|
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);
|
|
}
|
|
|
|
.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: 0;
|
|
background:
|
|
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;
|
|
}
|
|
|
|
.diagonal {
|
|
position: absolute;
|
|
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;
|
|
}
|
|
|
|
.diagonal-a {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
.diagonal-b {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
|
|
.wind-slot {
|
|
position: absolute;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.wind-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.wind-top {
|
|
top: 10px;
|
|
left: 34px;
|
|
}
|
|
|
|
.wind-right {
|
|
top: 34px;
|
|
right: 10px;
|
|
}
|
|
|
|
.wind-bottom {
|
|
bottom: 10px;
|
|
left: 34px;
|
|
}
|
|
|
|
.wind-left {
|
|
top: 34px;
|
|
left: 10px;
|
|
}
|
|
</style>
|