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