优化状态栏

jsconfig.json

@@ -3,7 +3,9 @@
     "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["element-plus/global"]
+    
   },
   "exclude": ["node_modules", "dist"]
 }

package.json

@@ -25,5 +25,8 @@
     "unplugin-auto-import": "^0.18.0",
     "unplugin-vue-components": "^0.27.2",
     "vite": "^5.3.1"
+  },
+  "volta": {
+    "node": "16.18.1"
   }
 }

src/components/Xuaua_header.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="nav">
+    <div class="logo-box"><span class="loogText">Xuaua</span></div>
+    <div>
+      <div class="search-box">
+        <!-- <el-input type="text" prefix-icon="el-icon-search" style="height: 38px;" class="search-input" placeholder="搜索关键词" v-model="selectType">
+      
+          </el-input> -->
+        <el-input
+          v-model="input3"
+          style="max-width: 600px"
+          placeholder="搜索关键词"
+          class="input-with-select"
+        >
+          <template #prepend>
+            <el-button :icon="Search" />
+          </template>
+        </el-input>
+
+      </div>
+
+      <el-popover :width="700" trigger="click">
+          <template #reference>
+            <!-- <div class="selectInput">
+              <div @click="selectClick">
+                <el-icon :size="size" :color="color">
+                  <Search />
+                </el-icon>
+              </div>
+            </div> -->
+          </template>
+          <TypeSelect @select="selectInput"></TypeSelect>
+        </el-popover>
+    </div>
+    <div @click="router.push('/user')" class="user-avatar">
+      <el-avatar :size="40" :src="circleUrl" />用户名
+    </div>
+  </div>
+</template>
+<script setup>
+// import {defineProps} from "vue"
+import { ElMessage } from "element-plus";
+import TypeSelect from "@/components/TypeSelect.vue";
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+</script>
+<style lang="scss">
+.nav {
+  width: 100%;
+  height: 70px;
+  background-color: #fff;
+  display: flex;
+  // justify-content: space-between;
+  align-items: center;
+  .logo-box {
+    margin-top: 11px;
+    margin-left: 52px;
+    margin-bottom: 11px;
+  }
+  .input-with-select{
+    border-radius: 30px;
+  }
+  .search-box {
+    position: relative;
+    left: 210px;
+    border-radius: 30px;
+    overflow: hidden;
+    padding: 5px;
+    background: #fefefe;
+    // .search-input{
+    //   width: 400px;
+    //   height: 38px;
+    //   border-radius: 30px;
+    // }
+  }
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .user-avatar {
+    position: absolute;
+    right: 2%;
+  }
+  .loogText {
+    font-size: 30px;
+    margin-left: 10px;
+  }
+}
+</style>

src/main.js

@@ -3,19 +3,16 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
-
+import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
 // 如果您正在使用CDN引入，请删除下面一行。
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(ElementPlus, { size: 'small', zIndex: 3000 })
+app.use(ElementPlus)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
-  }
 
 app.mount('#app')

src/views/home/index.vue

@@ -1,25 +1,7 @@
 <template>
   <div class="homeBox">
-    <div class="nav">
-      <div><span class="loogText">Xuaua</span></div>
     <div>
-        <el-popover :width="700" trigger="click">
+      <xuaua-header></xuaua-header>
-          <template #reference>
-            <div class="selectInput">
-              <div @click="selectClick">
-                <el-icon :size="size" :color="color">
-                  <Search />
-                </el-icon>
-              </div>
-              <input type="text" placeholder="搜索关键词" v-model="selectType" />
-            </div>
-          </template>
-          <TypeSelect @select="selectInput"></TypeSelect>
-        </el-popover>
-      </div>
-      <div @click="router.push('/user')">
-        <el-avatar :size="40" :src="circleUrl" />用户名
-      </div>
     </div>
     <div class="main">
       <div class="mainBox">
