|
|
|
@ -2,41 +2,36 @@ |
|
|
|
<view class="content"> |
|
|
|
<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> |
|
|
|
<tn-list-cell @click="targetCreate(0)" class="listItem" :arrow="arrowStatus" :arrowRight="arrowRightStatus" :hover="hoverStatus"> |
|
|
|
<view class="list-icon-text"> |
|
|
|
<!-- 左边图标文本显示部分 --> |
|
|
|
<view class="list-left"> |
|
|
|
<view class="list-left-icon tn-icon-edit-form tn-color-white"></view> |
|
|
|
<view class="list-left-clipboard-text"> |
|
|
|
<view class="list-left-clipboard-text-one">Clipboard</view> |
|
|
|
<view class="list-left-clipboard-text-two">Copy to clipbord.</view> |
|
|
|
</view> |
|
|
|
</view>--> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</tn-list-cell> |
|
|
|
</tn-list-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<tn-grid align="center" :col="col" class="grid-view"> |
|
|
|
<view class="grid-item" v-for="(item, index) in categoryList" :key="index" @click="targetCreate(item.sort)"> |
|
|
|
<view :class="item.icon"></view> |
|
|
|
<view :class="item.text">{{ item.label }}</view> |
|
|
|
</view> |
|
|
|
</tn-grid> |
|
|
|
|
|
|
|
<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 class="bottom"> |
|
|
|
<view class="list-bottom-icon tn-icon-share-triangle tn-color-white"></view> |
|
|
|
<view class="list-bottom-text"> |
|
|
|
<view class="list-bottom-text-one tn-color-white">Use"Share"option from other apps</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -46,91 +41,111 @@ |
|
|
|
return { |
|
|
|
col: 2, |
|
|
|
cardMode: true, |
|
|
|
arrowStatus: true, |
|
|
|
arrowRightStatus: true, |
|
|
|
hoverStatus: true, |
|
|
|
categoryList:[ |
|
|
|
{ |
|
|
|
"sort": 0, |
|
|
|
"label": "Website", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-empty-network", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 1, |
|
|
|
"label": "Wifi", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-wifi", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 2, |
|
|
|
"label": "Text", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-font", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 3, |
|
|
|
"label": "Contact", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-my-circle-fill", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 4, |
|
|
|
"label": "Tel", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-tel", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 5, |
|
|
|
"label": "E-mail", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-email", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 6, |
|
|
|
"label": "SMS", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-message", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 7, |
|
|
|
"label": "Calendar", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-calendar", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 8, |
|
|
|
"label": "My card", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-bankcard", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 9, |
|
|
|
"label": "Facebook", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-facebook", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 10, |
|
|
|
"label": "Instagram", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 11, |
|
|
|
"label": "Whatsapp", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 12, |
|
|
|
"label": "Youtube", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-video", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 13, |
|
|
|
"label": "X", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"label": "Twitter", |
|
|
|
"icon": "grid-item-icon tn-icon-twitter", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 14, |
|
|
|
"label": "Spotity", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 15, |
|
|
|
"label": "Paypal", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-pay", |
|
|
|
"text": "grid-item-text" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"sort": 16, |
|
|
|
"label": "Viber", |
|
|
|
"icon": "tn-icon-qr-code-circle" |
|
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle", |
|
|
|
"text": "grid-item-text" |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
@ -139,7 +154,10 @@ |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
targetCreate(e){ |
|
|
|
console.log(e); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -156,119 +174,135 @@ |
|
|
|
|
|
|
|
.head{ |
|
|
|
//border: 2px solid green; |
|
|
|
width: 660rpx; |
|
|
|
width: 650rpx; |
|
|
|
height: 150rpx; |
|
|
|
margin-top: 60rpx; |
|
|
|
background-color: #141b29; |
|
|
|
z-index: 0; |
|
|
|
z-index: 2; |
|
|
|
|
|
|
|
.clipboard{ |
|
|
|
border: 2px solid blue; |
|
|
|
//background-color: blueviolet; |
|
|
|
//border: 2px solid blue; |
|
|
|
height: 150rpx; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.grid-view{ |
|
|
|
width: 650rpx; |
|
|
|
height: auto; |
|
|
|
//border: 2px solid yellow; |
|
|
|
margin-top: 30rpx; |
|
|
|
|
|
|
|
.center{ |
|
|
|
border: 2px solid green; |
|
|
|
width: 660rpx; |
|
|
|
height: 700rpx; |
|
|
|
margin-top: 60rpx; |
|
|
|
//background-color: #141b29; |
|
|
|
background-color: red; |
|
|
|
z-index: 0; |
|
|
|
.grid-item{ |
|
|
|
//border: 2px solid deeppink; |
|
|
|
width: 280rpx; |
|
|
|
height: 120rpx; |
|
|
|
margin: 25rpx 20rpx 25rpx 20rpx; |
|
|
|
font-size: 36rpx; |
|
|
|
color:white; |
|
|
|
text-align: center; |
|
|
|
background-color: #141b29; |
|
|
|
border-radius: 15%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
.grid-item-icon{ |
|
|
|
//border: 2px solid wheat; |
|
|
|
font-size: 58rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.grid-item-text{ |
|
|
|
//border: 2px solid greenyellow; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.listItem{ |
|
|
|
//border: 2px solid yellow; |
|
|
|
height: 150rpx; |
|
|
|
//margin-top: 30px; |
|
|
|
background-color: #141b29; |
|
|
|
color: #fff; |
|
|
|
text-align: start; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.list-icon-text { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.listItem{ |
|
|
|
//border: 2px solid yellow; |
|
|
|
height: 50px; |
|
|
|
//margin-top: 30px; |
|
|
|
background-color: #141b29; |
|
|
|
color: #fff; |
|
|
|
text-align: start; |
|
|
|
|
|
|
|
.list-left{ |
|
|
|
//border: 2px solid green; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
.list-icon-text { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.list-left-text{ |
|
|
|
width: 420rpx; |
|
|
|
.list-left-text-one{ |
|
|
|
font-size: 30rpx; |
|
|
|
//border: 2px solid blue; |
|
|
|
} |
|
|
|
|
|
|
|
.list-left-text-two{ |
|
|
|
color: grey; |
|
|
|
font-size: 26rpx; |
|
|
|
//border: 2px solid lightsalmon; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.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-left-clipboard-text{ |
|
|
|
width: 480rpx; |
|
|
|
.list-left-clipboard-text-one{ |
|
|
|
font-size: 36rpx; |
|
|
|
//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; |
|
|
|
} |
|
|
|
.list-left-clipboard-text-two{ |
|
|
|
color: grey; |
|
|
|
font-size: 33rpx; |
|
|
|
//border: 2px solid lightsalmon; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list-left-icon{ |
|
|
|
//border: 2px solid blueviolet; |
|
|
|
margin-right: 20rpx; |
|
|
|
font-size: 58rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom{ |
|
|
|
//border: 2px solid blueviolet; |
|
|
|
width: 650rpx; |
|
|
|
height: 100rpx; |
|
|
|
background-color: #141b29; |
|
|
|
z-index: 2; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
border-radius: 15%; |
|
|
|
|
|
|
|
.list-bottom-icon{ |
|
|
|
//border: 2px solid blueviolet; |
|
|
|
margin-right: 20rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
font-size: 58rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.list-bottom-text{ |
|
|
|
width: 650rpx; |
|
|
|
//border: 2px solid pink; |
|
|
|
.list-bottom-text-one{ |
|
|
|
font-size: 36rpx; |
|
|
|
//border: 2px solid blue; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
