From 1e09a7a01a6c1888e1a2a832eb007fb8c2b653a0 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 26 一月 2022 11:06:27 +0800
Subject: [PATCH] Merge branch 'bhomebus' of http://192.168.5.5:10010/r/web/vue-smart-ai into bhomebus

---
 src/pages/settings/views/generalSettings.vue |  686 +++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 550 insertions(+), 136 deletions(-)

diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 62220d2..4b6f2a1 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="all" ref="curPage">
-    <div class="general-set">
+    <div class="general-seting">
       <div class="general-center" ref="left">
         <div
           class="menu-item"
@@ -58,7 +58,7 @@
             <span class="desc">{{ deviceInfo.runningTime }}</span>
           </div>
         </div> -->
-        <div class="lang" v-if="activePage == 0">
+        <div class="lang videoTime" v-if="activePage == 0">
           <div class="min-dur">
             <div class="title">鎶撴媿鍓嶅綍鍍忔椂闀�</div>
             <div class="entity">
@@ -73,10 +73,11 @@
                   @input="min_len = min_video_len"
                   show-stops
                   :show-tooltip="true"
+                  tooltip-class="toolClass"
                   :format-tooltip="formatTooltip"
                 ></el-slider>
               </div>
-              <el-input-number
+              <!-- <el-input-number
                 v-model="min_len"
                 @change="fakeObj.min = +(min_len / 1.2)"
                 controls-position="right"
@@ -86,7 +87,17 @@
                 step-strictly
                 size="small"
               ></el-input-number
-              >&nbsp;s
+              >&nbsp;s -->
+               
+              <el-input-number 
+              v-model="min_len" 
+              @change="fakeObj.min = +(min_len / 1.2)" 
+              :min="5" 
+              :step="5"
+              :max="120" 
+              step-strictly
+              size="small"
+              ></el-input-number>&nbsp;s
             </div>
           </div>
           <div class="min-dur">
@@ -109,7 +120,6 @@
               <el-input-number
                 v-model="max_len"
                 @change="fakeObj.max = +(max_len / 1.2)"
-                controls-position="right"
                 :min="5"
                 :step="5"
                 step-strictly
@@ -117,43 +127,53 @@
                 size="small"
               ></el-input-number
               >&nbsp;s
+              
             </div>
           </div>
 
           <div class="save-btn" @click="submitAlarm">淇濆瓨</div>
         </div>
         <div class="lang" v-if="activePage == 1">
-          <div class="title">浜嬩欢澹伴煶</div>
+          <div class="bar title voice-title" style="border: 2px solid #fff">
+            浜嬩欢澹伴煶
+          </div>
           <div class="bar-group">
             <div
-              class="bar"
+              class="general-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; color: dodgerblue"
-                  >&#xe6f5;</span
-                >
                 <span class="name">{{ item.name }}</span>
               </div>
-              <div class="btns">
+              <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>
+                  <i v-else class="el-icon-video-pause"></i> -->
                 </span>
                 <span
-                  class="icon iconfont"
-                  style="cursor: pointer; color: indianred"
+                  class="icon iconfont del"
+                  style="cursor: pointer"
                   @click="removeSound(item)"
-                  >&#xe6cb;</span
+                  >{{ delspan }}</span
                 >
               </div>
             </div>
@@ -166,11 +186,13 @@
               :http-request="uploadSound"
               :show-file-list="false"
             >
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">
-                浜嬩欢澹伴煶鏂囦欢鎷栧埌姝ゅ锛屾垨
-                <em>鐐瑰嚮涓婁紶</em>
-                <br />浠呮敮鎸乵p3/wma绛夋牸寮�
+              <div class="info">
+                璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click"
+                  >鐐瑰嚮涓婁紶</span
+                >
+              </div>
+              <div class="des" v-if="showUpload" @click.stop>
+                浠呮敮鎸乵p3銆亀av绛夋牸寮�
               </div>
             </el-upload>
           </div>
@@ -185,15 +207,41 @@
         </div>
 
         <div class="self-setting" v-if="activePage == 2">
-          <div class="top-title">鍥炬爣涓婚</div>
+          <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="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"
-                style="color: #3d68e1; font-size: 18px"
-                v-show="activeIcons == 0"
+                :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"
                 >&#xe6f1;</span
               >
             </div>
@@ -212,8 +260,7 @@
               <span class="title">鎵佸钩鍖栧浘鏍�</span>
               <span
                 class="icon iconfont"
-                style="color: #3d68e1; font-size: 18px"
-                v-show="activeIcons == 1"
+                :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"
                 >&#xe6f1;</span
               >
             </div>
