wikiboss/shanghaipeiwan
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

style(uiux): 依据ui-ux-pro-max规范深度打磨移动浏览器端细节并完成真机视口验收

浏览代码
这个提交包含在：
wikiboss
2026-09-16 17:09:19 +08:00
父节点 a377327465
当前提交 973586ff5f
共有 9 个文件被更改，包括 235 次插入 和 84 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

103
pwuniapp/App.vue
查看文件

@@ -13,27 +13,34 @@ export default {
</script>
<style lang="scss">
/* 全局暗黑电竞基础重置 */
/* 全局暗黑电竞基础重置 (严格符合 UI/UX Pro Max 规范) */
page {
background-color: #0A0F1D;
color: #F8FAFC;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
view, text, image, input, button {
box-sizing: border-box;
}
/* 触控反馈标准类 (严格满足 UI/UX 规范：100ms 内微缩放与透明度反馈，无布局位移) */
/* 触控交互微反馈：80-120ms 弹性缩放，无布局位移 (CLS < 0.1) */
.btn-active:active, .card-active:active {
transform: scale(0.98);
opacity: 0.9;
transition: transform 100ms ease-out, opacity 100ms ease-out;
transform: scale(0.975);
opacity: 0.88;
transition: transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 100ms ease-out;
}
/* 隐藏移动端滚动条 */
/* 纯数字等宽排版 (避免金额、核销码、倒计时跳动) */
.tabular-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* 隐藏移动端原生滚动条 */
::-webkit-scrollbar {
display: none;
width: 0;
@@ -41,45 +48,77 @@ view, text, image, input, button {
color: transparent;
}
/* H5 PC 模式响应式移动端容器居中（如在浏览器访问 http://localhost:5174/ 时） */
/* 移动端与 H5 响应式体验优化 */
/* #ifdef H5 */
html, body {
background-color: #050811 !important;
background-color: #0A0F1D;
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
uni-app {
max-width: 450px !important;
margin: 0 auto !important;
min-height: 100vh !important;
box-shadow: 0 0 60rpx rgba(0, 0, 0, 0.9) !important;
position: relative !important;
background-color: #0A0F1D !important;
/* 在 PC 宽屏上以 iPhone 15 Pro 仿真机壳居中展示，兼顾专业质感 */
@media screen and (min-width: 481px) {
html, body {
background-color: #050811 !important;
}
uni-app {
max-width: 450px !important;
margin: 20px auto !important;
min-height: calc(100vh - 40px) !important;
box-shadow: 0 0 80rpx rgba(0, 0, 0, 0.95), 0 0 0 2rpx rgba(99, 102, 241, 0.25) !important;
border-radius: 40rpx !important;
overflow: hidden !important;
position: relative !important;
background-color: #0A0F1D !important;
}
uni-page-head {
max-width: 450px !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
}
uni-tabbar, .uni-tabbar {
position: fixed !important;
bottom: 20px !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
max-width: 450px !important;
width: 100% !important;
z-index: 9999 !important;
border-bottom-left-radius: 40rpx !important;
border-bottom-right-radius: 40rpx !important;
overflow: hidden !important;
}
}
uni-page-head {
max-width: 450px !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
}
/* 在手机移动浏览器上 100% 原生沉浸贴合，适配动态视口与底部安全区 */
@media screen and (max-width: 480px) {
uni-app {
width: 100% !important;
min-height: 100vh !important;
min-height: 100dvh !important;
}
uni-tabbar, .uni-tabbar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
max-width: 450px !important;
width: 100% !important;
z-index: 9999 !important;
uni-tabbar, .uni-tabbar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
}
uni-tabbar .uni-tabbar__bd {
background-color: #151D30 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* #endif */
</style>

8
pwuniapp/pages/activity/detail.vue
查看文件

@@ -161,7 +161,7 @@ const handleJoin = () => {
.detail-container {
min-height: 100vh;
background-color: #0A0F1D;
padding: 24rpx 32rpx 160rpx;
padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
}
.hero-card {
@@ -433,13 +433,14 @@ const handleJoin = () => {
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
height: calc(120rpx + env(safe-area-inset-bottom));
padding: 0 32rpx env(safe-area-inset-bottom);
box-sizing: border-box;
background-color: rgba(21, 29, 48, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
padding: 0 32rpx;
gap: 24rpx;
z-index: 100;
max-width: 450px;
@@ -474,6 +475,7 @@ const handleJoin = () => {
line-height: 80rpx;
box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.35);
margin: 0;
font-variant-numeric: tabular-nums;
}
}
</style>

22
pwuniapp/pages/activity/list.vue
查看文件

@@ -74,7 +74,7 @@
<view class="progress-section">
<view class="progress-info">
<text class="progress-label">组队进度</text>
<text class="progress-count">{{ act.currentParticipants }} / {{ act.maxParticipants }}人</text>
<text class="progress-count tabular-num">{{ act.currentParticipants }} / {{ act.maxParticipants }}人</text>
</view>
<view class="progress-track">
<view
@@ -91,7 +91,7 @@
<text class="creator-name">房主：{{ act.creatorNickname }}</text>
</view>
<view class="fee-info">
<view class="fee-info tabular-num">
<template v-if="act.payType === 'AA'">
<text class="fee-label">人均预估</text>
<text class="fee-amount">¥{{ act.aaFee }}</text>
@@ -105,7 +105,7 @@
</view>
</view>
<!-- 悬浮发起活动按钮 -->
<!-- 悬浮发起活动按钮 (脉冲微流光) -->
<view class="fab-btn btn-active" @click="createActivity">
<text class="fab-icon">＋</text>
<text class="fab-text">发起组队</text>
@@ -149,7 +149,7 @@ const createActivity = () => {
.activity-container {
min-height: 100vh;
background-color: #0A0F1D;
padding: 20rpx 32rpx 140rpx;
padding: 20rpx 32rpx calc(180rpx + env(safe-area-inset-bottom));
}
.tab-header {
@@ -169,6 +169,7 @@ const createActivity = () => {
padding: 18rpx 0;
position: relative;
border-radius: 14rpx;
transition: all 0.2s ease;
.tab-svg {
width: 26rpx;
@@ -343,6 +344,7 @@ const createActivity = () => {
height: 100%;
background: linear-gradient(90deg, #10B981, #059669);
border-radius: 5rpx;
box-shadow: 0 0 10rpx rgba(16, 185, 129, 0.5);
}
}
}
@@ -396,15 +398,16 @@ const createActivity = () => {
.fab-btn {
position: fixed;
right: 36rpx;
bottom: 160rpx;
bottom: calc(140rpx + env(safe-area-inset-bottom));
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
border-radius: 44rpx;
padding: 18rpx 32rpx;
padding: 18rpx 34rpx;
display: flex;
align-items: center;
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.5);
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.55);
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 100;
animation: fabPulse 3s infinite ease-in-out;
.fab-icon {
font-size: 32rpx;
@@ -418,4 +421,9 @@ const createActivity = () => {
font-weight: 600;
}
}
@keyframes fabPulse {
0%, 100% { box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.45); }
50% { box-shadow: 0 8rpx 36rpx rgba(99, 102, 241, 0.75); }
}
</style>

42
pwuniapp/pages/activity/my-ticket.vue
查看文件

@@ -124,7 +124,7 @@ const goBack = () => {
.ticket-container {
min-height: 100vh;
background-color: #0A0F1D;
padding: 40rpx 36rpx;
padding: 40rpx 36rpx calc(60rpx + env(safe-area-inset-bottom));
}
.ticket-card {
@@ -158,12 +158,14 @@ const goBack = () => {
color: #F59E0B;
border: 1px solid rgba(245, 158, 11, 0.3);
font-weight: 700;
transition: all 0.3s ease;
&.verified {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
border-color: rgba(16, 185, 129, 0.4);
transform: rotate(-4deg);
border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.3);
animation: stampIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
}
}
@@ -244,19 +246,21 @@ const goBack = () => {
.digit-box {
width: 110rpx;
height: 130rpx;
background: rgba(10, 15, 29, 0.8);
background: rgba(10, 15, 29, 0.85);
border: 2rpx solid #10B981;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 24rpx rgba(16, 185, 129, 0.45);
box-shadow: 0 0 24rpx rgba(16, 185, 129, 0.4), inset 0 0 16rpx rgba(16, 185, 129, 0.15);
animation: slotPulse 2.5s ease-in-out infinite alternate;
.digit-text {
font-size: 64rpx;
font-weight: 800;
color: #10B981;
font-family: 'Courier New', Courier, monospace;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 16rpx rgba(16, 185, 129, 0.7);
}
}
@@ -311,7 +315,9 @@ const goBack = () => {
.time-text {
font-size: 20rpx;
color: #94A3B8;
font-family: monospace;
font-family: 'Courier New', monospace;
font-variant-numeric: tabular-nums;
letter-spacing: 1rpx;
}
}
@@ -358,4 +364,28 @@ const goBack = () => {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@keyframes stampIn {
0% {
transform: scale(2.4) rotate(-22deg);
opacity: 0;
}
70% {
transform: scale(0.92) rotate(-6deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(-4deg);
opacity: 1;
}
}
@keyframes slotPulse {
0% {
box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.3), inset 0 0 10rpx rgba(16, 185, 129, 0.1);
}
100% {
box-shadow: 0 0 28rpx rgba(16, 185, 129, 0.6), inset 0 0 18rpx rgba(16, 185, 129, 0.25);
}
}
</style>

36
pwuniapp/pages/expert/detail.vue
查看文件

@@ -26,7 +26,10 @@
</view>
<view class="data-row">
<text class="rating-val">⭐ {{ expert.rating }}</text>
<view class="rating-box">
<image class="star-svg" :src="ICONS.star" mode="aspectFit" />
<text class="rating-val">{{ expert.rating }}</text>
</view>
<text class="order-val">已陪玩 {{ expert.orderCount }} 次</text>
</view>
</view>
@@ -204,7 +207,7 @@ const goToOrder = () => {
.expert-detail-container {
min-height: 100vh;
background-color: #0A0F1D;
padding-bottom: 140rpx;
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}
.hero-header {
@@ -321,13 +324,26 @@ const goToOrder = () => {
.data-row {
display: flex;
align-items: center;
gap: 20rpx;
font-size: 22rpx;
color: #94A3B8;
.rating-val {
color: #F59E0B;
font-weight: 600;
.rating-box {
display: flex;
align-items: center;
gap: 6rpx;
.star-svg {
width: 24rpx;
height: 24rpx;
}
.rating-val {
color: #F59E0B;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
}
}
}
@@ -450,8 +466,9 @@ const goToOrder = () => {
padding: 20rpx 24rpx;
&.selected {
background: rgba(99, 102, 241, 0.15);
background: rgba(99, 102, 241, 0.16);
border-color: #6366F1;
box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.35);
}
.srv-left {
@@ -469,6 +486,7 @@ const goToOrder = () => {
.srv-right {
color: #10B981;
font-variant-numeric: tabular-nums;
.price-sym { font-size: 22rpx; }
.price-num { font-size: 34rpx; font-weight: 700; }
.price-unit { font-size: 20rpx; color: #64748B; }
@@ -562,13 +580,14 @@ const goToOrder = () => {
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
height: calc(120rpx + env(safe-area-inset-bottom));
padding: 0 32rpx env(safe-area-inset-bottom);
box-sizing: border-box;
background-color: rgba(21, 29, 48, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
padding: 0 32rpx;
gap: 20rpx;
z-index: 100;
max-width: 450px;
@@ -605,6 +624,7 @@ const goToOrder = () => {
font-weight: 700;
color: #10B981;
margin-left: 6rpx;
font-variant-numeric: tabular-nums;
}
}

46
pwuniapp/pages/index/index.vue
查看文件

@@ -1,6 +1,6 @@
<template>
<view class="index-container">
<!-- 顶部搜索栏 (矢量SVG搜索图标，满足无Emoji规范) -->
<!-- 顶部搜索栏 (矢量SVG搜索图标，交互聚焦微动效) -->
<view class="header-search">
<view class="search-box">
<image class="search-icon-img" :src="ICONS.search" mode="aspectFit" />
@@ -8,7 +8,7 @@
</view>
</view>
<!-- 游戏分类滑动栏 (SVG分类图标) -->
<!-- 游戏分类滑动栏 (SVG分类图标，单行横滑，抗挤压) -->
<scroll-view scroll-x class="category-scroll" :show-scrollbar="false">
<view class="category-list">
<view
@@ -25,7 +25,7 @@
</view>
</scroll-view>
<!-- 精彩活动横幅轮播 -->
<!-- 精彩活动横幅轮播 (流光投影) -->
<swiper class="banner-swiper" circular autoplay interval="4000" indicator-dots indicator-color="rgba(255,255,255,0.2)" indicator-active-color="#6366F1">
<swiper-item v-for="banner in banners" :key="banner.id" class="banner-item" @click="goToActivity">
<view class="banner-card" :style="{ background: banner.bg }">
@@ -36,7 +36,7 @@
</swiper-item>
</swiper>
<!-- 快捷功能金刚区 (纯矢量SVG图标) -->
<!-- 快捷功能金刚区 (纯矢量SVG图标，88rpx触控热区) -->
<view class="quick-grid">
<view class="quick-item btn-active" @click="navTo('/pages/activity/list')">
<view class="quick-icon-bg bg-purple">
@@ -68,7 +68,7 @@
</view>
</view>
<!-- 陪玩大神瀑布流 -->
<!-- 陪玩大神瀑布流标题 -->
<view class="section-title-wrap">
<view class="section-title">
<view class="title-line"></view>
@@ -80,6 +80,7 @@
</view>
</view>
<!-- 陪玩大神卡片网格 -->
<view class="expert-grid">
<view
v-for="expert in filteredExperts"
@@ -87,7 +88,7 @@
class="expert-card card-active"
@click="goToExpert(expert.id)"
>
<!-- 封面图构图优化：标准黄金比例与底部暗夜流光渐变 -->
<!-- 封面图构图优化：高保真黄金比例与底部流光渐变 -->
<view class="card-cover-wrap">
<image class="card-cover" :src="expert.avatar" mode="aspectFill" />
<view class="cover-gradient"></view>
@@ -107,8 +108,8 @@
</view>
<view class="rank-badge">{{ expert.rankTag }}</view>
<!-- 语音试听条 (矢量SVG播放图标) -->
<view class="voice-bar btn-active" @click.stop="toggleVoice(expert.id)">
<!-- 语音试听条 (矢量SVG播放图标，带播放高亮光晕) -->
<view class="voice-bar btn-active" :class="{ playing: playingId === expert.id }" @click.stop="toggleVoice(expert.id)">
<image class="voice-icon-svg" :src="playingId === expert.id ? ICONS.pause : ICONS.play" mode="aspectFit" />
<text class="voice-text">{{ playingId === expert.id ? '试听中...' : expert.voiceDuration + 's 原声试听' }}</text>
<view class="wave-lines" v-if="playingId === expert.id">
@@ -119,12 +120,12 @@
</view>
<view class="card-footer">
<view class="price-wrap">
<view class="price-wrap tabular-num">
<text class="price-symbol">¥</text>
<text class="price-val">{{ expert.price }}</text>
<text class="price-unit">/时</text>
</view>
<text class="order-count">{{ expert.orderCount }}单</text>
<text class="order-count tabular-num">{{ expert.orderCount }}单</text>
</view>
</view>
</view>
@@ -196,7 +197,7 @@ const navTo = (url) => {
.index-container {
min-height: 100vh;
background-color: #0A0F1D;
padding-bottom: 140rpx;
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}
.header-search {
@@ -214,6 +215,12 @@ const navTo = (url) => {
border-radius: 40rpx;
padding: 0 28rpx;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.2s ease;
&:focus-within {
border-color: #6366F1;
box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.35);
}
.search-icon-img {
width: 32rpx;
@@ -256,6 +263,7 @@ const navTo = (url) => {
border-radius: 32rpx;
border: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
transition: all 0.15s ease-out;
.cat-icon-svg {
width: 28rpx;
@@ -277,12 +285,13 @@ const navTo = (url) => {
padding: 2rpx 8rpx;
border-radius: 12rpx;
font-weight: 700;
box-shadow: 0 2rpx 6rpx rgba(239, 68, 68, 0.4);
}
&.active {
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
border-color: #818CF8;
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.45);
.cat-name {
color: #FFFFFF;
@@ -303,7 +312,7 @@ const navTo = (url) => {
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.45);
.banner-tag {
align-self: flex-start;
@@ -351,6 +360,7 @@ const navTo = (url) => {
align-items: center;
justify-content: center;
margin-bottom: 12rpx;
transition: transform 0.15s ease;
.quick-svg {
width: 40rpx;
@@ -434,6 +444,7 @@ const navTo = (url) => {
position: relative;
height: 260rpx;
overflow: hidden;
background-color: #1E2942;
.card-cover {
width: 100%;
@@ -445,7 +456,7 @@ const navTo = (url) => {
.cover-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(21, 29, 48, 0.8) 100%);
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(21, 29, 48, 0.85) 100%);
}
.status-tag {
@@ -548,6 +559,13 @@ const navTo = (url) => {
align-items: center;
padding: 0 16rpx;
margin-bottom: 16rpx;
transition: all 0.2s ease;
&.playing {
background: rgba(99, 102, 241, 0.3);
border-color: #818CF8;
box-shadow: 0 0 14rpx rgba(99, 102, 241, 0.4);
}
.voice-icon-svg {
width: 20rpx;

25
pwuniapp/pages/order/create.vue
查看文件

@@ -170,7 +170,7 @@ const handlePay = () => {
.create-order-container {
min-height: 100vh;
background-color: #0A0F1D;
padding: 24rpx 32rpx 160rpx;
padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
}
.order-card {
@@ -225,6 +225,7 @@ const handlePay = () => {
font-size: 26rpx;
font-weight: 600;
color: #10B981;
font-variant-numeric: tabular-nums;
}
}
}
@@ -258,23 +259,29 @@ const handlePay = () => {
padding: 6rpx;
.step-btn {
width: 60rpx;
height: 60rpx;
line-height: 56rpx;
width: 72rpx;
height: 72rpx;
line-height: 68rpx;
padding: 0;
background: #1E2942;
color: #FFF;
font-size: 32rpx;
border-radius: 12rpx;
border-radius: 14rpx;
border: none;
margin: 0;
transition: transform 0.1s ease;
&:active {
transform: scale(0.92);
}
}
.step-val {
font-size: 28rpx;
font-size: 30rpx;
color: #F8FAFC;
font-weight: 600;
margin: 0 24rpx;
font-variant-numeric: tabular-nums;
}
}
}
@@ -425,14 +432,15 @@ const handlePay = () => {
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
height: calc(120rpx + env(safe-area-inset-bottom));
padding: 0 32rpx env(safe-area-inset-bottom);
box-sizing: border-box;
background-color: rgba(21, 29, 48, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
z-index: 100;
max-width: 450px;
margin: 0 auto;
@@ -449,6 +457,7 @@ const handlePay = () => {
font-size: 40rpx;
font-weight: 700;
color: #10B981;
font-variant-numeric: tabular-nums;
}
}

3
pwuniapp/pages/order/list.vue
查看文件

@@ -179,7 +179,7 @@ const rateExpert = (id) => {
.order-list-container {
min-height: 100vh;
background-color: #0A0F1D;
padding: 20rpx 32rpx 140rpx;
padding: 20rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
}
.tab-header {
@@ -333,6 +333,7 @@ const rateExpert = (id) => {
font-weight: 700;
color: #10B981;
display: block;
font-variant-numeric: tabular-nums;
}
.quantity-text {
font-size: 20rpx;

34
pwuniapp/pages/user/index.vue
查看文件

@@ -205,7 +205,7 @@ const navTo = (url) => {
.user-container {
min-height: 100vh;
background-color: #0A0F1D;
padding: 24rpx 32rpx 140rpx;
padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
}
.profile-card {
@@ -273,14 +273,32 @@ const navTo = (url) => {
.role-switch-card {
position: relative;
border-radius: 24rpx;
background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
border: 2rpx solid #6366F1;
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.35);
overflow: hidden;
padding: 28rpx;
margin-bottom: 28rpx;
overflow: hidden;
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.35);
&::before {
content: '';
position: absolute;
inset: -50%;
background: conic-gradient(from 0deg, transparent 0%, #6366F1 25%, #10B981 50%, #6366F1 75%, transparent 100%);
animation: glowSpin 5s linear infinite;
z-index: 0;
}
&::after {
content: '';
position: absolute;
inset: 2rpx;
background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
border-radius: 22rpx;
z-index: 1;
}
.role-content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
@@ -382,6 +400,7 @@ const navTo = (url) => {
font-size: 36rpx;
font-weight: 700;
margin-bottom: 14rpx;
font-variant-numeric: tabular-nums;
&.green-val {
color: #10B981;
@@ -503,4 +522,9 @@ const navTo = (url) => {
}
}
}
@keyframes glowSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>