diff --git a/src/assets/bg.jpg b/src/assets/bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..063a5b6a1431555cb9b7f4cd1117b0f428016e6a
Binary files /dev/null and b/src/assets/bg.jpg differ
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 931b9beb86eac34ae5b4068766f53d47641f93dd..a0f4000683b471c4af19c24cc1a79d5c31882f73 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,20 +4,34 @@
 
     <el-collapse v-model="activeName" accordion>
 
-      <el-collapse-item v-for="item in data" :title="item.name" :name="item.id">
+      <el-collapse-item v-for="item in data" :title="item.name" :name="item.id" :key="item.id" >
         <div>{{item.content}}</div>
       </el-collapse-item>
 
     </el-collapse>
     <div style="margin-top: 15px;">精确到秒的魔法</div>
+
+    <div style="width: 50%;margin-top: 5%">
+      <div id="pie" style="width: 100%;height: 400px"></div>
+    </div>
+
+
+
+
+
+
   </div>
 
+
+
+
 </template>
 
 <script>
 
 
 import request from "@/utils/request";
+import * as echarts from 'echarts';
 
 export default {
   name: 'HomeView',
@@ -33,6 +47,7 @@ export default {
 
   mounted() {
     this.findNotice();
+    this.initPie();
 
   },
 
@@ -50,8 +65,56 @@ export default {
 
 
       })
+    },
+
+
+    initPie() {
+      let chartDom = document.getElementById('pie');
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: 'Referer of a Website',
+          subtext: 'Fake Data',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
     }
 
+
+
+
   },
 
 
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index f71b9a78860ff3e327635d279fe8a1401fd18e4d..5ab4aab1b309a74cfac027ddbac97afe99d7e003 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="login-container">
 
   <div style="width:450px; height:400px; margin:150px auto;background-color: cornflowerblue;border-radius: 10px " >
   <div style="width:100%; height:100px; font-size: 30px; line-height: 100px;text-align: center; color: aliceblue">欢迎登陆</div>
@@ -14,8 +14,10 @@
     </el-form-item>
 
     <el-form-item>
-      <el-input v-model="admin.verCode" prefix-icon="el-icon-edit" style="width: 42%" placeholder="请输入验证码："></el-input>
-      <img :src/>
+      <div style="display:flex;justify-content: center">
+      <el-input v-model="admin.verCode" prefix-icon="el-icon-edit" style="width: 46%; margin-right: 10px" placeholder="请输入验证码："></el-input>
+      <img :src="captchaImage" @click="clickImg()" width="140px" height="33px" />
+      </div>
     </el-form-item>
 
     <el-form-item>
@@ -47,19 +49,21 @@ export default {
 
   data(){
     return{
-      admin:{}
-
+      admin:{},
+      captchaImage:'',
+      key:Math.random(),
 
 
     }
   },
 
   created(){
+
   },
 
   methods:{
     login(){
-      request.post("/admin/login",this.admin).then(res =>{
+      request.post("/admin/login?key="+this.key,this.admin).then(res =>{
         if (res.code ==="0"){
           this.$message({
             message: '登录成功',
@@ -68,6 +72,7 @@ export default {
           localStorage.setItem("user",JSON.stringify(res.data))//将用户信息存在网页的localstorage里
           this.$router.push("/Layout");
         }else{
+          this.fetchCaptcha();
           this.$message({
             message: res.msg,
             type: 'error'
@@ -82,7 +87,32 @@ export default {
 
     toRegister(){
       this.$router.push("/register")
-    }
+    },
+
+
+    fetchCaptcha() {
+
+      request.get('/captcha?key='+this.key).then(response => {
+        console.log(response.data)
+            this.captchaImage = response.data;
+          }).catch(error => {
+            console.error('获取验证码失败:', error);
+          });
+    },
+
+    clickImg(){
+      this.fetchCaptcha()//点击刷新验证码
+
+    },
+
+
+
+  },
+
+  mounted() {
+
+    this.fetchCaptcha();
+
   }
 
 
@@ -99,6 +129,15 @@ export default {
 
 <style>
 
+.login-container{
+  height:100vh;
+  overflow: hidden;
+  background-image: url("@/assets/bg.jpg");
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}