RING:创意组件完成

src/plugins/install.ts

@@ -38,7 +38,8 @@ import {
   Breadcrumb,
   Divider,
   Empty,
-  Slider
+  Slider,
+  Pagination
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -90,7 +91,8 @@ const install = (app: App<Element>) => {
     .use(Breadcrumb)
     .use(Divider)
     .use(Empty)
-    .use(Slider);
+    .use(Slider)
+    .use(Pagination);
 };
 
 export default install;

src/views/put/component/creativity-content.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="creativity-content">
-    <div class="program-type common-type">
-      <p style="color: gray">
+    <div
+      :class="{
+        'program-type': contentType === 'PROGRAM',
+        'common-type': true,
+      }"
+    >
+      <p style="color: gray" v-show="contentType === 'PROGRAM'">
         图片创意个数：{{
-          count.imageType1 + count.imageType2 + count.imageType2
+          count.imageType1 + count.imageType2 + count.imageType3
         }}/12 视频创意个数： {{ count.videoType1 + count.videoType2 }}/10
       </p>
+      <p style="color: gray" v-show="contentType === 'CUSTOM'">
+        创意个数：{{ creatives.length }}/10
+      </p>
       <div class="type-box">
         <div
           :class="{
@@ -23,7 +31,7 @@
           </p>
         </div>
       </div>
-      <div class="material-box">
+      <div class="material-box" v-if="contentType === 'PROGRAM'">
         <div
           class="material-container"
           v-for="(item, index) in image_list"
@@ -64,8 +72,12 @@
                 item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
               "
             >
+              <video :src="item.video_url"></video>
+              <i class="iconfont icon-ziyuan" v-show="item.video_url"></i>
               <div class="cover" v-show="item.video_cover">
-                <a-button size="small">视频库</a-button>
+                <a-button size="small" @click="selectMaterial(item, 'video')"
+                  >视频库</a-button
+                >
               </div>
             </div>
             <div
@@ -73,6 +85,7 @@
               @mouseenter="item.image_cover = true"
               @mouseleave="item.image_cover = false"
             >
+              <img :src="item.image_url" alt="" />
               <div class="cover" v-show="item.image_cover">
                 <p
                   style="text-align: center"
@@ -81,102 +94,225 @@
                     item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
                   "
                 >
-                  <a-button size="small">生成封面</a-button>
-                  <a-button size="small">图片库</a-button>
+                  <a-button
+                    size="small"
+                    :disabled="!item.video_url"
+                    @click="madeCover(item)"
+                    >生成封面</a-button
+                  >
+                  <a-button size="small" @click="selectMaterial(item, 'image')"
+                    >图片库</a-button
+                  >
                 </p>
-                <a-button size="small" v-else>图片库</a-button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- <div class="material-container">
-          <div class="type-item video-type video-type1">
-            <i class="iconfont icon-guanbi1"></i>
-            <div class="video-box">
-              <div class="cover">
-                <a-button size="small">视频库</a-button>
-              </div>
-            </div>
-            <div class="image-box">
-              <div class="cover">
-                <p style="text-align: center">
-                  <a-button size="small">生成封面</a-button>
-                  <a-button size="small">图片库</a-button>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="material-container">
-          <div class="type-item video-type video-type2">
-            <i class="iconfont icon-guanbi1"></i>
-            <div class="video-box">
-              <div class="cover">
-                <a-button size="small">视频库</a-button>
-              </div>
-            </div>
-            <div class="image-box">
-              <div class="cover">
-                <p style="text-align: center">
-                  <a-button size="small">生成封面</a-button>
-                  <a-button size="small">图片库</a-button>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="material-container">
-          <div class="type-item image-type image-type1">
-            <i class="iconfont icon-guanbi1"></i>
-            <div class="image-box">
-              <div class="cover">
-                <a-button size="small">图片库</a-button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="material-container">
-          <div class="type-item image-type image-type2">
-            <i class="iconfont icon-guanbi1"></i>
-            <div class="image-box">
-              <div class="cover">
-                <a-button size="small">图片库</a-button>
+                <a-button
+                  size="small"
+                  v-else
+                  @click="selectMaterial(item, 'image')"
+                  >图片库</a-button
+                >
               </div>
             </div>
           </div>
         </div>
-        <div class="material-container">
-          <div class="type-item image-type image-type3">
-            <i class="iconfont icon-guanbi1"></i>
-            <div class="image-box">
-              <div class="cover">
-                <a-button size="small">图片库</a-button>
-              </div>
-            </div>
-          </div>
-        </div> -->
         <div class="add-btn" @click="addMaterial">
           <i class="iconfont icon-jia1"></i>
           <span>添加</span>
         </div>
       </div>
+      <div class="custom-box" v-else>
+        <div class="no-pane" v-if="creatives.length === 0">
+          <p>
+            <i class="iconfont icon-tupian"></i> <br />
+            <span>点击按钮添加创意</span> <br />
+            <a-button class="add-btn" type="primary" @click="addMaterial"
+              >新增创意</a-button
+            >
+          </p>
+        </div>
+        <div class="panes" v-if="creatives.length > 0">
+          <a-button
+            class="add-btn"
+            type="primary"
+            @click="addMaterial"
+            :disabled="creatives.length === 10"
+            >新增创意</a-button
+          >
+          <a-tabs
+            v-model:activeKey="activeKey"
+            type="editable-card"
+            @edit="onEdit"
+            hide-add
+          >
+            <a-tab-pane
+              v-for="pane in creatives"
+              :key="pane.key"
+              :tab="`${pane.title.substring(0, 3)}${
+                pane.title.length > 3 ? '...' : ''
+              }`"
+              :closable="pane.closable"
+            >
+              <div class="pane-content">
+                <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
+                  <a-form-item label="创意内容">
+                    <!-- 。。。。。。 -->
+                    <div class="material-container">
+                      <div
+                        :class="{
+                          'type-item': true,
+                          'video-type':
+                            pane.image_mode ===
+                              'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO',
+                          'video-type1':
+                            pane.image_mode ===
+                            'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL',
+                          'video-type2':
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO',
+                          'image-type':
+                            pane.image_mode ===
+                              'CREATIVE_IMAGE_MODE_LARGE_VERTICAL' ||
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_LARGE' ||
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_SMALL',
+                          'image-type1':
+                            pane.image_mode ===
+                            'CREATIVE_IMAGE_MODE_LARGE_VERTICAL',
+                          'image-type2':
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_LARGE',
+                          'image-type3':
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_SMALL',
+                        }"
+                      >
+                        <div
+                          @mouseenter="pane.video_cover = true"
+                          @mouseleave="pane.video_cover = false"
+                          class="video-box"
+                          v-if="
+                            pane.image_mode ===
+                              'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+                            pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
+                          "
+                        >
+                          <video :src="pane.video_url"></video>
+                          <i
+                            class="iconfont icon-ziyuan"
+                            v-show="pane.video_url"
+                          ></i>
+                          <div class="cover" v-show="pane.video_cover">
+                            <a-button
+                              size="small"
+                              @click="selectMaterial(pane, 'video')"
+                              >视频库</a-button
+                            >
+                          </div>
+                        </div>
+                        <div
+                          class="image-box"
+                          @mouseenter="pane.image_cover = true"
+                          @mouseleave="pane.image_cover = false"
+                        >
+                          <img :src="pane.image_url" alt="" />
+                          <div class="cover" v-show="pane.image_cover">
+                            <p
+                              style="text-align: center"
+                              v-if="
+                                pane.image_mode ===
+                                  'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+                                pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
+                              "
+                            >
+                              <a-button
+                                size="small"
+                                :disabled="!pane.video_url"
+                                @click="madeCover(pane)"
+                                >生成封面</a-button
+                              >
+                              <a-button
+                                size="small"
+                                @click="selectMaterial(pane, 'image')"
+                                >图片库</a-button
+                              >
+                            </p>
+                            <a-button
+                              size="small"
+                              v-else
+                              @click="selectMaterial(pane, 'image')"
+                              >图片库</a-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- 。。。。。。。。。 -->
+                  </a-form-item>
+                  <a-form-item label="创意标题"
+                    ><a-input
+                      style="width: 300px"
+                      placeholder="请输入"
+                      v-model:value="pane.title"
+                      :maxlength="30"
+                    ></a-input
+                  ></a-form-item>
+                </a-form>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
     </div>
+
+    <!-- 选择素材库素材 -->
+    <a-modal
+      v-model:visible="visible"
+      :title="materialType === 'video' ? '选择视频' : '选择图片'"
+      @ok="handleOk"
+      width="720px"
+    >
+      <material-select
+        ref="materialCom"
+        :materialType="materialType"
+        v-if="visible"
+      ></material-select>
+    </a-modal>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref } from "vue";
+import { defineComponent, reactive, toRefs, ref, watch } from "vue";
 import {} from "@/api";
 import { message } from "ant-design-vue";
-
+import materialSelect from "./material-select.vue";
 const creativityContent = defineComponent({
-  setup() {
+  props: ["type"],
+  components: { materialSelect },
+  setup(props) {
+    const materialCom: any = ref(null);
     const state = reactive({
+      visible: false, // 选择素材
       contentType: "PROGRAM", // 创意方式 PROGRAM-程序化创意 CUSTOM-自定义创意
       creatives: ref<any[]>([]), // 自定义创意渲染数组
       image_list: ref<any[]>([]), // 程序化创意渲染数组
       currentType: "videoType1", // 当前素材类型 默认竖版视频
+      currentCreativity: {
+        image_mode: "CREATIVE_IMAGE_MODE_SMALL",
+        image_id: 0,
+        video_id: 0,
+        image_url: "",
+        video_url: "",
+        image_cover: false,
+        video_cover: false,
+        delete_cover: false,
+      }, // 当前操作自定义模块
+      currentImage: {
+        image_mode: "",
+        image_id: 0,
+        video_id: 0,
+        image_url: "",
+        video_url: "",
+        image_cover: false,
+        video_cover: false,
+        delete_cover: false,
+      }, // 当前操作程序化模块
+      materialType: "video", // 选取素材类型
       typeList: [
         {
           label: "竖版视频",
@@ -211,36 +347,65 @@ const creativityContent = defineComponent({
         imageType2: 0, // 大图横图
         imageType3: 0, // 小图
       }, // 素材类型计数
+      panes: [
+        // { title: "Tab 1", content: "Content of Tab 1", key: "1" },
+        // { title: "Tab 2", content: "Content of Tab 2", key: "2" },
+        // {
+        //   title: "Tab 3",
+        //   content: "Content of Tab 3",
+        //   key: "3",
+        //   closable: false,
+        // },
+      ],
+      activeKey: 1,
+    });
+    watch(props.type, (newVal, oldVal) => {
+      state.contentType =
+        newVal.creative_material_mode === "CUSTOM" ? "CUSTOM" : "PROGRAM";
+      state.creatives = [];
+      state.image_list = [];
+      state.count = {
+        videoType1: 0, // 竖版视频
+        videoType2: 0, // 横板视频
+        imageType1: 0, // 大图竖图
+        imageType2: 0, // 大图横图
+        imageType3: 0, // 小图
+      };
     });
-    return { ...toRefs(state) };
+    return { ...toRefs(state), materialCom };
+  },
+  mounted() {
+    this.typeChange(this.$props.type);
   },
-  mounted() {},
   methods: {
-    // 程序化-添加创意
+    typeChange(val: any) {
+      this.contentType = val === "CUSTOM" ? "CUSTOM" : "PROGRAM";
+    },
+    // 程序化-添加创意 -自定义
     addMaterial() {
       console.log("添加创意");
+      let mode = "";
+      this.typeList.forEach((item) => {
+        if (item.value === this.currentType) mode = item.mode;
+      });
+      switch (mode) {
+        case "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL":
+          this.count.videoType1++;
+          break;
+        case "CREATIVE_IMAGE_MODE_VIDEO":
+          this.count.videoType2++;
+          break;
+        case "CREATIVE_IMAGE_MODE_LARGE_VERTICAL":
+          this.count.imageType1++;
+          break;
+        case "CREATIVE_IMAGE_MODE_LARGE":
+          this.count.imageType2++;
+          break;
+        case "CREATIVE_IMAGE_MODE_SMALL":
+          this.count.imageType3++;
+          break;
+      }
       if (this.contentType === "PROGRAM") {
-        let mode = "";
-        this.typeList.forEach((item) => {
-          if (item.value === this.currentType) mode = item.mode;
-        });
-        switch (mode) {
-          case "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL":
-            this.count.videoType1++;
-            break;
-          case "CREATIVE_IMAGE_MODE_VIDEO":
-            this.count.videoType2++;
-            break;
-          case "CREATIVE_IMAGE_MODE_LARGE_VERTICAL":
-            this.count.imageType1++;
-            break;
-          case "CREATIVE_IMAGE_MODE_LARGE":
-            this.count.imageType2++;
-            break;
-          case "CREATIVE_IMAGE_MODE_SMALL":
-            this.count.imageType3++;
-            break;
-        }
         console.log(this.count.videoType1);
         this.image_list.push({
           image_mode: mode,
@@ -252,12 +417,45 @@ const creativityContent = defineComponent({
           video_cover: false,
           delete_cover: false,
         });
+      } else {
+        console.log("添加自定义");
+        let key =
+          this.creatives.length === 0
+            ? 1
+            : this.creatives[this.creatives.length - 1].key + 1;
+        this.creatives.push({
+          image_mode: mode, // 素材类型
+          title: "创意" + key, // 创意标题
+          image_id: 0, // 图片id（视频封面id）
+          video_id: 0, // 视频id
+          image_url: "",
+          video_url: "",
+          image_cover: false,
+          video_cover: false,
+          key,
+        });
+        this.currentCreativity = this.creatives[this.creatives.length - 1];
+        this.activeKey = key;
+      }
+    },
+    // 程序化-选取视频/封面
+    selectMaterial(item: any, type: any) {
+      if (this.contentType === "PROGRAM") {
+        this.currentImage = item;
+      } else {
+        this.currentCreativity = item;
       }
+      this.materialType = type;
+      this.visible = true;
     },
     // 程序化-删除创意
     deleteImageListItem(item: any, index: any) {
       this.image_list.splice(index, 1);
-      switch (item.image_mode) {
+      this.countCut(item.image_mode);
+    },
+    // count-cut
+    countCut(mode: any) {
+      switch (mode) {
         case "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL":
           this.count.videoType1--;
           break;
@@ -275,6 +473,67 @@ const creativityContent = defineComponent({
           break;
       }
     },
+    // 生成封面
+    madeCover(val: any) {
+      if (this.contentType === "PROGRAM") {
+        this.currentImage.image_url =
+          this.currentImage.video_url +
+          "?x-oss-process=video/snapshot,t_0,f_jpg,m_fast";
+      } else {
+        this.currentCreativity.image_url =
+          this.currentCreativity.video_url +
+          "?x-oss-process=video/snapshot,t_0,f_jpg,m_fast";
+      }
+      message.success("生成封面成功");
+    },
+    // 自定义-标签操作
+    onEdit(targetKey: string | MouseEvent, action: string) {
+      if (action === "add") {
+        this.addMaterial();
+      } else {
+        this.deleteCreativesItem(targetKey);
+      }
+    },
+    // 自定义-删除创意
+    deleteCreativesItem(val: any) {
+      console.log("del", val);
+      this.creatives.forEach((item, index) => {
+        if (item.key === val) {
+          this.creatives.splice(index, 1);
+          this.countCut(item.image_mode);
+        }
+      });
+    },
+    // 确定素材选择
+    handleOk() {
+      // 程序化选取素材
+      let data = this.materialCom.backMaterial();
+      if (data.flag) {
+        console.log("选中的素材", data.material);
+        if (this.contentType === "PROGRAM") {
+          if (this.materialType === "video") {
+            this.currentImage.video_id = data.material.id;
+            this.currentImage.video_url = data.material.url;
+          } else {
+            this.currentImage.image_id = data.material.id;
+            this.currentImage.image_url = data.material.url;
+          }
+          console.log(this.image_list);
+        } else {
+          if (this.materialType === "video") {
+            this.currentCreativity.video_id = data.material.id;
+            this.currentCreativity.video_url = data.material.url;
+          } else {
+            this.currentCreativity.image_id = data.material.id;
+            this.currentCreativity.image_url = data.material.url;
+          }
+          console.log(this.creatives);
+        }
+        this.visible = false;
+      } else {
+        return message.error("请先选择素材");
+      }
+    },
   },
 });
 // 要传的
@@ -342,7 +601,8 @@ export default creativityContent;
       border: 2px solid rgb(83, 115, 255);
     }
   }
-  .material-box {
+  .material-box,
+  .pane-content {
     overflow: hidden;
     margin-top: 20px;
     padding-bottom: 10px;
@@ -392,6 +652,16 @@ export default creativityContent;
           display: flex;
           align-items: center;
           justify-content: center;
+          img,
+          video {
+            max-width: 100%;
+            max-height: 100%;
+          }
+          .icon-ziyuan {
+            position: absolute;
+            font-size: 20px;
+            z-index: 100;
+          }
         }
         .cover {
           width: 100%;
@@ -403,6 +673,7 @@ export default creativityContent;
           align-items: center;
           justify-content: center;
           background: rgba(0, 0, 0, 0.301);
+          z-index: 1000;
           p {
             line-height: 28px;
           }
@@ -478,5 +749,40 @@ export default creativityContent;
       margin-right: 0;
     }
   }
+  .custom-box {
+    border: 2px solid rgb(240, 240, 240);
+    margin-top: 10px;
+    position: relative;
+    padding-bottom: 10px;
+    .no-pane {
+      width: 100%;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      p {
+        text-align: center;
+        line-height: 40px;
+        i {
+          font-size: 40px;
+          color: gray;
+        }
+        span {
+          color: gray;
+        }
+      }
+    }
+    .panes {
+      .add-btn {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        z-index: 100;
+      }
+      .pane-content {
+        padding: 10px;
+      }
+    }
+  }
 }
 </style>

src/views/put/component/material-select.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="material-select">
+    <a-tabs
+      v-model:activeKey="search.is_public"
+      @change="onSearch"
+      size="small"
+    >
+      <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
+      <a-tab-pane :key="0" tab="我的上传"></a-tab-pane>
+    </a-tabs>
+    <a-input-search
+      v-model:value="search.name"
+      :placeholder="type === 'video' ? '请输入视频名称' : '请输入图片名称'"
+      style="width: 200px; margin-right: 20px"
+      @search="onSearch"
+    />
+    <a-input-search
+      v-model:value="search.bookname"
+      placeholder="请输入推广书籍"
+      style="width: 200px; margin-right: 20px"
+      @search="onSearch"
+    />
+    <a-input-search
+      v-model:value="search.demander"
+      placeholder="请输入需求方"
+      style="width: 200px; margin-right: 20px"
+      @search="onSearch"
+    />
+    <a-spin :spinning="loading">
+      <div class="content-box">
+        <div
+          :class="{ 'item-box': true, checked: item.checked }"
+          v-for="item in list"
+          :key="item.id"
+          @click.stop="checkedChange(item)"
+        >
+          <a-checkbox
+            class="checkbox"
+            v-model:checked="item.checked"
+            @change="checkedChange(item)"
+          ></a-checkbox>
+          <div class="play-box">
+            <div class="player">
+              <video v-if="item.video_type" :src="item.url"></video>
+              <img v-if="item.image_type" :src="item.url" alt="" />
+            </div>
+          </div>
+          <div class="title-box">{{ item.name }}</div>
+        </div>
+      </div>
+    </a-spin>
+    <a-pagination
+      v-model:current="meta.current_page"
+      :total="meta.total"
+      show-less-items
+      style="float: right; margin: 10px 10px 0 0"
+      size="small"
+      @change="onSearch"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref } from "vue";
+import { getVideoList, getImageList } from "@/api";
+import { message } from "ant-design-vue";
+import usePagination from "@/hooks/usePagination";
+
+const materialSelect = defineComponent({
+  props: ["materialType"],
+  setup(props) {
+    let { meta, tablePageOptions } = usePagination();
+    const state = reactive({
+      checkItem: {
+        id: 0,
+      },
+      type: "video",
+      loading: false,
+      search: {
+        is_public: 1, // 1公共素材 0个人素材
+        name: "", // 视频/图片名称
+        bookname: "", // 推广书籍
+        demander: "", // 需求方
+      },
+      list: ref<any[]>([]),
+    });
+    const onSearch = async (page?: any) => {
+      console.log("sss", page);
+      state.loading = true;
+      let param: any = {
+        ...state.search,
+      };
+      delete param.name;
+      if (state.type === "video") {
+        param.video_name = state.search.name;
+      } else {
+        param.image_name = state.search.name;
+      }
+      let api = state.type === "video" ? getVideoList : getImageList;
+      let { data } = await api({
+        page: page ? page : 1,
+        ...param,
+      });
+      console.log("素材库数据", data);
+      state.loading = false;
+      state.list = data.list;
+      if (state.list.length > 0) {
+        state.list.forEach((item) => {
+          item.checked = false;
+        });
+      }
+      meta.value = data.meta;
+    };
+    return { ...toRefs(state), onSearch, meta };
+  },
+  mounted() {
+    this.type = this.$props.materialType;
+    console.log("type", this.type);
+    console.log("meta", this.meta);
+    this.onSearch();
+  },
+  methods: {
+    // 切换选中项
+    checkedChange(val: any) {
+      this.list.forEach((item) => {
+        item.checked = false;
+        if (item.id === val.id) {
+          item.checked = true;
+        }
+      });
+      this.checkItem = val;
+      console.log(this.checkItem);
+    },
+    // 返回选中的素材
+    backMaterial() {
+      if (!this.checkItem.id) {
+        return { flag: false, material: {} };
+      } else {
+        return { flag: true, material: this.checkItem };
+      }
+    },
+  },
+});
+
+export default materialSelect;
+</script>
+<style lang="scss" scoped>
+.material-select {
+  overflow: hidden;
+  .content-box {
+    min-height: 100px;
+    margin-top: 10px;
+    .item-box {
+      width: 200px;
+      height: 160px;
+      border: 1px solid rgb(168, 166, 166);
+      float: left;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      position: relative;
+      .checkbox {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+      .play-box {
+        width: 100%;
+        height: 130px;
+        background: rgb(128, 128, 128);
+        .player {
+          width: 80px;
+          margin: 0 auto;
+          height: 100%;
+          background: rgb(191, 193, 194);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img,
+          video {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+      }
+      .title-box {
+        width: 100%;
+        height: 38px;
+        padding-left: 10px;
+      }
+    }
+    .checked {
+      border: 2px solid rgb(4, 77, 187);
+    }
+  }
+}
+</style>

src/views/put/plan-create/creativity-add.vue

@@ -10,7 +10,7 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item label="创意内容">
-          <creativity-content></creativity-content>
+          <creativity-content :type="creativityAdd"></creativity-content>
         </a-form-item>
       </a-form>
     </div>