10.15bug修复

ZZJ

2021-10-15 a6f495032e2edd41f3fed538daaa40a3287e5754

10.15bug修复

 public/images/settings/°×É«Ò»¼¶icon/ʱ¼äÈÕÆÚ.png

 public/images/settings/°×É«Ò»¼¶icon/ÍøÂçÉèÖÃ.png

 public/images/settings/°×É«Ò»¼¶icon/É豸ÐÅÏ¢.png

 public/images/settings/°×É«Ò»¼¶icon/ÕË»§.png

 public/images/settings/°×É«Ò»¼¶icon/ͨÓÃÉèÖÃ.png

 public/images/settings/°×É«Ò»¼¶icon/¼üÅ̺ÍÓïÑÔ.png

 public/images/settings/°×É«Ò»¼¶icon/¼¯Èº¹ÜÀí.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/ʱ¼äÐÅÏ¢.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/ÍøÂçÉèÖÃ.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/É豸ÐÅÏ¢.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/ÕË»§.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/ͨÓÃÉèÖÃ.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/¼üÅ̺ÍÓïÑÔ.png

 public/images/settings/ºÚÉ«Ò»¼¶icon/¼¯Èº¹ÜÀí.png

 src/pages/desktop/index/components/DFrame.vue

@@ -8,7 +8,8 @@
    v-bind:style="{left: data.leftOffset + 'px', top: data.topOffset + 'px', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}"
  >
    <div class="d-frame-title" v-drag='fullScreen' @click="frameClick">
      <div class="d-frame-title-operation">
      <div class="icon iconfont back" @click="back">&#xe718;</div>
      <div class="d-frame-title-operation"> 
        <i class="icon-minus d-frame-operation-minus" @click="minFrame(data,$event)">
          <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt />
        </i>
@@ -190,6 +191,16 @@

    },

    back(){
      let active = this.$store.state.desktop.minDocks
      active = active.filter(item => item.highlight)
      console.log(`返回${active.alt}`);
      const iframeArr = document.querySelectorAll("iframe")
      iframeArr.forEach(item=>{
          item.contentWindow.postMessage({msg:`返回${active[0].alt}`},"*")
      })
    }

  },
  directives: {
    drag(el, binding) {
@@ -303,6 +314,13 @@
  z-index: 2;
}

.back {
  position: absolute;
  cursor: pointer;
  top: 8px;
  left: 10px;
}

.d-frame-title-operation i {
  font-size: 18px;
  display: inline-block;

 src/pages/settings/index/index.vue

@@ -16,7 +16,12 @@

    <div class="container-center" v-if="activeIndex == 0">
      <div class="account-left" v-if="activeIndex == 0">
        <div class="account-list">
        <div class="account-list" 
        :class="{'account-list-scroll'
        :account_list_scroll}" 
        @mouseenter="account_list_scroll = true"
        @mouseleave="account_list_scroll = false"
        >
          <div
            class="account-card"
            :class="activeAccountIndex == index ? 'account-card-active' : ''"
@@ -602,7 +607,7 @@
      ref="view_6"
    ></deviceInfo>
  </div>
  <div class="welcome-page" v-else ref="curPage">
  <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''">
    <div
      class="search-box"
      :class="showRecomand ? 'border-change' : ''"
@@ -639,6 +644,8 @@
      <div
        class="nav-child"
        @click="openWelcome(i)"
        @mousedown="mouseDownIndex = i"
        :class="mouseDownIndex === i? 'nav-child-active':''"
        v-for="(item, i) in menuArr"
        :key="i"
      >
@@ -833,6 +840,7 @@
      inputHour: "",
      inputMin: "",
      inputSec: "",
      mouseDownIndex:'',
      inputYrs: "",
      showInputNickName: false,
      inputMonth: "",
@@ -878,6 +886,7 @@
        ],
        confirmPassword: [{ validator: v4, trigger: "blur" }],
      },
      account_list_scroll: false
    };
  },
  created(){
@@ -894,6 +903,11 @@
    // }
  },
  mounted() {
    window.addEventListener("message",(e)=>{
     if(e.data.msg === '返回系统设置') {
     this.showWelcome = true
       }       
     })
    const menu = getUrlKey("menu");
    if (menu) {
      this.showWelcome = false;
@@ -1640,7 +1654,7 @@
        text-align: left;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333333;
        color: #4F4F4F;
        font-size: 14px;
        cursor: pointer;
      }
@@ -1650,7 +1664,7 @@
        text-align: left;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333333;
        color: #4F4F4F;
        font-size: 14px;
      }
      .res-bar:hover {
@@ -1661,6 +1675,8 @@
    }
  }
  .nav-items {
    max-width: 960px;
    margin: 0 auto;
    .nav-child {
      box-sizing: border-box;
      background-color: rgba(251, 251, 255, 0.1);
@@ -1677,8 +1693,11 @@
      cursor: pointer;
      border: 2px solid #F2F2F7;

      &:hover {
      &-active {
        border: 2px solid #4E94FF;
      }

      &:hover {
        background: #F2F2F7;
      }

@@ -1699,7 +1718,7 @@
          font-size: 16px;
          font-weight: bold;
          margin-top: 24px;
          color: #333333;
          color: #4F4F4F;
        }
      }
    }
