diff --git a/src/assets/bg.svg b/src/assets/bg.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5bf27b651601225d91f9814dff41a1578dfe978a
--- /dev/null
+++ b/src/assets/bg.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 500 350"
+>
+  <style>
+    path {
+      fill: #2c3142;
+    }
+  </style>
+
+  <g transform="">
+    <g transform="translate(628,-17) scale(100)" opacity="0.3">
+      <path
+        d="M4.10125 0 C4.10125 0.5525 4.3542 0.8338 4.1835 1.3593 S3.6427 1.9637 3.318 2.4107 S3.0325 3.2339 2.5855 3.5587 S1.7928 3.7298 1.2674 3.9005 S0.5525 4.3988 0 4.3988 S-0.7419 4.0713 -1.2674 3.9005 S-2.1385 3.8834 -2.5855 3.5587 S-2.9932 2.8576 -3.318 2.4107 S-4.0127 1.8847 -4.1835 1.3593 S-4.1013 0.5525 -4.1013 0 S-4.3542 -0.8338 -4.1835 -1.3593 S-3.6427 -1.9637 -3.318 -2.4107 S-3.0325 -3.2339 -2.5855 -3.5587 S-1.7928 -3.7298 -1.2674 -3.9005 S-0.5525 -4.3988 0 -4.3988 S0.7419 -4.0713 1.2674 -3.9005 S2.1385 -3.8834 2.5855 -3.5587 S2.9932 -2.8576 3.318 -2.4107 S4.0127 -1.8847 4.1835 -1.3593 S4.1013 -0.5525 4.1013 0"
+        stroke-width="0"
+        transform="rotate(19)"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="10s"
+          repeatCount="indefinite"
+          values="0;36"
+        ></animateTransform>
+      </path>
+    </g>
+    <g transform="translate(704,-56) scale(100)" opacity="0.9">
+      <path
+        d="M4.9215 0 C4.9215 0.663 5.225 1.0006 5.0202 1.6311 S4.3713 2.3564 3.9816 2.8928 S3.639 3.8807 3.1026 4.2704 S2.1514 4.4757 1.5208 4.6806 S0.663 5.2785 0 5.2785 S-0.8903 4.8855 -1.5208 4.6806 S-2.5662 4.6601 -3.1026 4.2704 S-3.5919 3.4292 -3.9816 2.8928 S-4.8153 2.2617 -5.0202 1.6311 S-4.9215 0.663 -4.9215 0 S-5.225 -1.0006 -5.0202 -1.6311 S-4.3713 -2.3564 -3.9816 -2.8928 S-3.639 -3.8807 -3.1026 -4.2704 S-2.1514 -4.4757 -1.5208 -4.6806 S-0.663 -5.2785 0 -5.2785 S0.8903 -4.8855 1.5208 -4.6806 S2.5662 -4.6601 3.1026 -4.2704 S3.5919 -3.4292 3.9816 -2.8928 S4.8153 -2.2617 5.0202 -1.6311 S4.9215 -0.663 4.9215 0"
+        stroke-width="0"
+        transform="rotate(2.04427)"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="6s"
+          repeatCount="indefinite"
+          values="0;36"
+        ></animateTransform>
+      </path>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/ma-crud/index.vue b/src/components/ma-crud/index.vue
index 9988a0d5a18031314a484f8e352af23d9885c411..dc6b9897ab3dd828a27dd1b09cfcc1faed37077c 100644
--- a/src/components/ma-crud/index.vue
+++ b/src/components/ma-crud/index.vue
@@ -1,7 +1,8 @@
 
 <template>
   <a-layout-content class="flex flex-col lg:h-full relative w-full">
-    <div class="_crud-header flex flex-col mb-2" ref="crudHeaderRef">
+    <div class="_crud-header flex flex-col" :class="options.expandSearch
+?'mb-2':''" ref="crudHeaderRef">
       <a-tabs
           v-if="isArray(options.tabs.data) && options.tabs.data.length > 0"
           v-model:active-key="options.tabs.defaultKey"
