|
|
|
@ -1,9 +1,42 @@ |
|
|
|
<template> |
|
|
|
<view class="content"> |
|
|
|
<image class="logo" src="/static/logo.png"></image> |
|
|
|
<view class="text-area"> |
|
|
|
<text class="title">{{title}}</text> |
|
|
|
<view class="head"> |
|
|
|
<tn-list-view :card="cardMode" class="clipboard" unlined="all"> |
|
|
|
<tn-list-cell class="listItem1s"> |
|
|
|
<!-- <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">我是clipboard部分</view> |
|
|
|
<view class="list-left-text-two">Beep when the scan is successfull.</view> |
|
|
|
</view> |
|
|
|
</view>--> |
|
|
|
</tn-list-cell> |
|
|
|
</tn-list-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="center"> |
|
|
|
<tn-list-view :card="true" unlined="all" class="listView"> |
|
|
|
<tn-list-cell class="listItem"> |
|
|
|
<tn-grid align="center" :col="col"> |
|
|
|
<block v-for="(item, index) in categoryList" :key="index"> |
|
|
|
<tn-grid-item class="toolItem"> |
|
|
|
<view :class="item.icon"></view> |
|
|
|
<view class="toolText">{{ item.label }}</view> |
|
|
|
</tn-grid-item> |
|
|
|
</block> |
|
|
|
</tn-grid> |
|
|
|
</tn-list-cell> |
|
|
|
</tn-list-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <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">我是share app部分</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -11,7 +44,95 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
title: 'Hello' |
|
|
|
col: 2, |
|
|
|
cardMode: true, |
|
|
|
categoryList:[ |
|
|
|
{ |
|
|
|
"sort": 0, |
|
|
|
"label": "Website", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 1, |
|
|
|
"label": "Wifi", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 2, |
|
|
|
"label": "Text", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 3, |
|
|
|
"label": "Contact", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 4, |
|
|
|
"label": "Tel", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 5, |
|
|
|
"label": "E-mail", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 6, |
|
|
|
"label": "SMS", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 7, |
|
|
|
"label": "Calendar", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 8, |
|
|
|
"label": "My card", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 9, |
|
|
|
"label": "Facebook", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 10, |
|
|
|
"label": "Instagram", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 11, |
|
|
|
"label": "Whatsapp", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 12, |
|
|
|
"label": "Youtube", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 13, |
|
|
|
"label": "X", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 14, |
|
|
|
"label": "Spotity", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 15, |
|
|
|
"label": "Paypal", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 16, |
|
|
|
"label": "Viber", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
@ -23,30 +144,129 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style lang="scss"> |
|
|
|
.content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
background-color: #000000; |
|
|
|
height: auto; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.head{ |
|
|
|
//border: 2px solid green; |
|
|
|
width: 660rpx; |
|
|
|
height: 150rpx; |
|
|
|
margin-top: 60rpx; |
|
|
|
background-color: #141b29; |
|
|
|
z-index: 0; |
|
|
|
|
|
|
|
.clipboard{ |
|
|
|
border: 2px solid blue; |
|
|
|
//background-color: blueviolet; |
|
|
|
height: 150rpx; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.center{ |
|
|
|
border: 2px solid green; |
|
|
|
width: 660rpx; |
|
|
|
height: 700rpx; |
|
|
|
margin-top: 60rpx; |
|
|
|
//background-color: #141b29; |
|
|
|
background-color: red; |
|
|
|
z-index: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
|
chengkun
3 years ago