gengx
This commit is contained in:
Your Name
+1
-85
@@ -1,86 +1,2 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
if (!Math) {
|
||||
TongjiIcon();
|
||||
}
|
||||
const TongjiIcon = () => "./TongjiIcon.js";
|
||||
const _sfc_main = {
|
||||
__name: "CelebrateBurst",
|
||||
props: {
|
||||
show: { type: Boolean, default: false },
|
||||
title: { type: String, default: "" },
|
||||
subtitle: { type: String, default: "" }
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const particles = common_vendor.ref([]);
|
||||
const cardPop = common_vendor.ref(false);
|
||||
const COLORS = ["#204E2B", "#386641", "#AFE2B3", "#FBBF24", "#727970", "#DC2626"];
|
||||
function buildParticles() {
|
||||
const list = [];
|
||||
for (let i = 0; i < 18; i++) {
|
||||
const left = 8 + Math.random() * 84;
|
||||
const delay = Math.random() * 0.35;
|
||||
const hue = COLORS[i % COLORS.length];
|
||||
const size = 10 + Math.floor(Math.random() * 14);
|
||||
list.push({
|
||||
id: `${Date.now()}_${i}`,
|
||||
style: {
|
||||
left: `${left}%`,
|
||||
width: `${size}rpx`,
|
||||
height: `${size}rpx`,
|
||||
background: hue,
|
||||
animationDelay: `${delay}s`
|
||||
}
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
common_vendor.watch(
|
||||
() => props.show,
|
||||
(v) => {
|
||||
if (v) {
|
||||
particles.value = buildParticles();
|
||||
cardPop.value = false;
|
||||
setTimeout(() => {
|
||||
cardPop.value = true;
|
||||
}, 30);
|
||||
} else {
|
||||
particles.value = [];
|
||||
cardPop.value = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: __props.show
|
||||
}, __props.show ? common_vendor.e({
|
||||
b: common_vendor.f(particles.value, (p, k0, i0) => {
|
||||
return {
|
||||
a: p.id,
|
||||
b: common_vendor.s(p.style)
|
||||
};
|
||||
}),
|
||||
c: __props.title
|
||||
}, __props.title ? common_vendor.e({
|
||||
d: common_vendor.p({
|
||||
name: "sparkles",
|
||||
size: "lg",
|
||||
color: "#204E2B"
|
||||
}),
|
||||
e: common_vendor.t(__props.title),
|
||||
f: __props.subtitle
|
||||
}, __props.subtitle ? {
|
||||
g: common_vendor.t(__props.subtitle)
|
||||
} : {}, {
|
||||
h: cardPop.value ? 1 : ""
|
||||
}) : {}, {
|
||||
i: common_vendor.o(() => {
|
||||
}, "49")
|
||||
}) : {});
|
||||
};
|
||||
}
|
||||
};
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-313f45d6"]]);
|
||||
wx.createComponent(Component);
|
||||
"use strict";const t=require("../../common/vendor.js");Math||h();const h=()=>"./TongjiIcon.js",m={__name:"CelebrateBurst",props:{show:{type:Boolean,default:!1},title:{type:String,default:""},subtitle:{type:String,default:""}},setup(e){const f=e,s=t.ref([]),l=t.ref(!1),i=["#204E2B","#386641","#AFE2B3","#FBBF24","#727970","#DC2626"];function d(){const a=[];for(let n=0;n<18;n++){const o=8+Math.random()*84,c=Math.random()*.35,u=i[n%i.length],r=10+Math.floor(Math.random()*14);a.push({id:`${Date.now()}_${n}`,style:{left:`${o}%`,width:`${r}rpx`,height:`${r}rpx`,background:u,animationDelay:`${c}s`}})}return a}return t.watch(()=>f.show,a=>{a?(s.value=d(),l.value=!1,setTimeout(()=>{l.value=!0},30)):(s.value=[],l.value=!1)}),(a,n)=>t.e({a:e.show},e.show?t.e({b:t.f(s.value,(o,c,u)=>({a:o.id,b:t.s(o.style)})),c:e.title},e.title?t.e({d:t.p({name:"sparkles",size:"lg",color:"#204E2B"}),e:t.t(e.title),f:e.subtitle},e.subtitle?{g:t.t(e.subtitle)}:{},{h:l.value?1:""}):{},{i:t.o(()=>{},"49")}):{})}},b=t._export_sfc(m,[["__scopeId","data-v-313f45d6"]]);wx.createComponent(b);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/CelebrateBurst.js.map
|
||||
|
||||
+1
-95
@@ -1,95 +1 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.celebrate-root.data-v-313f45d6 {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.celebrate-particle.data-v-313f45d6 {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
border-radius: 4rpx;
|
||||
opacity: 0.9;
|
||||
animation: celebrate-fall-313f45d6 1.6s ease-in forwards;
|
||||
}
|
||||
@keyframes celebrate-fall-313f45d6 {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(110vh) rotate(540deg) scale(0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.celebrate-card.data-v-313f45d6 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 38%;
|
||||
transform: translate(-50%, -50%) scale(0.82);
|
||||
width: 78%;
|
||||
max-width: 560rpx;
|
||||
padding: 36rpx 32rpx 32rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 28rpx;
|
||||
box-shadow: 0 20rpx 60rpx rgba(8, 145, 178, 0.22);
|
||||
border: 2rpx solid rgba(8, 145, 178, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
|
||||
}
|
||||
.celebrate-card.pop.data-v-313f45d6 {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
.celebrate-card-glow.data-v-313f45d6 {
|
||||
position: absolute;
|
||||
inset: -20rpx;
|
||||
border-radius: 36rpx;
|
||||
background: radial-gradient(circle, rgba(34, 211, 238, 0.2), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.celebrate-card-title.data-v-313f45d6 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 16rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: #1b1c1a;
|
||||
}
|
||||
.celebrate-card-sub.data-v-313f45d6 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #475569;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.celebrate-root.data-v-313f45d6{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none;overflow:hidden}.celebrate-particle.data-v-313f45d6{position:absolute;top:-20rpx;border-radius:4rpx;opacity:.9;animation:celebrate-fall-313f45d6 1.6s ease-in forwards}@keyframes celebrate-fall-313f45d6{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}to{transform:translateY(110vh) rotate(540deg) scale(.4);opacity:0}}.celebrate-card.data-v-313f45d6{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.82);width:78%;max-width:560rpx;padding:36rpx 32rpx 32rpx;background:rgba(255,255,255,.96);border-radius:28rpx;box-shadow:0 20rpx 60rpx rgba(8,145,178,.22);border:2rpx solid rgba(8,145,178,.12);display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}.celebrate-card.pop.data-v-313f45d6{opacity:1;transform:translate(-50%,-50%) scale(1)}.celebrate-card-glow.data-v-313f45d6{position:absolute;top:-20rpx;right:-20rpx;bottom:-20rpx;left:-20rpx;border-radius:36rpx;background:radial-gradient(circle,rgba(34,211,238,.2),transparent 70%);pointer-events:none}.celebrate-card-title.data-v-313f45d6{position:relative;z-index:1;margin-top:16rpx;font-size:36rpx;font-weight:800;color:#1b1c1a}.celebrate-card-sub.data-v-313f45d6{position:relative;z-index:1;margin-top:10rpx;font-size:26rpx;color:#475569;line-height:1.45}
|
||||
+6
-93
@@ -1,100 +1,13 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const tongji_utils_svgDataUrl = require("../utils/svgDataUrl.js");
|
||||
const tongji_utils_treeLevels = require("../utils/treeLevels.js");
|
||||
const _sfc_main = {
|
||||
__name: "SugarTreeGraphic",
|
||||
props: {
|
||||
level: { type: Number, default: 0 },
|
||||
size: { type: String, default: "md" },
|
||||
watering: { type: Boolean, default: false }
|
||||
},
|
||||
setup(__props) {
|
||||
const MAX_LEVEL = tongji_utils_treeLevels.TREE_MAX_LEVEL;
|
||||
const treeUseFallback = common_vendor.ref(true);
|
||||
const props = __props;
|
||||
const clampedLevel = common_vendor.computed(() => Math.min(MAX_LEVEL, Math.max(0, Number(props.level) || 0)));
|
||||
const visualTier = common_vendor.computed(() => {
|
||||
const lv = clampedLevel.value;
|
||||
if (lv <= 0)
|
||||
return 0;
|
||||
if (lv <= 2)
|
||||
return 1;
|
||||
if (lv <= 4)
|
||||
return 2;
|
||||
if (lv <= 6)
|
||||
return 3;
|
||||
if (lv <= 8)
|
||||
return 4;
|
||||
return 5;
|
||||
});
|
||||
const treeEmoji = common_vendor.computed(() => (tongji_utils_treeLevels.TREE_LEVELS[clampedLevel.value] || tongji_utils_treeLevels.TREE_LEVELS[0]).emoji);
|
||||
function buildTreeSvg(level) {
|
||||
const pot = `
|
||||
"use strict";const c=require("../../common/vendor.js"),L=require("../utils/svgDataUrl.js"),v=require("../utils/treeLevels.js"),M={__name:"SugarTreeGraphic",props:{level:{type:Number,default:0},size:{type:String,default:"md"},watering:{type:Boolean,default:!1}},setup(n){const l=v.TREE_MAX_LEVEL,o=c.ref(!0),x=n,r=c.computed(()=>Math.min(l,Math.max(0,Number(x.level)||0))),y=c.computed(()=>{const t=r.value;return t<=0?0:t<=2?1:t<=4?2:t<=6?3:t<=8?4:5}),$=c.computed(()=>(v.TREE_LEVELS[r.value]||v.TREE_LEVELS[0]).emoji);function h(t){const s=`
|
||||
<ellipse cx="24" cy="50" rx="15" ry="3" fill="#204e2b" opacity="0.12"/>
|
||||
<path d="M11 46h26c1.2 0 2 1 2 2.2v3.8c0 1-.8 1.8-1.8 1.8H10.8c-1 0-1.8-.8-1.8-1.8v-3.8c0-1.2.8-2.2 2-2.2z" fill="#E7E5E4"/>
|
||||
<path d="M12.5 46h23c.8 0 1.5.7 1.5 1.5v2.2c0 .6-.5 1.1-1.1 1.1H12.1c-.6 0-1.1-.5-1.1-1.1v-2.2c0-.8.7-1.5 1.5-1.5z" fill="#D6D3D1"/>
|
||||
<ellipse cx="24" cy="46.5" rx="9" ry="1.6" fill="#A8A29E" opacity="0.35"/>
|
||||
`;
|
||||
const soil = `<ellipse cx="24" cy="44.5" rx="8" ry="2.2" fill="#386641" opacity="0.18"/>`;
|
||||
if (level <= 0) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">
|
||||
${pot}${soil}
|
||||
`,u='<ellipse cx="24" cy="44.5" rx="8" ry="2.2" fill="#386641" opacity="0.18"/>';if(t<=0)return`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">
|
||||
${s}${u}
|
||||
<circle cx="24" cy="41.5" r="2.2" fill="#a8a29e" opacity="0.7"/>
|
||||
<path d="M24 41.5v3.5" stroke="#78716c" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>`;
|
||||
}
|
||||
const trunkH = level >= 6 ? 16 : level >= 3 ? 14 : 10;
|
||||
const trunkY = 46 - trunkH;
|
||||
const trunk = `<rect x="22.2" y="${trunkY}" width="3.6" height="${trunkH}" rx="1.8" fill="#78716C"/>
|
||||
<rect x="22.6" y="${trunkY + 1}" width="2.8" height="${trunkH - 1}" rx="1.4" fill="#A8A29E" opacity="0.35"/>`;
|
||||
const leaf = (cx, cy, r, fill, opacity = 1) => `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${fill}" opacity="${opacity}"/>
|
||||
<circle cx="${cx - r * 0.25}" cy="${cy - r * 0.2}" r="${r * 0.35}" fill="#eef6ef" opacity="0.55"/>`;
|
||||
const bloom = level >= 7 ? leaf(17, 18, 3, "#fda4af", 0.95) + leaf(31, 17, 2.8, "#f9a8d4", 0.9) + leaf(24, 13, 3.2, "#fb7185", 0.95) + `<circle cx="24" cy="12" r="1.3" fill="#fef3c7"/>` : "";
|
||||
const crown = level >= 9 ? leaf(12, 22, 6, "#34d399", 0.9) + leaf(36, 22, 6, "#34d399", 0.9) + leaf(24, 10, 7, "#386641", 0.95) + bloom : bloom;
|
||||
let canopy = "";
|
||||
if (level === 1) {
|
||||
canopy = leaf(24, 38, 4, "#afe2b3") + `<path d="M24 38v-5" stroke="#386641" stroke-width="1.2" stroke-linecap="round"/>`;
|
||||
} else if (level === 2) {
|
||||
canopy = leaf(24, 32, 5.5, "#34d399") + leaf(20, 34, 3.5, "#6ee7b7", 0.9);
|
||||
} else if (level <= 4) {
|
||||
canopy = leaf(24, 28, 7, "#34d399") + leaf(17, 30, 5, "#6ee7b7", 0.9) + leaf(31, 30, 5, "#6ee7b7", 0.9);
|
||||
} else if (level <= 6) {
|
||||
canopy = leaf(24, 24, 9, "#22c55e") + leaf(14, 26, 7, "#4ade80", 0.92) + leaf(34, 26, 7, "#4ade80", 0.92) + leaf(24, 16, 6, "#386641", 0.88);
|
||||
} else {
|
||||
canopy = leaf(24, 20, 10, "#204e2b") + leaf(13, 24, 8, "#34d399", 0.95) + leaf(35, 24, 8, "#34d399", 0.95) + crown;
|
||||
}
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">${pot}${soil}${trunk}${canopy}</svg>`;
|
||||
}
|
||||
const treeImageSrc = common_vendor.computed(() => tongji_utils_svgDataUrl.svgToDataUrl(buildTreeSvg(clampedLevel.value)));
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: clampedLevel.value >= 7
|
||||
}, clampedLevel.value >= 7 ? {} : {}, {
|
||||
b: !treeUseFallback.value
|
||||
}, !treeUseFallback.value ? {
|
||||
c: treeImageSrc.value,
|
||||
d: common_vendor.o(($event) => treeUseFallback.value = true, "20")
|
||||
} : {
|
||||
e: common_vendor.t(treeEmoji.value)
|
||||
}, {
|
||||
f: clampedLevel.value >= 7
|
||||
}, clampedLevel.value >= 7 ? {} : {}, {
|
||||
g: clampedLevel.value >= 8
|
||||
}, clampedLevel.value >= 8 ? {} : {}, {
|
||||
h: clampedLevel.value >= common_vendor.unref(MAX_LEVEL)
|
||||
}, clampedLevel.value >= common_vendor.unref(MAX_LEVEL) ? {} : {}, {
|
||||
i: common_vendor.n(`lv-${clampedLevel.value}`),
|
||||
j: common_vendor.n(`tier-${visualTier.value}`),
|
||||
k: common_vendor.n(`size-${__props.size}`),
|
||||
l: common_vendor.n({
|
||||
watering: __props.watering,
|
||||
"is-max": clampedLevel.value >= common_vendor.unref(MAX_LEVEL)
|
||||
})
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-d91cb5e7"]]);
|
||||
wx.createComponent(Component);
|
||||
</svg>`;const f=t>=6?16:t>=3?14:10,d=46-f,w=`<rect x="22.2" y="${d}" width="3.6" height="${f}" rx="1.8" fill="#78716C"/>
|
||||
<rect x="22.6" y="${d+1}" width="2.8" height="${f-1}" rx="1.4" fill="#A8A29E" opacity="0.35"/>`,e=(m,g,a,b,k=1)=>`<circle cx="${m}" cy="${g}" r="${a}" fill="${b}" opacity="${k}"/>
|
||||
<circle cx="${m-a*.25}" cy="${g-a*.2}" r="${a*.35}" fill="#eef6ef" opacity="0.55"/>`,p=t>=7?e(17,18,3,"#fda4af",.95)+e(31,17,2.8,"#f9a8d4",.9)+e(24,13,3.2,"#fb7185",.95)+'<circle cx="24" cy="12" r="1.3" fill="#fef3c7"/>':"",_=t>=9?e(12,22,6,"#34d399",.9)+e(36,22,6,"#34d399",.9)+e(24,10,7,"#386641",.95)+p:p;let i="";return t===1?i=e(24,38,4,"#afe2b3")+'<path d="M24 38v-5" stroke="#386641" stroke-width="1.2" stroke-linecap="round"/>':t===2?i=e(24,32,5.5,"#34d399")+e(20,34,3.5,"#6ee7b7",.9):t<=4?i=e(24,28,7,"#34d399")+e(17,30,5,"#6ee7b7",.9)+e(31,30,5,"#6ee7b7",.9):t<=6?i=e(24,24,9,"#22c55e")+e(14,26,7,"#4ade80",.92)+e(34,26,7,"#4ade80",.92)+e(24,16,6,"#386641",.88):i=e(24,20,10,"#204e2b")+e(13,24,8,"#34d399",.95)+e(35,24,8,"#34d399",.95)+_,`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">${s}${u}${w}${i}</svg>`}const E=c.computed(()=>L.svgToDataUrl(h(r.value)));return(t,s)=>c.e({a:r.value>=7},r.value>=7?{}:{},{b:!o.value},o.value?{e:c.t($.value)}:{c:E.value,d:c.o(u=>o.value=!0,"20")},{f:r.value>=7},r.value>=7?{}:{},{g:r.value>=8},r.value>=8?{}:{},{h:r.value>=c.unref(l)},r.value>=c.unref(l)?{}:{},{i:c.n(`lv-${r.value}`),j:c.n(`tier-${y.value}`),k:c.n(`size-${n.size}`),l:c.n({watering:n.watering,"is-max":r.value>=c.unref(l)})})}},T=c._export_sfc(M,[["__scopeId","data-v-d91cb5e7"]]);wx.createComponent(T);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/SugarTreeGraphic.js.map
|
||||
|
||||
+1
-153
@@ -1,153 +1 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.sugar-tree-graphic.data-v-d91cb5e7 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.size-sm.data-v-d91cb5e7 {
|
||||
width: 64rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.size-md.data-v-d91cb5e7 {
|
||||
width: 80rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
.size-lg.data-v-d91cb5e7 {
|
||||
width: 112rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
.stg-glow.data-v-d91cb5e7 {
|
||||
position: absolute;
|
||||
inset: 6%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(32, 78, 43, 0.22) 0%, transparent 68%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.lv-0 .stg-glow.data-v-d91cb5e7 {
|
||||
background: radial-gradient(circle, rgba(148, 163, 184, 0.25) 0%, transparent 70%);
|
||||
}
|
||||
.tier-4 .stg-glow.data-v-d91cb5e7,
|
||||
.tier-5 .stg-glow.data-v-d91cb5e7,
|
||||
.is-max .stg-glow.data-v-d91cb5e7 {
|
||||
background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, rgba(32, 78, 43, 0.15) 55%, transparent 72%);
|
||||
}
|
||||
.stg-aura.data-v-d91cb5e7 {
|
||||
position: absolute;
|
||||
inset: -8%;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(253, 224, 71, 0.35);
|
||||
animation: stg-aura-pulse-d91cb5e7 2.4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes stg-aura-pulse-d91cb5e7 {
|
||||
0%, 100% {
|
||||
transform: scale(0.92);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.stg-image.data-v-d91cb5e7 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.35s ease;
|
||||
}
|
||||
.sugar-tree-graphic.watering .stg-image.data-v-d91cb5e7,
|
||||
.sugar-tree-graphic.watering .stg-emoji.data-v-d91cb5e7 {
|
||||
animation: stg-water-bounce-d91cb5e7 0.65s ease;
|
||||
}
|
||||
.stg-emoji.data-v-d91cb5e7 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 1;
|
||||
font-size: 72rpx;
|
||||
}
|
||||
.size-sm .stg-emoji.data-v-d91cb5e7 {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
.size-md .stg-emoji.data-v-d91cb5e7 {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.size-lg .stg-emoji.data-v-d91cb5e7 {
|
||||
font-size: 88rpx;
|
||||
}
|
||||
@keyframes stg-water-bounce-d91cb5e7 {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
35% {
|
||||
transform: scale(1.1) translateY(-6rpx);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.96) translateY(2rpx);
|
||||
}
|
||||
}
|
||||
.stg-sparkle.data-v-d91cb5e7 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #fde68a;
|
||||
box-shadow: 0 0 6rpx rgba(253, 224, 71, 0.8);
|
||||
pointer-events: none;
|
||||
animation: stg-sparkle-twinkle-d91cb5e7 1.8s ease-in-out infinite;
|
||||
}
|
||||
.stg-sparkle-a.data-v-d91cb5e7 {
|
||||
top: 4%;
|
||||
right: 16%;
|
||||
}
|
||||
.stg-sparkle-b.data-v-d91cb5e7 {
|
||||
top: 12%;
|
||||
left: 10%;
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.stg-sparkle-c.data-v-d91cb5e7 {
|
||||
top: 22%;
|
||||
right: 28%;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
@keyframes stg-sparkle-twinkle-d91cb5e7 {
|
||||
0%, 100% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
.sugar-tree-graphic.data-v-d91cb5e7{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.size-sm.data-v-d91cb5e7{width:64rpx;height:72rpx}.size-md.data-v-d91cb5e7{width:80rpx;height:88rpx}.size-lg.data-v-d91cb5e7{width:112rpx;height:124rpx}.stg-glow.data-v-d91cb5e7{position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:50%;background:radial-gradient(circle,rgba(32,78,43,.22) 0%,transparent 68%);pointer-events:none}.lv-0 .stg-glow.data-v-d91cb5e7{background:radial-gradient(circle,rgba(148,163,184,.25) 0%,transparent 70%)}.tier-4 .stg-glow.data-v-d91cb5e7,.tier-5 .stg-glow.data-v-d91cb5e7,.is-max .stg-glow.data-v-d91cb5e7{background:radial-gradient(circle,rgba(251,191,36,.3) 0%,rgba(32,78,43,.15) 55%,transparent 72%)}.stg-aura.data-v-d91cb5e7{position:absolute;top:-8%;right:-8%;bottom:-8%;left:-8%;border-radius:50%;border:2rpx solid rgba(253,224,71,.35);animation:stg-aura-pulse-d91cb5e7 2.4s ease-in-out infinite;pointer-events:none}@keyframes stg-aura-pulse-d91cb5e7{0%,to{transform:scale(.92);opacity:.5}50%{transform:scale(1.05);opacity:1}}.stg-image.data-v-d91cb5e7{position:relative;z-index:1;width:100%;height:100%;transition:transform .35s ease}.sugar-tree-graphic.watering .stg-image.data-v-d91cb5e7,.sugar-tree-graphic.watering .stg-emoji.data-v-d91cb5e7{animation:stg-water-bounce-d91cb5e7 .65s ease}.stg-emoji.data-v-d91cb5e7{position:relative;z-index:1;line-height:1;font-size:72rpx}.size-sm .stg-emoji.data-v-d91cb5e7{font-size:48rpx}.size-md .stg-emoji.data-v-d91cb5e7{font-size:60rpx}.size-lg .stg-emoji.data-v-d91cb5e7{font-size:88rpx}@keyframes stg-water-bounce-d91cb5e7{0%,to{transform:scale(1)}35%{transform:scale(1.1) translateY(-6rpx)}60%{transform:scale(.96) translateY(2rpx)}}.stg-sparkle.data-v-d91cb5e7{position:absolute;z-index:2;width:8rpx;height:8rpx;border-radius:50%;background:#fde68a;box-shadow:0 0 6rpx rgba(253,224,71,.8);pointer-events:none;animation:stg-sparkle-twinkle-d91cb5e7 1.8s ease-in-out infinite}.stg-sparkle-a.data-v-d91cb5e7{top:4%;right:16%}.stg-sparkle-b.data-v-d91cb5e7{top:12%;left:10%;width:6rpx;height:6rpx;animation-delay:.4s}.stg-sparkle-c.data-v-d91cb5e7{top:22%;right:28%;width:10rpx;height:10rpx;animation-delay:.8s}@keyframes stg-sparkle-twinkle-d91cb5e7{0%,to{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
|
||||
+1
-128
File diff suppressed because one or more lines are too long
+1
-75
@@ -1,75 +1 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.tj-icon-wrap.data-v-f41c6626 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tj-icon-wrap--sm.data-v-f41c6626 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.tj-icon-wrap--md.data-v-f41c6626 {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.tj-icon-wrap--lg.data-v-f41c6626 {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.tj-icon-wrap--xl.data-v-f41c6626 {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.tj-icon.data-v-f41c6626 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Lucide send 路径重心偏右上，微调使圆形按钮内视觉居中 */
|
||||
.tj-icon--send.data-v-f41c6626 {
|
||||
transform: translate(-10%, 10%);
|
||||
}
|
||||
.tj-icon-fallback.data-v-f41c6626 {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
.tj-icon-fallback--sm.data-v-f41c6626 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.tj-icon-fallback--md.data-v-f41c6626 {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.tj-icon-fallback--lg.data-v-f41c6626 {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.tj-icon-fallback--xl.data-v-f41c6626 {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
.tj-icon-wrap.data-v-f41c6626{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tj-icon-wrap--sm.data-v-f41c6626{width:32rpx;height:32rpx}.tj-icon-wrap--md.data-v-f41c6626{width:40rpx;height:40rpx}.tj-icon-wrap--lg.data-v-f41c6626{width:48rpx;height:48rpx}.tj-icon-wrap--xl.data-v-f41c6626{width:56rpx;height:56rpx}.tj-icon.data-v-f41c6626{display:block;width:100%;height:100%}.tj-icon--send.data-v-f41c6626{transform:translate(-10%,10%)}.tj-icon-fallback.data-v-f41c6626{display:block;line-height:1;font-weight:700;text-align:center}.tj-icon-fallback--sm.data-v-f41c6626{font-size:24rpx}.tj-icon-fallback--md.data-v-f41c6626{font-size:30rpx}.tj-icon-fallback--lg.data-v-f41c6626{font-size:36rpx}.tj-icon-fallback--xl.data-v-f41c6626{font-size:42rpx}
|
||||
+1
-27
@@ -1,28 +1,2 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
__name: "VoiceSpeakMascot",
|
||||
props: {
|
||||
/** 正在按住说话 / 录音中 */
|
||||
active: { type: Boolean, default: false },
|
||||
/** 深色条背景上使用浅色卡通 */
|
||||
onDark: { type: Boolean, default: false },
|
||||
size: { type: String, default: "md" }
|
||||
},
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: __props.active
|
||||
}, __props.active ? {} : {}, {
|
||||
b: common_vendor.n(`vsm--${__props.size}`),
|
||||
c: common_vendor.n({
|
||||
"vsm--active": __props.active,
|
||||
"vsm--on-dark": __props.onDark
|
||||
})
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-e1de3b0a"]]);
|
||||
wx.createComponent(Component);
|
||||
"use strict";const t=require("../../common/vendor.js"),a={__name:"VoiceSpeakMascot",props:{active:{type:Boolean,default:!1},onDark:{type:Boolean,default:!1},size:{type:String,default:"md"}},setup(e){return(c,o)=>t.e({a:e.active},e.active?{}:{},{b:t.n(`vsm--${e.size}`),c:t.n({"vsm--active":e.active,"vsm--on-dark":e.onDark})})}},n=t._export_sfc(a,[["__scopeId","data-v-e1de3b0a"]]);wx.createComponent(n);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/VoiceSpeakMascot.js.map
|
||||
|
||||
+1
-230
@@ -1,230 +1 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.vsm.data-v-e1de3b0a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.vsm--md.data-v-e1de3b0a {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.vsm--sm.data-v-e1de3b0a {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.vsm-body.data-v-e1de3b0a {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.vsm-leaf.data-v-e1de3b0a {
|
||||
position: absolute;
|
||||
top: 2rpx;
|
||||
left: 50%;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
margin-left: -8rpx;
|
||||
border-radius: 0 100% 0 100%;
|
||||
background: #34d399;
|
||||
transform: rotate(-18deg);
|
||||
z-index: 2;
|
||||
}
|
||||
.vsm--on-dark .vsm-leaf.data-v-e1de3b0a {
|
||||
background: #a7f3d0;
|
||||
}
|
||||
.vsm-face.data-v-e1de3b0a {
|
||||
position: relative;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #fef9c3;
|
||||
border: 3rpx solid #047857;
|
||||
box-shadow: 0 4rpx 10rpx rgba(4, 120, 87, 0.18);
|
||||
z-index: 1;
|
||||
}
|
||||
.vsm--sm .vsm-face.data-v-e1de3b0a {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
.vsm--on-dark .vsm-face.data-v-e1de3b0a {
|
||||
background: #fffbeb;
|
||||
border-color: rgba(255, 255, 255, 0.85);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.vsm-eye.data-v-e1de3b0a {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
width: 6rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #064e3b;
|
||||
}
|
||||
.vsm--sm .vsm-eye.data-v-e1de3b0a {
|
||||
top: 14rpx;
|
||||
width: 5rpx;
|
||||
height: 7rpx;
|
||||
}
|
||||
.vsm--on-dark .vsm-eye.data-v-e1de3b0a {
|
||||
background: #134e4a;
|
||||
}
|
||||
.vsm-eye--l.data-v-e1de3b0a {
|
||||
left: 12rpx;
|
||||
}
|
||||
.vsm-eye--r.data-v-e1de3b0a {
|
||||
right: 12rpx;
|
||||
}
|
||||
.vsm--sm .vsm-eye--l.data-v-e1de3b0a {
|
||||
left: 10rpx;
|
||||
}
|
||||
.vsm--sm .vsm-eye--r.data-v-e1de3b0a {
|
||||
right: 10rpx;
|
||||
}
|
||||
.vsm-blush.data-v-e1de3b0a {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
width: 10rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(251, 113, 133, 0.45);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.vsm--sm .vsm-blush.data-v-e1de3b0a {
|
||||
top: 21rpx;
|
||||
width: 8rpx;
|
||||
height: 5rpx;
|
||||
}
|
||||
.vsm-blush--l.data-v-e1de3b0a {
|
||||
left: 6rpx;
|
||||
}
|
||||
.vsm-blush--r.data-v-e1de3b0a {
|
||||
right: 6rpx;
|
||||
}
|
||||
.vsm--on-dark .vsm-blush.data-v-e1de3b0a {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.vsm-mouth.data-v-e1de3b0a {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10rpx;
|
||||
width: 18rpx;
|
||||
height: 8rpx;
|
||||
margin-left: -9rpx;
|
||||
border-radius: 0 0 18rpx 18rpx;
|
||||
background: #047857;
|
||||
transform-origin: center top;
|
||||
}
|
||||
.vsm--sm .vsm-mouth.data-v-e1de3b0a {
|
||||
bottom: 9rpx;
|
||||
width: 16rpx;
|
||||
height: 7rpx;
|
||||
margin-left: -8rpx;
|
||||
}
|
||||
.vsm--on-dark .vsm-mouth.data-v-e1de3b0a {
|
||||
background: #ecfdf5;
|
||||
}
|
||||
.vsm-waves.data-v-e1de3b0a {
|
||||
position: absolute;
|
||||
right: -2rpx;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4rpx;
|
||||
height: 28rpx;
|
||||
margin-top: -14rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
.vsm-wave.data-v-e1de3b0a {
|
||||
width: 5rpx;
|
||||
border-radius: 4rpx;
|
||||
background: #047857;
|
||||
animation: vsm-wave-jump-e1de3b0a 0.72s ease-in-out infinite;
|
||||
}
|
||||
.vsm--on-dark .vsm-wave.data-v-e1de3b0a {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.vsm-wave--1.data-v-e1de3b0a {
|
||||
height: 10rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.vsm-wave--2.data-v-e1de3b0a {
|
||||
height: 18rpx;
|
||||
animation-delay: 0.12s;
|
||||
}
|
||||
.vsm-wave--3.data-v-e1de3b0a {
|
||||
height: 12rpx;
|
||||
animation-delay: 0.24s;
|
||||
}
|
||||
.vsm--active .vsm-body.data-v-e1de3b0a {
|
||||
animation: vsm-bob-e1de3b0a 0.9s ease-in-out infinite;
|
||||
}
|
||||
.vsm--active .vsm-mouth.data-v-e1de3b0a {
|
||||
animation: vsm-talk-e1de3b0a 0.32s ease-in-out infinite alternate;
|
||||
}
|
||||
.vsm--active .vsm-eye.data-v-e1de3b0a {
|
||||
animation: vsm-blink-e1de3b0a 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes vsm-bob-e1de3b0a {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-4rpx);
|
||||
}
|
||||
}
|
||||
@keyframes vsm-talk-e1de3b0a {
|
||||
0% {
|
||||
transform: scaleY(0.45);
|
||||
border-radius: 0 0 18rpx 18rpx;
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1.15);
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
@keyframes vsm-blink-e1de3b0a {
|
||||
0%, 42%, 46%, 100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
44% {
|
||||
transform: scaleY(0.15);
|
||||
}
|
||||
}
|
||||
@keyframes vsm-wave-jump-e1de3b0a {
|
||||
0%, 100% {
|
||||
transform: scaleY(0.45);
|
||||
opacity: 0.55;
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.vsm.data-v-e1de3b0a{display:flex;align-items:center;justify-content:center;flex-shrink:0}.vsm--md.data-v-e1de3b0a{width:72rpx;height:72rpx}.vsm--sm.data-v-e1de3b0a{width:64rpx;height:64rpx}.vsm-body.data-v-e1de3b0a{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.vsm-leaf.data-v-e1de3b0a{position:absolute;top:2rpx;left:50%;width:16rpx;height:16rpx;margin-left:-8rpx;border-radius:0 100%;background:#34d399;transform:rotate(-18deg);z-index:2}.vsm--on-dark .vsm-leaf.data-v-e1de3b0a{background:#a7f3d0}.vsm-face.data-v-e1de3b0a{position:relative;width:52rpx;height:52rpx;border-radius:50%;background:#fef9c3;border:3rpx solid #047857;box-shadow:0 4rpx 10rpx rgba(4,120,87,.18);z-index:1}.vsm--sm .vsm-face.data-v-e1de3b0a{width:46rpx;height:46rpx}.vsm--on-dark .vsm-face.data-v-e1de3b0a{background:#fffbeb;border-color:rgba(255,255,255,.85);box-shadow:0 4rpx 12rpx rgba(0,0,0,.12)}.vsm-eye.data-v-e1de3b0a{position:absolute;top:16rpx;width:6rpx;height:8rpx;border-radius:50%;background:#064e3b}.vsm--sm .vsm-eye.data-v-e1de3b0a{top:14rpx;width:5rpx;height:7rpx}.vsm--on-dark .vsm-eye.data-v-e1de3b0a{background:#134e4a}.vsm-eye--l.data-v-e1de3b0a{left:12rpx}.vsm-eye--r.data-v-e1de3b0a{right:12rpx}.vsm--sm .vsm-eye--l.data-v-e1de3b0a{left:10rpx}.vsm--sm .vsm-eye--r.data-v-e1de3b0a{right:10rpx}.vsm-blush.data-v-e1de3b0a{position:absolute;top:24rpx;width:10rpx;height:6rpx;border-radius:50%;background:rgba(251,113,133,.45);opacity:.85}.vsm--sm .vsm-blush.data-v-e1de3b0a{top:21rpx;width:8rpx;height:5rpx}.vsm-blush--l.data-v-e1de3b0a{left:6rpx}.vsm-blush--r.data-v-e1de3b0a{right:6rpx}.vsm--on-dark .vsm-blush.data-v-e1de3b0a{background:rgba(255,255,255,.35)}.vsm-mouth.data-v-e1de3b0a{position:absolute;left:50%;bottom:10rpx;width:18rpx;height:8rpx;margin-left:-9rpx;border-radius:0 0 18rpx 18rpx;background:#047857;transform-origin:center top}.vsm--sm .vsm-mouth.data-v-e1de3b0a{bottom:9rpx;width:16rpx;height:7rpx;margin-left:-8rpx}.vsm--on-dark .vsm-mouth.data-v-e1de3b0a{background:#ecfdf5}.vsm-waves.data-v-e1de3b0a{position:absolute;right:-2rpx;top:50%;display:flex;align-items:flex-end;gap:4rpx;height:28rpx;margin-top:-14rpx;z-index:0}.vsm-wave.data-v-e1de3b0a{width:5rpx;border-radius:4rpx;background:#047857;animation:vsm-wave-jump-e1de3b0a .72s ease-in-out infinite}.vsm--on-dark .vsm-wave.data-v-e1de3b0a{background:rgba(255,255,255,.9)}.vsm-wave--1.data-v-e1de3b0a{height:10rpx;animation-delay:0s}.vsm-wave--2.data-v-e1de3b0a{height:18rpx;animation-delay:.12s}.vsm-wave--3.data-v-e1de3b0a{height:12rpx;animation-delay:.24s}.vsm--active .vsm-body.data-v-e1de3b0a{animation:vsm-bob-e1de3b0a .9s ease-in-out infinite}.vsm--active .vsm-mouth.data-v-e1de3b0a{animation:vsm-talk-e1de3b0a .32s ease-in-out infinite alternate}.vsm--active .vsm-eye.data-v-e1de3b0a{animation:vsm-blink-e1de3b0a 2.4s ease-in-out infinite}@keyframes vsm-bob-e1de3b0a{0%,to{transform:translateY(0)}50%{transform:translateY(-4rpx)}}@keyframes vsm-talk-e1de3b0a{0%{transform:scaleY(.45);border-radius:0 0 18rpx 18rpx}to{transform:scaleY(1.15);height:12rpx;border-radius:50%}}@keyframes vsm-blink-e1de3b0a{0%,42%,46%,to{transform:scaleY(1)}44%{transform:scaleY(.15)}}@keyframes vsm-wave-jump-e1de3b0a{0%,to{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}
|
||||
Reference in New Issue
Block a user