From ed9249f1892698ca19c65fa7a4c363a8944233ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 15 Aug 2024 16:48:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/product-list-show.vue          | 88 ++++++++++++++++---
 src/components/model-data-magic/index.vue     | 37 +++-----
 .../model-data-magic-content.vue              |  4 +-
 3 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index 9fca0926..43b30eb2 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -1,22 +1,49 @@
 <template>
-    <template v-if="props.flex === 'row'">
-        <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c">
-            <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-            <div class="flex-col gap-10">
-                <div>标题</div>
-                <div>价格</div>
-            </div>
+    <template v-if="props.outerflex == 'row'">
+        <div class="flex-row gap-10 align-c w h">
+            <template v-if="props.flex === 'row'">
+                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
+                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                    <div class="flex-col w h tl gap-10">
+                        <div class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                        <div class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="actived != 7 || props.num !== 1">
+                <div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1}]">
+                    <div class="w h re">
+                        <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                        <div class="price-suspension">¥{{ '51' }}</div>
+                    </div>
+                    <div class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                </div>
+            </template>
+            <template v-else>
+                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col h">
+                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                    <div class="flex-col w tl gap-10 pa-10">
+                        <div class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                        <div class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
+                    </div>
+                </div>
+            </template>
         </div>
     </template>
     <template v-else>
-        <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col gap-10 align-c">
-            <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-            <div class="flex-col gap-10">
-                <div>标题</div>
-                <div>价格</div>
-            </div>
+        <div class="flex-col gap-20 align-c w h">
+            <template v-if="props.flex === 'row'">
+                <div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c">
+                    <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
+                    <div class="flex-col jc-sb w h tl gap-10">
+                        <div class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
+                        <div class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
+                    </div>
+                </div>
+            </template>
         </div>
     </template>
+    
 </template>
 
 <script setup lang="ts">
@@ -25,6 +52,8 @@ interface Props {
     outerflex: string;
     flex: string;
     contentImgRadius: string;
+    num: number;
+    actived: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,5 +69,36 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-
+:deep(.el-image) {
+    height: 100%;
+    width: 100%;
+    .el-image__inner {
+        object-fit: cover;
+    }
+    .image-slot img {
+        width: 4rem !important;
+    }
+}
+.identifying {
+    font-size: 2rem;
+    color: #EA3323;
+    .num {
+        font-size: 0.9rem;
+    }
+}
+.price-suspension {
+    width: calc(100% - 0.8rem);
+    margin: 0 0.4rem;
+    background: #fff;
+    font-size: 1.2rem;
+    line-height: 1.7rem;
+    color: #EA3323;
+    text-align: center;
+    position: absolute;
+    bottom: 0.4rem;
+    border-radius: 0.8rem;
+}
+.half-width {
+    width: 50%;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 89dce2a0..dc3569e5 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -6,22 +6,22 @@
                 <div class="flex-row align-c jc-c style-size flex-wrap">
                     <div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
                         <template v-if="item.data_content.data_type == 'commodity'">
-                            <div class="ptb-20 plr-15 w h">
-                                <div class="flex-col gap-5 tl">
+                            <div :class="['w h flex-col gap-20', {'ptb-20 plr-15': [0, 1].includes(index) }]">
+                                <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
                                     <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                     <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                 </div>
-                                <div class="mt-20 w h">
-                                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                                <div class="w h">
+                                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
                                         <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                            <a>item1</a>
+                                            <product-list-show :outerflex="item.outerflex" :flex="item.flex" :num="item.num" :actived="form.style_actived" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
                                         </el-carousel-item>
                                     </el-carousel>
                                 </div>
                             </div>
                         </template>
                         <template v-else>
-                            <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                            <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
                                 <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
                                     <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
                                 </el-carousel-item>
@@ -44,30 +44,21 @@
                 <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style }`">
                     <template v-if="item.data_content.data_type == 'commodity'">
                         <div class="ptb-20 plr-15 w h flex-col gap-20">
-                            <div class="flex-col gap-5 tl">
+                            <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
                                 <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                 <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                             </div>
                             <div class="w h">
-                                <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                                <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
                                     <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                        <template v-if="item.outerflex == 'row'">
-                                            <div class="flex-row gap-10 align-c">
-                                                <product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <div class="flex-col gap-20 align-c">
-                                                <product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
-                                            </div>
-                                        </template>
+                                        <product-list-show :outerflex="item.outerflex" :flex="item.flex" :num="item.num" :actived="form.style_actived" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
                                     </el-carousel-item>
                                 </el-carousel>
                             </div>
                         </div>
                     </template>
                     <template v-else>
-                        <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                        <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
                             <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
                                 <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
                             </el-carousel-item>
@@ -319,13 +310,13 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
         position: relative;
     }
     .style9-top {
-        width: calc(50% - 0.2rem);
-        height: 50%;
+        width: calc(50% - v-bind(outer_spacing));
+        height: calc(50% - v-bind(outer_spacing));
         position: relative;
     }
     .style9-bottom {
-        width: calc(33% - 0.1rem);
-        height: 50%;
+        width: calc(33% - v-bind(outer_spacing));
+        height: calc(50% - v-bind(outer_spacing));
         position: relative;
     }
 }
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 32b5bf01..d53b4485 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -85,8 +85,8 @@ const data_style = {
 // 每个小模块独立的内容
 const data_content = {
     data_type: 'commodity',
-    heading_title: '',
-    subtitle: '',
+    heading_title: '主标题',
+    subtitle: '副标题',
     product_list:[],
     img_list:[
         {