diff --git a/src/assets/charge.png b/src/assets/charge.png
new file mode 100644
index 0000000..e06bf8f
Binary files /dev/null and b/src/assets/charge.png differ
diff --git a/src/assets/css/SelfInfo.css b/src/assets/css/SelfInfo.css
index 55c8330..ddd58e8 100644
--- a/src/assets/css/SelfInfo.css
+++ b/src/assets/css/SelfInfo.css
@@ -37,4 +37,57 @@
     width: 80px;
     height: 80px;
     margin: 40px auto;
+}
+
+
+/* 添加到你的 SelfInfo.css 文件中 */
+.avatar-container {
+    padding: 20px;
+    text-align: center;
+    background: #f8f9ff;
+    border-radius: 15px;
+    width: fit-content;
+}
+
+.edit-avatar {
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+.el-descriptions {
+    background: #ffffff;
+    border-radius: 15px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 标签列的样式 */
+:deep(.el-descriptions__label) {
+    font-size: 16px;
+    color: #303133;
+    font-weight: bold;
+    padding: 30px;
+    background-color: #f8f9ff;
+}
+
+/* 内容列的样式 */
+:deep(.el-descriptions__content) {
+    font-size: 16px;
+    color: #606266;
+    padding: 30px;
+}
+
+/* 修改表格边框和分隔线的颜色 */
+:deep(.el-descriptions__body) {
+    border: 1px solid #ebeef5;
+}
+
+:deep(.el-descriptions__cell) {
+    border-bottom: 1px solid #ebeef5;
+}
+
+/* 修改按钮样式 */
+.el-button {
+    padding: 12px 20px;
+    font-size: 14px;
+    margin-top: 20px;
 }
\ No newline at end of file
diff --git a/src/assets/js/Home.js b/src/assets/js/Home.js
index bbcf08d..9b05e87 100644
--- a/src/assets/js/Home.js
+++ b/src/assets/js/Home.js
@@ -1,33 +1,87 @@
 import weather from "@/components/weather";
 import Calender from "@/components/Calendar";
 import request from "@/utils/request";
-import home_echarts from "@/components/home_echarts";
 
 export default {
     name: "Home",
     components: {
         weather,
         Calender,
-        home_echarts,
     },
     data() {
         return {
+            waterFee: 0,
+            electricityFee: 0,
             studentNum: "",
+            identity: null,
             haveRoomStudentNum: "",
             detailDialog: false,
             repairOrderNum: "",
             noFullRoomNum: "",
             activities: [],
+            myName:"龚嘉伟",
+            mateName:[
+                '令狐新锐',
+                '令狐新锐',
+                '',
+                '公家为',
+            ],
+            price: 100000000,
         };
     },
+    mounted() {
+        this.loadIdentity();
+    },
     created() {
         this.getHomePageNotice();
         this.getStuNum();
         this.getHaveRoomNum();
         this.getOrderNum();
         this.getNoFullRoom();
+        this.getNameInfo();
     },
     methods: {
+        loadIdentity() {
+            // 从 sessionStorage 中获取 identity
+            const identity = window.sessionStorage.getItem("identity");
+            if (identity) {
+                // 将字符串转换为 JavaScript 对象
+                this.identity = JSON.parse(identity);
+            } else {
+                // 如果没有 identity，可能需要处理用户未登录的情况
+            }
+        },
+        async updateFees() {
+            // 当滑动条值改变时，调用此方法
+            const feesData = {
+              waterFee: this.waterFee,
+              electricityFee: this.electricityFee
+            };
+      
+            // 发送请求到后端
+            request.post('/api/update-fees', feesData)
+              .then(response => {
+                // 处理响应
+                console.log('Fees updated successfully:', response.data);
+              })
+              .catch(error => {
+                // 处理错误
+                console.error('Error updating fees:', error);
+              });
+        },
+        async getNameInfo() {
+            request.get("").then((res) => {
+                if (res.code === "0") {
+                    this.myName = res.data.name;
+                    this.mateName = res.data.mateName;
+                } else {
+                    ElMessage({
+                        message: res.msg,
+                        type: "error",
+                    });
+                }
+            });
+        },
         async getStuNum() {
             request.get("/stu/stuNum").then((res) => {
                 if (res.code === "0") {
diff --git a/src/assets/school.png b/src/assets/school.png
new file mode 100644
index 0000000..1d4a5c8
Binary files /dev/null and b/src/assets/school.png differ
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index e849a3a..62d0ede 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -6,7 +6,7 @@
       unique-opened
   >
     <div style="display: flex;align-items: center;justify-content: center;padding: 11px 0;">
-      <img alt="" src="@/assets/logo.png" style="width: 60px;">
+      <img alt="" src="@/assets/school.png" style="width: 60px;">
     </div>
     <el-menu-item index="/home">
       <el-icon>
@@ -33,6 +33,7 @@
       </template>
       <el-menu-item v-if="this.judgeIdentity()!==0" index="/buildingInfo">楼宇信息</el-menu-item>
       <el-menu-item v-if="this.judgeIdentity()!==0" index="/roomInfo">房间信息</el-menu-item>
+      <el-menu-item v-if="this.judgeIdentity()!==0" index="/callInfo">晚点情况</el-menu-item>
     </el-sub-menu>
     <el-sub-menu v-if="this.judgeIdentity()!==0" index="4">
       <template #title>
@@ -43,6 +44,7 @@
       </template>
       <el-menu-item v-if="this.judgeIdentity()===2" index="/noticeInfo">公告信息</el-menu-item>
       <el-menu-item v-if="this.judgeIdentity()!==0" index="/repairInfo">报修信息</el-menu-item>
+      <el-menu-item v-if="this.judgeIdentity()!==0" index="/feeInfo">缴费信息</el-menu-item>
     </el-sub-menu>
     <el-sub-menu v-if="this.judgeIdentity()!==0" index="5">
       <template #title>
@@ -69,6 +71,18 @@
       </el-icon>
       <span>我的宿舍</span>
     </el-menu-item>
+    <el-menu-item v-if="this.judgeIdentity()===0" index="/chargeFee">
+      <el-icon>
+        <takeaway-box/>
+      </el-icon>
+      <span>缴费信息</span>
+    </el-menu-item>
+    <el-menu-item v-if="this.judgeIdentity()===0" index="/callStu">
+      <el-icon>
+        <takeaway-box/>
+      </el-icon>
+      <span>晚间点名</span>
+    </el-menu-item>
     <el-menu-item v-if="this.judgeIdentity()===0" index="/applyChangeRoom">
       <el-icon>
         <takeaway-box/>
diff --git a/src/router/index.js b/src/router/index.js
index 858a373..baee740 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,12 +12,16 @@ export const constantRoutes = [
             {path: '/dormManagerInfo', name: 'DormManagerInfo', component: () => import("@/views/DormManagerInfo")},
             {path: '/buildingInfo', name: 'BuildingInfo', component: () => import("@/views/BuildingInfo")},
             {path: '/roomInfo', name: 'RoomInfo', component: () => import("@/views/RoomInfo")},
+            {path: '/callInfo', name: 'callInfo', component: () => import("@/views/callInfo")},
             {path: '/noticeInfo', name: 'NoticeInfo', component: () => import("@/views/NoticeInfo")},
             {path: '/adjustRoomInfo', name: 'AdjustRoomInfo', component: () => import("@/views/AdjustRoomInfo")},
             {path: '/repairInfo', name: 'RepairInfo', component: () => import("@/views/RepairInfo")},
+            {path: '/feeInfo', name: 'feeInfo', component: () => import("@/views/feeInfo")},
             {path: '/visitorInfo', name: 'VisitorInfo', component: () => import("@/views/VisitorInfo")},
             //
             {path: '/myRoomInfo', name: 'MyRoomInfo', component: () => import("@/views/MyRoomInfo")},
+            {path: '/chargeFee', name: 'chargeFee', component: () => import("@/views/chargeFee")},
+            {path: '/callStu', name: 'callStu', component: () => import("@/views/callStu")},
             {path: '/applyRepairInfo', name: 'ApplyRepairInfo', component: () => import("@/views/ApplyRepairInfo")},
             {path: '/applyChangeRoom', name: 'ApplyChangeRoom', component: () => import("@/views/ApplyChangeRoom")},
 
@@ -37,16 +41,16 @@ router.beforeEach((to, from, next) => {
     // next 是函数，表示放行
     // next() 放行
     // next('/*') 强制跳转
-    const user = window.sessionStorage.getItem('user')
-    if (to.path === '/Login') {
-        return next();
-    }
-    if (!user) {
-        return next('/Login')
-    }
-    if (to.path === '/' && user) {
-        return next('/home')
-    }
+    // const user = window.sessionStorage.getItem('user')
+    // if (to.path === '/Login') {
+    //     return next();
+    // }
+    // if (!user) {
+    //     return next('/Login')
+    // }
+    // if (to.path === '/' && user) {
+    //     return next('/home')
+    // }
     next()
 })
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a775d2c..c95a91f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -57,17 +57,78 @@
 
 
             <!--   中部-->
-            <div style="height: 588px">
+            <div style="height: 588px" v-if="identity === 'stu'">
                 <span style="
-                font-size: 22px;
+                font-size: 30px;
                 display: block;
                 margin-bottom: 30px;
                 margin-left: 10px;
-                ">宿舍学生人数分布
+                font-weight: bold;
+                ">{{ myName }}，欢迎您！
                 </span>
-                <home_echarts/>
+                <div id="echarts-dom" 
+                style="width: 650px;
+                height: 500px; 
+                border: 2px rgba(0, 0, 255, .5) solid;
+                border-radius: 50px;
+                box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
+                padding: 30px;
+                ">
+                    <!-- 添加舍友信息盒子的容器 -->
+                    <div class="roommate-container">
+                        <!-- 第一行 -->
+                        <div class="roommate-row">
+                            <div class="roommate-box">
+                                <div class="bed-label">A床</div>
+                                <div class="mate-name">{{ mateName[0] || '暂无' }}</div>
+                            </div>
+                            <div class="roommate-box">
+                                <div class="bed-label">B床</div>
+                                <div class="mate-name">{{ mateName[1] || '暂无' }}</div>
+                            </div>
+                        </div>
+                        <!-- 第二行 -->
+                        <div class="roommate-row">
+                            <div class="roommate-box">
+                                <div class="bed-label">C床</div>
+                                <div class="mate-name">{{ mateName[2] || '暂无' }}</div>
+                            </div>
+                            <div class="roommate-box">
+                                <div class="bed-label">D床</div>
+                                <div class="mate-name">{{ mateName[3] || '暂无' }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
 
+            <!-- 中部2 -->
+            <div style="height: 588px;">
+                <span style="font-size: 35px; display: block; margin-bottom: 20px; margin-left: 10px; font-weight: bold;">
+                    水电费收款凭证
+                </span>
+                <span style="font-size: 25px; display: block; margin-bottom: 40px; margin-left: 100px；">
+                    您水电费收入{{ price }}元
+                </span>
+                <div id="echarts-dom" 
+                style="width: 650px;
+                height: 300px; 
+                border: 2px rgba(0, 0, 255, .5) solid;
+                border-radius: 50px;
+                box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
+                padding: 30px;
+                ">
+                    <div class="set-word">设置水费</div>
+                    <div class="slider-demo-block">
+                        <el-slider v-model="waterFee" show-input @change="updateFees"/>
+                    </div>
+
+                    <div class="set-word">设置电费</div>
+                    <div class="slider-demo-block">
+                        <el-slider v-model="electricityFee" show-input @change="updateFees"/>
+                    </div>
+                </div>
+            </div>
 
             <!--  右侧-->
             <div style="margin-left: 5%">
@@ -100,11 +161,11 @@
     border: 2px #2e4057;
 }
 .left{
-display: flex;
-width: 100%
-;margin-top: 40px;
-align-items: center;
-justify-content: center;
+    display: flex;
+    width: 100%;
+    margin-top: 40px;
+    align-items: center;
+    justify-content: center;
 }
 .el-colDiv {
     margin: 20px auto;
@@ -198,5 +259,62 @@ justify-content: center;
     background-color: #008789;
 }
 
+.roommate-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
 
+.roommate-row {
+    display: flex;
+    justify-content: space-around;
+    margin: 10px 0;
+}
+
+.roommate-box {
+    width: 200px;
+    height: 150px;
+    border: 2px solid #4B70E2;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(75, 112, 226, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.roommate-box:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(75, 112, 226, 0.3);
+}
+
+.bed-label {
+    font-size: 24px;
+    font-weight: bold;
+    color: #4B70E2;
+    margin-bottom: 10px;
+}
+
+.mate-name {
+    font-size: 20px;
+    color: #333;
+}
+
+.slider-demo-block {
+  max-width: 600px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 50px
+}
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 40px;
+}
+.set-word {
+   font-size: 20px; 
+   font-weight: bold;
+   margin-bottom: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/SelfInfo.vue b/src/views/SelfInfo.vue
index 4eb4ae8..fa09895 100644
--- a/src/views/SelfInfo.vue
+++ b/src/views/SelfInfo.vue
@@ -4,16 +4,19 @@
             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
             <el-breadcrumb-item>个人信息</el-breadcrumb-item>
         </el-breadcrumb>
-        <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
-            <div style="display: flex">
-                <div style="width: 600px; margin-left: 30px; position: relative">
+        <el-card style="margin: 15px; min-height: calc(100vh - 111px);">
+            <div style="display: flex;">
+                <div style="width: 800px; margin-left: 50px; position: relative; border: 2px rgba(0, 0, 255, .4) solid; padding: 50px 80px;
+                box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
+                border-radius: 50px;
+                ">
                     <div>
                         <el-upload :on-success="uploadSuccess" :show-file-list="false"
                                    action="http://localhost:9090/files/upload/"
                                    class="upload-demo"
                         >
                             <div class="AvatarDiv">
-                                <el-avatar icon="UserFilled" style="width: 80px; height: 80px"></el-avatar>
+                                <el-avatar icon="UserFilled" style="width: 80px; height: 80px;"></el-avatar>
                                 <img :src="'data:image;base64,' + image" :style="imgDisplay"
                                      style="width: 80px; height: 80px; border-radius: 40px"/>
                                 <div class="editImg">
@@ -25,7 +28,14 @@
                             </div>
                         </el-upload>
                     </div>
-                    <el-descriptions :column="1" :size="large" border style="min-width: 500px" title="">
+                    <el-descriptions 
+                        :column="1" 
+                        :size="large" 
+                        border 
+                        style="min-width: 500px; margin-top: 30px;" 
+                        title=""
+                        :cell-style="{ padding: '20px', height: '60px' }"
+                    >
                         <el-descriptions-item>
                             <template #label>
                                 <div>
@@ -93,13 +103,17 @@
                             {{ email }}
                         </el-descriptions-item>
                     </el-descriptions>
-                    <el-tooltip content="修改信息" placement="bottom">
-                        <el-button icon="Edit" size="large" style="margin-top: 30px; width: 80px" type="primary"
-                                   @click="Edit">
-                        </el-button>
-                    </el-tooltip>
+                    <div style="display: flex; align-items: center; justify-content: center;">
+                        <el-tooltip content="修改信息" placement="bottom">
+                            <el-button icon="Edit" size="large" 
+                            style="margin-top: 30px; width: 200px; height: 45px; font-size: 18px; padding: 10px 20px;"
+                            type="primary"
+                            @click="Edit">
+                            </el-button>
+                        </el-tooltip>
+                    </div>  
                 </div>
-                <div class="img" style="margin-left: 130px ">
+                <div class="img" style="margin-left: 50px ">
                     <img alt="" src="../../public/self_Space.png"/>
                 </div>
             </div>
diff --git a/src/views/StudentHome.vue b/src/views/StudentHome.vue
index ec5fa14..0958eb4 100644
--- a/src/views/StudentHome.vue
+++ b/src/views/StudentHome.vue
@@ -65,7 +65,7 @@
                 margin-left: 10px;
                 ">宿舍学生人数分布
                 </span>
-        <home_echarts/>
+              <home_echarts/>
       </div>
 
 
@@ -87,18 +87,19 @@
   </el-card>
 </template>
 
-<script src="@/assets/js/Home.js">
+<script>
 import weather from "@/components/weather";
 import Calender from "@/components/Calendar";
 import request from "@/utils/request";
-import home_echarts from "@/components/home_echarts";
+import { ElMessage } from 'element-plus';
+// import home_echarts from "@/components/home_echarts";
 
 export default {
   name: "Home",
   components: {
     weather,
     Calender,
-    home_echarts,
+    // home_echarts,
   },
   data() {
     return {
diff --git a/src/views/callInfo.vue b/src/views/callInfo.vue
new file mode 100644
index 0000000..2af0b43
--- /dev/null
+++ b/src/views/callInfo.vue
@@ -0,0 +1,251 @@
+<template>
+    <div class="main-container">
+        <!-- 设置点名时间卡片 -->
+        <el-card class="time-card">
+            <div class="card-header">
+                <el-icon><Timer /></el-icon>
+                <span>设置点名时间</span>
+            </div>
+            <div class="time-picker">
+                <el-time-select
+                    v-model="selectedTime"
+                    start="18:00"
+                    step="00:15"
+                    end="23:00"
+                    placeholder="选择点名时间"
+                />
+                <el-button type="primary" @click="saveTime">保存设置</el-button>
+            </div>
+        </el-card>
+
+        <!-- 学生名单表格卡片 -->
+        <el-card class="table-card">
+            <div class="search-area">
+                <el-input
+                    v-model="searchText"
+                    placeholder="搜索姓名或宿舍号"
+                    prefix-icon="Search"
+                    clearable
+                    @input="handleSearch"
+                    style="width: 300px"
+                />
+                <el-switch
+                    v-model="showUnmarkedFirst"
+                    active-text="未点名优先显示"
+                    @change="handleSortChange"
+                />
+            </div>
+
+            <el-table
+                :data="filteredTableData"
+                style="width: 100%"
+                :header-cell-style="headerStyle"
+                stripe
+            >
+                <el-table-column prop="name" label="学生姓名" width="180" />
+                <el-table-column prop="dormitory" label="宿舍号" width="180" />
+                <el-table-column prop="isPresent" label="是否参加晚点">
+                    <template #default="scope">
+                        <el-tag :type="scope.row.isPresent ? 'success' : 'danger'">
+                            {{ scope.row.isPresent ? '已参加' : '未参加' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+    name: "callInfo",
+    data() {
+        return {
+            selectedTime: '',
+            searchText: '',
+            showUnmarkedFirst: false,
+            tableData: [
+            {
+                name: '张三',
+                dormitory: '101',
+                isPresent: true
+            },
+            {
+                name: '李四',
+                dormitory: '102',
+                isPresent: false
+            },
+            {
+                name: '王五',
+                dormitory: '103',
+                isPresent: true
+            },
+            {
+                name: '赵六',
+                dormitory: '104',
+                isPresent: false
+            },
+            {
+                name: '孙七',
+                dormitory: '105',
+                isPresent: true
+            }
+            ],
+            filteredTableData: [
+            {
+                name: '张三',
+                dormitory: '101',
+                isPresent: true
+            },
+            {
+                name: '李四',
+                dormitory: '102',
+                isPresent: false
+            },
+            {
+                name: '王五',
+                dormitory: '103',
+                isPresent: true
+            },
+            {
+                name: '赵六',
+                dormitory: '104',
+                isPresent: false
+            },
+            {
+                name: '孙七',
+                dormitory: '105',
+                isPresent: true
+            }
+            ]
+        };
+    },
+    created() {
+        this.getStudentList();
+    },
+    methods: {
+        // 保存点名时间
+        saveTime() {
+            if (!this.selectedTime) {
+                this.$message.warning('请选择点名时间');
+                return;
+            }
+            request.post('/api/setCallTime', {
+                callTime: this.selectedTime
+            }).then(res => {
+                this.$message.success('设置成功');
+            }).catch(err => {
+                this.$message.error('设置失败');
+            });
+        },
+        
+        // 获取学生列表
+        getStudentList() {
+            request.get('/api/studentList').then(res => {
+                this.tableData = res.data;
+                this.handleSearch();
+            }).catch(err => {
+                this.$message.error('获取数据失败');
+            });
+        },
+        
+        // 搜索功能
+        handleSearch() {
+            if (!this.searchText) {
+                this.filteredTableData = [...this.tableData];
+            } else {
+                this.filteredTableData = this.tableData.filter(item => {
+                    return item.name.includes(this.searchText) || 
+                           item.dormitory.includes(this.searchText);
+                });
+            }
+            if (this.showUnmarkedFirst) {
+                this.handleSortChange();
+            }
+        },
+        
+        // 未点名优先排序
+        handleSortChange() {
+            if (this.showUnmarkedFirst) {
+                this.filteredTableData.sort((a, b) => {
+                    return a.isPresent - b.isPresent;
+                });
+            }else {
+                this.filteredTableData = [...this.tableData];
+            }
+        },
+        
+        // 表头样式
+        headerStyle() {
+            return {
+                background: '#f0f6ff',
+                color: '#1e3a8a',
+                fontWeight: 'bold'
+            }
+        }
+    },
+};
+</script>
+
+<style scoped>
+.main-container {
+    padding: 20px;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+}
+
+.time-card {
+    margin-bottom: 20px;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    color: #1e3a8a;
+    margin-bottom: 20px;
+}
+
+.card-header .el-icon {
+    margin-right: 8px;
+    font-size: 20px;
+}
+
+.time-picker {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.table-card {
+    background-color: #fff;
+}
+
+.search-area {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+:deep(.el-card) {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+
+:deep(.el-button--primary) {
+    background-color: #1e3a8a;
+    border-color: #1e3a8a;
+}
+
+:deep(.el-button--primary:hover) {
+    background-color: #2563eb;
+    border-color: #2563eb;
+}
+
+:deep(.el-tag) {
+    border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/callStu.vue b/src/views/callStu.vue
new file mode 100644
index 0000000..f708c1c
--- /dev/null
+++ b/src/views/callStu.vue
@@ -0,0 +1,235 @@
+<template>
+    <div class="main-container">
+        <el-card class="countdown-card">
+            <!-- 标题区域 -->
+            <div class="title">
+                <el-icon><AlarmClock /></el-icon>
+                <span>距离晚点结束还有</span>
+            </div>
+
+            <!-- 倒计时区域 -->
+            <div class="countdown-container">
+                <div class="countdown-box">
+                    <div class="number">{{ hours }}</div>
+                    <div class="label">小时</div>
+                </div>
+                <div class="separator">:</div>
+                <div class="countdown-box">
+                    <div class="number">{{ minutes }}</div>
+                    <div class="label">分钟</div>
+                </div>
+                <div class="separator">:</div>
+                <div class="countdown-box">
+                    <div class="number">{{ seconds }}</div>
+                    <div class="label">秒</div>
+                </div>
+            </div>
+
+            <!-- 点名按钮 -->
+            <div class="action-area">
+                <el-button 
+                    type="primary" 
+                    :loading="loading"
+                    size="large"
+                    :disabled="!canCall"
+                    @click="handleCall"
+                >
+                    {{ buttonText }}
+                </el-button>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+    name: "callStu",
+    data() {
+        return {
+            targetTime: new Date(new Date().getTime() + 5000),    // 目标点名时间
+            hours: '00',
+            minutes: '00',
+            seconds: '00',
+            timer: null,
+            loading: false,
+            canCall: false,      // 是否可以点名
+            buttonText: '开始点名'
+        };
+    },
+    created() {
+        this.getCallTime();
+        // this.startCountdown();
+    },
+    beforeUnmount() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    },
+    methods: {
+        // 获取点名时间
+        getCallTime() {
+            request.get('/api/getCallTime').then(res => {
+                this.targetTime = new Date(res.data.callTime);
+                this.startCountdown();
+            }).catch(err => {
+                this.$message.error('获取点名时间失败');
+            });
+        },
+
+        // 开始倒计时
+        startCountdown() {
+            this.timer = setInterval(() => {
+                const now = new Date().getTime();
+                const target = this.targetTime.getTime();
+                const distance = target - now;
+
+                if (distance <= 0) {
+                    // 时间已到，禁用点名
+                    this.canCall = false;
+                    this.hours = '00';
+                    this.minutes = '00';
+                    this.seconds = '00';
+                    clearInterval(this.timer);
+                    return;
+                }
+
+                // 时间没到，允许点名
+                this.canCall = true;
+                
+                // 计算时分秒
+                const hours = Math.floor(distance / (1000 * 60 * 60));
+                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+                // 补零
+                this.hours = hours.toString().padStart(2, '0');
+                this.minutes = minutes.toString().padStart(2, '0');
+                this.seconds = seconds.toString().padStart(2, '0');
+            }, 1000);
+        },
+
+        // 处理点名
+        handleCall() {
+            this.loading = true;
+            this.buttonText = '点名中...';
+
+            request.post('/api/callStudent').then(res => {
+                this.$message.success('点名成功！');
+                this.buttonText = '已完成点名';
+                this.canCall = false;
+            }).catch(err => {
+                this.$message.error('点名失败，请重试');
+                this.buttonText = '重试点名';
+            }).finally(() => {
+                this.loading = false;
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+.main-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f0f6ff;
+    padding: 20px;
+}
+
+.countdown-card {
+    width: 600px;
+    padding: 30px;
+    text-align: center;
+    background: linear-gradient(145deg, #ffffff, #f8faff);
+    border: none;
+}
+
+.title {
+    font-size: 24px;
+    color: #1e3a8a;
+    margin-bottom: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.countdown-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 50px;
+}
+
+.countdown-box {
+    background: #ffffff;
+    padding: 20px 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    animation: pulse 1s infinite;
+}
+
+.number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #1e3a8a;
+    min-width: 80px;
+}
+
+.label {
+    font-size: 14px;
+    color: #64748b;
+    margin-top: 5px;
+}
+
+.separator {
+    font-size: 48px;
+    font-weight: bold;
+    color: #1e3a8a;
+}
+
+.action-area {
+    margin-top: 40px;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.02);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+:deep(.el-button--primary) {
+    background-color: #1e3a8a;
+    border-color: #1e3a8a;
+    padding: 20px 50px;
+    font-size: 18px;
+    transition: all 0.3s ease;
+}
+
+:deep(.el-button--primary:hover:not(:disabled)) {
+    background-color: #2563eb;
+    border-color: #2563eb;
+    transform: translateY(-2px);
+}
+
+:deep(.el-button--primary:disabled) {
+    background-color: #94a3b8;
+    border-color: #94a3b8;
+}
+
+:deep(.el-card) {
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/chargeFee.vue b/src/views/chargeFee.vue
new file mode 100644
index 0000000..cf14612
--- /dev/null
+++ b/src/views/chargeFee.vue
@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <div class="head-word">这个月的水费是-------</div>
+        <div class="mid-word">{{ waterFee }}元！！</div>
+
+        <div class="last-word">这个月的电费是-------</div>
+        <div class="mid-word">{{ electricityFee }}元！！</div>
+
+        <div class="last-word">请立即缴费~~~</div>
+        <img src="../assets/charge.png" alt="">
+    </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+    name: "feeInfo",
+    data() {
+        return {
+            waterFee: 5000,
+            electricityFee: 10000,
+        };
+    },
+    created() {
+    //    this.getPrice();
+    },
+    methods: {
+        getPrice() {
+            request.get("").then((res) => {
+                if (res.code === "0") {
+                    this.waterFee = res.data.waterFee;
+                    this.electricityFee = res.data.electricityFee;
+                } else {
+                    ElMessage({
+                        message: res.msg,
+                        type: "error",
+                    });
+                }
+            });
+        }
+    },
+};
+</script>
+<style scoped>
+.head-word {
+    font-size: 35px;
+    font-weight: bold;
+    margin-top: 40px;
+    margin-left: 150px;
+}
+.mid-word {
+    font-size: 33px;
+    /* font-weight: bold; */
+    margin-top: 40px;
+    margin-left: 600px;
+}
+.last-word {
+    font-size: 35px;
+    font-weight: bold;
+    margin-top: 40px;
+    margin-left: 150px;
+}
+img {
+    width: 350px;
+    margin-left: 550px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/feeInfo.vue b/src/views/feeInfo.vue
new file mode 100644
index 0000000..e544e61
--- /dev/null
+++ b/src/views/feeInfo.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        发布水电费
+    </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+    name: "feeInfo",
+    data() {
+        return {
+            
+        };
+    },
+    created() {
+    //    this.getPrice();
+    },
+    methods: {
+        
+    },
+};
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index ea30b8c..c9a8994 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,7 +7,7 @@ module.exports = {
         // port: 9876,
         proxy: {                 //设置代理，必须填
             '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
-                target: 'http://localhost:8083',     //代理的目标地址
+                target: 'http://10.133.65.6:8083',     //代理的目标地址
                 changeOrigin: true,              //是否设置同源，输入是的
                 pathRewrite: {                   //路径重写
                     '^/api': ''                     //选择忽略拦截器里面的内容