-
-
+
+
@@ -16,7 +16,8 @@
-
+
+
{{ match_item.title }}
@@ -33,19 +34,39 @@
-
-
-
-
+
+
+
+
{{ match_item.title }}
+
+
+
+ {{ match_item.price_symbol }}
+ {{ match_item.price }}
+
+
+
+
+ {{ match_item.price_symbol }}
+ {{ match_item.price }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ form.is_default_show_goods == '1' ? '收起' : '展开'}}组合商品
+
+
+
@@ -279,7 +308,7 @@ const match_layout_style = computed(() => {
});
// 容器图片样式
const match_layout_img_style = computed(() => {
- const padding = data_content_padding.value;
+ const padding = host_graph_theme.value == '0' ? data_content_padding.value : '';
return padding + layout_img_handle('data');
});
// 内容区域的样式
@@ -308,6 +337,9 @@ const data_img_height = computed(() => {
// 商品内容样式
const goods_content_style = computed(() => common_styles_computer(new_style.value.goods_content_style));
const goods_content_img_style = computed(() => common_img_computer(new_style.value.goods_content_style));
+// 底部展开收起按钮样式
+const bottom_button_style = computed(() => common_styles_computer(new_style.value.bottom_button_style));
+const bottom_button_img_style = computed(() => common_img_computer(new_style.value.bottom_button_style));
//#endregion
//#region 商品样式
// 选择的风格
@@ -404,7 +436,7 @@ const content_style = computed(() => {
});
const goods_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
- { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+ { name: '两列展示（纵向）', value: '1', width:156, height: 156 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
]
@@ -471,7 +503,6 @@ watchEffect(() => {
height: v-bind(data_img_height);
width: 100%;
}
-
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);
}
@@ -494,4 +525,12 @@ watchEffect(() => {
width: 100%;
height: 100%;
}
+.expand-retract {
+ font-weight: 400;
+ font-size: 12px;
+ color: #999999;
+ line-height: 17px;
+ text-align: left;
+ font-style: normal;
+}
diff --git a/src/components/model-binding/model-binding-content.vue b/src/components/model-binding/model-binding-content.vue
index 37af1d93..48379e69 100644
--- a/src/components/model-binding/model-binding-content.vue
+++ b/src/components/model-binding/model-binding-content.vue
@@ -102,7 +102,7 @@ const base_list = reactive({
],
theme_list: [
{ name: '单列展示', value: '0', width: 50, height: 50 },
- { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
+ { name: '两列展示（纵向）', value: '1', width:156, height: 156 },
{ name: '两列展示（横向）', value: '2', width:50, height: 50 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
],
@@ -171,8 +171,8 @@ const theme_change = (val: any) => {
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
// emits('theme_change', list[0].width, list[0].height);
- data.value.content_img_width = list[0].width;
- data.value.content_img_height = list[0].height;
+ data.value.goods_content_img_width = list[0].width;
+ data.value.goods_content_img_height = list[0].height;
}
};
// 移除
diff --git a/src/components/model-binding/model-binding-styles.vue b/src/components/model-binding/model-binding-styles.vue
index dc19ab8f..68a2b3d7 100644
--- a/src/components/model-binding/model-binding-styles.vue
+++ b/src/components/model-binding/model-binding-styles.vue
@@ -33,7 +33,14 @@
-
+
+
+
+
+
+
+
+
@@ -65,6 +72,26 @@
+
+ 底部按钮样式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -128,6 +155,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.data_color_list = arry;
form.value.data_direction = type.toString();
};
+// 底部按钮的显示逻辑
+const bottom_button_mult_color_picker_event = (arry: color_list[], type: number) => {
+ form.value.bottom_button_style.color_list = arry;
+ form.value.bottom_button_style.direction = type.toString();
+};
const common_style_update = (value: any) => {
form.value.common_style = value;
};
diff --git a/src/config/const/binding.ts b/src/config/const/binding.ts
index 0085a957..8f173696 100644
--- a/src/config/const/binding.ts
+++ b/src/config/const/binding.ts
@@ -81,6 +81,7 @@ interface defaultRealstore {
data_content_img_width: number;
data_content_img_height: number;
data_content_spacing: number;
+ data_content_bottom_spacing: number;
data_content_outer_spacing: number;
data_color_list: color_list[];
data_direction: string;
@@ -148,6 +149,7 @@ interface defaultRealstore {
interval_time: number;
rolling_fashion: string;
goods_content_style: object,
+ bottom_button_style: object,
common_style: object;
};
}
@@ -185,6 +187,7 @@ const defaultRealstore: defaultRealstore = {
data_content_img_width: 128,
data_content_img_height: 128,
data_content_spacing: 10,
+ data_content_bottom_spacing: 10,
data_content_outer_spacing: 10,
data_color_list: [{ color: '#fff', color_percentage: undefined }],
data_direction: '90deg',
@@ -413,13 +416,51 @@ const defaultRealstore: defaultRealstore = {
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
- outer_margin: {
- margin: 0,
- margin_top: 10,
- margin_bottom: 10,
- margin_left: 0,
- margin_right: 0,
- }
+ // outer_margin: {
+ // margin: 0,
+ // margin_top: 10,
+ // margin_bottom: 10,
+ // margin_left: 0,
+ // margin_right: 0,
+ // }
+ },
+ bottom_button_style: {
+ color_list: [{ color: '#fff', color_percentage: undefined }],
+ direction: '180deg',
+ background_img_style: '2',
+ background_img: [],
+ radius: 0,
+ radius_top_left: 0,
+ radius_top_right: 0,
+ radius_bottom_left: 0,
+ radius_bottom_right: 0,
+ padding: 0,
+ padding_top: 0,
+ padding_bottom: 0,
+ padding_left: 0,
+ padding_right: 0,
+ margin: 0,
+ margin_top: 10,
+ margin_bottom: 0,
+ margin_left: 0,
+ margin_right: 0,
+ // 边框样式
+ border_is_show: '0',
+ border_color: '#FF3F3F',
+ border_style: 'solid',
+ border_size: {
+ padding: 1,
+ padding_top: 1,
+ padding_right: 1,
+ padding_bottom: 1,
+ padding_left: 1,
+ },
+ // 阴影
+ box_shadow_color: '',
+ box_shadow_x: 0,
+ box_shadow_y: 0,
+ box_shadow_blur: 0,
+ box_shadow_spread: 0,
},
// 公共样式
common_style: {