This commit is contained in:
Putoo
2026-06-17 19:22:35 +08:00
parent 5cd6151b96
commit 3b0f1e37ee
40 changed files with 1856 additions and 55 deletions

View File

@@ -0,0 +1,408 @@
<template>
<div class="content" v-if="data.length > 0">
<div class="broad" v-for="item in data">
<span :class="swCodeName(item.code, 1)">
<i :class='swCodeName(item.code, 0)'></i>
<span v-if="item.userId == '0'">海精灵</span>
<span v-else>
<Abar :href='"/user/user?no=" + item.userNo'>
{{ item.nick }}
</Abar>
</span>:
<span v-html="item.msg"></span>
</span>
</div>
</div>
</template>
<script setup lang="ts">
// 1. 定义接收父组件传来的参数 props
const props = defineProps({
data: {
type: Array<any>,
default: () => ([])
}
})
const swCodeName = (code: string, type: number) => {
let result = '';
switch (code) {
case "Gift":
if (type == 0) {
result = "broad-gift";
}
else {
result = "";
}
break;
case "System":
if (type == 0) {
result = "broad-system";
}
else {
result = "masked";
}
break;
case "Award":
if (type == 0) {
result = "broad-award";
}
else {
result = "masked1";
}
break;
case "Remind":
if (type == 0) {
result = "broad-remind";
}
else {
result = "caise6";
}
break;
case "Promote":
if (type == 0) {
result = "broad-promote";
}
else {
result = "caise7";
}
break;
}
return result;
}
</script>
<style >
.broad {
font-size: 15px;
}
.broad-gift {
background-image: url('/images/broad/gift.gif');
background-repeat: no-repeat;
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px; /*设置图片大小*/
margin-right: 2px;
vertical-align: middle;
border: 0;
}
.broad-system {
background-image: url('/images/broad/system.gif');
background-repeat: no-repeat;
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px; /*设置图片大小*/
margin-right: 2px;
vertical-align: middle;
}
.broad-award {
background-image: url('/images/broad/award.gif');
background-repeat: no-repeat;
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px; /*设置图片大小*/
margin-right: 2px;
vertical-align: middle;
}
.broad-remind {
background-image: url('/images/broad/remind.gif');
background-repeat: no-repeat;
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px; /*设置图片大小*/
margin-right: 2px;
vertical-align: middle;
}
.broad-promote {
background-image: url('/images/broad/promote.gif');
background-repeat: no-repeat;
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px; /*设置图片大小*/
margin-right: 2px;
vertical-align: middle;
}
.broad-hot1 {
background-image: url('/images/broad/hot1.gif');
background-repeat: no-repeat;
display: inline-block;
width: 18px;
height: 18px;
background-size: 18px; /*设置图片大小*/
margin-right: 2px;
vertical-align: middle;
}
.masked {
display: inline;
width: 200px;
height: 22px;
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent;
/*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/*背景剪裁为文字,只将文字显示为背景*/
background-size: 200% 100%;
/*背景图片向水平方向扩大一倍这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
/*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
.masked2 {
display: inline;
width: 200px;
height: 22px;
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #ffa080, #ffa060 10%, #ffa040 20%, #ffa020 30%, #ffa0a0 40%, #ffa080 50%, #ffa060 80%, #ffa040 70%, #ffa020 80%, #ffa000 90%, #ffff00);
color: transparent;
/*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/*背景剪裁为文字,只将文字显示为背景*/
background-size: 200% 100%;
/*背景图片向水平方向扩大一倍这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
/*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
.masked1 {
display: inline;
width: 200px;
height: 22px;
/*渐变背景*/
background-image: -webkit-linear-gradient(left, #ff0080, #ff0060 10%, #ff0040 20%, #ff0020 30%, #ff00a0 40%, #ff0080 50%, #ff0060 80%, #ff0040 70%, #ff0020 80%, #ff0000 90%, #ffff00);
color: transparent;
/*文字填充色为透明*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/*背景剪裁为文字,只将文字显示为背景*/
background-size: 200% 100%;
/*背景图片向水平方向扩大一倍这样background-position才有移动与变化的空间*/
/* 动画 */
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
/*background-position 属性设置背景图像的起始位置。*/
}
100% {
background-position: -100% 0;
}
}
.lmma {
color: #ffff00;
}
.caise_jt {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
-o-background-clip: text
}
.caise3 {
/* 删除 -moz -ms -o 全部废弃前缀 */
background: linear-gradient(180deg, #f2f, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
/* 兼容webkit内核浏览器Chrome/Edge/移动端) */
background: -webkit-linear-gradient(180deg, #f2f, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
/* 移除多余 color: #f2f; 会被透明覆盖 */
color: transparent;
-webkit-background-clip: text;
background-clip: text;
/* 滚动动画必备,之前缺失 */
background-size: 200% 200%;
animation: ran 5s linear infinite;
}
@keyframes ran {
from {
backgroud-position: 0 0;
}
to {
background-position: 200px 0;
}
}
.caise4 {
color: aqua;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 1px 0px #888, 0px 1px 0px #777, 0px 1px 0px #666, 0px 1px 0px #555, 0px 1px 0px #444, 0px 1px 0px #333, 0px 1px 7px #001135
}
.caise5 {
text-shadow: 1px 1px 6px deeppink;
color: deeppink
}
.caise6 {
background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);
-webkit-text-fill-color: transparent;
/* 将字体设置成透明色 */
-webkit-background-clip: text;
/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 3s linear infinite;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
.caise7 {
--interval: 1s;
text-shadow: 0 0 5px var(--color1), 0 0 5px var(--color2), 0 0 5px var(--color3), 0 0 5px var(--color4);
will-change: filter, color;
filter: saturate(60%);
animation: flicker steps(100) var(--interval) 1s infinite;
}
.caise7:nth-of-type(1) {
color: yellow;
--color1: azure;
--color2: orangered;
--color3: mediumblue;
--color4: dodgerblue;
font-family: Gruppo;
}
.caise7:nth-of-type(2) {
color: lightpink;
--color1: pink;
--color2: mediumblue;
--color3: dodgerblue;
--color4: azure;
font-family: Bad Script;
}
.caise7:nth-of-type(3) {
color: lightyellow;
--color1: yellow;
--color2: dodgerblue;
--color3: green;
--color4: mediumblue;
font-family: Kumar One Outline;
}
.caise7:nth-of-type(4) {
color: lightyellow;
--color1: gold;
--color2: dodgerblue;
--color3: pink;
--color4: azure;
font-family: Londrina Outline;
}
.caise7:nth-of-type(5) {
color: azure;
--color1: azure;
--color2: aqua;
--color3: dodgerblue;
--color4: blue;
font-family: Sriracha;
}
.caise7:nth-of-type(6) {
color: azure;
--color1: green;
--color2: pink;
--color3: dodgerblue;
--color4: green;
font-family: Yellowtail;
}
.caise7:nth-of-type(7) {
color: lightyellow;
--color1: yellow;
--color2: orange;
--color3: pink;
--color4: purple;
font-family: Bad Script;
}
.caise7:nth-of-type(8) {
color: yellow;
--color1: yellow;
--color2: pink;
--color3: azure;
--color4: pink;
font-family: Monoton;
}
.caise7:nth-of-type(9) {
color: lightyellow;
--color1: yellow;
--color2: gold;
--color3: azure;
--color4: pink;
font-family: Sriracha;
}
@keyframes flicker {
50% {
color: white;
filter: saturate(200%) hue-rotate(90deg);
}
}
</style>

View File

@@ -0,0 +1,18 @@
<template>
<div class="common" v-for="item in data">
<div v-if="item.code == 'Goods'">
<Abar :href='"/prop/goods?id=" + item.parameter'>{{ item.name }}</Abar>:({{ item.onCount }}/{{ item.count }})
<span style="color: red;" v-if="item.isAsk == 0">(不满足)</span>
</div>
<div v-else>
{{ item.name }}:({{ item.onCount }}/{{ item.count }})
<span style="color: red;" v-if="item.isAsk == 0">(不满足)</span>
</div>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
// 字段名、类型、默认值
data: Array<any>
})
</script>