@@ -70,120 +52,10 @@
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.homeBox {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  .nav {
-    width: 100%;
-    height: 8vh;
-    background-color: #fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 
-    div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .loogText {
-      font-size: 30px;
-      margin-left: 10px;
-    }
-  }
-  .main {
-    width: 100%;
-    //占满的剩余空间
-    flex: 1;
-    background-color: #ededed;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .mainBox {
-      width: 97%;
-      height: 97%;
-      background-color: #fff;
-      border-radius: 10px;
-      display: flex;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 20px;
-      .topicInfo {
-        // animation-duration: 2s;
-        // animation-delay: 250ms;
-        width: 30%;
-        height: 100%;
-        // background-color: #f0f9cc;
-        overflow: hidden;
-        position: relative;
-        background-image: url("@/assets/image/tibg.jpg");
-        background-size: cover; // 背景图片铺满元
-        // background-position: center; // 背景图片居中显示
-        background-repeat: no-repeat; // 背景图片不重复
-        background-position: left left;
-        .topicInfoItem {
-          // top: -10px;
-          // animation-duration: 2s;
-          // animation-delay: 250ms;
-          height: 100%;
-          width: 100%;
-          box-sizing: content-box;
-          // border: 1px solid red;
-        }
-      }
-      .topicAnswer {
-        width: 69%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .SelectAnswer {
-          width: 97%;
-          margin: 0 auto;
-          border-bottom: 1px #43cf7c solid;
-          height: 7%;
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-        }
-        .answerInfo {
-          width: 100%;
-          height: 92%;
-          box-sizing: border-box;
-          padding: 20px;
-          // background-color: #f0f9cc;
-          background-image: url("@/assets/image/tibg.jpg");
-          background-size: cover; // 背景图片铺满元
-          background-position: center; // 背景图片居中显示
-          background-repeat: no-repeat; // 背景图片不重复
-        }
-        // background-color: #F0F9CC;
-      }
-    }
-  }
-}
-.selectInput {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding: 7px 10px;
-  border: 2px #000000 solid;
-  border-radius: 30px;
-  input {
-    background-color: #00000000; /* 透明背景 */
-    border: none; /* 无边框 */
-    outline: none; /* 去除聚焦时的轮廓 */
-    padding: 0; /* 无内边距 */
-    margin: 0; /* 无外边距 */
-    width: 100%;
-  }
-}
-</style>
 <script setup>
 import { reactive, ref, onMounted } from "vue";
+import xuauaHeader from "@/components/Xuaua_header.vue";
 import TopicBox from "@/components/TopicBox.vue";
 import VideoBox from "@/components/VideoBox.vue";
 import TypeSelect from '@/components/TypeSelect.vue'
@@ -307,3 +179,98 @@ onMounted(async () => {
   console.log("topicInfo", topicInfo);
 });
 </script>
+<style lang="scss" scoped>
+.homeBox {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .main {
+    width: 100%;
+    //占满的剩余空间
+    flex: 1;
+    background-color: #ededed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .mainBox {
+      width: 97%;
+      height: 97%;
+      background-color: #fff;
+      border-radius: 10px;
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 20px;
+      .topicInfo {
+        // animation-duration: 2s;
+        // animation-delay: 250ms;
+        width: 30%;
+        height: 100%;
+        // background-color: #f0f9cc;
+        overflow: hidden;
+        position: relative;
+        background-image: url("@/assets/image/tibg.jpg");
+        background-size: cover; // 背景图片铺满元
+        // background-position: center; // 背景图片居中显示
+        background-repeat: no-repeat; // 背景图片不重复
+        background-position: left left;
+        .topicInfoItem {
+          // top: -10px;
+          // animation-duration: 2s;
+          // animation-delay: 250ms;
+          height: 100%;
+          width: 100%;
+          box-sizing: content-box;
+          // border: 1px solid red;
+        }
+      }
+      .topicAnswer {
+        width: 69%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .SelectAnswer {
+          width: 97%;
+          margin: 0 auto;
+          border-bottom: 1px #43cf7c solid;
+          height: 7%;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+        }
+        .answerInfo {
+          width: 100%;
+          height: 92%;
+          box-sizing: border-box;
+          padding: 20px;
+          // background-color: #f0f9cc;
+          background-image: url("@/assets/image/tibg.jpg");
+          background-size: cover; // 背景图片铺满元
+          background-position: center; // 背景图片居中显示
+          background-repeat: no-repeat; // 背景图片不重复
+        }
+        // background-color: #F0F9CC;
+      }
+    }
+  }
+}
+.selectInput {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 7px 10px;
+  border: 2px #000000 solid;
+  border-radius: 30px;
+  input {
+    background-color: #00000000; /* 透明背景 */
+    border: none; /* 无边框 */
+    outline: none; /* 去除聚焦时的轮廓 */
+    padding: 0; /* 无内边距 */
+    margin: 0; /* 无外边距 */
+    width: 100%;
+  }
+}
+</style>

