Add mobile UI for proxy-url setting
This commit is contained in:
parent
73818195b3
commit
e321c15da5
3 changed files with 48 additions and 12 deletions
|
@ -15,10 +15,10 @@
|
|||
:setting-parent="[...settingParent, subSetting]"
|
||||
:setting="subSetting"
|
||||
:data="data[setting.key]"
|
||||
:custom-label-width="isDesktop ? 'auto' : '100px'"
|
||||
:custom-label-width="isDesktop ? '120px' : '100px'"
|
||||
:label-class="'center-label'"
|
||||
:input-class="'keyword-inner-input'"
|
||||
:margin="margin + 20"
|
||||
:margin="isDesktop ? margin + 15 : margin + 8"
|
||||
:nested="true"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
@ -103,7 +103,6 @@
|
|||
<div
|
||||
v-if="setting.description && setting.type !== 'keyword'"
|
||||
:class="inputClass"
|
||||
:style="`margin-left:${margin}px`"
|
||||
class="expl"
|
||||
v-html="getFormattedDescription(setting.description)"/>
|
||||
</el-form-item>
|
||||
|
@ -193,11 +192,6 @@ export default {
|
|||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentMargin: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canBeDeleted() {
|
||||
const { group, key } = this.settingGroup
|
||||
|
|
|
@ -1,16 +1,20 @@
|
|||
<template>
|
||||
<div class="setting-input">
|
||||
<div class="proxy-url-input">
|
||||
<el-input
|
||||
:value="proxyUrlData.host"
|
||||
placeholder="host (e.g. localhost or 127.0.0.1)"
|
||||
class="proxy-url-host-input"
|
||||
@input="updateProxyUrl($event, 'host')"/> :
|
||||
@input="updateProxyUrl($event, 'host')"/>
|
||||
<span v-if="isDesktop">:</span>
|
||||
<el-input
|
||||
:value="proxyUrlData.port"
|
||||
placeholder="port (e.g 9020 or 3090)"
|
||||
class="proxy-url-value-input"
|
||||
@input="updateProxyUrl($event, 'port')"/>
|
||||
<el-checkbox :value="proxyUrlData.socks5" class="name-input" @change="updateProxyUrl($event, 'socks5')">Socks5</el-checkbox>
|
||||
<div class="socks5-checkbox-container">
|
||||
<el-checkbox :value="proxyUrlData.socks5" @change="updateProxyUrl($event, 'socks5')"/>
|
||||
<span class="socks5-checkbox">Socks5</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -47,6 +51,9 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.$store.state.app.device === 'desktop'
|
||||
},
|
||||
settings() {
|
||||
return this.$store.state.settings.settings
|
||||
},
|
||||
|
|
|
@ -154,9 +154,14 @@
|
|||
width: 20%;
|
||||
margin-right: 8px
|
||||
}
|
||||
.proxy-url-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.proxy-url-host-input {
|
||||
width: 35%;
|
||||
margin-right: 10px
|
||||
margin-right: 8px
|
||||
}
|
||||
.proxy-url-value-input {
|
||||
width: 35%;
|
||||
|
@ -185,6 +190,20 @@
|
|||
.single-input {
|
||||
margin-right: 10px
|
||||
}
|
||||
.socks5-checkbox {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.socks5-checkbox-container {
|
||||
width: 40%;
|
||||
height: 36px;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ssl-tls-opts {
|
||||
margin: 36px 0 0 0;
|
||||
}
|
||||
|
@ -257,6 +276,19 @@
|
|||
margin: 4px 7px 0 -5px;
|
||||
}
|
||||
}
|
||||
.proxy-url-input {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.proxy-url-host-input {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.proxy-url-value-input {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.setting-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -266,6 +298,9 @@
|
|||
width: 90%;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
.socks5-checkbox-container {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__inner {
|
||||
padding: 0 5px 0 5px
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue