修改等比逻辑显示
parent
cc6facb11d
commit
532756f60d
|
|
@ -12,8 +12,8 @@
|
|||
<view class="w h flex-col" :style="'gap:'+ item.data_style.title_data_gap * 2 + 'rpx;'">
|
||||
<view v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap * 2 + 'rpx;'">
|
||||
<template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
|
||||
<view v-if="item.data_content.heading_title_img.length > 0" class="re oh" :style="'width:100%;height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height : 0) * 2 + 'rpx'">
|
||||
<image :src="item.data_content.heading_title_img[0].url" class="wh-auto ht-auto" mode="aspectFit" />
|
||||
<view v-if="item.data_content.heading_title_img.length > 0" class="re oh" :style="'width:100%;height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height * magic_scale : 0) + 'px'">
|
||||
<image :src="item.data_content.heading_title_img[0].url" class="ht-auto max-w" mode="heightFix" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
<view class="w h flex-col" :style="'gap:'+ item.data_style.title_data_gap * 2 + 'rpx;'">
|
||||
<view v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap * 2 + 'rpx;'">
|
||||
<template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
|
||||
<view v-if="item.data_content.heading_title_img.length > 0" class="re oh" :style="'width:100%;height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height : 0) * 2 + 'rpx'">
|
||||
<image :src="item.data_content.heading_title_img[0].url" class="wh-auto ht-auto" mode="aspectFit" />
|
||||
<view v-if="item.data_content.heading_title_img.length > 0" class="re oh" :style="'width:100%;height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height * magic_scale : 0) + 'px'">
|
||||
<image :src="item.data_content.heading_title_img[0].url" class="ht-auto max-w" mode="heightFix" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
magic_scale: width / 390,
|
||||
div_width: sys_width,
|
||||
cubeCellWidth: sys_width / density,
|
||||
container_size: container_height * 2 + 'rpx',
|
||||
container_size: container_height * (width / 390) + 'px',
|
||||
});
|
||||
},
|
||||
get_data_magic_list(data, new_style) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
|
||||
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyDataMagic>
|
||||
<componentDiyCustom v-else-if="item.key == 'custom'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCustom>
|
||||
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyImgMagic>
|
||||
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyImgMagic>
|
||||
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiyHotZone>
|
||||
<componentDiySeckill v-else-if="item.key == 'seckill'" :propOuterContainerPadding="outer_container_padding" :propIndex="(is_immersive_style_and_general_safe_distance_value && tabs_data.length < 0) ? item.index : -1" :propKey="item.id + index" :propValue="item.com_data"></componentDiySeckill>
|
||||
<!-- 插件 -->
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * 2 + 'rpx' }">
|
||||
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
|
||||
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
|
||||
<view class="flex-row wh-auto ht-auto" :style="onter_style">
|
||||
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-index="index1" :data-split-index="index" :data-value="item.goods_url" @tap.stop="url_event">
|
||||
|
|
@ -256,6 +256,7 @@
|
|||
button_gradient: '',
|
||||
// 图片大小
|
||||
img_size: '',
|
||||
new_scale: 1,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -335,6 +336,7 @@
|
|||
new_style: new_style,
|
||||
outer_class: flex + wrap + background + 'oh',
|
||||
list: new_list,
|
||||
new_scale: scale,
|
||||
content_radius: radius_computer(new_style.shop_radius), // 圆角设置
|
||||
content_img_radius: radius_computer(new_style.shop_img_radius), // 图片圆角设置
|
||||
content_padding: padding_computer(new_style.shop_padding) + 'box-sizing: border-box;', // 内边距设置
|
||||
|
|
@ -428,7 +430,7 @@
|
|||
} else if (form.theme == '5') {
|
||||
// 如果不是平移的时候执行
|
||||
if (new_style.rolling_fashion != 'translation') {
|
||||
size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(new_style, form)};height: ${new_style.content_outer_height * 2 + 'rpx'};`;
|
||||
size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(new_style, form)};height: ${new_style.content_outer_height * (sys_width / 390) + 'px'};`;
|
||||
} else {
|
||||
size_style = `margin-right: ${ (new_style.content_outer_spacing * 2) + (shop_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</template>
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, common_img_computer, radius_computer, percentage_count, isEmpty, margin_computer, padding_computer, old_padding, old_margin } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, common_img_computer, radius_computer, percentage_count, isEmpty, margin_computer, padding_computer, old_padding, old_margin, border_width } from '@/common/js/common/common.js';
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
var sys_width = app.globalData.window_width_handle(system.windowWidth);
|
||||
export default {
|
||||
|
|
@ -80,6 +80,10 @@
|
|||
type: Number,
|
||||
default: 1000000,
|
||||
},
|
||||
propOuterContainerPadding: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -138,6 +142,9 @@
|
|||
}
|
||||
const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width;
|
||||
const density = !isEmpty(new_content.magic_cube_density) ? new_content.magic_cube_density : 4;
|
||||
|
||||
const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
|
||||
const width = sys_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
|
||||
this.setData({
|
||||
form: this.propValue.content,
|
||||
new_style: this.propValue.style,
|
||||
|
|
@ -148,7 +155,7 @@
|
|||
style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'box-sizing: border-box;',
|
||||
img_fit: fit,
|
||||
div_width: sys_width,
|
||||
container_size: container_height * 2 + 'rpx',
|
||||
container_size: container_height * (width / 390) + 'px',
|
||||
cube_cell: sys_width / density,
|
||||
content_img_container: common_styles_computer(new_style) + margin_computer(new_style?.margin || old_margin) + 'box-sizing: border-box;',
|
||||
content_img_style_container: common_img_computer(new_style) + padding_computer(new_style?.padding || old_padding) + 'box-sizing: border-box;',
|
||||
|
|
|
|||
Loading…
Reference in New Issue