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

添加页面

master
Penny 3 years ago
parent
cf2971fc0f
commit
eab1f5ce70
16 changed files with 1651 additions and 377 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. 2
      manifest.json
  2. 79
      pages/scan/Barcode.vue
  3. 142
      pages/scan/Book.vue
  4. 140
      pages/scan/Calendar.vue
  5. 138
      pages/scan/Contacts.vue
  6. 141
      pages/scan/Email.vue
  7. 140
      pages/scan/Location.vue
  8. 133
      pages/scan/Paypal.vue
  9. 136
      pages/scan/Product.vue
  10. 2
      pages/scan/Scan.vue
  11. 140
      pages/scan/Sms.vue
  12. 140
      pages/scan/Tel.vue
  13. 140
      pages/scan/Text.vue
  14. 136
      pages/scan/Url.vue
  15. 143
      pages/scan/Wifi.vue
  16. 4
      tuniao-ui/libs/css/main.scss

2
manifest.json
View File

@ -1,6 +1,6 @@
{
"name" : "scanCode",
"appid" : "",
"appid" : "__UNI__44D25EC",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",

79
pages/scan/Barcode.vue
View File

@ -1,21 +1,21 @@
<template>
<view class="content">
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view title="1" :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem">我是扫码内容部分</tn-list-cell>
<view class="cutline"></view>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view class="tn-icon-search"></view>
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
@ -32,18 +32,18 @@
fastToolList:[
{
"index": 0,
"text":"Web Sertch",
"text":"Web Search",
"icon": "tn-icon-search"
},
{
"index": 1,
"text":"Copy",
"icon": "tn-icon-search"
"icon": "tn-icon-copy-fill"
},
{
"index": 2,
"text":"Share",
"icon": "tn-icon-search"
"icon": "tn-icon-share-triangle"
}
]
}
@ -66,48 +66,37 @@
background-color: #000000;
height:100%;
}
.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;
}
.listView{
z-index: 0;
position: relative;
width: 300px;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
height: 50px;
margin-top: 30px;
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
@ -115,8 +104,16 @@
}
}
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
@ -133,6 +130,15 @@
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
@ -144,4 +150,5 @@
border: 1px solid #8f8f94;
}
}
</style>

