|
|
@ -2,136 +2,145 @@ |
|
|
<view class="content"> |
|
|
<view class="content"> |
|
|
|
|
|
|
|
|
<!-- 顶部通用设置模块 --> |
|
|
<!-- 顶部通用设置模块 --> |
|
|
<view class="headLine">General Settings</view> |
|
|
<view> |
|
|
<tn-list-view :card="cardMode" class="settingList" unlined="all"> |
|
|
<view class="headLine">General Settings</view> |
|
|
<tn-list-cell class="listItem"> |
|
|
<tn-list-view :card="cardMode" class="settingList" unlined="all"> |
|
|
<view class="list-icon-text"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-left"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-icon tn-icon-circle-fill tn-color-gray"></view> |
|
|
<view class="list-left-text-one">Beep</view> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-text-two">Beep when the scan is successfull.</view> |
|
|
<view class="list-left-text-one">Beep</view> |
|
|
</view> |
|
|
<view class="list-left-text-two">Beep when the scan is successfull.</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
</view> |
|
|
<view class="list-right"> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1" |
|
|
<view class="list-right"> |
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> |
|
|
<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1" |
|
|
|
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</tn-list-cell> |
|
|
|
|
|
|
|
|
<tn-list-cell class="listItem"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-icon-text"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left"> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-text-one">Auto-copied to clipboard</view> |
|
|
<view class="list-left-text-one">Auto-copied to clipboard</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<view class="list-right"> |
|
|
<view class="list-right"> |
|
|
<tn-switch v-model="ClipboardCheked" :inactiveValue="0" :activeValue="1" |
|
|
<tn-switch v-model="ClipboardCheked" :inactiveValue="0" :activeValue="1" |
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> |
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</tn-list-cell> |
|
|
|
|
|
|
|
|
<tn-list-cell class="listItem"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-icon-text"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left"> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-icon tn-icon-search tn-color-gray"></view> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left-select-text"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-select-text-one">Search Engine</view> |
|
|
<view class="list-left-text-one">Search Engine</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<view class="list-right"> |
|
|
<view class="list-right"> |
|
|
<text class="list-right-text">{{ webEngineLabel }}</text><text class="tn-icon-down-triangle list-right-icon" @click="openWebSelectView"></text> |
|
|
<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> --> |
|
|
<tn-select title="Select Browser" :confirmText="confirmText" :cancelText="cancelText" |
|
|
|
|
|
v-model="webEngine" mode="single" :list="webEngineList" @confirm="selectWebEngine" :searchShow="searchEngineFlag" :searchPlaceholder="placeholderText"></tn-select> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</tn-list-cell> |
|
|
|
|
|
|
|
|
<tn-list-cell class="listItem"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-icon-text"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left"> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-icon tn-icon-moon-fill tn-color-gray"></view> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-text-one">Dark Mode</view> |
|
|
<view class="list-left-text-one">Dark Mode</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<view class="list-right"> |
|
|
<view class="list-right"> |
|
|
<tn-switch v-model="DarkModeChecked" :inactiveValue="0" :activeValue="1" |
|
|
<tn-switch v-model="DarkModeChecked" :inactiveValue="0" :activeValue="1" |
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> |
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</tn-list-cell> |
|
|
|
|
|
|
|
|
<tn-list-cell class="listItem"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-icon-text"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left"> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-icon tn-icon-english tn-color-gray"></view> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left-select-text"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-select-text-one">Language options</view> |
|
|
<view class="list-left-text-one">Language options</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<!-- 右边操作按钮部分 --> |
|
|
<view class="list-right"> |
|
|
<view class="list-right"> |
|
|
<text class="list-right-text">{{ languageLabel }}</text><text class="tn-icon-down-triangle list-right-icon" @click="openLanguageSelectView"></text> |
|
|
<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> --> |
|
|
<tn-select title="Select Language" :confirmText="confirmText" :cancelText="cancelText" |
|
|
|
|
|
v-model="language" mode="single" :list="languageList" @confirm="selectLanauage" :searchShow="searchLanguageFlag" :searchPlaceholder="placeholderText"></tn-select> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</tn-list-cell> |
|
|
</tn-list-view> |
|
|
</tn-list-view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部Help帮助模块 --> |
|
|
<!-- 底部Help帮助模块 --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="headLine">Help</view> |
|
|
<view> |
|
|
<tn-list-view :card="cardMode" class="settingList"> |
|
|
<view class="headLine">Help</view> |
|
|
<tn-list-cell class="listItem"> |
|
|
<tn-list-view :card="cardMode" class="settingList"> |
|
|
<view class="list-icon-text"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-left"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-icon tn-icon-help tn-color-gray"></view> |
|
|
<view class="list-left-text-one">FAQ</view> |
|
|
<view class="list-left-text"> |
|
|
</view> |
|
|
<view class="list-left-text-one">FAQ</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</view> |
|
|
|
|
|
</tn-list-cell> |
|
|
<tn-list-cell class="listItem"> |
|
|
|
|
|
<view class="list-icon-text"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-left"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-icon tn-icon-edit-form tn-color-gray"></view> |
|
|
<view class="list-left-text-one">Feedback</view> |
|
|
<view class="list-left-feedback-text"> |
|
|
<view class="list-left-text-two">Report bugs and tell us what to improve</view> |
|
|
<view class="list-left-feedback-text-one">Feedback</view> |
|
|
</view> |
|
|
<view class="list-left-feedback-text-two">Report bugs and tell us what to improve.</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</view> |
|
|
|
|
|
</tn-list-cell> |
|
|
<tn-list-cell class="listItem"> |
|
|
|
|
|
<view class="list-icon-text"> |
|
|
<tn-list-cell class="listItem"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-icon-text"> |
|
|
<view class="list-left"> |
|
|
<!-- 左边图标文本显示部分 --> |
|
|
<view class="list-left-icon tn-icon-discover tn-color-gray"></view> |
|
|
<view class="list-left"> |
|
|
<view class="list-left-text"> |
|
|
<view class="list-left-icon tn-icon-safe-fill tn-color-gray"></view> |
|
|
<view class="list-left-text-one">Provacy policy</view> |
|
|
<view class="list-left-text"> |
|
|
</view> |
|
|
<view class="list-left-text-one">Provacy policy</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</tn-list-cell> |
|
|
</view> |
|
|
</tn-list-view> |
|
|
</tn-list-cell> |
|
|
|
|
|
</tn-list-view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -145,7 +154,60 @@ |
|
|
DarkModeChecked: true, |
|
|
DarkModeChecked: true, |
|
|
unlined: false, |
|
|
unlined: false, |
|
|
inactiveColor: 'grey', |
|
|
inactiveColor: 'grey', |
|
|
activeColor: 'darkblue' |
|
|
activeColor: 'royalblue', |
|
|
|
|
|
webEngine: false, //打开浏览器列表 |
|
|
|
|
|
searchEngineFlag: true, //打开浏览器搜索框 |
|
|
|
|
|
webEngineLabel: 'Google', //默认浏览器选择文本 |
|
|
|
|
|
webEngineValue: 0, //默认浏览器选择结果 |
|
|
|
|
|
placeholderText: 'search which you like', //搜索文本占位文字 |
|
|
|
|
|
confirmText: 'Confirm', //搜索确认文本 |
|
|
|
|
|
cancelText: 'Cancel', //搜索取消文本 |
|
|
|
|
|
language: false, //打开语言列表 |
|
|
|
|
|
languageLabel: 'English', //默认语言选择文本 |
|
|
|
|
|
languageValue: 0, //默认语言选择结果 |
|
|
|
|
|
searchLanguageFlag: true, //打开语言搜索框 |
|
|
|
|
|
|
|
|
|
|
|
webEngineList:[ |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 0, |
|
|
|
|
|
"label": "Google" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 1, |
|
|
|
|
|
"label": "Yahoo" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 2, |
|
|
|
|
|
"label": "Bing" |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
languageList:[ |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 0, |
|
|
|
|
|
"label": "English" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 1, |
|
|
|
|
|
"label": "Deutsch" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 2, |
|
|
|
|
|
"label": "A" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 3, |
|
|
|
|
|
"label": "B" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 4, |
|
|
|
|
|
"label": "C" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"value": 5, |
|
|
|
|
|
"label": "D" |
|
|
|
|
|
}, |
|
|
|
|
|
] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
@ -153,6 +215,29 @@ |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
//选择搜索引擎 |
|
|
|
|
|
selectWebEngine(e){ |
|
|
|
|
|
console.log('选择了浏览器',e[0].label); |
|
|
|
|
|
this.webEngineLabel = e[0].label; |
|
|
|
|
|
this.webEngineValue = e[0].value; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//打开选择搜索引擎界面 |
|
|
|
|
|
openWebSelectView(){ |
|
|
|
|
|
this.webEngine = true; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//打开选择语言界面 |
|
|
|
|
|
openLanguageSelectView(){ |
|
|
|
|
|
this.language = true; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//选择语言 |
|
|
|
|
|
selectLanauage(e){ |
|
|
|
|
|
console.log('选择了语言',e[0].label); |
|
|
|
|
|
this.languageLabel = e[0].label; |
|
|
|
|
|
this.languageValue = e[0].value; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
@ -171,7 +256,10 @@ |
|
|
.headLine{ |
|
|
.headLine{ |
|
|
color: royalblue; |
|
|
color: royalblue; |
|
|
font-size: 18px; |
|
|
font-size: 18px; |
|
|
padding-top:30px; |
|
|
//padding-top:30px; |
|
|
|
|
|
//margin-right:200px; |
|
|
|
|
|
margin-top:30px; |
|
|
|
|
|
//border: 2px solid purple; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.settingList{ |
|
|
.settingList{ |
|
|
@ -179,7 +267,7 @@ |
|
|
width: 330px; |
|
|
width: 330px; |
|
|
//height:300px; |
|
|
//height:300px; |
|
|
height: auto; |
|
|
height: auto; |
|
|
margin-top: 50px; |
|
|
//margin-top: 10px; |
|
|
//background-color: #141b29; |
|
|
//background-color: #141b29; |
|
|
|
|
|
|
|
|
.listItem{ |
|
|
.listItem{ |
|
|
@ -216,6 +304,20 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.list-left-feedback-text{ |
|
|
|
|
|
width: 240px; |
|
|
|
|
|
.list-left-feedback-text-one{ |
|
|
|
|
|
font-size: 15px; |
|
|
|
|
|
//border: 2px solid blue; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.list-left-feedback-text-two{ |
|
|
|
|
|
color: grey; |
|
|
|
|
|
font-size:13px; |
|
|
|
|
|
//border: 2px solid lightsalmon; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.list-left-icon{ |
|
|
.list-left-icon{ |
|
|
//border: 2px solid blueviolet; |
|
|
//border: 2px solid blueviolet; |
|
|
@ -223,42 +325,34 @@ |
|
|
font-size: 25px; |
|
|
font-size: 25px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.list-left-select-text{ |
|
|
|
|
|
width: 160px; |
|
|
|
|
|
.list-left-select-text-one{ |
|
|
|
|
|
font-size: 15px; |
|
|
|
|
|
//border: 2px solid blue; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.list-right{ |
|
|
.list-right{ |
|
|
//border: 2px solid pink; |
|
|
//border: 2px solid pink; |
|
|
} |
|
|
color: royalblue; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
|
|
|
// .list { |
|
|
.list-right-icon{ |
|
|
// &__left { |
|
|
//border: 2px solid gainsboro; |
|
|
// display: flex; |
|
|
font-size: 25px; |
|
|
// align-items: center; |
|
|
margin-left: 15px; |
|
|
// justify-content: flex-start; |
|
|
} |
|
|
|
|
|
|
|
|
// &__icon, &__image { |
|
|
|
|
|
// margin-right: 18rpx; |
|
|
|
|
|
// font-size: 25px; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// &__right { |
|
|
|
|
|
// display: flex; |
|
|
|
|
|
// align-items: center; |
|
|
|
|
|
// justify-content: flex-end; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.list-right-text{ |
|
|
|
|
|
//border: 2px solid green; |
|
|
|
|
|
//margin-right: 30px; |
|
|
|
|
|
//padding-right: 30px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// .icon{ |
|
|
|
|
|
// color: dimgrey; |
|
|
|
|
|
// font-size: 25px; |
|
|
|
|
|
// display: flex; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|