370 lines
17 KiB
Vue
370 lines
17 KiB
Vue
<template name="skeleton">
|
||
<view class="sk-container">
|
||
<view class="ctr ctr data-v-1cf27b2a data-v-1cf27b2a">
|
||
<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: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">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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:var(--auxiliaryBgColor);color:var(--titleColor)">
|
||
</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: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">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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:var(--auxiliaryBgColor);color:var(--titleColor)">
|
||
</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>
|
||
@import '../../components/me-icon/me-icon.css';
|
||
|
||
@font-face {
|
||
font-family: me-icon;
|
||
src: url('../../components/me-icon/me-icon.ttf');
|
||
}
|
||
.ctr {
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
.btn-container {
|
||
.icon {
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 30rpx;
|
||
line-height: 112rpx;
|
||
text-align: center;
|
||
.text {
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
}
|
||
}
|
||
.btn-active {
|
||
color: #FFFFFF;
|
||
}
|
||
.btn-default {
|
||
color: var(--descriptionColor);
|
||
}
|
||
|
||
.wireframe-btn {
|
||
.btn {
|
||
border: 1px solid var(--contentBgColor);
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
.me-icon {
|
||
font-family: me-icon;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
}
|
||
.me-top {
|
||
.capsule {
|
||
.icon-ctr {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 1px solid #E9F1FE;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 0;
|
||
.icon {
|
||
width: 80%;
|
||
height: 80%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: var(--titleColor);
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.me-top .capsule .icon-ctr {
|
||
border: 1px solid var(--auxiliaryBgColor)!important;
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.sk-transparent {
|
||
color: transparent !important;
|
||
}
|
||
.sk-text-14-2857-544 {
|
||
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-14-2857-11 {
|
||
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%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)85.7143%, transparent 0%) !important;
|
||
position: relative !important;
|
||
}
|
||
.sk-text-15-9091-8 {
|
||
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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,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%,var(--auxiliaryBgColor)0%,var(--auxiliaryBgColor)84.0909%, transparent 0%) !important;
|
||
position: relative !important;
|
||
}
|
||
.sk-image {
|
||
background: var(--auxiliaryBgColor) !important;
|
||
}
|
||
.sk-pseudo::before, .sk-pseudo::after {
|
||
background: var(--auxiliaryBgColor) !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>
|