拓扑图

ZZJ

2021-10-13 878ce80ef3ca88a2c108fbc713cd6ea461c44de1

 src/pages/settings/views/NetSettings.vue

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

          </div>

        </div>

        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail">

        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">

          <div class="title">无线网络</div>

          <div class="btns">

            <div class="cancel">删除</div>

@@ -91,7 +91,6 @@


            <el-form

              :model="wifiForm"

              :rules="wifiFormRules"

              ref="wifiForm"

              class="join-form"

            >

@@ -119,12 +118,14 @@


          <switchBar

            :barName="`高级设置`"

            @switchChange="highClassSetting"

            :value="isHighClass"

          ></switchBar>



          <div class="general-box">

            <div class="in-title">IPV4</div>

          <div class="general-box fold" :class="{'hidden':IPV4_hid}" >

            <div class="in-title">IPV4 
              <span class="icon iconfont icon-fold"

               @click="toggleFold('IPV4_hid')">&#xe757;</span>

            </div>



            <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">

              <el-form-item>

@@ -177,10 +178,13 @@
            </el-form>

          </div>



          <div class="general-box">

            <div class="in-title">IPV6</div>

          <div class="general-box fold" :class="{'hidden':IPV6_hid}" ref="ipv6Holder">

            <div class="in-title">IPV6 
              <span class="icon iconfont icon-fold"

              @click="toggleFold('IPV6_hid')">&#xe757;</span>

            </div>



            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form">

            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">

              <el-form-item>

                <div class="p-title">方法</div>

                <el-select v-model="value" placeholder="请选择" size="small">

@@ -414,6 +418,8 @@
        },

      ],

      value: "",

      IPV4_hid: false,

      IPV6_hid: false

    };

  },

  components: {

@@ -489,10 +495,15 @@
      });

    },

    openRight(i) {

      this.activePage = i;

      if (i == 0) {

        this.ruleForm.deviceName = "";

        this.ruleForm.port = "";

        this.getCurServer()

      }      
      if (i == 1) {

        this.inWifiDetail = false;

      }

      this.activePage = i;

    },

    saveWire(ifname) {

      let data = {

@@ -549,6 +560,17 @@
        this.openWireDetail(item);

      });

    },

    toggleFold(tog) {

    const demo = this.$refs.ipvHolder

    if(!(this.IPV4_hid&&!this.IPV6_hid)){

       setTimeout(() => {

       demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})

       }, 300);

    }

    this[tog] = !this[tog]

     
     
     }

  },

  computed: {

    showStatus() {

@@ -814,11 +836,30 @@
    .wifi-detail {

      max-width: 600px;

      margin: 0 auto;

      transition: all 0.3s linear 0s;

      .general-box {

        overflow: hidden;

        transition: all 0.3s linear 0s;

        background: #f2f2f7;

        border-radius: 8px;

        padding-bottom: 10px;

        margin-bottom: 20px;

        &.fold {

        height: 342px;

          .icon-fold {

            display: inline-block;

            font-size: 14px;

            margin-left: 360px;

            transition: all 0.3s linear 0s;

            cursor: pointer;

          }

        }

        &.hidden {

        height: 34px;

         .icon-fold {

           transform: rotate(180deg);

         }

        }

        .el-form-item {

          margin-bottom: 0px;

        }

@@ -879,6 +920,7 @@
        line-height: 48px;

      }

      .ad {

        margin-top: 10px;

        height: 32px;

        /* margin: 4px 0px 4px 5px; */

        /* border-radius: 5px; */