修改显示问题
parent
eb8c03d23c
commit
88a16eeb16
|
|
@ -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;
|
||||
// 判断跟历史的是否相等,不相等更新组件时间
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue