You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
6.4 KiB
308 lines
6.4 KiB
<template>
|
|
<view class="content">
|
|
<view class="head">
|
|
<tn-list-view :card="cardMode" class="clipboard" unlined="all">
|
|
<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>
|
|
</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="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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
col: 2,
|
|
cardMode: true,
|
|
arrowStatus: true,
|
|
arrowRightStatus: true,
|
|
hoverStatus: true,
|
|
categoryList:[
|
|
{
|
|
"sort": 0,
|
|
"label": "Website",
|
|
"icon": "grid-item-icon tn-icon-empty-network",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 1,
|
|
"label": "Wifi",
|
|
"icon": "grid-item-icon tn-icon-wifi",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 2,
|
|
"label": "Text",
|
|
"icon": "grid-item-icon tn-icon-font",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 3,
|
|
"label": "Contact",
|
|
"icon": "grid-item-icon tn-icon-my-circle-fill",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 4,
|
|
"label": "Tel",
|
|
"icon": "grid-item-icon tn-icon-tel",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 5,
|
|
"label": "E-mail",
|
|
"icon": "grid-item-icon tn-icon-email",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 6,
|
|
"label": "SMS",
|
|
"icon": "grid-item-icon tn-icon-message",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 7,
|
|
"label": "Calendar",
|
|
"icon": "grid-item-icon tn-icon-calendar",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 8,
|
|
"label": "My card",
|
|
"icon": "grid-item-icon tn-icon-bankcard",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 9,
|
|
"label": "Facebook",
|
|
"icon": "grid-item-icon tn-icon-facebook",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 10,
|
|
"label": "Instagram",
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 11,
|
|
"label": "Whatsapp",
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 12,
|
|
"label": "Youtube",
|
|
"icon": "grid-item-icon tn-icon-video",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 13,
|
|
"label": "Twitter",
|
|
"icon": "grid-item-icon tn-icon-twitter",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 14,
|
|
"label": "Spotity",
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 15,
|
|
"label": "Paypal",
|
|
"icon": "grid-item-icon tn-icon-pay",
|
|
"text": "grid-item-text"
|
|
},
|
|
{
|
|
"sort": 16,
|
|
"label": "Viber",
|
|
"icon": "grid-item-icon tn-icon-qr-code-circle",
|
|
"text": "grid-item-text"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
targetCreate(e){
|
|
console.log(e);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #000000;
|
|
height: auto;
|
|
width: 100%;
|
|
|
|
.head{
|
|
//border: 2px solid green;
|
|
width: 650rpx;
|
|
height: 150rpx;
|
|
margin-top: 60rpx;
|
|
background-color: #141b29;
|
|
z-index: 2;
|
|
|
|
.clipboard{
|
|
//border: 2px solid blue;
|
|
height: 150rpx;
|
|
z-index: 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid-view{
|
|
width: 650rpx;
|
|
height: auto;
|
|
//border: 2px solid yellow;
|
|
margin-top: 30rpx;
|
|
|
|
.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;
|
|
|
|
|
|
.list-left{
|
|
//border: 2px solid green;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.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-clipboard-text{
|
|
width: 480rpx;
|
|
.list-left-clipboard-text-one{
|
|
font-size: 36rpx;
|
|
//border: 2px solid blue;
|
|
}
|
|
|
|
.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>
|
|
|