@@ -227,13 +274,14 @@
               </div>
             </div>
           </div>
+          
           <div class="top-title">妗岄潰鑳屾櫙涓婚</div>
           <div class="bg-bar">
             <div class="bg-list">
               <div
-                class="bg-img"
-                :class="activeBg == i ? 'bg-list-active' : ''"
                 v-for="(item, i) in tableBGList"
+                class="bg-img"
+                :class="activeBg == i ? 'bg-list-active' : ''"              
                 :key="i"
                 @click="pickBg(item, i)"
               >
@@ -250,10 +298,16 @@
 <script>
 import { saveAlarmConfig, getDevInfo } from "@/api/system";
 import { uploadSound, getSoundList, deleteSound } from "@/api/event";
-
+import {
+  updateUser,
+} from "@/api/user";
 export default {
   data() {
     return {
+      playSpan: "\ue75e",
+      playSpan2: "\ue75f",
+      delspan: "\ue715",
+      warnSpn: "\ue71c",
       curPlayingIndex: null,
       showUpload: false,
       activeIcons: 0,
@@ -265,9 +319,9 @@
       },
       menuArr: [
         // { name: "璁惧淇℃伅", icon: "\ue933" ,size:18},
-        { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue6f3", size: 20 },
-        { name: "浜嬩欢澹伴煶", icon: "\ue6e1", size: 16 },
-        { name: "涓�у寲璁剧疆", icon: "\ue756", size: 18 },
+        { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 },
+        { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 },
+        { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 },
       ],
       soundList: [],
       activePage: 0,
@@ -287,9 +341,9 @@
       },
       isPlay: false,
       realIconList: [
-        { url: "/images/settings/鏃ュ織绠$悊.png" },
-        { url: "/images/settings/瀹炴椂鐩戞帶.png" },
-        { url: "/images/settings/鏁版嵁鍙鍖�.png" },
+        { url: "/images/settings/鏃ュ織绠$悊.png", color: "green" },
+        { url: "/images/settings/瀹炴椂鐩戞帶.png", color: "yellow" },
+        { url: "/images/settings/鏁版嵁鍙鍖�.png", color: "pink" },
       ],
       flatIconList: [
         { url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
@@ -297,10 +351,22 @@
         { url: "/images/settings/绯荤粺璁剧疆.png" },
       ],
       tableBGList: [
-        { name: "background", url: "/images/settings/background.png" },
-        { name: "message", url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
-        { name: "weather", url: "/images/settings/绯荤粺璁剧疆.png" },
+        { 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() {
@@ -313,11 +379,12 @@
         _this.curPlayingIndex = null;
       }
     });
-    const url = localStorage.getItem("backgroundPic");
+    const url = this.curUser.backgroundpic;
+    this.activeIcons = this.curUser.useIconType-1
     if (url) {
-      const arr = url.split("/");
+      // const arr = url.split("/");
       this.activeBg = this.tableBGList.findIndex((x) => {
-        return x.url.includes(arr[arr.length - 1]);
+        return x.url == url;
       });
     } else {
       this.activeBg = 0;
@@ -339,6 +406,10 @@
     max_video_len() {
       return Math.round(this.fakeObj.max * 1.2);
     },
+    curUser() {
+      const info = JSON.parse(sessionStorage.getItem("userInfo"));
+      return info;
+    },
   },
   methods: {
     formatTooltip(v) {
@@ -347,12 +418,17 @@
     pickBg(item, i) {
       this.activeBg = i;
       let message = "changeBackground?" + item.name;
-      window.parent.postMessage(
-        {
-          msg: message,
-        },
-        "*"
-      );
+      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))
+          this.$message.success(res.msg);
+        }
+      });
+      this.$forceUpdate()
     },
     togglePlay(item, i) {
       if (this.curPlayingIndex !== null) {
@@ -427,12 +503,36 @@
     },
     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))
+          this.$message.success(res.msg);
+        }
+      });
     },
     removeSound(item) {
-      this.$confirm("鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�", "鍒犻櫎浜嬩欢澹伴煶", {
+      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" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?"),
+          ]
+        ),
+        showCancelButton: true,
         confirmButtonText: "纭畾",
         cancelButtonText: "鍙栨秷",
