HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页项目列表展示效果优化

Browse Source
This commit is contained in:
landaiqing
2023-06-30 21:12:35 +08:00
parent 69c7e0a0f6
commit a7cf93d3e7
6 changed files with 136 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/Home/Header.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="header">
<div class="logo-all">
<img class="logo" src="../../assets/logo/logo.png">
<span class="HeaderWord">HelloGithub</span>
</div>
<el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
active-text-color="#42b983"
router>
<el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
<el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
<el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
</el-menu-item>
<el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
</el-menu>
<SearchInput class="HeaderInput"></SearchInput>
<el-button class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
</div>
</template>
<script>
import SearchInput from "@/components/SearchInput.vue";
export default {
name: "HeaderComponent",
components: {SearchInput},
data() {
return {}
}
}
</script>
<style scoped>
/*适用于小屏幕，手持设备*/
/*@media(orientation: portrait){*/
/* .logo-all {*/
/* height: 20px;*/
/* width: 10vw;*/
/* display: flex;*/
/* align-items: center;*/
/* background-color: #ff4949;*/
/* margin-left:1vw;*/
/* }*/
/* .logo {*/
/* width: 20px;*/
/* height: 20px;*/
/* border-radius: 6px;*/
/* }*/
/* .HeaderWord{*/
/* cursor: pointer;*/
/* margin-left: 5px;*/
/* font-size: 80%;*/
/* font-weight: bold;*/
/* font-family:'楷体';*/
/* }*/
/* .header {*/
/* display: flex;*/
/* flex-direction: row;*/
/* align-items: center;*/
/* !*justify-content: space-evenly;*!*/
/* }*/
/* .el-menu {*/
/* font-weight: bold;*/
/* font-size: 5px;*/
/* display: flex;*/
/* justify-content: space-evenly;*/
/* width: 10vw;*/
/* }*/
/* .menu-item {*/
/* width: 2vw;*/
/* font-size:2px;*/
/* }*/
/* .HeaderInput{*/
/* width:15vw;*/
/* font-size:1px;*/
/* }*/
/* .HeaderSubmitBtn{*/
/* }*/
/*}*/
@media(orientation: landscape){
.logo-all {
height: 60px;
width: 12vw;
display: flex;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
border-radius: 50px;
}
.HeaderWord{
cursor: pointer;
margin-left: 5px;
font-size: 150%;
font-weight: bold;
font-family:'楷体';
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.el-menu {
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: space-evenly;
width: 30vw;
}
.menu-item {
width: 6vw;
}
}
</style>

449
src/components/Home/Home.vue Normal file
View File

@@ -0,0 +1,449 @@
<template>
<el-container style="display: flex;flex-direction: row;">
<el-aside width="22vw" style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
<template>
<el-card class="box-card" style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
<div slot="header" class="clearfix">
<span><i class="el-icon-menu"></i> 热门标签</span>
</div>
<div class="bottom clearfix">
<div v-for="o in 4" :key="o" class="text item">
<el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
</div>
<div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
<div>
<i class="el-icon-setting"></i>
<el-button type="text" class="button">管理标签</el-button>
</div>
</div>
</el-card>
</template>
</el-aside>
<el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
<template>
<div>
<el-tabs type="border-card" style="width: 45vw;">
<el-tab-pane label="最热" style="display: flex;justify-content: flex-start">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
<ProjectList></ProjectList>
</ol>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</el-tab-pane>
<el-tab-pane label="最新">
<div class="lsm-container">
<el-scrollbar class="scrollbar-wrapper" style="position: relative;">
<div class="infinite-list-wrapper">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
<ProjectList></ProjectList>
</ol>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</div>
</el-scrollbar>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
<el-card class="box-card" style="width: 13vw">
<el-button type="info" plain @click="openLogin()">登 录</el-button>
</el-card>
<el-card class="box-card" style="margin-top: 20px;width: 13vw">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{ '列表内容 ' + o }}
</div>
</el-card>
</div>
</template>
<!--登录弹框-->
<el-dialog
title="登录"
:visible.sync="loginDialogVisible"
width="25vw">
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
<el-form-item prop="username">
<!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
<el-input
prefix-icon="el-icon-user"
v-model="ruleForm.username"
placeholder="用户名"
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item prop="password">
<!-- type：密码显示* -->
<el-input
prefix-icon="el-icon-unlock"
:type="passwordVisible"
v-model="ruleForm.password"
placeholder="密码"
auto-complete="new-password"
>
<i slot="suffix" :class="icon" @click="showPass"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
<el-input
prefix-icon="el-icon-mobile-phone"
type="text"
placeholder="点击图片更换验证码"
v-model="ruleForm.code"
class="vertify_code"
auto-complete="false"
style="width: 15.8vw"
></el-input>
<!-- <span class="code">验证码</span> -->
<img :src="imageUrl" @click="resetImg" class="vertify_img"/>
</el-form-item>
<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
<el-form-item prop="remember">
<el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
</el-form-item>
<el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
</div>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')"
>登录
</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
</el-form>
</div>
</el-dialog>
<!--注册弹框-->
<el-dialog
title="注册"
:visible.sync="registerDialogVisible"
width="25vw">
<div>
<el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
<el-form-item prop="username">
<!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
<el-input
prefix-icon="el-icon-user"
v-model="resisterRuleForm.username"
placeholder="用户名"
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item prop="password">
<!-- type：密码显示* -->
<el-input
prefix-icon="el-icon-unlock"
:type="passwordVisible"
v-model="resisterRuleForm.password"
placeholder="密码"
auto-complete="new-password"
>
<i slot="suffix" :class="icon" @click="showPass"></i>
</el-input>
</el-form-item>
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
<el-input
prefix-icon="el-icon-mobile-phone"
type="text"
placeholder="点击图片更换验证码"
v-model="resisterRuleForm.code"
class="vertify_code"
auto-complete="false"
style="width: 15.8vw"
></el-input>
<!-- <span class="code">验证码</span> -->
<img :src="imageUrl" @click="resetImg" class="vertify_img"/>
</el-form-item>
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
<!-- <el-form-item prop="remember">-->
<!-- <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
<!-- </el-form-item>-->
<el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
</div>
<div class="login-btn" style="margin-top: 10px;">
<el-button type="primary" @click="resisterForm('resisterRuleForm')"
>注册
</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
</el-form>
</div>
</el-dialog>
</el-main>
</el-container>
</template>
<script>
import axios from 'axios'
import Vue from "vue";
import ProjectList from "@/components/ProjectList.vue";
export default {
name: "HomeComponent",
components: {ProjectList},
data() {
return {
count: 10,
loading: false,
loginDialogVisible: false,
registerDialogVisible: false,
imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
checked: false,
passwordVisible: "password",
icon: "el-icon-view",
ruleForm: {
username: null,
password: null,
code: null,
remember:null
},
resisterRuleForm: {
username: null,
password: null,
code: null,
},
rules: {
username: [
// required：规则，trigger：失去焦点触发
{required: true, message: "请输入用户名", trigger: "blur"},
],
password: [{required: true, message: "请输入密码", trigger: "blur"}],
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
},
};
},
mounted() {
this.account(); //获取cookie的方法
},
computed: {
noMore () {
return this.count >= 20
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
openLogin(){
this.loginDialogVisible=true;
},
closeLogin(){
this.loginDialogVisible=false;
},
openResister(){
this.registerDialogVisible=true;
},
closeRegister(){
this.registerDialogVisible=false;
},
// ******登录*****
account() {
// console.log(this.getCookie("username"));
this.ruleForm.username = this.getCookie("username");
this.ruleForm.password = this.getCookie("password");
},
setCookie(c_name, c_pwd, exdate) {
//账号，密码 ，过期的天数
exdate = new Date();
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
document.cookie =
"username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
document.cookie =
"password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
},
getCookie(name) {
var arr = document.cookie.split(";");
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split("=");
if (arr2[0].trim() == name) {
return arr2[1];
}
}
},
clearCookie() {
this.setCookie("", "",-1); //清除cookie
},
// 方法
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//取参数
// let params = new URLSearchParams();
// params.append("username", this.ruleForm.username);
// params.append("password", this.ruleForm.password);
// params.append("code", this.ruleForm.code);
// params.append("remember",this.ruleForm.remember)
if (this.checked == true) {
//存入cookie
this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
} else {
this.clearCookie();
}
//调用方法提交
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
// URL 中的查询参数
params: {
username: this.ruleForm.username,
password: this.ruleForm.password,
code: this.ruleForm.code,
remember: this.ruleForm.remember,
}
}).then(function (res){
// Vue.prototype.$message({
// message: '成功！',
// type: 'success'
// });
if(res.data.code===200){
Vue.prototype.$notify({
title: '成功',
message: ('i', { style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
}
console.log(res);
});
} else {
this.closeLogin();
return false;
}
this.closeLogin();
});
},
//点击图片更换验证码
resetImg() {
this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
showPass() {
if (this.passwordVisible === "text") {
this.passwordVisible = "password";
//更换图标
this.icon = "el-icon-view";
} else {
this.passwordVisible = "text";
this.icon = "el-icon-lock";
}
},
loginFun(){
this.loginDialogVisible = true;
this.registerDialogVisible = false;
},
// ******登录方法结束*****
// ----------注册------------
registerFun() {
this.loginDialogVisible = false;
this.registerDialogVisible = true;
},
resisterForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//取参数
// let params = new URLSearchParams();
// params.append("username", this.ruleForm.username);
// params.append("password", this.ruleForm.password);
// params.append("code", this.ruleForm.code);
// params.append("remember",this.ruleForm.remember)
if (this.checked == true) {
//存入cookie
this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
} else {
this.clearCookie();
}
//调用方法提交
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
// URL 中的查询参数
params: {
username: this.resisterRuleForm.username,
password: this.resisterRuleForm.password,
code: this.resisterRuleForm.code,
}
}).then(function (res){
// Vue.prototype.$message({
// message: '成功！',
// type: 'success'
// });
if(res.data.code===200){
Vue.prototype.$notify({
title: '成功',
message: ('i', { style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
}
console.log(res);
});
} else {
this.closeRegister();
return false;
}
this.closeRegister();
});
},
//----------注册结束----------
load () {
this.loading = true
setTimeout(() => {
this.count += 2
this.loading = false
}, 2000)
}
}
}
</script>
<style>
.el-scrollbar__wrap {
overflow-x: hidden;
}
</style>