🐞 fix: 移除图片

src/views/adManage/sb/campaigns/CreateCampaigns/component/AdFormat.vue

@@ -9,8 +9,8 @@
         <el-radio-group v-model="adFormatRadio" style="display: flex; justify-content: space-between">
           <el-radio class="ad-format-radio" label="productSet" border>
             <div style="text-align: center; color: #333333">商品集</div>
-            <img src="src/views/adManage/sb/campaigns/CreateCampaigns/img/img_1.jpg" class="img-style">
-            <!-- <div style="background-color: #1e2128; width: 200px; height: 200px; margin: 0 auto"></div> -->
+            <!-- <img src="src/views/adManage/sb/campaigns/CreateCampaigns/img/img_1.jpg" class="img-style"> -->
+            <div style="background-color: #1e2128; width: 200px; height: 200px; margin: 0 auto"></div>
             <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">使用图片将流量引导至商品详情页面, 以推广多件商品</div>
           </el-radio>
           <el-radio class="ad-format-radio" label="focus" border>

src/views/adManage/sd/campaigns/CreateCampaigns/component/Creativity.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="customize-container">
+    <el-card body-style="padding: 20px 80px 0 80px;">
+      <div class="custom-card-title">
+        <span class="custom-card-icon">|</span>
+        <span class="custom-card-Text">创意</span>
+      </div>
+      <div style="display: flex">
+        <div class="left-container">
+          <p class="left-part-title">请选择您想要自定义商品广告的方式</p>
+        </div>
+        <div class="right-container">
+          <div class="preview-title-line">
+            <p class="right-part-title">广告预览</p>
+            <el-select></el-select>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.customize-container {
+  margin-top: 10px;
+}
+.custom-card-title {
+  font-weight: 700;
+  padding-bottom: 18px;
+}
+.custom-card-Text {
+  font-size: 18px;
+  padding-left: 5px;
+}
+.custom-card-icon {
+  color: #306cd7;
+  font-size: 26px;
+}
+.left-container {
+  width: 50%;
+}
+.left-part-title {
+  color: #4e5969;
+  padding-bottom: 4px;
+  height: 32px;
+  font-weight: 700;
+  line-height: 32px;
+}
+.right-part-title {
+  color: #4e5969;
+  padding-bottom: 4px;
+  height: 32px;
+  font-weight: 700;
+  line-height: 32px;
+}
+</style>

src/views/adManage/sd/campaigns/CreateCampaigns/index.vue

@@ -3,15 +3,18 @@
     <AdCampaign @send-campaign="getCampaign" @send-targetType="getTargetType"></AdCampaign>
     <AdGroup @send-groupId="getGroupId"></AdGroup>
     <component :is="currentComponent"></component>
+    <Creativity v-if="product"></Creativity>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, onUnmounted } from 'vue'
 import AdCampaign from './component/AdCampaign.vue'
 import AdGroup from './component/AdGroup.vue'
 import ContentTarget from './component/ContentTarget.vue'
 import CustomTarget from './component/CustomTarget.vue'
+import Creativity from './component/Creativity.vue'
+import emitter from '/@/utils/emitter'
 
 const respCampaignId = ref('')
 const respCampaignName = ref('')
@@ -47,6 +50,16 @@ function getGroupId(data) {
   respAdGroupId.value = data.adGroupId
 }
 
+// 若有商品被添加显示创意
+const product = ref('')
+emitter.on('send-firstAsin', (value: any) => {
+  product.value = value
+})
+
+onUnmounted(() => {
+  emitter.all.clear()
+})
+
 </script>
 
 <style scoped>