sws
parent
db8f47b738
commit
9da40d1e12
|
|
@ -198,6 +198,124 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-4 {
|
||||
border-radius: 1.6rem;
|
||||
padding: 0.8rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: #ff3830;
|
||||
.left {
|
||||
width: 21.4rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
.item {
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
width: 7.2rem;
|
||||
height: 7.2rem;
|
||||
background-color: #fff;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0.4rem;
|
||||
.type {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #ffe8e8;
|
||||
color: #ff3830;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1.5rem;
|
||||
height: 3rem;
|
||||
background-color: #ffe8e8;
|
||||
left: -0.8rem;
|
||||
border-radius: 100%;
|
||||
top: -1.6rem;
|
||||
z-index: -1;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1.5rem;
|
||||
height: 3rem;
|
||||
background-color: #ffe8e8;
|
||||
right: -0.8rem;
|
||||
border-radius: 100%;
|
||||
top: -1.6rem;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #ff3830;
|
||||
.symbol {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.number {
|
||||
font-size: 2.4rem;
|
||||
line-height: 2.4rem;
|
||||
font-weight: 600;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
line-height: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 18rem;
|
||||
height: 18rem;
|
||||
position: absolute;
|
||||
left: -0.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 100%;
|
||||
background: #ff3830;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
.desc {
|
||||
margin-top: 0.3rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.7rem;
|
||||
color: #fff;
|
||||
}
|
||||
.coupon-btn {
|
||||
width: 7.2rem;
|
||||
height: 2.2rem;
|
||||
line-height: 2.2rem;
|
||||
background-color: #fff;
|
||||
color: #ff3830;
|
||||
text-align: center;
|
||||
border-radius: 1.2rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-theme-5 {
|
||||
overflow: hidden;
|
||||
|
|
@ -349,3 +467,93 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-7 {
|
||||
overflow: hidden;
|
||||
.item {
|
||||
border-radius: 0.4rem;
|
||||
width: 11.8rem;
|
||||
height: 6.4rem;
|
||||
position: relative;
|
||||
background: linear-gradient(138deg, #f4dba5 0%, #e1b47a 100%);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8rem;
|
||||
top: -0.6rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8rem;
|
||||
bottom: -0.6rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.left {
|
||||
width: 8.6rem;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.price {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
.symbol {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.number {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 2rem;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
padding-left: 0.7rem;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
border: 0.1rem dashed #fff;
|
||||
opacity: 0.61;
|
||||
}
|
||||
.coupon-btn {
|
||||
padding: 0.4rem;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,29 +54,24 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '4'">
|
||||
<div class="coupon-theme-3">
|
||||
<div>
|
||||
<div class="coupon-theme-4">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="desc">指定商品可用</div>
|
||||
<div class="limit">(限领一张)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">
|
||||
<text>立即领取</text>
|
||||
<icon name="arrow-right-o" class="icon"></icon>
|
||||
</div>
|
||||
<div class="type">通用券</div>
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="re z-i flex-col jc-c align-c">
|
||||
<div class="title">先领券 再购物</div>
|
||||
<div class="desc">领券下单·享购物优惠</div>
|
||||
<div class="coupon-btn">领取全部</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=""></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '5'">
|
||||
|
|
@ -111,7 +106,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '7'"></template>
|
||||
<template v-else-if="theme == '7'">
|
||||
<div class="coupon-theme-7">
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ service.interceptors.request.use(
|
|||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
const { code, msg, data } = response.data;
|
||||
const { code, msg, message, data } = response.data;
|
||||
if (code == 0) {
|
||||
return response.data;
|
||||
} else if (code == -400) {
|
||||
|
|
@ -45,14 +45,14 @@ service.interceptors.response.use(
|
|||
window.location.href = data;
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(msg || '系统出错');
|
||||
ElMessage.error(msg || message || '系统出错');
|
||||
return Promise.reject(new Error(msg || 'Error'));
|
||||
}
|
||||
},
|
||||
(error: any) => {
|
||||
if (error.response.data) {
|
||||
const { msg } = error.response.data;
|
||||
ElMessage.error(msg || '系统出错');
|
||||
const { msg, message } = error.response.data;
|
||||
ElMessage.error(msg || message || '系统出错');
|
||||
}
|
||||
return Promise.reject(error.message);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue