Merge branch 'dev-sws' into dev-yxl
于肖磊
commit
c7b183d0fe
|
|
@ -54,6 +54,12 @@
|
|||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">右箭头-2</div>
|
||||
<div class="code-name">&#xe6aa;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">三点</div>
|
||||
|
|
@ -540,10 +546,10 @@
|
|||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1724054334931') format('woff2'),
|
||||
url('iconfont.woff?t=1724054334931') format('woff'),
|
||||
url('iconfont.ttf?t=1724054334931') format('truetype'),
|
||||
url('iconfont.svg?t=1724054334931#iconfont') format('svg');
|
||||
src: url('iconfont.woff2?t=1724925411942') format('woff2'),
|
||||
url('iconfont.woff?t=1724925411942') format('woff'),
|
||||
url('iconfont.ttf?t=1724925411942') format('truetype'),
|
||||
url('iconfont.svg?t=1724925411942#iconfont') format('svg');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
|
|
@ -569,6 +575,15 @@
|
|||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-arrow-right-o"></span>
|
||||
<div class="name">
|
||||
右箭头-2
|
||||
</div>
|
||||
<div class="code-name">.icon-arrow-right-o
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-ellipsis"></span>
|
||||
<div class="name">
|
||||
|
|
@ -1298,6 +1313,14 @@
|
|||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-arrow-right-o"></use>
|
||||
</svg>
|
||||
<div class="name">右箭头-2</div>
|
||||
<div class="code-name">#icon-arrow-right-o</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-ellipsis"></use>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4607934 */
|
||||
src: url('iconfont.ttf?t=1724054334931') format('truetype'),
|
||||
url('iconfont.svg?t=1724054334931#iconfont') format('svg');
|
||||
src: url('iconfont.woff2?t=1724925411942') format('woff2'),
|
||||
url('iconfont.woff?t=1724925411942') format('woff'),
|
||||
url('iconfont.ttf?t=1724925411942') format('truetype'),
|
||||
url('iconfont.svg?t=1724925411942#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -12,6 +14,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-arrow-right-o:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.icon-ellipsis:before {
|
||||
content: "\e635";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,13 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "web端",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "36882570",
|
||||
"name": "右箭头-2",
|
||||
"font_class": "arrow-right-o",
|
||||
"unicode": "e6aa",
|
||||
"unicode_decimal": 59050
|
||||
},
|
||||
{
|
||||
"icon_id": "39793709",
|
||||
"name": "三点",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="arrow-right-o" unicode="" d="M512-66C263.915-66 62 135.96 62 384 62 632.085 263.915 834 512 834c248.04 0 450-201.915 450-450 0-248.04-201.96-450-450-450zM438.875 192.75a22.23 22.23 0 0 0-15.75 6.75c-9 9-9 23.04 0 32.085l168.75 168.75c9 9 23.04 9 32.085 0 9-9 9-23.085 0-32.085l-168.75-168.75a24.525 24.525 0 0 0-16.335-6.75zM607.625 361.5a22.23 22.23 0 0 0-15.75 6.75L423.125 537c-9 9-9 23.04 0 32.04 9 9 23.04 9 32.085 0l168.75-168.75c9-9 9-23.04 0-32.04a24.525 24.525 0 0 0-16.335-6.75z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="ellipsis" unicode="" d="M169.319538 289.773795a94.226205 94.226205 0 1 0 0 188.45241 94.226205 94.226205 0 0 0 0-188.45241z m342.680462 0a94.226205 94.226205 0 1 0 0 188.45241 94.226205 94.226205 0 0 0 0-188.45241z m342.680462 0a94.226205 94.226205 0 1 0 0 188.45241 94.226205 94.226205 0 0 0 0-188.45241z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="commodity-edit" unicode="" d="M439.9616 156.5184a20.1216 20.1216 0 0 0-13.0048 4.7104l-139.264 113.664a20.6336 20.6336 0 0 0-2.56 29.5424l358.0416 417.792a20.5824 20.5824 0 0 0 28.8256 2.56l139.2128-113.7664a20.6336 20.6336 0 0 0 2.6112-29.4912l-358.0416-417.792a21.0944 21.0944 0 0 0-15.8208-7.2192z m-109.6704 137.1648l107.0592-87.552 331.2128 386.2528-107.1104 87.552-331.1616-386.2528zM259.072 77.2096a20.8384 20.8384 0 0 0-20.48 24.064l29.9008 183.3472a20.7872 20.7872 0 0 0 40.96-6.656l-24.064-147.8656 140.1856 53.0944a20.7872 20.7872 0 0 0 14.7456-38.7584l-173.7728-65.9456a20.736 20.736 0 0 0-7.424-1.28zM512.0512-128C229.7344-128 0 101.7344 0 384.0512 0 666.4192 229.7344 896 512.0512 896c282.368 0 512.0512-229.7344 512.0512-512.0512 0-282.368-229.6832-511.9488-512-511.9488z m0 982.5792C252.6208 854.5792 41.5232 643.584 41.5232 384.0512c0-259.4304 211.0976-470.528 470.528-470.528 259.4816 0 470.528 211.0976 470.528 470.528 0 259.4816-211.0464 470.528-470.528 470.528z" horiz-adv-x="1024" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -91,6 +91,31 @@ const default_data_list: ArticleList = {
|
|||
new_title: '测试文章标题',
|
||||
new_cover: [],
|
||||
};
|
||||
const get_auto_data_list = async (new_content: any) => {
|
||||
const { category, number, sort, sort_rules, is_cover } = new_content;
|
||||
const new_data = {
|
||||
article_keywords: '',
|
||||
article_category_ids: category.join(','),
|
||||
article_order_by_type: sort,
|
||||
article_order_by_rule: sort_rules,
|
||||
article_number: number,
|
||||
article_is_cover: is_cover ? 1 : 0,
|
||||
};
|
||||
const res = await ArticleAPI.getAutoList(new_data);
|
||||
if (!isEmpty(res.data)) {
|
||||
data_list.value = [];
|
||||
res.data.forEach((child: any) => {
|
||||
data_list.value.push({
|
||||
id: get_math(),
|
||||
new_title: '',
|
||||
new_cover: [],
|
||||
data: child,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
};
|
||||
watch(
|
||||
props.value,
|
||||
(newVal, oldValue) => {
|
||||
|
|
@ -160,31 +185,6 @@ const article_theme_class = computed(() => {
|
|||
}
|
||||
return `style${article_theme.value}`;
|
||||
});
|
||||
const get_auto_data_list = async (new_content: any) => {
|
||||
const { category, number, sort, sort_rules, is_cover } = new_content;
|
||||
const new_data = {
|
||||
article_keywords: '',
|
||||
article_category_ids: category.join(','),
|
||||
article_order_by_type: sort,
|
||||
article_order_by_rule: sort_rules,
|
||||
article_number: number,
|
||||
article_is_cover: is_cover ? 1 : 0,
|
||||
};
|
||||
const res = await ArticleAPI.getAutoList(new_data);
|
||||
if (!isEmpty(res.data)) {
|
||||
data_list.value = [];
|
||||
res.data.forEach((child: any) => {
|
||||
data_list.value.push({
|
||||
id: get_math(),
|
||||
new_title: '',
|
||||
new_cover: [],
|
||||
data: child,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.style1 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,559 @@
|
|||
.coupon-theme-1 {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2rem;
|
||||
.item {
|
||||
background-color: #ff3830;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
border-radius: 1rem;
|
||||
margin-top: 1rem;
|
||||
.name {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #ff3830;
|
||||
}
|
||||
.price {
|
||||
color: #ff3830;
|
||||
padding: 0.5rem 0;
|
||||
.symbol {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.number {
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.coupon-theme-1-content {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
.coupon-btn {
|
||||
margin: 0 auto;
|
||||
width: 7.1rem;
|
||||
height: 1.756rem;
|
||||
line-height: 1.756rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #ff3830;
|
||||
background: #fff1e1;
|
||||
border-radius: 2.3rem;
|
||||
position: relative;
|
||||
top: -0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-2 {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
.item {
|
||||
background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 8.5rem;
|
||||
height: 10rem;
|
||||
padding: 0.5rem;
|
||||
.name {
|
||||
font-size: 0.8rem;
|
||||
color: #ff3830;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.desc {
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
.price {
|
||||
color: #ff3830;
|
||||
padding: 0.3rem 0;
|
||||
.symbol {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.number {
|
||||
font-size: 2.6rem;
|
||||
font-weight: 500;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-btn {
|
||||
margin: 0 auto;
|
||||
width: 5.5rem;
|
||||
height: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
background: #ff3830;
|
||||
border-radius: 2.3rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-theme-3 {
|
||||
border-radius: 1.6rem;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
background: rgba(255, 56, 48, 1);
|
||||
width: 100%;
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
.left {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: #fff1e1;
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.6rem 1.2rem 0.3rem 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.price {
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #ff3830;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -3rem;
|
||||
bottom: -3rem;
|
||||
width: 0.1rem;
|
||||
height: calc(100% + 6rem);
|
||||
border-left: 0.1rem dashed #ff3830;
|
||||
}
|
||||
.symbol {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.number {
|
||||
font-size: 4.6rem;
|
||||
font-weight: 600;
|
||||
padding-left: 0.4rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 1.8rem;
|
||||
color: #ff3830;
|
||||
font-weight: 500;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.desc {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: #ff3830;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.limit {
|
||||
color: #999;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 8.6rem;
|
||||
position: relative;
|
||||
padding: 0 1.8rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background-color: #ff3830;
|
||||
left: -1.6rem;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.coupon-btn {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
.icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.item {
|
||||
border-radius: 0.6rem;
|
||||
width: 12.6rem;
|
||||
height: 6.4rem;
|
||||
position: relative;
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 10rem;
|
||||
height: 100%;
|
||||
background-image: url('../../assets/images/components/model-coupon/theme-5-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
.price {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #ff3830;
|
||||
margin-bottom: 0.5rem;
|
||||
.symbol {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.number {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 1.2rem;
|
||||
color: #ff3830;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 4.6rem;
|
||||
padding-left: 2rem;
|
||||
border-radius: 0.6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #ffa273 0%, #ff3030 100%);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.coupon-btn {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-theme-6 {
|
||||
overflow: hidden;
|
||||
.item {
|
||||
border-radius: 1.2rem;
|
||||
padding: 0.6rem;
|
||||
width: 14rem;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
background-color: #ff3030;
|
||||
.top {
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 0.6rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
background-color: #ff531b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -0.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
background-color: #ff531b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.price {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #ff3830;
|
||||
margin-bottom: 0.1rem;
|
||||
.symbol {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.number {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 0.6rem;
|
||||
text-align: center;
|
||||
.coupon-btn {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<div class="content re" :style="style_content">
|
||||
<div class="re" :style="style_content">
|
||||
<template v-if="theme == '1'">
|
||||
<div class="oh flex-row">
|
||||
<div class="coupon-theme-1">
|
||||
<div class="coupon-theme-1">
|
||||
<div class="item">
|
||||
<div class="coupon-theme-1-content tc">
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="price">
|
||||
<span class="size-8">¥</span>
|
||||
<span class="size-30 fw-b pl-4">30</span>
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
|
|
@ -16,24 +16,112 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '2'">
|
||||
<div class="oh flex-row">
|
||||
<div class="coupon-theme-2">
|
||||
<div class="coupon-theme-2-content tc">
|
||||
<div class="oh coupon-theme-2">
|
||||
<div class="item">
|
||||
<div class="tc">
|
||||
<div class="price">
|
||||
<span class="size-8">¥</span>
|
||||
<span class="size-26 fw-b pl-4">30</span>
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
<div class="desc">指定商品可用</div>
|
||||
</div>
|
||||
<div class="coupon-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '3'">
|
||||
<div class="coupon-theme-3">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="theme == '4'">
|
||||
<div class="coupon-theme-4">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<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>
|
||||
</template>
|
||||
<template v-else-if="theme == '5'">
|
||||
<div class="coupon-theme-5">
|
||||
<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>
|
||||
<template v-else-if="theme == '6'">
|
||||
<div class="coupon-theme-6">
|
||||
<div class="item">
|
||||
<div class="top">
|
||||
<div class="price">
|
||||
<span class="symbol">¥</span>
|
||||
<span class="number">30</span>
|
||||
</div>
|
||||
<div class="name">满200元使用</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="coupon-btn">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<template v-else-if="theme == '3'"></template>
|
||||
<template v-else-if="theme == '4'"></template>
|
||||
<template v-else-if="theme == '5'"></template>
|
||||
<template v-else-if="theme == '6'"></template>
|
||||
<template v-else-if="theme == '7'"></template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -48,7 +136,6 @@ const props = defineProps({
|
|||
|
||||
const style_content = ref('');
|
||||
const style_container = ref('');
|
||||
const content = ref('');
|
||||
watch(
|
||||
props.value,
|
||||
(newVal, oldValue) => {
|
||||
|
|
@ -62,72 +149,5 @@ watch(
|
|||
const theme = computed(() => props.value?.content?.theme);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coupon-theme-1 {
|
||||
background-color: #ff3830;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
border-radius: 1rem;
|
||||
margin-top: 1rem;
|
||||
gap: 2rem;
|
||||
.name {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #ff3830;
|
||||
}
|
||||
.price {
|
||||
color: #ff3830;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.coupon-theme-1-content {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
.coupon-btn {
|
||||
margin: 0 auto;
|
||||
width: 7.1rem;
|
||||
height: 1.756rem;
|
||||
line-height: 1.756rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #ff3830;
|
||||
background: #fff1e1;
|
||||
border-radius: 2.3rem;
|
||||
position: relative;
|
||||
top: -0.5rem;
|
||||
}
|
||||
}
|
||||
.coupon-theme-2 {
|
||||
background-image: url('../../assets/images/components/model-coupon/theme-2-content-bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 8.5rem;
|
||||
height: 10rem;
|
||||
gap: 2rem;
|
||||
.name {
|
||||
font-size: 0.8rem;
|
||||
color: #ff3830;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.desc {
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
.price {
|
||||
color: #ff3830;
|
||||
padding: 1rem 0 0.5rem 0;
|
||||
}
|
||||
.coupon-theme-2-content {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
background-image: url('../../assets/images/components/model-coupon/theme-1-bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const defaultCoupoin: DefaultCoupon = {
|
|||
background: [{ color: '#FFF1E1', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
spacing: 10,
|
||||
common_style: { ...defaultCommon, padding_left: 25, padding_right: 25, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
|
||||
common_style: { ...defaultCommon, padding_left: 18, padding_right: 18, padding_top: 18, padding_bottom: 18, color_list: [{ color: '#fff', color_percentage: undefined }] },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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