yuepenglong
/
Election
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的选举

dev
岳鹏龙 1 year ago
parent
4552980f3d
commit
14f10de714
2 changed files with 313 additions and 7 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. 8
      src/pages.json
  2. 312
      src/pages/myElection/index.vue

8
src/pages.json
View File

@ -34,7 +34,7 @@
"style": { "style": {
"navigationBarTitleText": "我的选举", "navigationBarTitleText": "我的选举",
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
"enablePullDownRefresh": false "enablePullDownRefresh": true
} }
}, },
{ {
@ -65,16 +65,16 @@
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#2563EB",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8"
}, },
"tabBar": { "tabBar": {
"color": "#9CA3AF", "color": "#9CA3AF",
"selectedColor": "#2563EB", "selectedColor": "#2563EB",
"borderStyle": "white", "borderStyle": "white",
"backgroundColor": "#F9FAFB", "backgroundColor": "#FFFFFF",
"list": [ "list": [
{ {
"pagePath": "pages/votingElection/index", "pagePath": "pages/votingElection/index",

312
src/pages/myElection/index.vue
View File

@ -1,7 +1,313 @@
<template> <template>
<view>我的选举</view> <view class="container">
<view v-for="(item, index) in electionList" :key="index" class="election-item">
<view class="year-title">
<view class="headpart">
<text class="title">{{ item.title }}</text>
<view class="type"
:style="item.type=='投票中'? 'background: #DBEAFE;color: #3B82F6;' : (item.type=='当选'? 'background: #DCFCE7;color: #10B981' : 'background: #F3F4F6;color: #4B5563')">
{{item.type}}
</view>
</view>
</view>
<view class="flex-center-between" style="display: flex;">
<view style="display: grid;">
<view
v-for="(candidate, cIndex) in item.candidates.slice(0, expandedStates[index] ? item.candidates.length : 1)"
:key="cIndex" class="candidate-item">
<view class="info-section">
<view style="display: flex;align-items: center;">
<img style="width: 96rpx;height: 96rpx;border-radius: 50%;" :src="item.img" alt="" />
<view style="margin-left: 24rpx;display: grid;">
<text class="name">{{ candidate.name }}</text>
<text class="college">{{ candidate.college }}</text>
</view>
</view>
<view style="display: flex;margin-top: 24rpx;">
我的选择：<view :class="['choice-tag', choiceClass(candidate.choice)]">
{{ choiceText(candidate.choice) }}
</view>
</view>
</view>
</view>
</view>
<view class="expand-btn" @click="toggleExpand(index)">
<text :class="['arrow', expandedStates[index] ? 'up' : 'down']"></text>
</view>
</view>
</view>
</view>
</template> </template>
<script lang="ts" setup></script> <script setup>
import {
ref,
watch
} from 'vue'
const electionList = ref([{
type: "投票中",
title: "2024学生会主席选举",
candidates: [{
img: '../../static/redpacket.png',
name: "陈思远",
college: "计算机科学与技术学院",
choice: 1
},
{
img: '../../static/redpacket.png',
name: "陈思远2号",
college: "计算机科学与技术学院",
choice: 0
},
{
img: '../../static/redpacket.png',
name: "陈思远2号",
college: "计算机科学与技术学院",
choice: 2
}
]
},
{
type: "投票中",
title: "2024学生会主席选举",
candidates: [{
img: '../../static/redpacket.png',
name: "陈思远",
college: "计算机科学与技术学院",
choice: 1
},
{
img: '../../static/redpacket.png',
name: "陈思远2号",
college: "计算机科学与技术学院",
choice: 0
},
{
img: '../../static/redpacket.png',
name: "陈思远2号",
college: "计算机科学与技术学院",
choice: 2
}
]
},
{
type: "投票中",
title: "2024学生会主席选举",
candidates: [{
img: '../../static/redpacket.png',
name: "陈思远",
college: "计算机科学与技术学院",
choice: 1
},
{
img: '../../static/redpacket.png',
name: "陈思远2号",
college: "计算机科学与技术学院",
choice: 0
},
{
img: '../../static/redpacket.png',
name: "陈思远2号",
college: "计算机科学与技术学院",
choice: 2
}
]
},
{
type: "当选",
title: "2023优秀班干部评选",
candidates: [{
img: '../../static/redpacket.png',
name: "李雨晴",
college: "工商管理学院",
choice: 0
}]
},
{
type: "未当选",
title: "2023最佳社团负责人",
candidates: [{
img: '../../static/redpacket.png',
name: "王浩然",
college: "艺术设计学院",
choice: 2
}]
}
])
// 展开状态管理
const expandedStates = ref([])
watch(() => electionList.value, (newVal) => {
expandedStates.value = newVal.map(() => false)
}, {
immediate: true
})
const toggleExpand = (index) => {
expandedStates.value[index] = !expandedStates.value[index]
}
const choiceClass = (choice) => {
switch (choice) {
case 1:
return 'agree';
case 0:
return 'oppose';
case 2:
return 'abstain';
default:
return '';
}
}
const choiceText = (choice) => {
return {
1: '同意',
0: '反对',
2: '弃权'
} [choice] || ''
}
</script>
<style scoped lang="scss">
.container {
padding: 20rpx;
background-color: #F9FAFB;
height: 100vh;
}
.election-item {
margin-bottom: 30rpx;
padding: 40rpx;
border-radius: 24rpx;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
box-sizing: border-box;
border: 2rpx solid #F3F4F6;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
}
.year-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
.headpart {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-family: Roboto;
font-size: 32rpx;
font-weight: 500;
letter-spacing: normal;
color: #000000;
}
.type {
font-family: Roboto;
font-size: 24rpx;
font-weight: normal;
/* 自动布局 */
display: flex;
flex-direction: column;
padding: 4rpx 16rpx;
gap: 0rpx 20rpx;
flex-wrap: wrap;
align-content: flex-start;
border-radius: 24rpx;
}
}
}
.candidate-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
}
.info-section {
flex: 1;
display: flex;
flex-direction: column;
}
.name {
font-family: Roboto;
font-size: 28rpx;
font-weight: 500;
letter-spacing: normal;
color: #000000;
}
.college {
font-family: Roboto;
font-size: 24rpx;
font-weight: normal;
letter-spacing: normal;
color: #6B7280;
}
.choice-tag {
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto;
font-size: 28rpx;
font-weight: normal;
}
.agree {
color: #3B82F6;
}
.oppose {
color: #F44336;
}
.abstain {
color: #9CA3AF;
}
.year-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.expand-btn {
display: flex;
align-items: center;
color: #666;
font-size: 26rpx;
padding: 10rpx 20rpx;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
margin-left: 10rpx;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
}
.down {
border-top: 15rpx solid #999;
}
.up {
border-bottom: 15rpx solid #999;
}
<style lang="scss" scoped></style> /* 优化候选人项间距 */
.candidate-item:last-child {
border-bottom: none;
}
</style>
Write Preview
Loading…
Cancel
Save