修改内容显示1
于肖磊
parent
9b72e9c4de
commit
e361e314c6
|
|
@ -1,11 +1,21 @@
|
|||
<template>
|
||||
<div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
|
||||
<div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
|
||||
<el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" />
|
||||
<el-icon class="iconfont icon-del" @click.stop="del(index)" />
|
||||
<el-icon :class="['iconfont icon-copy', { disabled: props.isTabs }]" @click.stop="copy(index)" />
|
||||
<el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" />
|
||||
<el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
|
||||
<div class="plug-in-icon" @click.stop="set_enable(index)">
|
||||
<icon :name="`${item.is_enable == '1' ? 'eye' : 'eye-close'}`" size="14" color="f" />
|
||||
</div>
|
||||
<div class="plug-in-icon" @click.stop="del(index)">
|
||||
<icon name="del" size="14" color="f" />
|
||||
</div>
|
||||
<div :class="['plug-in-icon', { 'disabled': props.isTabs }]" @click.stop="copy(index)">
|
||||
<icon name="copy" size="14" color="f" />
|
||||
</div>
|
||||
<div :class="['plug-in-icon plug-in-icon-arrow flex', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))">
|
||||
<icon name="arrow-top" size="14" color="f" />
|
||||
</div>
|
||||
<div :class="['plug-in-icon plug-in-icon-arrow flex', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))">
|
||||
<icon name="arrow-bottom" size="14" color="f" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="plug-in-name">{{ item.name }}</div>
|
||||
<div class="main-content" :class="{ 'plug-in-close': item.is_enable != '1' }" :style="mainContentStyle">
|
||||
|
|
@ -368,15 +378,14 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
|
|||
padding: 2rem 1.2rem;
|
||||
color: #fff;
|
||||
border-radius: 0.4rem;
|
||||
& > i {
|
||||
& > .plug-in-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > i.disabled {
|
||||
& > .plug-in-icon.disabled {
|
||||
color: #5db2ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
& .icon-arrow-top,
|
||||
& .icon-arrow-bottom {
|
||||
& .plug-in-icon-arrow {
|
||||
height: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@
|
|||
</el-dialog>
|
||||
<div class="search-icon re" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="icon_click">
|
||||
<icon :name="!isEmpty(icon_class) ? icon_class : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
|
||||
<el-icon v-if="!isEmpty(icon_class)" class="iconfont icon-close-fillup size-16 abs cr-c top-de-5 right-de-5" @click.stop="remove_icon" />
|
||||
<div v-if="!isEmpty(icon_class)" class="abs top-de-5 right-de-5" @click.stop="remove_icon">
|
||||
<icon name="close-fillup" size="16" color="c"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,15 @@
|
|||
overflow: hidden;
|
||||
:deep(.el-collapse) {
|
||||
border: 0;
|
||||
.el-collapse-item__header {
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 400;
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.el-collapse-item__wrap,
|
||||
.el-collapse-item__header {
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<template v-else-if="!isEmpty(form.icon_class)">
|
||||
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
|
||||
</template>
|
||||
<div class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
|
||||
<div v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
|
||||
</div>
|
||||
<div class="flex-row gap-10 align-c right-0 abs">
|
||||
<template v-if="form.keyword_show == '1'">
|
||||
|
|
|
|||
|
|
@ -9,38 +9,59 @@
|
|||
<img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
|
||||
</div>
|
||||
<div class="model-head tc re mlr-12 mt-6">
|
||||
<div class="model-head-content flex-row align-c jc-sb gap-16 re">
|
||||
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
|
||||
<div class="flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
|
||||
<template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
|
||||
<div class="logo-outer-style">
|
||||
<img class="logo-style" :src="form.logo[0].url" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
|
||||
<template v-if="['3', '5'].includes(form.theme)">
|
||||
<div class="flex-col" :style="`gap: ${ new_style.data_alone_row_space }px`">
|
||||
<div class="model-head-content flex-row align-c jc-sb gap-16 re">
|
||||
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
|
||||
<div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
|
||||
<template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
|
||||
<div class="logo-outer-style">
|
||||
<img class="logo-style" :src="form.logo[0].url" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
|
||||
<template v-if="['3', '5'].includes(form.theme) && !is_search_alone_row">
|
||||
<div class="flex-1">
|
||||
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<div class="flex-1 flex-row gap-2" :style="'color:' + new_style.position_color">
|
||||
<template v-if="form.is_location_left_icon_show == '1'">
|
||||
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
|
||||
<icon v-else :name="form.location_left_icon" size="12"></icon>
|
||||
</template>
|
||||
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
|
||||
<template v-if="form.is_location_right_icon_show == '1'">
|
||||
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
|
||||
<icon v-else :name="form.location_right_icon" size="12"></icon>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="['5'].includes(form.theme) && !is_search_alone_row">
|
||||
<div class="flex-1">
|
||||
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<div class="flex-row gap-2" :style="'color:' + new_style.position_color">
|
||||
<icon name="location" size="12"></icon>
|
||||
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
|
||||
<icon v-if="form.is_arrows_show == '1'" name="arrow-bottom" size="12"></icon>
|
||||
<div v-if="!isEmpty(form.icon_setting) && !is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
|
||||
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
|
||||
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
|
||||
<icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="['5'].includes(form.theme)">
|
||||
</div>
|
||||
<div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
|
||||
<template v-if="['3', '5'].includes(form.theme) && is_search_alone_row">
|
||||
<div class="flex-1">
|
||||
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="!isEmpty(form.icon_setting)" class="flex-row align-c" :class="'gap-' + new_style.img_space">
|
||||
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
|
||||
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
|
||||
<icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
|
||||
<div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
|
||||
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
|
||||
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
|
||||
<icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,6 +90,10 @@ const page_settings = () => {
|
|||
};
|
||||
const form = computed(() => props.pageData.com_data.content);
|
||||
const new_style = computed(() => props.pageData.com_data.style);
|
||||
|
||||
const is_search_alone_row = computed(() => form.value.data_alone_row_value.includes('search'));
|
||||
const is_icon_alone_row = computed(() => form.value.data_alone_row_value.includes('icon'));
|
||||
|
||||
const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative'));
|
||||
const roll_style = computed(() => {
|
||||
let style = ``;
|
||||
|
|
@ -138,13 +163,18 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
|
|||
}
|
||||
}
|
||||
.model-head {
|
||||
height: 3.2rem;
|
||||
// height: 3.2rem;
|
||||
overflow: hidden;
|
||||
.model-head-content {
|
||||
height: 3.2rem;
|
||||
.location-name {
|
||||
line-height: 3.2rem;
|
||||
max-width: 15rem;
|
||||
}
|
||||
:deep(.el-image) {
|
||||
width: 100%;
|
||||
max-height: 3.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.model-head-icon {
|
||||
|
|
|
|||
|
|
@ -44,11 +44,35 @@
|
|||
<el-form-item label="定位名称">
|
||||
<el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头按钮">
|
||||
<el-switch v-model="form.is_arrows_show" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="数据换行">
|
||||
<el-checkbox-group v-model="form.data_alone_row_value">
|
||||
<el-checkbox v-for="item in base_list.list_show_list.filter(item => item.type.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<template v-if="['4', '5'].includes(form.theme)">
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">定位设置</div>
|
||||
<el-form-item label="左侧图标">
|
||||
<el-row class="w">
|
||||
<el-col :span="24"><el-switch v-model="form.is_location_left_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.is_location_left_icon_show == '1'" class="mt-10 w">
|
||||
<el-col :span="24"><upload v-model="form.location_left_img" v-model:icon-value="form.location_left_icon" is-icon :limit="1" size="50"></upload></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="右侧图标">
|
||||
<el-row class="w">
|
||||
<el-col :span="24"><el-switch v-model="form.is_location_right_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.is_location_right_icon_show == '1'" class="mt-10 w">
|
||||
<el-col :span="24"><upload v-model="form.location_right_img" v-model:icon-value="form.location_right_icon" is-icon :limit="1" size="50"></upload></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</template>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<template v-if="['3', '5'].includes(form.theme)">
|
||||
<model-search-content :value="form"></model-search-content>
|
||||
|
|
@ -97,7 +121,11 @@ const base_list = reactive({
|
|||
{ id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
|
||||
{ id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
|
||||
{ id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
|
||||
]
|
||||
],
|
||||
list_show_list: [
|
||||
{ name: '搜索', value: 'search', type: ['3', '5'] },
|
||||
{ name: '右侧图标', value: 'icon', type: ['1', '2', '3', '4', '5' ] },
|
||||
],
|
||||
});
|
||||
|
||||
const icon_setting_remove = (index: number) => {
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
<el-radio value="1">白色</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
|
||||
<el-form-item v-if="['1', '2'].includes(page_content.theme)" label="标题名称">
|
||||
<color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['4', '5'].includes(search_content.theme)" label="定位颜色">
|
||||
<el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
|
||||
<color-picker v-model="form.position_color" default-color="#333"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
|
||||
|
|
@ -58,6 +58,9 @@
|
|||
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="page_content.data_alone_row_value.length > 0" label="换行间距">
|
||||
<slider v-model="form.data_alone_row_space" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
|
|
@ -111,14 +114,14 @@ const is_have_tabs = computed(() => {
|
|||
const emit = defineEmits(['update:value']);
|
||||
const state = reactive({
|
||||
form: props.value,
|
||||
search_content: props.content,
|
||||
page_content: props.content,
|
||||
});
|
||||
// 如果需要解构，确保使用toRefs
|
||||
const { form, search_content } = toRefs(state);
|
||||
const { form, page_content } = toRefs(state);
|
||||
// 监听属性变化
|
||||
watchEffect(() => {
|
||||
form.value = props.value;
|
||||
search_content.value = props.content;
|
||||
page_content.value = props.content;
|
||||
});
|
||||
|
||||
const header_background_type_change_event = (val: any) => {
|
||||
|
|
|
|||
|
|
@ -11,11 +11,17 @@ interface DefaultFooterNav {
|
|||
logo: uploadList[];
|
||||
title: string;
|
||||
link: object;
|
||||
data_alone_row_value: string[];
|
||||
indicator_location: string;
|
||||
bottom_navigation_show: string;
|
||||
positioning_name: string;
|
||||
icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
|
||||
is_arrows_show: string;
|
||||
is_location_left_icon_show: string,
|
||||
location_left_img: uploadList[],
|
||||
location_left_icon: string,
|
||||
is_location_right_icon_show: string,
|
||||
location_right_img: uploadList[],
|
||||
location_right_icon: string,
|
||||
is_center: string;
|
||||
is_icon_show: string;
|
||||
icon_link: object;
|
||||
|
|
@ -40,6 +46,7 @@ interface DefaultFooterNav {
|
|||
header_background_title_typeface: string;
|
||||
header_background_title_size: number;
|
||||
function_buttons_type: string;
|
||||
data_alone_row_space: number;
|
||||
immersive_style: string;
|
||||
up_slide_display: string;
|
||||
up_slide_background_color_list: color_list[];
|
||||
|
|
@ -72,10 +79,16 @@ const defaultFooterNav: DefaultFooterNav = {
|
|||
logo: [],
|
||||
title: '新建页面',
|
||||
link: {},
|
||||
data_alone_row_value: [],
|
||||
indicator_location: 'center',
|
||||
positioning_name: '未选择位置',
|
||||
icon_setting: [{ id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: { name: '我的消息', page: '/pages/message/message' } }],
|
||||
is_arrows_show: '1',
|
||||
is_location_left_icon_show: '1',
|
||||
location_left_img: [],
|
||||
location_left_icon: 'location',
|
||||
is_location_right_icon_show: '1',
|
||||
location_right_img: [],
|
||||
location_right_icon: 'arrow-bottom',
|
||||
is_center: '0',
|
||||
is_icon_show: '1',
|
||||
icon_link: {},
|
||||
|
|
@ -100,6 +113,7 @@ const defaultFooterNav: DefaultFooterNav = {
|
|||
header_background_title_color: '#333',
|
||||
header_background_title_typeface: '500',
|
||||
header_background_title_size: 14,
|
||||
data_alone_row_space: 5,
|
||||
function_buttons_type: '0',
|
||||
immersive_style: '0',
|
||||
up_slide_display: '1',
|
||||
|
|
|
|||
Loading…
Reference in New Issue