修改公告右侧显示

v1.0.0
于肖磊 2024-10-22 17:51:00 +08:00
parent 675152d6c9
commit 9dc4022bfa
4 changed files with 26 additions and 13 deletions

View File

@ -13,12 +13,12 @@
</div>
</template>
<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>
<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>
<div v-if="form.is_right_button == '1'" class="size-12"><icon name="arrow-right" :color="new_style.button_color || '#999'"></icon></div>
<div v-if="form.is_right_button == '1'" :style="`color: ${new_style.right_button_color}; font-size: ${ new_style.right_button_size }px`">{{ form.right_title }}<icon name="arrow-right" :color="new_style.button_color || '#999'"></icon></div>
</div>
</div>
</template>
@ -35,9 +35,9 @@
</template>
</template>
<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>
<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 v-if="form.is_right_button == '1'" :style="`color: ${ new_style.right_button_color }; font-size: ${ new_style.right_button_size }px`">{{ form.right_title }}<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 align-c" :style="news_style">
<span :class="`num one${index + 1}`">{{ index + 1 }}</span>

View File

@ -43,9 +43,14 @@
<el-form-item label="右侧按钮">
<el-switch v-model="form.is_right_button" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item v-if="form.is_right_button != '0'" label="链接">
<url-value v-model="form.more_link"></url-value>
</el-form-item>
<template v-if="form.is_right_button != '0'">
<el-form-item label="右侧文字">
<el-input v-model="form.right_title" placeholder="请输入标题" clearable></el-input>
</el-form-item>
<el-form-item label="链接">
<url-value v-model="form.more_link"></url-value>
</el-form-item>
</template>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>

View File

@ -37,14 +37,21 @@
</el-form-item>
</template>
</template>
<el-form-item label="右侧按钮">
<color-picker v-model="form.button_color" default-color="#999"></color-picker>
</el-form-item>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.news_color" v-model:typeface="form.news_typeface" v-model:size="form.news_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">更多设置</div>
<el-form-item label="按钮颜色">
<color-picker v-model="form.right_button_color" default-color="#999"></color-picker>
</el-form-item>
<el-form-item label="按钮文字">
<slider v-model="form.right_button_size" :max="100"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<template v-if="substance.notice_style === 'inherit'">

View File

@ -21,7 +21,8 @@ interface defaultSearch {
notice_list: carousel_list[];
};
style: {
button_color: string;
right_button_color: string;
right_button_size: number;
news_color: string;
news_typeface: string;
news_size: number;
@ -50,7 +51,6 @@ const defaultSearch: defaultSearch = {
title_type: 'img-icon',
title: '测试标题',
img_src: [],
// 滚动方式
direction: 'vertical',
interval_time: 3,
@ -92,7 +92,8 @@ const defaultSearch: defaultSearch = {
title_height: 24,
icon_size: 12,
icon_color: '#999',
button_color: '#999',
right_button_color: '#999',
right_button_size: 12,
// 容器高度
container_height: 44,
// 容器信息