From b50b35e55c8a168190dff23e1459d8ad0a045148 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 10 Mar 2022 17:25:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=B8=83=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |   2 -
 package.json                                  |   2 +-
 src/assets/images/num_bg1.png                 | Bin 0 -> 1107 bytes
 src/assets/images/num_bg2.png                 | Bin 0 -> 1071 bytes
 src/assets/styles/adminIndex.scss             | 136 ++++-
 src/views/immediateRelease/index.vue          | 503 +++++++++++++++---
 .../materialContent/materialList/index.vue    |  22 -
 .../publishContent/publishList/index.vue      | 187 +++----
 8 files changed, 640 insertions(+), 212 deletions(-)
 create mode 100644 src/assets/images/num_bg1.png
 create mode 100644 src/assets/images/num_bg2.png

diff --git a/.eslintrc.js b/.eslintrc.js
index 591320c..e30339f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,8 +10,6 @@ module.exports = {
     es6: true,
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
-
   rules: {
     "vue/max-attributes-per-line": [2, {
       "singleline": 10,
diff --git a/package.json b/package.json
index 8f140ab..df5337a 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "vue-image-crop-upload": "^2.5.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.20.0",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "wangeditor": "^3.1.1",
     "xlsx": "^0.17.1"
diff --git a/src/assets/images/num_bg1.png b/src/assets/images/num_bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..34fbee3ee7cb2b71fe8a781ed8aad64eb8ee523d
GIT binary patch
literal 1107
zcmbVLO=#0l9FI<li1Py!Hc<%iqG+1De5_4etzEOag55?}SPu$I@?O{2B`+p#Yd7!{
zlzH@|;>{0G7#=)`A}YuZ6OV!iFDmFw(3^sF^QBv-hp~f!<bCA#`+xtg4i6sh+_Gm2
z!!Vus0i#IQUG&|yIYz(2eD8O<bd&xv8Nn4&Hv`0EAhr;jcg=BBL?)a*^BVOsOvjW{
zDwA^Igl=OuZbq1R!}TefVS3XI-?VFpuofD3ycGBC*-MUfV2T@63u3{~qN+166QGfq
z!IC{wvo*-2kFvcDof>cvG1-PY;e~o5#kK6}bRS&{9NU7BT8di^s$3Xmvp7Jk8drH+
z1PYtb;y?vT5*%hF5y*ll3qa<9q>GvkRCeXzsJ8%C^rDel@kLK5u1bin3qrkKkJsfm
z4#owbX__EPf+X=2!H3fxF&n%W?r&Q#P-q8^PaN#Akww$OlO)B_NS9M^{X${Yuotcr
zik3`hn7#nwqTsqwUM+M;is)|`Yof!_w2y=$3h`uM(|%O;x5>12>pO~oG#Y&<aA;G^
z2?N`cF7im;NOAN}96C^!Ku^-tG>b<t0eL7Y6<)IynHN<k+OT3-3A56+vld@YCNfG!
z6f>fd1E4?Kr>L21qA#cQ$uh`kMw^@WLSlM0YWsGm?-p0f<<{lu*#MaY2PKRr+EXxG
z#RP{{?6cWy)b#{=VASy-u7?MsHZ5mupum|zFc)B#ZPi(K)`-FCu@a&PH6DVb##bao
z;*$U+c%aEiNmXRk>XEn=KK$SM2{b4n8kT>Cr+q~yGTN?6fgV=HggmOCfJ)_d^Z7?A
zvoLRDN{#nc^X<+0l}{he$Hc{7+h>>L=F*StuNFJ*T?3`B>65?Hu_ud5OWilR?r+U?
z?%fbOcjxiNp$G2Aou~Kw+&z1J<jt|M7j_k%dirUfy0sab|1x*z-M5Z2<pt&Qksaxc
lm%A5k&AoYd_ClW7)Wy_lNAAu%+BF}^Jl{WPJnS30^am1oX|@0W

literal 0
HcmV?d00001

diff --git a/src/assets/images/num_bg2.png b/src/assets/images/num_bg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3327811caa9d77759ed23223b4627141e2afe03
GIT binary patch
literal 1071
zcmbVL%}>-o6fdknLO>4c0gbViizN1A`mx<MyTb04l{GGqWfM3V+s>4&&`xa!cHtzR
zH1Xg;6aNHH-t?joOt^T~c<}BSxEM@0I9+zp1L0uPcD~;4_ujnse$VD-?~Dvx8Dbb_
zq&j2O>3E5L7X}CDU);^_(_xHEFOdc8k(M1JrU<cv*lJ)eqdKzT#-lGN&oG&Fzp+G?
zYWGYR2ZEj22<;%EXoks8wj<kJL4<YCvL6<>y${<Q>%#)KsMVxeR7OpIW-~?$o3jmf
zbHz0vH+h@Qw@peAAY!xaU^Pt4c7f~gnslCSiyYfAAu9#$IH;xCJX^*wVl_eIT?weH
zZU{gFY7X3DWeF&vq=-P_fow{K2{g9*aMW82J+p3Ay1wYDz%>bpOi^sLT0%<^aJ(!6
z!!Sfi7G;^I7JRZ161&ZZ$#{>!LWvvu5%F=zri`|O*GPe*kse<mh-$SH;xOqZil$6#
z+mQ$aNeqJYULEU%)Y0ECPPI-N8xa!gD8Xy7OY7l{_rNrFXFEy_X*A|s?9-yys}^?G
z0u+*}Rp97}0DWl6Ae*xd!{HIsArB?h;|*6;cu9kj3q8ltZLi038eYliMYSlUZv}wq
za!J*SWxZ4}N{Rw1hSkGX!-UwOi+a9&>br|o&cvGK7}*5J4UAWNT`=Fo1Sd@#vE_1F
zb)CJr=!X!ul8LlT$G5gn?5`tOiE+So@@)F2#NcEdU6P=|Ly$9gPgZ3<2awJKL&?dS
zs%TDD=DK+JzxfksP-5CF|1?i;i*{r>J&^)koQMg9R6#M7%FE}&->J;zs#dYl{^1;L
z-~BzDx!iX#^Xl`Pt?`{5{4Kjb@opqvs%5tO58{Vohu5E8-8#Ic4Id5c{+#+ax@+I~
p`eJYDXz-H9;{Jp4ug^_A?qj%}(NFjB`(LSqtJAaA+tPz4e*k1WQaS(t

literal 0
HcmV?d00001

diff --git a/src/assets/styles/adminIndex.scss b/src/assets/styles/adminIndex.scss
index 634afc6..cf8b340 100644
--- a/src/assets/styles/adminIndex.scss
+++ b/src/assets/styles/adminIndex.scss
@@ -37,7 +37,7 @@
 
     img {
       cursor: pointer;
-      vertical-align: middle
+      vertical-align: middle;
     }
 
     span {
@@ -108,7 +108,7 @@
   .delt_btn {
     background-color: #ee5747 !important;
   }
-  
+
   .start_btn {
     background-color: #3a8aeb !important;
   }
@@ -121,7 +121,7 @@
     background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
   }
 
-  .top_btn{
+  .top_btn {
     background-color: #2cca8c !important;
   }
 
@@ -129,18 +129,18 @@
     background-color: #a7acae !important;
   }
 }
-.el-dialog{
-    margin-top: 0 !important;
-    top: 50%;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    -moz-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    -o-transform: translateY(-50%);
+.el-dialog {
+  margin-top: 0 !important;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
 }
 .el-dialog__body {
-    max-height: 70vh !important;
-    overflow-y: auto;
+  max-height: 70vh !important;
+  overflow-y: auto;
   .el-form-item {
     margin-bottom: 24px;
   }
@@ -337,5 +337,113 @@
     height: 1px;
   }
 }
+.el-range-editor--small {
+  .el-range-separator {
+    width: 24px;
+  }
+}
+// 选择设备
+.step_form,
+.publish_layer {
+  .el-radio-group {
+    display: block;
+    .el-radio {
+      position: relative;
+      line-height: 40px;
+      .radio_tip {
+        position: absolute;
+        right: -45px;
+        top: 0;
+        display: block;
+        width: 42px;
+        height: 21px;
+        line-height: 21px;
+        font-size: 12px;
+        text-align: center;
+        color: #fff;
+        background: url(~@/assets/images/an-tj.png) no-repeat;
+        background-size: 42px 21px;
+      }
+    }
+  }
+  .select_all_tip {
+    width: 336px;
+    height: 32px;
+    line-height: 32px;
+    margin: -20px 0 0 100px;
+    padding: 0 14px;
+    font-size: 12px;
+    color: #999;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
+  }
+  .select_other {
+    width: 600px;
+    margin: -20px 0 0 100px;
+    padding: 18px 23px;
+    background: #f8f8f8;
+    border: 1px solid #dcdde3;
+    border-radius: 4px;
+    font-size: 14px;
+    .other_tip {
+      line-height: 34px;
+      span {
+        display: inline-block;
+        margin-left: 20px;
+      }
+    }
+    .el-button {
+      padding: 5px 8px;
+      border: none !important;
+    }
+    .delt_btn {
+      color: #fff;
+      background-color: #ee5747 !important;
+    }
+  }
+}
+.step_form,
+.publish_layer,
+.add_device_layer {
+  .el-tag--small {
+    height: 28px;
+    line-height: 26px;
+    padding: 0 24px;
+    margin: 18px 16px 0 0;
+    font-size: 14px;
+    // color: #3a8aeb;
+    ::v-deep .el-icon-close {
+      font-size: 16px;
+    }
+  }
+}
+.add_device_layer {
+  .el-dialog__body {
+    padding: 0 20px 30px 20px;
+  }
+}
 
-// end
\ No newline at end of file
+// 弹框右上角多按钮且关闭X出框
+.upload_layer {
+  .el-dialog__headerbtn {
+    right: -60px;
+    .el-dialog__close {
+      color: #fff;
+      font-size: 26px;
+    }
+  }
+  .upload_list_right {
+    position: absolute;
+    right: 24px;
+    top: 24px;
+    display: flex;
+    font-size: 14px;
+    font-weight: bold;
+    color: #3a8aeb;
+    .upload_return {
+      margin-left: 16px;
+      cursor: pointer;
+    }
+  }
+}
+// end
diff --git a/src/views/immediateRelease/index.vue b/src/views/immediateRelease/index.vue
index 8317ffa..6ad89a6 100644
--- a/src/views/immediateRelease/index.vue
+++ b/src/views/immediateRelease/index.vue
@@ -1,99 +1,476 @@
 <template>
   <div class="app-container">
-    <el-row class="in_release_item" type="flex" justify="space-between">
-      <el-col :span="3" class="item_title">创建即时发布</el-col>
-      <el-col :span="18">
-        <div class="input_wrap">
-          <span class="input_label">名称</span>
-          <el-input
-            v-model="form.name"
-            placeholder="即时发布 2022-1-1"
-            class="input_name"
-          />
+    <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">创建即时发布</el-col>
+        <el-col :span="18">
+          <div class="input_wrap">
+            <span class="input_label">名称</span>
+            <el-input
+              v-model="form.name"
+              placeholder="即时发布 2022-1-1"
+              class="input_name"
+            />
+          </div>
+        </el-col>
+        <el-col :span="4" class="release_right">
+          <el-button
+            round
+            class="release_btn"
+            :loading="crud.status.cu === 2"
+            type="primary"
+            @click="crud.submitCU"
+          >发布</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-model="form.date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+          </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>
+          <div class="step_select_list">
+            <div class="step_upload"></div>
+            <draggable
+              v-model="listData"
+              class="drag_list"
+              @end="dragEnd"
+            >
+              <div
+                v-for="(item, index) in listData"
+                :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="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="upload_layer">
+      <el-dialog
+        title="请选择播放内容"
+        :close-on-click-modal="false"
+        :visible.sync="listEditVisible"
+        width="800px"
+      >
+        <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>
-      </el-col>
-      <el-col :span="4" class="release_right">
-        <el-button round class="release_btn">发布</el-button>
-        <el-button round type="primary">关闭</el-button>
-      </el-col>
-    </el-row>
+        <div class="upload_list_right">
+          <div class="save_btn">保存</div>
+          <div class="upload_return">取消</div>
+        </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 crudDept from '@/api/system/dept'
+import draggable from 'vuedraggable'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 const defaultForm = {
-  name: ''
+  name: '',
+  date: [],
+  isTop: null,
+  deviceSelect: ''
 }
 export default {
   name: 'ImmediateRelease',
+  components: {
+    draggable
+  },
   cruds() {
-    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
+    return CRUD({
+      title: '部门',
+      url: 'api/dept',
+      crudMethod: { ...crudDept }
+    })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
-
+      selectDeviceVisible: false,
+      listEditVisible: false,
+      deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
+      deviceTags: [],
+      listData: [
+        {
+          id: '1',
+          name: '1',
+          type: 'JPG',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: ''
+        },
+        {
+          id: '2',
+          name: '2',
+          type: 'vedio',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: '03:00'
+        },
+        {
+          id: '3',
+          name: '3',
+          type: 'vedio',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: '03:00'
+        },
+        {
+          id: '4',
+          name: '4',
+          type: 'vedio',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: '03:00'
+        },
+        {
+          id: '5',
+          name: '5',
+          type: 'audio',
+          coverImg: '',
+          time: '01:20'
+        }
+      ],
+      contentIds: [],
+      selectedData: []
     }
   },
   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.listData.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)
+      }
+    },
+    addDeviceTag() {
+      this.selectDeviceVisible = true
+    },
+    tagHandle(tag) {
+      console.log(tag)
+      this.deviceTags.push(tag)
+    },
+    handleClose(tag) {
+      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
+      console.log(this.deviceTags)
+    },
+    clearDevice() {
+      this.deviceTags = []
+    }
   }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss">
