| | |
|---|
| | | <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"
|
|---|
| | |
|---|
| | | <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
|
|---|
| | | <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"
|
|---|
| | |
|---|
| | | <div class="p-title">前缀</div>
|
|---|
| | | <div style="display: flex; width: 100%">
|
|---|
| | | <el-input
|
|---|
| | | v-model="wifiForm.password"
|
|---|
| | | v-model="ipv6Form.prefix"
|
|---|
| | | placeholder
|
|---|
| | | size="small"
|
|---|
| | | ></el-input>
|
|---|
| | |
|
|---|
| | | <div class="ad">
|
|---|
| | | <i class="el-icon-remove-outline"></i>
|
|---|
| | | <i class="el-icon-remove-outline" @click="minusPrefix"></i>
|
|---|
| | | </div>
|
|---|
| | | <div class="ad">
|
|---|
| | | <i class="el-icon-circle-plus-outline"></i>
|
|---|
| | | <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
|
|---|
| | | </div>
|
|---|
| | | <div class="ad"><i class="el-icon-refresh-left"></i></div>
|
|---|
| | | <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>
|
|---|
| | | </div>
|
|---|
| | | </el-form-item>
|
|---|
| | |
|
|---|
| | |
|---|
| | | <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]"
|
|---|
| | |
|---|
| | | this.fetchWireList();
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | minusPrefix(){
|
|---|
| | | debugger
|
|---|
| | | this.ipv6Form.prefix
|
|---|
| | | },
|
|---|
| | | switchNetCard(item) {
|
|---|
| | | if (item.active) {
|
|---|
| | | upNetCard({ ifname: item.name }).then(
|
|---|
| | |
|---|
| | | .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;
|
|---|
| | |
|---|
| | | 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,
|
|---|
| | |
|---|
| | | 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 {
|
|---|
| | |
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | .wifi-detail {
|
|---|
| | | max-width: 600px;
|
|---|
| | | max-width: 454px;
|
|---|
| | | margin: 0 auto;
|
|---|
| | | transition: all 0.3s linear 0s;
|
|---|
| | | .general-box {
|
|---|
| | |
|---|
| | | 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 {
|
|---|
| | |
|---|
| | | .ad {
|
|---|
| | | margin-top: 10px;
|
|---|
| | | 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;
|
|---|
| | | }
|
|---|
