投资投票页面

5 months ago · a268abea02
33 changed files with 4209 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local
 /cypress/videos/
 /cypress/screenshots/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 *.tsbuildinfo
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar"]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
 # voting_Vue
 This template should help get you started developing with Vue 3 in Vite.
 ## Recommended IDE Setup
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 ## Customize configuration
 See [Vite Configuration Reference](https://vite.dev/config/).
 ## Project Setup
 ```sh
 npm install
 ```
 ### Compile and Hot-Reload for Development
 ```sh
 npm run dev
 ```
 ### Compile and Minify for Production
 ```sh
 npm run build
 ```
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,23 @@
 {
  "name": "voting-vue",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.9",
    "element-plus": "^2.9.1",
    "pinia": "^2.2.6",
    "vue": "^3.5.13",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.0.1",
    "vite-plugin-vue-devtools": "^7.6.5"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,13 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 </script>
 <template>
  <RouterView />
 </template>
 <style scoped>
 </style>
--- a/src/api/CanApi.js
+++ b/src/api/CanApi.js
@ -0,0 +1,22 @@
 import service from "."
 const CanApi = {
    //获取候选人列表
    getCandidates(token){
        return service.post('/getCandidates/',{token});
    },
    //投票
    Vote(token,code){
        let formData = new FormData();
        formData.append("token", token);
        formData.append("code", code);
        return service.post('/vote',formData)
    },
    //查看详情
    Detail(jwcode){
        return service.get(`/getVotesByCandidate/`+`${jwcode}`)
    }
 }
 export default CanApi;
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,14 @@
 import axios from "axios";
 const service = axios.create({
    baseURL: '/api',
 });
 //Axios的响应拦截器..
 service.interceptors.response.use(resp => {
    return resp.data;
 }, error => {
    return Promise.reject(error);
 });
 export default service;
--- a/src/assets/1.png
+++ b/src/assets/1.png
--- a/src/assets/2.png
+++ b/src/assets/2.png
--- a/src/assets/3.png
+++ b/src/assets/3.png
--- a/src/assets/base.css
+++ b/src/assets/base.css
--- a/src/assets/bg.png
+++ b/src/assets/bg.png
--- a/src/assets/bg@2x.png
+++ b/src/assets/bg@2x.png
--- a/src/assets/flag_america.png
+++ b/src/assets/flag_america.png
--- a/src/assets/image.png
+++ b/src/assets/image.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -0,0 +1,39 @@
 *{
  margin: 0;
  padding: 0;
 }
 html{
  font-size: 1vw;
 }
 div{
  font-size: 1rem;
 }
 /* html,body{
  height: 100%;
 }
 #app{
  height: 100%;
 } */
 /* 手机 */
 @media (max-width:750px){
  html{
    font-size: 10.5px;
   }
   div{
    font-size: 1rem;
   }
 }
 /* 平板 */
 @media (min-width: 750px) and (max-width:1279px){
  html{
    font-size: 2.5vw;
   }
   div{
    font-size: 1rem;
   }
 }
 /* 电脑 */
 @media (min-width:1280px){
 }
--- a/src/assets/top.png
+++ b/src/assets/top.png
--- a/src/assets/前三.png
+++ b/src/assets/前三.png
--- a/src/assets/哪些市场投资机会更多？.png
+++ b/src/assets/哪些市场投资机会更多？.png
--- a/src/assets/头像框.png
+++ b/src/assets/头像框.png
--- a/src/assets/寻找队医.png
+++ b/src/assets/寻找队医.png
--- a/src/assets/投票规则.png
+++ b/src/assets/投票规则.png
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,17 @@
 import './assets/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,22 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import FrontView from '../views/FrontView.vue'
 import BackView from '@/views/BackView.vue'
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'front',
      component: FrontView,
    },
    {
      path: '/back',
      name: 'back',
      component: BackView
    },
  ],
 })
 export default router
--- a/src/stores/counter.js
+++ b/src/stores/counter.js
@ -0,0 +1,12 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
 })