-.app-container{
-    background: none;
-    padding: 0;
+.app-container {
+  background: none;
+  padding: 0;
 }
 
-.in_release_item{
-    padding: 16px 24px;
+.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;
-    background: #fff;
-    border-radius: 6px;
-    .item_title{
-        font-size: 16px;
-        font-weight: bold;
-        color: #3a8aeb;
+    border-radius: 34px;
+    .input_label {
+      &::after {
+        content: "|";
+        padding-left: 8px;
+        color: #ccc;
+      }
     }
-    .input_wrap{
-        display: flex;
-        width: 282px;
-        height: 34px;
-        padding: 0 24px;
-        font-size: 14px;
+    .input_name {
+      width: 194px;
+      .el-input__inner {
+        border: none;
         background: #f5f6fa;
-        line-height: 34px;
-        border-radius: 34px;
-        .input_label{
-            &::after{
-                content: "|";
-                padding-left: 8px;
-                color: #ccc;
-            }
-        }
-        .input_name{
-            width: 194px;
-            .el-input__inner{
-                border: none;
-                background: #f5f6fa;
-            }
-        }
+      }
     }
+  }
 
-    .release_right{
-        .el-button {
-            font-size: 14px;
-            padding: 8px 24px;
-            border: none !important;
-        }
-        .release_btn {
-            color: #fff;
-            background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
-        }
+  .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;
+}
+.step_select{
+  display: flex;
+  font-size: 14px;
+  margin-bottom: 20px;
+  div{
+    margin-right: 30px;
+  }
+}
+.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;
+}
+.edit_material{
+  padding: 12px 0;
+  border-bottom: 1px solid #f2f6fd;
+  .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: 0;
+      left: 0;
+      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;
+      }
+    }
+  }
 }