src/views/login/index.vue

@@ -1,11 +1,30 @@
 <template>
   <div class="loginBox">
     <div class="loginFrom">
-      <div class="inputBox">账号<input type="text" v-model="user.username" /></div>
+      <!-- <div class="inputBox">
-      <div class="inputBox">密码<input type="password" v-model="user.password" /></div>
+        账号<input type="text" v-model="user.username" />
-      <div class="checkBox"><el-checkbox v-model="remember"></el-checkbox>记住密码</div>
+      </div>
+      <div class="inputBox">
+        密码<input type="password" v-model="user.password" />
+      </div>
+      <div class="checkBox">
+        <el-checkbox v-model="remember"></el-checkbox>记住密码
+      </div> -->
+      <el-form >
+        <el-form-item label="账号" prop="username" >
+          <el-input  style="width: 200px;height: 30px;border-radius: 15px;" class="inputBox" type="medium" v-model="user.username" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password" >
+          <el-input style="width: 200px;height: 30px;border-radius: 15px;"   v-model="user.password" type="password" />
+        </el-form-item>
+        <el-form-item>
+          <el-checkbox v-model="remember">记住密码</el-checkbox>
+        </el-form-item>
+      </el-form>
       <div class="btnBox">
-        <el-button size="large" type="success" round @click="toLogin">登录</el-button>
+        <el-button size="large" type="success" round @click="toLogin"
+          >登录</el-button
+        >
         <el-button
           size="large"
           type="danger"
@@ -47,9 +66,9 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm(ruleFormRef)">
+        <el-button type="primary" @click="submitForm(ruleFormRef)"
-          注册
+          >注册</el-button
-        </el-button>
+        >
       </div>
     </template>
   </el-dialog>
@@ -57,90 +76,87 @@
 
 <style lang="scss" scoped>
 .loginBox {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background-image: url("@/assets/image/loginbg.jpg");
-  background-size: cover; // 背景图片铺满元素
+  background-size: cover;
-  background-position: center; // 背景图片居中显示
+  background-position: center;
-  background-repeat: no-repeat; // 背景图片不重复
+  background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
+  // padding: 0 20px;
 }
