yrq/----
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload project source code

Browse Source
This commit is contained in:
1346185973@qq.com
2026-04-30 18:49:43 +08:00
commit 9b394ba682
2277 changed files with 660945 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

487
前端源码/uni-app/components/MysticFantasyBg.vue Normal file
View File

@@ -0,0 +1,487 @@
<template>
<view class="mfgb" aria-hidden="true">
<view class="mfgb__base" />
<!-- 暗纹：万字锦地（极低透明度） -->
<view class="mfgb__wanzi" />
<view class="mfgb__ink" />
<view
v-for="c in clouds"
:key="c.id"
class="mfgb__cloud"
:style="getCloudStyle(c)"
/>
<!-- 八卦 + 太极：先天卦序，极慢旋转 -->
<view class="mfgb__bagua-wrap">
<svg
class="mfgb__bagua-svg mfgb__bagua-spin"
viewBox="-100 -100 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id="mfgb-gold-stroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color: rgba(212, 175, 55, 0.55)" />
<stop offset="100%" style="stop-color: rgba(212, 175, 55, 0.2)" />
</linearGradient>
</defs>
<circle
cx="0"
cy="0"
r="90"
fill="none"
stroke="url(#mfgb-gold-stroke)"
stroke-width="0.6"
opacity="0.35"
/>
<circle
cx="0"
cy="0"
r="78"
fill="none"
stroke="rgba(212, 175, 55, 0.12)"
stroke-width="0.4"
stroke-dasharray="4 6"
opacity="0.5"
/>
<g
v-for="(trig, ti) in baguaTrigrams"
:key="'bg-' + ti"
:transform="'rotate(' + (ti * 45 - 90) + ') translate(0 -72)'"
>
<g v-for="(solid, li) in trig" :key="'ln-' + ti + '-' + li">
<line
v-if="solid"
x1="-11"
:y1="8 - li * 8"
x2="11"
:y2="8 - li * 8"
stroke="rgba(212, 175, 55, 0.42)"
stroke-width="2.4"
stroke-linecap="round"
/>
<g v-else>
<line
x1="-11"
:y1="8 - li * 8"
x2="-3.5"
:y2="8 - li * 8"
stroke="rgba(212, 175, 55, 0.42)"
stroke-width="2.4"
stroke-linecap="round"
/>
<line
x1="3.5"
:y1="8 - li * 8"
x2="11"
:y2="8 - li * 8"
stroke="rgba(212, 175, 55, 0.42)"
stroke-width="2.4"
stroke-linecap="round"
/>
</g>
</g>
</g>
<!-- 太极简形：阴阳鱼 -->
<circle cx="0" cy="0" r="20" fill="none" stroke="rgba(212, 175, 55, 0.28)" stroke-width="0.8" />
<path
d="M0-20 A20 20 0 0 1 0 20 A10 10 0 0 1 0 0 A10 10 0 0 0 0-20 Z"
fill="rgba(212, 175, 55, 0.08)"
/>
<path
d="M0 20 A20 20 0 0 1 0-20 A10 10 0 0 1 0 0 A10 10 0 0 0 0 20 Z"
fill="rgba(15, 23, 42, 0.45)"
/>
<circle cx="0" cy="-10" r="3.2" fill="rgba(15, 23, 42, 0.75)" />
<circle cx="0" cy="10" r="3.2" fill="rgba(212, 175, 55, 0.4)" />
</svg>
</view>
<!-- 四角卷云纹 -->
<view
v-for="corner in cornerKeys"
:key="corner"
class="mfgb__corner"
:class="'mfgb__corner--' + corner"
>
<svg class="mfgb__corner-svg" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path
class="mfgb__corner-path"
d="M6 58 C6 14 14 6 58 6 M10 54 C10 22 22 10 54 10 M16 48 C18 28 28 18 48 16"
fill="none"
stroke="rgba(212, 175, 55, 0.22)"
stroke-width="1.2"
stroke-linecap="round"
/>
<path
class="mfgb__corner-path"
d="M52 12 Q40 12 36 20 Q32 28 38 36"
fill="none"
stroke="rgba(212, 175, 55, 0.16)"
stroke-width="0.9"
stroke-linecap="round"
/>
</svg>
</view>
<view
class="mfgb__sigil mfgb__sigil--outer"
:class="sigilModifier"
/>
<view
class="mfgb__sigil mfgb__sigil--inner"
:class="sigilModifier"
/>
<view v-for="s in stars" :key="s.id" class="mfgb__star" :style="getStarStyle(s)" />
<view class="mfgb__glow" />
<view class="mfgb__mist" />
<view class="mfgb__vignette" />
</view>
</template>
<script setup lang="ts">
import { computed } from 'vue';
export type MysticRoundPhase = 'ready' | 'loading' | 'result';
const props = withDefaults(
defineProps<{
/** 测名页：测算中加快阵法转速；登录页可省略（默认 ready） */
roundPhase?: MysticRoundPhase;
}>(),
{ roundPhase: 'ready' },
);
const sigilModifier = computed(() => {
if (props.roundPhase === 'loading') return 'mfgb__sigil--phase-loading';
if (props.roundPhase === 'result') return 'mfgb__sigil--phase-result';
return '';
});
/** 先天八卦卦序（自下而上爻）：乾 兑 离 震 巽 坎 艮 坤 */
const baguaTrigrams: boolean[][] = [
[true, true, true],
[true, true, false],
[true, false, true],
[true, false, false],
[false, true, true],
[false, true, false],
[false, false, true],
[false, false, false],
];
const cornerKeys = ['tl', 'tr', 'bl', 'br'] as const;
const stars = Array.from({ length: 36 }, (_, i) => ({
id: `mfgb-st-${i}`,
top: Math.random() * 100,
left: Math.random() * 100,
size: Math.random() * 2.2 + 0.8,
opacity: Math.random() * 0.35 + 0.12,
duration: Math.random() * 4 + 3,
delay: Math.random() * 4,
}));
const clouds = Array.from({ length: 7 }, (_, i) => ({
id: `mfgb-cl-${i}`,
top: Math.random() * 70 - 10,
left: Math.random() * 90 - 5,
w: 180 + Math.random() * 220,
h: 60 + Math.random() * 80,
opacity: 0.08 + Math.random() * 0.12,
duration: 28 + Math.random() * 18,
delay: Math.random() * -40,
}));
const getStarStyle = (s: (typeof stars)[number]) => ({
top: `${s.top}%`,
left: `${s.left}%`,
width: `${s.size}px`,
height: `${s.size}px`,
opacity: s.opacity,
animationDuration: `${s.duration}s`,
animationDelay: `${s.delay}s`,
});
const getCloudStyle = (c: (typeof clouds)[number]) => ({
top: `${c.top}%`,
left: `${c.left}%`,
width: `${c.w}px`,
height: `${c.h}px`,
opacity: c.opacity,
animationDuration: `${c.duration}s`,
animationDelay: `${c.delay}s`,
});
</script>
<style scoped>
.mfgb {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.mfgb__base {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 120% 80% at 50% -20%, rgba(212, 175, 55, 0.14), transparent 52%),
radial-gradient(ellipse 90% 60% at 80% 20%, rgba(88, 28, 135, 0.18), transparent 45%),
radial-gradient(ellipse 70% 50% at 10% 30%, rgba(127, 29, 29, 0.12), transparent 50%),
linear-gradient(165deg, #070a12 0%, #12102a 38%, #0a1628 72%, #05080f 100%);
}
/* 万字锦地暗纹 */
.mfgb__wanzi {
position: absolute;
inset: 0;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23d4af37' stroke-width='0.6' d='M24 4v40M4 24h40M12 12l24 24M36 12L12 36'/%3E%3C/svg%3E");
background-size: 48px 48px;
}
.mfgb__ink {
position: absolute;
left: 0;
right: 0;
bottom: -5%;
height: 42%;
opacity: 0.35;
background:
radial-gradient(ellipse 100% 55% at 20% 100%, rgba(15, 23, 42, 0.95), transparent 70%),
radial-gradient(ellipse 90% 50% at 55% 100%, rgba(30, 41, 59, 0.85), transparent 68%),
radial-gradient(ellipse 80% 45% at 85% 100%, rgba(15, 23, 42, 0.9), transparent 65%);
filter: blur(1px);
mask-image: linear-gradient(to top, black 0%, black 55%, transparent 100%);
}
.mfgb__cloud {
position: absolute;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.06) 45%, transparent 70%);
filter: blur(18px);
animation: mfgb-cloud-drift linear infinite;
}
@keyframes mfgb-cloud-drift {
0% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-2%, 1.5%) scale(1.03);
}
100% {
transform: translate(0, 0) scale(1);
}
}
/* 八卦层：置于祥云之下、阵环之上，略透明 */
.mfgb__bagua-wrap {
position: absolute;
left: 50%;
top: 52%;
width: min(92vw, 680px);
height: min(92vw, 680px);
transform: translate(-50%, -50%);
opacity: 0.38;
z-index: 1;
}
.mfgb__bagua-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.mfgb__bagua-spin {
animation: mfgb-bagua-spin 200s linear infinite;
transform-origin: center center;
}
@keyframes mfgb-bagua-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.mfgb__corner {
position: absolute;
width: 72px;
height: 72px;
z-index: 1;
opacity: 0.85;
}
.mfgb__corner-svg {
width: 100%;
height: 100%;
display: block;
}
.mfgb__corner--tl {
top: calc(12px + env(safe-area-inset-top, 0px));
left: 12px;
}
.mfgb__corner--tr {
top: calc(12px + env(safe-area-inset-top, 0px));
right: 12px;
transform: scaleX(-1);
}
.mfgb__corner--bl {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
left: 12px;
transform: scaleY(-1);
}
.mfgb__corner--br {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
right: 12px;
transform: scale(-1);
}
.mfgb__sigil {
position: absolute;
left: 50%;
top: 54%;
border-radius: 50%;
transform: translate(-50%, -50%);
border: 1px dashed rgba(212, 175, 55, 0.28);
box-shadow:
0 0 40px rgba(212, 175, 55, 0.08),
inset 0 0 30px rgba(212, 175, 55, 0.04);
opacity: 0.65;
z-index: 2;
}
.mfgb__sigil--outer {
width: min(72vw, 560px);
height: min(72vw, 560px);
animation: mfgb-sigil-cw 48s linear infinite;
}
.mfgb__sigil--inner {
width: min(52vw, 400px);
height: min(52vw, 400px);
border-style: dotted;
border-color: rgba(212, 175, 55, 0.2);
animation: mfgb-sigil-ccw 32s linear infinite;
}
.mfgb__sigil--outer.mfgb__sigil--phase-loading {
animation-duration: 2.8s;
border-color: rgba(212, 175, 55, 0.55);
opacity: 0.85;
box-shadow:
0 0 56px rgba(212, 175, 55, 0.15),
inset 0 0 36px rgba(212, 175, 55, 0.08);
}
.mfgb__sigil--inner.mfgb__sigil--phase-loading {
animation-duration: 2s;
border-color: rgba(212, 175, 55, 0.42);
opacity: 0.88;
}
.mfgb__sigil--outer.mfgb__sigil--phase-result {
animation-duration: 5.5s;
border-color: rgba(212, 175, 55, 0.35);
opacity: 0.62;
}
.mfgb__sigil--inner.mfgb__sigil--phase-result {
animation-duration: 4s;
border-color: rgba(212, 175, 55, 0.22);
opacity: 0.58;
}
@keyframes mfgb-sigil-cw {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes mfgb-sigil-ccw {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
.mfgb__star {
position: absolute;
border-radius: 50%;
background: rgba(255, 248, 220, 0.95);
box-shadow: 0 0 12px rgba(212, 175, 55, 0.45), 0 0 2px rgba(255, 255, 255, 0.8);
animation: mfgb-twinkle 2.8s ease-in-out infinite;
z-index: 3;
}
@keyframes mfgb-twinkle {
0%,
100% {
transform: scale(0.9);
opacity: 0.2;
}
50% {
transform: scale(1.2);
opacity: 0.65;
}
}
.mfgb__glow {
position: absolute;
left: 50%;
top: 48%;
width: min(90vw, 680px);
height: min(90vw, 680px);
transform: translate(-50%, -50%);
background: radial-gradient(circle at 50% 35%, rgba(212, 175, 55, 0.22), rgba(139, 92, 246, 0.06) 45%, transparent 65%);
filter: blur(36px);
opacity: 0.9;
animation: mfgb-glow-pulse 4.2s ease-in-out infinite;
z-index: 2;
}
@keyframes mfgb-glow-pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(0.94);
opacity: 0.7;
}
50% {
transform: translate(-50%, -50%) scale(1.06);
opacity: 1;
}
}
.mfgb__mist {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38%;
background: linear-gradient(to top, rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0));
pointer-events: none;
z-index: 4;
}
.mfgb__vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.45) 100%);
pointer-events: none;
z-index: 5;
}
</style>