项目详情基本完善
This commit is contained in:
@@ -70,7 +70,7 @@
|
||||
</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()" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||||
<el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||||
<UserInfo></UserInfo>
|
||||
</el-card>
|
||||
|
||||
@@ -103,127 +103,8 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 登录注册-->
|
||||
<LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
|
||||
<!--管理标签弹框-->
|
||||
<el-dialog
|
||||
:visible.sync="manageCategoryVisible"
|
||||
@@ -237,19 +118,20 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。
|
||||
总共:
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Vue from "vue";
|
||||
import ProjectList from "@/components/Home/ProjectList.vue";
|
||||
import UserInfo from "@/components/Home/UserInfo.vue";
|
||||
import LoginDialog from "@/components/Home/LoginDialog.vue";
|
||||
|
||||
export default {
|
||||
name: "HomeComponent",
|
||||
components: {UserInfo, ProjectList},
|
||||
components: {LoginDialog, UserInfo, ProjectList},
|
||||
|
||||
data() {
|
||||
return {
|
||||
@@ -264,31 +146,7 @@ export default {
|
||||
count: 10,
|
||||
loading: false,
|
||||
loginDialogVisible: false,
|
||||
registerDialogVisible: false,
|
||||
manageCategoryVisible: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：规则，o：失去焦点触发
|
||||
{required: true, message: "请输入用户名", trigger: "blur"},
|
||||
],
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
tags:null,
|
||||
};
|
||||
},
|
||||
@@ -300,17 +158,6 @@ export default {
|
||||
this.getProjectTotal();
|
||||
},
|
||||
created() {
|
||||
// if (sessionStorage.getItem('current_name') == null){
|
||||
// this.activeIndex = '综合'
|
||||
// }else{
|
||||
// this.activeIndex = sessionStorage.getItem('current_name')
|
||||
// }
|
||||
// },
|
||||
// beforeRouteLeave(to, from, next){
|
||||
// // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
|
||||
// // 根据个人需求决定清除的时间
|
||||
// sessionStorage.removeItem('currentTab')
|
||||
// next()
|
||||
},
|
||||
computed: {
|
||||
noMore() {
|
||||
@@ -328,186 +175,7 @@ export default {
|
||||
// this.$cookie.delete('username')
|
||||
// this.$cookie.delete('password')
|
||||
},
|
||||
closeLogin() {
|
||||
this.loginDialogVisible = false;
|
||||
},
|
||||
openResister() {
|
||||
this.registerDialogVisible = true;
|
||||
},
|
||||
closeRegister() {
|
||||
this.registerDialogVisible = false;
|
||||
},
|
||||
// ******登录*****
|
||||
// account() {
|
||||
// this.ruleForm.username = this.getCookie("username");
|
||||
// this.ruleForm.password = this.getCookie("password");
|
||||
// this.CookieUserName=this.getCookie("username");
|
||||
// },
|
||||
// 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) {
|
||||
var _this=this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//存入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) {
|
||||
_this.$cookie.set('username',_this.ruleForm.username,7);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
window.location.reload();
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
});
|
||||
} 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(() => {
|
||||
@@ -632,40 +300,40 @@ export default {
|
||||
}).then((res)=>{
|
||||
that.projectTotal=res.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-scrollbar__wrap {
|
||||
<style scoped>
|
||||
::v-deep .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/*去掉切换时el-tab-pane底部的蓝色下划线*/
|
||||
.el-tabs__active-bar {
|
||||
::v-deep .el-tabs__active-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/*去掉tabs底部的下划线*/
|
||||
.el-tabs__nav-wrap::after {
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
position: static !important;
|
||||
}
|
||||
.el-tabs__item:hover{
|
||||
::v-deep .el-tabs__item:hover{
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.el-tabs__item{
|
||||
::v-deep .el-tabs__item{
|
||||
text-align: center;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
::v-deep .el-tabs__nav{
|
||||
/*margin-left: 7px;*/
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-y: hidden;
|
||||
::v-deep .el-scrollbar__wrap {
|
||||
/*overflow-y: hidden;*/
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
304
src/components/Home/LoginDialog.vue
Normal file
304
src/components/Home/LoginDialog.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--登录弹框-->
|
||||
<el-dialog
|
||||
title="登录"
|
||||
:visible.sync="loginDialogVisible"
|
||||
width="25vw"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="modalClose">
|
||||
<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" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<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"
|
||||
append-to-body
|
||||
:close-on-click-modal="false">
|
||||
<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;display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button type="primary" @click="resisterForm('resisterRuleForm')"
|
||||
>注册
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name: "LoginDialog",
|
||||
props:{
|
||||
loginDialogVisible:Boolean
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
// 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：规则，o：失去焦点触发
|
||||
{required: true, message: "请输入用户名", trigger: "blur"},
|
||||
],
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
submitForm(formName) {
|
||||
var _this=this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//存入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) {
|
||||
_this.$cookie.set('username',_this.ruleForm.username,7);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
_this.$emit('update:loginDialogVisible', false);
|
||||
setTimeout(()=>{
|
||||
window.location.reload();
|
||||
},2000)
|
||||
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
resisterForm(formName) {
|
||||
var _this=this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//调用方法提交
|
||||
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
|
||||
});
|
||||
_this.registerDialogVisible=false;
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
// console.log(res);
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
//点击图片更换验证码
|
||||
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";
|
||||
}
|
||||
},
|
||||
registerFun() {
|
||||
this.$emit('update:loginDialogVisible', false);
|
||||
this.registerDialogVisible = true;
|
||||
},
|
||||
loginFun() {
|
||||
this.$emit('update:loginDialogVisible', true);
|
||||
this.registerDialogVisible = false;
|
||||
},
|
||||
modalClose() {
|
||||
this.$emit('update:loginDialogVisible', false); // 直接修改父组件的属性
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="ProjectList">
|
||||
<div class="ProjectList" @click="goProjectDetail">
|
||||
<div class="projectIco">
|
||||
<img :src="projectLists.projectIco" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
|
||||
</div>
|
||||
@@ -55,6 +55,17 @@ export default {
|
||||
// 截取文章内容的前 35 个字，并加上省略号
|
||||
brief: function() {
|
||||
return this.projectLists.projectDescription.substr(0, 33) + '...';
|
||||
},
|
||||
|
||||
},
|
||||
methods:{
|
||||
goProjectDetail(){
|
||||
this.$router.push({
|
||||
path:'/ProjectDetail',
|
||||
query: {
|
||||
id: this.projectLists.projectId,
|
||||
}})
|
||||
// console.log(this.$route.query.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,7 +116,12 @@ export default {
|
||||
}
|
||||
}).then((res)=>{
|
||||
// console.log(res.data);
|
||||
that.historySearch=res.data;
|
||||
if(res.data.code===500){
|
||||
return;
|
||||
}else{
|
||||
that.historySearch=res.data;
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
handleClose(tag){
|
||||
|
||||
@@ -14,10 +14,10 @@
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;align-items: center">
|
||||
<span style="font-size: 10px;color: #9ca3af">贡献值</span>
|
||||
<span style="font-weight: bold;color: #59A3A4;font-size: 20px">0/100</span>
|
||||
<span style="font-weight: bold;color: #59A3A4;font-size: 20px">{{ContributionValue}}/100</span>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<el-progress :text-inside="true" :stroke-width="15" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="15" :percentage="ContributionValue"></el-progress>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;">
|
||||
@@ -28,13 +28,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "UserInfo",
|
||||
data(){
|
||||
return{
|
||||
switchValue:false,
|
||||
ContributionValue:0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getContributionValue();
|
||||
},
|
||||
methods:{
|
||||
signOut(){
|
||||
this.$cookie.delete('username');
|
||||
@@ -42,6 +48,26 @@ export default {
|
||||
},
|
||||
toUserPage(){
|
||||
this.$router.push({path:'/UserInfoPage'})
|
||||
},
|
||||
getContributionValue(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/contributionValue',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
|
||||
}
|
||||
}).then((res)=>{
|
||||
// console.log(res);
|
||||
if(res.data.code===500){
|
||||
return;
|
||||
}else{
|
||||
that.ContributionValue=res.data;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,373 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||||
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
|
||||
<div class="PageHeader">
|
||||
<br/>
|
||||
<el-page-header @back="goBack" style="justify-content: center;">
|
||||
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
|
||||
<div slot="content" style="font-size:23px;font-weight: 600;">
|
||||
项目详情
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
<div class="PageContent">
|
||||
<el-card class="box-card" style="border: none">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||||
<el-avatar shape="square" :size="70" :src="projectIco"></el-avatar>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
|
||||
<span v-if="projectName" style="font-size: 30px;color: black;font-weight: bold;display: flex;justify-content: flex-start">
|
||||
{{ projectName }}
|
||||
</span>
|
||||
<span style="font-size: 20px;color: rgb(107 114 128);">
|
||||
{{projectTitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-divider direction="vertical" ></el-divider>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-between">
|
||||
<span style="font-size: 14px;color: #6b7280;display: flex;justify-content: flex-start">
|
||||
HelloGitHub 评分
|
||||
</span>
|
||||
<el-rate v-model="starValue" style="display: flex;justify-content: flex-start" disabled show-score></el-rate>
|
||||
<span style="font-size: 12px;color: #59A3A4;display: flex;justify-content: flex-start">
|
||||
0 人评分
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between">
|
||||
<div style="width: 250px;height: 60px;background-color: #59A3A4">
|
||||
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||||
<el-dropdown>
|
||||
<el-button type="primary" style="height: 60px">
|
||||
访问<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item><el-link :href="projectUrl">源码</el-link></el-dropdown-item>
|
||||
<el-dropdown-item>下载</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off">点 赞 {{startNum}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center" >
|
||||
<span>开源</span><div style="width: 8px;height: 8px;background-color: #9ca3af;border-radius: 50px;margin-left: 5px"></div>
|
||||
<span style="margin-left: 5px">Apache-2.0</span>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
|
||||
<el-link icon="el-icon-chat-dot-square">评论</el-link>
|
||||
<el-link icon="el-icon-share" style="margin-left: 5px">分享 </el-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;margin-top: 20px">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item name="1">
|
||||
<template slot="title">
|
||||
<table>
|
||||
<tr>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">星数</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">中文</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">主语言</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">活跃</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">贡献者</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">512</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">是</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">C++</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">是</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">28</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Issues</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">组织</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">最新版本</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Forks</th>
|
||||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">协议</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">4</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">是</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">1.6.7</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">92</td>
|
||||
<td style="font-size: 20px;color: black;font-weight: bold">Apache-2.0</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="介绍" name="first">
|
||||
<quill-editor :editorOption="editorOption" :value="projectDescription" :disabled="true"></quill-editor>
|
||||
<div style="display:flex;align-items: center;flex-direction: row;">
|
||||
<span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
|
||||
<div style="display: flex;flex-direction: row;margin-left: 10px;margin-top: 10px;align-items: center">
|
||||
<span>标签: </span>
|
||||
<div style="margin-left: 10px">
|
||||
<el-tag v-for="(item,index) in CategoryName" :key="index" size="medium" style="margin-left: 10px">{{item}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="代码" name="second">
|
||||
<quill-editor :editorOption="editorOption" :disabled="true"></quill-editor>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 10px;border: none">
|
||||
<div slot="header" class="clearfix" style="display: flex;justify-content: flex-start">
|
||||
<span style="font-size: 24px;font-weight: bold">评论</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
|
||||
<div style="width: 50px;height: 50px">
|
||||
<el-avatar :size="50">{{this.$cookie.get('username')}}</el-avatar>
|
||||
</div>
|
||||
<el-input
|
||||
style="margin-left: 10px"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;margin-top: 10px;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row">
|
||||
<el-radio v-model="radio" label="0" style="margin-left: 60px">没用过</el-radio>
|
||||
<el-radio v-model="radio" label="1" style="margin-left: -10px">用过</el-radio>
|
||||
</div>
|
||||
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;margin-left: -500px">
|
||||
<span>评 分:</span>
|
||||
<el-rate
|
||||
style="margin-left: 10px"
|
||||
v-model="startValue"
|
||||
show-text>
|
||||
</el-rate>
|
||||
</div>
|
||||
<el-button type="primary" plain @click="publishComment">发布</el-button>
|
||||
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
|
||||
<span style="font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-star-on" size="small">最新</el-button>
|
||||
<el-button type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: row">
|
||||
<div style="width: 50px;height: 50px;">
|
||||
<el-avatar :size="50">{{item.username}}</el-avatar>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
|
||||
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
|
||||
<span style="margin-left: 10px">评分: </span>
|
||||
<el-rate
|
||||
style="margin-left: 10px"
|
||||
v-model="item.star" disabled>
|
||||
</el-rate>
|
||||
<span style="margin-left: 10px">
|
||||
|
||||
<el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
|
||||
<el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-left: 10px;margin-top: 5px">
|
||||
<el-card style="border: none;text-align:left;">
|
||||
<span>{{item.content}}</span>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-start;margin-left: 10px;margin-top: 5px">
|
||||
<span style="font-size: 14px;color: #9ca3af">{{item.time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;margin-left: 20px;margin-top: 7vh;flex-direction: column">
|
||||
<el-card class="box-card" style="width: 13vw;height: auto;border: none">
|
||||
<el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||||
<LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
|
||||
<UserInfo></UserInfo>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import UserInfo from "@/components/Home/UserInfo.vue";
|
||||
import LoginDialog from "@/components/Home/LoginDialog.vue";
|
||||
|
||||
export default {
|
||||
name: "ProjectDetail"
|
||||
name: "ProjectDetail",
|
||||
components: {LoginDialog, UserInfo},
|
||||
data(){
|
||||
return{
|
||||
starValue:null,
|
||||
activeNames: ['1'],
|
||||
activeName:'first',
|
||||
loginDialogVisible:false,
|
||||
editorOption: {
|
||||
theme: 'bubble',
|
||||
modules: {
|
||||
toolbar: null,
|
||||
},
|
||||
},
|
||||
textarea:'',
|
||||
radio:'0',
|
||||
startValue: 0,
|
||||
CategoryName:null,
|
||||
projectName:null,
|
||||
projectTitle:null,
|
||||
projectUrl:null,
|
||||
startNum:null,
|
||||
projectDescription:null,
|
||||
projectIco:null,
|
||||
periodicals:null,
|
||||
userId:null,
|
||||
projectId:null,
|
||||
commentContent:[],
|
||||
commentNum:0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getProjectDetail();
|
||||
this.getComment();
|
||||
|
||||
},
|
||||
methods:{
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
},
|
||||
getProjectDetail(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectProById',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id
|
||||
}
|
||||
}).then(function (res) {
|
||||
// console.log(res);
|
||||
that.CategoryName=res.data.CategoryName;
|
||||
that.projectName=res.data.project.projectName;
|
||||
that.projectTitle=res.data.project.projectTitle;
|
||||
that.projectUrl=res.data.project.projectUrl;
|
||||
that.startNum=res.data.project.startNum;
|
||||
that.projectDescription=res.data.project.projectDescription;
|
||||
that.projectIco=res.data.project.projectIco;
|
||||
that.periodicals=res.data.project.periodicals;
|
||||
that.userId=res.data.project.userId;
|
||||
that.projectId=res.data.project.projectId;
|
||||
|
||||
});
|
||||
},
|
||||
openLogin(){
|
||||
this.loginDialogVisible=true;
|
||||
},
|
||||
getComment(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentByPro',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id
|
||||
}
|
||||
}).then(function (res) {
|
||||
that.commentContent=res.data;
|
||||
that.commentNum=Object.keys(that.commentContent).length;
|
||||
});
|
||||
},
|
||||
publishComment(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/comment',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:that.$route.query.id,
|
||||
star:that.startValue,
|
||||
content:that.textarea,
|
||||
isUsed: that.radio,
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
::v-deep .el-page-header__left{
|
||||
left:-300px;
|
||||
}
|
||||
::v-deep .el-divider--vertical {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: auto;
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .el-collapse-item__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
line-height: 48px;
|
||||
background-color: #FFFFFF;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #D0E0DB;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: border-bottom-color .3s;
|
||||
outline: none;
|
||||
}
|
||||
::v-deep .ql-toolbar.ql-snow {
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
padding: 8px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,36 @@
|
||||
<template>
|
||||
<div style="margin-top: 30px">
|
||||
个人主页
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||||
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
|
||||
<div class="PageHeader">
|
||||
<br/>
|
||||
<el-page-header @back="goBack" style="justify-content: center;">
|
||||
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
|
||||
<div slot="content" style="font-size:23px;font-weight: 600;">
|
||||
个人主页
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
<div class="PageContent">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserInfoPage"
|
||||
name: "UserInfoPage",
|
||||
methods: {
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
::v-deep .el-page-header__left{
|
||||
left:-300px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user