From 69da68acc7881f5d34d80dc8e60bef943d9e464e Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Tue, 17 Dec 2024 14:35:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json       | 100 +++++++++++
 package.json            |   1 +
 src/api/CanApi.js       |  20 +++
 src/api/index.js        |  14 ++
 src/assets/main.css     |  38 ++++-
 src/views/BackView.vue  |  55 ++----
 src/views/FrontView.vue | 434 +++++++++++++++++++++++++++++-------------------
 vite.config.js          |  10 ++
 8 files changed, 464 insertions(+), 208 deletions(-)
 create mode 100644 src/api/CanApi.js
 create mode 100644 src/api/index.js

diff --git a/package-lock.json b/package-lock.json
index b0ac2d6..e453734 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "voting-vue",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.9",
         "element-plus": "^2.9.1",
         "pinia": "^2.2.6",
         "vue": "^3.5.13",
@@ -1622,6 +1623,23 @@
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -1702,6 +1720,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1813,6 +1843,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.73",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.73.tgz",
@@ -1973,6 +2012,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -2288,6 +2361,27 @@
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "license": "MIT"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
@@ -2514,6 +2608,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
diff --git a/package.json b/package.json
index 1c7876d..16c60d7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "element-plus": "^2.9.1",
     "pinia": "^2.2.6",
     "vue": "^3.5.13",
