fix: 🐛 订单详情页骨架屏h5样式兼容
This commit is contained in:
parent
c36754e5ca
commit
94588b7aed
@ -0,0 +1,454 @@
|
||||
<template name="skeleton">
|
||||
<view class="sk-container">
|
||||
<view class="overview sk-image" style="padding-top: 40px">
|
||||
<view
|
||||
class="status icon-clock sk-transparent sk-text-0-0000-538 sk-text sk-pseudo sk-pseudo-circle"
|
||||
>等待付款</view
|
||||
>
|
||||
<view class="tips tips">
|
||||
<text class="money sk-transparent sk-text-0-0000-37 sk-text">应付金额: ¥ 99.00</text>
|
||||
<text class="time sk-transparent sk-text-0-0000-402 sk-text">支付剩余</text>
|
||||
<view is="node-modules/@dcloudio/uni-ui/lib/uni-countdown/uni-countdown">
|
||||
<view
|
||||
class="uni-countdown countdown--uni-countdown data-v-342c352a countdown--data-v-342c352a"
|
||||
>
|
||||
<text
|
||||
class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-825 sk-text"
|
||||
style="
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
width: 22px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-position-x: 50%;
|
||||
"
|
||||
>00</text
|
||||
>
|
||||
<text
|
||||
class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
|
||||
style="color: #fff; font-size: 12px; margin:"
|
||||
>时</text
|
||||
>
|
||||
<text
|
||||
class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-91 sk-text"
|
||||
style="
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
width: 22px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-position-x: 50%;
|
||||
"
|
||||
>29</text
|
||||
>
|
||||
<text
|
||||
class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
|
||||
style="color: #fff; font-size: 12px; margin:"
|
||||
>分</text
|
||||
>
|
||||
<text
|
||||
class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-512 sk-text"
|
||||
style="
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
width: 22px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-position-x: 50%;
|
||||
"
|
||||
>36</text
|
||||
>
|
||||
<text
|
||||
class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
|
||||
style="color: #fff; font-size: 12px; margin:"
|
||||
>秒</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="button sk-transparent sk-text-28-1250-663 sk-text"
|
||||
style="background-position-x: 50%"
|
||||
>去支付</view
|
||||
>
|
||||
</view>
|
||||
<view class="shipment shipment">
|
||||
<view class="locate sk-image">
|
||||
<view class="user sk-transparent sk-text-14-2857-16 sk-text">马斯克 13900139000</view>
|
||||
<view class="address sk-transparent sk-text-14-2857-206 sk-text"
|
||||
>北京市 北京市 西城区1122332</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods goods">
|
||||
<view class="item item">
|
||||
<navigator :render-link="false" class="navigator navigator" hover-class="none">
|
||||
<image class="cover sk-image"></image>
|
||||
<view class="meta meta">
|
||||
<view class="name ellipsis sk-transparent sk-text-14-2857-64 sk-text"
|
||||
>亮碟多效合一洗涤块495g</view
|
||||
>
|
||||
<view class="type sk-transparent sk-text-22-2222-294 sk-text">495g</view>
|
||||
<view class="price price">
|
||||
<view class="actual actual">
|
||||
<text class="symbol sk-transparent sk-opacity">¥</text>
|
||||
<text class="sk-transparent sk-text-14-2857-809 sk-text">69.90</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quantity sk-transparent sk-opacity">x1</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="total total">
|
||||
<view class="row row">
|
||||
<view class="text sk-transparent sk-text-0-0000-632 sk-text">商品总价: </view>
|
||||
<view class="symbol sk-transparent sk-text-0-0000-436 sk-text sk-pseudo sk-pseudo-circle"
|
||||
>99.00</view
|
||||
>
|
||||
</view>
|
||||
<view class="row row">
|
||||
<view class="text sk-transparent sk-text-0-0000-43 sk-text">运费: </view>
|
||||
<view class="symbol sk-transparent sk-text-0-0000-596 sk-text sk-pseudo sk-pseudo-circle"
|
||||
>0.00</view
|
||||
>
|
||||
</view>
|
||||
<view class="row row">
|
||||
<view class="text sk-transparent sk-text-0-0000-717 sk-text">应付金额: </view>
|
||||
<view
|
||||
class="symbol primary sk-transparent sk-text-0-0000-1000 sk-text sk-pseudo sk-pseudo-circle"
|
||||
>69.90</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail detail">
|
||||
<view class="title sk-transparent sk-text-0-0000-526 sk-text">订单信息</view>
|
||||
<view class="row row">
|
||||
<view class="item sk-transparent">
|
||||
订单编号: 1922925007051165697
|
||||
<text class="copy sk-transparent sk-text-0-0000-202 sk-text">复制</text>
|
||||
</view>
|
||||
<view class="item sk-transparent sk-text-0-0000-586 sk-text"
|
||||
>下单时间: 2025-05-15 16:00:23</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view is="components/JbcGuess" class="r r">
|
||||
<view class="caption JbcGuess--caption">
|
||||
<text
|
||||
class="text JbcGuess--text sk-transparent sk-text-0-0000-986 sk-text sk-pseudo sk-pseudo-circle"
|
||||
>猜你喜欢</text
|
||||
>
|
||||
</view>
|
||||
<view class="guess JbcGuess--guess">
|
||||
<navigator :render-link="false" class="guess-item JbcGuess--guess-item">
|
||||
<image class="image JbcGuess--image sk-image" mode="aspectFill"></image>
|
||||
</navigator>
|
||||
<navigator :render-link="false" class="guess-item JbcGuess--guess-item">
|
||||
<image class="image JbcGuess--image sk-image" mode="aspectFill"></image>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="toolbar toolbar" style="padding-bottom: 0px">
|
||||
<view class="button primary sk-transparent sk-text-14-2857-301 sk-text"> 去支付 </view>
|
||||
<view class="button sk-transparent sk-text-14-2857-130 sk-text"> 取消订单 </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef H5 */
|
||||
@import '../detail.scss';
|
||||
/* #endif */
|
||||
|
||||
.sk-transparent {
|
||||
color: transparent !important;
|
||||
}
|
||||
.sk-text-14-2857-450 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 44.8rpx;
|
||||
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-538 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 36rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-37 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 28rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-402 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 28rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-15-0000-825 {
|
||||
background-image: linear-gradient(
|
||||
transparent 15%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 40rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-opacity {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.sk-text-15-0000-91 {
|
||||
background-image: linear-gradient(
|
||||
transparent 15%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 40rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-15-0000-512 {
|
||||
background-image: linear-gradient(
|
||||
transparent 15%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 40rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-28-1250-663 {
|
||||
background-image: linear-gradient(
|
||||
transparent 28.125%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 71.875%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 64rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-14-2857-16 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 36.4rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-14-2857-206 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 33.6rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-14-2857-64 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 36.4rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-22-2222-294 {
|
||||
background-image: linear-gradient(
|
||||
transparent 22.2222%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 77.7778%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 43.2rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-14-2857-809 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 33.6rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-632 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 26rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-436 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 26rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-43 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 26rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-596 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 26rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-717 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 26rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-1000 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 36rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-526 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 30rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-202 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 20rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-586 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 26rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-0-0000-986 {
|
||||
background-image: linear-gradient(
|
||||
transparent 0%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 100%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 32rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-14-2857-301 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 36.4rpx;
|
||||
position: relative !important;
|
||||
}
|
||||
.sk-text-14-2857-130 {
|
||||
background-image: linear-gradient(
|
||||
transparent 14.2857%,
|
||||
#eeeeee 0%,
|
||||
#eeeeee 85.7143%,
|
||||
transparent 0%
|
||||
) !important;
|
||||
background-size: 100% 36.4rpx;
|
||||
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>
|
||||
435
src/pagesOrder/detail/detail.scss
Normal file
435
src/pagesOrder/detail/detail.scss
Normal file
@ -0,0 +1,435 @@
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 750rpx;
|
||||
color: #000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
/* background-color: #f8f8f8; */
|
||||
background-color: transparent;
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
/* color: #000; */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
font-size: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* color: #000; */
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewport {
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
line-height: 1;
|
||||
padding-bottom: 30rpx;
|
||||
color: #fff;
|
||||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
|
||||
background-size: cover;
|
||||
|
||||
.status {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.status::before {
|
||||
margin-right: 6rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
|
||||
.money {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 260rpx;
|
||||
height: 64rpx;
|
||||
margin: 0 10rpx;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
color: #27ba9b;
|
||||
border-radius: 68rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.shipment {
|
||||
line-height: 1.4;
|
||||
padding: 0 20rpx;
|
||||
margin: 20rpx 20rpx 0;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.locate,
|
||||
.item {
|
||||
min-height: 120rpx;
|
||||
padding: 30rpx 30rpx 25rpx 75rpx;
|
||||
background-size: 50rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 6rpx center;
|
||||
}
|
||||
|
||||
.locate {
|
||||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
|
||||
|
||||
.user {
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
|
||||
border-bottom: 1rpx solid #eee;
|
||||
position: relative;
|
||||
|
||||
.message {
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
margin: 20rpx 20rpx 0;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.navigator {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.meta {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.type {
|
||||
line-height: 1.8;
|
||||
padding: 0 15rpx;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
align-self: flex-start;
|
||||
border-radius: 4rpx;
|
||||
color: #888;
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.original {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.actual {
|
||||
margin-left: 10rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
padding: 30rpx 0 0;
|
||||
|
||||
.button {
|
||||
width: 200rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
line-height: 60rpx;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 60rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #27ba9b;
|
||||
border-color: #27ba9b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
line-height: 1;
|
||||
font-size: 26rpx;
|
||||
padding: 20rpx 0;
|
||||
color: #666;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.symbol::before {
|
||||
content: '¥';
|
||||
font-size: 80%;
|
||||
margin-right: 3rpx;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #cf4444;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
line-height: 1;
|
||||
padding: 30rpx 20rpx 0;
|
||||
margin: 20rpx 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.item {
|
||||
padding: 10rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy {
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5rpx 10rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-height {
|
||||
height: 100rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--window-bottom));
|
||||
z-index: 1;
|
||||
|
||||
height: 100rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
border-top: 1rpx solid #ededed;
|
||||
border-bottom: 1rpx solid #ededed;
|
||||
background-color: #fff;
|
||||
box-sizing: content-box;
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 200rpx;
|
||||
height: 72rpx;
|
||||
margin-left: 15rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 72rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.delete {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.button {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
order: 2;
|
||||
color: #27ba9b;
|
||||
border-color: #27ba9b;
|
||||
}
|
||||
|
||||
.primary {
|
||||
order: 1;
|
||||
color: #fff;
|
||||
background-color: #27ba9b;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-root {
|
||||
padding: 30rpx 30rpx 0;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.tips {
|
||||
color: #444;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15rpx 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
content: '\e6cd';
|
||||
font-family: 'erabbit' !important;
|
||||
font-size: 38rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.icon.checked::before {
|
||||
content: '\e6cc';
|
||||
font-size: 38rpx;
|
||||
color: #27ba9b;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #444;
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
margin: 0 20rpx;
|
||||
color: #444;
|
||||
border-radius: 72rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #fff;
|
||||
background-color: #27ba9b;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -221,6 +221,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PageSkeleton from './components/PageSkeleton.vue'
|
||||
import {
|
||||
deleteMemberOrderAPI,
|
||||
getMemberOrderLogisticsAPI,
|
||||
@ -272,6 +273,7 @@ const hasBack = pages.length > 1
|
||||
// 获取当前页面实例
|
||||
const pageInstance = pages.at(-1) as AnimationMethods
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 添加顶部动画
|
||||
onReady(() => {
|
||||
// 动画效果: 导航栏背景色
|
||||
@ -334,6 +336,7 @@ onReady(() => {
|
||||
},
|
||||
)
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 获取订单详情
|
||||
const orderDetail = ref<OrderResult>()
|
||||
@ -479,439 +482,5 @@ const handleDeleteOrder = async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 750rpx;
|
||||
color: #000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
/* background-color: #f8f8f8; */
|
||||
background-color: transparent;
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
/* color: #000; */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
font-size: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* color: #000; */
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewport {
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
line-height: 1;
|
||||
padding-bottom: 30rpx;
|
||||
color: #fff;
|
||||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
|
||||
background-size: cover;
|
||||
|
||||
.status {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.status::before {
|
||||
margin-right: 6rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
|
||||
.money {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 260rpx;
|
||||
height: 64rpx;
|
||||
margin: 0 10rpx;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
color: #27ba9b;
|
||||
border-radius: 68rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.shipment {
|
||||
line-height: 1.4;
|
||||
padding: 0 20rpx;
|
||||
margin: 20rpx 20rpx 0;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.locate,
|
||||
.item {
|
||||
min-height: 120rpx;
|
||||
padding: 30rpx 30rpx 25rpx 75rpx;
|
||||
background-size: 50rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 6rpx center;
|
||||
}
|
||||
|
||||
.locate {
|
||||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
|
||||
|
||||
.user {
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
|
||||
border-bottom: 1rpx solid #eee;
|
||||
position: relative;
|
||||
|
||||
.message {
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
margin: 20rpx 20rpx 0;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.navigator {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.meta {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.type {
|
||||
line-height: 1.8;
|
||||
padding: 0 15rpx;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
align-self: flex-start;
|
||||
border-radius: 4rpx;
|
||||
color: #888;
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.original {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.actual {
|
||||
margin-left: 10rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
padding: 30rpx 0 0;
|
||||
|
||||
.button {
|
||||
width: 200rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
line-height: 60rpx;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 60rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #27ba9b;
|
||||
border-color: #27ba9b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
line-height: 1;
|
||||
font-size: 26rpx;
|
||||
padding: 20rpx 0;
|
||||
color: #666;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.symbol::before {
|
||||
content: '¥';
|
||||
font-size: 80%;
|
||||
margin-right: 3rpx;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #cf4444;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
line-height: 1;
|
||||
padding: 30rpx 20rpx 0;
|
||||
margin: 20rpx 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.item {
|
||||
padding: 10rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy {
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5rpx 10rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-height {
|
||||
height: 100rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--window-bottom));
|
||||
z-index: 1;
|
||||
|
||||
height: 100rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
border-top: 1rpx solid #ededed;
|
||||
border-bottom: 1rpx solid #ededed;
|
||||
background-color: #fff;
|
||||
box-sizing: content-box;
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 200rpx;
|
||||
height: 72rpx;
|
||||
margin-left: 15rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 72rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.delete {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.button {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
order: 2;
|
||||
color: #27ba9b;
|
||||
border-color: #27ba9b;
|
||||
}
|
||||
|
||||
.primary {
|
||||
order: 1;
|
||||
color: #fff;
|
||||
background-color: #27ba9b;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-root {
|
||||
padding: 30rpx 30rpx 0;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.tips {
|
||||
color: #444;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15rpx 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
content: '\e6cd';
|
||||
font-family: 'erabbit' !important;
|
||||
font-size: 38rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.icon.checked::before {
|
||||
content: '\e6cc';
|
||||
font-size: 38rpx;
|
||||
color: #27ba9b;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #444;
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
margin: 0 20rpx;
|
||||
color: #444;
|
||||
border-radius: 72rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #fff;
|
||||
background-color: #27ba9b;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import './detail.scss';
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user