🎨 style: 优化样式
This commit is contained in:
wangsongsole
parent
1ad91c1c9a
commit
c645ba6d3f
|
|
@ -14,6 +14,13 @@
|
|||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="mask" v-show="loading" @touchmove.prevent @mousewheel.prevent>
|
||||
<div class="loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="back" @click="backHandler"
|
||||
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="" />
|
||||
|
||||
|
|
@ -31,14 +38,14 @@
|
|||
class="bottom-img">
|
||||
</main>
|
||||
|
||||
<div v-show="goods.status==2 && goods.card_show==2&&loading">
|
||||
<div v-show="goods.status==2 && goods.card_show==2">
|
||||
<div class="c-item mt30" v-if="goods.card_number">
|
||||
<div>
|
||||
<p>卡号</p>
|
||||
<p class="num">{{goods.card_number}}</p>
|
||||
</div>
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
|
||||
alt="" @click="copyFunction(goods.card_number)">
|
||||
alt="" @click="copyFunction(goods.card_number)" class="copy">
|
||||
</div>
|
||||
|
||||
<div class="c-item" :class="{mt30:!goods.card_number}">
|
||||
|
|
@ -47,22 +54,21 @@
|
|||
<p class="num">{{goods.card_password}}</p>
|
||||
</div>
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
|
||||
alt="" @click="copyFunction(goods.card_password)">
|
||||
alt="" @click="copyFunction(goods.card_password)" class="copy">
|
||||
</div>
|
||||
|
||||
<div class="c-item" v-if="goods.detail_url">
|
||||
<img :src="goods.detail_url" alt="" class="detail_url">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="but" v-show="goods.status==3" @click="toHome">
|
||||
重新兑换
|
||||
</div>
|
||||
<div class="but refresh" v-show="[0,1].includes(goods.status)" @click="getInfo">
|
||||
<div class="but refresh" v-show="[0,1].includes(goods.status)" @click="()=>getInfo(true)">
|
||||
刷新
|
||||
</div>
|
||||
|
||||
<div class="c-item" v-if="goods.detail_url" style="margin-top: 0.3rem;">
|
||||
<img :src="goods.detail_url" alt="" class="detail_url">
|
||||
</div>
|
||||
|
||||
<!-- 单条弹出框 -->
|
||||
<div class="prompt" :class="{show:toast}">
|
||||
复制成功
|
||||
|
|
@ -77,7 +83,7 @@
|
|||
const toast = ref(false);
|
||||
const clr = ref(null);
|
||||
const goodsCount = ref(0);
|
||||
const loading = ref(true);
|
||||
const loading = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
goodsCount.value = Number(sessionStorage.getItem('goodsCount')) || 0;
|
||||
|
|
@ -85,14 +91,20 @@
|
|||
});
|
||||
|
||||
/* 获取详情 */
|
||||
function getInfo () {
|
||||
loading.value = false;
|
||||
function getInfo (isLoading) {
|
||||
|
||||
const orderNumber = sessionStorage.getItem('orderNumber');
|
||||
req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => {
|
||||
if (isLoading) {
|
||||
loading.value = true;
|
||||
const clr = setTimeout(() => {
|
||||
loading.value = false;
|
||||
clearTimeout(clr);
|
||||
}, 1000);
|
||||
}
|
||||
if (res.code == 200) {
|
||||
const { product_name, status, show_url, card_number, card_password, use_coupon } = res.data;
|
||||
goods.value = { product_name, time: res.data.goods.end_time, status, show_url, card_number, card_password, card_show: res.data.goods.card_show, use_coupon };
|
||||
const { product_name, status, show_url, card_number, card_password, use_coupon, product } = res.data;
|
||||
goods.value = { product_name, time: res.data.goods.end_time, status, show_url, card_number, card_password, card_show: res.data.goods.card_show, use_coupon, detail_url: product.detail_url };
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
<span class="time">{{goods.orderNumber}}</span>
|
||||
</p>
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/orderDetails/copy.png"
|
||||
alt="" @click="copyFunction(goods.orderNumber)">
|
||||
alt="" @click="copyFunction(goods.orderNumber)" class="copy">
|
||||
</div>
|
||||
<p class="time-box">
|
||||
订单时间：
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
padding: 0;
|
||||
font-family: HYQiHei;
|
||||
list-style: none;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -38,10 +37,11 @@ body {
|
|||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: #f0f5ff;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
#app .banner {
|
||||
|
|
@ -49,6 +49,95 @@ body {
|
|||
max-height: 100%;
|
||||
}
|
||||
|
||||
#app .mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#app .loading,
|
||||
#app .loading > div {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app .loading {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
color: #5983ff;
|
||||
}
|
||||
|
||||
#app .loading.la-dark {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#app .loading > div {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
background-color: currentColor;
|
||||
border: 0 solid currentColor;
|
||||
}
|
||||
|
||||
#app .loading {
|
||||
width: 0.34rem;
|
||||
height: 0.34rem;
|
||||
animation: ball-spin-rotate 2s infinite linear;
|
||||
}
|
||||
|
||||
#app .loading > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 100%;
|
||||
animation: ball-spin-bounce 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
#app .loading > div:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
#app .loading.la-sm {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
#app .loading.la-2x {
|
||||
width: 0.64rem;
|
||||
height: 0.64rem;
|
||||
}
|
||||
|
||||
#app .loading.la-3x {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
}
|
||||
|
||||
@keyframes ball-spin-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ball-spin-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
#app .main {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
|
|
@ -217,7 +306,7 @@ body {
|
|||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
#app .c-item img {
|
||||
#app .c-item .copy {
|
||||
width: 0.15rem;
|
||||
height: 0.15rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
padding: 0;
|
||||
font-family: HYQiHei;
|
||||
list-style: none;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -40,16 +39,108 @@ body {
|
|||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: #f0f5ff;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-bottom: 0.2rem;
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.loading>div {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
color: #5983ff;
|
||||
}
|
||||
|
||||
.loading.la-dark {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loading>div {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
background-color: currentColor;
|
||||
border: 0 solid currentColor;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 0.34rem;
|
||||
height: 0.34rem;
|
||||
animation: ball-spin-rotate 2s infinite linear;
|
||||
}
|
||||
|
||||
.loading>div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 100%;
|
||||
animation: ball-spin-bounce 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loading>div:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.loading.la-sm {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
.loading.la-2x {
|
||||
width: 0.64rem;
|
||||
height: 0.64rem;
|
||||
}
|
||||
|
||||
.loading.la-3x {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
}
|
||||
|
||||
@keyframes ball-spin-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ball-spin-bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
|
|
@ -147,6 +238,8 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.1rem;
|
||||
|
|
@ -219,10 +312,11 @@ body {
|
|||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
.copy {
|
||||
width: 0.15rem;
|
||||
height: 0.15rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.detail_url {
|
||||
|
|
|
|||
Loading…
Reference in New Issue