hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
cdd2f1211f
wanyu_frontend/pages/workbench/workbench-skeleton.vue
苟川东 99bcb178a6 工作台骨架屏
2025-04-13 22:38:40 +08:00

323 lines
18 KiB
Vue
Raw Blame History

<template name="skeleton">
<view class="sk-container">
<view class="ctr ctr data-v-cda3a350 data-v-cda3a350">
<view class="fixed-top fixed-top data-v-cda3a350 data-v-cda3a350">
<view is="components/me-top/me-top" class="data-v-cda3a350 data-v-cda3a350">
<view class="me-top top--me-top data-v-e4d1a339 top--data-v-e4d1a339">
<view class="status-bar top--status-bar data-v-e4d1a339 top--data-v-e4d1a339" style="height:47px"></view>
<view class="capsule top--capsule flex-c top--flex-c data-v-e4d1a339 top--data-v-e4d1a339" style="height:40px">
<view class="icon-ctr top--icon-ctr flex-c top--flex-c data-v-e4d1a339 top--data-v-e4d1a339">
<image class="icon top--icon data-v-e4d1a339 top--data-v-e4d1a339 sk-image" mode="aspectFill"></image>
</view>
<text class="title top--title data-v-e4d1a339 top--data-v-e4d1a339 sk-transparent sk-text-14-2857-32 sk-text">工作台</text>
</view>
</view>
</view>
<view class="filter flex-sb line-after data-v-cda3a350 sk-pseudo sk-pseudo-circle">
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-179 sk-text">进行中(1)</view>
</view>
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-567 sk-text">今日(0)</view>
</view>
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-602 sk-text">明日(0)</view>
</view>
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-602 sk-text">全部(0)</view>
</view>
</view>
</view>
<view is="components/me-empty-space/me-empty-space" class="data-v-cda3a350 data-v-cda3a350">
<view class="me-empty-space space--me-empty-space" style="height:137px"></view>
</view>
<view class="list list data-v-cda3a350 data-v-cda3a350">
<view class="order-item order-item data-v-cda3a350 data-v-cda3a350">
<view class="top top flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="type flex-l data-v-cda3a350 sk-transparent sk-text-14-2857-977 sk-text">乳胶漆</view>
<view class="price flex-r important-color data-v-cda3a350 sk-transparent sk-text-14-2857-990 sk-text"></view>
</view>
<view class="content content flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="address-name flex-l data-v-cda3a350 sk-transparent sk-text-15-9091-41 sk-text">222</view>
<view class="address data-v-cda3a350 sk-transparent sk-text-18-1818-14 sk-text">四川省成都市双流区</view>
<view class="time-ctr time-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-time icon--icon-time sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="time data-v-cda3a350 sk-transparent sk-text-18-1818-755 sk-text">周一 25年3月31日 11:33</text>
</view>
</view>
<view class="right right data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
</view>
</view>
</view>
<view class="distance flex-c data-v-cda3a350 sk-transparent sk-text-18-1818-111 sk-text">未知距离</view>
</view>
</view>
<view class="user user flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="user-name user-name flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-user icon--icon-user sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 18px; line-height: 18px;"></text>
</view>
</view>
<view class="name data-v-cda3a350 sk-transparent sk-text-0-0000-613 sk-text">wwww</view>
</view>
<view class="phone flex-l data-v-cda3a350 sk-transparent sk-text-0-0000-533 sk-text">11111</view>
</view>
<view class="right right flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-call icon--icon-call sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 40px; line-height: 40px;"></text>
</view>
</view>
</view>
</view>
</view>
<view class="operate-ctr operate-ctr flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="status-ctr status-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-progress-2-line icon--icon-progress-2-line sk-pseudo sk-pseudo-circle" style="color: #E18F00; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="text data-v-cda3a350 sk-transparent sk-text-14-2857-371 sk-text">待联系客户</text>
</view>
<view class="operate operate flex-r flex-r data-v-cda3a350 data-v-cda3a350">
<view class="btn btn flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-arrow-up-line icon--icon-arrow-up-line sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="data-v-cda3a350 sk-transparent sk-text-14-2857-25 sk-text">上报异常</text>
</view>
</view>
</view>
</view>
<view class="order-item order-item data-v-cda3a350 data-v-cda3a350">
<view class="top top flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="type flex-l data-v-cda3a350 sk-transparent sk-text-14-2857-977 sk-text">乳胶漆</view>
<view class="price flex-r important-color data-v-cda3a350 sk-transparent sk-text-14-2857-990 sk-text"></view>
</view>
<view class="content content flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="address-name flex-l data-v-cda3a350 sk-transparent sk-text-15-9091-41 sk-text">222</view>
<view class="address data-v-cda3a350 sk-transparent sk-text-18-1818-14 sk-text">四川省成都市双流区</view>
<view class="time-ctr time-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-time icon--icon-time sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="time data-v-cda3a350 sk-transparent sk-text-18-1818-755 sk-text">周一 25年3月31日 11:33</text>
</view>
</view>
<view class="right right data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
</view>
</view>
</view>
<view class="distance flex-c data-v-cda3a350 sk-transparent sk-text-18-1818-111 sk-text">未知距离</view>
</view>
</view>
<view class="user user flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="user-name user-name flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-user icon--icon-user sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 18px; line-height: 18px;"></text>
</view>
</view>
<view class="name data-v-cda3a350 sk-transparent sk-text-0-0000-613 sk-text">wwww</view>
</view>
<view class="phone flex-l data-v-cda3a350 sk-transparent sk-text-0-0000-533 sk-text">11111</view>
</view>
<view class="right right flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-call icon--icon-call sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 40px; line-height: 40px;"></text>
</view>
</view>
</view>
</view>
</view>
<view class="operate-ctr operate-ctr flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="status-ctr status-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-progress-2-line icon--icon-progress-2-line sk-pseudo sk-pseudo-circle" style="color: #E18F00; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="text data-v-cda3a350 sk-transparent sk-text-14-2857-371 sk-text">待联系客户</text>
</view>
<view class="operate operate flex-r flex-r data-v-cda3a350 data-v-cda3a350">
<view class="btn btn flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-arrow-up-line icon--icon-arrow-up-line sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="data-v-cda3a350 sk-transparent sk-text-14-2857-25 sk-text">上报异常</text>
</view>
</view>
</view>
</view>
<view class="order-item order-item data-v-cda3a350 data-v-cda3a350"></view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.ctr {
padding: 0 32rpx;
box-sizing: border-box;
.fixed-top {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 686rpx;
.filter {
width: 686rpx;
height: 100rpx;
.filter-item {
width: 170rpx;
height: 100%;
position: relative;
.title {
width: 120rpx;
font-size: 28rpx;
color: var(--summaryColor);
line-height: 40rpx;
}
.title-active {
color: var(--themeColor) !important;
}
.select-style {
position: absolute;
bottom: 0;
width: 122rpx;
height: 4rpx;
background: var(--themeColor);
border-radius: 2rpx;
}
}
}
}
.order-item .operate-ctr .operate .btn {
background-color: #EEEEEE;
}
}
</style>
<style>
.sk-transparent {
color: transparent !important;
}
.sk-text-14-2857-32 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 44.8000rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
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-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-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-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;
position: relative !important;
}
.sk-text-14-2857-990 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 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;
position: relative !important;
}
.sk-text-18-1818-14 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 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;
position: relative !important;
}
.sk-text-18-1818-111 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 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-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-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;
position: relative !important;
}
.sk-text-14-2857-25 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
</style>
<script setup lang="ts">
</script>
Reference in New Issue View Git Blame Copy Permalink