修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/settings/views/generalSettings.vue

@@ -1,6 +1,6 @@
<template>

  <div class="all">

    <div class="general-set">

  <div class="all" ref="curPage">

    <div class="general-seting">

      <div class="general-center" ref="left">

        <div

          class="menu-item"

@@ -9,95 +9,70 @@
          v-for="(item, i) in menuArr"

          :key="i"

        >

          <span class="iconfont">{{ item.icon }}</span>

          <span class="iconfont" :style="`font-size:${item.size}px;`">{{

            item.icon

          }}</span>

          <span class="title">{{ item.name }}</span>

        </div>

      </div>

      <div class="cluster-right">

        <div class="lang" v-if="activePage == 0">

          <div class="bar">

            <span class="name">设备ID</span>

            <span class="desc">{{ deviceInfo.server_id }}</span>

          </div>

          <div class="bar">

            <span class="name">设备型号</span>

            <span class="desc">{{ deviceInfo.deviceModel }}</span>

          </div>

          <div class="bar">

            <span class="name">设备类型</span>

            <span class="desc">{{ deviceInfo.deviceDesc }}</span>

          </div>

          <div class="bar">

            <span class="name">通道个数</span>

            <span class="desc">{{ deviceInfo.channelCount }}</span>

          </div>

          <div class="bar">

            <span class="name">主控版本</span>

            <span class="desc">{{ deviceInfo.masterVersion }}</span>

          </div>

          <div class="bar">

            <span class="name">web版本</span>

            <span class="desc">{{ deviceInfo.webVersion }}</span>

          </div>

          <div class="bar">

            <span class="name">硬盘信息</span>

            <span class="desc">{{ deviceInfo.disks }}</span>

          </div>

          <div class="bar">

            <span class="name">CPU</span>

            <span class="desc">{{ deviceInfo.cpu }}</span>

          </div>

          <div class="bar">

            <span class="name">内存</span>

            <span class="desc">{{ deviceInfo.memory }}</span>

          </div>

          <div class="bar">

            <span class="name">运行时间</span>

            <span class="desc">{{ deviceInfo.runningTime }}</span>

          </div>

        </div>

        <div class="lang" v-if="activePage == 1">

      <div class="general-right">

        <div class="lang videoTime" v-if="activePage == 0">

          <div class="min-dur">

            <div class="title">视频截取最短时长</div>

            <div class="title">抓拍前录像时长</div>

            <div class="entity">

              <div class="sec">{{ alarmConf.min_video_len }}s</div>

              <div class="sec">0s</div>

              <div class="block">

                <el-slider

                  v-model="alarmConf.min_video_len"

                  v-model="fakeObj.min"

                  id="cut_min_duration"

                  :min="0"

                  :max="100"

                  :show-tooltip="false"

                  :step="5 / 1.2"

                  @input="min_len = min_video_len"

                  show-stops

                  :show-tooltip="true"

                  tooltip-class="toolClass"

                  :format-tooltip="formatTooltip"

                ></el-slider>

              </div>

              <div class="sec" style="margin: 0 20px">120s</div>

              <el-input-number

                v-model="alarmConf.min_video_len"

                controls-position="right"

                v-model="min_len"

                @change="fakeObj.min = +(min_len / 1.2)"

                :min="0"

                :max="100"

                :step="5"

                :max="120"

                step-strictly

                size="small"

              ></el-input-number

              >&nbsp;s

              >s

            </div>

          </div>

          <div class="min-dur">

            <div class="title">视频截取最长时长</div>

            <div class="title">抓拍后录像时长</div>

            <div class="entity">

              <div class="sec">{{ alarmConf.max_video_len }}s</div>

              <div class="sec">0s</div>

              <div class="block">

                <el-slider

                  v-model="alarmConf.max_video_len"

                  v-model="fakeObj.max"

                  id="cut_max_duration"

                  :min="0"

                  @input="max_len = max_video_len"

                  :max="100"

                  :show-tooltip="false"

                  :step="5 / 1.2"

                  show-stops

                  :format-tooltip="formatTooltip"

                  :show-tooltip="true"

                ></el-slider>

              </div>

              <div class="sec" style="margin: 0 20px">120s</div>

              <el-input-number

                v-model="alarmConf.max_video_len"

                controls-position="right"

                v-model="max_len"

                @change="fakeObj.max = +(max_len / 1.2)"

                :min="0"

                :max="100"

                :step="5"

                step-strictly

                :max="120"

                size="small"

              ></el-input-number

              >&nbsp;s

