dev/dcp-web-gate/src_old/views/AddFeatures/ballot/ballotDrawingBoardPalette.vue

<template>
	 
	<div>
		<banners-zh v-if="language.value == 'CN'"></banners-zh>
		<banners-en v-if="language.value == 'EN'"></banners-en>
		<banners-fr v-if="language.value == 'FR'"></banners-fr>
		<banners-ru v-if="language.value == 'RU'"></banners-ru>
		<!-- 顶部图片 -->
		<div class="topimg">
			<img src="@/assets/ballot/未标题-6_画板 1.png" alt="" />
			<!-- <div class="backButton" @click="toHome">
                <img src="@/assets/ballot/编组 16.png" alt="">
            </div> -->
		</div>
		<!-- 选择区域 -->
		<div class="body-info">
			<div class="select-info">
				<el-select v-model="language.value" @change="getChange">
					<el-option
						v-for="(item, index) in options"
						:key="index"
						:label="item.label"
						:value="item.value"
						>{{ item.label }}
					</el-option>
				</el-select>
			</div>
			<div v-if="language.value == 'CN'" class="title-info" :title="'议 案'">
				议 案
			</div>
			<div v-if="language.value == 'EN'" class="title-info" :title="'Proposal'">
				Proposal
			</div>
			<div
				v-if="language.value == 'FR'"
				class="title-info"
				:title="'Proposition'"
			>
				Proposition
			</div>
			<div
				v-if="language.value == 'RU'"
				class="title-info"
				:title="'Proposition'"
			>
				Предложения
			</div>
			<div class="main-info" v-if="language.value == 'CN'">
				<div class="list-info">
					<div
						class="text-info"
						v-for="(item, index) in firstList"
						:key="index"
					>
						<div class="text-detail" :title="item.title">
							{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;{{ item.title }}
						</div>
						<div class="btn-info" @click="upInfp(item)" v-if="!item.voted">
							投票
						</div>
						<div class="btn-detail" @click="againInfp(item)" v-else>
							投票已完成
						</div>
					</div>
					<div class="text-info">
						<div
							class="text-detail"
							:title="'全球能源互联网发展合作组织第二届理事会理事候选名单的议案'"
						>
							5.&nbsp;&nbsp;&nbsp;&nbsp;全球能源互联网发展合作组织第二届理事会理事候选名单的议案
						</div>
						<div class="btn-info" @click="getMain(lastList)" v-if="!lastList">
							投票
						</div>
						<div class="btn-detail" @click="getMained(lastList)" v-else>
							投票已完成
						</div>
					</div>
					<!-- <div class="line-text"></div> -->
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'EN'">
				<div class="list-info">
					<div
						class="text-info"
						v-for="(item, index) in firstList"
						:key="index"
					>
						<div class="text-detail" :title="item.titleEn">
							{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;{{ item.titleEn }}
						</div>
						<div class="btn-info" @click="upInfp(item)" v-if="!item.voted">
							Vote
						</div>
						<div class="btn-detail" @click="againInfp(item)" v-else>
							Voting Complete
						</div>
					</div>
					<div class="text-info">
						<div
							class="text-detail"
							:title="'Candidates for the Second Council of GEIDCO'"
						>
							5.&nbsp;&nbsp;&nbsp;&nbsp;Candidates for the Second Council of
							GEIDCO
						</div>
						<div class="btn-info" @click="getMain(lastList)" v-if="!lastList">
							Vote
						</div>
						<div class="btn-detail" @click="getMained(lastList)" v-else>
							Voting Complete
						</div>
					</div>
					<!-- <div class="line-text"></div> -->
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'FR'">
				<div class="list-info">
					<div
						class="text-info"
						v-for="(item, index) in firstList"
						:key="index"
					>
						<div class="text-detail1" :title="item.titleFr">
							{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;{{ item.titleFr }}
						</div>
						<div class="btn-info" @click="upInfp(item)" v-if="!item.voted">
							Voter
						</div>
						<div class="btn-detail" @click="againInfp(item)" v-else>
							Vote terminé
						</div>
					</div>
					<div class="text-info">
						<div
							class="text-detail1"
							:title="'Candidatures des membres du deuxième Conseilde la GEIDCO'"
						>
							5.&nbsp;&nbsp;&nbsp;&nbsp;Candidatures des membres du deuxième
							Conseil de la GEIDCO
						</div>
						<div class="btn-info" @click="getMain(lastList)" v-if="!lastList">
							Voter
						</div>
						<div class="btn-detail" @click="getMained(lastList)" v-else>
							Vote terminé
						</div>
					</div>
					<!-- <div class="line-text"></div> -->
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'RU'">
				<div class="list-info">
					<div
						class="text-info"
						v-for="(item, index) in firstList"
						:key="index"
					>
						<div class="text-detail1" :title="item.titleRu">
							{{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;{{ item.titleRu }}
						</div>
						<div class="btn-info" @click="upInfp(item)" v-if="!item.voted">
							Проголосовать
						</div>
						<div class="btn-detail-fr" @click="againInfp(item)" v-else>
							Голосование завершено
						</div>
					</div>
					<div class="text-info">
						<div
							class="text-detail1"
							:title="'Кандидаты на должность директоров совета второго созыва GEIDCO'"
						>
							5.&nbsp;&nbsp;&nbsp;&nbsp;Кандидаты на должность директоров совета
							второго созыва GEIDCO
						</div>
						<div class="btn-info" @click="getMain(lastList)" v-if="!lastList">
							Проголосовать
						</div>
						<div class="btn-detail-fr" @click="getMained(lastList)" v-else>
							Голосование завершено
						</div>
					</div>
					<!-- <div class="line-text"></div> -->
				</div>
			</div>
		</div>
		<!-- 底部图片 -->
		<footer-zh v-if="language.value == 'CN'"></footer-zh>
		<footer-en v-if="language.value == 'EN'"></footer-en>
		<footer-fr v-if="language.value == 'FR'"></footer-fr>
		<footer-ru v-if="language.value == 'RU'"></footer-ru>
	</div>
</template>

<script>
import footerZh from '@/components/footersNewZH'
import footerEn from '@/components/footersNewEN'
import footerFr from '@/components/footersNewFR'
import footerRu from '@/components/footersNewRU'
import bannersZh from '@/components/ballotTopBannerZH'
import bannersEn from '@/components/ballotTopBannerEN'
import bannersFr from '@/components/ballotTopBannerFR'
import bannersRu from '@/components/ballotTopBannerRU'
import { getMeetingGeidcoMatters } from '@/api/vote/council'
export default {
	name: 'ballotDrawingBoardPalette',
	components: {
		footerZh,
		footerEn,
		footerFr,
		footerRu,
		bannersZh,
		bannersEn,
		bannersFr,
		bannersRu,
	},
	data() {
		return {
			lastList: '',
			firstList: [{}, {}, {}, {}],
			options: [
				{
					value: 'CN',
					label: '中文',
				},
				{
					value: 'EN',
					label: 'English',
				},
				{
					value: 'FR',
					label: 'Français',
				},
				{
					value: 'RU',
					label: 'Русский',
				},
			],
			language: {
				value: 'CN',
			},
		}
	},
	mounted() {
		let user = JSON.parse(sessionStorage.getItem('mettingUser'))
		console.log(user)
		if (user == null) {
			this.$router.push({ path: 'home' })
		} else {
			console.log('你好')
		}

		let language = sessionStorage.getItem('language')
		this.language.value = language
		this.initData()
	},
	methods: {
		getChange() {
			let language = this.language.value
			sessionStorage.setItem('language', language)
		},
		initData() {
			let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
			console.log(id, '用户id')
			let params = {
				meetingGeidcoUserId: id,
				language: this.value,
			}
			getMeetingGeidcoMatters(params).then((res) => {
				console.log(res)
				this.firstList = res.data.meetingGeidcoMatters
				this.lastList = res.data.meetingGeidcoLeader
			})
		},
		// 返回首页
		toHome() {
			this.$router.push({ path: 'home' })
		},
		// 投票详情页
		upInfp(item) {
			console.log(item)
			sessionStorage.setItem('item', JSON.stringify(item))
			this.$router.push({ path: 'ballotBillDirectory' })
		},
		againInfp(item) {
			sessionStorage.setItem('item', JSON.stringify(item))
			this.$router.push({ path: 'ballotBillDirectoryDetails' })
		},
		getMain() {
			this.$router.push({ path: 'ballotBillDirectoryMany' })
		},
		getMained() {
			this.$router.push({ path: 'ballotBillDirectoryInfo' })
		},
	},
}
</script>

<style scoped>
@media screen and (min-width: 1080px) {
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		/* vertical-align: text-top; */
	}

	html,
	body,
	#app {
		width: 100%;
		height: 100%;
	}

	.topimg {
		width: 100%;
		/* height: 450px; */
		background-color: #cdebf7;
	}

	.topimg > img {
		width: 100%;
		padding: 0;
		position: relative;
	}

	.backButton {
		width: 134px;
		height: 41px;
		position: absolute;
		top: 46px;
		right: 380px;
	}

	.backButton:hover {
		cursor: pointer;
	}

	.backButton > img {
		width: 100%;
		height: 100%;
	}

	.body-info {
		padding: 0;
		width: 100%;
		height: 960px;
		background-color: #f2f2f2;
	}

	.main-info {
		width: 60%;
		height: 719px;
		margin: 0 auto;
		transform: translateY(20px);
		background-color: #ffffff;
		position: relative;
	}

	.select-info {
		z-index: 997;
		width: 10%;
		transform: translateX(680%) translateY(150%);
	}

	.title-info {
		width: 30%;
		font-size: 36px;
		font-family: AlibabaPuHuiTiB;
		color: #333333;
		text-align: center;
		background-color: #f2f2f2;
		font-weight: 700;
		margin: 0 auto 40px;
		z-index: 99;
		transform: translateY(20px);
	}

	.list-info {
		width: 100%;
		position: absolute;
		top: 10px;
		left: 69px;
	}

	.text-info {
		width: 100%;
		height: 126px;
		line-height: 126px;
		display: flex;
		padding-right: 143px;
		justify-content: space-between;
	}

	.line-text {
		width: 100%;
		height: 1px;
		border-top: 1px dashed #979797;
		transform: translateX(-69px);
	}

	.text-detail {
		width: 75%;
		height: 40px;
		font-size: 20px;
		transform: translateY(30px);
		font-family: AlibabaPuHuiTiR;
		color: #666666;
		line-height: 20px;
		word-wrap: break-word;
		overflow: hidden;
	}
	.text-detail1 {
		width: 75%;
		height: 40px;
		font-size: 20px;
		transform: translateY(30px);
		font-family: AlibabaPuHuiTiR;
		color: #666666;
		line-height: 20px;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-info {
		width: 200px;
		height: 36px;
		line-height: 36px;
		background-color: #4dc6ff;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}

	.btn-info:hover {
		cursor: pointer;
	}

	.btn-detail {
		width: 200px;
		height: 40px;
		line-height: 40px;
		background-color: #6dd400;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-detail-fr {
		width: 200px;
		height: 40px;
		line-height: 20px;
		background-color: #6dd400;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-detail:hover {
		cursor: pointer;
	}
	.btn-detail-fr:hover {
		cursor: pointer;
	}
}
@media screen and (min-width: 768px) and (max-width: 1079px) {
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		/* vertical-align: text-top; */
	}

	html,
	body,
	#app {
		width: 100%;
		height: 100%;
	}

	.topimg {
		width: 100%;
		/* height: 450px; */
		background-color: #cdebf7;
	}

	.topimg > img {
		width: 100%;
		padding: 0;
		position: relative;
	}

	.backButton {
		width: 134px;
		height: 41px;
		position: absolute;
		top: 46px;
		right: 380px;
	}

	.backButton:hover {
		cursor: pointer;
	}

	.backButton > img {
		width: 100%;
		height: 100%;
	}

	.body-info {
		padding: 0;
		width: 100%;
		height: 960px;
		background-color: #f2f2f2;
	}

	.main-info {
		width: 60%;
		height: 719px;
		margin: 0 auto;
		transform: translateY(20px);
		background-color: #ffffff;
		position: relative;
	}

	.select-info {
		z-index: 997;
		width: 10%;
		transform: translateX(680%) translateY(150%);
	}

	.title-info {
		width: 30%;
		font-size: 36px;
		font-family: AlibabaPuHuiTiB;
		color: #333333;
		text-align: center;
		background-color: #f2f2f2;
		font-weight: 700;
		margin: 0 auto 40px;
		z-index: 99;
		transform: translateY(20px);
	}

	.list-info {
		width: 100%;
		position: absolute;
		top: 10px;
		left: 69px;
	}

	.text-info {
		width: 100%;
		height: 126px;
		line-height: 126px;
		display: flex;
		padding-right: 143px;
		justify-content: space-between;
	}

	.line-text {
		width: 100%;
		height: 1px;
		border-top: 1px dashed #979797;
		transform: translateX(-69px);
	}

	.text-detail {
		width: 65%;
		height: 40px;
		font-size: 20px;
		transform: translateY(30px);
		font-family: AlibabaPuHuiTiR;
		color: #666666;
		line-height: 20px;
		word-wrap: break-word;
		overflow: hidden;
	}
	.text-detail1 {
		width: 65%;
		height: 40px;
		font-size: 20px;
		transform: translateY(30px);
		font-family: AlibabaPuHuiTiR;
		color: #666666;
		line-height: 20px;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-info {
		width: 200px;
		height: 36px;
		line-height: 36px;
		background-color: #4dc6ff;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}

	.btn-info:hover {
		cursor: pointer;
	}

	.btn-detail {
		width: 200px;
		height: 40px;
		line-height: 40px;
		background-color: #6dd400;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-detail-fr {
		width: 200px;
		height: 40px;
		line-height: 20px;
		background-color: #6dd400;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-detail:hover {
		cursor: pointer;
	}
	.btn-detail-fr:hover {
		cursor: pointer;
	}
}
@media screen and (max-width: 767px) {
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		/* vertical-align: text-top; */
	}

	html,
	body,
	#app {
		width: 100%;
		height: 100%;
	}

	.topimg {
		width: 100%;
		/* height: 450px; */
		background-color: #cdebf7;
	}

	.topimg > img {
		width: 100%;
		padding: 0;
		position: relative;
	}

	.backButton {
		width: 134px;
		height: 41px;
		position: absolute;
		top: 46px;
		right: 380px;
	}

	.backButton:hover {
		cursor: pointer;
	}

	.backButton > img {
		width: 100%;
		height: 100%;
	}

	.body-info {
		padding: 0;
		width: 100%;
		height: 960px;
		background-color: #f2f2f2;
	}

	.main-info {
		width: 60%;
		height: 719px;
		margin: 0 auto;
		transform: translateY(20px);
		background-color: #ffffff;
		position: relative;
	}

	.select-info {
		z-index: 997;
		width: 10%;
		transform: translateX(680%) translateY(150%);
	}

	.title-info {
		width: 30%;
		font-size: 36px;
		font-family: AlibabaPuHuiTiB;
		color: #333333;
		text-align: center;
		background-color: #f2f2f2;
		font-weight: 700;
		margin: 0 auto 40px;
		z-index: 99;
		transform: translateY(20px);
	}

	.list-info {
		width: 100%;
		position: absolute;
		top: 10px;
		left: 69px;
	}

	.text-info {
		width: 100%;
		height: 126px;
		line-height: 126px;
		display: flex;
		padding-right: 143px;
		justify-content: space-between;
	}

	.line-text {
		width: 100%;
		height: 1px;
		border-top: 1px dashed #979797;
		transform: translateX(-69px);
	}

	.text-detail {
		width: 65%;
		height: 40px;
		font-size: 20px;
		transform: translateY(30px);
		font-family: AlibabaPuHuiTiR;
		color: #666666;
		line-height: 20px;
		word-wrap: break-word;
		overflow: hidden;
	}
	.text-detail1 {
		width: 65%;
		height: 40px;
		font-size: 20px;
		transform: translateY(30px);
		font-family: AlibabaPuHuiTiR;
		color: #666666;
		line-height: 20px;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-info {
		width: 200px;
		height: 36px;
		line-height: 36px;
		background-color: #4dc6ff;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}

	.btn-info:hover {
		cursor: pointer;
	}

	.btn-detail {
		width: 200px;
		height: 40px;
		line-height: 40px;
		background-color: #6dd400;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-detail-fr {
		width: 200px;
		height: 40px;
		line-height: 20px;
		background-color: #6dd400;
		border-radius: 6px;
		transform: translateY(34px);
		text-align: center;
		font-size: 18px;
		font-family: AlibabaPuHuiTiR;
		color: #ffffff;
		word-wrap: break-word;
		overflow: hidden;
	}
	.btn-detail:hover {
		cursor: pointer;
	}
	.btn-detail-fr:hover {
		cursor: pointer;
	}
}
</style>