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.
740 lines
15 KiB
740 lines
15 KiB
<script setup>
|
|
import CanApi from '@/api/CanApi';
|
|
import { defaultInitialZIndex, ElMessage } from 'element-plus';
|
|
import { ref } from 'vue';
|
|
|
|
//地址
|
|
var url = "https://wwww.voted?token=9H0l5gBX0kPIbYe1rBrnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w"
|
|
var token = null;
|
|
function getToken() {
|
|
var url = "https://wwww.voted?token=9H0l5gBX0kPIbYe1rBrnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w"
|
|
// 使用 URL 对象解析 URL
|
|
var parsedUrl = new URL(url);
|
|
|
|
// 使用 URLSearchParams 获取 token 参数
|
|
// token = parsedUrl.searchParams.get("token");
|
|
token = "9H0l5gBX0kPIbYe1rBrnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w";
|
|
console.log("token字符串:",token); // 输出 token 的值
|
|
// token = JSON.parse(tokenStr);
|
|
// console.log("token json格式:",token);
|
|
}
|
|
getToken();
|
|
|
|
|
|
//候选人
|
|
const candidates = ref([])
|
|
const first = ref();
|
|
first.value = {
|
|
id: 1,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: false
|
|
}
|
|
const second = ref();
|
|
second.value = {
|
|
id: 2,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: false
|
|
}
|
|
const third = ref();
|
|
third.value = {
|
|
id: 3,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: false
|
|
}
|
|
//后七名
|
|
const backCandidates = ref([
|
|
{
|
|
id: 4,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: true
|
|
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: true
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: true
|
|
}
|
|
,
|
|
{
|
|
id: 7,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: false
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: true
|
|
},
|
|
{
|
|
id: 9,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: true
|
|
},
|
|
{
|
|
id: 10,
|
|
name: "tom",
|
|
avatar: "../assets/头像框.png",
|
|
votes: 100,
|
|
voted: false
|
|
}
|
|
|
|
])
|
|
let key = 10017;
|
|
//加载候选人
|
|
function loadCandidates(token) {
|
|
CanApi.getCandidates(token).then(result => {
|
|
candidates.value = result.data;
|
|
candidates.value = result.data;
|
|
first.value = candidates.value[0]; // 假设第一个候选人
|
|
second.value = candidates.value[1]; // 假设第二个候选人
|
|
third.value = candidates.value[2]; // 假设第三个候选人
|
|
|
|
// 将除了前三个之外的所有候选人推入backCandidates.value数组
|
|
backCandidates.value = candidates.value.slice(3);
|
|
|
|
console.log("第一个候选人：", first.value);
|
|
console.log("第二个候选人：", second.value);
|
|
console.log("第三个候选人：", third.value);
|
|
console.log("后七名候选人：", backCandidates.value);
|
|
|
|
console.log("候选人：", backCandidates.value);
|
|
})
|
|
}
|
|
loadCandidates(token);
|
|
//投票
|
|
function vote(code) {
|
|
console.log("code:", code)
|
|
// voter.value.voterJwcode,voter.value.candidateJwcode,voter.value.voterName
|
|
CanApi.Vote(token,code).then(result => {
|
|
|
|
if (result.code == 10000) {
|
|
ElMessage.success(result.msg);
|
|
loadCandidates(token);
|
|
} else {
|
|
ElMessage.error(result.msg)
|
|
loadCandidates(token);
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<!-- 上半部分内容 -->
|
|
<div class="header">
|
|
<div class="channle">
|
|
<span class="channle-write">Homily Chart 第一频道</span>
|
|
</div>
|
|
<div class="title">
|
|
<img class="duiyi" src="../assets/寻找队医.png">
|
|
</div>
|
|
<!-- 投票规则 -->
|
|
<div class="rules">
|
|
<img class="rule-title" src="../assets/投票规则.png">
|
|
<div class="rules-content">
|
|
每人每天最多可以投三票<br>
|
|
当天不可重复投一个人<br>
|
|
统计累计票数最多的三个人
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 排名信息 -->
|
|
<div class="content">
|
|
<!-- 一二三 -->
|
|
<div class="yes">
|
|
<img class="yiersan" src="../assets/前三.png">
|
|
</div>
|
|
<!-- 第二名 -->
|
|
<div class="second" :second="second">
|
|
<!-- 头像框 -->
|
|
<div class="avatar-box2"></div>
|
|
<!-- 头像图片 -->
|
|
<img class="cover2" src="../assets/image.png">
|
|
<!-- 投票按钮 -->
|
|
<div class="one-button2" v-if="second.voted == false" @click="vote(second.jwCode)">投票</div>
|
|
<div class="buttoned2" v-else @click="vote(second.jwCode)">已投票</div>
|
|
<!-- 有多少人投票 -->
|
|
<div class="votes2">已有{{ second.votes }}人投票</div>
|
|
<!-- 排名2 -->
|
|
<div class="num2"></div>
|
|
</div>
|
|
<!-- 第一名 -->
|
|
<div class="first" :first="first">
|
|
<!-- 头像框 -->
|
|
<div class="avatar-box1"></div>
|
|
<!-- 头像图片 -->
|
|
<img class="cover1" src="../assets/image.png">
|
|
<!-- 投票按钮 -->
|
|
<div class="one-button1" v-if="first.voted == false" @click="vote(first.jwCode)">投票</div>
|
|
<div class="buttoned1" v-else @click="vote(first.jwCode)">已投票</div>
|
|
<!-- 有多少人投票 -->
|
|
<div class="votes1">已有{{ first.votes }}人投票</div>
|
|
<!-- 排名1 -->
|
|
<div class="num1"></div>
|
|
</div>
|
|
<!-- 第三名 -->
|
|
<div class="third" :third="third">
|
|
<!-- 头像框 -->
|
|
<div class="avatar-box3"></div>
|
|
<!-- 头像图片 -->
|
|
<img class="cover3" src="../assets/image.png">
|
|
<!-- 投票按钮 -->
|
|
<div class="one-button3" v-if="third.voted == false" @click="vote(third.jwCode)">投票</div>
|
|
<div class="buttoned3" v-else @click="vote(third.jwCode)">已投票</div>
|
|
<!-- 有多少人投票 -->
|
|
<div class="votes3">已有{{ third.votes }}人投票</div>
|
|
<!-- 排名1 -->
|
|
<div class="num3"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 后七名循环列表 -->
|
|
<div class="rand-box">
|
|
<div class="list" v-for="(backCandidate, index) in backCandidates" :key="index">
|
|
<!-- 排名 -->
|
|
<div class="num">{{ index + 4 }}</div>
|
|
<!-- 头像 -->
|
|
<img class="list-avatar" src="../assets/image.png">
|
|
<!-- 投票数 -->
|
|
<div class="votes">已有{{ backCandidate.votes }}人投票</div>
|
|
<!-- 投票按钮 -->
|
|
<div class="list-button1" v-if="backCandidate.voted == false" @click="vote(backCandidate.jwCode)">投票</div>
|
|
<div class="list-button2" v-else @click="vote(backCandidate.jwCode)">已投票</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="footer">-以上数据截至至2024.12.28-</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
/* 平板 */
|
|
@media (min-width: 750px) and (max-width:1280px) {
|
|
.container {
|
|
background-image: url('../assets/bg.png');
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* 电脑 */
|
|
@media (min-width:1280px) {
|
|
.container {
|
|
background-image: url('../assets/bg.png');
|
|
background-repeat: no-repeat;
|
|
width: 38%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
/* background-attachment:fixed; */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width:750px) {
|
|
.container {
|
|
background-image: url('../assets/bg.png');
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
/* background-attachment:fixed; */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
height: 28%;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
height: 65%;
|
|
width: 100%;
|
|
}
|
|
|
|
.channle {
|
|
background-image: url(/src/assets/top.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 65%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
color: #FFFFFF;
|
|
font-weight: 1000;
|
|
font-size: 1.5rem;
|
|
text-shadow: 2px 2px 2px #F14509, -2px -1px 2px #F14509, 1px -1px 2px #F14509, -2px 3px 2px #F14509;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.title {
|
|
|
|
width: 90%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
.duiyi {
|
|
width: 100%;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.rules {
|
|
height: 30%;
|
|
}
|
|
|
|
.rule-title {
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
.rules-content {
|
|
width: 45%;
|
|
height: 20%;
|
|
color: #FFFFFF;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
font-family: Alibaba PuHuiTi;
|
|
margin: auto;
|
|
text-align: center;
|
|
text-shadow: 1px 0px 0 #F14509, -1px 0px 0 #F14509, 0px -1px 0 #F14509, 0px 0px 0 #F14509;
|
|
}
|
|
|
|
.yes {
|
|
width: 90%;
|
|
height: 30%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 25%;
|
|
}
|
|
|
|
.yiersan {
|
|
margin-top: 9%;
|
|
width: 100%;
|
|
}
|
|
|
|
.avatar-box2 {
|
|
background-image: url(../assets/头像框.png);
|
|
position: absolute;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
left: 9%;
|
|
top: -8%;
|
|
width: 25%;
|
|
height: 20%;
|
|
}
|
|
|
|
.cover2 {
|
|
position: absolute;
|
|
left: 11.7%;
|
|
top: -5.9%;
|
|
width: 19.1%;
|
|
height: 9%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.one-button2 {
|
|
position: absolute;
|
|
left: 9%;
|
|
top: 2%;
|
|
width: 22%;
|
|
height: 3.5%;
|
|
border-radius: 20px 20px 20px 20px;
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040);
|
|
border: #FA765D solid 2px;
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
color: #E8160C;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.buttoned2 {
|
|
position: absolute;
|
|
left: 9%;
|
|
top: 2%;
|
|
width: 22%;
|
|
height: 3.5%;
|
|
border-radius: 20px 20px 20px 20px;
|
|
border: #FA765D solid 2px;
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
background: #EEEEEE;
|
|
color: #999999;
|
|
}
|
|
|
|
.votes2 {
|
|
position: absolute;
|
|
left: 11%;
|
|
top: 6%;
|
|
width: 25%;
|
|
height: 3%;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #E84E07;
|
|
z-index: 999;
|
|
}
|
|
|
|
.num2 {
|
|
background-image: url(../assets/2.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
width: 7%;
|
|
height: 15%;
|
|
position: absolute;
|
|
left: 14%;
|
|
top: 10.5%;
|
|
/* z-index: 999; */
|
|
}
|
|
|
|
|
|
.avatar-box1 {
|
|
background-image: url(../assets/头像框.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
left: 38%;
|
|
top: -10%;
|
|
width: 25%;
|
|
height: 20%;
|
|
}
|
|
|
|
.cover1 {
|
|
position: absolute;
|
|
|
|
left: 40.9%;
|
|
top: -8%;
|
|
width: 19.1%;
|
|
height: 9%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.one-button1 {
|
|
position: absolute;
|
|
left: 39%;
|
|
top: 0%;
|
|
width: 22%;
|
|
height: 3.5%;
|
|
border-radius: 20px 20px 20px 20px;
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040);
|
|
border: #FA765D solid 2px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
color: #E8160C;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.buttoned1 {
|
|
position: absolute;
|
|
left: 39%;
|
|
top: 0%;
|
|
width: 22%;
|
|
height: 3.5%;
|
|
border-radius: 20px 20px 20px 20px;
|
|
border: #FA765D solid 2px;
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
background: #EEEEEE;
|
|
color: #999999;
|
|
}
|
|
|
|
.votes1 {
|
|
|
|
position: absolute;
|
|
left: 43%;
|
|
top: 4%;
|
|
width: 25;
|
|
height: 3;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #E84E07;
|
|
z-index: 999;
|
|
}
|
|
|
|
.num1 {
|
|
background-image: url(../assets/1.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
left: 47%;
|
|
top: 8.5%;
|
|
width: 5%;
|
|
height: 15%;
|
|
/* z-index: 999; */
|
|
}
|
|
|
|
.avatar-box3 {
|
|
background-image: url(../assets/头像框.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
left: 68%;
|
|
top: -8%;
|
|
width: 25%;
|
|
height: 20%;
|
|
}
|
|
|
|
.cover3 {
|
|
position: absolute;
|
|
left: 70.8%;
|
|
top: -6%;
|
|
width: 19.1%;
|
|
height: 9%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.one-button3 {
|
|
|
|
position: absolute;
|
|
left: 69%;
|
|
top: 2%;
|
|
width: 22%;
|
|
height: 3.5%;
|
|
border-radius: 20px 20px 20px 20px;
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040);
|
|
border: #FA765D solid 2px;
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
color: #E8160C;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.buttoned3 {
|
|
position: absolute;
|
|
left: 69%;
|
|
top: 2%;
|
|
width: 22%;
|
|
height: 3.5%;
|
|
border-radius: 20px 20px 20px 20px;
|
|
border: #FA765D solid 2px;
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
background: #EEEEEE;
|
|
color: #999999;
|
|
}
|
|
|
|
.votes3 {
|
|
position: absolute;
|
|
left: 72%;
|
|
top: 6%;
|
|
width: 25%;
|
|
height: 3%;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #E84E07;
|
|
z-index: 999;
|
|
}
|
|
|
|
.num3 {
|
|
|
|
background-image: url(../assets/3.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
left: 75%;
|
|
top: 10.5%;
|
|
width: 7%;
|
|
height: 15%;
|
|
/* z-index: 999; */
|
|
}
|
|
|
|
.rand-box {
|
|
background-color: #FFFFFF;
|
|
border: #F14509 solid 2px;
|
|
border-radius: 27.78px 27.78px 27.78px 27.78px;
|
|
width: 90%;
|
|
height: auto;
|
|
margin: auto;
|
|
/* height: 70%; */
|
|
/* box-shadow: 3px 8px 19px 0 #66f1291f; */
|
|
box-shadow: 9px 9px 19px -9px #F1291F40;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
/* display: inline-block; */
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 5%;
|
|
margin-bottom: 5%;
|
|
margin-left: 4%;
|
|
padding: 2%;
|
|
border-bottom: 1px dashed #B24300;
|
|
}
|
|
|
|
.rand-box>.list:not(:last-child) {
|
|
border-bottom: 1px dashed #B24300;
|
|
}
|
|
|
|
.rand-box>.list:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 3%;
|
|
}
|
|
|
|
.num {
|
|
font-family: zihunxingmouhei_trial;
|
|
font-size: 1.625rem;
|
|
/* 排名字体大小 */
|
|
font-weight: 800;
|
|
/* 排名字体加粗 */
|
|
color: #F4850D;
|
|
margin-right: 8%;
|
|
/* 与头像之间的间距 */
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.list-avatar {
|
|
width: 20%;
|
|
height: 18%;
|
|
border-radius: 50%;
|
|
/* 圆形头像 */
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.votes {
|
|
font-size: 1.2rem;
|
|
/* 投票数字体大小 */
|
|
font-weight: 400;
|
|
width: 190px;
|
|
height: 27px;
|
|
flex-grow: 1;
|
|
/* 填充剩余空间 */
|
|
|
|
color: #F4850D;
|
|
/* 投票数字体颜色 */
|
|
/* margin-right: 2%; */
|
|
}
|
|
|
|
|
|
.list-button1 {
|
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040);
|
|
border: #FA765D solid 2px;
|
|
width: 22%;
|
|
height: 18%;
|
|
border-radius: 24.15px 24.15px 24.15px 24.15px;
|
|
cursor: pointer;
|
|
/* 鼠标悬停时的指针样式 */
|
|
transition: background-color 0.3s;
|
|
/* 背景颜色变化的过渡效果 */
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.3rem;
|
|
color: #E8160C;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
letter-spacing: 1%;
|
|
margin-right: 4%;
|
|
}
|
|
|
|
.list-button2 {
|
|
background: #EEEEEE;
|
|
color: #999999;
|
|
border: #FA765D solid 2px;
|
|
width: 22%;
|
|
height: 18%;
|
|
border-radius: 24.15px 24.15px 24.15px 24.15px;
|
|
cursor: pointer;
|
|
/* 鼠标悬停时的指针样式 */
|
|
transition: background-color 0.3s;
|
|
/* 背景颜色变化的过渡效果 */
|
|
/* 文字 */
|
|
font-weight: 700;
|
|
font-size: 1.3rem;
|
|
|
|
text-align: center;
|
|
letter-spacing: 1%;
|
|
margin-right: 4%;
|
|
}
|
|
|
|
.list-button:hover {
|
|
background-color: #e6b800;
|
|
/* 鼠标悬停时的背景颜色 */
|
|
}
|
|
|
|
.footer {
|
|
width: 60%;
|
|
height: 10%;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #B24300;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 5%;
|
|
padding-bottom: 5%;
|
|
}
|
|
</style>
|