-input {
+
-  background-color: #00000000; /* 透明背景 */
-  border: none; /* 无边框 */
-  outline: none; /* 去除聚焦时的轮廓 */
-  padding: 0; /* 无内边距 */
-  margin: 0; /* 无外边距 */
-  width: 70%;
-  height: 20px;
-  font-size: 20px;
-  /* 其他样式可以根据需要添加 */
-}
-.inputBox {
-  width: 90%;
-  height: 2vw;
-  background-color: #ff1c1c00;
-  border: 1px #000 solid;
-  border-radius: 20px;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-input:focus {
-  border-bottom: 1px solid #000000;
-}
-.checkBox {
-  width: 90%;
-  color: #000;
-  font-size: 12px;
-}
-.btnBox {
-  // div{
-  //     width: 30%;
-  // }
-  width: 87%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  // background-color: #000;
-}
 .loginFrom {
-  width: 27vw;
+  width: 100%;
-  height: 30vh;
+  max-width: 400px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+  // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
-  margin: 0 auto;
+}
+
+// .inputBox {
+  
+//   // margin-bottom: 20px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+// }
+
+
+
+el-input{
+  height: 40px;
+}
+
+.checkBox {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.btnBox {
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.dialog-footer {
+  text-align: right;
 }
 </style>
+
 <script setup>
 import { ElMessage } from "element-plus";
-import 'element-plus/theme-chalk/el-message.css'
+import "element-plus/theme-chalk/el-message.css";
 import { login, register } from "@/api/user/user";
-import  storage  from '@/utils/Sotrage'
+import storage from "@/utils/Sotrage";
-import TokenService from '@/utils/token'
+import TokenService from "@/utils/token";
-import router from '@/router'
+import router from "@/router";
 import { ref, reactive, onMounted } from "vue";
+
 const user = reactive({
   username: "",
   password: "",
 });
-//是否记住密码
+
 const remember = ref(false);
+
 const toLogin = async () => {
-  console.log(user);
+  if (user.username === "" || user.password === "") {
-  if(user.username===""||user.username===null||user.password===""||user.password===null){
+    ElMessage({ message: "请输入完整信息", type: "warning" });
-      ElMessage({ message: "请输入完整信息", type: 'warning' })
+    return;
   }
 
   let res = await login(user);
   if (res.code === 200) {
-  ElMessage({ message: "登录成功", type: 'success' })
+    ElMessage({ message: "登录成功", type: "success" });
     if (remember.value) {
       storage.setStorage("username", user.username);
       storage.setStorage("password", user.password);
@@ -148,84 +164,78 @@ if(res.code===200){
       storage.removeStorage("username");
       storage.removeStorage("password");
     }
-  TokenService.saveToken(res.token)
+    TokenService.saveToken(res.token);
-  //跳转
+    router.push("/");
-  router.push('/');
   }
 };
-//表单弹窗开关
+
 const dialogFormVisible = ref(false);
 const ruleFormRef = ref(null);
-//注册表单信息
+
 const ruleForm = reactive({
   username: "",
   password: "",
   password2: "",
 });
-//表单验证
+
 const usernamevalidate = (rule, value, callback) => {
-  if (value === ""||value==null) {
+  if (value === "") {
     callback(new Error("请输入账号"));
-  }
+  } else {
     callback();
+  }
 };
+
 const validatePass = (rule, value, callback) => {
   if (value === "") {
     callback(new Error("请输入密码"));
-  }
+  } else {
-  else {
     if (ruleForm.password !== "") {
       if (!ruleFormRef.value) return;
-      ruleFormRef.value.validateField("密码不一致");
+      ruleFormRef.value.validateField("password2");
     }
     callback();
   }
 };
+
 const validatePass2 = (rule, value, callback) => {
   if (value === "") {
     callback(new Error("请输入确认密码"));
-  }
+  } else if (value !== ruleForm.password) {
-  else if (value !== ruleForm.password) {
     callback(new Error("密码不一致"));
-  }
+  } else {
-  else {
     callback();
   }
 };
-//注册表单验证规则
+
 const rules = reactive({
-  username: [
+  username: [{ validator: usernamevalidate, trigger: "blur" }],
-    {
-      //   type: "String",
-      validator: usernamevalidate,
-      trigger: "blur",
-    },
-  ],
   password: [{ validator: validatePass, trigger: "blur" }],
   password2: [{ validator: validatePass2, trigger: "blur" }],
 });
-//提交注册
+
 const submitForm = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid) => {
     if (valid) {
-      // console.log("submit!");
+      let res = await register({
-      let res =await register({username:ruleForm.username,password:ruleForm.password});
+        username: ruleForm.username,
+        password: ruleForm.password,
+      });
       if (res.code === 200) {
-        ElMessage({ message: "注册成功", type: 'success' })
+        ElMessage({ message: "注册成功", type: "success" });
         dialogFormVisible.value = false;
       } else {
-        ElMessage({ message: res.msg, type: 'error' })
+        ElMessage({ message: res.msg, type: "error" });
       }
-    }
+    } else {
-    else {
       console.log("error submit!");
     }
   });
 };
+
 onMounted(() => {
-  console.log("onMounted");
+  user.username = storage.getStorage("username") || "";
-  user.username=storage.getStorage("username");
+  user.password = storage.getStorage("password") || "";
-  user.password=storage.getStorage("password");
 });
 </script>