sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改页面参数

v1.0.0
于肖磊 2024-09-04 10:18:32 +08:00
parent f2241a1739
commit 846fc556c7
10 changed files with 94 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/icons/iconfont.css
View File

@ -1,9 +1,9 @@
@font-face {
font-family: "iconfont"; /* Project id 4607934 */
src: url('iconfont.woff2?t=1725006134098') format('woff2'),
url('iconfont.woff?t=1725006134098') format('woff'),
url('iconfont.ttf?t=1725006134098') format('truetype'),
url('iconfont.svg?t=1725006134098#iconfont') format('svg');
src: url('iconfont.woff2?t=1725414216013') format('woff2'),
url('iconfont.woff?t=1725414216013') format('woff'),
url('iconfont.ttf?t=1725414216013') format('truetype'),
url('iconfont.svg?t=1725414216013#iconfont') format('svg');
}
.iconfont {
@ -14,16 +14,16 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-a-miaosha:before {
content: "\e797";
}
.icon-close-b:before {
content: "\e745";
}
.icon-youhuiquanjiantou:before {
content: "\e796";
}
.icon-arrow-right-o:before {
content: "\e6aa";
content: "\e796";
}
.icon-ellipsis:before {

2
src/assets/icons/iconfont.js
View File

File diff suppressed because one or more lines are too long

18
src/assets/icons/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "web端",
"glyphs": [
{
"icon_id": "41708758",
"name": "秒杀",
"font_class": "a-miaosha",
"unicode": "e797",
"unicode_decimal": 59287
},
{
"icon_id": "40047116",
"name": "进销存关闭2",
@ -14,18 +21,11 @@
},
{
"icon_id": "41674274",
"name": "优惠券箭头",
"font_class": "youhuiquanjiantou",
"name": "右箭头",
"font_class": "arrow-right-o",
"unicode": "e796",
"unicode_decimal": 59286
},
{
"icon_id": "36882570",
"name": "右箭头-2",
"font_class": "arrow-right-o",
"unicode": "e6aa",
"unicode_decimal": 59050
},
{
"icon_id": "39793709",
"name": "三点",

6
src/assets/icons/iconfont.svg
View File

@ -14,11 +14,11 @@
/>
<missing-glyph />
<glyph glyph-name="a-miaosha" unicode="&#59287;" d="M501.504-102.4V300.629333H248.746667l313.770666 492.373334v-350.72h248.32L501.589333-102.4z" horiz-adv-x="1024" />
<glyph glyph-name="close-b" unicode="&#59205;" d="M512-128C229.6832-128 0 101.6832 0 384S229.6832 896 512 896s512-229.6832 512-512-229.6832-512-512-512z m0 984.610133C251.392 856.610133 39.389867 644.608 39.389867 384S251.392-88.610133 512-88.610133 984.610133 123.392 984.610133 384 772.608 856.610133 512 856.610133zM330.990933 183.296a19.694933 19.694933 0 0 0-13.9264 33.621333L679.082667 578.901333a19.694933 19.694933 0 1 0 27.8528-27.8528L344.917333 189.098667a19.592533 19.592533 0 0 0-13.9264-5.802667zM693.009067 183.296a19.592533 19.592533 0 0 0-13.9264 5.768533L317.098667 551.082667a19.694933 19.694933 0 1 0 27.8528 27.8528L706.901333 216.917333a19.694933 19.694933 0 0 0-13.9264-33.621333z" horiz-adv-x="1024" />
<glyph glyph-name="youhuiquanjiantou" unicode="&#59286;" d="M512 896c282.24 0 512-229.76 512-512s-229.76-512-512-512-512 229.76-512 512 229.76 512 512 512zM447.36 594.56a25.472 25.472 0 0 1-36.48 0c-10.24-10.24-10.24-26.24 0-36.48l173.76-173.76L410.88 210.56c-10.24-10.24-10.24-26.24 0-36.48 5.12-5.12 11.52-7.68 17.92-7.68 6.4 0 12.8 2.56 18.56 7.68l192 192c10.24 10.24 10.24 26.24 0 36.48z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-right-o" unicode="&#59050;" 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="arrow-right-o" unicode="&#59286;" d="M512 896c282.24 0 512-229.76 512-512s-229.76-512-512-512-512 229.76-512 512 229.76 512 512 512zM447.36 594.56a25.472 25.472 0 0 1-36.48 0c-10.24-10.24-10.24-26.24 0-36.48l173.76-173.76L410.88 210.56c-10.24-10.24-10.24-26.24 0-36.48 5.12-5.12 11.52-7.68 17.92-7.68 6.4 0 12.8 2.56 18.56 7.68l192 192c10.24 10.24 10.24 26.24 0 36.48z" horiz-adv-x="1024" />
<glyph glyph-name="ellipsis" unicode="&#58933;" 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" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 68 KiB

BIN
src/assets/icons/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/icons/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/icons/iconfont.woff2
View File

Binary file not shown.

60
src/components/model-seckill/index.vue
View File

@ -40,8 +40,15 @@
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
</template>
<div class="flex-col gap-10" :style="content_style">
<div>{{ item.title }}</div>
<div class="flex-col gap-10 w flex-1" :style="content_style">
<div >{{ item.title }}</div>
<div class="flex-row align-c gap-6">
<div class="re flex-1">
<div class="slide-bottom" :style="`background: ${ new_style.progress_bg_color }`"></div>
<div class="slide-top" :style="` width: 51%; ${ slide_active_color }`"><div class="slide-top-icon round" :style="`background: ${ new_style.progress_button_color }`"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></div></div>
</div>
<span class="size-10" :style="`color: ${ new_style.progress_text_color }`">已抢51%</span>
</div>
</div>
</div>
</div>
@ -49,7 +56,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, common_styles_computer, gradient_computer, padding_computer, radius_computer } from '@/utils';
import { background_computer, common_styles_computer, gradient_computer, gradient_handle, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
import { online_url } from '@/utils';
@ -85,6 +92,13 @@ const icon_time_check = () => {
return `${ time_bg.value };line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
}
const slide_active_color = computed(() => {
const { progress_actived_color_list, progress_actived_direction } = new_style.value;
// 渐变
const gradient = { color_list: progress_actived_color_list, direction: progress_actived_direction };
return gradient_computer(gradient);
});
const seckill_head_style = computed(() => {
let style = ``;
const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
@ -193,6 +207,24 @@ const layout_type = computed(() => {
}
return class_type;
});
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
};
// 根据传递的值，显示不同的内容
const style_config = (typeface: string, size: number, color: string | object, type?: string) => {
let style = `font-weight:${typeface}; font-size: ${size}px;`;
if (type == 'gradient') {
style += button_gradient();
} else {
style += `color: ${color};`;
}
return style;
};
// 按钮渐变色处理
const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '180deg');
};
// 不换行显示
const multicolumn_columns_width = computed(() => {
const { single_line_number } = toRefs(form.value);
@ -257,4 +289,26 @@ const content_img_radius = computed(() => radius_computer(new_style.value.shop_i
width: 100%;
min-height: 10.4rem;
}
.slide-bottom {
height: 1rem;
border-radius: 0.5rem;
background: red;
}
.slide-top {
position: absolute;
height: 1rem;
top: 0;
left: 0;
border-radius: 0.5rem;
.slide-top-icon {
position: absolute;
top: -0.3rem;
right: 0;
width: 1.6rem;
height: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>

2
src/components/model-shop-list/index.vue
View File

@ -365,7 +365,7 @@ const style_config = (typeface: string, size: number, color: string | object, ty
};
// 按钮渐变色处理
const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '90deg');
return gradient_handle(new_style.value.shop_button_color, '180deg');
};
// icon标志显示样式
const icon_style = (item: { bg_color: string; color: string; br_color: string }) => {

24
src/views/layout/components/main/default/seckill.ts
View File

@ -40,7 +40,9 @@ interface DefaultSeckill {
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: number;
price_color: string;
shop_price_typeface: string;
shop_price_size: number;
shop_price_color: string;
original_price_color: string;
seckill_subscript_location: string;
seckill_subscript_text_color: string;
@ -111,20 +113,22 @@ const defaultSeckill: DefaultSeckill = {
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_height: 232,
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: 12,
price_color: '',
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: "#EA3323;",
original_price_color: '',
seckill_subscript_location: '',
seckill_subscript_text_color: '',
seckill_subscript_bg_color: '',
progress_bg_color: '',
progress_actived_color_list: [{ color: '', color_percentage: undefined }],
progress_bg_color: '#FFEDED',
progress_actived_color_list: [{ color: '#FF3131', color_percentage: undefined }, { color: '#FF973D', color_percentage: undefined }],
progress_actived_direction: '180deg',
progress_button_color: '',
progress_button_icon_color: '',
progress_text_color: '',
progress_button_color: '#FFDE81',
progress_button_icon_color: '#FF2525',
progress_text_color: '#FF3434',
is_roll: true,
interval_time: 2,
rolling_fashion: 'translation',