@@ -1714,7 +1733,8 @@
  flex-basis: auto;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #e1e0e6;
  color: #4F4F4F;
  border-top: 2px solid #E1E0E6;
  .container-left {
    height: 100%;
    width: 244px;
@@ -1727,22 +1747,22 @@
      height: 56px;
      cursor: pointer;
      border-radius: 8px;
      margin-bottom: 10px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      padding: 0 20px;

      .card-text {
        margin-left: 20px;
        color: #333333;
        color: #4F4F4F;
        font-weight: bold;
        font-size: 16px;
        line-height: 22px;
        height: 22px;
      }
      img {
        height: 40px;
        width: 40px;
        height: 30px;
        width: 30px;
      }
      .w {
        display: none;
@@ -1773,15 +1793,29 @@
    overflow: auto;
    flex-shrink: 0;
    padding: 10px;
    border-right: 4px solid #f2f2f7;
    padding-top: 6px;
    padding-right: 5px;
    border-top: 4px solid #f2f2f7;
    border-left: 4px solid #f2f2f7;
    box-sizing: border-box;
    background-color: #fbfaff;
    border-left: 4px solid #f2f2f7;
    .account-left {
      height: 100%;
      .account-list {
        height: calc(85%);
        overflow: auto;
        padding-right: 5px;
       &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { visibility: hidden; }
       &::-webkit-scrollbar {
         background-color: #fff;
       }

        &.account-list-scroll::-webkit-scrollbar-thumb, &.account-list-scroll::-webkit-scrollbar-track {
          visibility: visible;
        }
        &.account-list-scroll::-webkit-scrollbar {
        background-color: #f5f5f5;
       }
      }
      .add-account {
        color: var(--colorCard);
@@ -1818,7 +1852,7 @@
          height: 19.21px;
          background: #ffffff;
          border-radius: 20px;
          color: #333333;
          color: #4F4F4F;
          transform: scale(0.833333);
          line-height: 22.21px;
          span {
@@ -1846,6 +1880,8 @@
    position: relative;
    padding: 30px 40px;
    background: #f2f2f7;
    border-left: 4px solid #f2f2f7;
    border-top: 4px solid #f2f2f7;
    .account-right {
      height: 100%;
      .account-content {
@@ -1903,7 +1939,7 @@
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #333333;
            color: #4F4F4F;
            min-width: 200px;
            .user-name {
              margin-bottom: 10px;
@@ -2009,7 +2045,7 @@
          font-weight: bold;
          font-size: 16px;
          line-height: 22px;
          color: #333333;
          color: #4F4F4F;
          margin-bottom: 40px;
          height: 28px;
          display: flex;
@@ -2029,7 +2065,7 @@
          border-radius: 8px;
          padding: 0 15px 0 20px;
          .el-select-dropdown__item {
            color: #333333;
            color: #4F4F4F;
            height: 32px;
            font-size: 12px;
            line-height: 32px;
@@ -2074,7 +2110,7 @@
            width: 100%;
          }
          .el-select .el-input .el-select__caret {
            color: #333333;
            color: #4F4F4F;
            font-size: 14px;
            font-weight: 600;
          }
@@ -2098,7 +2134,7 @@
          font-size: 15px;
        }
        .el-input__clear {
          color: #333333;
          color: #4F4F4F;
          font-size: 16px;
          line-height: 48px;
        }
@@ -2117,7 +2153,7 @@
          line-height: 48px;
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          color: #4F4F4F;
          height: 48px;
          background: #fbfaff;
          border-bottom: 2px solid #f2f2f7;
@@ -2239,7 +2275,7 @@
            border-radius: 8px;
            padding: 0 15px 0 20px;
            .el-select-dropdown__item {
              color: #333333;
              color: #4F4F4F;
              height: 32px;
              font-size: 12px;
              line-height: 32px;
@@ -2291,7 +2327,7 @@
              width: 100%;
            }
            .el-select .el-input .el-select__caret {
              color: #333333;
              color: #4F4F4F;
              font-size: 14px;
              font-weight: 600;
            }
@@ -2302,7 +2338,7 @@
    .datetime-right {
      .datetime-left {
        .device-time {
          color: #333333;
          color: #4F4F4F;
          .title {
            display: flex;
            justify-content: center;

 src/pages/settings/views/NetSettings.vue

@@ -664,10 +664,11 @@
    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    .menu-item {

      background: #f2f2f7;

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

@@ -678,6 +679,11 @@
      padding: 0 20px;

      display: flex;

      justify-content: space-between;



      &:hover {

        background: #f2f2f7;

      }



      .item-left {

        display: flex;

        align-items: center;

@@ -692,7 +698,7 @@
      }

    }

    .menu-item-active {

      background-color: var(--colorCard);

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

      color: #ffffff;

    }

  }

@@ -703,11 +709,13 @@
    box-sizing: border-box;

    position: relative;

    padding: 10px;

    padding-top: 6px;

    border-top: 4px solid #f2f2f7;

    .title {

      height: 48px;

      font-size: 16px;

      line-height: 48px;

      color: #333333;

      color: #4F4F4F;

      font-weight: bold;    background: #F2F2F7;

    border-radius: 8px;

    margin-bottom: 10px;

@@ -737,7 +745,7 @@
        border: 2px solid #409eff !important;

      }

      .el-select-dropdown__item {

        color: #333333;

        color: #4F4F4F;

        height: 32px;

        font-size: 12px;

        line-height: 32px;

@@ -786,7 +794,7 @@
        width: 100%;

      }

      .el-select .el-input .el-select__caret {

        color: #333333;

        color: #4F4F4F;

        font-size: 14px;

        font-weight: 600;

      }

@@ -803,7 +811,7 @@
      }

      .switch-bar .name {

        font-size: 14px;

        color: #333;

        color: #4F4F4F;

        font-weight: bold;

      }

      .wifi-option {

@@ -819,7 +827,7 @@
        border-radius: 8px;

        .name {

          font-size: 14px;

          color: #333;

          color: #4F4F4F;

          font-weight: bold;

          .icon {

            color: #4e94ff;

@@ -880,7 +888,7 @@
          padding: 14px 20px;

          font-weight: bold;

          font-size: 14px;

          color: #333333;

          color: #4F4F4F;

        }

        .ip-input-container {

          max-width: none !important;

@@ -923,7 +931,6 @@
        line-height: 48px;

      }

      .ad {

        margin-top: 10px;

        height: 32px;

        text-align: center;

        font-size: 17px;

@@ -947,7 +954,7 @@
          font-size: 15px;

          font-weight: bold;

          font-size: 14px;

          color: #333333;

          color: #4F4F4F;

        }

        .right {

          display: flex;


 src/pages/settings/views/clusterManagement.vue

@@ -739,8 +739,10 @@
    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    .menu-item {

      background-color: #f8f8f8;

      cursor: pointer;

@@ -769,7 +771,9 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    border-top: 4px solid #f2f2f7;

    padding: 20px 40px;

    padding-top: 16px;

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

      > .el-form-item__label:before,

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


 src/pages/settings/views/generalSettings.vue

@@ -584,9 +584,11 @@
    box-sizing: border-box;

    flex-shrink: 0;

    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 {

      height: 56px;

      margin-bottom: 4px;

@@ -620,8 +622,9 @@
    overflow: auto;

    box-sizing: border-box;

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

    border-top: 4px solid #f2f2f7;



    padding: 10px 18px 10px 10px;

    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)

@@ -635,7 +638,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;

@@ -668,13 +671,18 @@
        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: calc(100% - 100px);

        .general-bar {

          height: 48px;

          background-color: #f8f8f8;

          background: #F2F2F7;

          border-radius: 10px;

          line-height: 48px;

          box-sizing: border-box;

@@ -683,7 +691,8 @@
          display: flex;

          justify-content: space-between;

          margin-bottom: 2px;

          border: 2px solid #f8f8f8;

          border:2px solid #F2F2F7;

          margin-bottom: 4px;

          .name {

            font-size: 14px;

          }


 src/pages/settings/views/keyboardLanguage.vue

@@ -169,9 +169,11 @@
    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px 10px 0px 10px;

    padding: 6px 10px 0px 10px;

    background-color: #FBFAFF;

    border-right: 4px solid #F2F2F7;

    border-top: 4px solid #F2F2F7;

    border-left: 4px solid #F2F2F7;

    .menu-item {

    /*   background-color: #F2F2F7; */

      height: 56px;

@@ -182,7 +184,7 @@
      padding: 0 20px;cursor: pointer;

      display: flex;

      align-items: center;

      color: #333;

      color: #4F4F4F;

      .title {

        font-size: 16px;

        font-weight: 700;

@@ -209,6 +211,8 @@
    box-sizing: border-box;

    position: relative;

    padding: 10px;

    padding-top: 6px;

    border-top: 4px solid #F2F2F7;

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

      > .el-form-item__label:before,

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


 src/pages/systemMonitor/index/App.vue

@@ -49,29 +49,29 @@
            stripe
            class="tableBox"
          >
            <el-table-column label="名称" width="180">
            <el-table-column label="名称" width="231">
              <template slot-scope="scope">
                <span class="iconfont icon">&#xe74d;</span>
                <span>{{ scope.row.desc }} </span>
              </template>
            </el-table-column>
            <el-table-column label="CPU" width="180">
            <el-table-column label="CPU" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.cpu.toFixed(2) }} %</span>
              </template>
            </el-table-column>
            <el-table-column label="内存">
            <el-table-column label="内存" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.mem.toFixed(2) }} %</span>
              </template>
            </el-table-column>
            <el-table-column prop="disk" label="硬盘"></el-table-column>
            <el-table-column label="算力">
            <el-table-column prop="disk" label="硬盘" width="150"></el-table-column>
            <el-table-column label="算力" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.gpu }} M</span>
              </template>
            </el-table-column>
            <el-table-column prop="net" label="网络"></el-table-column>
            <el-table-column prop="net" label="网络" width="150"></el-table-column>
          </el-table>
        </div>

@@ -396,6 +396,7 @@
            lineStyle: {
              width: 1,
              type: "solid",
              color:"rgb(242,242,242)"
            },
          },
        },
@@ -411,6 +412,11 @@
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
            color:"rgb(242,242,242)"
            }
          }
        },
        series: [
          {
@@ -911,6 +917,7 @@
  }

  .column-right {
    background-color: #fff;
    overflow-y: auto;
    overflow-x: auto;
  }

 src/pages/vindicate/index/App.vue

@@ -1,5 +1,6 @@
<template>
  <div class="container vindicate" v-if="!showWelcome">

    <div class="container-left">
      <div
        class="left-card"
@@ -20,7 +21,7 @@
    <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
  </div>

    <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false">
    <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
    <div
      class="search-box"
      :class="showRecomand ? 'border-change' : ''"
@@ -60,6 +61,8 @@
        @click="openWelcome(i)"
        v-for="(item, i) in menuArr"
        :key="i"
        @mousedown="mouseDownIndex = i"
        :class="mouseDownIndex === i? 'nav-child-active':''"
      >
        <div class="child-info">
          <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
@@ -110,7 +113,8 @@
      full: 0,
      showWelcome:true,
      searchText:'',
      showRecomand:false
      showRecomand:false,
      mouseDownIndex:''
    };
  },
  created() {
@@ -128,12 +132,13 @@
      // });
    }
     this.getLeftPer()
     console.log(99999);
     window.addEventListener("message",(e)=>{
     console.log(999);
     if(e.data.msg === 'changeColor') {
     document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
       }       
       } 
      if (e.data.msg === '返回系统维护') {
    this.showWelcome = true
      }     
     })
  },
  methods: {
@@ -308,6 +313,8 @@
    }
  }
  .nav-items {
    max-width: 960px;
    margin: 0 auto;
    .nav-child {
      box-sizing: border-box;
      background-color: rgba(251, 251, 255, 0.1);
@@ -325,8 +332,11 @@
      border: 2px solid #F2F2F7;

      &:hover {
        border: 2px solid #4E94FF;
        background: #F2F2F7;
      }

      &-active {
        border: 2px solid #4E94FF;
      }

      // box-shadow: 2px 2px 4px rgb(226, 226, 226);
@@ -368,6 +378,14 @@
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  position: relative;

  .back {
    position: absolute;
    top: 0;
    left: 0;
  }

  .container-left {
    height: 100%;
    width: 244px;

 src/pages/vindicate/views/restartSettings.vue

@@ -343,7 +343,6 @@
.restart {

  margin: 0 auto;

  padding: 10px;

  width: 74% !important;

  font-size: 16px;

  color: #333;

  font-weight: 700;


 src/pages/vindicate/views/systemClean.vue

@@ -43,6 +43,25 @@
<script>

import { deleteData } from "@/api/system";

export default {

  created(){

  const end = new Date();

  const start = new Date();

  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

  var year=end.getFullYear();

  var month=end.getMonth()+1;

  var day=end.getDate();

  month=month<10?"0"+month:month;

  day=day<10?"0"+day:day;

  const endTime = year+"-"+month+"-"+day



  var year2=start.getFullYear();

  var month2=start.getMonth()+1;

  var day2=start.getDate();

  month2=month2<10?"0"+month2:month2;

  day2=day2<10?"0"+day2:day2;

  const startTime = year2+"-"+month2+"-"+day2

  this.dataRange = [startTime,endTime]

  },

  data() {

    return {

      pickerOptions: {

@@ -51,10 +70,35 @@
          day.setTime(day.getTime() - 24 * 60 * 60 * 1000);

          return time.getTime() > day;

        },

         shortcuts: [{

            text: '最近一周',

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

              picker.$emit('pick', [start, end]);

            }

          }, {

            text: '最近一个月',

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

              picker.$emit('pick', [start, end]);

            }

          }, {

            text: '最近三个月',

            onClick(picker) {

              const end = new Date();

              const start = new Date();

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);

              picker.$emit('pick', [start, end]);

            }

          }]

      },

      loading: false,

      loadingText: '',

      dataRange: []

      dataRange: [],

    };

  },

  props:["free","full"],

@@ -308,3 +352,24 @@
    }

   } 

