监控ui

heyujie

2021-10-11 ae2d855c89ca722ac7309fdf1aa6ceed370e3b95

 src/pages/settings/views/generalSettings.vue

@@ -139,7 +139,7 @@
          </div>

          <div class="bar-group">

            <div

              class="bar"

              class="general-bar"

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

              :key="i"

              @click="clickSound(item, i)"

@@ -148,7 +148,7 @@
              <div class="left-part">

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

              </div>

              <div class="btns">

              <div class="sound-btns">

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

                  <span

                    class="iconfont"

@@ -156,9 +156,11 @@
                    style="cursor: pointer"

                    >{{ playSpan }}</span

                  >

                  <span class="iconfont" v-else style="cursor: pointer">{{

                  <!-- <span class="iconfont" v-else style="cursor: pointer">{{

                    playSpan2

                  }}</span>

                  }}</span> -->



                  <img v-else src="/images/settings/暂停.png" alt="" style="width:16px;hight:16px;cursor: pointer;margin-top:15px;">

                  <!-- 

                  <i

                    v-if="!item.isPlay"

@@ -210,6 +212,7 @@
            <div

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

            :key="index"   

            style="border:none;"

            >

            <div class="color-option"

            v-if="universalColor != index"

@@ -299,9 +302,9 @@
export default {

  data() {

    return {

      playSpan: "\ue6e8",

      playSpan2: "\ue6e8",

      delspan: "\ue6e8",

      playSpan: "\ue75e",

      playSpan2: "\ue75f",

      delspan: "\ue715",

      warnSpn: "\ue71c",

      curPlayingIndex: null,

      showUpload: false,

@@ -314,9 +317,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,

@@ -570,6 +573,9 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .el-input__inner {

 height: 24px !important;

}

  .general-center {

    height: 100%;

    width: 300px;

@@ -662,29 +668,28 @@
      }

      .bar-group {

        overflow: auto;

        height: 400px;

      }

      .bar {

        height: 48px;

        background-color: #f8f8f8;

        border-radius: 10px;

        line-height: 48px;

        box-sizing: border-box;

        padding: 0 20px 0 20px;

        font-weight: 700;

        display: flex;

        justify-content: space-between;

        margin-bottom: 2px;

        border: 2px solid #fff;

        .name {

          font-size: 14px;

        }

        .btns {

          width: 52px;

        height: calc(100% - 132px);

        .general-bar {

          height: 48px;

          background-color: #f8f8f8;

          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 #fff;

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

@@ -696,18 +701,20 @@
            vertical-align: middle;

            color: #409eff;

          } */

          span {

            color: #333;

            span {

              color: #333;

            }

            .del:hover {

              color: #fc4958;

            }

          }

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

        border: 2px solid #4E94FF !important;

      } */

@@ -1040,6 +1047,9 @@
        font-size: 16px;

        font-weight: 700;

      }

      &:hover {

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

      }

    }

    button:first-child {

      background-color: #e0e0e0;

@@ -1049,6 +1059,7 @@
    }

    button:last-child {

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

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

      span { 

         color: #fff;

      }

@@ -1062,7 +1073,19 @@
.videoTime .el-slider__button {

  margin-top: -25px !important;

  border: none !important;

  background-image: url(/images/gengeralSettings/刻度标.png);

  
}



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

@@ -1125,9 +1148,7 @@
 color: #4E94FF;

}



.el-input__inner {

 height: 24px !important;

}







/* .el-tooltip__popper {