-        type: "warning",
       }).then(() => {
         deleteSound({
           id: item.id,
@@ -455,10 +555,9 @@
     },
     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({
@@ -474,55 +573,68 @@
         }
       });
     },
+    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: 8px;
+        margin: 0 17px;
+        font-size: 24px !important;
       }
       .title {
-        font-size: 15px;
+        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;
     }
   }
   .general-right {
@@ -530,8 +642,10 @@
     flex-basis: auto;
     overflow: auto;
     box-sizing: border-box;
+    background-color: rgb(251, 250, 255);
+    border-top: 4px solid #f2f2f7;
 
-    padding: 20px 40px;
+    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)
@@ -545,7 +659,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;
@@ -573,36 +687,42 @@
         text-align: left;
         margin-bottom: 5px;
       }
+      .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-group {
         overflow: auto;
-        height: 100%;
-      }
-      .bar {
-        height: 44px;
-        background-color: #f8f8f8;
-        border-radius: 10px;
-        line-height: 44px;
-        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;
+        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 {
+          margin-bottom: 2px;
+          border:2px solid #F2F2F7;
+          margin-bottom: 4px;
+          .name {
+            font-size: 14px;
+          }
+          .sound-btns {
+            width: 52px;
+            display: flex;
+            justify-content: space-between;
+            color: rgba(191, 191, 191, 1);
+            /*  .el-icon-video-pause {
             cursor: pointer;
             font-size: 23px;
             vertical-align: middle;
@@ -613,18 +733,26 @@
             font-size: 23px;
             vertical-align: middle;
             color: #409eff;
+          } */
+            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: 10px auto;
+        margin: 54px auto;
         width: fit-content;
       }
       .upload-demo {
@@ -632,7 +760,6 @@
         transition: all 0.5s;
         position: absolute;
         bottom: -40px;
-
         left: calc(50% - 145px);
         .el-upload-dragger {
           width: 290px;
@@ -645,31 +772,32 @@
         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;
@@ -680,8 +808,8 @@
           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;
@@ -719,34 +847,67 @@
       }
     }
     .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;
       cursor: pointer;
-      font-size: 14px;
-      margin-top: 20px;
+      font-size: 16px;
+      font-weight: 700;
+      margin-top: 55px;
     }
     .self-setting {
       .top-title {
+        text-align: left;
         font-size: 16px;
-        height: 30px;
-        line-height: 30px;
         margin-bottom: 10px;
+        font-weight: 700;
+        margin-top: 20px;
       }
-      .icon-bar:hover {
+  /*     .icon-bar:hover {
         background-color: rgba(233, 233, 233, 1);
+      } */
+      .color-bar {
+        display: flex;
+        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% ;
+          }
+        }
       }
       .icon-bar {
         cursor: pointer;
-        background-color: rgba(248, 248, 248, 1);
         box-sizing: border-box;
-        padding: 15px 25px;
-        border-radius: 12px;
-        margin-bottom: 12px;
+        padding: 15px 13px 14px 20px;
+        background: #F2F2F7;
+        border-radius: 8px;
+        margin-bottom: 10px;
         .bar-title {
           line-height: 20px;
           height: 20px;
@@ -755,10 +916,20 @@
           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;
@@ -772,7 +943,7 @@
         }
       }
       .bg-bar {
-        background-color: rgba(248, 248, 248, 1);
+        background-color: #F2F2F7;
         box-sizing: border-box;
         padding: 15px 25px;
         border-radius: 12px;
@@ -783,22 +954,265 @@
             margin-right: 12px;
             cursor: pointer;
             // width: 120px;
-            height: 80px;
+            height: 66px;
             border: 2px solid transparent;
             img {
               border-radius: 5px;
               height: 100%;
             }
           }
-          .bg-img:hover {
+         /*  .bg-img:hover {
             border: 2px solid yellow;
-          }
+          } */
           .bg-list-active {
-            border: 2px solid yellow;
+            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 {
+  top: 452px;
+  left: 2px !important;
+  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: #fe6d68;
+    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-top: 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__decrease:hover i{
+  color: var(--colorCard);
+} */
+
+.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;
+}
+
+
+
+
+/* .el-tooltip__popper {
+  font-size: 12px !important;
+  background-color: transparent !important;
+  color:var(--colorCard) !important;
+}
+
+.popper__arrow::after {
+  border-color: transparent !important;
+  border: none !important;
+}
+
+.popper__arrow:after {
+  border-bottom-color: green !important;
+}
+
+.popper__arrow:after {
+  border-top-color: pink !important;
+}
+
+.toolClass {
+  border: none !important;
+}
+
+.toolClass {
+  border: none !important;
+}
+
+.el-slider__button::after {
+  border: none !important;
+} */
 </style>

--
Gitblit v1.8.0