408 lines
9.9 KiB
Vue
408 lines
9.9 KiB
Vue
<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> |