前端界面修改新版

src/components/HomePage.vue

@@ -47,16 +47,13 @@
             @click="selectedButton = 'AI艺术课'"
             >AI艺术课</el-button
           >
-        </div>
-        <!-- 退出登录 -->
-        <div class="logout-box">
-          <el-button round class="logout-box-btn" @click="LogoutClick()">
-            <img
-              :src="logoutIcon"
-              alt="Logout"
-            />
-            退出登录
-          </el-button>
+          <!-- 退出登录 -->
+             <!-- <div class="logout-box"> -->
+            <el-button round class="logout-box-btn" @click="LogoutClick()">
+              <img :src="logoutIcon" alt="Logout" />
+              退出登录
+            </el-button>
+          <!-- </div> -->
         </div>
       </div>
     </div>
@@ -100,30 +97,29 @@ import { ClassList } from '@/api/class.js'
 import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
 
+
 // 导入图片
 import intelligenceImg from '@/assets/images/intelligence.png'
 import roomImg from '@/assets/images/room.png'
 import testImg from '@/assets/images/test.png'
 import studyImg from '@/assets/images/study.png'
 
-
 // 退出图标
 import logoutIcon from '@/assets/icon/logout.png'
 // 获取当前路由对象
 const router = useRouter()
 // 退出
 const LogoutClick = () => {
-   // 清空 token 和登录状态
-  localStorage.removeItem('token'); 
-  localStorage.removeItem('isLoggedIn'); 
-  localStorage.removeItem('maxCourseSections'); 
+  // 清空 token 和登录状态
+  localStorage.removeItem('token')
+  localStorage.removeItem('isLoggedIn')
+  localStorage.removeItem('maxCourseSections')
   router.push({ path: '/login' })
 }
 
 // 默认选中 AI 通识课
 const selectedButton = ref('AI通识课')
 
-
 // 添加图片路径
 const indexImages = ref([intelligenceImg, roomImg, testImg, studyImg])
 // AI初体验