--- a/src/views/BackView.vue
+++ b/src/views/BackView.vue
@ -0,0 +1,90 @@
 <script setup>
 import CanApi from '@/api/CanApi';
 import { ref } from 'vue';
 //获取当前浏览器地址
 // var url = window.location.href;
 var url = "https://wwww.voted?token=oHgj4lMA10LIb4C2pxznbZi0+fEeMx8pywnIlrmTkYxEOqcqxG7SCLo5+Zl/e3VufNpUPfOjn4srEKj1vsk"
 //截取token=后的字符串
 var token = null;
 function getToken() {
  var parts = url.split("token=");
  if (parts.length > 1) {
    token = parts[1].split("&")[0]; // 进一步截取 & 之前的字符串
  }
  console.log("token字符串:",token); // 输出 token 的值
 }
 getToken();
 const candidates = ref([])
 function loadCandidates() {
  CanApi.getCandidates(token).then(result =>{
    candidates.value = result.data;
  })
 }
 loadCandidates();
 //对话窗
 const detailVisible = ref(false);
 const details = ref([])
 function searchDetail(scope){
  console.log(scope);
  detailVisible.value = true;
  CanApi.Detail(scope).then(result =>{
    details.value = result.data;
  })
 }
 //序号
 const indexMethod = function(index) {
  return index +1;
 }
 </script>
 <template>
  <el-table class="table" :data="candidates" style="width: 100%">
    <el-table-column type="index" :index="indexMethod" label="序号" width="180" />
    <el-table-column prop="name" label="候选人姓名" width="180" />
    <el-table-column prop="votes" label="获得票数" />
    <el-table-column label="操作">
      <template #default="scope">
        <div class="button" @click="searchDetail(scope.row.jwCode)">
          投票详情
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 对话框 -->
  <el-dialog v-model="detailVisible" title="投票详情" width="520" center>
    <el-table 
      :data="details" class="table-detail" >
      <el-table-column prop="jwCode" label="投票人精网号" width="150" />
      <el-table-column prop="voteTime" label="投票时间" width="200" />
    </el-table>
  </el-dialog>
 </template>
 <style scoped>
 .table {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  margin: auto;
  /* 使元素在容器中垂直居中 */
  width: 100%;
  margin-top: 50px;
  margin-left: 50px;
 }
 .button {
  color: rgb(51, 155, 240);
 }
 .button:hover {
  cursor: pointer;
 }
 .el-dialog__body{
  margin: 0 auto;
 }
 </style>
--- a/src/views/FrontView.vue
+++ b/src/views/FrontView.vue
@ -0,0 +1,734 @@
 <script setup>
 import CanApi from '@/api/CanApi';
 import { defaultInitialZIndex, ElMessage } from 'element-plus';
 import { ref } from 'vue';
 //获取当前浏览器地址
 // var url = window.location.href;
 var url = "https://wwww.voted?token=+Xor5AADhxfIb4C2phTnbZi0+fEeMx8pywnIlrmTl49EP6klwzmEVu0/qp0vKns/KdxYPvSjzdZ4Q6n17sg"
 //截取token=后的字符串
 var token = null;
 function getToken() {
  var parts = url.split("token=");
  if (parts.length > 1) {
    token = parts[1].split("&")[0]; // 进一步截取 & 之前的字符串
  }
  console.log("token字符串:",token); // 输出 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">2025年财富大分配</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">
        <!-- 头像图片 -->
        <img class="cover2" :src="second.avatar">
        <!-- <img class="cover2" src="../assets/flag_america.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">
        <!-- 头像图片 -->
        <img class="cover1" :src="first.avatar">
        <!-- <img class="cover1" src="../assets/flag_america.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">
        <!-- 头像图片 -->
        <img class="cover3" :src="third.avatar">
        <!-- <img class="cover3" src="../assets/flag_america.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>
          <!-- 头像 -->
          <!-- flag_america.png -->
          <!-- <img class="list-avatar" src="../assets/flag_america.png"> -->
          <img class="list-avatar" :src="backCandidate.avatar">
          <!-- 投票数 -->
          <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">-以上数据截至至2025年1月2日-</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: 9%;
  top: -5.5%;
  width: 22%;
  /* 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: 39.2%;
  top: -7.5%;
  width: 22%;
  /* 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: 69.5%;
  /* height: 9%; */
  top: -5.5%;
  width: 22%;
  /* 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 {
  width: 12%;
  font-family: zihunxingmouhei_trial;
  font-size: 1.625rem;
  /* 排名字体大小 */
  font-weight: 800;
  /* 排名字体加粗 */
  color: #F4850D;
 }
 .list-avatar {
  width: 20%;
  height: 18%;
  margin-right: 2%;
  border: 1px solid rgb(221, 221, 221);
 }
 .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>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,28 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
    // vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    proxy: {
      '/api': {
        //后端服务器地址
        target: 'http://192.168.9.117:8092',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
 })