328 lines
18 KiB
Vue
328 lines
18 KiB
Vue
<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: var(--auxiliaryBgColor);
|
|
}
|
|
|
|
.me-top .capsule .icon-ctr {
|
|
border: 1px solid var(--auxiliaryBgColor)!important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.sk-transparent {
|
|
color: transparent !important;
|
|
}
|
|
.sk-text-14-2857-32 {
|
|
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;
|
|
}
|
|
.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%, 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%, 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%, 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%, 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%, 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%, 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%, 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%, 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%, 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%, 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%, 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%, 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%, var(--auxiliaryBgColor) 0%, var(--auxiliaryBgColor) 85.7143%, transparent 0%) !important;
|
|
background-size: 100% 39.2000rpx;
|
|
position: relative !important;
|
|
}
|
|
.sk-image {
|
|
background: var(--auxiliaryBgColor) !important;
|
|
}
|
|
.sk-pseudo::before, .sk-pseudo::after {
|
|
background: var(--auxiliaryBgColor) 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>
|