更新
This commit is contained in:
+86
@@ -0,0 +1,86 @@
|
||||
"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);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/CelebrateBurst.js.map
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"tongji-icon": "./TongjiIcon"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="celebrate-root data-v-313f45d6" catchtouchmove="{{i}}"><view wx:for="{{b}}" wx:for-item="p" wx:key="a" class="celebrate-particle data-v-313f45d6" style="{{p.b}}"/><view wx:if="{{c}}" class="{{['celebrate-card', 'data-v-313f45d6', h && 'pop']}}"><view class="celebrate-card-glow data-v-313f45d6"/><tongji-icon wx:if="{{d}}" class="data-v-313f45d6" u-i="313f45d6-0" bind:__l="__l" u-p="{{d}}"/><text class="celebrate-card-title data-v-313f45d6">{{e}}</text><text wx:if="{{f}}" class="celebrate-card-sub data-v-313f45d6">{{g}}</text></view></view>
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* 这里是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;
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
"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 = `
|
||||
<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}
|
||||
<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);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/SugarTreeGraphic.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['sugar-tree-graphic', 'data-v-d91cb5e7', i, j, k, l]}}"><view class="stg-glow data-v-d91cb5e7"/><view wx:if="{{a}}" class="stg-aura data-v-d91cb5e7"/><image wx:if="{{b}}" class="stg-image data-v-d91cb5e7" src="{{c}}" mode="aspectFit" binderror="{{d}}"/><text wx:else class="stg-emoji data-v-d91cb5e7">{{e}}</text><view wx:if="{{f}}" class="stg-sparkle stg-sparkle-a data-v-d91cb5e7"/><view wx:if="{{g}}" class="stg-sparkle stg-sparkle-b data-v-d91cb5e7"/><view wx:if="{{h}}" class="stg-sparkle stg-sparkle-c data-v-d91cb5e7"/></view>
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
/**
|
||||
* 这里是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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const tongji_utils_svgDataUrl = require("../utils/svgDataUrl.js");
|
||||
const _sfc_main = {
|
||||
__name: "TongjiIcon",
|
||||
props: {
|
||||
name: { type: String, required: true },
|
||||
size: { type: String, default: "md" },
|
||||
color: { type: String, default: "#204E2B" }
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const useFallback = common_vendor.ref(false);
|
||||
const ICON_PATHS = {
|
||||
view: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
|
||||
ticket: '<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/>',
|
||||
calendar: '<rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>',
|
||||
flame: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
|
||||
"check-circle": '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',
|
||||
glucose: '<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>',
|
||||
heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
|
||||
activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
|
||||
users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
||||
user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
person: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
|
||||
"alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
|
||||
minus: '<path d="M5 12h14"/>',
|
||||
droplet: '<path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.5-2.5-5.5C15 7 12 2 12 2S9 7 7.5 9.5 5 13 5 15a7 7 0 0 0 7 7z"/>',
|
||||
sparkles: '<path d="m12 3-1.9 5.8L4 12l5.8 1.9L12 21l1.9-5.8L20 12l-5.8-1.9L12 3Z"/><path d="M5 3v4M19 17v4M3 5h4M17 19h4"/>',
|
||||
trophy: '<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z"/>',
|
||||
share: '<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"/>',
|
||||
plus: '<path d="M5 12h14M12 5v14"/>',
|
||||
refresh: '<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16M21 21v-5h-5"/>',
|
||||
volume: '<path d="M11 5 6 9H2v6h4l5 4V5zM15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>',
|
||||
pause: '<rect width="4" height="16" x="14" y="4" rx="1"/><rect width="4" height="16" x="6" y="4" rx="1"/>',
|
||||
play: '<polygon points="6 3 20 12 6 21 6 3"/>',
|
||||
info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>',
|
||||
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41-1.41M17.66 6.34l1.41-1.41M6.34 4.93l1.41 1.41"/>',
|
||||
moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
||||
sunset: '<path d="M12 10V2M18.364 5.636l-2.12 2.12M5.636 18.364l2.12-2.12M22 18h-3M5 18H2M18.364 18.364l-2.12-2.12M5.636 5.636l2.12 2.12M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>',
|
||||
mic: '<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/>',
|
||||
camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
|
||||
bulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
|
||||
leaf: '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/>',
|
||||
utensils: '<path d="M3 2v7c0 1.1.9 2 2 2a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-3 4.5v6a2 2 0 0 0 2 2h1Z"/><path d="M18 15v7"/>',
|
||||
egg: '<path d="M12 22c4.97 0 8-3.27 8-7.31C20 9.65 16.42 2 12 2S4 9.65 4 14.69C4 18.73 7.03 22 12 22Z"/>',
|
||||
home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
|
||||
"plus-circle": '<circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/>',
|
||||
"chevron-right": '<path d="m9 18 6-6-6-6"/>',
|
||||
"chevron-left": '<path d="m15 18-6-6 6-6"/>',
|
||||
check: '<path d="M20 6 9 17l-5-5"/>',
|
||||
settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
|
||||
syringe: '<path d="m18 2 4 4"/><path d="m17 7 3-3"/><path d="M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5"/><path d="m9 11 4 4"/><path d="m5 19-3 3"/><path d="m14 4 6 6"/>',
|
||||
zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>'
|
||||
};
|
||||
const ICON_FALLBACK = {
|
||||
view: "👁",
|
||||
ticket: "🎫",
|
||||
calendar: "📅",
|
||||
flame: "🔥",
|
||||
"check-circle": "✓",
|
||||
glucose: "💧",
|
||||
heart: "❤",
|
||||
activity: "🏃",
|
||||
users: "👥",
|
||||
user: "👤",
|
||||
person: "👤",
|
||||
send: "➤",
|
||||
"alert-triangle": "⚠",
|
||||
minus: "—",
|
||||
droplet: "💧",
|
||||
sparkles: "✨",
|
||||
trophy: "🏆",
|
||||
share: "↗",
|
||||
plus: "+",
|
||||
refresh: "↻",
|
||||
volume: "🔊",
|
||||
pause: "⏸",
|
||||
play: "▶",
|
||||
info: "!",
|
||||
sun: "☀",
|
||||
moon: "🌙",
|
||||
sunset: "☀",
|
||||
mic: "🎤",
|
||||
camera: "📷",
|
||||
bulb: "💡",
|
||||
leaf: "🥬",
|
||||
utensils: "🍴",
|
||||
egg: "🍳",
|
||||
home: "🏠",
|
||||
"plus-circle": "⊕",
|
||||
"chevron-right": "›",
|
||||
"chevron-left": "‹",
|
||||
check: "✓",
|
||||
settings: "⚙",
|
||||
syringe: "💉",
|
||||
zap: "⚡"
|
||||
};
|
||||
const strokeColor = common_vendor.computed(() => {
|
||||
const c = String(props.color || "#204E2B").trim();
|
||||
return /^#[0-9A-Fa-f]{3,8}$/.test(c) ? c : "#204E2B";
|
||||
});
|
||||
const iconSrc = common_vendor.computed(() => {
|
||||
const path = ICON_PATHS[props.name] || ICON_PATHS.view;
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${strokeColor.value}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
|
||||
return tongji_utils_svgDataUrl.svgToDataUrl(svg);
|
||||
});
|
||||
common_vendor.computed(() => ICON_FALLBACK[props.name] || ICON_FALLBACK.view);
|
||||
function onImageError() {
|
||||
useFallback.value = true;
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: !useFallback.value
|
||||
}, !useFallback.value ? {
|
||||
b: common_vendor.n(`tj-icon--${__props.name}`),
|
||||
c: common_vendor.n(`tj-icon--${__props.size}`),
|
||||
d: iconSrc.value,
|
||||
e: common_vendor.o(onImageError, "4d")
|
||||
} : {}, {
|
||||
f: common_vendor.n(`tj-icon-wrap--${__props.size}`)
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-f41c6626"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/TongjiIcon.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="{{['tj-icon-wrap', 'data-v-f41c6626', f]}}"><image wx:if="{{a}}" class="{{['tj-icon', 'data-v-f41c6626', b, c]}}" src="{{d}}" mode="aspectFit" binderror="{{e}}"/></view>
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* 这里是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;
|
||||
}
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
"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);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/VoiceSpeakMascot.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['vsm', 'data-v-e1de3b0a', b, c]}}"><view class="vsm-body data-v-e1de3b0a"><view class="vsm-leaf data-v-e1de3b0a" aria-hidden="true"/><view class="vsm-face data-v-e1de3b0a"><view class="vsm-eye vsm-eye--l data-v-e1de3b0a"/><view class="vsm-eye vsm-eye--r data-v-e1de3b0a"/><view class="vsm-blush vsm-blush--l data-v-e1de3b0a"/><view class="vsm-blush vsm-blush--r data-v-e1de3b0a"/><view class="vsm-mouth data-v-e1de3b0a"/></view><view wx:if="{{a}}" class="vsm-waves data-v-e1de3b0a" aria-hidden="true"><view class="vsm-wave vsm-wave--1 data-v-e1de3b0a"/><view class="vsm-wave vsm-wave--2 data-v-e1de3b0a"/><view class="vsm-wave vsm-wave--3 data-v-e1de3b0a"/></view></view></view>
|
||||
+230
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 这里是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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user