vote_vue/src/views/FrontView.vue

<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>