diff --git a/src/api/CanApi.js b/src/api/CanApi.js
new file mode 100644
index 0000000..d7aef9c
--- /dev/null
+++ b/src/api/CanApi.js
@@ -0,0 +1,20 @@
+import service from "."
+
+const CanApi = {
+    //获取候选人列表
+    getCandidates(jwcode){
+        return service.get('/getCandidates/'+`${jwcode}`);
+    },
+
+    //投票
+    Vote(voter){
+        console.log("+++++++++")
+        return service.post('/vote',voter)
+    },
+    //查看详情
+    Detail(code){
+        return service.get('/getVotesByCandidate/'+`${code}`)
+    }
+}
+
+export default CanApi;
\ No newline at end of file
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..f65d6ae
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 5a800ab..33ec624 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,37 @@
-html,body{
+/* html,body{
+  width: 100vw;
   height: 100vh;
-}
\ No newline at end of file
+} */
+ *{
+  margin: 0;
+  padding: 0;
+ }
+ html{
+  font-size: 1vw;
+ }
+ html,body{
+  background-size: cover;
+  background-attachment: fixed;
+ width: 100vw;
+ }
+ div{
+  font-size: 1rem;
+ }
+ /* 手机 */
+ @media (max-width:750px){
+  html{
+    font-size: 14px;
+   }
+   div{
+    font-size: 1rem;
+   }
+ }
+ /* 平板 */
+ @media (min-width: 750px) and (max-width:1280px){
+
+ }
+ /* 电脑 */
+ @media (min-width:1280px){
+
+ }
+ 
\ No newline at end of file
diff --git a/src/views/BackView.vue b/src/views/BackView.vue
index 18777bb..046e4fb 100644
--- a/src/views/BackView.vue
+++ b/src/views/BackView.vue
@@ -1,49 +1,26 @@
 <script setup>
+import CanApi from '@/api/CanApi';
 import { ref } from 'vue';
 
 
 const candidates = ref([])
 function loadCandidates() {
-  candidates.value = [
-    {
-      id: 1,
-      name: "tom",
-      votes: 122,
-    },
-    {
-      id: 2,
-      name: "lili",
-      votes: 123,
-    },
-    {
-      id: 3,
-      name: "ming",
-      votes: 124,
-    },
-    {
-      id: 1,
-      name: "janey",
-      votes: 122,
-    }
-  ]
+  CanApi.getCandidates().then(result =>{
+    candidates.value = result.data;
+  })
 }
 loadCandidates();
 //对话窗
 const detailVisible = ref(false);
-const details = [
-  {
-    id: "90037845",
-    time: "2024-10-10 20:30:31"
-  },
-  {
-    id: "90037846",
-    time: "2024-10-10 20:30:41"
-  },
-  {
-    id: "90037847",
-    time: "2024-10-10 20:30:51"
-  },
-]
+const details = ref([])
+function searchDetail(scope){
+  console.log(scope);
+
+  detailVisible.value = true;
+  CanApi.Detail(scope).then(result =>{
+    details.value = result.data;
+  })
+}
 </script>
 
 <template>
@@ -53,7 +30,7 @@ const details = [
     <el-table-column prop="votes" label="获得票数" />
     <el-table-column label="操作">
       <template #default="scope">
-        <div class="button" @click="detailVisible = true">
+        <div class="button" @click="searchDetail(scope.row.jwCode)">
           投票详情
         </div>
       </template>
@@ -63,8 +40,8 @@ const details = [
   <el-dialog v-model="detailVisible" title="投票详情" width="800">
     <el-table 
       :data="details" class="table-detail">
-      <el-table-column property="id" label="投票人精网号" width="150" />
-      <el-table-column property="time" label="投票时间" width="200" />
+      <el-table-column prop="jwCode" label="投票人精网号" width="150" />
+      <el-table-column prop="voteTime" label="投票时间" width="200" />
     </el-table>
   </el-dialog>
 
diff --git a/src/views/FrontView.vue b/src/views/FrontView.vue
index b55912e..ef38168 100644
--- a/src/views/FrontView.vue
+++ b/src/views/FrontView.vue
@@ -1,4 +1,6 @@
 <script setup>
+import CanApi from '@/api/CanApi';
+import { ElMessage } from 'element-plus';
 import { ref } from 'vue';
 
 const candidates = ref([]);
@@ -8,7 +10,9 @@ const backCandidates = ref([
     id: 4,
     name:"tom",
     avatar:"../assets/头像框.png",
-    votes:100
+    votes:100,
+    status:0
+
   },
   {
     id: 5,
@@ -19,58 +23,80 @@ const backCandidates = ref([
 
 ])
 //加载候选人
-function loadCandidates() {
-  candidates.value = [
-    {
-      id: 1,
-
+function loadCandidates(jwcode) {
+  CanApi.getCandidates(jwcode).then(result =>{
+    backCandidates.value = result.data;
+    console.log("候选人：",backCandidates.value);
+  })
+}
+loadCandidates(10013);
+//投票
+const voter = ref({
+  jwCode: 10013,
+  candidateJwCode: 20010,
+  name: "小辉"
+})
+function vote(code){
+  console.log("code:",code)
+  voter.value.candidateJwCode = code;
+  console.log("voter:",voter.value)
+  // voter.value.voterJwcode,voter.value.candidateJwcode,voter.value.voterName
+  CanApi.Vote(voter.value).then(result =>{
+    
+    if(result.code == 10000){
+      ElMessage.success(result.msg);
+      loadCandidates(10013);
+    }else{
+      ElMessage.error(result.msg)
     }
-  ]
+  })
 }
+
+
 </script>
 
 <template>
   <div class="container">
     <!-- 上半部分内容 -->
     <div class="header">
-      <div class="channle">
-        <span class="channle-write">Homily Chart 第一频道</span>
-      </div>
-      <div class="title">
-      </div>
-      <!-- 投票规则 -->
-      <div class="rules"></div>
-      <div class="rules-content">
-        每人每天最多可以投三票<br>
-        当天不可重复投一个人<br>
-        统计累计票数最多的三个人
-      </div>
+        <div class="channle">
+          <span class="channle-write">Homily Chart 第一频道</span>
+        </div>
+        <div class="title">
+        </div>
+        <!-- 投票规则 -->
+        <div class="rules"></div>
+        <div class="rules-content">
+          每人每天最多可以投三票<br>
+          当天不可重复投一个人<br>
+          统计累计票数最多的三个人
+        </div>
     </div>
     <!-- 排名信息 -->
     <div class="content">
-      <!-- 第一名 -->
-      <div class="first">
+      <!-- 第二名 -->
+      <div class="second">
         <!-- 头像框 -->
-        <div class="avatar-box1"></div>
+        <div class="avatar-box2"></div>
         <!-- 头像图片 -->
         <!-- 投票按钮 -->
-        <div class="one-button1">投票</div>
+        <div class="one-button2">投票</div>
         <!-- 有多少人投票 -->
-        <div class="votes1">已有500人投票</div>
-        <!-- 排名1 -->
-        <div class="num1"></div>
+        <div class="votes2">已有500人投票</div>
+        <!-- 排名2 -->
+        <div class="num2"></div>
       </div>
-      <!-- 第二名 -->
+      <!-- 第一名 -->
       <div class="second">
         <!-- 头像框 -->
-        <div class="avatar-box2"></div>
+        <div class="avatar-box1"></div>
         <!-- 头像图片 -->
         <!-- 投票按钮 -->
-        <div class="one-button2">投票</div>
+        <div class="one-button1" @click="">投票</div>
         <!-- 有多少人投票 -->
-        <div class="votes2">已有400人投票</div>
+        <div class="votes1">已有400人投票</div>
         <!-- 排名1 -->
-        <div class="num2"></div>
+        <div class="num1"></div>
       </div>
       <!-- 第三名 -->
       <div class="third">
@@ -86,6 +112,8 @@ function loadCandidates() {
       </div>
       <!-- 一二三 -->
       <div class="yes"></div>
+
+
       <!-- 后七名循环列表 -->
       <div class="rand-box">
           <div class="list"
@@ -94,11 +122,15 @@ function loadCandidates() {
             <div class="num">{{ backCandidate.id }}</div>
             <!-- 头像 -->
             <img class="list-avatar"
-              src="../assets/头像框.png">
+              :src="backCandidate.avatar"
+
+
+
+              >
             <!-- 投票数 -->
             <div class="votes">已有{{backCandidate.votes}}人投票</div>
             <!-- 投票按钮 -->
-            <div class="list-button">投票</div>
+            <div class="list-button" @click="vote(backCandidate.jwCode)">投票</div>
           </div>
       </div>
     </div>
@@ -106,40 +138,69 @@ function loadCandidates() {
 </template>
 <style scoped>
 /* 手机 */
-/* @media (max-width:750px) {
+@media (max-width:750px) {
   .container {
-    background-image: url('../assets/bg.png');
-  }
-} */
+  background-image: url('../assets/bg.png');
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background-size: cover; /* 背景图片覆盖整个容器 */
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+
+}
+
+
+} 
 
 /* 平板 */
-/* @media (min-width: 750px) and (max-width:1280px) {
+@media (min-width: 750px) and (max-width:1280px) {
   .container {
-    background-image: url('../assets/bg.png');
-  }
-} */
-
-/* @media (min-width:1280px) { */
-.container {
-  background-image: url('../assets/bg@2x.png');
-  /* background-size: 100% 100%; */
-  background-size: contain;
-  width: 750px;
-  height: 2048px;
+  background-image: url('../assets/bg.png');
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100vw;
+  background-size:100% 100%;
+  background-attachment:fixed;
   margin-left: auto;
   margin-right: auto;
   position: relative;
 }
 
+
+} 
+/* 电脑 */
+@media (min-width:1280px) { 
+  .container {
+    background-image: url('../assets/bg.png');
+    background-repeat: no-repeat;
+    width: 40%;
+    height: 100vw;
+    background-size:100% 100%;
+    /* background-attachment:fixed; */
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+}
+
+
+} 
+
 .header {
   position: relative;
+  height: 35%;
+}
+.content{
+  position: relative;
+  height: 65%;
+  width: 100%;
 }
-
 .channle {
   position: relative;
   background-image: url(../assets/top.png);
-  width: 425px;
-  height: 80px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 58%;
+  height: 28%;
   margin: auto;
   overflow: visible;
   /* background: linear-gradient(90deg, #FFE89C, #FFFBF2); */
@@ -148,18 +209,16 @@ function loadCandidates() {
 .channle-write {
   color: #FFFFFF;
   font-weight: 1000;
-  width: 344px;
-  height: 34px;
-  font-size: 30px;
-  line-height: 20.06px;
+  width: 90%;
+  height: 90%;
+  font-size: 1.4rem;
   border-width: 3px;
-
   text-shadow: 2px 2px 2px #F14509, -2px -1px 2px #F14509, 1px -1px 2px #F14509, -2px 3px 2px #F14509;
   position: absolute;
   /* 添加这一行 */
   top: 50%;
   /* 垂直居中 */
-  left: 55%;
+  left: 56%;
   /* 水平居中 */
   transform: translate(-50%, -50%);
   /* 调整位置 */
@@ -167,30 +226,36 @@ function loadCandidates() {
 
 .title {
   background-image: url(../assets/寻找队医.png);
-  width: 691px;
-  height: 180px;
+  width: 90%;
+  height: 80%;
+  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
-  left: 34px;
-  top: 122px;
+  left: 7%;
+  top: 16%;
+  /* transform: scale(0.8) translateY(-50%);  */
 }
 
 .rules {
   background-image: url(../assets/投票规则.png);
-  width: 297.12px;
-  height: 54.94px;
+  width: 40%;
+  height: 30%;
+  background-repeat: no-repeat;
+  background-size: contain;
   position: absolute;
-  left: 226.44px;
-  top: 317.59px;
+  left: 29%;
+  top: 43%;
+
 }
 
 .rules-content {
   position: absolute;
-  left: 205px;
-  top: 389px;
+  left:16%;
+  top: 52%;
   width: 343px;
   height: 98px;
   color: #FFFFFF;
-  font-size: 24px;
+  font-size: 1.1rem;
   font-weight: 700;
   font-family: Alibaba PuHuiTi;
   /* margin: auto; */
@@ -199,166 +264,198 @@ function loadCandidates() {
 
 .yes {
   background-image: url(../assets/前三.png);
-  height: 237px;
-  width: 698px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 90%;
+  height: 30%;
   position: absolute;
-  left: 26px;
-  top: 707px;
+  left: 5%;
+  top: 0%;
 }
 
-.avatar-box1 {
+.avatar-box2 {
   background-image: url(../assets/头像框.png);
+  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
-  left: 278px;
-  top: 501px;
-  width: 188px;
-  height: 192px;
+  left: 6%;
+  top: -13%;
+  width: 25%;
+  height: 20%;
 }
 
-.one-button1 {
+.one-button2 {
   position: absolute;
-  left: 294.31px;
-  top: 653.53px;
-  width: 155.66px;
-  height: 41.56px;
+  left: 7%;
+  top: -0.5%;
+  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: 24px;
+  font-size: 1.4rem;
   color: #E8160C;
   text-align: center;
+  cursor: pointer;
 }
 
-.votes1 {
+.votes2 {
   position: absolute;
-  left: 279px;
-  top: 700px;
-  width: 191px;
-  height: 28px;
+  left: 10%;
+  top: 3.5%;
+  width: 25%;
+  height: 3%;
   font-family: Alibaba PuHuiTi;
-  font-size: 24px;
+  font-size: 1rem;
   font-weight: 700;
   color: #E84E07;
   z-index: 999;
 }
-
-.num1 {
-  background-image: url(../assets/1.png);
+.num2 {
+  background-image: url(../assets/2.png);
+  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
-  left: 351px;
-  top: 779px;
-  width: 37px;
-  height: 88px;
+  left: 17%;
+  top: 9%;
+  width: 7%;
+  height: 15%;
   /* z-index: 999; */
 }
 
-.avatar-box2 {
+
+.avatar-box1 {
   background-image: url(../assets/头像框.png);
+  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
-  left: 41px;
-  top: 556px;
-  width: 188px;
-  height: 192px;
+  left: 38%;
+  top: -18%;
+  width: 25%;
+  height: 20%;
 }
 
-.one-button2 {
+.one-button1 {
   position: absolute;
-  left: 57.31px;
-  top: 708.53px;
-  width: 155.66px;
-  height: 41.56px;
+  left: 38.5%;
+  top: -5%;
+  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: 24px;
+  font-size: 1.4rem;
   color: #E8160C;
   text-align: center;
+  cursor: pointer;
 }
 
-.votes2 {
+.votes1 {
+
   position: absolute;
-  left: 55px;
-  top: 759px;
-  width: 170px;
-  height: 23px;
+  left: 40%;
+  top: -1%;
+  width: 25;
+  height: 3;
   font-family: Alibaba PuHuiTi;
-  font-size: 24px;
+  font-size: 1rem;
   font-weight: 700;
   color: #E84E07;
   z-index: 999;
 }
 
-.num2 {
-  background-image: url(../assets/2.png);
+.num1 {
+  background-image: url(../assets/1.png);
+  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
-  left: 112px;
-  top: 825px;
-  width: 45px;
-  height: 66px;
+  left: 46%;
+  top: 7%;
+  width: 5%;
+  height: 15%;
   /* z-index: 999; */
 }
 
 .avatar-box3 {
   background-image: url(../assets/头像框.png);
+  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
-  left: 519px;
-  top: 556px;
-  width: 188px;
-  height: 192px;
+  left: 69%;
+  top: -13.5%;
+  width: 25%;
+  height: 20%;
 }
 
 .one-button3 {
-  position: absolute;
-  left: 535.31px;
-  top: 708.53px;
-  width: 155.66px;
-  height: 41.56px;
-  border-radius: 20px 20px 20px 20px;
-  background: linear-gradient(81deg, #FFE89C, #FFC040);
-  border: #FA765D solid 2px;
-  /* 文字 */
-  font-weight: 700;
-  font-size: 24px;
-  color: #E8160C;
-  text-align: center;
+
+position: absolute;
+left: 70.5%;
+top: -0.5%;
+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;
+text-align: center;
+cursor: pointer;
 }
 
 .votes3 {
   position: absolute;
-  left: 535px;
-  top: 759px;
-  width: 170px;
-  height: 23px;
+  left: 70.5%;
+  top: 3.5%;
+  width: 25%;
+  height: 3%;
   font-family: Alibaba PuHuiTi;
-  font-size: 24px;
+  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: 566px;
-  top: 825px;
-  width: 47px;
-  height: 67px;
+  left: 75%;
+  top: 9%;
+  width: 7%;
+  height: 15%;
   /* z-index: 999; */
 }
 
+
+.yes {
+  background-image: url(../assets/前三.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 90%;
+  height: 30%;
+  position: absolute;
+  left: 5%;
+  top: 0%;
+}
 .rand-box {
   background-color: #FFFFFF;
   border: #F14509 solid 2px;
   border-radius: 27.78px 27.78px 27.78px 27.78px;
   position: absolute;
-  left: 42.8px;
-  top: 922.56px;
-  width: 666.06px;
-  height: 1016.75px;
+  left: 5%;
+  top: 18%;
+  width: 90%;
+  height: auto;
+  /* height: 70%; */
   /* box-shadow: 3px 8px 19px 0 #66f1291f; */
   box-shadow: 9px 9px 19px -9px #F1291F40;
 }
@@ -366,58 +463,61 @@ function loadCandidates() {
   display: flex;
   /* display: inline-block; */
   align-items: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-left: 20px;
-  padding: 10px;
+  margin-top: 3%;
+  /* margin-bottom: 10px; */
+  margin-left: 4%;
+  padding: 2%;
   border-bottom: 1px solid #B24300;
 }
 
 .num{
   font-family: zihunxingmouhei_trial;
-  font-size: 26px; /* 排名字体大小 */
+  font-size: 1.625rem; /* 排名字体大小 */
   font-weight: 800; /* 排名字体加粗 */
   color: #F4850D;
-  margin-right: 18px; /* 与头像之间的间距 */
+  margin-right: 8%; /* 与头像之间的间距 */
   margin-left: 20px;
 }
 .list-avatar {
-  width: 98.13px;
-height: 98.13px;
+  width: 20%;
+  height: 18%;
   border-radius: 50%; /* 圆形头像 */
-  margin-right: 35px; /* 与投票数之间的间距 */
+  /* margin-right: 2%;  */
 }
 
 .votes {
-  font-size: 28px; /* 投票数字体大小 */
+  font-size: 1.2rem; /* 投票数字体大小 */
   font-weight: 400;
 width: 190px;
 height: 27px;
   flex-grow: 1; /* 填充剩余空间 */
  
   color: #F4850D; /* 投票数字体颜色 */
-  margin-right: 20px; /* 与投票按钮之间的间距 */
+  /* margin-right: 2%;  */
 }
 
+
 .list-button {
  
   background: linear-gradient(81deg, #FFE89C, #FFC040);
   border: #FA765D solid 2px;
-  width: 143.88px;
-height: 48.4px;
+  width: 22%;
+  height: 10%;
 border-radius: 24.15px 24.15px 24.15px 24.15px;
 cursor: pointer; /* 鼠标悬停时的指针样式 */
 transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
   /* 文字 */
-  font-weight: 800;
-  font-size: 26px;
+  font-weight: 700;
+  font-size: 1.3rem;
   color: #E8160C;
   text-align: center;
-  letter-spacing: 7px;
+  letter-spacing: 1%;
+  margin-right: 2%;
 }
 
 .list-button:hover {
   background-color: #e6b800; /* 鼠标悬停时的背景颜色 */
 }
-/* } */
+
+
 </style>
diff --git a/vite.config.js b/vite.config.js
index 4217010..1232eaf 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,4 +15,14 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        //后端服务器地址
+        target: 'http://192.168.9.117:8091',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
 })