+
 </style>
diff --git a/src/views/materialContent/materialList/index.vue b/src/views/materialContent/materialList/index.vue
index 1c5243e..dd0a818 100644
--- a/src/views/materialContent/materialList/index.vue
+++ b/src/views/materialContent/materialList/index.vue
@@ -482,28 +482,6 @@ export default {
   width: 128px;
   height: 120px;
 }
-.upload_layer {
-  ::v-deep .el-dialog__headerbtn {
-    right: -60px;
-    .el-dialog__close {
-      color: #fff;
-      font-size: 26px;
-    }
-  }
-  .upload_list_right {
-    position: absolute;
-    right: 24px;
-    top: 24px;
-    display: flex;
-    font-size: 14px;
-    font-weight: bold;
-    color: #3a8aeb;
-    .upload_return {
-      margin-left: 16px;
-      cursor: pointer;
-    }
-  }
-}
 
 .multi_handle {
   position: fixed;
diff --git a/src/views/publishContent/publishList/index.vue b/src/views/publishContent/publishList/index.vue
index 7617fd1..0a5c770 100644
--- a/src/views/publishContent/publishList/index.vue
+++ b/src/views/publishContent/publishList/index.vue
@@ -22,19 +22,26 @@
           <el-table-column label="发布时间" align="center" prop="date" />
           <el-table-column label="发布类型" align="center" prop="type">
             <template slot-scope="scope">
-              <div>{{ scope.row.type ? '定时发布' : '即时发布' }}</div>
+              <div>{{ scope.row.type ? "定时发布" : "即时发布" }}</div>
             </template>
           </el-table-column>
           <el-table-column label="发布人" align="center" prop="user" />
           <el-table-column label="状态" align="center" prop="enabled">
             <template slot-scope="scope">
-              <div :class="{ 'stop_txt': scope.row.enabled }">{{ scope.row.enabled ? '发布中' : '停止' }}</div>
+              <div :class="{ stop_txt: scope.row.enabled }">
+                {{ scope.row.enabled ? "发布中" : "停止" }}
+              </div>
             </template>
           </el-table-column>
-          <el-table-column prop="device" align="center" label="发布设备" width="300px">
+          <el-table-column
+            prop="device"
+            align="center"
+            label="发布设备"
+            width="300px"
+          >
             <template slot-scope="scope">
               <div>
-                {{ scope.row.device ? '' : '全部设备' }}
+                {{ scope.row.device ? "" : "全部设备" }}
                 <div class="tag_list">
                   <el-tag
                     v-for="tag in scope.row.deviceData"
@@ -45,13 +52,18 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="220px" align="center" fixed="right">
+          <el-table-column
+            label="操作"
+            width="220px"
+            align="center"
+            fixed="right"
+          >
             <template slot-scope="scope">
               <el-button
                 type="primary"
-                :class="['top_btn', { 'top_btn_active': scope.row.isTop }]"
+                :class="['top_btn', { top_btn_active: scope.row.isTop }]"
                 @click="isTophandle(scope.$index, scope.row)"
-              >{{ scope.row.isTop ? '取消' : '置顶' }}</el-button>
+              >{{ scope.row.isTop ? "取消" : "置顶" }}</el-button>
               <el-button
                 type="primary"
                 class="edit_btn"
@@ -59,9 +71,9 @@
               >编辑</el-button>
               <el-button
                 type="primary"
-                :class="['start_btn', { 'stop_btn': scope.row.enabled }]"
+                :class="['start_btn', { stop_btn: scope.row.enabled }]"
                 @click="isStopHandle(scope.$index, scope.row)"
-              >{{ scope.row.enabled ? '停止' : '恢复' }}</el-button>
+              >{{ scope.row.enabled ? "停止" : "恢复" }}</el-button>
               <el-button type="info" class="delt_btn">删除</el-button>
             </template>
           </el-table-column>
@@ -84,20 +96,20 @@
             label="发布名称"
             prop="name"
             :rules="[
-              { required: true, message: '请输入发布名称', trigger: '' }
+              { required: true, message: '请输入发布名称', trigger: '' },
             ]"
           >
