对接完成，样式调整完成，头像图片还未添加

src/assets/main.css

@@ -24,9 +24,9 @@
    }
  }
  /* 平板 */
- @media (min-width: 750px) and (max-width:1280px){
+ @media (min-width: 750px) and (max-width:1279px){
   html{
-    font-size: 18px;
+    font-size: 2.5vw;
    }
    div{
     font-size: 1rem;

src/views/BackView.vue

@@ -21,11 +21,15 @@ function searchDetail(scope){
     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 prop="id" label="序号" width="180" />
+    <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="操作">

src/views/FrontView.vue

@@ -6,8 +6,29 @@ import { ref } from 'vue';
 //候选人
 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([
   {
@@ -15,48 +36,55 @@ const backCandidates = ref([
     name: "tom",
     avatar: "../assets/头像框.png",
     votes: 100,
-    status: 0
+    voted: true
 
   },
   {
     id: 5,
     name: "tom",
     avatar: "../assets/头像框.png",
-    votes: 100
+    votes: 100,
+    voted: true
   },
   {
     id: 6,
     name: "tom",
     avatar: "../assets/头像框.png",
-    votes: 100
+    votes: 100,
+    voted: true
   }
   ,
   {
     id: 7,
     name: "tom",
     avatar: "../assets/头像框.png",
-    votes: 100
+    votes: 100,
+    voted: false
   },
   {
     id: 8,
     name: "tom",
     avatar: "../assets/头像框.png",
-    votes: 100
+    votes: 100,
+    voted: true
   },
   {
     id: 9,
     name: "tom",
     avatar: "../assets/头像框.png",
-    votes: 100
+    votes: 100,
+    voted: true
   },
   {
     id: 10,
     name: "tom",
     avatar: "../assets/头像框.png",
-    votes: 100
+    votes: 100,
+    voted: false
   }
 
 ])
+let key = 10017;
 //加载候选人
 function loadCandidates(jwcode) {
   CanApi.getCandidates(jwcode).then(result => {
@@ -73,14 +101,14 @@ function loadCandidates(jwcode) {
     console.log("第二个候选人：", second.value);
     console.log("第三个候选人：", third.value);
     console.log("后七名候选人：", backCandidates.value);
-    
+
     console.log("候选人：", backCandidates.value);
   })
 }
- loadCandidates(10015);
+loadCandidates(key);
 //投票
 const voter = ref({
-  jwCode: 10015,
+  jwCode: key,
   candidateJwCode: 20010,
   name: "小辉"
 })
@@ -93,9 +121,10 @@ function vote(code) {
 
     if (result.code == 10000) {
       ElMessage.success(result.msg);
-      loadCandidates(10013);
+      loadCandidates(key);
     } else {
       ElMessage.error(result.msg)
+      loadCandidates(key);
     }
   })
 }
@@ -137,10 +166,10 @@ function vote(code) {
         <!-- 头像图片 -->
         <img class="cover2" src="../assets/image.png">
         <!-- 投票按钮 -->
-        <div class="one-button2" v-if="second.votes==false" @click="vote(first.jwCode)">投票</div>
+        <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>
+        <div class="votes2">已有{{ second.votes }}人投票</div>
         <!-- 排名2 -->
         <div class="num2"></div>
       </div>
@@ -149,11 +178,12 @@ function vote(code) {
         <!-- 头像框 -->
         <div class="avatar-box1"></div>
         <!-- 头像图片 -->
+        <img class="cover1" src="../assets/image.png">
         <!-- 投票按钮 -->
-        <div class="one-button1" v-if="first.votes==false" @click="vote(first.jwCode)">投票</div>
+        <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>
+        <div class="votes1">已有{{ first.votes }}人投票</div>
         <!-- 排名1 -->
         <div class="num1"></div>
       </div>
@@ -162,11 +192,12 @@ function vote(code) {
         <!-- 头像框 -->
         <div class="avatar-box3"></div>
         <!-- 头像图片 -->
+        <img class="cover3" src="../assets/image.png">
         <!-- 投票按钮 -->
-        <div class="one-button3" v-if="third.votes==false" @click="vote(third.jwCode)">投票</div>
+        <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>
+        <div class="votes3">已有{{ third.votes }}人投票</div>
         <!-- 排名1 -->
         <div class="num3"></div>
       </div>
@@ -175,18 +206,18 @@ function vote(code) {
 
       <!-- 后七名循环列表 -->
       <div class="rand-box">
-        <div class="list" v-for="(backCandidate,index) in backCandidates" :key="index">
+        <div class="list" v-for="(backCandidate, index) in backCandidates" :key="index">
           <!-- 排名 -->
-          <div class="num">{{ index+4 }}</div>
+          <div class="num">{{ index + 4 }}</div>
           <!-- 头像 -->
-          <img class="list-avatar" :src="backCandidate.avatar">
+          <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-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>
@@ -224,7 +255,8 @@ function vote(code) {
   }
 
 }
-@media (max-width:750px){
+
+@media (max-width:750px) {
   .container {
     background-image: url('../assets/bg.png');
     background-repeat: no-repeat;
@@ -306,35 +338,38 @@ function vote(code) {
   height: 30%;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 20%;
+  margin-top: 25%;
 }
-.yiersan{
+
+.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: -9%;
+  top: -8%;
   width: 25%;
   height: 20%;
 }
-.cover2{
+
+.cover2 {
   position: absolute;
   left: 11.5%;
-  top: -5.5%;
-  width: 20%;
-  height: 14%;
+  top: -6%;
+  width: 19%;
+  height: 12%;
   border-radius: 50%;
 }
 
 .one-button2 {
   position: absolute;
   left: 9%;
-  top: 5%;
+  top: 3%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -344,13 +379,16 @@ function vote(code) {
   font-weight: 700;
   font-size: 1.4rem;
   color: #E8160C;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
 }
-.buttoned2{
+
+.buttoned2 {
   position: absolute;
   left: 9%;
-  top: 5%;
+  top: 3%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -358,15 +396,18 @@ function vote(code) {
   /* 文字 */
   font-weight: 700;
   font-size: 1.4rem;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
   background: #EEEEEE;
   color: #999999;
 }
+
 .votes2 {
   position: absolute;
   left: 11%;
-  top: 9%;
+  top: 7%;
   width: 25%;
   height: 3%;
   font-family: Alibaba PuHuiTi;
@@ -384,7 +425,7 @@ function vote(code) {
   height: 15%;
   position: absolute;
   left: 14%;
-  top: 15%;
+  top: 12%;
   /* z-index: 999; */
 }
 
@@ -395,31 +436,44 @@ function vote(code) {
   background-repeat: no-repeat;
   position: absolute;
   left: 38%;
-  top: -12%;
+  top: -11%;
   width: 25%;
   height: 20%;
 }
 
+.cover1 {
+  position: absolute;
+
+  left: 41%;
+  top: -9.5%;
+  width: 19%;
+  height: 12%;
+  border-radius: 50%;
+}
+
 .one-button1 {
   position: absolute;
   left: 39%;
-  top: 2%;
+  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;
-  text-align: center;
   cursor: pointer;
 }
-.buttoned1{
+
+.buttoned1 {
   position: absolute;
   left: 39%;
-  top: 2%;
+  top: 0%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -427,7 +481,9 @@ function vote(code) {
   /* 文字 */
   font-weight: 700;
   font-size: 1.4rem;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
   background: #EEEEEE;
   color: #999999;
@@ -436,8 +492,8 @@ function vote(code) {
 .votes1 {
 
   position: absolute;
-  left: 43.5%;
-  top: 6%;
+  left: 43%;
+  top: 4%;
   width: 25;
   height: 3;
   font-family: Alibaba PuHuiTi;
@@ -453,7 +509,7 @@ function vote(code) {
   background-repeat: no-repeat;
   position: absolute;
   left: 47%;
-  top: 12%;
+  top: 9.5%;
   width: 5%;
   height: 15%;
   /* z-index: 999; */
@@ -465,16 +521,25 @@ function vote(code) {
   background-repeat: no-repeat;
   position: absolute;
   left: 68%;
-  top: -9%;
+  top: -8%;
   width: 25%;
   height: 20%;
 }
 
+.cover3 {
+  position: absolute;
+  left: 71%;
+  top: -6%;
+  width: 19%;
+  height: 12%;
+  border-radius: 50%;
+}
+
 .one-button3 {
 
   position: absolute;
   left: 69%;
-  top: 5%;
+  top: 3%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -484,13 +549,16 @@ function vote(code) {
   font-weight: 700;
   font-size: 1.4rem;
   color: #E8160C;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
 }
-.buttoned3{
+
+.buttoned3 {
   position: absolute;
   left: 69%;
-  top: 5%;
+  top: 3%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -498,15 +566,18 @@ function vote(code) {
   /* 文字 */
   font-weight: 700;
   font-size: 1.4rem;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
   background: #EEEEEE;
   color: #999999;
 }
+
 .votes3 {
   position: absolute;
-  left: 70.5%;
-  top: 9%;
+  left: 72%;
+  top: 7%;
   width: 25%;
   height: 3%;
   font-family: Alibaba PuHuiTi;
@@ -523,7 +594,7 @@ function vote(code) {
   background-repeat: no-repeat;
   position: absolute;
   left: 75%;
-  top: 15%;
+  top: 12%;
   width: 7%;
   height: 15%;
   /* z-index: 999; */
@@ -579,7 +650,7 @@ function vote(code) {
   height: 18%;
   border-radius: 50%;
   /* 圆形头像 */
-  /* margin-right: 2%;  */
+  margin-right: 2%; 
 }
 
 .votes {
@@ -612,11 +683,14 @@ function vote(code) {
   font-weight: 700;
   font-size: 1.3rem;
   color: #E8160C;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   letter-spacing: 1%;
-  margin-right: 2%;
+  margin-right: 4%;
 }
-.list-button2{
+
+.list-button2 {
   background: #EEEEEE;
   color: #999999;
   border: #FA765D solid 2px;
@@ -630,11 +704,12 @@ function vote(code) {
   /* 文字 */
   font-weight: 700;
   font-size: 1.3rem;
-  
+
   text-align: center;
   letter-spacing: 1%;
-  margin-right: 2%;
+  margin-right: 4%;
 }
+
 .list-button:hover {
   background-color: #e6b800;
   /* 鼠标悬停时的背景颜色 */