diff --git a/dist.zip b/dist.zip
new file mode 100644
index 0000000..5fbe2ec
Binary files /dev/null and b/dist.zip differ
diff --git a/src/components/Admin/LoginAdmin.vue b/src/components/Admin/LoginAdmin.vue
index 093ccbd..53810be 100644
--- a/src/components/Admin/LoginAdmin.vue
+++ b/src/components/Admin/LoginAdmin.vue
@@ -1,90 +1,196 @@
 <template>
   <div class="login_container">
-    <div class="login_title">系统管理员登录界面</div>
     <div class="login_box">
-      <!-- 头像区域 -->
-      <div class="avatar_box">
-        <img
-          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
-          alt=""
-        />
+      <div class="login_header">
+        <h1>基于Ollama大模型的图书推荐系统</h1>
       </div>
-      <!-- 登录表单区域 -->
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginFormRules"
-        label-width="0px"
-        class="login_form"
-      >
-        <!-- 用户名 -->
-        <el-form-item prop="username">
-          <el-input
-            v-model.trim="loginForm.username"
-            prefix-icon="iconfont icon-gerenxinxi"
-          ></el-input>
-        </el-form-item>
-        <!-- 密码 -->
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            prefix-icon="iconfont icon-tianchongxing-"
-            type="password"
-            @keyup.enter.native="login"
-            :show-password="true"
-          ></el-input>
-        </el-form-item>
-        <!-- 按钮区域 -->
-        <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading"
-            >登录</el-button
+
+      <div class="login_content">
+        <div class="form_container">
+          <h2>系统管理员登录</h2>
+          <el-form
+            ref="loginFormRef"
+            :model="loginForm"
+            :rules="loginFormRules"
+            label-width="0"
           >
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
-        </el-form-item>
-      </el-form>
+            <el-form-item prop="username">
+              <el-input
+                v-model.trim="loginForm.username"
+                prefix-icon="el-icon-user"
+                placeholder="请输入管理员账号"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                prefix-icon="el-icon-lock"
+                type="password"
+                placeholder="请输入密码"
+                @keyup.enter.native="login"
+                :show-password="true"
+              ></el-input>
+            </el-form-item>
+            <el-form-item class="btns">
+              <el-button
+                type="primary"
+                @click="login"
+                :loading="loginLoading"
+                class="login-btn"
+              >
+                登录
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="info_container">
+          <h3>管理员须知</h3>
+          <div class="notice">
+            <p>欢迎使用系统管理平台</p>
+            <p>请妥善保管您的管理员账号</p>
+            <p>如有问题请联系技术支持</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="login_footer">
+        <p>
+          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
+        </p>
+        <div class="switch-buttons">
+          <el-tooltip content="用户登录" placement="top">
+            <i class="el-icon-user" @click="goUser"></i>
+          </el-tooltip>
+        </div>
+      </div>
     </div>
-    <vue-particles
-      class="login-bg"
-      color="#39AFFD"
-      :particleOpacity="0.7"
-      :particlesNumber="100"
-      shapeType="circle"
-      :particleSize="4"
-      linesColor="#8DD1FE"
-      :linesWidth="1"
-      :lineLinked="true"
-      :lineOpacity="0.4"
-      :linesDistance="150"
-      :moveSpeed="3"
-      :hoverEffect="true"
-      hoverMode="grab"
-      :clickEffect="true"
-      clickMode="push"
-    >
-    </vue-particles>
-    <div class="footer">
-      <span style="font-weight: bold; color: white; margin-bottom: 10px">
-        登录页面切换
-      </span>
-      <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
-    </div>
-    <div class="footer2"></div>
   </div>
 </template>
 