142
pages/scan/Book.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Book'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Web Search",
"icon": "tn-icon-search"
},
{
"index": 1,
"text":"View in store",
"icon": "tn-icon-shop"
},
{
"index": 2,
"text":"Price history",
"icon": "tn-icon-statistics"
},
{
"index": 3,
"text":"Copy",
"icon": "tn-icon-copy-fill"
}
]
}
},
onLoad() {
@ -23,30 +62,99 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.text-area {
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

140
pages/scan/Calendar.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Calendar'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Add to events",
"icon": "tn-icon-calendar"
},
{
"index": 1,
"text":"Send email",
"icon": "tn-icon-email"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,97 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.text-area {
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

138
pages/scan/Contacts.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Contacts'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Add to contacts",
"icon": "tn-icon-my-circle-fill"
},
{
"index": 1,
"text":"Call",
"icon": "tn-icon-tel"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,95 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

141
pages/scan/Email.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Email'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Send email",
"icon": "tn-icon-email"
},
{
"index": 1,
"text":"Add to contacts",
"icon": "tn-icon-my-circle-fill"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,98 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.text-area {
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

140
pages/scan/Location.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Location'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Show on map",
"icon": "tn-icon-map"
},
{
"index": 1,
"text":"Navigation",
"icon": "tn-icon-share"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,97 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.text-area {
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

133
pages/scan/Paypal.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,24 @@
export default {
data() {
return {
title: 'Paypal'
col: 3,
fastToolList:[
{
"index": 0,
"text":"Open",
"icon": "tn-icon-plane"
},
{
"index": 1,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 2,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -29,24 +63,91 @@
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.text-area {
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

136
pages/scan/Product.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,24 @@
export default {
data() {
return {
title: 'Product'
col: 3,
fastToolList:[
{
"index": 0,
"text":"Web Search",
"icon": "tn-icon-search"
},
{
"index": 1,
"text":"View in store",
"icon": "tn-icon-shop"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
}
]
}
},
onLoad() {
@ -23,30 +57,98 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.text-area {
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

2
pages/scan/Scan.vue
View File

@ -13,7 +13,7 @@
<tn-button shape="round" @click="jumpToPage('/pages/scan/Paypal')">跳转Paypal页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Product')">跳转Product页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Sms')">跳转Sms页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Tel')">跳转Url页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Tel')">跳转Tel页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Text')">跳转Text页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Url')">跳转Url页面</tn-button>
<tn-button shape="round" @click="jumpToPage('/pages/scan/Wifi')">跳转Wifi页面</tn-button>

140
pages/scan/Sms.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Sms'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Send SMS",
"icon": "tn-icon-email"
},
{
"index": 1,
"text":"Send MMS",
"icon": "tn-icon-my-circle-fill"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,97 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.text-area {
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

140
pages/scan/Tel.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Tel'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Call",
"icon": "tn-icon-tel"
},
{
"index": 1,
"text":"Add to contacts",
"icon": "tn-icon-my-circle-fill"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,97 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.text-area {
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

140
pages/scan/Text.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Text'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Web Search",
"icon": "tn-icon-search"
},
{
"index": 1,
"text":"Send email",
"icon": "tn-icon-email"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,97 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.text-area {
}
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
}
</style>

136
pages/scan/Url.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,24 @@
export default {
data() {
return {
title: 'Url'
col: 3,
fastToolList:[
{
"index": 0,
"text":"Open",
"icon": "tn-icon-plane"
},
{
"index": 1,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 2,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +57,98 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.text-area {
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

143
pages/scan/Wifi.vue
View File

@ -1,9 +1,26 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
<tn-list-view :card="true" unlined="all" class="listView">
<tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
<tn-list-cell class="listItem">
<tn-grid align="center" :col="col">
<block v-for="(item, index) in fastToolList" :key="index">
<tn-grid-item class="toolItem">
<view :class="item.icon"></view>
<view class="cutline"></view>
<view class="toolText">{{ item.text }}</view>
</tn-grid-item>
</block>
</tn-grid>
</tn-list-cell>
<view class="cutline"></view>
<tn-list-cell class="listItem-ad">我是谷歌ad部分</tn-list-cell>
<tn-list-cell class="listItemBottom">
<image src="/static/logo.png" class="buttomImg"/>
</tn-list-cell>
</tn-list-view>
<text class="bottomText">Feedback or Suggestion</text>
</view>
</template>
@ -11,7 +28,29 @@
export default {
data() {
return {
title: 'Wifi'
col: 4,
fastToolList:[
{
"index": 0,
"text":"Connect to Wifi",
"icon": "tn-icon-wifi"
},
{
"index": 1,
"text":"Copy password",
"icon": "tn-icon-coupon"
},
{
"index": 2,
"text":"Copy",
"icon": "tn-icon-copy-fill"
},
{
"index": 3,
"text":"Share",
"icon": "tn-icon-share-triangle"
}
]
}
},
onLoad() {
@ -23,30 +62,100 @@
}
</script>
<style>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
height:100%;
.listView{
z-index: 0;
position: relative;
width: 330px;
height:500px;
margin-top: 50px;
background-color: #141b29;
.listItem-1{
margin-top: 60px;
background-color: #141b29;
color: #fff;
//border: 2px solid yellow;
height: 80px;
text-align: center;
}
.listItem{
//border: 2px solid yellow;
height: 80px;
//margin-top: 30px;
//padding-top: 30px;
background-color: #141b29;
color: #fff;
.toolItem{
//border: 2px solid red;
background-color: #141b29;
font-size: 30px;
height: 60px;
text-align: center;
.toolText{
font-size: 12px;
color: #fff;
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
.listItem-ad{
background-color: #141b29;
text-align: center;
color: #fff;
//border: 2px solid red;
height: 80px;
}
.listItemBottom{
height: 200px;
margin-top: 10px;
background-color: #141b29;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.buttomImg{
width: 150px;
height: 150px;
}
}
}
.icon{
z-index: 1;
position: absolute;
margin-top: -480px;
}
.bottomText{
color: #fff;
text-align: center;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}
.cutline{
border: 1px solid #8f8f94;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

4
tuniao-ui/libs/css/main.scss
View File

@ -668,6 +668,10 @@ button::after {
.tn-hover {
opacity: 0.6;
}
.tn-special-hover{
z-index: -1;
//opacity: 0.6;
}
/* hover 点击效果 end */
/* 去除原生button样式 start */

Write Preview
Loading…
Cancel
Save