</style>



<style lang="scss">

.clean-time-picker {

    top: 208px !important;

    left: 343px !important;

    width: 624px !important;



    .el-picker-panel__sidebar {

      background: #EEF5FF;

      button {

        margin: 10px 0;

      }

    }



    tbody {

        tr:first-child {

          background: #EEF5FF;

        }

      }

   }

</style>


 src/pages/vindicate/views/updateSettings.vue

@@ -17,14 +17,22 @@
      </div>

      <div class="cluster-right">

        <div class="net-set" v-if="activePage == 0">

          <el-radio-group

          <!-- <el-radio-group

            v-model="radio2"

            size="medium"

            fill="rgba(61, 104, 225, 1)"

          >

            <el-radio-button label="检查更新"></el-radio-button>

            <el-radio-button label="上传更新"></el-radio-button>

          </el-radio-group>

          </el-radio-group> -->



          <div class="button-group">

            <div class="bottom">

              <div class="top" :class="{ 'toggle':radio2 !== '检查更新' }"></div>

              <div class="label-left" :class="{ 'toggle':radio2 == '检查更新' }" @click="radio2 = '检查更新'">检查更新</div>

              <div class="label-right" :class="{ 'toggle':radio2 !== '检查更新' }" @click="radio2 = '上传更新'">上传更新</div>

            </div>

          </div>



          <div class="update-center" v-if="radio2 == '检查更新'">

            <img v-if="!upgrading&&hasNewVersion||checking"

