heyujie
2021-09-27 d08244cedede6fc7f74821363dec5a88873e6060
src/pages/settings/views/generalSettings.vue
@@ -123,7 +123,9 @@
          <div class="save-btn" @click="submitAlarm">保存</div>
        </div>
        <div class="lang" v-if="activePage == 1">
          <div class="bar title voice-title" style="border: 2px solid #fff;">事件声音</div>
          <div class="bar title voice-title" style="border: 2px solid #fff">
            事件声音
          </div>
          <div class="bar-group">
            <div
              class="bar"
@@ -137,9 +139,15 @@
              </div>
              <div class="btns">
                <span @click="togglePlay(item, i)">
                   <span class="iconfont" v-if="!item.isPlay" style="cursor: pointer;">{{playSpan}}</span>
                   <span class="iconfont" v-else style="cursor: pointer;">{{playSpan2}}</span>
                  <span
                    class="iconfont"
                    v-if="!item.isPlay"
                    style="cursor: pointer"
                    >{{ playSpan }}</span
                  >
                  <span class="iconfont" v-else style="cursor: pointer">{{
                    playSpan2
                  }}</span>
<!-- 
                  <i
                    v-if="!item.isPlay"
@@ -150,7 +158,7 @@
                </span>
                <span
                  class="icon iconfont del"
                  style="cursor: pointer;"
                  style="cursor: pointer"
                  @click="removeSound(item)"
                  >{{delspan}}</span
                >
@@ -165,11 +173,16 @@
              :http-request="uploadSound"
              :show-file-list="false"
            >
             <div class="info">请将声音事件文件拖拽到此处,或<span class="info-click" >点击上传</span></div>
             <div class="des" v-if="showUpload" @click.stop>仅支持mp3、wav等格式</div>
              <div class="info">
                请将声音事件文件拖拽到此处,或<span class="info-click"
                  >点击上传</span
                >
              </div>
              <div class="des" v-if="showUpload" @click.stop>
                仅支持mp3、wav等格式
              </div>
            </el-upload>          
          </div>
          <div class="add-group">
            <div class="add-btn">
@@ -254,7 +267,7 @@
      playSpan:"\ue6e8",
      playSpan2:"\ue6e8",
      delspan:"\ue6e8",
      warnSpn:"\ue6e8",
      warnSpn: "\ue71c",
      curPlayingIndex: null,
      showUpload: false,
      activeIcons: 0,
@@ -431,16 +444,23 @@
    },
    removeSound(item) {
      const h = this.$createElement;
      const icon =
      this.$msgbox({
          message: h('div', {style: 'display: flex;  flex-direction: column; justify-content: center; align-items: center;'}, [
            h('span',{class:'iconfont warn-icon'},`${this.warnSpn}`),
            h('span', {class:'warn-title'}, '删除事件声音 '),
            h('span', {class:'warn-dec'}, '您是否确认删除事件声音?')
          ]),
      const icon = this.$msgbox({
        title: "",
        message: h(
          "div",
          {
            style:
              "display: flex;  flex-direction: column; justify-content: center; align-items: center;",
          },
          [
            h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),
            h("span", { class: "warn-title" }, "删除事件声音 "),
            h("span", { class: "warn-dec" }, "您是否确认删除事件声音?"),
          ]
        ),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        }).then(() => {
        deleteSound({
          id: item.id,
@@ -465,8 +485,7 @@
      this.$refs["soundBar"].forEach((x) => {
        x.style = "border: 2px solid #FFF;";
      });
      this.$refs["soundBar"][i].style =
        "border: 2px solid #4E94FF;";
      this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;";
    },
    submitAlarm() {
      saveAlarmConfig({
@@ -483,15 +502,14 @@
      });
    },
    colorCard(color) {
      document.documentElement.style.setProperty('--colorCard',`${color}`)
      localStorage.setItem('--colorCard',`${color}`)
    }
      document.documentElement.style.setProperty("--colorCard", `${color}`);
      localStorage.setItem("--colorCard", `${color}`);
    },
  },
};
</script>
<style scoped lang="scss">
.all {
  width: 100%;
}
@@ -510,13 +528,10 @@
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 24px 10px;
    border-right: 4px solid #F2F2F7;
    background-color: #FBFAFF;
    border-right: 4px solid #f2f2f7;
    background-color: #fbfaff;
    .menu-item {
      height: 56px;
      margin-bottom: 4px;
      border-radius: 8px;
@@ -632,10 +647,10 @@
            color: #409eff;
          } */
          span {
            color: #333
            color: #333;
          }
          .del:hover {
          color:#FC4958;
            color: #fc4958;
          }
        }
        .desc {
@@ -835,7 +850,7 @@
left: 302px;
top: 279px;
background: #FFFFFF;
  background: #ffffff;
border-radius: 8px;
}
@@ -844,7 +859,7 @@
left: 2px !important;
width: 452px;
height: 150px;
background: #FFFFFF;
  background: #ffffff;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
@@ -858,19 +873,16 @@
margin-top:30px ;
}
.info {
font-weight: bold;
font-size: 14px;
color: #828282;
}
.info-click {
  color: #4E94FF;
    color: #4e94ff;
  text-decoration: underline;
}
}
.des {
@@ -878,34 +890,54 @@
      top: 78px;
    left: 109px;
  z-index: 999;
  color: #4F4F4F;
  color: #4f4f4f;
  font-weight: bold;
  font-size: 12px;
}
</style>
<style lang="scss">
.el-message-box {
  padding-bottom: 20px !important;
  border-radius: 8px !important;
  .el-message-box__content {
    color: #333333;
    padding: 0;
    font-size: 14px;
  }
  .warn-icon {
    color:rgba(254, 109, 104, 1) ;
    font-size: 50px;
    margin-top:26px ;
    color: #fe6d68;
    font-size: 40px;
    margin-top: 11px;
  }
  .warn-title {
    font-weight: bold;
    font-size: 16px;
    margin: 5px;
    margin: 6px;
    line-height: 22px;
  }
  .warn-dec {
    font-weight: bold;
    font-size: 14px;
    color:  #828282;
    line-height: 20px;
  }
  .el-message-box__headerbtn {
    top: 12px;
  }
  .el-message-box__headerbtn .el-message-box__close {
    color: #333333;
    font-weight: bold;
  }
    .el-message-box__btns {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-top: 20px;
    .el-button:focus,
    .el-button:hover {
      background-color: none;
      border: none;
    }
    button {
      width: 175px;
      height: 40px;
@@ -916,13 +948,14 @@
      }
    }
    button:first-child {
      background-color: #E0E0E0;
      background-color: #e0e0e0;
      span {
         color: #333333;
      }
    }
    button:last-child {
      background-color: #4E94FF !important;
      background-color: #4e94ff !important;
      border-color: #4e94ff !important;
      span { 
         color: #fff;
      }