324 lines
17 KiB
Vue
324 lines
17 KiB
Vue
<template name="skeleton">
|
||
<view class="sk-container">
|
||
<view class="ctr ctr data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="fixed-top fixed-top data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view is="components/me-top/me-top" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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-544 sk-text">接单大厅</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view is="components/me-empty-space/me-empty-space" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="me-empty-space space--me-empty-space" style="height:87px"></view>
|
||
</view>
|
||
<view class="list list data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-11 sk-text"></view>
|
||
<view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-661 sk-text"></view>
|
||
</view>
|
||
<view class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="left left data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-8 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
|
||
<view class="address flex-l data-v-1cf27b2a sk-transparent sk-text-18-1818-59 sk-text">安徽省蚌埠市禹会区</view>
|
||
<view class="time-ctr time-ctr flex-l flex-l data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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 style="line-height: 60rpx;" class="time data-v-1cf27b2a sk-transparent sk-text-18-1818-121 sk-text">周日 25年3月23日 14:30</text>
|
||
</view>
|
||
</view>
|
||
<view class="right right data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
|
||
</view>
|
||
</view>
|
||
<view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付订金：123.00元抵扣200元</view>
|
||
<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="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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-11 sk-text"></view>
|
||
<view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-661 sk-text"></view>
|
||
</view>
|
||
<view class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="left left data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-8 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
|
||
<view class="address flex-l data-v-1cf27b2a sk-transparent sk-text-18-1818-59 sk-text">安徽省蚌埠市禹会区</view>
|
||
<view class="time-ctr time-ctr flex-l flex-l data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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 style="line-height: 60rpx;" class="time data-v-1cf27b2a sk-transparent sk-text-18-1818-121 sk-text">周日 25年3月23日 14:30</text>
|
||
</view>
|
||
</view>
|
||
<view class="right right data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
|
||
</view>
|
||
</view>
|
||
<view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付订金：123.00元抵扣200元</view>
|
||
<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="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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-955 sk-text">灶台维修</view>
|
||
<view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-608 sk-text"></view>
|
||
</view>
|
||
<view style="min-height: auto" class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="left left data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-504 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
|
||
</view>
|
||
<view class="right right data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
|
||
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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>
|
||
</view>
|
||
</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;
|
||
}
|
||
.refresh {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
background: var(--themeColor);
|
||
border-radius: 50%;
|
||
position: fixed;
|
||
bottom: 64rpx;
|
||
right: 32rpx;
|
||
}
|
||
|
||
.rotate {
|
||
animation: spin 0.5s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(-360deg); }
|
||
}
|
||
.order-item {
|
||
.discount {
|
||
padding: 0!important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.sk-transparent {
|
||
color: transparent !important;
|
||
}
|
||
.sk-text-14-2857-544 {
|
||
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-14-2857-11 {
|
||
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 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;
|
||
position: relative !important;
|
||
}
|
||
.sk-text-15-9091-8 {
|
||
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 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;
|
||
|
||
position: relative !important;
|
||
}
|
||
.sk-text-18-1818-876 {
|
||
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 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-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-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-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;
|
||
position: relative !important;
|
||
}
|
||
.sk-text-14-2857-853 {
|
||
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 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;
|
||
|
||
position: relative !important;
|
||
}
|
||
.sk-text-18-1818-826 {
|
||
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 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;
|
||
|
||
position: relative !important;
|
||
}
|
||
.sk-text-18-1818-983 {
|
||
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 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-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-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-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;
|
||
position: relative !important;
|
||
}
|
||
.sk-text-14-2857-608 {
|
||
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 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;
|
||
position: relative !important;
|
||
}
|
||
.sk-image {
|
||
background: #EFEFEF !important;
|
||
}
|
||
.sk-pseudo::before, .sk-pseudo::after {
|
||
background: #EFEFEF !important;
|
||
background-image: none !important;
|
||
color: transparent !important;
|
||
border-color: transparent !important;
|
||
}
|
||
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
|
||
border-radius: 0 !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>
|