You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
977 lines
26 KiB
977 lines
26 KiB
<template>
|
|
<div class="app-container">
|
|
<el-form ref="form" :model="form" size="small">
|
|
<!-- 创建标题 -->
|
|
<el-row class="in_release_item" type="flex" justify="space-between">
|
|
<el-col :span="3" class="item_title">创建{{ publishType === 0 ? "即时发布" : "定时发布" }}</el-col>
|
|
<el-col :span="18">
|
|
<div class="input_wrap">
|
|
<span class="input_label">名称</span>
|
|
<el-input
|
|
v-model="form.name"
|
|
:placeholder="changePlaceholder"
|
|
class="input_name"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4" class="release_right">
|
|
<el-button
|
|
round
|
|
class="release_btn"
|
|
type="primary"
|
|
>发布</el-button>
|
|
<el-button round type="primary">关闭</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第一步：设置时间 -->
|
|
<el-row class="in_release_item">
|
|
<el-col class="step_1">第一步：设置时间</el-col>
|
|
<el-col class="step_form">
|
|
<el-form-item
|
|
label="发布时间"
|
|
prop="date"
|
|
:rules="[
|
|
{ required: true, message: '请选择发布时间', trigger: 'change' }
|
|
]"
|
|
label-width="100px"
|
|
>
|
|
<el-date-picker
|
|
v-if="publishType === 0"
|
|
v-model="form.date"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
/>
|
|
<el-date-picker
|
|
v-else
|
|
v-model="form.date"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="publishType === 1"
|
|
label="设置周期"
|
|
prop="timePeriod"
|
|
:rules="[
|
|
{ required: true, message: '请设置周期：', trigger: 'change' },
|
|
]"
|
|
:class="['set_weekly',{'no_margin': form.timePeriod === '每周'}]"
|
|
label-width="100px"
|
|
>
|
|
<el-radio-group v-model="form.timePeriod" @change="clearCheckbox()">
|
|
<el-radio label="每天" value="everyday" />
|
|
<el-radio label="每周" value="weekly" />
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.timePeriod === '每周'"
|
|
:class="{'weekly_margin': form.timePeriod === '每周'}"
|
|
prop="onweek"
|
|
:rules="[
|
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-checkbox-group v-model="form.onweek">
|
|
<el-checkbox label="周一" name="onweek" />
|
|
<el-checkbox label="周二" name="onweek" />
|
|
<el-checkbox label="周三" name="onweek" />
|
|
<el-checkbox label="周四" name="onweek" />
|
|
<el-checkbox label="周五" name="onweek" />
|
|
<el-checkbox label="周六" name="onweek" />
|
|
<el-checkbox label="周日" name="onweek" />
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<!-- :rules="[
|
|
{ required: true, message: '请选择是否置顶', trigger: 'change' }
|
|
]" -->
|
|
<el-form-item
|
|
label="是否置顶"
|
|
prop="isTop"
|
|
label-width="100px"
|
|
>
|
|
<el-radio v-model="form.isTop" label="1">置顶</el-radio>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第二步：选择内容 -->
|
|
<el-row class="in_release_item">
|
|
<el-col class="step_1">第二步：选择内容</el-col>
|
|
<el-col class="step_form">
|
|
<div class="step_select">
|
|
<div>已选内容： 0</div>
|
|
<div>内容总时长：0.00s</div>
|
|
<div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont">选择文件</el-button></div>
|
|
</div>
|
|
<div class="step_select_list">
|
|
<div class="step_upload" @click="selectContVisible = true"></div>
|
|
<draggable
|
|
v-model="listSelectedData"
|
|
class="drag_list"
|
|
@end="dragEnd"
|
|
>
|
|
<div
|
|
v-for="(item, index) in listSelectedData"
|
|
:key="index"
|
|
:class="['material_item', 'item_cont']"
|
|
@click="selectedItem(item.id,item)"
|
|
>
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt />
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">{{ item.type }}</span>
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
|
|
</div>
|
|
<div class="file_name">{{ item.name }}</div>
|
|
<div v-if="contentIds.includes(item.id)" class="select_handle">
|
|
<div class="select_delt" @click.stop="selectDelt(item.id,index)">
|
|
<svg class="font-icon icon1" aria-hidden="true">
|
|
<use xlink:href="#icon-guanbi2" />
|
|
</svg>
|
|
</div>
|
|
<div class="select_edit" @click.stop="selectEdit()">
|
|
<svg class="font-icon icon1" aria-hidden="true">
|
|
<use xlink:href="#icon-bianji" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第三步-选择设备 -->
|
|
<el-row class="in_release_item">
|
|
<el-col class="step_1">第三步：选择设备</el-col>
|
|
<el-col class="step_form">
|
|
<el-form-item
|
|
label=""
|
|
prop="deviceSelect"
|
|
:rules="[
|
|
{ required: true, message: '请选择设备', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-radio-group v-model="form.deviceSelect">
|
|
<el-radio label="all" value="all">所有设备</el-radio>
|
|
<el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div v-if="form.deviceSelect === 'all'" class="select_all_tip">所有设备都将被发送</div>
|
|
<div v-if="deviceTags.length > 0 && form.deviceSelect === 'other'" class="select_other">
|
|
<el-row>
|
|
<el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
|
|
<el-col :span="4">
|
|
<el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-tag
|
|
v-for="tag in deviceTags"
|
|
:key="tag"
|
|
closable
|
|
:disable-transitions="true"
|
|
:hit="false"
|
|
color="#cbe3ff"
|
|
@close="deltTags(tag)"
|
|
>
|
|
{{ tag }}
|
|
</el-tag>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<!-- 第二步：选择内容 - 选择素材 -->
|
|
<div class="release_layer upload_layer">
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:show-close="false"
|
|
:visible.sync="selectContVisible"
|
|
width="1200px"
|
|
>
|
|
<div slot="title" class="layer_tab_title">
|
|
<span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span>
|
|
<span :class="{'active': activeIndex === 1}" @click="tabAll(1)">主题库</span>
|
|
</div>
|
|
<!-- 素材库 -->
|
|
<div v-if="activeIndex === 0">
|
|
<ul class="tab_item">
|
|
<li
|
|
v-for="(item, index) in materialTabItem"
|
|
:key="index"
|
|
:class="{'active': activeItemIndex === index}"
|
|
@click="tab(index)"
|
|
>{{ item.name }}<span>{{ item.num }}</span>
|
|
</li>
|
|
</ul>
|
|
<div class="material_list">
|
|
<div
|
|
v-for="(item, index) in listData"
|
|
:key="index"
|
|
:class="['material_item', 'item_cont',{ 'item_multi': uploadContentIds.includes(item.id) }]"
|
|
>
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt />
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">{{ item.type }}</span>
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
|
|
</div>
|
|
<div class="file_name">{{ item.name }}</div>
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="selectedListItem(item.id, item.type)"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 主题库 -->
|
|
<div v-if="activeIndex === 1" class="theme_cont">
|
|
<!-- 主题库list -->
|
|
<ThemeGalleryList
|
|
ref="ThemeGalleryList"
|
|
:is-multi-selected="isMultiSelected"
|
|
:mulit-text="mulitText"
|
|
:show-item-info="false"
|
|
/>
|
|
</div>
|
|
<div class="upload_list_right">
|
|
<div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="submitForm('form')">确 定</el-button>
|
|
<el-button round @click="cancelContSelect">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 编辑播放内容 -->
|
|
<div class="upload_layer">
|
|
<el-dialog
|
|
title="请选择播放内容"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="listEditVisible"
|
|
>
|
|
<div class="total_time">
|
|
内容总时长：3m15s
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in selectedData"
|
|
:key="index"
|
|
class="edit_material"
|
|
>
|
|
<div class="edit_img">
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt />
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div>
|
|
<span class="">{{ index+1 }}</span>
|
|
</div>
|
|
<div class="edit_cont">
|
|
<div class="edit_cont_base">
|
|
<p>{{ item.name }}</p>
|
|
<span>{{ item.type }}</span>
|
|
<span>{{ item.size }}</span>
|
|
</div>
|
|
<div v-if="item.type === 'JPG'" class="edit_cont_set">
|
|
<div class="set_time">
|
|
<span>展示时长</span>
|
|
<el-input v-model="time" type="text" style="width: 66px" />
|
|
<em>秒</em>
|
|
</div>
|
|
<div class="set_animation">
|
|
<span class="set_item">切换动效</span>
|
|
<el-select v-model="animation" style="width:100px">
|
|
<el-option label="无动画" value="0">无动画</el-option>
|
|
<el-option label="动画1" value="1">动画1</el-option>
|
|
<el-option label="动画2" value="2">动画2</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="set_time set_audio">
|
|
<span>音频：</span>
|
|
<p class="audio_name">audio.mp3</p>
|
|
<!-- 主题库音频文件不可选择 -->
|
|
<el-button type="primary" round @click="selectAudioCont">选择文件</el-button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="edit_cont_other">内容时长：{{ item.time }}</div>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="submitForm('form')">保 存</el-button>
|
|
<el-button round @click="listEditVisible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 素材库 - 音频选择 -->
|
|
<div class="release_layer upload_layer">
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:show-close="false"
|
|
:visible.sync="selectAudioVisible"
|
|
width="1200px"
|
|
>
|
|
<div slot="title" class="layer_tab_title">
|
|
<span class="active">素材库</span>
|
|
</div>
|
|
<div>
|
|
<ul class="tab_item">
|
|
<li>音频<span>3</span></li>
|
|
</ul>
|
|
<div class="material_list">
|
|
<div
|
|
v-for="(item, index) in listData"
|
|
:key="index"
|
|
:class="['material_item', 'item_cont',{ 'item_multi': audioChecked === index }]"
|
|
>
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt />
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">{{ item.type }}</span>
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
|
|
</div>
|
|
<div class="file_name">{{ item.name }}</div>
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="audioCheckedHandle(index)"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="upload_list_right">
|
|
<div class="mulit_btn" @click="multiSelectBtn('audio')">{{ mulitText }}</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round>确 定</el-button>
|
|
<el-button round @click="cancelContSelect('audio')">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 添加发布的设备 -->
|
|
<div class="add_device_layer">
|
|
<el-dialog
|
|
title="请选择设备"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="selectDeviceVisible"
|
|
width="400px"
|
|
>
|
|
<el-tag
|
|
v-for="tag in deviceAllTags"
|
|
:key="tag"
|
|
:disable-transitions="true"
|
|
:hit="false"
|
|
color="#cbe3ff"
|
|
class="all_tags"
|
|
@click="tagHandle(tag)"
|
|
>
|
|
{{ tag }}
|
|
</el-tag>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import draggable from 'vuedraggable'
|
|
import ThemeGalleryList from '../components/ThemeGalleryList.vue'
|
|
export default {
|
|
name: 'ImmediateRelease',
|
|
components: {
|
|
draggable,
|
|
ThemeGalleryList
|
|
},
|
|
data() {
|
|
return {
|
|
publishType: 0,
|
|
time: 15,
|
|
audio_name: 'audio.mp3',
|
|
animation: null,
|
|
selectDeviceVisible: false,
|
|
listEditVisible: false,
|
|
selectContVisible: false,
|
|
activeIndex: 0,
|
|
activeItemIndex: 0,
|
|
selectAudioVisible: false,
|
|
audioChecked: null,
|
|
deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
|
|
deviceTags: [],
|
|
mulitText: '多选',
|
|
isMultiSelected: false,
|
|
form: {
|
|
name: '',
|
|
date: null,
|
|
isTop: null,
|
|
deviceSelect: '',
|
|
timePeriod: null,
|
|
onweek: []
|
|
},
|
|
listData: [
|
|
{
|
|
id: '1',
|
|
name: '1',
|
|
type: 'JPG',
|
|
size: '12kb',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: ''
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '2',
|
|
type: 'JPG',
|
|
size: '12kb',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: ''
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '4',
|
|
type: 'VEDIO',
|
|
size: '12kb',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: '03:00'
|
|
},
|
|
{
|
|
id: '4',
|
|
name: '4',
|
|
type: 'audio',
|
|
size: '12kb',
|
|
coverImg: '',
|
|
time: '01:20'
|
|
}
|
|
],
|
|
listSelectedData: [
|
|
{
|
|
id: '1',
|
|
name: '1',
|
|
type: 'JPG',
|
|
size: '12kb',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: ''
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '2',
|
|
type: 'JPG',
|
|
size: '12kb',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: ''
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '4',
|
|
type: 'VEDIO',
|
|
size: '12kb',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: '03:00'
|
|
},
|
|
{
|
|
id: '4',
|
|
name: '4',
|
|
type: 'audio',
|
|
size: '12kb',
|
|
coverImg: '',
|
|
time: '01:20'
|
|
}
|
|
],
|
|
contentIds: [],
|
|
uploadContentIds: [],
|
|
selectedData: [], // 选择内容 - 选择的item
|
|
materialTabItem: [
|
|
{
|
|
key: 1,
|
|
name: '全部',
|
|
num: '3'
|
|
},
|
|
{
|
|
key: 2,
|
|
name: '图片',
|
|
num: '1'
|
|
},
|
|
{
|
|
key: 3,
|
|
name: '视频',
|
|
num: '1'
|
|
},
|
|
{
|
|
key: 4,
|
|
name: '音频',
|
|
num: '1'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
changePlaceholder() {
|
|
return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.$route.query.tag)
|
|
if (this.$route.path === '/release') {
|
|
this.materialTabItem.pop()
|
|
}
|
|
if (this.$route.query.tag) {
|
|
this.publishType = this.$route.query.tag
|
|
}
|
|
|
|
console.log(this.$router.options.routes)
|
|
console.log(this.$route.path)
|
|
},
|
|
methods: {
|
|
selectEdit() {
|
|
this.listEditVisible = true
|
|
// console.log(this.selectedData)
|
|
},
|
|
dragEnd() {
|
|
// console.log(this.listData)
|
|
// console.log(this.selectedData)
|
|
},
|
|
selectDelt(id, i) {
|
|
const index = this.contentIds.indexOf(id)
|
|
this.contentIds.splice(index, 1)
|
|
this.selectedData.splice(index, 1)
|
|
this.listSelectedData.splice(i, 1)
|
|
},
|
|
selectedItem(id, item) {
|
|
const arr = this.contentIds
|
|
if (arr.includes(id)) {
|
|
const index = arr.indexOf(id)
|
|
if (index > -1) {
|
|
arr.splice(index, 1)
|
|
this.selectedData.splice(index, 1)
|
|
}
|
|
} else {
|
|
this.contentIds.push(id)
|
|
this.selectedData.push(item)
|
|
}
|
|
},
|
|
// 多选btn
|
|
multiSelectBtn(type) {
|
|
this.isMultiSelected = !this.isMultiSelected
|
|
if (this.isMultiSelected) {
|
|
this.mulitText = '取消'
|
|
} else {
|
|
if (type === 'audio') {
|
|
this.mulitText = '选择'
|
|
this.audioChecked = null
|
|
} else {
|
|
this.mulitText = '多选'
|
|
this.uploadContentIds = []
|
|
}
|
|
}
|
|
},
|
|
// 多选选中
|
|
selectedListItem(id) {
|
|
const arr = this.uploadContentIds
|
|
if (arr.includes(id)) {
|
|
const index = arr.indexOf(id)
|
|
if (index > -1) {
|
|
arr.splice(index, 1)
|
|
}
|
|
} else {
|
|
this.uploadContentIds.push(id)
|
|
}
|
|
},
|
|
// 设备选择
|
|
addDeviceTag() {
|
|
this.selectDeviceVisible = true
|
|
},
|
|
tagHandle(tag) {
|
|
console.log(tag)
|
|
this.deviceTags.push(tag)
|
|
},
|
|
// 删除已选择的设备
|
|
deltTags(tag) {
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
|
|
console.log(this.deviceTags)
|
|
},
|
|
// 清空已选择的设备
|
|
clearDevice() {
|
|
this.deviceTags = []
|
|
},
|
|
// 选择内容-素材库/主题库 tab
|
|
tabAll(index) {
|
|
this.activeIndex = index
|
|
this.activeItemIndex = 0
|
|
this.isMultiSelected = false
|
|
this.mulitText = '多选'
|
|
this.uploadContentIds = []
|
|
},
|
|
tab(index) {
|
|
this.activeItemIndex = index
|
|
},
|
|
// 时间设置-切换到每天时
|
|
clearCheckbox() {
|
|
if (this.form.timePeriod === '每天') {
|
|
this.form.onweek = []
|
|
}
|
|
},
|
|
// 选择音频
|
|
selectAudioCont() {
|
|
this.isMultiSelected = false
|
|
this.mulitText = '选择'
|
|
this.selectAudioVisible = true
|
|
},
|
|
// 音频选中-单选
|
|
audioCheckedHandle(index) {
|
|
this.audioChecked = index
|
|
console.log(this.audioChecked)
|
|
},
|
|
// 素材选择 - 取消按钮
|
|
cancelContSelect(type) {
|
|
this.isMultiSelected = false
|
|
if (type === 'audio') {
|
|
this.selectAudioVisible = false
|
|
this.mulitText = '选择'
|
|
this.audioChecked = null
|
|
} else {
|
|
this.selectContVisible = false
|
|
this.mulitText = '多选'
|
|
this.uploadContentIds = []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.in_release_item {
|
|
padding: 16px 24px;
|
|
margin-bottom: 10px;
|
|
line-height: 34px;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
.item_title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #3a8aeb;
|
|
}
|
|
.input_wrap {
|
|
display: flex;
|
|
width: 282px;
|
|
height: 34px;
|
|
padding: 0 24px;
|
|
font-size: 14px;
|
|
background: #f5f6fa;
|
|
line-height: 34px;
|
|
border-radius: 34px;
|
|
.input_label {
|
|
&::after {
|
|
content: "|";
|
|
padding-left: 8px;
|
|
color: #ccc;
|
|
}
|
|
}
|
|
.input_name {
|
|
width: 194px;
|
|
::v-deep .el-input__inner {
|
|
border: none;
|
|
background: #f5f6fa;
|
|
}
|
|
}
|
|
}
|
|
|
|
.release_right {
|
|
text-align: right;
|
|
.el-button {
|
|
font-size: 14px;
|
|
padding: 8px 24px;
|
|
border: none !important;
|
|
}
|
|
.release_btn {
|
|
color: #fff;
|
|
background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step_1{
|
|
font-size: 16px;
|
|
line-height: 54px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.set_weekly {
|
|
::v-deep .el-form-item__label{
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
.no_margin {
|
|
margin: 0;
|
|
}
|
|
.weekly_margin{
|
|
margin: 0 0 6px 100px;
|
|
::v-deep .el-form-item__error{
|
|
top: 70%;
|
|
}
|
|
}
|
|
.step_select{
|
|
display: flex;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
div{
|
|
margin-right: 30px;
|
|
}
|
|
.step_select_audio{
|
|
margin-left: 5px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
.step_select_list{
|
|
display: flex;
|
|
.step_upload{
|
|
width: 164px;
|
|
height: 172px;
|
|
margin-right: 16px;
|
|
border: 1px dashed #dcdde3;
|
|
background: url(~@/assets/images/t-sc.png) #f2f7ff no-repeat center center;
|
|
background-size: 36px 29px;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
.material_item{
|
|
position: relative;
|
|
.select_delt{
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
.font-icon{
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
}
|
|
.select_edit{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 44px;
|
|
background: rgba(0,0,0,.5);
|
|
text-align: center;
|
|
.font-icon{
|
|
width: 16px;
|
|
height: 17px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step_form{
|
|
padding-top: 30px;
|
|
.select_all_tip{
|
|
margin: -20px 0 0 0;
|
|
}
|
|
.select_other{
|
|
margin: -20px 0 0 0;
|
|
}
|
|
}
|
|
|
|
.drag_list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.upload_return{
|
|
color: #8ebcfe;
|
|
}
|
|
.total_time{
|
|
position: absolute;
|
|
top: 72px;
|
|
right: 24px;
|
|
font-size: 14px;
|
|
color: #000;
|
|
}
|
|
.edit_material{
|
|
display: flex;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f2f6fd;
|
|
&:nth-last-child(2){
|
|
border-bottom: none;
|
|
}
|
|
.edit_img{
|
|
position: relative;
|
|
width: 58px;
|
|
height: 77px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
img{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.radio_img {
|
|
width: 58px;
|
|
height: 77px;
|
|
background: url(~@/assets/images/t-yp.png) no-repeat #b3e8fa center;
|
|
background-size: 40px 40px;
|
|
}
|
|
span{
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
display: block;
|
|
width: 20px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 14px;
|
|
|
|
}
|
|
}
|
|
&:nth-child(odd){
|
|
.edit_img{
|
|
span{
|
|
background: url(~@/assets/images/num_bg2.png) no-repeat;
|
|
background-size: 20px 14px;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(even){
|
|
.edit_img{
|
|
span{
|
|
background: url(~@/assets/images/num_bg1.png) no-repeat;
|
|
background-size: 20px 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit_cont{
|
|
display: flex;
|
|
flex-direction: column ;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
padding: 10px 0 8px 0;
|
|
font-size: 14px;
|
|
margin-left: 25px;
|
|
.edit_cont_base{
|
|
display: flex;
|
|
p{
|
|
margin-right: 14px;
|
|
color: #000;
|
|
}
|
|
span{
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
margin-right: 8px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: #3a8aeb;
|
|
background: #cde4ff;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.edit_cont_set{
|
|
display: flex;
|
|
font-size: 12px;
|
|
color: #666;
|
|
line-height: 26px;
|
|
.set_time{
|
|
display: flex;
|
|
margin-right: 30px;
|
|
span{
|
|
margin-right: 8px;
|
|
}
|
|
em{
|
|
display: block;
|
|
margin-left: 8px;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.set_animation{
|
|
display: flex;
|
|
margin-right: 30px;
|
|
span.set_item{
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.set_audio{
|
|
.audio_name{
|
|
margin-right: 10px;
|
|
}
|
|
::v-deep .el-button--small{
|
|
padding: 0 15px;
|
|
border: none;
|
|
}
|
|
}
|
|
::v-deep .el-input__inner{
|
|
text-align: center;
|
|
height: 27px;
|
|
line-height: 27px;
|
|
}
|
|
::v-deep .el-input__icon{
|
|
line-height: 27px;
|
|
}
|
|
}
|
|
.edit_cont_other{
|
|
line-height: 27px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
.release_layer{
|
|
::v-deep .el-dialog__header{
|
|
padding: 0;
|
|
height: 60px;
|
|
}
|
|
.layer_tab_title{
|
|
display: flex;
|
|
span{
|
|
position: relative;
|
|
display: block;
|
|
margin-right: 32px;
|
|
line-height: 60px;
|
|
font-size: 18px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
&.active{
|
|
color: #333;
|
|
}
|
|
&.active::after{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #3a8aeb;
|
|
}
|
|
}
|
|
}
|
|
.tab_item{
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin: -14px 0 16px 0;
|
|
li{
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
span{
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
}
|
|
&.active{
|
|
color: #3a8aeb;
|
|
}
|
|
}
|
|
}
|
|
.material_list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item_cont{
|
|
margin: 0 24px 20px 0;
|
|
}
|
|
}
|
|
}
|
|
.theme_cont{
|
|
::v-deep .el-tabs__header {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.release_layer {
|
|
::v-deep .el-tabs{
|
|
margin: -26px 0 8px 0;
|
|
}
|
|
::v-deep .el-tabs__nav-wrap::after{
|
|
display: none;
|
|
}
|
|
::v-deep .el-tabs__active-bar{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
</style>
|