<template>
|
<view class="vote-bg">
|
<u-tabs :list="list" bg-color="#f7f7f7" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
<view style="padding: 20rpx 30rpx 0rpx 30rpx;">
|
<u-search height="80" placeholder="请输入关键字" shape="square" :show-action="false" v-model="keyword"></u-search>
|
</view>
|
|
<scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
|
style="width: 100%; margin-top: 100rpx;">
|
<view v-for="i in data" class="advisory-model" @click="goDetail(i)">
|
<view class="advisory-left">
|
<view class="advisory-title-top">
|
<view class="advisory-title">{{i.votename}}</view>
|
</view>
|
<view class="advisory-title-down">
|
<view class="advisory-title-name">{{i.introduce}}</view>
|
<view class="advisory-title-time">截止{{i.endtime.substring(0,11)}}</view>
|
</view>
|
</view>
|
<view class="advisory-right">
|
<image src="../../static/workbench/task7.png"></image>
|
</view>
|
</view>
|
</scroll-view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list: [{
|
name: '正在进行'
|
}, {
|
name: '已投票'
|
}],
|
current: 0,
|
swiperHeight: 0,
|
data: [],
|
keyword: '',
|
}
|
},
|
onReady() {
|
let that = this;
|
uni.getSystemInfo({
|
success(e) {
|
console.log(e);
|
let {
|
windowWidth,
|
windowHeight,
|
safeArea
|
} = e;
|
const query = uni.createSelectorQuery().in(that);
|
query
|
.select('#articleBox')
|
.boundingClientRect(data => {
|
that.swiperHeight = (safeArea.bottom - data.top - 50);
|
})
|
.exec();
|
}
|
});
|
},
|
onLoad() {
|
this.getVoteData();
|
},
|
methods: {
|
change(index) {
|
this.current = index;
|
},
|
getVoteData(){
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + "/vote/vote/page?",
|
method: 'GET',
|
data: {
|
|
},
|
success(res) {
|
that.data = res.data.data.records;
|
}
|
});
|
},
|
goDetail(e){
|
uni.navigateTo({
|
url: './voteDetail?detailData=' + (JSON.stringify(e))
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.vote-bg {
|
width: 100%;
|
height: 100%;
|
background-color: #f7f7f7;
|
|
.article-content {
|
margin-top: 0.5rem !important;
|
width: 100%;
|
// background-color: #00FF00;
|
|
.advisory-model {
|
width: 94%;
|
margin: 0 auto;
|
height: 4.5rem;
|
background-color: #FFF;
|
border-radius: 8px;
|
margin-top: 0.5rem;
|
|
|
.advisory-left {
|
width: 64%;
|
height: 80%;
|
float: left;
|
position: relative;
|
// background-color: #00FFFF;
|
position: relative;
|
left: 3%;
|
top: 10%;
|
|
|
.advisory-title-top {
|
// background-color: #2692FD;
|
width: 100%;
|
height: 75%;
|
|
.advisory-title {
|
width: 92%;
|
font-size: 15px;
|
font-weight: 550;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
|
|
}
|
|
.advisory-title-down {
|
// background-color: #0078A8;
|
width: 100%;
|
height: 25%;
|
font-size: 12px;
|
font-weight: 550;
|
color: #808080;
|
|
.advisory-title-name {
|
width: 240rpx;
|
float: left;
|
letter-spacing: 1px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 1;
|
-webkit-box-orient: vertical;
|
// background-color:#0078A8;
|
}
|
|
.advisory-title-time {
|
position: relative;
|
left: 30rpx;
|
}
|
}
|
|
}
|
|
.advisory-right {
|
// background-color: #222222;
|
width: 33%;
|
height: 80%;
|
left: 65%;
|
position: relative;
|
top: 10%;
|
|
image {
|
position: relative;
|
left: 120rpx;
|
top: -90%;
|
width: 90rpx;
|
height: 90rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
