|
|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <div class="customize-container">
|
|
|
+ <el-card body-style="padding: 20px 80px 0 80px;">
|
|
|
+ <div style="font-weight: 700; padding-bottom: 18px">
|
|
|
+ <span style="color: #306cd7; font-size: 26px">|</span>
|
|
|
+ <span style="font-size: 18px; padding-left: 5px">创意</span>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="120px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ size="default"
|
|
|
+ label-position="top"
|
|
|
+ status-icon>
|
|
|
+ <el-form-item label="广告名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" style="width: 50%" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="border: 1px solid #dddfe6; padding: 0 0 0 5px">
|
|
|
+ <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
|
|
|
+ <el-scrollbar height="700px">
|
|
|
+ <el-collapse v-model="activeNames" @change="handleChange">
|
|
|
+ <el-collapse-item name="1">
|
|
|
+ <template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
|
|
|
+ <el-form-item prop="brandName">
|
|
|
+ <el-input v-model="ruleForm.brandName" style="padding: 0 10px 5px 0"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
+ multiple
|
|
|
+ style="padding-right: 10px">
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
|
|
|
+ <template #tip>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <span class="el-upload__tip">jpg/png files with a size less than 500kb</span>
|
|
|
+ <el-button type="primary" :icon="Picture">从素材库中选择</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
|
|
|
+ <div class="introduce-item">2、文件大小: 1MB 或更小</div>
|
|
|
+ <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
|
|
|
+ <div class="introduce-item">
|
|
|
+ 4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
|
|
|
+ <span style="margin-left: 25px; position: relative;">
|
|
|
+ <el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
|
|
|
+ target="_blank"
|
|
|
+ >查看要求</el-link
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="2">
|
|
|
+ <template #title> <span style="color: #e47470; margin-right: 4px">*</span>视频</template>
|
|
|
+ <div style="display: flex; align-items: center; justify-content: space-between">
|
|
|
+ <span style="color: #1e2128; font-size: 15px; font-weight: 450">选择视频</span>
|
|
|
+ <el-button type="primary" text>查看视频批准提示</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="color: #666666; margin-bottom: 10px">
|
|
|
+ 保持视频简短并紧扣主题。视频会自动播放，因此请确保前 2
|
|
|
+ 秒极具吸引力，并且不依靠声音来传递信息。如果您在视频中使用了文字，请确保文字清晰易辨。字幕或音频必须与将展示您广告的区域相匹配。
|
|
|
+ </div>
|
|
|
+ <div class="upload-button-group">
|
|
|
+ <el-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ class="upload-demo"
|
|
|
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
+ multiple
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :limit="3"
|
|
|
+ :on-exceed="handleExceed">
|
|
|
+ <el-button type="primary">上传文件</el-button>
|
|
|
+
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-button type="primary" :icon="Picture" style="margin-left: -120px" @click="handleSelect">从素材库中选择</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; align-items: center; justify-content: space-between">
|
|
|
+ <span style="color: #1e2128; font-size: 15px; font-weight: 450">视频文件要求:</span>
|
|
|
+ <el-button type="primary" text>了解更多</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span style="color: #1e2128; font-size: 13px; font-weight: 450">视频规格</span>
|
|
|
+ <div class="introduce-item">1.纵横比：16：9</div>
|
|
|
+ <div class="introduce-item">2.尺寸：1280 x 720 像素、1920 x 1080 像素或 3840 x 2160 像素</div>
|
|
|
+ <div class="introduce-item">3.文件大小：500MB 或更小</div>
|
|
|
+ <div class="introduce-item">4.文件格式：MP4 或 MOV</div>
|
|
|
+ <div class="introduce-item">5.长度：6-45 秒</div>
|
|
|
+ <div class="introduce-item">6.帧率：23.976、23.98、24、25、29.97 或 29.98 fps</div>
|
|
|
+ <div class="introduce-item">7.比特率：1 Mbps 或更高</div>
|
|
|
+ <div class="introduce-item">8.编解码器：H.264 或 H.265</div>
|
|
|
+ <div class="introduce-item">9.配置文件：主配置文件或基线配置文件</div>
|
|
|
+ <div class="introduce-item">10.视频流：仅为 1</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span style="color: #1e2128; font-size: 13px; font-weight: 450">音频规格</span>
|
|
|
+ <div class="introduce-item">1.语言：必须与广告投放区域匹配</div>
|
|
|
+ <div class="introduce-item">2.采样率：44.1 kHz 或更高</div>
|
|
|
+ <div class="introduce-item">3.编解码器：PCM、AAC 或 MP3</div>
|
|
|
+ <div class="introduce-item">4.比特率：96 kbps 或更高</div>
|
|
|
+ <div class="introduce-item">5.格式：立体声或单声道</div>
|
|
|
+ <div class="introduce-item">6.音频流：仅为 1</div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item name="3">
|
|
|
+ <template #title> <span style="color: #e47470; margin-right: 4px">*</span>商品</template>
|
|
|
+ <el-button type="primary" :icon="Plus" :disabled="true">添加商品</el-button>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="4">
|
|
|
+ <template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
|
|
|
+ <el-form-item prop="title">
|
|
|
+ <el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { Plus, Picture } from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+interface RuleForm {
|
|
|
+ name: string
|
|
|
+ brandName: string
|
|
|
+ title: string
|
|
|
+}
|
|
|
+
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+const ruleForm = reactive<RuleForm>({
|
|
|
+ name: '视频 广告 - 1/15/2024 17:51:10.236',
|
|
|
+ brandName: '',
|
|
|
+ title: '',
|
|
|
+})
|
|
|
+
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
|
|
|
+ brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
|
|
|
+ title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
|
|
+})
|
|
|
+
|
|
|
+const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('submit!')
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const activeNames = ref(['1'])
|
|
|
+const handleChange = (val: string[]) => {
|
|
|
+ console.log(val)
|
|
|
+}
|
|
|
+
|
|
|
+const fileList = ref<UploadUserFile[]>([
|
|
|
+ {
|
|
|
+ name: 'element-plus-logo.svg',
|
|
|
+ url: 'https://element-plus.org/images/element-plus-logo.svg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'element-plus-logo2.svg',
|
|
|
+ url: 'https://element-plus.org/images/element-plus-logo.svg',
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
|
|
+ console.log(file, uploadFiles)
|
|
|
+}
|
|
|
+
|
|
|
+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
|
+ console.log(uploadFile)
|
|
|
+}
|
|
|
+
|
|
|
+const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
|
|
|
+ ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
|
|
|
+}
|
|
|
+
|
|
|
+const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
|
|
|
+ return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
|
|
|
+ () => true,
|
|
|
+ () => false
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+function handleSelect() {
|
|
|
+ // console.log()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.customize-container {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.upload-button-group {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.introduce-item {
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #88909b;
|
|
|
+}
|
|
|
+</style>
|
