You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
399 lines
10 KiB
399 lines
10 KiB
<template>
|
|
<view class="content">
|
|
|
|
<!-- 顶部通用设置模块 -->
|
|
<view>
|
|
<view class="headLine">General Settings</view>
|
|
<tn-list-view :card="cardMode" class="settingList" unlined="all">
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-circle-fill tn-color-gray"></view>
|
|
<view class="list-left-text">
|
|
<view class="list-left-text-one">Beep</view>
|
|
<view class="list-left-text-two">Beep when the scan is successfull.</view>
|
|
</view>
|
|
</view>
|
|
<!-- 右边操作按钮部分 -->
|
|
<view class="list-right">
|
|
<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
|
|
<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-text">
|
|
<view class="list-left-text-one">Auto-copied to clipboard</view>
|
|
</view>
|
|
</view>
|
|
<!-- 右边操作按钮部分 -->
|
|
<view class="list-right">
|
|
<tn-switch v-model="ClipboardCheked" :inactiveValue="0" :activeValue="1"
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-search tn-color-gray"></view>
|
|
<view class="list-left-select-text">
|
|
<view class="list-left-select-text-one">Search Engine</view>
|
|
</view>
|
|
</view>
|
|
<!-- 右边操作按钮部分 -->
|
|
<view class="list-right">
|
|
<text class="list-right-text">{{ webEngineLabel }}</text><text class="tn-icon-down-triangle list-right-icon" @click="openWebSelectView"></text>
|
|
<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>
|
|
</tn-list-cell>
|
|
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-moon-fill tn-color-gray"></view>
|
|
<view class="list-left-text">
|
|
<view class="list-left-text-one">Dark Mode</view>
|
|
</view>
|
|
</view>
|
|
<!-- 右边操作按钮部分 -->
|
|
<view class="list-right">
|
|
<tn-switch v-model="DarkModeChecked" :inactiveValue="0" :activeValue="1"
|
|
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-english tn-color-gray"></view>
|
|
<view class="list-left-select-text">
|
|
<view class="list-left-select-text-one">Language options</view>
|
|
</view>
|
|
</view>
|
|
<!-- 右边操作按钮部分 -->
|
|
<view class="list-right">
|
|
<text class="list-right-text">{{ languageLabel }}</text><text class="tn-icon-down-triangle list-right-icon" @click="openLanguageSelectView"></text>
|
|
<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>
|
|
</tn-list-cell>
|
|
</tn-list-view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 底部Help帮助模块 -->
|
|
|
|
|
|
<view>
|
|
<view class="headLine">Help</view>
|
|
<tn-list-view :card="cardMode" class="settingList">
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-help tn-color-gray"></view>
|
|
<view class="list-left-text">
|
|
<view class="list-left-text-one">FAQ</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-edit-form tn-color-gray"></view>
|
|
<view class="list-left-feedback-text">
|
|
<view class="list-left-feedback-text-one">Feedback</view>
|
|
<view class="list-left-feedback-text-two">Report bugs and tell us what to improve.</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
|
|
<tn-list-cell class="listItem">
|
|
<view class="list-icon-text">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<view class="list-left">
|
|
<view class="list-left-icon tn-icon-safe-fill tn-color-gray"></view>
|
|
<view class="list-left-text">
|
|
<view class="list-left-text-one">Provacy policy</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
</tn-list-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cardMode: true,
|
|
beepChecked: true,
|
|
ClipboardCheked: true,
|
|
DarkModeChecked: true,
|
|
unlined: false,
|
|
inactiveColor: 'grey',
|
|
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() {
|
|
|
|
},
|
|
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>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #000000;
|
|
height:100%;
|
|
|
|
|
|
|
|
.headLine{
|
|
color: royalblue;
|
|
font-size: 18px;
|
|
//padding-top:30px;
|
|
//margin-right:200px;
|
|
margin-top:30px;
|
|
//border: 2px solid purple;
|
|
}
|
|
|
|
.settingList{
|
|
//border: 2px solid red;
|
|
width: 330px;
|
|
//height:300px;
|
|
height: auto;
|
|
//margin-top: 10px;
|
|
//background-color: #141b29;
|
|
|
|
.listItem{
|
|
//border: 2px solid yellow;
|
|
height: 50px;
|
|
//margin-top: 30px;
|
|
background-color: #141b29;
|
|
color: #fff;
|
|
text-align: start;
|
|
|
|
.list-icon-text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
|
|
.list-left{
|
|
//border: 2px solid green;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.list-left-text{
|
|
width: 210px;
|
|
.list-left-text-one{
|
|
font-size: 15px;
|
|
//border: 2px solid blue;
|
|
}
|
|
|
|
.list-left-text-two{
|
|
color: grey;
|
|
font-size:13px;
|
|
//border: 2px solid lightsalmon;
|
|
}
|
|
}
|
|
|
|
.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{
|
|
//border: 2px solid blueviolet;
|
|
margin-right: 10px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.list-left-select-text{
|
|
width: 160px;
|
|
.list-left-select-text-one{
|
|
font-size: 15px;
|
|
//border: 2px solid blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-right{
|
|
//border: 2px solid pink;
|
|
color: royalblue;
|
|
font-size: 20px;
|
|
|
|
.list-right-icon{
|
|
//border: 2px solid gainsboro;
|
|
font-size: 25px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.list-right-text{
|
|
//border: 2px solid green;
|
|
//margin-right: 30px;
|
|
//padding-right: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// .message {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// align-items: center;
|
|
// justify-content: space-around;
|
|
|
|
// &__left {
|
|
// width: 10%;
|
|
// }
|
|
// &__middle {
|
|
// width: 80%;
|
|
// padding-left: 20rpx;
|
|
// padding-right: 40rpx;
|
|
// }
|
|
// &__right {
|
|
// width: 10%;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// }
|
|
|
|
// &__name {
|
|
// font-size: 32rpx;
|
|
// margin-bottom: 8rpx;
|
|
// }
|
|
// &__content {
|
|
// //margin-top: 20px;
|
|
// font-size: 26rpx;
|
|
// color: #838383;
|
|
// }
|
|
// &__tips {
|
|
// &__icon {
|
|
// font-size: 36rpx;
|
|
// color: #AAAAAA;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
|
|
</style>
|
|
|