sws
parent
83b7014235
commit
af5e5a22dd
|
|
@ -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.
|
|
@ -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,20 +16,43 @@
|
|||
</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=""></icon>
|
||||
</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>
|
||||
|
|
@ -48,7 +71,6 @@ const props = defineProps({
|
|||
|
||||
const style_content = ref('');
|
||||
const style_container = ref('');
|
||||
const content = ref('');
|
||||
watch(
|
||||
props.value,
|
||||
(newVal, oldValue) => {
|
||||
|
|
@ -63,71 +85,194 @@ 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;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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;
|
||||
}
|
||||
.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 {
|
||||
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-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');
|
||||
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%;
|
||||
position: relative;
|
||||
top: -1rem;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.coupon-theme-3 {
|
||||
border-radius: 1.6rem;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
background: rgba(255, 56, 48, 1);
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
.left {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: #fff1e1;
|
||||
border-radius: 0.8rem;
|
||||
padding: 1rem;
|
||||
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: -1.6rem;
|
||||
bottom: -1.6rem;
|
||||
width: 0.1rem;
|
||||
height: calc(100% + 3.2rem);
|
||||
border-left: 0.2rem dashed #ff3830;
|
||||
}
|
||||
.symbol {
|
||||
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;
|
||||
}
|
||||
.desc {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: #ff3830;
|
||||
}
|
||||
.limit {
|
||||
color: #999;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 8.6rem;
|
||||
position: relative;
|
||||
padding: 1.7rem;
|
||||
text-align: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 }] },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue