优化状态栏

This commit is contained in:
Strange 2024-07-17 19:35:14 +08:00
parent 8f92dc3ed3
commit bdae2cbd63
6 changed files with 326 additions and 257 deletions

View File

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

View File

@ -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"
}
}

View File

@ -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>

View File

@ -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 })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')

View File

@ -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">
<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>
<xuaua-header></xuaua-header>
</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>

View File

@ -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">密码<input type="password" v-model="user.password" /></div>
<div class="checkBox"><el-checkbox v-model="remember"></el-checkbox>记住密码</div>
<!-- <div class="inputBox">
账号<input type="text" v-model="user.username" />
</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"
@ -46,10 +65,10 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible=false">取消</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)">
注册
</el-button>
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>注册</el-button
>
</div>
</template>
</el-dialog>
@ -57,175 +76,166 @@
<style lang="scss" scoped>
.loginBox {
width: 100vw;
width: 100%;
height: 100vh;
background-image: url("@/assets/image/loginbg.jpg");
background-size: cover; //
background-position: center; //
background-repeat: no-repeat; //
background-size: cover;
background-position: center;
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;
height: 30vh;
width: 100%;
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 { login , register } from "@/api/user/user";
import storage from '@/utils/Sotrage'
import TokenService from '@/utils/token'
import router from '@/router'
import { ref, reactive,onMounted } from "vue";
const user=reactive({
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import { login, register } from "@/api/user/user";
import storage from "@/utils/Sotrage";
import TokenService from "@/utils/token";
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.username===null||user.password===""||user.password===null){
ElMessage({ message: "请输入完整信息", type: 'warning' })
if (user.username === "" || user.password === "") {
ElMessage({ message: "请输入完整信息", type: "warning" });
return;
}
let res=await login(user);
if(res.code===200){
ElMessage({ message: "登录成功", type: 'success' })
if(remember.value){
storage.setStorage("username",user.username);
storage.setStorage("password",user.password);
}else{
let res = await login(user);
if (res.code === 200) {
ElMessage({ message: "登录成功", type: "success" });
if (remember.value) {
storage.setStorage("username", user.username);
storage.setStorage("password", user.password);
} else {
storage.removeStorage("username");
storage.removeStorage("password");
}
TokenService.saveToken(res.token)
//
router.push('/');
}
TokenService.saveToken(res.token);
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: [
{
// type: "String",
validator: usernamevalidate,
trigger: "blur",
},
],
username: [{ validator: usernamevalidate, trigger: "blur" }],
password: [{ validator: validatePass, trigger: "blur" }],
password2: [{ validator: validatePass2, trigger: "blur" }],
});
//
const submitForm = (formEl) => {
if (!formEl) return;
formEl.validate(async(valid) => {
formEl.validate(async (valid) => {
if (valid) {
// console.log("submit!");
let res =await register({username:ruleForm.username,password:ruleForm.password});
if(res.code===200){
ElMessage({ message: "注册成功", type: 'success' })
dialogFormVisible.value=false;
}else{
ElMessage({ message: res.msg, type: 'error' })
let res = await register({
username: ruleForm.username,
password: ruleForm.password,
});
if (res.code === 200) {
ElMessage({ message: "注册成功", type: "success" });
dialogFormVisible.value = false;
} else {
ElMessage({ message: res.msg, type: "error" });
}
}
else {
} else {
console.log("error submit!");
}
});
};
onMounted(() => {
console.log("onMounted");
user.username=storage.getStorage("username");
user.password=storage.getStorage("password");
user.username = storage.getStorage("username") || "";
user.password = storage.getStorage("password") || "";
});
</script>