1.全局background_img_url字段更新为background_img
parent
da79984bae
commit
def8e5889f
|
|
@ -22,7 +22,7 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.background_img_url" :limit="1" @update:model-value="background_img_url_change"></upload>
|
||||
<upload v-model="form.background_img" :limit="1" @update:model-value="background_img_change"></upload>
|
||||
</div>
|
||||
<div v-else>
|
||||
<color-picker v-model="form.color_list[0].color"></color-picker>
|
||||
|
|
@ -87,7 +87,7 @@ const props = defineProps({
|
|||
// 初始化表单数据
|
||||
const init_form = reactive({
|
||||
direction: '180deg',
|
||||
background_img_url: [] as uploadList[],
|
||||
background_img: [] as uploadList[],
|
||||
color_list: [{ color: '', color_percentage: undefined }] as color_list[],
|
||||
background_img_style: 2,
|
||||
padding: 0,
|
||||
|
|
@ -124,8 +124,8 @@ const background_img_style_change = (style: any) => {
|
|||
form.background_img_style = style;
|
||||
emit('update:value', form);
|
||||
};
|
||||
const background_img_url_change = (arry: uploadList[]) => {
|
||||
form.background_img_url = arry;
|
||||
const background_img_change = (arry: uploadList[]) => {
|
||||
form.background_img = arry;
|
||||
emit('update:value', form);
|
||||
};
|
||||
const radius_change = (radius: any) => {
|
||||
|
|
|
|||
|
|
@ -191,10 +191,10 @@ const default_config = {
|
|||
},
|
||||
common_style: {
|
||||
theme_default: {
|
||||
background_img_url: [],
|
||||
background_img: [],
|
||||
},
|
||||
theme_2: {
|
||||
background_img_url: [{ url: 'http://shopxo.com/static/upload/images/common/2024/08/28/1724815957918121.png' }],
|
||||
background_img: [{ url: 'http://shopxo.com/static/upload/images/common/2024/08/28/1724815957918121.png' }],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.background_img_url" :limit="1"></upload>
|
||||
<upload v-model="form.background_img" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动轮播">
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const data_style = {
|
|||
color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
|
||||
direction: '180deg',
|
||||
background_img_style: 2,
|
||||
background_img_url: [],
|
||||
background_img: [],
|
||||
is_roll: false,
|
||||
rotation_direction: 'horizontal',
|
||||
interval_time: 2,
|
||||
|
|
|
|||
|
|
@ -66,11 +66,11 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
|
|||
const container_height = computed(() => new_style.value.container_height + 'px');
|
||||
// 容器背景
|
||||
const container_background_style = computed(() => {
|
||||
const { container_color_list, container_direction, container_background_img_style, container_background_img_url } = new_style.value;
|
||||
const { container_color_list, container_direction, container_background_img_style, container_background_img } = new_style.value;
|
||||
const styles = {
|
||||
color_list: container_color_list,
|
||||
direction: container_direction,
|
||||
background_img_url: container_background_img_url,
|
||||
background_img: container_background_img,
|
||||
background_img_style: container_background_img_style,
|
||||
};
|
||||
return gradient_computer(styles) + radius_computer(new_style.value.container_radius) + background_computer(styles) + `overflow:hidden;`;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.container_background_img_url" :limit="1"></upload>
|
||||
<upload v-model="form.container_background_img" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="容器圆角">
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.background_img_url" :limit="1"></upload>
|
||||
<upload v-model="form.background_img" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="按钮圆角">
|
||||
|
|
|
|||
|
|
@ -206,11 +206,11 @@ const slide_active_color = computed(() => {
|
|||
|
||||
const seckill_head_style = computed(() => {
|
||||
let style = ``;
|
||||
const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
|
||||
const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
|
||||
// 渐变
|
||||
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
|
||||
// 背景图
|
||||
const back = { background_img_url: header_background_img_url, background_img_style: header_background_img_style };
|
||||
const back = { background_img: header_background_img, background_img_style: header_background_img_style };
|
||||
style += gradient_computer(gradient) + background_computer(back);
|
||||
return style;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ onBeforeMount(async () => {
|
|||
header_background_color_list: [{ color: '', color_percentage: undefined }],
|
||||
header_background_direction: '180deg',
|
||||
header_background_img_style: '2',
|
||||
header_background_img_url: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
|
||||
header_background_img: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
|
||||
shop_radius: {
|
||||
radius: 8,
|
||||
radius_top_left: 8,
|
||||
|
|
@ -130,7 +130,7 @@ onBeforeMount(async () => {
|
|||
topic_color: '#000',
|
||||
end_text_color: '#666',
|
||||
header_background_color_list: [{ color: '#FFE0E0', color_percentage: undefined },{ color: '#FFEFEF', color_percentage: 50 }, { color: '#FFFFFF', color_percentage: undefined }],
|
||||
header_background_img_url: [],
|
||||
header_background_img: [],
|
||||
countdown_bg_color_list: [{ color: '#FF4909', color_percentage: undefined }, { color: '#FF8E4D', color_percentage: undefined }],
|
||||
countdown_direction: '180deg',
|
||||
countdown_color: '#fff',
|
||||
|
|
@ -147,7 +147,7 @@ onBeforeMount(async () => {
|
|||
head_button_color: '#000',
|
||||
end_text_color: '#666',
|
||||
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
header_background_img_url: [],
|
||||
header_background_img: [],
|
||||
countdown_bg_color_list: [{ color: '#000', color_percentage: undefined }],
|
||||
countdown_direction: '180deg',
|
||||
countdown_color: '#fff',
|
||||
|
|
@ -164,7 +164,7 @@ onBeforeMount(async () => {
|
|||
head_button_color: '#000',
|
||||
end_text_color: '#666',
|
||||
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
header_background_img_url: [],
|
||||
header_background_img: [],
|
||||
countdown_bg_color_list: [{ color: '#FF5000', color_percentage: undefined }],
|
||||
countdown_direction: '180deg',
|
||||
countdown_color: '#fff',
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.header_background_img_url" :limit="1"></upload>
|
||||
<upload v-model="form.header_background_img" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
|
|||
|
|
@ -50,12 +50,12 @@ const new_style = computed(() => props.pageData.com_data.style);
|
|||
const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
|
||||
const roll_style = computed(() => {
|
||||
let style = ``;
|
||||
const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction, header_background_type } = new_style.value;
|
||||
const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction, header_background_type } = new_style.value;
|
||||
if (header_background_type === 'color_image') {
|
||||
// 渐变
|
||||
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
|
||||
// 背景图
|
||||
const back = { background_img_url: header_background_img_url, background_img_style: header_background_img_style };
|
||||
const back = { background_img: header_background_img, background_img_style: header_background_img_style };
|
||||
style += gradient_computer(gradient) + background_computer(back);
|
||||
} else {
|
||||
style += `background: transparent;`;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const default_data = {
|
|||
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
header_background_direction: '180deg',
|
||||
header_background_img_style: 2,
|
||||
header_background_img_url: [],
|
||||
header_background_img: [],
|
||||
header_background_title_color: '#333',
|
||||
header_background_title_typeface: '500',
|
||||
header_background_title_size: 16,
|
||||
|
|
@ -35,7 +35,7 @@ const default_data = {
|
|||
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_img_style: '',
|
||||
background_img_url: [],
|
||||
background_img: [],
|
||||
search_button_radius: {
|
||||
radius: 16,
|
||||
radius_top_left: 16,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<upload v-model="form.header_background_img_url" :limit="1"></upload>
|
||||
<upload v-model="form.header_background_img" :limit="1"></upload>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ declare global {
|
|||
* 背景图
|
||||
*/
|
||||
type backgroundImgUrlStyle = {
|
||||
background_img_url: uploadList[];
|
||||
background_img: uploadList[];
|
||||
background_img_style: number;
|
||||
};
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ declare global {
|
|||
box_shadow_y: number;
|
||||
box_shadow_blur: number;
|
||||
box_shadow_spread: number;
|
||||
background_img_url: uploadList[];
|
||||
background_img: uploadList[];
|
||||
};
|
||||
/**
|
||||
* 链接参数
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ export function box_shadow_computer(new_style: boxShadowStyle) {
|
|||
* @returns {string}
|
||||
*/
|
||||
export function background_computer(new_style: backgroundImgUrlStyle) {
|
||||
if (new_style.background_img_url.length > 0) {
|
||||
if (new_style.background_img.length > 0) {
|
||||
let url_styke = '';
|
||||
if (new_style.background_img_style == 1) {
|
||||
url_styke = 'background-repeat: repeat;';
|
||||
|
|
@ -157,7 +157,7 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
|
|||
} else {
|
||||
url_styke = `background-repeat: no-repeat;background-position: center;`;
|
||||
}
|
||||
return `background-image:url(${new_style.background_img_url[0].url});${url_styke}`;
|
||||
return `background-image:url(${new_style.background_img[0].url});${url_styke}`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ interface DefaultFooterNav {
|
|||
header_background_color_list: color_list[];
|
||||
header_background_direction: string;
|
||||
header_background_img_style: number;
|
||||
header_background_img_url: uploadList[];
|
||||
header_background_img: uploadList[];
|
||||
header_background_title_color: string,
|
||||
header_background_title_typeface: string,
|
||||
header_background_title_size: number,
|
||||
|
|
@ -46,7 +46,7 @@ interface DefaultFooterNav {
|
|||
color_list: color_list[];
|
||||
direction: string;
|
||||
background_img_style: string;
|
||||
background_img_url: uploadList[];
|
||||
background_img: uploadList[];
|
||||
search_button_radius: object;
|
||||
tips_color: string;
|
||||
hot_words_color: string;
|
||||
|
|
@ -90,7 +90,7 @@ const defaultFooterNav: DefaultFooterNav = {
|
|||
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
header_background_direction: '180deg',
|
||||
header_background_img_style: 2,
|
||||
header_background_img_url: [],
|
||||
header_background_img: [],
|
||||
header_background_title_color: '#333',
|
||||
header_background_title_typeface: '500',
|
||||
header_background_title_size: 16,
|
||||
|
|
@ -102,7 +102,7 @@ const defaultFooterNav: DefaultFooterNav = {
|
|||
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_img_style: '',
|
||||
background_img_url: [],
|
||||
background_img: [],
|
||||
search_button_radius: {
|
||||
radius: 16,
|
||||
radius_top_left: 16,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const defaultCommon: componentsCommonCommonStyle = {
|
|||
box_shadow_y: 0,
|
||||
box_shadow_blur: 0,
|
||||
box_shadow_spread: 0,
|
||||
background_img_url: [] as uploadList[],
|
||||
background_img: [] as uploadList[],
|
||||
};
|
||||
|
||||
export default defaultCommon;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ interface defaultSearch {
|
|||
container_color_list: color_list[],
|
||||
container_direction: string,
|
||||
container_background_img_style: string,
|
||||
container_background_img_url: uploadList[],
|
||||
container_background_img: uploadList[],
|
||||
container_radius: radiusStyle,
|
||||
common_style: object;
|
||||
};
|
||||
|
|
@ -88,7 +88,7 @@ const defaultSearch: defaultSearch = {
|
|||
container_color_list: [{ color: '#fff', color_percentage: undefined }],
|
||||
container_direction: '180deg',
|
||||
container_background_img_style: '2',
|
||||
container_background_img_url: [],
|
||||
container_background_img: [],
|
||||
container_radius: {
|
||||
radius: 0,
|
||||
radius_top_left: 0,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ interface defaultSearch {
|
|||
color_list: color_list[];
|
||||
direction: string;
|
||||
background_img_style: string;
|
||||
background_img_url: uploadList[];
|
||||
background_img: uploadList[];
|
||||
search_button_radius: object;
|
||||
tips_color: string;
|
||||
hot_words_color: string;
|
||||
|
|
@ -64,7 +64,7 @@ const defaultSearch: defaultSearch = {
|
|||
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
|
||||
direction: '90deg',
|
||||
background_img_style: '',
|
||||
background_img_url: [],
|
||||
background_img: [],
|
||||
search_button_radius: {
|
||||
radius: 16,
|
||||
radius_top_left: 16,
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ interface DefaultSeckill {
|
|||
header_background_color_list: color_list[];
|
||||
header_background_direction: string;
|
||||
header_background_img_style: string;
|
||||
header_background_img_url: uploadList[];
|
||||
header_background_img: uploadList[];
|
||||
shop_radius: radiusStyle;
|
||||
shop_img_radius: radiusStyle;
|
||||
shop_padding: paddingStyle;
|
||||
|
|
@ -100,7 +100,7 @@ const defaultSeckill: DefaultSeckill = {
|
|||
header_background_color_list: [{ color: '', color_percentage: undefined }],
|
||||
header_background_direction: '180deg',
|
||||
header_background_img_style: '2',
|
||||
header_background_img_url: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
|
||||
header_background_img: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
|
||||
shop_radius: {
|
||||
radius: 8,
|
||||
radius_top_left: 8,
|
||||
|
|
|
|||
Loading…
Reference in New Issue