修改显示问题

v1.0.0
于肖磊 2024-08-26 17:21:38 +08:00
parent eb8c03d23c
commit 88a16eeb16
10 changed files with 41 additions and 36 deletions

View File

@ -116,7 +116,7 @@ const seat_list = computed(() => {
}
})
//
const newHeight = computed(() => form.value.height + 'px');
const newHeight = computed(() => new_style.value.height + 'px');
//
const interval_type = ref('');
// key
@ -139,8 +139,8 @@ const interval_types = computed(() => interval_type.value == 'card' );
// 使
watchEffect(() => {
//#region
const time = (new_style.value?.interval_time || 2) * 1000;
const display_is_roll = new_style.value.is_roll;
const time = (form.value?.interval_time || 2) * 1000;
const display_is_roll = form.value.is_roll;
const type = form.value.carousel_type;
const carousel_length = form.value.carousel_list.length;
//

View File

@ -1,6 +1,6 @@
<template>
<div class="auxiliary-line common-content-height">
<el-form :model="form" label-width="60">
<el-form :model="form" label-width="70">
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="样式设置">
@ -16,8 +16,11 @@
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="高度设置">
<slider v-model="form.height" :max="1000"></slider>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">

View File

@ -9,11 +9,8 @@
</card-container>
<card-container class="mb-8">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
<el-form-item label="高度设置">
<slider v-model="form.height" :max="1000"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">

View File

@ -2,8 +2,8 @@
<div :style="style_container">
<el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll" @change="carousel_change">
<el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
<div ref="bannerImg" class="flex flex-wrap">
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c mt-12">
<div ref="bannerImg" class="flex flex-wrap gap-x-10">
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c">
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
<image-empty v-model="item1.nav_image[0]" :style="img_style"></image-empty>
</div>

View File

@ -20,9 +20,7 @@
<div class="news-card flex-col gap-10">
<div class="flex-row w jc-sb">
<template v-if="form.title_type == 'img'">
<div v-if="!isEmpty(form.img_src)" >
<image-empty v-model="form.img_src[0]" :style="img_style"></image-empty>
</div>
<image-empty v-model="form.img_src[0]" :style="img_style" error-img-style="width:1.6rem;height:1.6rem;"></image-empty>
</template>
<template v-else>
<div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div>
@ -90,7 +88,9 @@ const notice_list = computed(() => {
//
watchEffect(() => {
//#region
if (!isEmpty(form.value.img_src)) {
if (form.value.notice_style == 'card') {
img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
} else if (!isEmpty(form.value.img_src)) {
img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
}
//#endregion
@ -141,6 +141,10 @@ watchEffect(() => {
.one3 {
color: #FFC300;
}
.two-style {
width: 2.4rem;
height: 2.4rem;
}
.break {
word-break: break-word;
overflow-wrap: break-word;

View File

@ -10,7 +10,8 @@ interface defaultSearch {
carousel_type: string;
carousel_list: carousel_list[];
img_fit: string,
height: number,
is_roll: boolean;
interval_time: number;
};
style: {
radius: number;
@ -19,8 +20,7 @@ interface defaultSearch {
radius_bottom_left: number;
radius_bottom_right: number;
is_show: boolean;
is_roll: boolean;
interval_time: number;
height: number,
indicator_style: string;
indicator_location: string;
indicator_size: number;
@ -34,7 +34,8 @@ const defaultSearch: defaultSearch = {
content: {
carousel_type: 'inherit',
img_fit: 'contain',
height: 300,
is_roll: true,
interval_time: 2,
carousel_list: [
{
carousel_img: [],
@ -57,8 +58,7 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 0,
radius_bottom_right: 0,
is_show: true,
is_roll: true,
interval_time: 2,
height: 300,
indicator_style: 'dot',
indicator_location: 'center',
indicator_size: 5,

View File

@ -55,7 +55,7 @@ const defaultSearch: defaultSearch = {
style: {
news_color: '#000',
news_typeface: 'normal',
news_size: 15,
news_size: 12,
topic_color_list: [
{
color: '',
@ -68,7 +68,7 @@ const defaultSearch: defaultSearch = {
],
topic_color: '#000',
topic_typeface: 'normal',
topic_size: 15,
topic_size: 14,
topic_width: 24,
topic_height: 24,
button_color: '#999',

View File

@ -77,11 +77,11 @@ const defaultProductList: DefaultProductList = {
radius_bottom_right: 0,
},
shop_radius: {
radius: 0,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,

View File

@ -99,11 +99,11 @@ const defaultProductList: DefaultProductList = {
radius_bottom_right: 0,
},
shop_radius: {
radius: 0,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_outer_spacing: 10,
content_spacing: 10,

View File

@ -48,7 +48,8 @@ const defaultTabs: defaultTabs = {
tabs_color: 'rgba(51,51,51,1)',
common_style: {
...defaultCommon,
padding_top: 0,
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,