@@ -40,7 +41,7 @@
         </template>
       </ma-search>
     </div>
-    <div class="mb-2"><slot name="middleContent"></slot></div>
+    <div class="mb-2" v-if="options.expandSearch || $slots.middleContent"><slot name="middleContent"></slot></div>
     <div class="_crud-content">
       <div class="operation-tools lg:flex justify-between mb-3" ref="crudOperationRef">
         <a-space class="lg:flex block lg:inline-block" >
@@ -537,7 +538,7 @@ const toggleSearch = async () => {
     crudSearchRef.value.showSearch
     ? crudSearchRef.value.setSearchHidden()
     : crudSearchRef.value.setSearchDisplay()
-
+    options.value.expandSearch = crudSearchRef.value.showSearch
     await nextTick(() => {
       headerHeight.value = crudHeaderRef.value.offsetHeight
       options.value.pageLayout === 'fixed' && settingFixedPage()
diff --git a/src/views/login.vue b/src/views/login.vue
index f788f3a102e91a93a4f61d7df33855ed0d1fdb04..b235f99a2fb42a2fcd46f19b91e9b2c78b97c5d6 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,3 +1,79 @@
+<template>
+  <div class="page-login">
+    <div class="box">
+      <div class="logo">
+        <!--        <img src="/logo.png" alt="Logo" />-->
+        <div class="name">
+          <span v-for="text in viteName" :key="text">{{ text }}</span>
+        </div>
+      </div>
+
+      <p class="desc">快速开发后台权限管理系统</p>
+
+      <div class="form">
+        <a-form :model="form" @submit="handleSubmit">
+          <a-form-item field="username" :hide-label="true" :rules="[{ required: true, message: $t('sys.login.usernameNotice') }]">
+            <a-input v-model="form.username" class="w-full" size="large" :placeholder="$t('sys.login.username')" allow-clear>
+              <template #prefix><icon-user /></template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item field="password" :hide-label="true" :rules="[{ required: true, message: $t('sys.login.passwordNotice') }]">
+            <a-input-password v-model="form.password" :placeholder="$t('sys.login.password')" size="large" allow-clear>
+              <template #prefix><icon-lock /></template>
+            </a-input-password>
+          </a-form-item>
+
+          <a-form-item
+              field="code"
+              :hide-label="true"
+              :rules="[
+							{
+								required: true,
+								match: /^[a-zA-Z0-9]{4}$/,
+								message: $t('sys.login.verifyCodeNotice'),
+							},
+						]"
+          >
+            <a-input v-model="form.code" :placeholder="$t('sys.login.verifyCode')" size="large" allow-clear>
+              <template #prefix><icon-safe /></template>
+              <template #append>
+                <img :src="captcha" style="height: 120px; height: 36px; cursor: pointer" @click="refreshCaptcha" />
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item :hide-label="true" class="mt-5">
+            <a-button html-type="submit" type="primary" long size="large" :loading="loading">
+              {{ $t('sys.login.loginBtn') }}
+            </a-button>
+          </a-form-item>
+
+          <a-divider orientation="center">{{ $t('sys.login.otherLoginType') }}</a-divider>
+          <div class="flex w-3/4 pt-2 mx-auto items-stretch justify-around">
+            <a-avatar class="other-login wechat"><icon-wechat /></a-avatar>
+            <a-avatar class="other-login alipay"><icon-alipay-circle /></a-avatar>
+            <a-avatar class="other-login qq"><icon-qq /></a-avatar>
+            <a-avatar class="other-login weibo"><icon-weibo /></a-avatar>
+          </div>
+        </a-form>
+      </div>
+    </div>
+
+    <div class="bg">
+      <img src="@/assets/bg.svg" />
+    </div>
+
+    <a href="https://saithink.top" class="copyright"> Copyright © COOL </a>
+  </div>
+</template>
+
+<!--<script name="login" setup>-->
+<!--import { reactive, ref } from "vue";-->
+
+<!--</script>-->
+
+
 <script setup>
 import { reactive, ref } from 'vue'
 import loginApi from '@/api/login'
@@ -7,6 +83,7 @@ import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 const captcha = ref(null)
+const viteName = 'SaiAdmin';
 
 const loading = ref(false)
 
@@ -17,14 +94,14 @@ var odata = isDevelop ? { username: 'admin', password: '123456', code: '' } : {
 const form = reactive(odata)
 
 const refreshCaptcha = () => {
-	form.code = ''
-	form.uuid = ''
-	loginApi.getCaptch().then((res) => {
-		if (res.code === 200) {
-			captcha.value = 'data:image/jpeg;base64,' + res.img
-			form.uuid = res.uuid
-		}
-	})
+  form.code = ''
+  form.uuid = ''
+  loginApi.getCaptch().then((res) => {
+    if (res.code === 200) {
+      captcha.value = 'data:image/jpeg;base64,' + res.img
+      form.uuid = res.uuid
+    }
+  })
 }
 
 refreshCaptcha()
@@ -34,165 +111,119 @@ const userStore = useUserStore()
 const redirect = route.query.redirect ? route.query.redirect : '/'
 
 const handleSubmit = async ({ values, errors }) => {
-	if (loading.value) {
-		return
-	}
-	loading.value = true
-	if (!errors) {
-		const result = await userStore.login(form)
-		if (!result) {
-			loading.value = false
-			refreshCaptcha()
-			return
-		}
-		router.push(redirect)
-	}
-	loading.value = false
+  if (loading.value) {
+    return
+  }
+  loading.value = true
+  if (!errors) {
+    const result = await userStore.login(form)
+    if (!result) {
+      loading.value = false
+      refreshCaptcha()
+      return
+    }
+    router.push(redirect)
+  }
+  loading.value = false
 }
 </script>
-<template>
-	<div id="background" class="fixed"></div>
-	<div class="bg-backdrop-layout"></div>
-	<div class="login-container">
-		<div class="login-width md:w-10/12 w-11/12 mx-auto flex justify-between h-full items-center">
-			<div class="w-6/12 mx-auto left-panel rounded-l pl-5 pr-5 hidden md:block">
-				<div class="logo">
-					<img :src="`${$url}logo.png`" width="45" /><span>{{ $title }}</span>
-				</div>
-				<div class="slogan flex justify-end">
-					<span>---- {{ $t('sys.login.slogan') }}</span>
-				</div>
-			</div>
-
-			<div class="md:w-6/12 w-11/12 md:rounded-r mx-auto pl-5 pr-5 pb-10">
-				<h2 class="mt-10 text-3xl pb-0 mb-10">{{ $t('sys.login.title') }}</h2>
-				<a-form :model="form" @submit="handleSubmit">
-					<a-form-item field="username" :hide-label="true" :rules="[{ required: true, message: $t('sys.login.usernameNotice') }]">
-						<a-input v-model="form.username" class="w-full" size="large" :placeholder="$t('sys.login.username')" allow-clear>
-							<template #prefix><icon-user /></template>
-						</a-input>
-					</a-form-item>
-
-					<a-form-item field="password" :hide-label="true" :rules="[{ required: true, message: $t('sys.login.passwordNotice') }]">
-						<a-input-password v-model="form.password" :placeholder="$t('sys.login.password')" size="large" allow-clear>
-							<template #prefix><icon-lock /></template>
-						</a-input-password>
-					</a-form-item>
-
-					<a-form-item
-						field="code"
-						:hide-label="true"
-						:rules="[
-							{
-								required: true,
-								match: /^[a-zA-Z0-9]{4}$/,
-								message: $t('sys.login.verifyCodeNotice'),
-							},
-						]"
-					>
-						<a-input v-model="form.code" :placeholder="$t('sys.login.verifyCode')" size="large" allow-clear>
-							<template #prefix><icon-safe /></template>
-							<template #append>
-								<img :src="captcha" style="height: 120px; height: 36px; cursor: pointer" @click="refreshCaptcha" />
-							</template>
-						</a-input>
-					</a-form-item>
-
-					<a-form-item :hide-label="true" class="mt-5">
-						<a-button html-type="submit" type="primary" long size="large" :loading="loading">
-							{{ $t('sys.login.loginBtn') }}
-						</a-button>
-					</a-form-item>
-
-					<a-divider orientation="center">{{ $t('sys.login.otherLoginType') }}</a-divider>
-					<div class="flex w-3/4 pt-2 mx-auto items-stretch justify-around">
-						<a-avatar class="other-login wechat"><icon-wechat /></a-avatar>
-						<a-avatar class="other-login alipay"><icon-alipay-circle /></a-avatar>
-						<a-avatar class="other-login qq"><icon-qq /></a-avatar>
-						<a-avatar class="other-login weibo"><icon-weibo /></a-avatar>
-					</div>
-				</a-form>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped lang="less">
-#background {
-	top: 0;
-	left: 0;
-	z-index: 1;
-	background-image: url(@/assets/BingWallpaper.jpg);
-	width: 100%;
-	height: 100%;
+<style lang="less" scoped>
+@color: #2c3142;
+
+.page-login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-color: #fff;
+  color: @color;
+
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 90%;
+    pointer-events: none;
+    transform: rotate(180deg) scaleY(-1);
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .copyright {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    text-align: center;
+    width: 100%;
+    color: #666;
+    font-size: 14px;
+  }
+
+  .box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 50%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 9;
+
+    .logo {
+      height: 50px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+
+      img {
+        height: 46px;
+        border-radius: 50px;
+        border: 3px solid @color;
+        margin-right: 10px;
+      }
+
+      span {
+        display: inline-block;
+        font-size: 38px;
+        font-weight: bold;
+        line-height: 1;
+        letter-spacing: 3px;
+
+        &:nth-child(6) {
+          animation: dou 1s infinite linear;
+        }
+      }
+    }
+
+    .desc {
+      font-size: 15px;
+      letter-spacing: 1px;
+      margin-bottom: 50px;
+    }
+
+    .form {
+      width: 300px;
+      :deep(.arco-input-append) {
+        padding: 0 !important;
+        border-left: none;
+      }
+    }
+  }
 }
