9 changed files with 680 additions and 229 deletions
@ -1,113 +1,90 @@
|
||||
.wrap { |
||||
padding: 12px; |
||||
.card-container{ |
||||
padding:0 26rpx; |
||||
} |
||||
.index-five-button{ |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-sizing: border-box; |
||||
padding:35rpx 0; |
||||
border:1px solid #dedede; |
||||
border-radius: 20rpx; |
||||
} |
||||
.index-five-col{ |
||||
flex:0 0 20%; |
||||
.button-title{ |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #666666; |
||||
text-align: center; |
||||
} |
||||
.button-img{ |
||||
text-align: center; |
||||
.img{ |
||||
height:75rpx; |
||||
.card-item{ |
||||
margin-bottom:20rpx; |
||||
width:100%; |
||||
padding:24rpx 40rpx; |
||||
background: { |
||||
color:#FFFFFF; |
||||
}; |
||||
overflow: hidden; |
||||
position: relative; |
||||
border-radius: 10rpx; |
||||
.card-main{ |
||||
position: relative; |
||||
.main-hr{ |
||||
position: relative; |
||||
z-index: 1; |
||||
width: 100%; |
||||
height: 2rpx; |
||||
background: #EEEEEE; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.cell-container{ |
||||
align-items: center; |
||||
line-height:1; |
||||
.cell-title { |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #FF9545; |
||||
} |
||||
.cell-border{ |
||||
height:32rpx; |
||||
width: 2rpx; |
||||
margin:{ |
||||
left:16rpx; |
||||
right:16rpx; |
||||
} |
||||
background:{ |
||||
color:#999999; |
||||
} |
||||
} |
||||
.cell-title-desc{ |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #333333; |
||||
} |
||||
.card-ext{ |
||||
margin-top:20rpx; |
||||
} |
||||
.index-ad-img{ |
||||
margin-top:15rpx; |
||||
padding:0 26rpx; |
||||
.img{ |
||||
border-radius: 20rpx; |
||||
height:160rpx; |
||||
width:100%; |
||||
.background-view{ |
||||
width: 50%; |
||||
height: 50%; |
||||
opacity: 1; |
||||
position: absolute; |
||||
top:-45%; |
||||
left:-45%; |
||||
z-index: 2; |
||||
filter: blur(122px); |
||||
&.blue{ |
||||
background-color: #178AF2; |
||||
} |
||||
.index-ad-desc{ |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #AFB5BE; |
||||
line-height:1; |
||||
margin-bottom:20rpx; |
||||
&.green{ |
||||
background-color: #0EAF4E; |
||||
} |
||||
} |
||||
.cell-two-container{ |
||||
align-items: center; |
||||
line-height:1; |
||||
.cell-title { |
||||
font-size: 32rpx; |
||||
.label{ |
||||
width:180rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #020B18; |
||||
line-height: 40rpx; |
||||
} |
||||
.content{ |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #020B18; |
||||
line-height: 1; |
||||
line-height: 40rpx; |
||||
} |
||||
.cell-border{ |
||||
height:40rpx; |
||||
width: 8rpx; |
||||
margin:{ |
||||
right:12rpx; |
||||
.status{ |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
line-height: 40rpx; |
||||
margin-left:auto; |
||||
&.blue{ |
||||
color: #178AF2; |
||||
} |
||||
background:{ |
||||
color:#FF9545; |
||||
&.green{ |
||||
color: #0EAF4E; |
||||
} |
||||
} |
||||
} |
||||
.about-us-content{ |
||||
font-size: 30rpx; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
line-height: 48rpx; |
||||
} |
||||
|
||||
.image-container{ |
||||
border-radius: 10rpx; |
||||
overflow: hidden; |
||||
position: relative; |
||||
.img-title{ |
||||
width:100%; |
||||
height: 64rpx; |
||||
background: linear-gradient(180deg, rgba(2,11,24,0) 0%, rgba(2,11,24,0.5) 100%); |
||||
opacity: 1; |
||||
font-weight: 400; |
||||
position: absolute; |
||||
padding:{ |
||||
left:26rpx; |
||||
.title-group{ |
||||
padding:14rpx; |
||||
} |
||||
.body-group{ |
||||
padding:14rpx; |
||||
.label{ |
||||
color: #AFB5BE; |
||||
} |
||||
.content{ |
||||
margin-left:-10rpx; |
||||
margin-right:-10rpx; |
||||
.content-img{ |
||||
padding:10rpx; |
||||
} |
||||
&.orange{ |
||||
color:#FF9545; |
||||
} |
||||
} |
||||
bottom:0; |
||||
left:0; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
@ -0,0 +1,191 @@
|
||||
<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 pad"> |
||||
<u-row> |
||||
<u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}"> |
||||
|
||||
<view class="screen-container row" > |
||||
<u-row :custom-style="{width:'100%',display:'flex'}" :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 class="tabs-group row"> |
||||
<view class="col"> |
||||
<u-tabs |
||||
:list="list" |
||||
u-sticky |
||||
lineWidth="64" |
||||
lineHeight="8" |
||||
:inactiveStyle="{color:'#AFB5BE'}" |
||||
:activeStyle="{color:'#F47210'}" |
||||
lineColor="#F47210" |
||||
:custom-style="{margin:'auto',justifyContent:'center',width:'100%'}" |
||||
:scrollable="false" |
||||
@change="tabsChenge" |
||||
></u-tabs> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</u-col> |
||||
</u-row> |
||||
</view> |
||||
<ListPage></ListPage> |
||||
</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: '全部事件', |
||||
}, { |
||||
name: '待结案', |
||||
}, { |
||||
name: '已结案', |
||||
},], |
||||
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: center; |
||||
.screen-button + .screen-button{ |
||||
margin-left:16rpx; |
||||
} |
||||
} |
||||
.tabs-group{ |
||||
justify-content: center; |
||||
} |
||||
.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; |
||||
} |
||||
margin-bottom:20rpx; |
||||
&.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> |
||||
@ -0,0 +1,46 @@
|
||||
.body-background{ |
||||
background:{ |
||||
color:#F5F5F6; |
||||
} |
||||
} |
||||
.new-item { |
||||
background: { |
||||
color: #fff; |
||||
}; |
||||
border-radius: 20rpx; |
||||
padding: 20rpx 16rpx; |
||||
margin-bottom: 16rpx; |
||||
|
||||
.new-thumb { |
||||
width: 260rpx; |
||||
} |
||||
|
||||
.new-icon { |
||||
width: 64rpx; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin-right:-12rpx; |
||||
} |
||||
|
||||
.new-title { |
||||
padding:{ |
||||
left:20rpx; |
||||
} |
||||
font-size: 28rpx; |
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||
font-weight: 400; |
||||
color: #000000; |
||||
line-height: 42rpx; |
||||
text-align: justify; |
||||
} |
||||
.new-time{ |
||||
margin-top:auto; |
||||
padding:{ |
||||
left:20rpx; |
||||
} |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #000000; |
||||
line-height: 1; |
||||
} |
||||
} |
||||
@ -0,0 +1,186 @@
|
||||
<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="transparent" |
||||
></u-navbar> |
||||
<view class="head-background"> |
||||
<image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/> |
||||
</view> |
||||
<view class="subsection" :style="sectionStyle"> |
||||
<MzSubsection |
||||
:list="list" |
||||
@change="checkSection" |
||||
:current="current" |
||||
></MzSubsection> |
||||
</view> |
||||
<u-row :custom-style="{padding:'0 26rpx'}"> |
||||
<u-col> |
||||
<u-list |
||||
@scrolltolower="scrollToLower" |
||||
:height="(api.navHeight().windowHeight-size.height)+'px'" |
||||
:custom-style="{marginTop:'20rpx'}" |
||||
> |
||||
|
||||
<u-list-item |
||||
v-for="(item, index) in lists" |
||||
:key="index" |
||||
> |
||||
<view class="new-item row"> |
||||
<view class="new-thumb "> |
||||
<u-image |
||||
:show-loading="true" |
||||
:src="item.thumb" |
||||
width="260" |
||||
height="160" |
||||
radius="10" |
||||
mode="widthFix" |
||||
class="img" |
||||
></u-image> |
||||
</view> |
||||
<view class="new-content row col border-box"> |
||||
<view class="new-title"> |
||||
<image |
||||
v-if="item.is_new" |
||||
class="new-icon img" |
||||
mode="widthFix" |
||||
:src="staticImage.newIcon" |
||||
/> |
||||
{{item.title}} |
||||
</view> |
||||
<view class="new-time">{{ item.time }}</view> |
||||
</view> |
||||
</view> |
||||
</u-list-item> |
||||
</u-list> |
||||
</u-col> |
||||
</u-row> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import MzSubsection from '@/components/MzSubsection/Index.vue'; |
||||
import api from '@/utils/functions.js'; |
||||
|
||||
export default { |
||||
components: { |
||||
MzSubsection |
||||
}, |
||||
data() { |
||||
return { |
||||
list: [{ |
||||
name: '最新资讯' |
||||
}, { |
||||
name: '表彰评优' |
||||
}, { |
||||
name: '活动回顾' |
||||
}], |
||||
// 或者如下，也可以配置keyName参数修改对象键名 |
||||
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}], |
||||
current: 1, |
||||
title: '资讯列表', |
||||
loading: true, |
||||
staticImage: { |
||||
bg: imghost + '/static/image/BG.png', |
||||
newIcon: imghost + '/static/image/new-icon.png', |
||||
}, |
||||
user: { |
||||
avatar: imghost + '/static/image/banner.png', |
||||
nickname: '清晨的风', |
||||
coupons: 221, |
||||
id: 88685, |
||||
}, |
||||
isTop: false, |
||||
lists: [ |
||||
{ |
||||
id: 1, |
||||
thumb: imghost + '/static/image/new-1.png', |
||||
title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开', |
||||
desc: '需要您带一点猫砂上门，谢谢', |
||||
time: '2023/06/16', |
||||
is_new: true |
||||
}, { |
||||
id: 2, |
||||
thumb: imghost + '/static/image/new-2.png', |
||||
title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开', |
||||
desc: '需要您带一点猫砂上门，谢谢', |
||||
time: '2023/06/16', |
||||
is_new: true |
||||
}, { |
||||
id: 3, |
||||
thumb: imghost + '/static/image/new-3.png', |
||||
title: '全市公安机关夏季治安打击整治“彭安行动”111开', |
||||
desc: '需要您带一点猫砂上门，谢谢', |
||||
time: '2023/06/16', |
||||
is_new: false |
||||
}, |
||||
], |
||||
size: { |
||||
height: 500, |
||||
} |
||||
} |
||||
}, |
||||
onLoad() { |
||||
|
||||
}, |
||||
computed: { |
||||
api() { |
||||
return api |
||||
}, |
||||
sectionStyle() { |
||||
const style = {}; |
||||
style.padding = '0 26rpx'; |
||||
style.position = 'sticky'; |
||||
style.zIndex = '9999'; |
||||
style.top = api.navHeight().systemBarHeight + 'px' |
||||
return style; |
||||
}, |
||||
listHeight() { |
||||
let that = this; |
||||
let height; |
||||
let info = uni.createSelectorQuery().in(this).select('.subsection'); |
||||
info.boundingClientRect(function (data) { |
||||
that.size.height = data.height; |
||||
}).exec(function (res) { |
||||
|
||||
}); |
||||
// that.size.height = (api.navHeight().windowHeight - height); |
||||
} |
||||
}, |
||||
methods: { |
||||
chatDetail(item) { |
||||
wx.navigateTo({ |
||||
url: '/pages/ChatDetail/index?id=' + item.id |
||||
}); |
||||
}, |
||||
checkSection(index) { |
||||
this.current = index; |
||||
}, |
||||
scrollToLower() { |
||||
|
||||
}, |
||||
}, |
||||
onPageScroll(res) { |
||||
if (res.scrollTop <= 20) { |
||||
uni.$emit('isTop', true); |
||||
} else { |
||||
uni.$emit('isTop', false); |
||||
} |
||||
}, |
||||
created() { |
||||
this.listHeight(); |
||||
// this.pagePadding = (api.navHeight().navPaddingTop + |
||||
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/index.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue