网络设置ui调整

heyujie

2021-10-09 e2097c64f20cb34a8d1598467d62286ce09c1550

网络设置ui调整

 src/pages/settings/views/NetSettings.vue

@@ -123,13 +123,14 @@
            :value="isHighClass"

          ></switchBar>



          <div class="general-box">

          <div class="general-box" style="margin-bottom: 20px">

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



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

              <el-form-item>

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

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

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

                :popper-append-to-body="false">

                  <el-option

                    v-for="item in options"

                    :key="item.value"

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

          </div>



          <div class="general-box">

          <div class="general-box" style="margin-bottom: 20px">

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



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

              <el-form-item>

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

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

                <el-select v-model="value" placeholder="请选择" size="small" :popper-append-to-body="false">

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -281,38 +282,38 @@
        <div class="wire-detail" v-if="activePage == 2 && inWireDetail">

          <div class="title">网络设置</div>

          <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">

            <el-form-item  prop="name">

                <div class="p-title">网络名称</div>

            <el-form-item prop="name">

              <div class="p-title">网络名称</div>

              <div class="wifi-name">{{ "网络" + activeWireItem.index }}</div>

            </el-form-item>

            <el-form-item  prop="ifname">

                <div class="p-title">网卡</div>

            <el-form-item prop="ifname">

              <div class="p-title">网卡</div>

              <div class="wifi-name">{{ activeWireItem.name }}</div>

            </el-form-item>

            <el-form-item  prop="ip">

                <div class="p-title">IP</div>

            <el-form-item prop="ip">

              <div class="p-title">IP</div>

              <ip-input

                :ip="wireForm.ip"

                @on-blur="wireForm.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item prop="subMask">

                <div class="p-title">子网掩码</div>

              <div class="p-title">子网掩码</div>

              <ip-input

                :ip="wireForm.subMask"

                @on-blur="wireForm.subMask = arguments[0]"

              ></ip-input>

            </el-form-item>



            <el-form-item  prop="gateway">

                <div class="p-title">网关</div>

            <el-form-item prop="gateway">

              <div class="p-title">网关</div>

              <ip-input

                :ip="wireForm.gateway"

                @on-blur="wireForm.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item  prop="dns">

                <div class="p-title">DNS</div>

            <el-form-item prop="dns">

              <div class="p-title">DNS</div>

              <ip-input

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

@@ -561,22 +562,28 @@
.all {

  width: 100%;

}

.wire{

  width: 460px;

  margin: 0 auto;

}

.wire-detail {

  width: 460px;

  margin: 0 auto;

  .title {

    font-size: 16px;

    margin-bottom: 10px;

  }

  .ip-input-container {

          max-width: none !important;

          height: 32px;

          line-height: normal;

          box-sizing: border-box;

          // background-color: #f2f2f7;

          text-align: left;

          border-radius: 20px;

          border: 2px solid transparent;    display: flex;



        }

    max-width: none !important;

    height: 32px;

    line-height: normal;

    box-sizing: border-box;

    // background-color: #f2f2f7;

    text-align: left;

    border-radius: 20px;

    border: 2px solid transparent;

    display: flex;

  }

  .btns {

    display: flex;

    justify-content: space-between;

@@ -675,7 +682,9 @@
      font-size: 16px;

      line-height: 48px;

      color: #333333;

      font-weight: bold;

      font-weight: bold;    background: #F2F2F7;

    border-radius: 8px;

    margin-bottom: 10px;

    }

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

      > .el-form-item__label:before,

@@ -736,11 +745,10 @@
        background-color: #ffffff;

        border: 2px solid transparent;

        border-radius: 20px;

        height: 32px;

        height: 32px !important;

        padding: 0 15px;

        font-size: 14px;

        line-height: 32px;



        font-weight: bold;

      }

      .el-input__inner::placeholder {

@@ -812,13 +820,19 @@
      }

    }

    .wifi-detail {

      max-width: 600px;

      max-width: 454px;

      margin: 0 auto;

      .title {

        background: #f2f2f7;

        border-radius: 8px;

        height: 48px;

        margin-bottom: 4px;

      }

      .general-box {

        background: #f2f2f7;

        border-radius: 8px;

        padding-bottom: 10px;

        margin-bottom: 20px;



        .el-form-item {

          margin-bottom: 0px;

        }

@@ -852,21 +866,12 @@
        margin-top: 0;

        display: flex;

        justify-content: space-between;

        margin-bottom: 20px;

        .left {

          background-color: rgba(240, 240, 240, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          border-radius: 10px;

        margin-bottom: 4px;

        .cancel {

          width: 218px;

        }

        .right {

          background-color: rgba(61, 104, 225, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          color: #fff;

          border-radius: 10px;

        .ok {

          width: 218px;

        }

      }

      .wifi-name {

@@ -880,13 +885,8 @@
      }

      .ad {

        height: 32px;

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

        /* border-radius: 5px; */

        line-height: 31px;

        /* width: 27px; */

        text-align: center;

        font-size: 17px;

        /* font-weight: bold; */

        margin-left: 10px;

        cursor: pointer;

      }


 src/pages/settings/views/generalSettings.vue

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

  flex-basis: auto;

  box-sizing: border-box;

  .el-input__inner {

 height: 24px !important;

}

  .general-center {

    height: 100%;

    width: 300px;

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

}



.el-input__inner {

 height: 24px !important;

}







/* .el-tooltip__popper {