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.
151 lines
3.0 KiB
151 lines
3.0 KiB
<template>
|
|
<view class="content padding">
|
|
<view class="banner">
|
|
<image src="@/static/images/homebanner.png" mode=""></image>
|
|
</view>
|
|
|
|
<view class="tabs">
|
|
<up-tabs :list="tabArr" @click="tabClick" lineColor="#DE3A26"> </up-tabs>
|
|
</view>
|
|
|
|
<view class="tags">
|
|
<view class="tag" v-for="(item,index) in tagArr" :key="index" :class="{active: currentTag==item.id}" @click="tagClick(item)">{{ item.name }}</view>
|
|
</view>
|
|
|
|
<view class="ul">
|
|
<view class="li">
|
|
<view class="flex-b">
|
|
<view class="name towRowText">说要两行显示说要两行显示说要两行显示说要两行显示说要两行显示说要两行显示说要两行显示</view>
|
|
<view class="btn" @click="goVote(item)">我要投票</view>
|
|
</view>
|
|
<view class="text">
|
|
<text>发起人：张三</text>
|
|
<text>截止时间：2024-04-01 19:30</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { reactive, ref } from 'vue';
|
|
|
|
const tabArr = reactive([
|
|
{ name: '投票列表', id: 1 },
|
|
{ name: '我的投票', id: 2 },
|
|
]);
|
|
const tagArr = reactive([
|
|
{ name: '全部', id: 1 },
|
|
{ name: '进行中', id: 2 },
|
|
{ name: '已结束', id: 3 },
|
|
]);
|
|
// tab切换
|
|
function tabClick(item) {
|
|
console.log('item', item);
|
|
}
|
|
// 类型筛选
|
|
let currentTag = ref(1)
|
|
function tagClick(item) {
|
|
currentTag.value = item.id
|
|
}
|
|
|
|
function goVote(item) {
|
|
console.log(item)
|
|
uni.navigateTo({
|
|
url: '/pages/subPage/ballots/vote/vote'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
.banner {
|
|
width: 100%;
|
|
height: 174rpx;
|
|
}
|
|
|
|
.tabs {
|
|
padding: 30rpx 0 10rpx 0;
|
|
border-bottom: 1px solid #EFEFEF;
|
|
}
|
|
|
|
.tags {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #EFEFEF;
|
|
.tag {
|
|
height: 50rpx;
|
|
background: #EFEFEF;
|
|
border-radius: 25rpx;
|
|
border: 1px solid #F4F4F4;
|
|
line-height: 50rpx;
|
|
padding: 0 14rpx;
|
|
font-size: 24rpx;
|
|
margin-right: 30rpx;
|
|
&.active {
|
|
color: $themC;
|
|
background: rgba(222,58,38,0.1);
|
|
border-radius: 25rpx;
|
|
border: 1px solid #DE3A26;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
width: 100%;
|
|
.li {
|
|
width: 100%;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1px solid #EFEFEF;
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
.flex-b {
|
|
.name {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
width: 0;
|
|
padding-right: 30rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 132rpx;
|
|
height: 44rpx;
|
|
background: #DE3A26;
|
|
border-radius: 22rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 44rpx;
|
|
&.boder {
|
|
border: 1px solid #DE3A26;
|
|
color: $themC;
|
|
}
|
|
&.hui {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
padding-top: 14rpx;
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #9C9C9C;
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|