hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 暗色模式骨架屏优化

Browse Source
This commit is contained in:
gcd 2025-04-21 22:11:08 +08:00
parent a1f1bd46b8
commit de27ffffe4
3 changed files with 54 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
pages/index/index-skeleton.vue
View File

@ -51,22 +51,19 @@
<view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:230px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:#FFFFFF">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:#FFFFFF">
<view class="icon button--icon data-v-c61a7656 button--data-v-c61a7656">
<view is="components/me-icon/me-icon" class="data-v-c61a7656 button--data-v-c61a7656">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-flashlight icon--icon-flashlight sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 22px; line-height: 22px;"></text>
</view>
</view>
</view>
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-426 sk-text" style="background-position-x: 50%;">确认接单</text>
</view>
</view>
</view>
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:83px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:var(--titleColor)">
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-763 sk-text" style="background-position-x: 50%;">拒 绝</text>
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:var(--titleColor)">
</view>
</view>
</view>
@ -105,22 +102,19 @@
<view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:230px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:#FFFFFF">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:#FFFFFF">
<view class="icon button--icon data-v-c61a7656 button--data-v-c61a7656">
<view is="components/me-icon/me-icon" class="data-v-c61a7656 button--data-v-c61a7656">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-flashlight icon--icon-flashlight sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 22px; line-height: 22px;"></text>
</view>
</view>
</view>
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-426 sk-text" style="background-position-x: 50%;">确认接单</text>
</view>
</view>
</view>
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:83px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:var(--titleColor)">
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-763 sk-text" style="background-position-x: 50%;">拒 绝</text>
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:var(--auxiliaryBgColor);color:var(--titleColor)">
</view>
</view>
</view>
@ -183,6 +177,10 @@
padding: 0!important;
}
}
.me-top .capsule .icon-ctr {
border: 1px solid var(--auxiliaryBgColor)!important;
}
}
</style>
<style>
@ -190,7 +188,7 @@
color: transparent !important;
}
.sk-text-14-2857-544 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
background-size: 100% 44.8000rpx;
position: relative !important;
}
@ -202,103 +200,103 @@
background-repeat: repeat-y !important;
}
.sk-text-14-2857-11 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-661 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-8 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
background: linear-gradient(transparent 15.9091%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-59 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-876 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-318 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-34-3750-426 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-34-3750-763 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-14-2857-151 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-853 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-270 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
background-image: linear-gradient(transparent 15.9091%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-826 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-121 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-983 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-100 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-34-3750-322 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-34-3750-439 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-image: linear-gradient(transparent 34.3750%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-14-2857-955 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-608 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-504 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
background-image: linear-gradient(transparent 15.9091%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
background: var(--auxiliaryBgColor) !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF !important;
background: var(--auxiliaryBgColor) !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;

40
pages/workbench/workbench-skeleton.vue
View File

@ -219,7 +219,11 @@
}
}
.order-item .operate-ctr .operate .btn {
background-color: #EEEEEE;
background-color: var(--auxiliaryBgColor);
}
.me-top .capsule .icon-ctr {
border: 1px solid var(--auxiliaryBgColor)!important;
}
}
</style>
@ -229,7 +233,7 @@
color: transparent !important;
}
.sk-text-14-2857-32 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 85.7143%, transparent 0%) !important;
background-size: 100% 44.8000rpx;
position: relative !important;
}
@ -241,68 +245,68 @@
background-repeat: repeat-y !important;
}
.sk-text-0-0000-179 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-image: linear-gradient(transparent 0.0000%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-0-0000-567 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-image: linear-gradient(transparent 0.0000%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-0-0000-602 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-image: linear-gradient(transparent 0.0000%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-14-2857-977 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-990 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-41 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
background-image: linear-gradient(transparent 15.9091%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-14 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-755 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-111 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
background-image: linear-gradient(transparent 18.1818%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-0-0000-613 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-image: linear-gradient(transparent 0.0000%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-0-0000-533 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-image: linear-gradient(transparent 0.0000%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-14-2857-371 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-25 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-image: linear-gradient(transparent 14.2857%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
background: var(--auxiliaryBgColor) !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF none !important;
background: var(--auxiliaryBgColor) none !important;
color: transparent !important;
border-color: transparent !important;
}
@ -320,4 +324,4 @@
}
</style>
<script setup lang="ts">
</script>
</script>

2
pages/workbench/workbench.vue
View File

@ -1,5 +1,5 @@
<template>
<WorkbenchSkeleton v-if="isShowSkeleton"></WorkbenchSkeleton>
<WorkbenchSkeleton v-if="data.is_show_skeleton"></WorkbenchSkeleton>
<view class="ctr" v-else>
<view class="fixed-top">
<me-top title="工作台"></me-top>