@@ -179,11 +175,11 @@ onMounted(() => {
   @return math.div($px, 750) * 100vw;
 }
 .logout-box {
+  width: rpx(100);
   position: fixed;
-  margin-left: rpx(370);
 }
-.logout-box-btn{
-   width: rpx(65); // 使用 rpx 函数设置按钮宽度
+.logout-box-btn {
+  width: rpx(65); // 使用 rpx 函数设置按钮宽度
   height: rpx(15); // 使用 rpx 函数设置按钮高度
   margin: rpx(10) rpx(10) 0 0; // 使用 rpx 函数设置外边距
   background-color: transparent;
@@ -314,7 +310,6 @@ onMounted(() => {
 }
 .top-right-box {
   position: absolute; // 添加绝对定位
-  margin-right: rpx(35);
   width: 100%; // 设置盒子宽度，可按需调整
   height: 60px; // 设置盒子高度，可按需调整
   display: flex;
@@ -322,9 +317,9 @@ onMounted(() => {
   cursor: pointer; // 添加鼠标指针样式
 }
 .top-right-btn {
-  width: rpx(65); // 使用 rpx 函数设置按钮宽度
+  width: rpx(50); // 使用 rpx 函数设置按钮宽度
   height: rpx(15); // 使用 rpx 函数设置按钮高度
-  margin: rpx(10) rpx(10) 0 0; // 使用 rpx 函数设置外边距
+  margin: rpx(10) rpx(5) 0 0; // 使用 rpx 函数设置外边距
   background-color: transparent;
   color: white;
   border: none; // 移除默认边框

src/views/AIGeneralCourse.vue

@@ -2,14 +2,21 @@
   <!-- AI智能课 -->
   <div class="home-container">
     <!-- 展开收起侧边栏 -->
-    <div class="icon-expand">
-      <el-icon
-        @click="toggleDrawer"
-        :style="{ color: drawerVisible ? 'white' : '#B6B0D8' }"
+    <div
+      class="icon-expand"
+      :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0'
+      }"
+      @click="toggleDrawer"
+    >
+      <span
+        class="vertical-lines"
+        :style="{
+          color: drawerVisible ? '#8a78d0' : 'white'
+        }"
+        >||</span
       >
-        <component :is="drawerVisible ? Fold : Expand" />
-        <!-- <Tickets /> -->
-      </el-icon>
     </div>
 
     <transition name="drawer-slide">
@@ -18,10 +25,10 @@
         <div class="drawer-box">
           <el-row class="tac">
             <el-col :span="12">
-              <h3 class="mb-2">
-                <el-icon><Reading /></el-icon>
+              <span class="mb-2">
+                <img :src="teachingImg" alt="教学" />
                 教学大纲
-              </h3>
+              </span>
               <el-menu
                 default-active="1"
                 :class="{ 'el-menu-vertical-demo': true }"
@@ -99,13 +106,12 @@
             }"
           ></div>
           <div class="additional-text">
-<!--            0{{ index + 1 }} {{ getCourseTitle(index + 1) }}-->
-            ({{outlineData.ctTypeSort}}) {{outlineData.ctType}}
+            <!-- 0{{ index + 1 }} {{ getCourseTitle(index + 1) }}-->
+            ({{ outlineData.ctTypeSort }}) {{ outlineData.ctType }}
           </div>
         </div>
       </div>
     </div>
-    
   </div>
 </template>
 
@@ -125,11 +131,21 @@ import {
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
 
 import { useRouter } from 'vue-router'
-const router = useRouter() // 获取当前路由对象
 
+import teachingImg from '@/assets/icon/teaching.png'
+
+const router = useRouter() // 获取当前路由对象
 
 // 添加下拉菜单选中项
 const selectedGrade = ref('')
+
+// 添加抽屉显示状态
+const drawerVisible = ref(true)
+
+// 添加切换抽屉显示状态的函数
+const toggleDrawer = () => {
+  drawerVisible.value = !drawerVisible.value
+}
 // 获取年级
 const classData = ref([])
 // 添加接口返回的数据引用，用于存储 ClassOutline 结果
@@ -150,7 +166,6 @@ const fetchCtTypes = async () => {
   }
 }
 
-
 // 添加 watch 监听 selectedGrade 的变化
 watch(selectedGrade, newValue => {
   // 根据 id 切换高年级或低年级
@@ -163,7 +178,7 @@ watch(selectedGrade, newValue => {
     }
     // 调用获取教学大纲函数并传入年级id
     ClassOutline(selectedItem.id).then(res => {
-       if (res.code === 0) {
+      if (res.code === 0) {
         classOutlineData.value = res.data
       }
     })
@@ -172,7 +187,11 @@ watch(selectedGrade, newValue => {
 
 // 添加获取课程标题
 const getCourseTitle = index => {
-  if (classOutlineData.value.length > 0 && index > 0 && index <= classOutlineData.value.length) {
+  if (
+    classOutlineData.value.length > 0 &&
+    index > 0 &&
+    index <= classOutlineData.value.length
+  ) {
     return classOutlineData.value[index - 1].ctType
   }
   return ''
@@ -186,14 +205,7 @@ onMounted(() => {
   fetchCtTypes()
 })
 
-
-// 添加切换抽屉显示状态的函数
-const toggleDrawer = () => {
-  drawerVisible.value = !drawerVisible.value
-}
-
-import { Message } from "@/utils/message/Message.js";
-
+import { Message } from '@/utils/message/Message.js'
 
 // 搜索框
 const SearchInput = ref('')
@@ -206,8 +218,6 @@ const filteredTitles = computed(() => {
 })
 // 添加按钮显示状态
 const buttonVisible = ref(false)
-// 添加抽屉显示状态
-const drawerVisible = ref(true)
 
 const goBack = () => {
   router.go(-1) // 返回上一页
@@ -228,7 +238,6 @@ const goBack = () => {
 //       path: routes[index - 1],
 //       query: { title: title, id: selectedItem.id }
 
-
 const goToAIExperience = outlineData => {
   // const routes = [
   //   '/ai-initial-experience', // 跳转AI初体验
@@ -249,15 +258,14 @@ const goToAIExperience = outlineData => {
       path: '/ai-develop', // 跳转视频页面
       query: { typeId: outlineData.id, typeName: outlineData.ctType }
     })
-  }else {
-    if (localStorage.getItem('userName') === "aiTest") {
+  } else {
+    if (localStorage.getItem('userName') === 'aiTest') {
       //提示禁用
       Message().notifyWarning('您的账号并未开放此课程！', true)
     }
   }
 }
 
-
 // 添加图片路径数组
 // const courseImages = ref([
 //   './src/assets/images/one.png',
@@ -315,25 +323,30 @@ onMounted(() => {
   height: 100%;
   position: relative;
   background: linear-gradient(to bottom, #001169, #8a78d0);
-    overflow-y: auto; /* 添加垂直滚动条 */
+  overflow-y: auto; /* 添加垂直滚动条 */
   max-height: 100%; /* 设置最大高度 */
 }
 .icon-expand {
-  width: rpx(30);
-  height: rpx(30);
+  width: rpx(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
   z-index: 9999;
   position: absolute;
+  top: 50%;
+  left: 18%;
+  transform: translateY(-50%);
+  background-color: #44449c;
   cursor: pointer; // 添加鼠标指针样式
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
 }
-.icon-expand .el-icon {
-  font-size: rpx(15);
-  position: absolute;
-  color: white;
-  left: rpx(9);
-  margin-top: rpx(17);
-}
-.icon-expand .el-icon:active {
-  color: black;
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
 }
 .content-box {
   flex: 1;
@@ -351,17 +364,19 @@ onMounted(() => {
   border: none;
   width: 100%;
   margin-left: rpx(10);
+  margin-top: rpx(10);
 }
 
-.el-col-12 {
-  // max-width: 100%;
-}
-.mb-2 {
+.mb-2  {
   color: white;
+  font-size: rpx(8);
+  margin-left: rpx(13);
 }
-.mb-2 .el-icon {
-  font-size: rpx(10);
-  margin-left: rpx(5);
+.mb-2 img {
+  width: rpx(15);
+  height: rpx(15);
+  vertical-align: middle;
+  margin-top: rpx(-2);
 }
 .el-menu-item {
   width: rpx(115);

src/views/AILaboratory.vue

@@ -1,14 +1,22 @@
 <template>
   <!-- AI实验室 -->
   <div class="home-container">
-    <!-- 展开收起侧边栏 -->
-    <div class="icon-expand">
-      <el-icon
-        @click="toggleDrawer"
-        :style="{ color: drawerVisible ? 'white' : '#B6B0D8' }"
+      <!-- 展开收起侧边栏 -->
+    <div
+      class="icon-expand"
+      :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0'
+      }"
+      @click="toggleDrawer"
+    >
+      <span
+        class="vertical-lines"
+        :style="{
+          color: drawerVisible ? '#8a78d0' : 'white'
+        }"
+        >||</span
       >
-        <component :is="drawerVisible ? Fold : Expand" />
-      </el-icon>
     </div>
 
     <!-- 左侧折叠面板 -->
@@ -193,21 +201,26 @@ const groupList = ref([
 }
 
 .icon-expand {
-  width: rpx(30);
-  height: rpx(30);
+  width: rpx(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
   z-index: 9999;
   position: absolute;
-  cursor: pointer;
-}
-.icon-expand .el-icon {
-  font-size: rpx(15);
-  position: absolute;
-  color: white;
-  left: rpx(9);
-  margin-top: rpx(17);
+  top: 50%;
+  left: 18%;
+  transform: translateY(-50%);
+  background-color: #44449c;
+  cursor: pointer; // 添加鼠标指针样式
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
 }
-.icon-expand .el-icon:active {
-  color: black;
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
 }
 .menu-icon {
   width:rpx(11);
@@ -219,7 +232,7 @@ const groupList = ref([
 .left-group {
   width: rpx(135);
   height: 100%;
-  background: linear-gradient(to bottom, #001169, #b4a8e1);
+    background: linear-gradient(to bottom, #001169, #8a78d0);
 }
 .mb-2 {
   color: black;

src/views/AIPainting.vue

@@ -3,13 +3,21 @@
   <div class="home-container">
 
      <!-- 展开收起侧边栏 -->
-    <div class="icon-expand">
-      <el-icon
-        @click="toggleDrawer"
-        :style="{ color: drawerVisible ? 'white' : '#B6B0D8' }"
+    <div
+      class="icon-expand"
+      :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0'
+      }"
+      @click="toggleDrawer"
+    >
+      <span
+        class="vertical-lines"
+        :style="{
+          color: drawerVisible ? '#8a78d0' : 'white'
+        }"
+        >||</span
       >
-        <component :is="drawerVisible ? Fold : Expand" />
-      </el-icon>
     </div>
 
     <!-- 左侧折叠面板 -->
@@ -377,21 +385,26 @@ const inProgressTimerFun = () => {
   opacity: 0;
 }
 .icon-expand {
-  width: rpx(30);
-  height: rpx(30);
+  width: rpx(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
   z-index: 9999;
   position: absolute;
+  top: 50%;
+  left: 18%;
+  transform: translateY(-50%);
+  background-color: #44449c;
   cursor: pointer; // 添加鼠标指针样式
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
 }
-.icon-expand .el-icon {
-  font-size: rpx(15);
-  position: absolute;
-  color: white;
-  left: rpx(9);
-  margin-top: rpx(17);
-}
-.icon-expand .el-icon:active {
-  color: black;
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
 }
 .menu-icon {
   width:rpx(11);
@@ -402,7 +415,8 @@ const inProgressTimerFun = () => {
 .left-group1 {
   width: rpx(135);
   height: 100%;
-  background: linear-gradient(to bottom, #001169, #b4a8e1);
+    background: linear-gradient(to bottom, #001169, #8a78d0);
+
 }
 .home-container {
   position: fixed;

src/views/AIQuestions.vue

@@ -2,13 +2,21 @@
   <!-- 数字人智能问答 -->
   <div class="home-container">
     <!-- 展开收起侧边栏 -->
-    <div class="icon-expand">
-      <el-icon
-        @click="toggleDrawer"
-        :style="{ color: drawerVisible ? 'white' : '#B6B0D8' }"
+    <div
+      class="icon-expand"
+      :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0'
+      }"
+      @click="toggleDrawer"
+    >
+      <span
+        class="vertical-lines"
+        :style="{
+          color: drawerVisible ? '#8a78d0' : 'white'
+        }"
+        >||</span
       >
-        <component :is="drawerVisible ? Fold : Expand" />
-      </el-icon>
     </div>
 
     <!-- 左侧折叠面板 -->
@@ -531,23 +539,26 @@ onMounted(async () => {
   background: linear-gradient(to bottom, #e2ddfc, #f1effd);
 }
 .icon-expand {
-  width: rpx(30);
-  height: rpx(30);
+  width: rpx(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
   z-index: 9999;
   position: absolute;
-  cursor: pointer;
-}
-
-.icon-expand .el-icon {
-  font-size: rpx(15);
-  position: absolute;
-  color: white;
-  left: rpx(9);
-  margin-top: rpx(17);
+  top: 50%;
+  left: 18%;
+  transform: translateY(-50%);
+  background-color: #44449c;
+  cursor: pointer; // 添加鼠标指针样式
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
 }
-
-.icon-expand .el-icon:active {
-  color: black;
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
 }
 .menu-icon {
   width:rpx(11);
@@ -561,7 +572,8 @@ onMounted(async () => {
 .left-group {
   width: rpx(135);
   height: 100%;
-  background: linear-gradient(to bottom, #001169, #b4a8e1);
+  background: linear-gradient(to bottom, #001169, #8a78d0);
+
 }
 .mb-2 {
   color: black;

src/views/Login.vue

@@ -1,53 +1,62 @@
 <template>
   <!-- 登录页面 -->
   <div class="login-content">
+    <!-- 背景图容器 -->
+    <div
+      class="bg-image-container"
+      :style="{ backgroundImage: `url(${BGImages})`, backgroundSize: 'cover' }"
+    ></div>
     <!-- 登录输入框 -->
-    <div class="login-input">
-      <el-form
-        ref="loginFormRef"
-        :model="loginData.loginForm"
-        :rules="rules"
-        label-width="0px"
-        class="input-item"
-      >
-        <el-form-item prop="tenantName">
-          <el-input
-            v-model="loginData.loginForm.tenantName"
-            :prefix-icon="HomeFilled"
-            placeholder="租户"
-          />
-        </el-form-item>
-        <el-form-item prop="username">
-          <el-input
-            v-model="loginData.loginForm.username"
-            :prefix-icon="Avatar"
-            placeholder="账号"
-          />
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginData.loginForm.password"
-            type="password"
-            :prefix-icon="Lock"
-            placeholder="密码"
-            show-password
-          />
-        </el-form-item>
-        <!-- 多选框 -->
-        <div class="check-box">
-          <el-checkbox
-            v-model="loginData.loginForm.rememberMe"
-            label="记住我"
-            size="large"
-          />
-          <a href="javascript:;" class="forgot-password">忘记密码?</a>
-        </div>
+    <div class="login-wrapper">
+      <div class="login-input">
+         <span>AI课程</span>
+        <el-form
+          ref="loginFormRef"
+          :model="loginData.loginForm"
+          :rules="rules"
+          label-width="0px"
+          class="input-item"
+        >
+          <el-form-item prop="tenantName">
+            <el-input
+              v-model="loginData.loginForm.tenantName"
+              :prefix-icon="HomeFilled"
+              placeholder="租户"
+            />
+          </el-form-item>
+          <el-form-item prop="username">
+            <el-input
+              v-model="loginData.loginForm.username"
+              :prefix-icon="Avatar"
+              placeholder="账号"
+            />
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginData.loginForm.password"
+              type="password"
+              :prefix-icon="Lock"
+              placeholder="密码"
+              show-password
+            />
+          </el-form-item>
+          
 
-        <!-- 登录按钮 -->
-        <el-form-item>
-          <el-button type="primary" @click="handleLogin">登录</el-button>
-        </el-form-item>
-      </el-form>
+          <!-- 登录按钮 -->
+          <el-form-item>
+            <el-button type="primary" @click="handleLogin">登录</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- 多选框 -->
+          <div class="check-box">
+            <el-checkbox
+              v-model="loginData.loginForm.rememberMe"
+              label="记住我"
+              size="large"
+            />
+            <a href="javascript:;" class="forgot-password">忘记密码?</a>
+          </div>
+      </div>
     </div>
   </div>
 </template>
@@ -58,6 +67,9 @@ import { useRouter } from 'vue-router'
 import { HomeFilled, Avatar, Lock } from '@element-plus/icons-vue'
 import { getTenantIdByName, login } from '@/api/login/login.js'
 import { ElLoading, ElMessage } from 'element-plus'
+
+import BGImages from '@/assets/images/homeBG.png'
+
 const router = useRouter()
 
 const loginFormRef = ref(null)
@@ -130,7 +142,7 @@ const handleLogin = async params => {
             localStorage.setItem('isLoggedIn', 'true')
             localStorage.setItem('token', res.data.accessToken)
             localStorage.setItem('userName', loginData.value.loginForm.username)
-            
+
             // 根据账号类型设置可查看的课程小节数
             if (loginData.value.loginForm.username === 'aiTest') {
               localStorage.setItem('maxCourseSections', '5')
@@ -138,7 +150,7 @@ const handleLogin = async params => {
               localStorage.setItem('maxCourseSections', 'all')
             }
           }
-          
+
           loading.value = ElLoading.service({
             lock: true,
             text: '正在加载系统中...',
@@ -170,8 +182,6 @@ onMounted(() => {
     router.push('/home')
   }
 })
-
-
 </script>
 
 <style scoped lang="scss">
@@ -186,75 +196,89 @@ onMounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to bottom, #001169, #8a78d0);
   display: flex;
-  flex-direction: column;
-  gap: rpx(0);
+  flex-direction: row; // 修改为水平布局
+}
+.bg-image-container {
+  flex: 3; // 背景图占比为 3
+  background-size: cover;
+  background-position: center;
+}
+
+.login-wrapper {
+  flex: 1; // 登录框占比为 1
+  background: linear-gradient(to bottom, #001169, #8a78d0);
+  padding: 20px;
+  position: static; 
+  transform: none; 
+  display: flex; // 添加 Flexbox 布局
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
 }
 .login-input {
-  width: rpx(210);
+  width: rpx(190);
   height: rpx(240);
-  margin: auto;
   display: flex;
-  border-radius: rpx(10);
-  background-color: rgb(255, 255, 255, 0.3);
-  border: 1px white solid;
-  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
+  flex-direction: column; // 子元素垂直排列
+  text-align: center; // 文本居中
+}
+.login-input span{
+  color: white;
+  font-size: rpx(11);
+  padding-bottom: rpx(5);
+  letter-spacing: rpx(1);
 }
 .input-item {
-  margin: auto;
+  display: flex;
+  flex-direction: column; // 子元素垂直排列
+  justify-content: center; // 内容垂直居中
+  align-items: center; // 内容水平居中
+}
+.el-input ::v-deep(.el-input__wrapper){
+  border-radius: rpx(5);
 }
 .input-item .el-form-item {
   margin-bottom: 0;
 }
 .input-item .el-input {
-  width: rpx(180);
-  height: rpx(18);
+  width: rpx(150);
+  height: rpx(22);
   margin-bottom: rpx(15);
+  font-size: rpx(7);
 }
 .el-form-item ::v-deep(.el-form-item__error) {
   top: 0;
   padding-top: rpx(20);
 }
 .input-item .el-button {
-  width: rpx(180);
-  height: rpx(18);
-  color: black;
-  font-size: rpx(8);
-  letter-spacing: rpx(10);
-  border-radius: rpx(3);
-  margin: auto;
-  border: none;
-  background: linear-gradient(to bottom, #fee78a, #ffce1b);
-  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.2);
-}
-.input-item .el-input {
-  width: rpx(180);
-  height: rpx(18);
-  margin-bottom: rpx(15);
-}
-.input-item .el-button {
-  width: rpx(180);
-  height: rpx(18);
+  width: rpx(150);
+  height: rpx(20);
   color: black;
   font-size: rpx(8);
   letter-spacing: rpx(10);
-  border-radius: rpx(3);
-  margin: auto;
+   border-radius: rpx(5);
+  margin: rpx(10) 0 auto;
   border: none;
   background: linear-gradient(to bottom, #fee78a, #ffce1b);
   box-shadow: 0 8px 8px rgb(0, 0, 0, 0.2);
 }
 .check-box {
-  width: rpx(180);
+  width: rpx(150);
   height: rpx(18);
-  margin: auto;
+  margin: rpx(5) auto;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 }
 .check-box .el-checkbox {
   color: white;
+  padding-right: rpx(10);
+  font-size: rpx(6);
+}
+.el-checkbox ::v-deep(.el-checkbox__label){
+  font-size: rpx(6);
 }
 .check-box .forgot-password {
   color: white;