canvasScreen_admin/src/views/immediateRelease/index.vue

<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>