页面样式处理
parent
e3c579ece0
commit
42b458cb33
|
|
@ -27,7 +27,7 @@
|
|||
<div v-for="(item, index) in split_list" :key="index" :style="block_size">
|
||||
<div class="w h oh" :style="style_container(props.goodStyle)">
|
||||
<div class="w h flex-col gap-10" :style="style_img_container(props.goodStyle)">
|
||||
<div class="w h re flex-1">
|
||||
<div class="w h re flex-1 oh">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="w h" :style="style_container">
|
||||
<div class="re w h oh">
|
||||
<template v-if="video && !video_img">
|
||||
<video :src="video" class="w h"></video>
|
||||
<video :src="video" class="w h" ></video>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty v-model="video_img" error-img-style="width:60px;height:60px;"></image-empty>
|
||||
|
|
@ -49,4 +49,7 @@ const video = computed(() => {
|
|||
const style_container = computed(() => padding_computer(props.dataStyle.chunk_padding));
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
video {
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@ watch(props.value.content, (val) => {
|
|||
data_style.get_img_radius = radius_computer(radius);
|
||||
|
||||
// 商品名称和价格样式
|
||||
data_style.goods_title_style = goods_trends_config(item.data_style, 'title');
|
||||
data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;height: ${ (item.data_style.goods_title_size + 3) * 2 }px;`;
|
||||
data_style.goods_price_style = goods_trends_config(item.data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
|
||||
|
||||
const { is_roll, rotation_direction, interval_time } = data_style;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="w h">
|
||||
<el-form :model="form" label-width="85">
|
||||
<el-form :model="form" label-width="80">
|
||||
<card-container>
|
||||
<div class="mb-12">展示风格</div>
|
||||
<el-form-item label="选择风格" label-width="60">
|
||||
|
|
@ -295,11 +295,11 @@ const magic_list = (index: number) => {
|
|||
title_data_gap: item.title_text_gap,
|
||||
goods_price_size: different_styles(index, map_index) ? 12 : 18,
|
||||
chunk_padding: {
|
||||
padding: module_7_handle(index, map_index) ? 0 : 0,
|
||||
padding_top: module_7_handle(index, map_index) ? 0 : 20,
|
||||
padding_bottom: module_7_handle(index, map_index) ? 0 : 20,
|
||||
padding_left: module_7_handle(index, map_index) ? 0 : 15,
|
||||
padding_right: module_7_handle(index, map_index) ? 0 : 15,
|
||||
padding: (module_7_handle(index, map_index) || different_styles(index, map_index)) ? 10 : 0,
|
||||
padding_top: (module_7_handle(index, map_index) || different_styles(index, map_index)) ? 10 : 20,
|
||||
padding_bottom: (module_7_handle(index, map_index) || different_styles(index, map_index)) ? 10 : 20,
|
||||
padding_left: (module_7_handle(index, map_index) || different_styles(index, map_index)) ? 10 : 15,
|
||||
padding_right: (module_7_handle(index, map_index) || different_styles(index, map_index)) ? 10 : 15,
|
||||
},
|
||||
goods_chunk_padding: {
|
||||
padding: module_7_handle(index, map_index) ? 10 : 0,
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</div>
|
||||
<div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<template v-if="is_show('original_price_unit')">
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</div>
|
||||
<div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<template v-if="is_show('original_price_unit')">
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
|
||||
</div>
|
||||
<div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
|
||||
<img class="original-price-left" :src="form.static_img[0].url" />
|
||||
<!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
|
||||
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
|
||||
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
|
||||
<template v-if="is_show('original_price_unit')">
|
||||
|
|
@ -571,15 +571,18 @@ watchEffect(() => {
|
|||
.identifying {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.original-price-left {
|
||||
width: 1rem;
|
||||
}
|
||||
// .original-price-left {
|
||||
// width: 1rem;
|
||||
// }
|
||||
.original-price {
|
||||
background-color: #ede2c5;
|
||||
// background-color: #ede2c5;
|
||||
border-radius: 0;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
font-size: 1.2rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
padding: 0 1rem 0 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.two-columns {
|
||||
width: calc((100% - v-bind(two_columns)) / 2);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
|
||||
<div v-if="['1', '2', '3'].includes(form.theme) && !isEmpty(form.title)">{{ 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>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,12 @@
|
|||
<el-form-item v-if="['3'].includes(form.theme)" label="链接地址">
|
||||
<url-value v-model="form.link"></url-value>
|
||||
</el-form-item>
|
||||
<template v-if="['1', '2'].includes(form.theme)">
|
||||
<template v-if="['1', '2', '3'].includes(form.theme)">
|
||||
<el-form-item label="页面标题">
|
||||
<el-input v-model="form.title" placeholder="请输入标题名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="['1', '2'].includes(form.theme)">
|
||||
<el-form-item label="链接地址">
|
||||
<url-value v-model="form.link"></url-value>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<el-radio value="1">白色</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['1', '2'].includes(page_content.theme)" label="标题名称">
|
||||
<el-form-item v-if="['1', '2', '3'].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(page_content.theme)" label="定位颜色">
|
||||
|
|
|
|||
Loading…
Reference in New Issue