|
@@ -0,0 +1,993 @@
|
|
|
+<template>
|
|
|
+ <div class="input-item material-creat">
|
|
|
+ <a-form-item>
|
|
|
+ <a-radio-group v-model="materialType" @change="materialTypeChange" style="margin-bottom: 32px;">
|
|
|
+ <!-- <a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
|
|
|
+ </a-badge> -->
|
|
|
+ <a-badge :count="HorizontalLargeImageListShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
|
|
|
+ </a-badge>
|
|
|
+ <a-badge :count="HorizontalLargeImageListHeng.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
|
|
|
+ </a-badge>
|
|
|
+ <!-- <a-badge :count="HorizontalLargeImageListZu.length" :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
+ v-if="creativeType=='customCreativity'">
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
|
|
|
+ </a-badge> -->
|
|
|
+ <!-- <a-badge :count="HorizontalLargeImageListSmall.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
|
|
|
+ </a-badge> -->
|
|
|
+ <!-- <a-badge :count="HorizontalLargeImageListBigShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
|
|
|
+ </a-badge> -->
|
|
|
+ </a-radio-group>
|
|
|
+ <div class="bui-tabs-scroll">
|
|
|
+ <a-layout
|
|
|
+ :style="{ height: '600px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
|
|
|
+ <a-layout-content style="padding:10px;">
|
|
|
+ <div :style="{ marginBottom: '16px' }">
|
|
|
+ <a-button @click="addCreative()" :disabled="count&&materialType!=undefined">添加创意</a-button>
|
|
|
+ <span style="color:black;margin-left:10px"
|
|
|
+ v-if="creativeType == 'customCreativity'">{{countMany}}/10</span>
|
|
|
+ <span style="color:black;margin-left:10px" v-else>{{countMany}}/12</span>
|
|
|
+ </div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
|
|
|
+ <a-card title :ref="item">
|
|
|
+ <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
|
|
|
+ <div style="clear:both"></div>
|
|
|
+ <div class="dynamically_add_form_item">
|
|
|
+ <a-form-item class label="素材选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <!-- <upload-to-ali v-model="item.vadioUrl" :customDomain="customDomain" preview :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
|
|
|
+ :size="102400" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"></upload-to-ali> -->
|
|
|
+ <!-- <uploadFile :value.sync="item.vadioUrl" :fileCount="1"
|
|
|
+ :uploadType="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'video':'image'" />
|
|
|
+ -->
|
|
|
+ <a
|
|
|
+ @click="getVideoList(item)">{{materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'选择视频':'选择图片'}}</a>
|
|
|
+ <div>
|
|
|
+ <!-- {{materialType}} -->
|
|
|
+ <video :src="item.videoUrl" style="width:300px"
|
|
|
+ v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO'&&item.videoUrl"></video>
|
|
|
+ <video :src="item.videoUrl" style="width:120px"
|
|
|
+ v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'&&item.videoUrl"></video>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="封面上传" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
|
|
+ v-if="(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')">
|
|
|
+ <!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
|
|
|
+ :bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali> -->
|
|
|
+ <a @click="getImageList(item)" v-if="item.imageUrl==''">选择图片</a>
|
|
|
+ <img :src="item.imageUrl" alt="" v-else style="width:120px">
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
|
|
+ v-if="creativeType == 'customCreativity'">
|
|
|
+ <a-input v-model="item.text" style="width:400px" class="rending" @change="judge(item)"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="动态词包" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
|
|
+ v-if="creativeType == 'customCreativity'">
|
|
|
+ <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag" v-show="indexTag<item.many"
|
|
|
+ @click="getChange(item,itemTag,index)">{{itemTag.name}}</a-tag>
|
|
|
+ <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ <div v-if="creativeType == 'proceduralCreativity'">
|
|
|
+
|
|
|
+ <div style="display:block;font-size: 22px;margin-bottom: 20px;">程序化创意标题</div>
|
|
|
+ <a-button @click="addTitle" class="row-item">添加创意标题</a-button>
|
|
|
+ <br />
|
|
|
+ <div v-for="(item,index) of titleData" :key="index">
|
|
|
+ <a-input style="width:55%;margin-bottom:20px" v-model="item.text" class="rending-all" @change="judge(item)">
|
|
|
+ </a-input>
|
|
|
+ <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="titleData.length>1"
|
|
|
+ @click="tetleDetele(index)" />
|
|
|
+ <br />
|
|
|
+ <a-tag style="margin-bottom:10px" v-for="(itemTag,indexTag) of tags" :key="indexTag"
|
|
|
+ @click="getChangeAllTitle(item,itemTag,index)">
|
|
|
+ {{itemTag.name}}</a-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 创建大图横图创意 -->
|
|
|
+
|
|
|
+ <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000" :height='500'>
|
|
|
+ <div >
|
|
|
+
|
|
|
+
|
|
|
+ <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
|
|
|
+ <ul v-if="dataSource.length>0" :style="{height:materialType == 'CREATIVE_IMAGE_MODE_VIDEO'?'200px':'380px'}">
|
|
|
+ <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
|
|
|
+ <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" >
|
|
|
+
|
|
|
+ <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video> -->
|
|
|
+ <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
|
|
|
+
|
|
|
+ <video v-if="materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || materialType ==
|
|
|
+ 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'" class="video" :src="item.videoUrl" controls="controls"
|
|
|
+ style="width:100%;margin-left: -8px;">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <img v-else :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
|
|
|
+ </a-checkbox>
|
|
|
+ <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
|
|
|
+ </li>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </ul>
|
|
|
+ <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
|
|
|
+ <img
|
|
|
+ src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
|
|
|
+ alt="" v-if="!loadingVideoList" />
|
|
|
+ <img v-else src="@/views/modules/material/loading.gif" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <ul class="actor-photo-list">
|
|
|
+ <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
|
|
|
+ @change="onChangeCheck">
|
|
|
+ <li v-for="(item, index) of dataSource" :key="index">
|
|
|
+ <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
|
|
|
+
|
|
|
+ </a-checkbox>
|
|
|
+ </li>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </ul> -->
|
|
|
+ <div style="text-align:right">
|
|
|
+ <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
|
|
|
+ showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
|
|
|
+ @change="getDataSource" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
+ <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemalImage" @ok="handleOkShowImage" :width="1000">
|
|
|
+ <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
|
|
|
+ <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0;">
|
|
|
+ <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
|
|
|
+ <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px">
|
|
|
+
|
|
|
+ <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video> -->
|
|
|
+ <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
|
|
|
+
|
|
|
+ <img :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
|
|
|
+ </a-checkbox>
|
|
|
+ <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a> -->
|
|
|
+ </li>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </ul>
|
|
|
+ <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
|
|
|
+ <img
|
|
|
+ src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
|
|
|
+ alt="" v-if="!loadingVideoList" />
|
|
|
+ <img v-else src="@/views/modules/material/loading.gif" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <ul class="actor-photo-list">
|
|
|
+ <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
|
|
|
+ @change="onChangeCheck">
|
|
|
+ <li v-for="(item, index) of dataSource" :key="index">
|
|
|
+ <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
|
|
|
+
|
|
|
+ </a-checkbox>
|
|
|
+ </li>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </ul> -->
|
|
|
+ <div style="text-align:right">
|
|
|
+ <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
|
|
|
+ showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
|
|
|
+ @change="getDataSource" />
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
|
|
|
+ <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uploadFile from '@/components/uploadFile.vue'
|
|
|
+ import {
|
|
|
+ postAction,
|
|
|
+ getAction,
|
|
|
+ getPackage
|
|
|
+ } from '@/api/manage'
|
|
|
+ import {
|
|
|
+ stopOtherVideo,
|
|
|
+ closeAllVideoFun
|
|
|
+ } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
+ import moment from 'moment'
|
|
|
+ import AFormItem from 'ant-design-vue/es/form/FormItem'
|
|
|
+ import $ from 'jquery'
|
|
|
+ import qs from 'qs'
|
|
|
+ export default {
|
|
|
+ name: 'BaseForm',
|
|
|
+ props: {
|
|
|
+ accountId: {
|
|
|
+ default () {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ creativeType: {
|
|
|
+ type: String,
|
|
|
+ default () {
|
|
|
+ return 'customCreativity'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ AFormItem,
|
|
|
+ // UploadToAli,
|
|
|
+ uploadFile
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visibleMatemal: false,
|
|
|
+ visibleVideo: false,
|
|
|
+ videoUrlShow: "",
|
|
|
+ dataSource: [],
|
|
|
+ loadingVideoList: false,
|
|
|
+ time: [],
|
|
|
+ checkVideo: [],
|
|
|
+ labelCol: {
|
|
|
+ xs: {
|
|
|
+ span: 24
|
|
|
+ },
|
|
|
+ sm: {
|
|
|
+ span: 5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: {
|
|
|
+ span: 24
|
|
|
+ },
|
|
|
+ sm: {
|
|
|
+ span: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ visibleMatemalImage: false,
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
+ bucket: 'ctop-media',
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
+ acceptImage: 'image/jpeg,image/png',
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
+ customDomain: '',
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ url: {
|
|
|
+ userAllocationList: '/template/allocation/list',
|
|
|
+ insertUrl: '/template/creative/insert',
|
|
|
+ industryListUrl: '/template/bytedance/industry/list',
|
|
|
+ campaignListUrl: '/template/campaign/list',
|
|
|
+ budgetTemplateListUrl: '/template/budget/list',
|
|
|
+ deliverytargetTemplateListUrl: '/template/deliverytarget/list',
|
|
|
+ userorentationTemplateListUrl: '/template/userorentation/list',
|
|
|
+ deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
|
|
|
+ convertList: 'template/convert/list'
|
|
|
+ },
|
|
|
+ materialType: 'CREATIVE_IMAGE_MODE_VIDEO',
|
|
|
+ // 创建大图横图创意
|
|
|
+ createLargeImageCreativeCon: true,
|
|
|
+ HorizontalLargeImageList: [],
|
|
|
+ HorizontalLargeImageListBig: [],
|
|
|
+ HorizontalLargeImageListHeng: [],
|
|
|
+ HorizontalLargeImageListShu: [],
|
|
|
+ HorizontalLargeImageListZu: [],
|
|
|
+ HorizontalLargeImageListSmall: [],
|
|
|
+ HorizontalLargeImageListBigShu: [],
|
|
|
+ horizonImageUrlColl: [], // 大图横图图片素材集合
|
|
|
+ horizonImageCreativeTextColl: [], // 创意标题集合
|
|
|
+ itemIndex: null,
|
|
|
+ tags: [],
|
|
|
+ range: null,
|
|
|
+ countTag: 0,
|
|
|
+ titleData: [{
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ showElse: true,
|
|
|
+ titleMany: 0
|
|
|
+ }],
|
|
|
+ nowItem: null,
|
|
|
+ ipagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
+ },
|
|
|
+ showQuickJumper: true,
|
|
|
+ // showSizeChanger: true,
|
|
|
+ total: 0,
|
|
|
+ onChange: current => {
|
|
|
+ // 切换分页时的回调,
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
+ this.ipagination.current = current
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isImg:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDataSource(page, pageSize) {
|
|
|
+ console.log(this.isImg)
|
|
|
+ this.ipagination.current = page
|
|
|
+ var params = {}
|
|
|
+ params.accountId = "1649600126891015"
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = page
|
|
|
+ if (this.time.length > 0) {
|
|
|
+ params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ if ((this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
|
|
|
+ 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL')&&!this.isImg) {
|
|
|
+ if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
|
+ params.type = 2
|
|
|
+ } else {
|
|
|
+ params.type = 1
|
|
|
+ }
|
|
|
+ this.showVideoList('/bytedance/batch/getVideoList', params)
|
|
|
+ } else if(this.isImg){
|
|
|
+ console.log(this.isImg)
|
|
|
+ this.showVideoList('/bytedance/batch/getImageList', params)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getImageList(item) {
|
|
|
+ this.checkVideo = []
|
|
|
+ this.nowItem = item
|
|
|
+ this.visibleMatemalImage = true
|
|
|
+
|
|
|
+ this.ipagination.current = 1
|
|
|
+
|
|
|
+ this.isImg=true;
|
|
|
+ var params = {}
|
|
|
+ params.accountId = '1649600126891015'
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = this.ipagination.current
|
|
|
+ if (this.time.length > 0) {
|
|
|
+ params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ this.showVideoList('/bytedance/batch/getImageList', params)
|
|
|
+ },
|
|
|
+ onChangeVideo() {
|
|
|
+ if (this.checkVideo.length > 1) {
|
|
|
+ this.checkVideo.shift()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ matemalVideo(item, index) {
|
|
|
+ this.visibleVideo = true
|
|
|
+ this.videoUrlShow = item.url
|
|
|
+ },
|
|
|
+ handleOkShow() {
|
|
|
+ this.visibleMatemal = false
|
|
|
+ if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
|
|
|
+ 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
|
+
|
|
|
+ this.nowItem.videoId = this.checkVideo[0].id
|
|
|
+ this.nowItem.videoUrl = this.checkVideo[0].videoUrl
|
|
|
+ } else {
|
|
|
+ this.nowItem.imageId = this.checkVideo[0].id
|
|
|
+ this.nowItem.imageUrl = this.checkVideo[0].imageUrl
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleOkShowImage() {
|
|
|
+ this.visibleMatemalImage = false
|
|
|
+ this.nowItem.imageId = this.checkVideo[0].id
|
|
|
+ this.nowItem.imageUrl = this.checkVideo[0].imageUrl
|
|
|
+ },
|
|
|
+ getVideoList(item) {
|
|
|
+ this.checkVideo = []
|
|
|
+ this.nowItem = item
|
|
|
+ this.visibleMatemal = true
|
|
|
+ this.isImg=false
|
|
|
+ this.ipagination.current = 1
|
|
|
+ var params = {}
|
|
|
+ params.accountId = '1649600126891015'
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = this.ipagination.current
|
|
|
+ if (this.time.length > 0) {
|
|
|
+ params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
|
|
|
+ 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
|
+ if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
|
+ params.type = 2
|
|
|
+ } else {
|
|
|
+ params.type = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ this.showVideoList('/bytedance/batch/getVideoList', params)
|
|
|
+ } else {
|
|
|
+ this.showVideoList('/bytedance/batch/getImageList', params)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ showVideoList(url, params) {
|
|
|
+ this.dataSource = []
|
|
|
+ this.loadingVideoList = true
|
|
|
+
|
|
|
+ getAction(url, params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.dataSource = res.result.records
|
|
|
+ this.ipagination.total = res.result.total
|
|
|
+ this.loadingVideoList = false
|
|
|
+ } else {
|
|
|
+ this.loadingVideoList = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ judge(item) {
|
|
|
+ var re = /{(.*?)}/g
|
|
|
+ var array = []
|
|
|
+ var temp
|
|
|
+ while ((temp = re.exec(item.text))) {
|
|
|
+ array.push(temp[1])
|
|
|
+ }
|
|
|
+ console.log(array)
|
|
|
+ item.countTag = array.length
|
|
|
+ },
|
|
|
+ getChange(item, tag, index) {
|
|
|
+ this.judge(item)
|
|
|
+ if (item.text == '') {
|
|
|
+ item.countTag = 0
|
|
|
+ }
|
|
|
+ if (item.countTag >= 2) {
|
|
|
+ this.$message.error('最多插入两条词包')
|
|
|
+ // item.countTag = 2
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var node = document.getElementsByClassName('rending')[index]
|
|
|
+ var v = '{' + tag.name + '}'
|
|
|
+
|
|
|
+ if (document.selection) {
|
|
|
+ //IE
|
|
|
+ node.focus()
|
|
|
+ var sel = document.selection.createRange()
|
|
|
+ sel.text = v
|
|
|
+ sel.select()
|
|
|
+ item.creativeWordIds.push(tag.creative_word_id)
|
|
|
+ } else if (node.selectionStart || node.selectionStart == '0') {
|
|
|
+ //MOZILLA/GOOGLE
|
|
|
+ var startPos = node.selectionStart
|
|
|
+ var endPos = node.selectionEnd
|
|
|
+ var restoreTop = node.scrollTop
|
|
|
+ node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
|
|
|
+ if (restoreTop > 0) {
|
|
|
+ node.scrollTop = restoreTop
|
|
|
+ }
|
|
|
+ item.text = node.value
|
|
|
+ item.creativeWordIds.push(tag.creative_word_id)
|
|
|
+ node.focus()
|
|
|
+ node.selectionStart = startPos + v.length
|
|
|
+ node.selectionEnd = startPos + v.length
|
|
|
+ } else {
|
|
|
+ //OTHER
|
|
|
+ node.value += v
|
|
|
+ item.creativeWordIds.push(tag.creative_word_id)
|
|
|
+ item.text = node.value
|
|
|
+ node.focus()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getChangeAllTitle(item, tag, index) {
|
|
|
+ this.judge(item)
|
|
|
+ if (item.text == '') {
|
|
|
+ item.countTag = 0
|
|
|
+ }
|
|
|
+ if (item.countTag >= 2) {
|
|
|
+ this.$message.error('最多插入两条词包')
|
|
|
+ // item.countTag = 2
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var node = document.getElementsByClassName('rending-all')[index]
|
|
|
+ var v = '{' + tag.name + '}'
|
|
|
+ item.creativeWordIds.push(tag.creative_word_id)
|
|
|
+ if (document.selection) {
|
|
|
+ //IE
|
|
|
+ node.focus()
|
|
|
+ var sel = document.selection.createRange()
|
|
|
+ sel.text = v
|
|
|
+ sel.select()
|
|
|
+ } else if (node.selectionStart || node.selectionStart == '0') {
|
|
|
+ //MOZILLA/GOOGLE
|
|
|
+ var startPos = node.selectionStart
|
|
|
+ var endPos = node.selectionEnd
|
|
|
+ var restoreTop = node.scrollTop
|
|
|
+ node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
|
|
|
+ if (restoreTop > 0) {
|
|
|
+ node.scrollTop = restoreTop
|
|
|
+ }
|
|
|
+ item.text = node.value
|
|
|
+ node.focus()
|
|
|
+ node.selectionStart = startPos + v.length
|
|
|
+ node.selectionEnd = startPos + v.length
|
|
|
+ } else {
|
|
|
+ //OTHER
|
|
|
+ node.value += v
|
|
|
+ item.text = node.value
|
|
|
+ node.focus()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showElseClick(item) {
|
|
|
+ item.showElse = !item.showElse
|
|
|
+ if (!item.showElse) {
|
|
|
+ item.many = this.tags.length
|
|
|
+ } else {
|
|
|
+ item.many = 3
|
|
|
+ }
|
|
|
+ },
|
|
|
+ materialTypeChange() {
|
|
|
+ let type = this.materialType
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
+ this.showLargeImage = false
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
+ this.showHorizonVideo = false
|
|
|
+ this.showVerticalVideo = false
|
|
|
+ this.showGroupImage = false
|
|
|
+ this.showSmallImage = true
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
|
|
|
+ // this.createLargeImageCreativeCon = true
|
|
|
+ this.showLargeImage = false
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
+ this.showHorizonVideo = false
|
|
|
+ this.showVerticalVideo = false
|
|
|
+ this.showGroupImage = false
|
|
|
+ this.showSmallImage = false
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
+ this.showLargeImage = false
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
+ this.showHorizonVideo = false
|
|
|
+ this.showVerticalVideo = false
|
|
|
+ this.showGroupImage = true
|
|
|
+ this.showSmallImage = false
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
+ this.showLargeImage = false
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
+ this.showHorizonVideo = true
|
|
|
+ this.showVerticalVideo = false
|
|
|
+ this.showGroupImage = false
|
|
|
+ this.showSmallImage = false
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
+ this.showLargeImage = false
|
|
|
+ this.showLargeVerticalImage = true
|
|
|
+ this.showHorizonVideo = false
|
|
|
+ this.showVerticalVideo = false
|
|
|
+ this.showGroupImage = false
|
|
|
+ this.showSmallImage = false
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
+ this.showLargeImage = false
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
+ this.showHorizonVideo = false
|
|
|
+ this.showVerticalVideo = true
|
|
|
+ this.showGroupImage = false
|
|
|
+ this.showSmallImage = false
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 创建大图横图创意
|
|
|
+ addCreative() {
|
|
|
+ let type = this.materialType
|
|
|
+ this.getTags()
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
|
+ this.HorizontalLargeImageListSmall.push({
|
|
|
+ ImageMode: type,
|
|
|
+ imageUrl: '',
|
|
|
+ imageId: '',
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ vadioUrl: '',
|
|
|
+ videoId: '',
|
|
|
+ multiple: [],
|
|
|
+ countTag: 0,
|
|
|
+ many: 3,
|
|
|
+ showElse: true
|
|
|
+ })
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
|
|
|
+ this.HorizontalLargeImageListBig.push({
|
|
|
+ imageMode: type,
|
|
|
+ imageUrl: '',
|
|
|
+ imageId: '',
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ vadioUrl: '',
|
|
|
+ videoId: '',
|
|
|
+ multiple: [],
|
|
|
+ countTag: 0,
|
|
|
+ many: 3,
|
|
|
+ showElse: true
|
|
|
+ })
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
|
|
|
+ this.HorizontalLargeImageListZu.push({
|
|
|
+ creativeType: this.creativeType,
|
|
|
+ imageMode: type,
|
|
|
+ imageUrl: '',
|
|
|
+ imageId: '',
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ vadioUrl: '',
|
|
|
+ videoId: '',
|
|
|
+ multiple: [],
|
|
|
+ countTag: 0,
|
|
|
+ many: 3,
|
|
|
+ showElse: true
|
|
|
+ })
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
|
+ this.HorizontalLargeImageListShu.push({
|
|
|
+ creativeType: this.creativeType,
|
|
|
+ imageMode: type,
|
|
|
+ imageUrl: '',
|
|
|
+ imageId: '',
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ vadioUrl: '',
|
|
|
+ videoId: '',
|
|
|
+ multiple: [],
|
|
|
+ countTag: 0,
|
|
|
+ many: 3,
|
|
|
+ showElse: true
|
|
|
+ })
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
|
|
|
+ this.HorizontalLargeImageListBigShu.push({
|
|
|
+ creativeType: this.creativeType,
|
|
|
+ imageMode: type,
|
|
|
+ imageUrl: '',
|
|
|
+ imageId: '',
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ vadioUrl: '',
|
|
|
+ videoId: '',
|
|
|
+ multiple: [],
|
|
|
+ countTag: 0,
|
|
|
+ many: 3,
|
|
|
+ showElse: true
|
|
|
+ })
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
|
|
|
+ }
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
|
+ this.HorizontalLargeImageListHeng.push({
|
|
|
+ creativeType: this.creativeType,
|
|
|
+ imageMode: type,
|
|
|
+ imageUrl: '',
|
|
|
+ imageId: '',
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ vadioUrl: '',
|
|
|
+ videoId: '',
|
|
|
+ multiple: [],
|
|
|
+ countTag: 0,
|
|
|
+ many: 3,
|
|
|
+ showElse: true
|
|
|
+ })
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteCreative(index) {
|
|
|
+ console.log(index)
|
|
|
+ console.log(this.HorizontalLargeImageList)
|
|
|
+ this.HorizontalLargeImageList.splice(index, 1)
|
|
|
+ },
|
|
|
+ getTags() {
|
|
|
+ // let accountInfo = localStorage.getItem('accountInfo')
|
|
|
+ // console.log(groupInfo)
|
|
|
+
|
|
|
+ getAction('/bytedance/batch/creative/words/get', {
|
|
|
+ accountId: '1649600126891015'
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == '0') {
|
|
|
+ this.tags = res.creative_word
|
|
|
+ } else {
|
|
|
+ this.tags = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addTitle() {
|
|
|
+ this.titleData.push({
|
|
|
+ text: '',
|
|
|
+ creativeWordIds: [],
|
|
|
+ titleMany: 0,
|
|
|
+ creativeWordIds: []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tetleDetele(index) {
|
|
|
+ this.titleData.splice(index, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getTags()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ creativeType: function (n, o) {
|
|
|
+ console.log(n, o)
|
|
|
+ this.HorizontalLargeImageListBig = []
|
|
|
+ this.HorizontalLargeImageListHeng = []
|
|
|
+ this.HorizontalLargeImageListShu = []
|
|
|
+ this.HorizontalLargeImageListZu = []
|
|
|
+ this.HorizontalLargeImageListSmall = []
|
|
|
+ this.HorizontalLargeImageListBigShu = []
|
|
|
+ this.HorizontalLargeImageList = []
|
|
|
+ },
|
|
|
+ materialType: function (n, o) {
|
|
|
+ this.materialTypeChange()
|
|
|
+ },
|
|
|
+ visibleVideo(n, o) {
|
|
|
+ if (!n) {
|
|
|
+ closeAllVideoFun()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ time(n, o) {
|
|
|
+ console.log(n)
|
|
|
+ if (n.length > 0) {
|
|
|
+ var params = {}
|
|
|
+ params.accountId = "1649600126891015"
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = 1
|
|
|
+ params.startDate = moment(n[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(n[1]).format('YYYY-MM-DD')
|
|
|
+ this.showVideoList('/bytedance/batch/getVideoList', params)
|
|
|
+ } else {
|
|
|
+ var params = {}
|
|
|
+ params.accountId = "1649600126891015"
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNo = 1
|
|
|
+ this.ipagination.current = 1
|
|
|
+ this.showVideoList('/bytedance/batch/getVideoList', params)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ count: function () {
|
|
|
+ var bool
|
|
|
+ if (this.creativeType == 'customCreativity') {
|
|
|
+ bool =
|
|
|
+ this.HorizontalLargeImageListBig.length +
|
|
|
+ this.HorizontalLargeImageListHeng.length +
|
|
|
+ this.HorizontalLargeImageListShu.length +
|
|
|
+ this.HorizontalLargeImageListZu.length +
|
|
|
+ this.HorizontalLargeImageListSmall.length +
|
|
|
+ this.HorizontalLargeImageListBigShu.length >=
|
|
|
+ 10 ?
|
|
|
+ true :
|
|
|
+ false
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
|
|
|
+ this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
|
|
|
+ ) {
|
|
|
+ bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true :
|
|
|
+ false
|
|
|
+ } else {
|
|
|
+ bool =
|
|
|
+ this.HorizontalLargeImageListBig.length +
|
|
|
+ this.HorizontalLargeImageListZu.length +
|
|
|
+ this.HorizontalLargeImageListSmall.length +
|
|
|
+ this.HorizontalLargeImageListBigShu.length >=
|
|
|
+ 10 ?
|
|
|
+ true :
|
|
|
+ false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return bool
|
|
|
+ },
|
|
|
+ countMany: function () {
|
|
|
+ var bool =
|
|
|
+ this.HorizontalLargeImageListBig.length +
|
|
|
+ this.HorizontalLargeImageListHeng.length +
|
|
|
+ this.HorizontalLargeImageListShu.length +
|
|
|
+ this.HorizontalLargeImageListZu.length +
|
|
|
+ this.HorizontalLargeImageListSmall.length +
|
|
|
+ this.HorizontalLargeImageListBigShu.length
|
|
|
+ return bool
|
|
|
+ },
|
|
|
+ vadioMany: function () {
|
|
|
+ var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
|
|
|
+ return bool
|
|
|
+ },
|
|
|
+ imgMany: function () {
|
|
|
+ var bool =
|
|
|
+ this.HorizontalLargeImageListBig.length +
|
|
|
+ this.HorizontalLargeImageListZu.length +
|
|
|
+ this.HorizontalLargeImageListSmall.length +
|
|
|
+ this.HorizontalLargeImageListBigShu.length
|
|
|
+ return bool
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .material-creat {
|
|
|
+ .ant-layout {
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-scroll-number {
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dynamically_add_form_item {
|
|
|
+ .ant-form-item-label {
|
|
|
+ width: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-form-item-control-wrapper {
|
|
|
+ width: auto !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moduler {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
+ padding: 32px 24px 48px 32px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .moduler-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-item:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-item .hint-item {
|
|
|
+ width: 24px;
|
|
|
+ min-width: 24px;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-item .label-item {
|
|
|
+ position: relative;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-self: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 7px;
|
|
|
+ width: 80px;
|
|
|
+ min-width: 80px;
|
|
|
+
|
|
|
+ .text-item {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-item .required-item {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #f45858;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-item .input-item {
|
|
|
+ min-width: 480px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // height: 35px;
|
|
|
+ .tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: tomato;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inventory-tags-lists-header {
|
|
|
+ background-color: #F8F9FA;
|
|
|
+ border: 1px solid #E4E9ED;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 33px;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inventory-tags-lists-container {
|
|
|
+ border: 1px solid #E4E9ED;
|
|
|
+ margin-top: -1px;
|
|
|
+ height: 100%;
|
|
|
+ padding: 4px 0px;
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inventory-tags-lists-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 37px;
|
|
|
+ line-height: 37px;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 12px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .opt {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ overflow:auto;
|
|
|
+ padding-left:0
|
|
|
+ }
|
|
|
+ .chouzhen {
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #e4e4e4;
|
|
|
+ width: calc(20% - 10px);
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ float: left
|
|
|
+ }
|
|
|
+</style>
|