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.
206 lines
5.1 KiB
206 lines
5.1 KiB
<template> |
|
<view class="body-background"></view> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="#fff" |
|
></u-navbar> |
|
<view class="screen-body" :class="{pad:(tabCheck === 'lists')}"> |
|
<u-row> |
|
<u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}"> |
|
<u-tabs |
|
:list="list" |
|
u-sticky |
|
lineWidth="64" |
|
lineHeight="8" |
|
:inactiveStyle="{color:'#AFB5BE'}" |
|
:activeStyle="{color:'#F47210'}" |
|
lineColor="#F47210" |
|
:custom-style="{margin:'auto'}" |
|
:scrollable="false" |
|
@change="tabsChenge" |
|
></u-tabs> |
|
<view class="screen-container row" :class="{show:(tabCheck === 'lists')}"> |
|
<u-row :custom-style="{width:'100%',display:(tabCheck === 'lists'?'flex':'none')}" :gutter="20"> |
|
<u-col :span="5"> |
|
<view class="screen-type"> |
|
<view class="screen-type-button row "> |
|
<view class="button-text"> |
|
<u-text text="事件类型" size="28" color="#020B18"></u-text> |
|
</view> |
|
<view class="button-icon"> |
|
<u-icon name="arrow-down-fill" size="12"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</u-col> |
|
<u-col :span="7"> |
|
<view class="screen-date col-7"> |
|
<view class="screen-date-button row col"> |
|
<view class="date-text"> |
|
<u-text text="2023-08-03" size="28" color="#020B18"></u-text> |
|
</view> |
|
<view class="date-icon"> |
|
<u-icon name="calendar" size="32"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
</u-col> |
|
</u-row> |
|
|
|
|
|
</view> |
|
<view :class="{show:(tabCheck === 'submit')}"> |
|
<SubmitPage v-show="(tabCheck === 'submit')"></SubmitPage> |
|
</view> |
|
</u-col> |
|
</u-row> |
|
</view> |
|
|
|
<view class="screen-button-body" :style="{display:(tabCheck === 'lists'?'flex':'none')}"> |
|
<u-row :custom-style="{padding:'16rpx 26rpx'}"> |
|
<u-col> |
|
<view class="screen-button-group row"> |
|
<view class="screen-button"> |
|
<u-button text="全部事件" color="#FF9545" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none'}">全部事件</u-button> |
|
</view> |
|
<view class="screen-button"> |
|
<u-button text="全部事件" color="#fff" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none',color:'#020B18'}">待结案</u-button> |
|
</view> |
|
<view class="screen-button"> |
|
<u-button text="全部事件" color="#fff" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none',color:'#020B18'}">已结案</u-button> |
|
</view> |
|
|
|
</view> |
|
</u-col> |
|
</u-row> |
|
</view> |
|
<view :class="{show:(tabCheck === 'lists')}"> |
|
<ListPage v-show="(tabCheck === 'lists')"></ListPage> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import SubmitPage from "./components/SubmitPage/index.vue"; |
|
import ListPage from "./components/ListPage/index.vue"; |
|
|
|
export default { |
|
components: { |
|
SubmitPage, |
|
ListPage, |
|
}, |
|
data() { |
|
return { |
|
list: [{ |
|
name: '线索提交', |
|
id:'submit' |
|
}, { |
|
name: '线索列表', |
|
id:'lists' |
|
},], |
|
tabCheck:'submit', |
|
show: false, |
|
title: '线索上传', |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
// store. |
|
tabsChenge(e){ |
|
console.log(e) |
|
this.tabCheck = e.id |
|
} |
|
}, |
|
onPageScroll(res) { |
|
|
|
}, |
|
created() { |
|
|
|
}, |
|
mounted() { |
|
|
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
::v-deep .u-tabs__wrapper__nav__line{ |
|
left:24rpx; |
|
} |
|
.body-background{ |
|
background:{ |
|
color:#F5F5F6; |
|
} |
|
} |
|
.screen-type-button{ |
|
justify-content: space-between; |
|
border:2rpx solid #eee; |
|
align-items: center; |
|
padding:12rpx 24rpx; |
|
border-radius: 10rpx; |
|
.button-text{ |
|
//margin-right:50rpx; |
|
} |
|
} |
|
.screen-date-button{ |
|
justify-content: space-between; |
|
border:2rpx solid #eee; |
|
align-items: center; |
|
padding:12rpx 24rpx; |
|
border-radius: 10rpx; |
|
.button-date{ |
|
//margin-right:50rpx; |
|
} |
|
} |
|
.screen-button-group{ |
|
justify-content: flex-start; |
|
.screen-button + .screen-button{ |
|
margin-left:16rpx; |
|
} |
|
} |
|
.screen-body{ |
|
transition-duration: .2s; |
|
transition-timing-function: ease-in-out; |
|
transition-delay: .2s; |
|
|
|
-webkit-transition-duration:.2s; |
|
-webkit-transition-timing-function:ease-in-out; |
|
-webkit-transition-delay:.2s; |
|
padding:16rpx 26rpx; |
|
background:{ |
|
color:transparent; |
|
} |
|
&.pad{ |
|
background:{ |
|
color:#fff; |
|
} |
|
.screen-container{ |
|
position: relative; |
|
opacity: 1; |
|
margin-top:32rpx; |
|
margin-bottom:16rpx; |
|
} |
|
} |
|
|
|
} |
|
@keyframes show { |
|
0% { |
|
display: block; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.show { |
|
animation: show .5s; |
|
} |
|
</style> |