bnyer
/
scanCode
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

添加创建页面

master
Penny 2 years ago
parent
1895dce67f
commit
ca1dc8ed99
1 changed files with 169 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 308
      pages/create/Create.vue

308
pages/create/Create.vue
View File

@ -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>
<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>
<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="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>
</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>
</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"
}
]
}
@ -140,6 +155,9 @@
},
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;
}
}
}
.center{
border: 2px solid green;
width: 660rpx;
height: 700rpx;
margin-top: 60rpx;
//background-color: #141b29;
background-color: red;
z-index: 0;
.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: 50px;
//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: 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;
}
}
.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-right{
//border: 2px solid pink;
color: royalblue;
font-size: 20px;
.list-left-text-two{
color: grey;
font-size: 26rpx;
//border: 2px solid lightsalmon;
}
}
.list-right-icon{
//border: 2px solid gainsboro;
font-size: 25px;
margin-left: 15px;
}
.list-left-clipboard-text{
width: 480rpx;
.list-left-clipboard-text-one{
font-size: 36rpx;
//border: 2px solid blue;
}
.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>

Write Preview
Loading…
Cancel
Save