chengkun
3 years ago
18 changed files with 661 additions and 565 deletions
@ -1,153 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<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> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
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() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue