From 45fc3d800b2b582457649ad0b8a964eb39acdf96 Mon Sep 17 00:00:00 2001
From: ting <yaojianting0913@163.com>
Date: Tue, 17 Dec 2024 20:27:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=80=82=E9=85=8D=E4=B8=8D?=
 =?UTF-8?q?=E5=90=8C=E7=BB=88=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image.png    | Bin 0 -> 3363 bytes
 src/assets/main.css     |  24 ++-
 src/views/BackView.vue  |   4 +-
 src/views/FrontView.vue | 561 +++++++++++++++++++++++++++++-------------------
 vite.config.js          |   4 +-
 5 files changed, 363 insertions(+), 230 deletions(-)
 create mode 100644 src/assets/image.png

diff --git a/src/assets/image.png b/src/assets/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..d699648431c55a099387ac969a8b865d61a1df48
GIT binary patch
literal 3363
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

literal 0
HcmV?d00001

diff --git a/src/assets/main.css b/src/assets/main.css
index 33ec624..aed5591 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,7 +1,3 @@
-/* html,body{
-  width: 100vw;
-  height: 100vh;
-} */
  *{
   margin: 0;
   padding: 0;
@@ -9,18 +5,19 @@
  html{
   font-size: 1vw;
  }
- html,body{
-  background-size: cover;
-  background-attachment: fixed;
- width: 100vw;
- }
  div{
   font-size: 1rem;
  }
+ /* html,body{
+  height: 100%;
+ }
+ #app{
+  height: 100%;
+ } */
  /* 手机 */
  @media (max-width:750px){
   html{
-    font-size: 14px;
+    font-size: 10.5px;
    }
    div{
     font-size: 1rem;
@@ -28,7 +25,12 @@
  }
  /* 平板 */
  @media (min-width: 750px) and (max-width:1280px){
-
+  html{
+    font-size: 18px;
+   }
+   div{
+    font-size: 1rem;
+   }
  }
  /* 电脑 */
  @media (min-width:1280px){
diff --git a/src/views/BackView.vue b/src/views/BackView.vue
index 046e4fb..9ecbf7b 100644
--- a/src/views/BackView.vue
+++ b/src/views/BackView.vue
@@ -37,9 +37,9 @@ function searchDetail(scope){
     </el-table-column>
   </el-table>
   <!-- 对话框 -->
-  <el-dialog v-model="detailVisible" title="投票详情" width="800">
+  <el-dialog v-model="detailVisible" title="投票详情" width="520" center>
     <el-table 
-      :data="details" class="table-detail">
+      :data="details" class="table-detail" >
       <el-table-column prop="jwCode" label="投票人精网号" width="150" />
       <el-table-column prop="voteTime" label="投票时间" width="200" />
     </el-table>
diff --git a/src/views/FrontView.vue b/src/views/FrontView.vue
index ef38168..38d3eb5 100644
--- a/src/views/FrontView.vue
+++ b/src/views/FrontView.vue
@@ -1,52 +1,100 @@
 <script setup>
 import CanApi from '@/api/CanApi';
-import { ElMessage } from 'element-plus';
+import { defaultInitialZIndex, ElMessage } from 'element-plus';
 import { ref } from 'vue';
 
-const candidates = ref([]);
+//候选人
+const candidates = ref([])
+const first = ref();
+const second = ref();
+const third = ref();
 //后七名
 const backCandidates = ref([
   {
     id: 4,
-    name:"tom",
-    avatar:"../assets/头像框.png",
-    votes:100,
-    status:0
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100,
+    status: 0
 
   },
   {
     id: 5,
-    name:"tom",
-    avatar:"../assets/头像框.png",
-    votes:100
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100
+  },
+  {
+    id: 6,
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100
+  }
+  ,
+  {
+    id: 7,
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100
+  },
+  {
+    id: 8,
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100
+  },
+  {
+    id: 9,
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100
+  },
+  {
+    id: 10,
+    name: "tom",
+    avatar: "../assets/头像框.png",
+    votes: 100
   }
 
 ])
 //加载候选人
 function loadCandidates(jwcode) {
-  CanApi.getCandidates(jwcode).then(result =>{
-    backCandidates.value = result.data;
-    console.log("候选人：",backCandidates.value);
+  CanApi.getCandidates(jwcode).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(10013);
+ loadCandidates(10015);
 //投票
 const voter = ref({
-  jwCode: 10013,
+  jwCode: 10015,
   candidateJwCode: 20010,
   name: "小辉"
 })
-function vote(code){
-  console.log("code:",code)
+function vote(code) {
+  console.log("code:", code)
   voter.value.candidateJwCode = code;
-  console.log("voter:",voter.value)
+  console.log("voter:", voter.value)
   // voter.value.voterJwcode,voter.value.candidateJwcode,voter.value.voterName
-  CanApi.Vote(voter.value).then(result =>{
-    
-    if(result.code == 10000){
+  CanApi.Vote(voter.value).then(result => {
+
+    if (result.code == 10000) {
       ElMessage.success(result.msg);
       loadCandidates(10013);
-    }else{
+    } else {
       ElMessage.error(result.msg)
     }
   })
@@ -59,235 +107,234 @@ function vote(code){
   <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="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">
+      <div class="second" :second="second">
         <!-- 头像框 -->
         <div class="avatar-box2"></div>
         <!-- 头像图片 -->
+        <img class="cover2" src="../assets/image.png">
         <!-- 投票按钮 -->
-        <div class="one-button2">投票</div>
+        <div class="one-button2" v-if="second.votes==false" @click="vote(first.jwCode)">投票</div>
+        <div class="buttoned2" v-else @click="vote(second.jwCode)">已投票</div>
         <!-- 有多少人投票 -->
-        <div class="votes2">已有500人投票</div>
+        <div class="votes2">已有{{second.votes}}人投票</div>
         <!-- 排名2 -->
         <div class="num2"></div>
       </div>
       <!-- 第一名 -->
-      <div class="second">
+      <div class="first" :first="first">
         <!-- 头像框 -->
         <div class="avatar-box1"></div>
         <!-- 头像图片 -->
         <!-- 投票按钮 -->
-        <div class="one-button1" @click="">投票</div>
+        <div class="one-button1" v-if="first.votes==false" @click="vote(first.jwCode)">投票</div>
+        <div class="buttoned1" v-else @click="vote(first.jwCode)">已投票</div>
         <!-- 有多少人投票 -->
-        <div class="votes1">已有400人投票</div>
+        <div class="votes1">已有{{first.votes}}人投票</div>
         <!-- 排名1 -->
         <div class="num1"></div>
       </div>
       <!-- 第三名 -->
-      <div class="third">
+      <div class="third" :third="third">
         <!-- 头像框 -->
         <div class="avatar-box3"></div>
         <!-- 头像图片 -->
         <!-- 投票按钮 -->
-        <div class="one-button3">投票</div>
+        <div class="one-button3" v-if="third.votes==false" @click="vote(third.jwCode)">投票</div>
+        <div class="buttoned3" v-else @click="vote(third.jwCode)">已投票</div>
         <!-- 有多少人投票 -->
-        <div class="votes3">已有400人投票</div>
+        <div class="votes3">已有{{third.votes}}人投票</div>
         <!-- 排名1 -->
         <div class="num3"></div>
       </div>
-      <!-- 一二三 -->
-      <div class="yes"></div>
+
 
 
       <!-- 后七名循环列表 -->
       <div class="rand-box">
-          <div class="list"
-            v-for="backCandidate in backCandidates">
-            <!-- 排名 -->
-            <div class="num">{{ backCandidate.id }}</div>
-            <!-- 头像 -->
-            <img class="list-avatar"
-              :src="backCandidate.avatar"
-
-
-
-              >
-            <!-- 投票数 -->
-            <div class="votes">已有{{backCandidate.votes}}人投票</div>
-            <!-- 投票按钮 -->
-            <div class="list-button" @click="vote(backCandidate.jwCode)">投票</div>
-          </div>
+        <div class="list" v-for="(backCandidate,index) in backCandidates" :key="index">
+          <!-- 排名 -->
+          <div class="num">{{ index+4 }}</div>
+          <!-- 头像 -->
+          <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">-以上数据截至至2024.12.28-</div>
     </div>
   </div>
 </template>
 <style scoped>
-/* 手机 */
-@media (max-width:750px) {
-  .container {
-  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) {
   .container {
-  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;
-}
+    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) { 
+@media (min-width:1280px) {
   .container {
     background-image: url('../assets/bg.png');
     background-repeat: no-repeat;
-    width: 40%;
-    height: 100vw;
-    background-size:100% 100%;
+    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: 35%;
+  height: 28%;
 }
-.content{
+
+.content {
   position: relative;
   height: 65%;
   width: 100%;
 }
+
 .channle {
-  position: relative;
-  background-image: url(../assets/top.png);
-  background-size: contain;
+  background-image: url(/src/assets/top.png);
   background-repeat: no-repeat;
-  width: 58%;
-  height: 28%;
-  margin: auto;
-  overflow: visible;
-  /* background: linear-gradient(90deg, #FFE89C, #FFFBF2); */
-}
-
-.channle-write {
+  background-size: 100% 100%;
+  width: 65%;
+  margin-left: auto;
+  margin-right: auto;
   color: #FFFFFF;
   font-weight: 1000;
-  width: 90%;
-  height: 90%;
-  font-size: 1.4rem;
-  border-width: 3px;
+  font-size: 1.5rem;
   text-shadow: 2px 2px 2px #F14509, -2px -1px 2px #F14509, 1px -1px 2px #F14509, -2px 3px 2px #F14509;
-  position: absolute;
-  /* 添加这一行 */
-  top: 50%;
-  /* 垂直居中 */
-  left: 56%;
-  /* 水平居中 */
-  transform: translate(-50%, -50%);
-  /* 调整位置 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
+
 .title {
-  background-image: url(../assets/寻找队医.png);
+
   width: 90%;
-  height: 80%;
   background-size: contain;
   background-repeat: no-repeat;
-  position: absolute;
-  left: 7%;
-  top: 16%;
-  /* transform: scale(0.8) translateY(-50%);  */
+  margin: auto;
+
+}
+
+.duiyi {
+  width: 100%;
+  margin-top: 5%;
 }
 
 .rules {
-  background-image: url(../assets/投票规则.png);
-  width: 40%;
   height: 30%;
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 29%;
-  top: 43%;
+}
 
+.rule-title {
+  width: 40%;
+  margin-left: 30%;
 }
 
 .rules-content {
-  position: absolute;
-  left:16%;
-  top: 52%;
-  width: 343px;
-  height: 98px;
+  width: 45%;
+  height: 20%;
   color: #FFFFFF;
-  font-size: 1.1rem;
+  font-size: 1.3rem;
   font-weight: 700;
   font-family: Alibaba PuHuiTi;
-  /* margin: auto; */
+  margin: auto;
   text-align: center;
+  text-shadow: 1px 0px 0 #F14509, -1px 0px 0 #F14509, 0px -1px 0 #F14509, 0px 0px 0 #F14509;
 }
 
 .yes {
-  background-image: url(../assets/前三.png);
-  background-size: contain;
-  background-repeat: no-repeat;
   width: 90%;
   height: 30%;
-  position: absolute;
-  left: 5%;
-  top: 0%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20%;
+}
+.yiersan{
+  margin-top: 9%;
+  width: 100%;
 }
-
 .avatar-box2 {
   background-image: url(../assets/头像框.png);
+  position: absolute;
   background-size: contain;
   background-repeat: no-repeat;
-  position: absolute;
-  left: 6%;
-  top: -13%;
+  left: 9%;
+  top: -9%;
   width: 25%;
   height: 20%;
 }
+.cover2{
+  position: absolute;
+  left: 11.5%;
+  top: -5.5%;
+  width: 20%;
+  height: 14%;
+  border-radius: 50%;
+}
 
 .one-button2 {
   position: absolute;
-  left: 7%;
-  top: -0.5%;
+  left: 9%;
+  top: 5%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -300,11 +347,26 @@ function vote(code){
   text-align: center;
   cursor: pointer;
 }
-
+.buttoned2{
+  position: absolute;
+  left: 9%;
+  top: 5%;
+  width: 22%;
+  height: 3.5%;
+  border-radius: 20px 20px 20px 20px;
+  border: #FA765D solid 2px;
+  /* 文字 */
+  font-weight: 700;
+  font-size: 1.4rem;
+  text-align: center;
+  cursor: pointer;
+  background: #EEEEEE;
+  color: #999999;
+}
 .votes2 {
   position: absolute;
-  left: 10%;
-  top: 3.5%;
+  left: 11%;
+  top: 9%;
   width: 25%;
   height: 3%;
   font-family: Alibaba PuHuiTi;
@@ -313,15 +375,16 @@ function vote(code){
   color: #E84E07;
   z-index: 999;
 }
+
 .num2 {
   background-image: url(../assets/2.png);
   background-size: contain;
   background-repeat: no-repeat;
-  position: absolute;
-  left: 17%;
-  top: 9%;
   width: 7%;
   height: 15%;
+  position: absolute;
+  left: 14%;
+  top: 15%;
   /* z-index: 999; */
 }
 
@@ -332,15 +395,15 @@ function vote(code){
   background-repeat: no-repeat;
   position: absolute;
   left: 38%;
-  top: -18%;
+  top: -12%;
   width: 25%;
   height: 20%;
 }
 
 .one-button1 {
   position: absolute;
-  left: 38.5%;
-  top: -5%;
+  left: 39%;
+  top: 2%;
   width: 22%;
   height: 3.5%;
   border-radius: 20px 20px 20px 20px;
@@ -353,12 +416,28 @@ function vote(code){
   text-align: center;
   cursor: pointer;
 }
+.buttoned1{
+  position: absolute;
+  left: 39%;
+  top: 2%;
+  width: 22%;
+  height: 3.5%;
+  border-radius: 20px 20px 20px 20px;
+  border: #FA765D solid 2px;
+  /* 文字 */
+  font-weight: 700;
+  font-size: 1.4rem;
+  text-align: center;
+  cursor: pointer;
+  background: #EEEEEE;
+  color: #999999;
+}
 
 .votes1 {
 
   position: absolute;
-  left: 40%;
-  top: -1%;
+  left: 43.5%;
+  top: 6%;
   width: 25;
   height: 3;
   font-family: Alibaba PuHuiTi;
@@ -373,8 +452,8 @@ function vote(code){
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
-  left: 46%;
-  top: 7%;
+  left: 47%;
+  top: 12%;
   width: 5%;
   height: 15%;
   /* z-index: 999; */
@@ -385,34 +464,49 @@ function vote(code){
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
-  left: 69%;
-  top: -13.5%;
+  left: 68%;
+  top: -9%;
   width: 25%;
   height: 20%;
 }
 
 .one-button3 {
 
-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;
+  position: absolute;
+  left: 69%;
+  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: 1.4rem;
+  color: #E8160C;
+  text-align: center;
+  cursor: pointer;
+}
+.buttoned3{
+  position: absolute;
+  left: 69%;
+  top: 5%;
+  width: 22%;
+  height: 3.5%;
+  border-radius: 20px 20px 20px 20px;
+  border: #FA765D solid 2px;
+  /* 文字 */
+  font-weight: 700;
+  font-size: 1.4rem;
+  text-align: center;
+  cursor: pointer;
+  background: #EEEEEE;
+  color: #999999;
 }
-
 .votes3 {
   position: absolute;
   left: 70.5%;
-  top: 3.5%;
+  top: 9%;
   width: 25%;
   height: 3%;
   font-family: Alibaba PuHuiTi;
@@ -429,83 +523,91 @@ cursor: pointer;
   background-repeat: no-repeat;
   position: absolute;
   left: 75%;
-  top: 9%;
+  top: 15%;
   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: 5%;
-  top: 18%;
   width: 90%;
   height: auto;
+  margin: auto;
   /* height: 70%; */
   /* box-shadow: 3px 8px 19px 0 #66f1291f; */
   box-shadow: 9px 9px 19px -9px #F1291F40;
 }
-.list{
+
+.list {
   display: flex;
   /* display: inline-block; */
   align-items: center;
-  margin-top: 3%;
-  /* margin-bottom: 10px; */
+  justify-content: center;
+  margin-top: 5%;
+  margin-bottom: 5%;
   margin-left: 4%;
   padding: 2%;
-  border-bottom: 1px solid #B24300;
+  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{
+.num {
   font-family: zihunxingmouhei_trial;
-  font-size: 1.625rem; /* 排名字体大小 */
-  font-weight: 800; /* 排名字体加粗 */
+  font-size: 1.625rem;
+  /* 排名字体大小 */
+  font-weight: 800;
+  /* 排名字体加粗 */
   color: #F4850D;
-  margin-right: 8%; /* 与头像之间的间距 */
+  margin-right: 8%;
+  /* 与头像之间的间距 */
   margin-left: 20px;
 }
+
 .list-avatar {
   width: 20%;
   height: 18%;
-  border-radius: 50%; /* 圆形头像 */
+  border-radius: 50%;
+  /* 圆形头像 */
   /* margin-right: 2%;  */
 }
 
 .votes {
-  font-size: 1.2rem; /* 投票数字体大小 */
+  font-size: 1.2rem;
+  /* 投票数字体大小 */
   font-weight: 400;
-width: 190px;
-height: 27px;
-  flex-grow: 1; /* 填充剩余空间 */
- 
-  color: #F4850D; /* 投票数字体颜色 */
+  width: 190px;
+  height: 27px;
+  flex-grow: 1;
+  /* 填充剩余空间 */
+
+  color: #F4850D;
+  /* 投票数字体颜色 */
   /* margin-right: 2%;  */
 }
 
 
-.list-button {
- 
+.list-button1 {
+
   background: linear-gradient(81deg, #FFE89C, #FFC040);
   border: #FA765D solid 2px;
   width: 22%;
-  height: 10%;
-border-radius: 24.15px 24.15px 24.15px 24.15px;
-cursor: pointer; /* 鼠标悬停时的指针样式 */
-transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
+  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;
@@ -514,10 +616,39 @@ transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
   letter-spacing: 1%;
   margin-right: 2%;
 }
-
+.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: 2%;
+}
 .list-button:hover {
-  background-color: #e6b800; /* 鼠标悬停时的背景颜色 */
+  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>
diff --git a/vite.config.js b/vite.config.js
index 1232eaf..3fcd4a9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,13 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
-    vueDevTools(),
+    // vueDevTools(),
   ],
   resolve: {
     alias: {