@@ -464,7 +472,7 @@
      justify-content: start;

      height: 95%;

      padding: 0 30px;

      .el-radio-group {

      /* .el-radio-group {

        margin-top:33px ;

        .el-radio-button__inner {

          font-size: 14px;

@@ -489,6 +497,62 @@
            color: white !important;

          }

          }

      } */

      .button-group {

        margin: 0 auto;

        margin-top: 30px;

        width: 168px;

        height: 28px;

        .bottom {

          position: relative;

          height: 100%;

          background: #F2F2F7;

          border-radius: 20px;

          cursor: pointer;

          .top {

            position: absolute;

            top: 0;

            left: 0;

            width: 84px;

            height: 28px;

            background: #4E94FF;

            border-radius: 20px;

            transition: all .2s linear;

            &.toggle {

              left: 84px;

            }

          }

          .label-left {

            position: absolute;

            width: 84px;

            height: 28px;

            top: 0;

            left: 0;

            z-index: 1;

            font-size: 14px;

            line-height: 28px;

            font-weight: 700;

            color: #333333;

             &.toggle {

               color: #fff;

             }

          }

          .label-right {

            position: absolute;

            width: 84px;

            height: 28px;

            top: 0;

            right: 0;

            z-index: 1;

            font-size: 14px;

            line-height: 28px;

            font-weight: 700;

            color: #333333;

            &.toggle {

               color: #fff;

             }

          }

        }

      }

      @keyframes spin {

        from {