|
|
|
|
<template>
|
|
|
|
|
<view class="content">
|
|
|
|
|
|
|
|
|
|
<!-- 顶部通用设置模块 -->
|
|
|
|
|
<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-discover 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-discover tn-color-gray"></view>
|
|
|
|
|
<view class="list-left-text">
|
|
|
|
|
<view class="list-left-text-one">Search Engine</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 右边操作按钮部分 -->
|
|
|
|
|
<view class="list-right">
|
|
|
|
|
<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></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">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-discover tn-color-gray"></view>
|
|
|
|
|
<view class="list-left-text">
|
|
|
|
|
<view class="list-left-text-one">Language options</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 右边操作按钮部分 -->
|
|
|
|
|
<view class="list-right">
|
|
|
|
|
<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> -->
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</tn-list-cell>
|
|
|
|
|
</tn-list-view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部Help帮助模块 -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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-discover 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-discover tn-color-gray"></view>
|
|
|
|
|
<view class="list-left-text">
|
|
|
|
|
<view class="list-left-text-one">Feedback</view>
|
|
|
|
|
<view class="list-left-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-discover 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>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
cardMode: true,
|
|
|
|
|
beepChecked: true,
|
|
|
|
|
ClipboardCheked: true,
|
|
|
|
|
DarkModeChecked: true,
|
|
|
|
|
unlined: false,
|
|
|
|
|
inactiveColor: 'grey',
|
|
|
|
|
activeColor: 'darkblue'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.settingList{
|
|
|
|
|
//border: 2px solid red;
|
|
|
|
|
width: 330px;
|
|
|
|
|
//height:300px;
|
|
|
|
|
height: auto;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
//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-icon{
|
|
|
|
|
//border: 2px solid blueviolet;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-right{
|
|
|
|
|
//border: 2px solid pink;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .list {
|
|
|
|
|
// &__left {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// justify-content: flex-start;
|
|
|
|
|
|
|
|
|
|
// &__icon, &__image {
|
|
|
|
|
// margin-right: 18rpx;
|
|
|
|
|
// font-size: 25px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// &__right {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// justify-content: flex-end;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .icon{
|
|
|
|
|
// color: dimgrey;
|
|
|
|
|
// font-size: 25px;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .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>
|
