后端没修改的情况下添加默认背景图

heyujie

2021-11-16 6a5962fe9544005dba620b00fb36c25fe2da4e76

 src/pages/vindicate/views/updateSettings.vue

@@ -17,25 +17,37 @@
      </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 == '检查更新'">

            <span v-if="hasNewVersion||checking"

              class="icon iconfont spin-bg"

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

              class="spin-bg"

              src="/images/vindicate/检测加载.png"

              :class="upgrading || checking ? 'spin-bg-rot' : ''"

              >&#xe6fb;</span

            >

            <span v-else

              class="icon iconfont spin-bg"

              >&#xe701;</span

            >

              />

             <img v-if="upgrading&&hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/加载.png"

              /> 
            <img v-if="!checking&&!hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/已是最新版本.png"

              />

            <div class="desc" v-if="checking && !upgrading">

              正在检测版本更新……

            </div>

@@ -67,29 +79,30 @@


          

          <div class="upload-center" v-if="radio2 == '上传更新'">

            <div class="upload-info"><span class="icon iconfont">&#xe66e;</span> 上传安装软件</div>

            <div class="upload-info"><img src="/images/vindicate/链接 1.png" style="width: 14px;"> 上传安装软件</div>

            <div class="upload-top">



              <div class="upload-container">

               <div class="upload-fail " v-if="upStatus===0">

                 <i class="icon iconfont upload-icon">

                &#xe6f1;

                &#xe71c;

               </i>

               <p>上传失败，请重新上传。</p>

               </div>



               <div class="upload-success"  v-if="upStatus===1">

               <i class="icon iconfont upload-icon">

                &#xe6f1;

                &#xe71d;

               </i>

               <p>上传成功，请点击更新按钮开始更新。</p>

               </div>



               <el-upload

                ref="myUpload"

                class="upload-demo"

                drag

                action

                v-show="!shengjiing"

                v-show="!shengjiing&&upStatus===''"

                :http-request="uploadPkg"

                :limit="1"

               >

@@ -282,6 +295,8 @@
        this.upStatus =''

      }, 2000);

      }).catch(()=>{

        this.upgrading = false;

        this.$refs.myUpload.clearFiles()

        this.upStatus = 0

        setTimeout(() => {

        this.upStatus =''

@@ -365,16 +380,16 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  border-top:2px solid #E1E0E6 ;

  border-left:2px solid #E1E0E6 ;

  border-top:4px solid rgb(242, 242, 247) ;

  border-left:4px solid rgb(242, 242, 247) ;

  .cluster-center {

    height: 100%;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 24px 10px 0 10px;

    border-right: 4px solid #f8f8f8;

    padding: 9px 10px 0 10px;

    border-right: 4px solid rgb(242, 242, 247);



    .menu-item {

      height: 56px;

@@ -388,6 +403,8 @@
      justify-content: space-between;

      .con {

        .iconfont {

          font-size: 20px;

          line-height: 32px;

          width: 32px;

          height: 26px;

          margin-right: 10px;

@@ -455,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;

@@ -480,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 {

@@ -491,8 +564,8 @@
      }



      .spin-bg {

        color: rgb(206, 205, 205);

        font-size: 60px;

       
       width: 60px;

        margin-top: 60px;

        margin-bottom:15px ;

      }

@@ -552,6 +625,16 @@
          height: 174px;

          background-color: #fff;

          border-radius: 8px;



          .upload-fail .iconfont{

            color: rgb(254, 109, 104);

          }



          .upload-success .iconfont{

            color: rgb(78, 148, 255);

          }

          
            
          .upload-success,.upload-fail {

            position: absolute;

            z-index: 1;

@@ -678,12 +761,12 @@
      }

    }

    .wifi {

      padding: 10px 0 0 10px;

      padding: 10px 10px 0 10px;

      .bar {

        display: flex;

        align-items: center;

        height: 50px;

        background-color: #f8f8f8;

        background-color: #F2F2F7;

        justify-content: space-between;

        border-radius: 12px;

        margin-bottom: 4px;

@@ -705,9 +788,24 @@
        height: 14px;

        margin-right: 17px;

      }



      .el-switch__core {

        width: 30px !important;

        height: 14px !important;

        &::after {

          top: 0px !important;

          left: 0px !important;

          width: 12px !important;

          height: 12px !important;

        }

      } 


      .is-checked .el-switch__core{

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

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

       &::after {

        margin-left: 16px

       }

      }

    }