feat:完成登录页面+各种细节

Yi.BBS.Vue3/src/layout/AppHeader.vue

@@ -33,8 +33,8 @@
 
    <el-menu-item index="5">
     <div style="width: 350px;">
-      <el-input style="width: 300px;"  placeholder="全站搜索" clearable  prefix-icon="Search" />
-      <el-button type="primary" plain>搜索</el-button>
+      <el-input style="width: 300px;" v-model="searchText" placeholder="全站搜索" clearable  prefix-icon="Search" />
+      <el-button type="primary" plain @click="search">搜索</el-button>
     </div>
     </el-menu-item>
    
@@ -59,19 +59,40 @@ import useUserStore from '@/stores/user.js'
 const router = useRouter()
 const userStore =useUserStore();
 const activeIndex = ref('1')
+const searchText=ref('')
 const handleSelect = (key, keyPath) => {
   console.log(key, keyPath)
 }
-const logout=async ()=>{
- await userStore.logOut();
-  router.push("/login");
+const logout= async()=>{
+  ElMessageBox.confirm(`确定登出系统吗?`, "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then( async() => {
+    //异步
+    await userStore.logOut();
+    //删除成功后，跳转到主页
+    router.push("/login");
+    ElMessage({
+      type: "success",
+      message: "登出成功",
+    });
+  });
+
 }
 const enterIndex=()=>{
   router.push("/index");
 };
 const enterProfile=()=>{
   router.push("/profile");}
+
+const search=()=>{
+  var routerPer = { path: `/discuss`,query:{q:searchText.value} };
+  searchText.value='';
+  router.push(routerPer)
+}
 </script>
+
 <style scoped>
 
 .logo{

Yi.BBS.Vue3/src/layout/LoginLayout.vue

@@ -1,53 +1,8 @@
 <template>
-<div class="body-div" id="body">
-
-  <div  class="left">
-    <video class="videoBG"  autoplay playsinline loop disablepictureinpicture  poster="/loginBg.png">
-    <!-- <source src="/loginBg.mp4" type="video/mp4"> -->
-    </video>
-  </div>
-
-  <div class="right">
-    <div class="right-div">
-    <RouterView />
-  </div>
-  </div>
-
-</div>
-
-
+   <div class="box">
+        <div class="content">
+           <RouterView/>
+        </div>
+    </div>
   </template>
-
-  <script setup>
-import { onMounted } from 'vue';
-
-</script>
-<style scoped>
-.left
-{
-
- background-color: #010413;
-}
-.right
-{
-
-}
-.right-div
-{
-margin-top: 60%;
-padding: 2rem;
-}
-.body-div
-{
-
-display: flex;
-justify-content: space-between;
-height: 930px;
-}
-.videoBG
-{
-
-width:100% ;
-}
-
-</style>
+  <style src="@/assets/styles/login.scss" scoped></style>