1.代码优化

v1.0.0
sws 2024-09-14 14:53:52 +08:00
parent 9d4f415ab2
commit 32d38efb78
4 changed files with 30 additions and 27 deletions

View File

@ -135,12 +135,12 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
position: relative; position: relative;
} }
.style9-top { .style9-top {
width: calc(50% - 0.2rem); width: 50%;
height: 50%; height: 50%;
position: relative; position: relative;
} }
.style9-bottom { .style9-bottom {
width: calc(33% - 0.1rem); width: calc(100% / 3);
height: 50%; height: 50%;
position: relative; position: relative;
} }

View File

@ -14,9 +14,9 @@
<div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div> <div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div>
</template> </template>
<el-carousel :key="carouselKey" class="flex-1" indicator-position="none" :interval="interval_time" arrow="never" :direction="direction_type" :autoplay="true"> <el-carousel :key="carouselKey" class="flex-1" indicator-position="none" :interval="interval_time" arrow="never" :direction="direction_type" :autoplay="true">
<el-carousel-item v-for="(item, index) in notice_list" :key="index" :style="`${ news_style } color: ${ new_style.news_color }`">{{ item.notice_title }}</el-carousel-item> <el-carousel-item v-for="(item, index) in notice_list" :key="index" :style="`${news_style} color: ${new_style.news_color}`">{{ item.notice_title }}</el-carousel-item>
</el-carousel> </el-carousel>
<div v-if="form.is_right_button == '1'" class="size-12"><el-icon class="iconfont icon-arrow-right" :color="new_style.button_color || '#999'"></el-icon></div> <div v-if="form.is_right_button == '1'" class="size-12"><icon name="arrow-right" :color="new_style.button_color || '#999'"></icon></div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -33,9 +33,12 @@
<template v-else> <template v-else>
<div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div> <div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div>
</template> </template>
<div v-if="form.is_right_button == '1'" class="size-12" :style="`color: ${ new_style.button_color || '#999'}`">更多<el-icon class="iconfont icon-arrow-right" :color="new_style.button_color || '#999'"></el-icon></div> <div v-if="form.is_right_button == '1'" class="size-12" :style="`color: ${new_style.button_color || '#999'}`">更多<icon name="arrow-right" :color="new_style.button_color || '#999'"></icon></div>
</div>
<div v-for="(item, index) in notice_list" :key="index" class="flex" :style="news_style">
<span :class="`num one${index + 1}`">{{ index + 1 }}</span>
<div class="break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
</div> </div>
<div v-for="(item, index) in notice_list" :key="index" class="flex" :style="news_style"><span :class="`num one${ index + 1 }`">{{ index + 1 }}</span><div class="break" :style="`color: ${ new_style.news_color }`">{{ item.notice_title }}</div></div>
</div> </div>
</template> </template>
</div> </div>
@ -76,16 +79,16 @@ const container_background_style = computed(() => {
return gradient_computer(styles) + radius_computer(new_style.value.container_radius) + background_computer(styles) + `overflow:hidden;`; return gradient_computer(styles) + radius_computer(new_style.value.container_radius) + background_computer(styles) + `overflow:hidden;`;
}); });
// //
const img_style = computed(() => `height: ${ new_style.value.title_height }px; width: ${ new_style.value.title_width }px`); const img_style = computed(() => `height: ${new_style.value.title_height}px; width: ${new_style.value.title_width}px`);
// //
const topic_style = computed(() => { const topic_style = computed(() => {
// //
const gradient = gradient_handle(new_style.value.title_color_list, '90deg'); const gradient = gradient_handle(new_style.value.title_color_list, '90deg');
// //
return `color:${ new_style.value.title_color }; font-size: ${ new_style.value.title_size }px; font-weight: ${ new_style.value.title_typeface }; ${ gradient }`; return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; font-weight: ${new_style.value.title_typeface}; ${gradient}`;
}); });
// //
const news_style = computed(() => `font-size: ${ new_style.value.news_size }px; font-weight: ${ new_style.value.news_typeface };`); const news_style = computed(() => `font-size: ${new_style.value.news_size}px; font-weight: ${new_style.value.news_typeface};`);
// //
// //
const interval_time = ref(2000); const interval_time = ref(2000);
@ -97,14 +100,14 @@ const carouselKey = ref('0');
const interval_list = ref({ const interval_list = ref({
time: 2000, time: 2000,
direction: 'vertical', direction: 'vertical',
notice_length: 1 notice_length: 1,
}) });
const notice_list = computed(() => { const notice_list = computed(() => {
// //
const arry_list = cloneDeep(form.value.notice_list); const arry_list = cloneDeep(form.value.notice_list);
return arry_list.filter((item: { is_show: string; }) => item.is_show == '1'); return arry_list.filter((item: { is_show: string }) => item.is_show == '1');
}) });
// //
watchEffect(() => { watchEffect(() => {
@ -123,7 +126,7 @@ watchEffect(() => {
interval_list.value = { interval_list.value = {
time: time, time: time,
direction: direction, direction: direction,
notice_length: notice_length notice_length: notice_length,
}; };
// key // key
carouselKey.value = get_math(); carouselKey.value = get_math();
@ -147,13 +150,13 @@ watchEffect(() => {
color: #999; color: #999;
} }
.one1 { .one1 {
color: #EA3323; color: #ea3323;
} }
.one2 { .one2 {
color: #FF7303; color: #ff7303;
} }
.one3 { .one3 {
color: #FFC300; color: #ffc300;
} }
.two-style { .two-style {
width: 2.4rem; width: 2.4rem;

View File

@ -25,12 +25,12 @@
</el-form-item> </el-form-item>
<el-form-item label="数据类型" class="w mb-0"> <el-form-item label="数据类型" class="w mb-0">
<el-radio-group v-model="scoped.row.data_type"> <el-radio-group v-model="scoped.row.data_type">
<el-radio value="micro_page">微页面</el-radio> <el-radio value="0">微页面</el-radio>
<el-radio value="category">选择分类</el-radio> <el-radio value="1">选择分类</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="scoped.row.data_type == 'micro_page' ? '微页面' : '商品分类'" class="w mb-0"> <el-form-item :label="scoped.row.data_type == '0' ? '微页面' : '商品分类'" class="w mb-0">
<template v-if="scoped.row.data_type == 'micro_page'"> <template v-if="scoped.row.data_type == '0'">
<url-value v-model="scoped.row.micro_page_list"></url-value> <url-value v-model="scoped.row.micro_page_list"></url-value>
</template> </template>
<template v-else> <template v-else>
@ -69,11 +69,11 @@ const add = () => {
id: get_math(), id: get_math(),
title: '', title: '',
desc: '', desc: '',
data_type: 'micro_page', data_type: '0',
classify: {}, classify: {},
micro_page: '', micro_page: '',
micro_page_list: [], micro_page_list: {},
category_list: [], category_list: {},
}); });
}; };
const remove = (index: number) => { const remove = (index: number) => {

View File

@ -34,9 +34,9 @@ const defaultTabs: defaultTabs = {
tabs_theme: '0', tabs_theme: '0',
tabs_top_up: '1', tabs_top_up: '1',
tabs_list: [ tabs_list: [
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} }, { id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '测试一', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} }, { id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
{ id: get_math(), title: '测试二', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} }, { id: get_math(), title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
], ],
}, },
style: { style: {