备份

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

@@ -5,9 +5,34 @@
         <span class="custom-card-icon">|</span>
         <span class="custom-card-Text">创意</span>
       </div>
-      <div style="display: flex">
+      <div style="display: flex;">
         <div class="left-container">
           <p class="left-part-title">请选择您想要自定义商品广告的方式</p>
+          <div class="demo-collapse">
+            <el-collapse v-model="activeNames" @change="handleCollapseChange" style="border: none;">
+              <el-collapse-item title="徽标" name="logo">
+                <div>
+                  Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are
+                  used to;
+                </div>
+                <div>
+                  Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="标题" name="title">
+                <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+                <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+              </el-collapse-item>
+              <el-collapse-item title="图片" name="image">
+                <div>Simplify the process: keep operating process simple and intuitive;</div>
+                <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+                <div>
+                  Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and
+                  recalling.
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
         </div>
         <div class="right-container">
           <div class="preview-title-line">
@@ -20,7 +45,16 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 折叠面板相关
+const activeNames = ref([''])
+
+function handleCollapseChange(val: string[]) {
+  console.log(val)
+}
+</script>
 
 <style scoped>
 .customize-container {
@@ -48,9 +82,14 @@
   font-weight: 700;
   line-height: 32px;
 }
+.preview-title-line {
+  display: flex;
+  align-items: center;
+}
 .right-part-title {
   color: #4e5969;
   padding-bottom: 4px;
+  margin-right: 8px;
   height: 32px;
   font-weight: 700;
   line-height: 32px;