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