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

完善历史页面

master
chengkun 2 years ago
parent
ca1dc8ed99
commit
24ae8d5a47
1 changed files with 233 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 253
      pages/history/History.vue

253
pages/history/History.vue
View File

@ -1,8 +1,48 @@
<template> <template>
<view class="content"> <view class="content">
<image class="logo" src="/static/logo.png"></image> <view class="head">
<view class="text-area"> <view class="headLine">Favorites</view>
<text class="title">{{title}}</text> <tn-list-view :card="cardMode" class="settingList" unlined="all">
<tn-list-cell class="listItem" v-for="(item, index) in favoritesList" :key="index">
<view class="list-icon-text">
<!-- 左边图标文本显示部分 -->
<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">{{ item.label }}</view>
<view class="list-left-text-two">{{ item.text }}</view>
</view>
</view>
<!-- 右边操作按钮部分 -->
<!-- <view class="list-right">
<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch>
</view> -->
</view>
</tn-list-cell>
</tn-list-view>
</view>
<view class="body">
<view class="headLine">History</view>
<tn-list-view :card="cardMode" class="settingList" unlined="all">
<tn-list-cell class="listItem" v-for="(item, index) in historyList" :key="index">
<view class="list-icon-text">
<!-- 左边图标文本显示部分 -->
<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">{{ item.label }}</view>
<view class="list-left-text-two">{{ item.text }}</view>
</view>
</view>
<!-- 右边操作按钮部分 -->
<!-- <view class="list-right">
<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch>
</view> -->
</view>
</tn-list-cell>
</tn-list-view>
</view> </view>
</view> </view>
</template> </template>
@ -21,6 +61,78 @@
list:[], list:[],
pages:0, pages:0,
total:0, total:0,
cardMode: true,
favoritesList:[
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"https://test1.com",
"sort":"0",
"label":"URL"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"https://test2.com",
"sort":"1",
"label":"URL"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"https://test3.com",
"sort":"2",
"label":"URL"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"https://test4.com",
"sort":"3",
"label":"URL"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"https://test5.com",
"sort":"4",
"label":"URL"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"https://test6.com",
"sort":"5",
"label":"URL"
},
],
historyList:[
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"15936215478",
"sort":"0",
"label":"WIFI"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"15936215478",
"sort":"1",
"label":"WIFI"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"15936215478",
"sort":"2",
"label":"WIFI"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"15936215478",
"sort":"3",
"label":"WIFI"
},
{
"icon":"grid-item-icon tn-icon-empty-network",
"text":"15936215478",
"sort":"4",
"label":"WIFI"
}
]
} }
}, },
onLoad() { onLoad() {
@ -95,30 +207,131 @@
} }
</script> </script>
<style> <style lang="scss">
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #000000;
height:100%;
.headLine{
color: royalblue;
font-size: 36rpx;
//padding-top:30px;
//margin-right:200px;
margin-top:60rpx;
//border: 2px solid purple;
}
.settingList{
//border: 2px solid red;
width: 330px;
//height:300px;
height: auto;
//margin-top: 10px;
//background-color: #141b29;
.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;
}
}
}
.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;
}
}
}
}
}
} }
.logo { .head{
height: 200rpx; //border: 2px solid red;
width: 200rpx; font-size: 72rpx;
margin-top: 200rpx; color: white;
margin-left: auto; margin-top:100rpx;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
} }
.title { .body{
font-size: 36rpx; //border: 2px solid blue;
color: #8f8f94; font-size: 72rpx;
color: white;
margin-top:50rpx;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save