-            <el-input v-model="form.name" style="width: 674px;" />
+            <el-input v-model="form.name" style="width: 674px" />
           </el-form-item>
           <el-form-item
             label="发布时间"
             prop="date"
             :rules="[
-              { required: true, message: '请选择发布时间', trigger: 'change' }
+              { required: true, message: '请选择发布时间', trigger: 'change' },
             ]"
           >
             <el-date-picker
-              v-if="isTypeDate===0"
+              v-if="isTypeDate === 0"
               v-model="form.date"
               type="date"
               placeholder="选择日期"
@@ -115,8 +127,12 @@
             <el-upload action="#" list-type="picture-card" :auto-upload="false">
               <!-- <i slot="default" class="el-icon-plus"></i> -->
               <img src="@/assets/images/t-sc.png" alt />
-              <div slot="file" slot-scope="{file}">
-                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+              <div slot="file" slot-scope="{ file }">
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="file.url"
+                  alt
+                />
                 <!-- <span class="el-upload-list__item-actions">
                   <span
                     class="el-upload-list__item-preview"
@@ -154,15 +170,34 @@
           >
             <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
+                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">
+          <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="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-button
+                  round
+                  class="delt_btn"
+                  @click="clearDevice()"
+                >清空</el-button>
               </el-col>
             </el-row>
             <el-tag
