页面样式处理

v1.1.0
于肖磊 2024-11-08 11:46:41 +08:00
parent e3c579ece0
commit 42b458cb33
8 changed files with 28 additions and 20 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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,

View File

@ -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);

View File

@ -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>

View File

@ -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>

View File

@ -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="定位颜色">