+<style lang="less" scoped>
+.login_container {
+  height: 100vh;
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login_box {
+  width: 1000px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  .login_header {
+    background: #1e62c0;
+    padding: 20px;
+    text-align: center;
+
+    h1 {
+      color: #fff;
+      font-size: 24px;
+      margin: 0;
+    }
+  }
+
+  .login_content {
+    display: flex;
+    padding: 40px;
+
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #e8e8e8;
+
+      h2 {
+        color: #333;
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #333;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 1.8;
+
+        p {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f7f9fc;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #e8e8e8;
+    position: relative;
+
+    p {
+      color: #666;
+      margin: 0;
+    }
+
+    .switch-buttons {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      i {
+        font-size: 20px;
+        color: #999;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin-left: 15px;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
+</style>
+
 <script>
 export default {
+  name: "LoginAdmin",
   data() {
     return {
-      //登录表单
       loginForm: {
         username: "root",
         password: "123456",
       },
-      //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
+          { required: true, message: "请输入用户名", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -93,7 +199,7 @@ export default {
           },
         ],
         password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -109,31 +215,30 @@ export default {
     resetLoginForm() {
       this.$refs.loginFormRef.resetFields();
     },
-    login() {
+    async login() {
       this.$refs.loginFormRef.validate(async (valid) => {
-        // console.log(valid);
-        //如果表单验证无效，直接返回
-        if (!valid) {
-          return;
-        }
-        this.loginLoading = true;
-        const username = this.loginForm.username;
-        const password = this.loginForm.password;
-        //向数据库发送axios请求，如果登录成功，就跳转
-        const { data: res } = await this.$http.post("admin/login", {
-          username,
-          password,
-        });
-        if (res.status !== 200) {
+        if (!valid) return;
+
+        try {
+          this.loginLoading = true;
+          const { data: res } = await this.$http.post("admin/login", {
+            username: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+
+          if (res.status !== 200) {
+            throw new Error(res.msg);
+          }
+
+          this.$message.success("登录成功");
+          window.sessionStorage.setItem("token", res.map.token);
+          window.sessionStorage.setItem("adminId", res.map.id);
+          this.$router.push("/homeadmin");
+        } catch (error) {
+          this.$message.error(error.message || "登录失败");
+        } finally {
           this.loginLoading = false;
-          return this.$message.error(res.msg);
         }
-        this.$message.success("登录成功");
-        this.loginLoading = false;
-        // console.log(res);
-        window.sessionStorage.setItem("token", res.map.token);
-        window.sessionStorage.setItem("adminId", res.map.id);
-        this.$router.push("/homeadmin");
       });
     },
     goUser() {
@@ -144,93 +249,155 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer2 {
-  position: absolute;
-  bottom: 0px;
-  left: 35%;
-  color: #ccc;
-
-  a {
-    color: #ccc;
-  }
-}
-
 .login_container {
-  // background-color: #2b4b6b;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
-    no-repeat 0px 0px;
+  height: 100vh;
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
   background-size: cover;
-  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .login_box {
-  height: 300px;
-  width: 450px;
-  background-color: #fff;
-  border-radius: 3px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: 1000px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
 
-  .avatar_box {
-    width: 130px;
-    height: 130px;
-    border: 1px solid #eee;
-    border-radius: 50%;
-    padding: 10px;
-    box-shadow: 0 0 10px #ddd;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
+  .login_header {
+    background: #1a237e;
+    padding: 25px;
+    text-align: center;
 
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-color: #eee;
+    h1 {
+      color: #fff;
+      font-size: 28px;
+      margin: 0;
+      margin-bottom: 8px;
+    }
+
+    p {
+      color: rgba(255, 255, 255, 0.8);
+      margin: 0;
+      font-size: 16px;
+    }
+  }
+
+  .login_content {
+    display: flex;
+    padding: 40px;
+
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #eee;
+
+      .admin_icon {
+        text-align: center;
+        margin-bottom: 20px;
+
+        i {
+          font-size: 50px;
+          color: #1a237e;
+          background: #e8eaf6;
+          padding: 20px;
+          border-radius: 50%;
+        }
+      }
+
+      h2 {
+        color: #1a237e;
+        margin-bottom: 30px;
+        font-weight: 500;
+        text-align: center;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+        background: #1a237e;
+        border-color: #1a237e;
+
+        &:hover {
+          background: #283593;
+          border-color: #283593;
+        }
+      }
+
+      .reset-btn {
+        width: 100%;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #1a237e;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 2;
+
+        p {
+          margin-bottom: 15px;
+          padding-left: 20px;
+          position: relative;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 10px;
+            width: 6px;
+            height: 6px;
+            background: #1a237e;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f5f5f5;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #eee;
+    position: relative;
+
+    p {
+      color: #666;
+      margin: 0;
+    }
+
+    i {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: #666;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #1a237e;
+      }
     }
   }
 }
-
-.login_form {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.btns {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.login_title {
-  position: relative;
-  top: 5%;
-  font-size: 36px;
-  color: white;
-  text-align: center;
-  font-weight: 700;
-  //控制字体间距
-  letter-spacing: 10px;
-}
-
-.footer {
-  display: flex;
-  position: absolute;
-  flex-direction: column;
-  bottom: 0;
-  right: 0;
-  width: 100px;
-  height: 120px;
-  // background-color: pink;
-  span {
-    // width: 100%;
-    // background-color: red;
-    text-align: center;
-  }
-}
 </style>
diff --git a/src/components/BookManage/LoginBookManage.vue b/src/components/BookManage/LoginBookManage.vue
index 5f885c2..d8e9c45 100644
--- a/src/components/BookManage/LoginBookManage.vue
+++ b/src/components/BookManage/LoginBookManage.vue
@@ -1,91 +1,88 @@
 <template>
   <div class="login_container">
-    <div class="login_title">图书管理员登录界面</div>
     <div class="login_box">
-      <!-- 头像区域 -->
-      <div class="avatar_box">
-        <img
-          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
-          alt=""
-        />
+      <div class="login_header">
+        <h1>基于Ollama大模型的图书推荐系统</h1>
+      </div>
+
+      <div class="login_content">
+        <div class="form_container">
+          <h2>图书管理员登录</h2>
+          <el-form
+            ref="loginFormRef"
+            :model="loginForm"
+            :rules="loginFormRules"
+            label-width="0"
+          >
+            <el-form-item prop="username">
+              <el-input
+                v-model.trim="loginForm.username"
+                prefix-icon="el-icon-user"
+                placeholder="请输入管理员账号"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                prefix-icon="el-icon-lock"
+                type="password"
+                placeholder="请输入密码"
+                @keyup.enter.native="login"
+                :show-password="true"
+              ></el-input>
+            </el-form-item>
+            <el-form-item class="btns">
+              <el-button
+                type="primary"
+                @click="login"
+                :loading="loginLoading"
+                class="login-btn"
+              >
+                登录
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="info_container">
+          <h3>管理员须知</h3>
+          <div class="notice">
+            <p>欢迎使用图书管理系统</p>
+            <p>请妥善保管您的管理员账号</p>
+            <p>如有问题请联系系统管理员</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="login_footer">
+        <p>
+          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
+        </p>
+        <div class="switch-buttons">
+          <el-tooltip content="用户登录" placement="top">
+            <i class="el-icon-user" @click="goUser"></i>
+          </el-tooltip>
+          <el-tooltip content="超级管理员" placement="top">
+            <i class="el-icon-s-tools" @click="goAdmin"></i>
+          </el-tooltip>
+        </div>
       </div>
-      <!-- 登录表单区域 -->
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginFormRules"
-        label-width="0px"
-        class="login_form"
-      >
-        <!-- 用户名 -->
-        <el-form-item prop="username">
-          <el-input
-            v-model.trim="loginForm.username"
-            prefix-icon="iconfont icon-gerenxinxi"
-          ></el-input>
-        </el-form-item>
-        <!-- 密码 -->
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            prefix-icon="iconfont icon-tianchongxing-"
-            type="password"
-            @keyup.enter.native="login"
-            :show-password="true"
-          ></el-input>
-        </el-form-item>
-        <!-- 按钮区域 -->
-        <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading"
-            >登录
-          </el-button>
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
-        </el-form-item>
-      </el-form>
     </div>
-    <vue-particles
-      class="login-bg"
-      color="#39AFFD"
-      :particleOpacity="0.7"
-      :particlesNumber="100"
-      shapeType="circle"
-      :particleSize="4"
-      linesColor="#8DD1FE"
-      :linesWidth="1"
-      :lineLinked="true"
-      :lineOpacity="0.4"
-      :linesDistance="150"
-      :moveSpeed="3"
-      :hoverEffect="true"
-      hoverMode="grab"
-      :clickEffect="true"
-      clickMode="push"
-    >
-    </vue-particles>
-    <div class="footer">
-      <span style="font-weight: bold; color: white"> 登录页面切换 </span>
-      <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
-      <span>
-        <i class="iconfont icon-guanliyuanrenzheng" @click="goAdmin"></i>
-      </span>
-    </div>
-    <div class="footer2"></div>
   </div>
 </template>
 
 <script>
 export default {
+  name: "LoginBookManage",
   data() {
     return {
-      //登录表单
       loginForm: {
         username: "admin",
         password: "123456",
       },
-      //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
+          { required: true, message: "请输入用户名", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -94,7 +91,7 @@ export default {
           },
         ],
         password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -110,34 +107,30 @@ export default {
     resetLoginForm() {
       this.$refs.loginFormRef.resetFields();
     },
-    login() {
+    async login() {
       this.$refs.loginFormRef.validate(async (valid) => {
-        // console.log(valid);
-        //如果表单验证无效，直接返回
-        if (!valid) {
-          return;
-        }
-        this.loginLoading = true;
-        // 进行md5加密
-        const username = this.loginForm.username;
-        const password = this.loginForm.password;
-        //向数据库发送axios请求，如果登录成功，就跳转
-        const { data: res } = await this.$http.post("bookadmin/login", {
-          username,
-          password,
-        });
-        // console.log(res);
-        if (res.status !== 200) {
+        if (!valid) return;
+
+        try {
+          this.loginLoading = true;
+          const { data: res } = await this.$http.post("bookadmin/login", {
+            username: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+
+          if (res.status !== 200) {
+            throw new Error(res.msg);
+          }
+
+          this.$message.success("登录成功");
+          window.sessionStorage.setItem("token", res.map.token);
+          window.sessionStorage.setItem("bookAdminId", res.map.id);
+          this.$router.push("/homemange");
+        } catch (error) {
+          this.$message.error(error.message || "登录失败");
+        } finally {
           this.loginLoading = false;
-          return this.$message.error(res.msg);
         }
-        this.$message.success("登录成功");
-        this.loginLoading = false;
-        window.sessionStorage.setItem("token", res.map.token);
-        window.sessionStorage.setItem("bookAdminId", res.map.id);
-        this.$router.push("/homemange");
-        // window.sessionStorage.setItem("token", token);
-        // this.$router.push("/home"); //跳转到home页面下
       });
     },
     goUser() {
@@ -151,93 +144,116 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer2 {
-  position: absolute;
-  bottom: 0px;
-  left: 35%;
-  color: #ccc;
-
-  a {
-    color: #ccc;
-  }
-}
-
 .login_container {
-  // background-color: #2b4b6b;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
-    no-repeat 0px 0px;
+  height: 100vh;
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
   background-size: cover;
-  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .login_box {
-  height: 300px;
-  width: 450px;
-  background-color: #fff;
-  border-radius: 3px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: 1000px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 
-  .avatar_box {
-    width: 130px;
-    height: 130px;
-    border: 1px solid #eee;
-    border-radius: 50%;
-    padding: 10px;
-    box-shadow: 0 0 10px #ddd;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
+  .login_header {
+    background: #1e62c0;
+    padding: 20px;
+    text-align: center;
 
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-color: #eee;
+    h1 {
+      color: #fff;
+      font-size: 24px;
+      margin: 0;
+    }
+  }
+
+  .login_content {
+    display: flex;
+    padding: 40px;
+
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #e8e8e8;
+
+      h2 {
+        color: #333;
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+      }
+
+      .reset-btn {
+        width: 100%;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #333;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 1.8;
+
+        p {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f7f9fc;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #e8e8e8;
+    position: relative;
+
+    p {
+      color: #666;
+      margin: 0;
+    }
+
+    .switch-buttons {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      i {
+        font-size: 20px;
+        color: #999;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin-left: 15px;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
     }
   }
 }
-
-.login_form {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.btns {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.login_title {
-  position: relative;
-  top: 5%;
-  font-size: 36px;
-  color: white;
-  text-align: center;
-  font-weight: 700;
-  //控制字体间距
-  letter-spacing: 10px;
-}
-
-.footer {
-  display: flex;
-  position: absolute;
-  flex-direction: column;
-  bottom: 0;
-  right: 0;
-  width: 100px;
-  height: 120px;
-  // background-color: pink;
-  span {
-    // width: 100%;
-    // background-color: red;
-    text-align: center;
-  }
-}
 </style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index ba31e60..da920bd 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,94 +1,88 @@
 <template>
   <div class="login_container">
-    <div class="login_title">登录</div>
     <div class="login_box">
-      <!-- 头像区域 -->
-      <div class="avatar_box">
-        <img
-          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
-          alt=""
-        />
+      <div class="login_header">
+        <h1>基于Ollama大模型的图书推荐系统</h1>
       </div>
-      <!-- 登录表单区域 -->
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginFormRules"
-        label-width="0px"
-        class="login_form"
-      >
-        <!-- 用户名 -->
-        <el-form-item prop="username">
-          <el-input
-            v-model.trim="loginForm.username"
-            prefix-icon="iconfont icon-gerenxinxi"
-          ></el-input>
-        </el-form-item>
-        <!-- 密码 -->
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            prefix-icon="iconfont icon-tianchongxing-"
-            type="password"
-            @keyup.enter.native="login"
-            :show-password="true"
-          ></el-input>
-        </el-form-item>
-        <!-- 按钮区域 -->
-        <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading"
-            >登录</el-button
+
+      <div class="login_content">
+        <div class="form_container">
+          <h2>用户登录</h2>
+          <el-form
+            ref="loginFormRef"
+            :model="loginForm"
+            :rules="loginFormRules"
+            label-width="0"
           >
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!--    粒子插件特效-->
-    <vue-particles
-      class="login-bg"
-      color="#39AFFD"
-      :particleOpacity="0.7"
-      :particlesNumber="100"
-      shapeType="circle"
-      :particleSize="4"
-      linesColor="#8DD1FE"
-      :linesWidth="1"
-      :lineLinked="true"
-      :lineOpacity="0.4"
-      :linesDistance="150"
-      :moveSpeed="3"
-      :hoverEffect="true"
-      hoverMode="grab"
-      :clickEffect="true"
-      clickMode="push"
-    >
-    </vue-particles>
-    <div class="footer">
-      <span style="font-weight: bold; color: white; margin-bottom: 10px">
-        登录页面切换
-        <!-- <i class="iconfont icon-haoyou " @click="goUser"></i> -->
-      </span>
-      <span>
-        <i class="iconfont icon-guanliyuan" @click="goManage"></i>
-      </span>
+            <el-form-item prop="username">
+              <el-input
+                v-model.trim="loginForm.username"
+                prefix-icon="el-icon-user"
+                placeholder="请输入用户名"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                prefix-icon="el-icon-lock"
+                type="password"
+                placeholder="请输入密码"
+                @keyup.enter.native="login"
+                :show-password="true"
+              ></el-input>
+            </el-form-item>
+            <el-form-item class="btns">
+              <el-button
+                type="primary"
+                @click="login"
+                :loading="loginLoading"
+                class="login-btn"
+              >
+                登录
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="info_container">
+          <h3>系统公告</h3>
+          <div class="notice">
+            <p>欢迎使用基于Ollama大模型的图书推荐系统</p>
+            <p>本系统提供个性化图书推荐服务</p>
+            <p>如有问题请联系管理员</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="login_footer">
+        <p>
+          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
+        </p>
+        <el-tooltip content="管理员入口" placement="top">
+          <i class="el-icon-s-tools" @click="goManage"></i>
+        </el-tooltip>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import VueParticles from "vue-particles";
+import Vue from "vue";
+
+Vue.use(VueParticles);
+
 export default {
+  name: "Login",
   data() {
     return {
-      //登录表单
       loginForm: {
         username: "yangzhen",
         password: "123456",
       },
-
-      //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
+          { required: true, message: "请输入用户名", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -97,7 +91,7 @@ export default {
           },
         ],
         password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -113,38 +107,32 @@ export default {
     resetLoginForm() {
       this.$refs.loginFormRef.resetFields();
     },
-    login() {
+    async login() {
       this.$refs.loginFormRef.validate(async (valid) => {
-        console.log(valid);
-        //如果表单验证无效，直接返回
-        if (!valid) {
-          return;
-        }
-        this.loginLoading = true;
-        // 进行md5加密
-        const salt = "xiaobaitiao";
-        const username = this.loginForm.username;
-        const password = this.loginForm.password;
-        //向数据库发送axios请求，如果登录成功，就跳转
-        const { data: res } = await this.$http.post("user/login", {
-          username,
-          password,
-        });
-        if (res.status !== 200) {
+        if (!valid) return;
+
+        try {
+          this.loginLoading = true;
+          const { data: res } = await this.$http.post("user/login", {
+            username: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+
+          if (res.status !== 200) {
+            throw new Error(res.msg);
+          }
+
+          this.$message.success("登录成功");
+          window.sessionStorage.setItem("token", res.map.token);
+          window.sessionStorage.setItem("userId", res.map.id);
+          this.$router.push("/home");
+        } catch (error) {
+          this.$message.error(error.message || "登录失败");
+        } finally {
           this.loginLoading = false;
-          return this.$message.error(res.msg);
         }
-        // console.log(res);
-        this.$message.success("登录成功");
-        this.loginLoading = false;
-        window.sessionStorage.setItem("token", res.map.token);
-        window.sessionStorage.setItem("userId", res.map.id);
-        this.$router.push("/home"); //跳转到home页面下
       });
     },
-    goUser() {
-      this.$router.push("/login");
-    },
     goManage() {
       this.$router.push("/loginmanage");
     },
@@ -153,94 +141,117 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer2 {
-  position: absolute;
-  bottom: 0px;
-  left: 35%;
-  color: #ccc;
-
-  a {
-    color: #ccc;
-  }
-}
-
 .login_container {
-  // background-color: #2b4b6b;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
-    no-repeat 0px 0px;
+  height: 100vh;
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
   background-size: cover;
-  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .login_box {
-  height: 300px;
-  width: 450px;
-  background-color: #fff;
-  border-radius: 3px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: 1000px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 
-  .avatar_box {
-    width: 130px;
-    height: 130px;
-    border: 1px solid #eee;
-    border-radius: 50%;
-    padding: 10px;
-    box-shadow: 0 0 10px #ddd;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
+  .login_header {
+    background: #1e62c0;
+    padding: 20px;
+    text-align: center;
 
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-color: #eee;
+    .logo {
+      height: 60px;
+      margin-bottom: 10px;
+    }
+
+    h1 {
+      color: #fff;
+      font-size: 24px;
+      margin: 0;
+    }
+  }
+
+  .login_content {
+    display: flex;
+    padding: 40px;
+
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #e8e8e8;
+
+      h2 {
+        color: #333;
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+      }
+
+      .reset-btn {
+        width: 100%;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #333;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 1.8;
+
+        p {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f7f9fc;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #e8e8e8;
+    position: relative;
+
+    p {
+      color: #666;
+      margin: 0;
+    }
+
+    .el-icon-s-tools {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: #999;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #409eff;
+      }
     }
   }
 }
-
-.login_form {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.btns {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.login_title {
-  position: relative;
-  top: 5%;
-  font-size: 36px;
-  color: white;
-  text-align: center;
-  font-weight: 700;
-  //控制字体间距
-  letter-spacing: 10px;
-}
-
-.footer {
-  display: flex;
-  position: absolute;
-  flex-direction: column;
-  bottom: 0;
-  right: 0;
-  width: 100px;
-  height: 120px;
-
-  // background-color: pink;
-  span {
-    // width: 100%;
-    // background-color: red;
-    text-align: center;
-  }
-}
 </style>
diff --git a/src/main-dev.js b/src/main-dev.js
index 2ab8710..ad914aa 100644
--- a/src/main-dev.js
+++ b/src/main-dev.js
@@ -40,7 +40,7 @@ Vue.use(vueBaberrage)
 //导入axios
 import axios from 'axios'
 //配置请求的根路径
-axios.defaults.baseURL = 'http://localhost:8889/api/'
+axios.defaults.baseURL = 'https://book-api.shuguangwl.com:443/api/'
 Vue.prototype.$http = axios
 // const CancelToken = axios.CancelToken;
 // const source = CancelToken.source();
diff --git a/src/main-prod.js b/src/main-prod.js
index 642f4e8..6a14b6b 100644
--- a/src/main-prod.js
+++ b/src/main-prod.js
@@ -36,7 +36,7 @@ Vue.use(vueBaberrage)
 //导入axios
 import axios from 'axios'
 //配置请求的根路径
-axios.defaults.baseURL = 'http://abc.xiaobaitiao.top:443/api/'
+axios.defaults.baseURL = 'https://book-api.shuguangwl.com:443/api/'
 Vue.prototype.$http = axios
 // const CancelToken = axios.CancelToken;
 // const source = CancelToken.source();