@@ -179,7 +214,12 @@
           </div>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
+          <el-button
+            :loading="crud.status.cu === 2"
+            type="primary"
+            round
+            @click="crud.submitCU"
+          >保存</el-button>
           <el-button round @click="crud.cancelCU">关闭</el-button>
         </div>
       </el-dialog>
@@ -222,7 +262,11 @@ export default {
   name: 'PublishList',
   components: { pagination },
   cruds() {
-    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
+    return CRUD({
+      title: '部门',
+      url: 'api/dept',
+      crudMethod: { ...crudDept }
+    })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
@@ -320,95 +364,18 @@ export default {
     color: #3a8aeb;
   }
 }
-::v-deep .el-range-separator{
-    width: 24px;
-}
-::v-deep .el-radio-group{
-  display: block;
-  .el-radio{
-    position: relative;
-    line-height: 40px;
-    .radio_tip{
-      position: absolute;
-      right: -45px;
-      top: 0;
-      display: block;
-      width: 42px;
-      height: 21px;
-      line-height: 21px;
-      font-size: 12px;
-      text-align: center;
-      color: #fff;
-      background: url(~@/assets/images/an-tj.png) no-repeat;
-      background-size: 42px 21px;
-    }
-  }
-}
-.select_all_tip{
-  width: 336px;
-  height: 32px;
-  line-height: 32px;
-  margin: -20px 0 0 100px;
-  padding: 0 14px;
-  font-size: 12px;
-  color: #999;
-  background: #fff;
-  box-shadow: 0 0 5px rgba(0,0,0,.14);
-}
-.select_other{
-  width: 600px;
-  margin: -20px 0 0 100px;
-  padding: 18px 23px;
-  background: #f8f8f8;
-  border: 1px solid #dcdde3;
-  border-radius: 4px;
-  .other_tip{
-    line-height: 24px;
-    span{
-      display: inline-block;
-      margin-left: 20px;
+
+.publish_table {
+  .tag_list {
+    text-align: left;
+    .el-tag {
+      height: 26px;
+      line-height: 26px;
+      margin: 5px 10px 5px 0;
+      background: #cbe3ff;
+      color: #3a8aeb;
+      border: none;
     }
   }
-  .el-button {
-    padding: 5px 8px;
-    border: none !important;
-  }
-  .delt_btn {
-    color: #fff;
-    background-color: #ee5747 !important;
-  }
-}
-.publish_layer,
-.add_device_layer{
-    .el-tag--small{
-        height: 28px;
-        line-height: 26px;
-        padding: 0 24px;
-        margin: 18px 16px 0 0;
-        font-size: 14px;
-        // color: #3a8aeb;
-        ::v-deep .el-icon-close{
-            font-size: 16px;
-        }
-    }
 }
-.add_device_layer{
-    ::v-deep .el-dialog__body{
-        padding: 0 20px 30px 20px;
-    }
-}
-.publish_table{
-    .tag_list{
-        text-align: left;
-        .el-tag {
-            height: 26px;
-            line-height: 26px;
-            margin: 5px 10px 5px 0;
-            background: #cbe3ff;
-            color: #3a8aeb;
-            border: none;
-        }
-    }
-}
-
 </style>