-.bg-backdrop-layout {
-	top: 0;
-	left: 0;
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	z-index: 2;
-	backdrop-filter: blur(25px);
-}
-.login-container {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	background-size: cover;
-	z-index: 3;
-	.login-width {
-		max-width: 950px;
-		background: #fff;
-		padding: 10px;
-		height: 500px;
-		position: relative;
-		top: 50%;
-		margin-top: -255px;
-		border-radius: 10px;
-	}
-
-	.left-panel {
-		height: 491px;
-		background-image: url(@/assets/login_picture.svg);
-		background-repeat: no-repeat;
-		background-position: center 60px;
-		background-size: contain;
-	}
-
-	.logo {
-		display: flex;
-		margin-top: 20px;
-		color: #333;
-		span {
-			font-size: 28px;
-			margin-left: 15px;
-			color: rgb(var(--primary-6));
-		}
-	}
-	.slogan {
-		font-size: 16px;
-		line-height: 50px;
-	}
-
-	:deep(.arco-input-append) {
-		padding: 0 !important;
-	}
-
-	.other-login {
-		cursor: pointer;
-	}
-
-	.qq:hover,
-	.alipay:hover {
-		background: #165dff;
-	}
-	.wechat:hover {
-		background: #0f9c02;
-	}
-
-	.weibo:hover {
-		background: #f3ce2b;
-	}
+
+@media screen and (max-width: 1024px) {
+  .page-login {
+    .box {
+      width: 100%;
+    }
+  }
 }
 </style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e67dae15e1fec1c6b48fd69aab0f669509b5ce86..8178d52275c2a43466a12bbe1d48b7984bcdc8ec 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -11,6 +11,7 @@
 				<template #status="{ record }">
 					<a-switch :checked-value="1" unchecked-value="2" @change="changeStatus($event, record.id)" :default-checked="record.status == 1" />
 				</template>
+
 				<!-- 头像列 -->
 				<template #avatar="{ record }">
 					<a-avatar>