bnyer
/
scanCode
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

设置页面处理

master
chengkun 3 years ago
parent
eab1f5ce70
commit
fef49f3bb2
1 changed files with 277 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 301
      pages/setting/Setting.vue

301
pages/setting/Setting.vue
View File

@ -1,9 +1,137 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</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-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>
@ -11,7 +139,13 @@
export default {
data() {
return {
title: 'Hello'
cardMode: true,
beepChecked: true,
ClipboardCheked: true,
DarkModeChecked: true,
unlined: false,
inactiveColor: 'grey',
activeColor: 'darkblue'
}
},
onLoad() {
@ -23,30 +157,149 @@
}
</script>
<style>
<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;
// }
// }
// }
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

Write Preview
Loading…
Cancel
Save