@@ -106,87 +81,173 @@


          <div class="save-btn" @click="submitAlarm">保存</div>

        </div>

        <div class="lang" v-if="activePage == 2">

          <div class="title">事件声音</div>

        <div class="lang" v-if="activePage == 1">

          <div class="bar title voice-title" style="border: 2px solid #fff">

            事件声音

          </div>

          <div class="bar-group">

             <div

            class="bar"

            v-for="(item, i) in soundList"

            :key="i"

            @click="clickSound(item, i)"

            ref="soundBar"

          >

            <div class="left-part">

              <span class="icon iconfont" style="margin-right:12px;">&#xe6f5;</span>

              <span class="name">{{ item.name }}</span>

            </div>

            <div class="btns">

              <span @click="togglePlay(item, i)">

                <i v-if="!item.isPlay" class="el-icon-video-play" style=""></i>

                <i v-else class="el-icon-video-pause"></i>

              </span>

              <span class="icon iconfont" style="cursor:pointer;" @click="removeSound(item)"

                >&#xe6cb;</span

              >

            <div

              class="general-bar"

              v-for="(item, i) in soundList"

              :key="i"

              @click="clickSound(item, i)"

              ref="soundBar"

            >

              <div class="left-part">

                <span class="name">{{ item.name }}</span>

              </div>

              <div class="sound-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> -->



                  <img

                    v-else

                    src="/images/settings/暂停.png"

                    alt=""

                    style="

                      width: 16px;

                      hight: 16px;

                      cursor: pointer;

                      margin-top: 15px;

                    "

                  />

                  <!-- 
                  <i

                    v-if="!item.isPlay"

                    class="el-icon-video-play"

                    style=""

                  ></i>

                  <i v-else class="el-icon-video-pause"></i> -->

                </span>

                <span

                  class="icon iconfont del"

                  style="cursor: pointer"

                  @click="removeSound(item)"

                  >{{ delspan }}</span

                >

              </div>

            </div>

          </div>

          </div>

          <div class="add-group">

          <div v-if="showUpload" @click.stop>

            <el-upload

              class="upload-demo"

              drag

              action="https://jsonplaceholder.typicode.com/posts/"

              action=""

              :http-request="uploadSound"

              v-show="showUpload"

              :show-file-list="false"

              style="bottom: -94px; left: calc(50% - 217px)"

            >

              <i class="el-icon-upload"></i>

              <div class="el-upload__text">

                事件声音文件拖到此处，或

                <em>点击上传</em>

                <br />仅支持mp3/wma等格式

              <div class="info">

                请将声音事件文件拖拽到此处，或<span class="info-click"

                  >点击上传</span

                >

              </div>

              <div class="des" v-if="showUpload" @click.stop>

                仅支持mp3、wav等格式

              </div>

            </el-upload>

            <div v-show="!showUpload" class="upload-demo"></div>

          </div>



          <div class="add-group">

            <div class="add-btn">

              <span class="icon iconfont" @click="showUpload = !showUpload"

              <span class="icon iconfont" @click.stop="showUpload = !showUpload"

                >&#xe646;</span

              >

            </div>

          </div>

        </div>



        <div class="lang" v-if="activePage == 3">

          <div class="title">图标主题</div>

        <div class="self-setting" v-if="activePage == 2">

          <div class="top-title">颜色主题</div>

          <div class="color-bar">

            <div

              v-for="(item, index) in colorList"

              :key="index"

              style="border: none"

            >

              <div

                class="color-option"

                v-if="universalColor != index"

                :style="{ cursor: 'pointer', backgroundColor: item.color }"

                @click="colorCard(item.color, index)"

              />



          <div class="min-dur" style="cursor: pointer" @click="selectIcons(0)">

            <div class="title">扁平写实图标</div>

              <div

                class="color-option color-option-active"

                v-else

                :style="{

                  cursor: 'pointer',

                  border: `2px solid ${item.color}`,

                }"

                @click="colorCard(item.color, index)"

              >

                <div

                  :style="{ backgroundColor: item.color }"

                  class="color-option-content"

                ></div>

              </div>

            </div>

          </div>

          <div class="top-title">图标主题</div>

          <div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)">

            <div class="bar-title">

              <span class="title">面性风格</span>

              <span

                class="icon iconfont"

                :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"

                >&#xe6f1;</span

              >

            </div>

            <div class="entity">

              <div

                class="entity-img"

                v-for="(item, i) in realIconList"

                :key="i"

              ></div>

              >

                <img :src="item.url" alt="" />

              </div>

            </div>

          </div>

          <div class="min-dur" style="cursor: pointer" @click="selectIcons(1)">

            <div class="title">扁平化图标</div>

          <div class="icon-bar" style="cursor: pointer" @click="selectIcons(1)">

            <div class="bar-title">

              <span class="title">简约风格</span>

              <span

                class="icon iconfont"

                :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"

                >&#xe6f1;</span

              >

            </div>

            <div class="entity">

              <div

                class="entity-img"

                v-for="(item, i) in flatIconList"

                :key="i"

              ></div>

              >

                <img :src="item.url" alt="" />

              </div>

            </div>

          </div>

          <div class="title">桌面背景主题</div>

          <div class="min-dur" style="padding-top: 25px">



          <div class="top-title">桌面背景主题</div>

          <div class="bg-bar">

            <div class="bg-list">

              <div

                class="bg-img"

                v-for="(item, i) in tableBGList"

                class="bg-img"

                :class="activeBg == i ? 'bg-list-active' : ''"

                :key="i"

              ></div>

                @click="pickBg(item, i)"

              >

                <img :src="item.url" alt="" />

              </div>

            </div>

          </div>

        </div>

@@ -198,24 +259,27 @@
<script>

import { saveAlarmConfig, getDevInfo } from "@/api/system";

import { uploadSound, getSoundList, deleteSound } from "@/api/event";

import config from "../../../../package.json";



import { updateUser } from "@/api/user";

export default {

  data() {

    return {

      inWifiDetail: false,

      playSpan: "\ue75e",

      playSpan2: "\ue75f",

      delspan: "\ue715",

      warnSpn: "\ue71c",

      curPlayingIndex: null,

      inWireDetail: false,

      showUpload: false,

      alarmConf: {

        min_video_len: 10,

        max_video_len: 15,

      activeIcons: 0,

      min_len: 0,

      max_len: 0,

      fakeObj: {

        min: 0,

        max: 0,

      },

      menuArr: [

        { name: "设备信息", icon: "\ue933" },

        { name: "事件录像时长", icon: "\ue6f3" },

        { name: "事件声音", icon: "\ue6e1" },

        { name: "个性化设置", icon: "\ue756" },

        { name: "事件录像时长", icon: "\ue74f", size: 20 },

        { name: "事件声音", icon: "\ueb5e", size: 16 },

        { name: "个性化设置", icon: "\ue750", size: 18 },

      ],

      soundList: [],

      activePage: 0,

@@ -231,28 +295,114 @@
        webVersion: "",

        disks: "",

        memory: "",

        activeBg: 0,

      },

      isPlay: false,

      realIconList: [{}, {}, {}],

      flatIconList: [{}, {}, {}],

      tableBGList: [{}, {}, {}],

      realIconList: [

        { url: "/images/settings/面性图标/1仰卧检测.png" },

        { url: "/images/settings/面性图标/2个体静止.png" },

        { url: "/images/settings/面性图标/3安全警戒.png" },

        { url: "/images/settings/面性图标/4安全帽检测.png" },

        { url: "/images/settings/面性图标/5奔跑.png" },

        { url: "/images/settings/面性图标/6车辆检测.png" },

        { url: "/images/settings/面性图标/7抽烟.png" },

      ],

      flatIconList: [

        { url: "/images/settings/简约图标/1仰卧检测.png" },

        { url: "/images/settings/简约图标/2个体静止.png" },

        { url: "/images/settings/简约图标/3安全警戒.png" },

        { url: "/images/settings/简约图标/4安全帽检测.png" },

        { url: "/images/settings/简约图标/5奔跑.png" },

        { url: "/images/settings/简约图标/6车辆检测.png" },

        { url: "/images/settings/简约图标/7抽烟.png" },

      ],

      tableBGList: [

        { name: "background", url: "/images/desktop/background.png" },

        { name: "message", url: "/images/desktop/message.png" },

        { name: "weather", url: "/images/desktop/weather.png" },

      ],

      universalColor: "",

      colorList: [

        { name: 1, color: "#FC6B9E" },

        { name: 2, color: "#F38F56" },

        { name: 3, color: "#FDD33A" },

        { name: 4, color: "#53D999" },

        { name: 5, color: "#21CDB2" },

        { name: 6, color: "#61E2EB" },

        { name: 7, color: "#4E94FF" },

        { name: 8, color: "#8E8CD8" },

        { name: 9, color: "#4C4A48" },

      ],

    };

  },

  mounted() {

    this.getDeviceInfo();

    this.getSounds();

    let _this = this;

    this.eventAudio.addEventListener("ended", () => {

    const url = this.curUser.backgroundpic;

    this.activeIcons = this.curUser.useIconType - 1;

    this.universalColor = this.colorList.findIndex((x) => {

      return x.color == localStorage.getItem("--colorCard");

    });

    if (url) {

      this.activeBg = this.tableBGList.findIndex((x) => {

        return x.url == url;

      });

    } else {

      this.activeBg = 0;

    }



    this.eventAudio.addEventListener("ended", this.endedHandle, false);

    this.$refs.curPage.addEventListener("click", this.clickHandle, false);

  },

  beforeDestroy() {

    this.eventAudio.removeEventListener("ended", this.endedHandle, false);

    this.$refs.curPage.removeEventListener("click", this.clickHandle, false);

  },

  computed: {

    min_video_len() {

      return Math.round(this.fakeObj.min * 1.2);

    },

    max_video_len() {

      return Math.round(this.fakeObj.max * 1.2);

    },

    curUser() {

      return JSON.parse(sessionStorage.getItem("userInfo"));

    },

  },

  methods: {

    endedHandle() {

      let _this = this;

      if (_this.curPlayingIndex !== null && _this.soundList.length) {

        _this.soundList[_this.curPlayingIndex].isPlay = false;

        _this.curPlayingIndex = null;

      }

    });

  },

  beforeDestroy() {},

  methods: {

    },

    clickHandle() {

      let _this = this;

      if (this.showUpload) {

        this.showUpload = false;

      }

    },

    formatTooltip(v) {

      return Math.round(v * 1.2);

    },

    pickBg(item, i) {

      this.activeBg = i;

      let message = "changeBackground?" + item.name;

      window.parent.postMessage({ msg: message }, "*");

      updateUser({

        id: this.curUser.id,

        backgroundpic: item.url,

      }).then((res) => {

        if (res.success) {

          sessionStorage.setItem("userInfo", JSON.stringify(res.data));

          debugger;

          this.$message.success(res.msg);

        }

      });

      this.$forceUpdate();

    },

    togglePlay(item, i) {

      debugger;

      if (this.curPlayingIndex !== null) {

        this.eventAudio.pause();

        this.soundList[this.curPlayingIndex].isPlay = false;

@@ -281,26 +431,23 @@
        this.deviceInfo.deviceDesc = basic.deviceDesc;

        this.deviceInfo.masterVersion = basic.masterVersion;

        this.deviceInfo.channelCount = basic.channelCount;

        this.deviceInfo.webVersion = "V" + config.version;

        this.deviceInfo.webVersion = "V2.0.0";

        this.deviceInfo.disks = "( " + info.disk + ") ";

        this.deviceInfo.memory =

          (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";

        this.alarmConf.min_video_len = basic.min_video_len;

        this.alarmConf.max_video_len = basic.max_video_len;

        this.fakeObj.min = basic.min_video_len / 1.2;

        this.fakeObj.max = basic.max_video_len / 1.2;

      });

    },



    getSounds() {

      getSoundList()

        .then((res) => {

          if (res.success) {

            this.soundList = res.data;

            this.soundList.forEach((x) => {

              this.$set(x, "isPlay", false);

            });

          }

        })

        .catch((e) => console.log(e));

      getSoundList().then((res) => {

        if (res.success) {

          this.soundList = res.data;

          this.soundList.forEach((x) => {

            this.$set(x, "isPlay", false);

          });

        }

      });

    },

    secondsFormat(s) {

      var day = (s / (24 * 3600)) | 0;

@@ -312,27 +459,53 @@
    uploadSound(params) {

      let param = new FormData();

      param.append("file", params.file);

      uploadSound(param).then((res) => {

        console.log(res.data);

        this.getSounds();

      });

      uploadSound(param).then(

        (res) => {

          this.$message.success("上传成功");

          this.showUpload = false;

          this.getSounds();

        },

        (err) => {

          this.$message.error(err.msg);

        }

      );

    },

    openRight(i) {

      this.activePage = i;

    },

    wifiControl(val) {},

    checkWifi() {

      this.inWifiDetail = true;

    selectIcons(i) {

      this.activeIcons = i;

      updateUser({

        id: this.curUser.id,

        iconType: i + 1,

      }).then((res) => {

        if (res.success) {

          window.parent.postMessage({ msg: "AppUpdate" }, "*");

          sessionStorage.setItem("userInfo", JSON.stringify(res.data));

          debugger;

          this.$message.success(res.msg);

        }

      });

    },

    checkWire(item) {

      this.inWireDetail = true;

    },

    selectIcons(typ) {},

    removeSound(item) {

      this.$confirm("您是否确认删除事件声音", "删除事件声音", {

      const h = this.$createElement;

      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: "取消",

        type: "warning",

      }).then(() => {

        deleteSound({

          id: item.id,

@@ -355,14 +528,17 @@
    },

    clickSound(item, i) {

      this.$refs["soundBar"].forEach((x) => {

        x.style.backgroundColor = "rgba(248, 248, 248, 1)";

        x.style = "border: 2px solid #FFF;";

      });

      this.$refs["soundBar"][i].style.backgroundColor =

        "rgba(233, 233, 233, 1)";

      this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;";

    },

    submitAlarm() {

      saveAlarmConfig(this.alarmConf).then((res) => {

      saveAlarmConfig({

        min_video_len: this.min_video_len,

        max_video_len: this.max_video_len,

      }).then((res) => {

        if (res && res.success) {

          this.getDeviceInfo();

          this.$notify({

            type: "success",

            message: "保存成功",

@@ -370,66 +546,79 @@
        }

      });

    },

    colorCard(color, index) {

      this.universalColor = index;

      document.documentElement.style.setProperty("--colorCard", `${color}`);

      localStorage.setItem("--colorCard", `${color}`);

      window.parent.postMessage({ msg: "changeColor", color }, "*");

    },

  },

};

</script>

<style lang="scss">



<style scoped lang="scss">

.all {

  width: 100%;

}



.general-set {

.general-seting {

  height: 100%;

  display: flex;

  flex-direction: row;

  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .el-input__inner {

    height: 24px !important;

  }

  .general-center {

    height: 100%;

    width: 280px;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;



    padding: 10px 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    background-color: #fbfaff;

    .menu-item {

      background-color: #f8f8f8;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 10px;

      line-height: 50px;

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 14px;

      padding: 0 20px;

      font-size: 16px;

      padding-left: 15px;

      cursor: pointer;

      display: flex;

      .iconfont {

        margin-right: 12px;

        margin: 0 17px;

        font-size: 24px !important;

      }

      .title {

        font-size: 16px;

        font-weight: 700;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

      background-color: var(--colorCard) !important;

      color: white !important;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

      background-color: #f2f2f7;

    }

  }

  .cluster-right {

  .general-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    // background-color: rgba(240, 242, 245, 1);

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    // .create-new .join-exist {

    background-color: rgb(251, 250, 255);

    border-top: 4px solid #f2f2f7;



    padding: 6px 18px 10px 10px;

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk)

@@ -443,7 +632,7 @@
    .el-form-item {

      margin-bottom: 10px;

      height: 50px;

      background: #f8f8f8;

      background: #f2f2f7;

      padding: 4px 20px;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

@@ -462,6 +651,8 @@
      max-width: none !important;

    }

    .lang {

      position: relative;

      height: calc(83% - 0px);

      .title {

        height: 35px;

        line-height: 35px;

@@ -469,65 +660,69 @@
        text-align: left;

        margin-bottom: 5px;

      }

      .bar-group{

        height: 280px;

    overflow: auto;

      .bar.title.voice-title {

        justify-content: center !important;

        text-align: center;

        font-weight: 700;

        border: none;

        background: #f2f2f7;

        border-radius: 8px;

        height: 48px;

        margin-bottom: 4px;

        border: 2px solid #f2f2f7 !important;

      }

      .bar {

        height: 50px;

        background-color: rgba(248, 248, 248, 1);

        border-radius: 10px;

        line-height: 50px;

        box-sizing: border-box;

        padding: 0 30px 0 20px;

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        .left-part {

          .icon {

            color: rgba(191, 191, 191, 1);

            font-size: 16px;

            margin-right: 5px;

          }

        }

        .name {

          font-size: 15px;

        }

        .btns {

          width: 50px;

      .bar-group {

        overflow: auto;

        height: calc(100% - 100px);

        .general-bar {

          height: 48px;

          background: #f2f2f7;

          border-radius: 10px;

          line-height: 48px;

          box-sizing: border-box;

          padding: 0 20px 0 20px;

          font-weight: 700;

          display: flex;

          justify-content: space-between;

          color: rgba(191, 191, 191, 1);

          .el-icon-video-pause {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          margin-bottom: 2px;

          border: 2px solid #f2f2f7;

          margin-bottom: 4px;

          .name {

            font-size: 14px;

          }

          .el-icon-video-play {

            cursor: pointer;

            font-size: 23px;

            vertical-align: middle;

            color: #409eff;

          .sound-btns {

            width: 52px;

            display: flex;

            justify-content: space-between;

            color: rgba(191, 191, 191, 1);



            span {

              color: #333;

            }

            .del:hover {

              color: #fc4958;

            }

          }

          .desc {

            font-size: 14px;

            color: rgba(134, 134, 134, 1);

          }

        }

        .desc {

          font-size: 14px;

          color: rgba(134, 134, 134, 1);

        }

      }

      .bar:hover {

        background-color: rgba(233, 233, 233, 1);

      }



      /* .bar:hover {

        border: 2px solid #4E94FF !important;

      } */

      .add-group {

        margin-top: 20px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        margin: 54px auto;

        width: fit-content;

      }

      .upload-demo {

        height: 180px;

        transition: all .3s;

        -webkit-transition: all 0.3s;

        transition: all 0.5s;

        position: absolute;

        bottom: -40px;

        left: calc(50% - 145px);

        .el-upload-dragger {

          width: 290px;

        }

@@ -535,34 +730,36 @@
      .add-btn {

        height: 40px;

        line-height: 40px;

        margin-top: 10px;

        margin: 0 auto;

        cursor: pointer;

        width: fit-content;

        .icon {

          font-size: 32px;

          color: rgba(61, 104, 225, 1);

          font-size: 40px;

          color: var(--colorCard);

        }

      }

      .min-dur {

        box-sizing: border-box;

        padding: 0 20px;

        background-color: rgba(248, 248, 248, 1);

        background-color: #f2f2f7;

        height: 105px;

        margin-bottom: 20px;

        margin-bottom: 4px;

        border-radius: 15px;

        .title {

          color: #333;

          height: 45px;

          line-height: 45px;



          text-align: left;

          box-sizing: border-box;

          padding: 0 6px;

          font-size: 14px;

          font-size: 16px;

          font-weight: 700;

        }

      }



      .min-dur:hover {

      /* .min-dur:hover {

        background-color: rgba(233, 233, 233, 1);

      }

      } */



      .entity {

        display: flex;

@@ -572,20 +769,19 @@
        .sec {

          min-width: 30px;

          line-height: 80px;

          margin-right: 10px;

          color: rgba(120, 120, 120, 1);

          font-size: 14px;



          color: #333;

          font-size: 8px;

        }

        .block {

          flex: 1;

          margin: 0 20px 0 6px;

          margin: 0 0px 0 6px;

        }

        .el-input-number--small {

          width: 100px;

        }

        .el-input-number.is-controls-right .el-input__inner {

          padding-left: 16px;

          // padding-right: 37px;

        }

        #cut_min_duration {

          .el-slider__bar {

@@ -613,40 +809,329 @@
      }

    }

    .save-btn {

      background-color: #3d68e1;

      width: 240px;

      background-color: var(--colorCard);

      width: 180px;

      height: 40px;

      margin: 0 auto;

      border-radius: 10px;

      border-radius: 25px;

      color: #fff;

      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

      cursor: pointer;

      font-size: 16px;

      font-weight: 700;

      margin-top: 55px;

    }

  }



  .lang {

    .min-dur {

      .bg-list {

    .self-setting {

      .top-title {

        text-align: left;

        font-size: 16px;

        margin-bottom: 10px;

        font-weight: 700;

        margin-top: 20px;

      }

      /*     .icon-bar:hover {

        background-color: rgba(233, 233, 233, 1);

      } */

      .color-bar {

        display: flex;

        .bg-img {

          background-color: aquamarine;

          width: 100px;

          height: 60px;

          margin-right: 10px;

        justify-content: center;

        align-items: center;

        width: 412px;

        height: 96px;

        background-color: #fff;

        border-radius: 8px;

        padding-left: 7px;

        .color-option {

          margin-right: 12px;

          width: 30px;

          height: 30px;

          border-radius: 50%;

        }



        .color-option-active {

          box-sizing: border-box;

          margin-right: 12px;

          width: 30px;

          height: 30px;

          border-radius: 50%;

          background-color: #fff;

          padding: 4px;

          .color-option-content {

            width: 100%;

            height: 100%;

            border-radius: 50%;

          }

        }

      }

      .entity {

        display: flex;



        .entity-img {

          background-color: aquamarine;

          width: 50px;

          height: 50px;

          margin-right: 10px;

      .icon-bar {

        cursor: pointer;

        box-sizing: border-box;

        padding: 15px 13px 14px 20px;

        background: #f2f2f7;

        border-radius: 8px;

        margin-bottom: 10px;

        .bar-title {

          line-height: 20px;

          height: 20px;

          margin-bottom: 10px;

          display: flex;

          justify-content: space-between;

          .title {

            font-size: 14px;

            font-weight: 700;

          }

          .icon-active {

            font-size: 16px;

            color: var(--colorCard);

          }

          .icon-normal {

            font-size: 16px;

            color: #e0e0e0;

          }

        }

        .entity {

          display: flex;

          margin-left: 5px;

          .entity-img {

            background-color: rgba(248, 248, 248, 1);

            width: 50px;

            height: 50px;

            margin-right: 10px;

            img {

              width: 50px;

              height: 50px;

            }

          }

        }

      }

      .bg-bar {

        background-color: #f2f2f7;

        box-sizing: border-box;

        padding: 15px 25px;

        border-radius: 12px;

        margin-bottom: 12px;

        .bg-list {

          display: flex;

          .bg-img {

            margin-right: 12px;

            cursor: pointer;

            // width: 120px;

            height: 66px;

            border: 2px solid transparent;

            img {

              border-radius: 5px;

              height: 100%;

            }

          }

          /*  .bg-img:hover {

            border: 2px solid yellow;

          } */

          .bg-list-active {

            border: 2px solid var(--colorCard);

            border-radius: 8px;

          }

        }

      }

    }

  }

}

.v-modal {

  opacity: 0.35 !important;

  border-radius: 8px !important;

}



.el-message-box {

  position: absolute;

  width: 420px;

  height: 210px;

  left: 302px;

  top: 279px;



  background: #ffffff;

  border-radius: 8px;

}



.upload-demo {

  width: 452px;

  height: 150px;

  background: #ffffff;

  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

  border-radius: 8px;



  ::v-deep .el-upload-dragger {

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: visible;

    width: 340px;

    height: 72px;

    margin-top: 30px;

  }



  .info-click {

    color: var(--colorCard);

    text-decoration: underline;

  }



  .info-click {

    color: #4e94ff;

    text-decoration: underline;

  }

}



.des {

  position: absolute;

  top: 78px;

  left: 109px;

  z-index: 999;

  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: var(--colorCard);

    font-size: 40px;

    margin-top: 11px;

  }

  .warn-title {

    font-weight: bold;

    font-size: 16px;

    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: 20px;

    .el-button:focus,

    .el-button:hover {

      background-color: none;

      border: none;

    }

    button {

      width: 175px;

      height: 40px;

      border-radius: 25px;

      span {

        font-size: 16px;

        font-weight: 700;

      }

      &:hover {

        border: 1px solid var(--colorCard) !important;

      }

    }

    button:first-child {

      background-color: #e0e0e0;

      span {

        color: #333333;

      }

    }

    button:last-child {

      background-color: var(--colorCard) !important;

      border: 1px solid var(--colorCard) !important;

      span {

        color: #fff;

      }

    }

  }

}

</style>



<style>

.videoTime .el-slider__button {

  margin-top: -25px !important;

  border: none !important;

}



.videoTime .el-slider__button::after {

  display: block;

  position: relative;

  content: "\e75d";

  color: var(--colorCard);

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.videoTime .el-tooltip {

  background-color: #f2f2f7 !important;

  border: none !important;

}



.videoTime .el-slider__runway {

  background-color: #fff !important;

  height: 3px !important;

}



.videoTime .el-slider__stop {

  background-color: #c4c4c4 !important;

  height: 3px !important;

  width: 8px !important;

  border-radius: 0 !important;

}



.videoTime .el-slider__bar {

  z-index: 999999999 !important;

  background-color: var(--colorCard) !important;

}



.videoTime .el-input-number.el-input-number--small {

  width: 90px;

  height: 24px !important;

  border-radius: 4px;

  line-height: 24px !important;

  font-weight: 700 !important;

}



.videoTime .el-input-number.el-input-number--small .el-input__inner {

  font-size: 12px !important;

  height: 24px !important;

}



.el-input-number__decrease {

  color: #333 !important;

  /* top: 4px !important; */

  height: 22px !important;

  width: 20px !important;

  line-height: 22px !important;

}



.el-input-number__increase {

  color: #333 !important;

  /* top: 4px !important; */

  height: 22px !important;

  width: 24px !important;

  line-height: 22px !important;

}



.el-input-number__increase:hover i {

  /*  color: var(--colorCard); */

  color: #4e94ff;

}

</style>