|
|
|
@ -1,64 +1,140 @@ |
|
|
|
<template> |
|
|
|
<div class="home-container"> |
|
|
|
<el-container> |
|
|
|
<el-header class="header-container" height="38"> |
|
|
|
<div> |
|
|
|
<div class="banner-container"> |
|
|
|
<el-carousel height="60px"> |
|
|
|
<el-carousel-item v-for="item in 4" :key="item"> |
|
|
|
<img style="height: 60px;" src="https://static.wenjuan.pub/1620698916041_333.jpg"> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
<img src="@/assets/images/indexLogo.png" class="header-logo-img" |
|
|
|
@click="$router.push({path:'/'})" |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="right-header"> |
|
|
|
<el-popover |
|
|
|
placement="bottom-end" |
|
|
|
width="200" |
|
|
|
trigger="click" |
|
|
|
> |
|
|
|
<div class="user-person-menu"> |
|
|
|
<div> |
|
|
|
<p v-if="getUserInfo" class="nick-name">{{ getUserInfo.name }}</p> |
|
|
|
</div> |
|
|
|
<div class="flex-row"> |
|
|
|
<div class="left-container"> |
|
|
|
<div class="userinfo-view"> |
|
|
|
<span class="hi-tips">HI.</span> |
|
|
|
<span class="name text-overflow">15080929435</span> |
|
|
|
<el-avatar class="avatar" size="small" |
|
|
|
src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/avatar.jpg" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="menu-view"> |
|
|
|
<div class="menu-item"> |
|
|
|
<font-icon class="fas fa-laptop" /> |
|
|
|
<span>工作台</span> |
|
|
|
<div class="person-menu-divider" /> |
|
|
|
<div> |
|
|
|
<p class="person-menu-item" @click="$router.push({path: '/home/member'})"> |
|
|
|
<font-icon class="fab fa-get-pocket" /> |
|
|
|
我的账户 |
|
|
|
</p> |
|
|
|
<p class="person-menu-item"> |
|
|
|
<font-icon class="fas fa-envelope" /> |
|
|
|
站内信 |
|
|
|
</p> |
|
|
|
<p class="person-menu-item"> |
|
|
|
<font-icon class="fas fa-user-circle" /> |
|
|
|
联系人 |
|
|
|
</p> |
|
|
|
<div class="person-menu-divider" /> |
|
|
|
<p class="person-menu-item" @click="logoutHandle"> |
|
|
|
<font-icon class="fas fa-sign-out" /> |
|
|
|
退出登录 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="menu-item"> |
|
|
|
<font-icon class="fas fa-clipboard" /> |
|
|
|
<span>模板中心</span> |
|
|
|
</div> |
|
|
|
<div class="menu-item"> |
|
|
|
<font-icon class="fas fa-user" /> |
|
|
|
<span>个人中心</span> |
|
|
|
</div> |
|
|
|
<div class="menu-item"> |
|
|
|
<font-icon class="fas fa-cog" /> |
|
|
|
<span>系统设置</span> |
|
|
|
<div slot="reference"> |
|
|
|
<img v-if="getUserInfo" :src="getUserInfo.avatar" class="user-avatar"> |
|
|
|
</div> |
|
|
|
</el-popover> |
|
|
|
</div> |
|
|
|
</el-header> |
|
|
|
<!-- <div class="banner-container">--> |
|
|
|
<!-- <el-carousel height="60px">--> |
|
|
|
<!-- <el-carousel-item v-for="item in 4" :key="item">--> |
|
|
|
<!-- <img style="height: 60px;" src="https://static.wenjuan.pub/1620698916041_333.jpg">--> |
|
|
|
<!-- </el-carousel-item>--> |
|
|
|
<!-- </el-carousel>--> |
|
|
|
<!-- </div>--> |
|
|
|
<el-container> |
|
|
|
<el-aside width="280px"> |
|
|
|
<el-card> |
|
|
|
<el-button class="width80" type="primary" @click="createBlankTemplate">新建项目</el-button> |
|
|
|
<div class="menu-view"> |
|
|
|
<div v-for="menu in menuList" :key="menu.route" |
|
|
|
:class="defaultActiveMenu==menu.route?'menu-item-active menu-item':'menu-item'" |
|
|
|
@click="menuClickHandle(menu)" |
|
|
|
> |
|
|
|
<font-icon :class="menu.icon" /> |
|
|
|
<span>{{ menu.name }}</span> |
|
|
|
</div> |
|
|
|
<div class="right-container"> |
|
|
|
<el-button type="primary" @click="createBlankTemplate">新建项目</el-button> |
|
|
|
<el-button>新建项目</el-button> |
|
|
|
<my-project /> |
|
|
|
</div> |
|
|
|
<div class="text-center"> |
|
|
|
<h5>加入社群</h5> |
|
|
|
<el-image |
|
|
|
style="width: 200px; height: 200px;" |
|
|
|
src="https://oss.smileyi.top/static/wx-qrcode.png" |
|
|
|
fit="fill" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-aside> |
|
|
|
<el-container> |
|
|
|
<el-main> |
|
|
|
<router-view /> |
|
|
|
</el-main> |
|
|
|
<el-footer> |
|
|
|
<div class="about-container"> |
|
|
|
<font-icon class="fas fa-user" /> |
|
|
|
<span class="desc-text">关于填鸭</span> |
|
|
|
</div> |
|
|
|
</el-footer> |
|
|
|
</el-container> |
|
|
|
</el-container> |
|
|
|
</el-container> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import MyProject from '@/views/project/MyProject' |
|
|
|
import {formConf} from '@/components/generator/config' |
|
|
|
import store from '@/store' |
|
|
|
import router from '@/router' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'NewIndex', |
|
|
|
components: { |
|
|
|
MyProject |
|
|
|
}, methods: { |
|
|
|
components: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
defaultActiveMenu: '', |
|
|
|
menuList: [ |
|
|
|
{ |
|
|
|
route: '/home/my', |
|
|
|
name: '工作台', |
|
|
|
icon: 'fas fa-laptop' |
|
|
|
}, |
|
|
|
{ |
|
|
|
route: '/home/template', |
|
|
|
name: '模板中心', |
|
|
|
icon: 'fas fa-clipboard' |
|
|
|
}, { |
|
|
|
route: '/home/recycle', |
|
|
|
name: '回收站', |
|
|
|
icon: 'fas fa-user' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
getStore() { |
|
|
|
return store |
|
|
|
}, |
|
|
|
getUserInfo() { |
|
|
|
let user = JSON.parse(this.getStore.getters['user/userInfo']) |
|
|
|
return user |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.defaultActiveMenu = this.$route.path |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
menuClickHandle(menu) { |
|
|
|
this.$router.replace({path: menu.route}) |
|
|
|
}, |
|
|
|
createBlankTemplate() { |
|
|
|
this.$api.post('/user/project/create', { |
|
|
|
'describe': formConf.description, |
|
|
|
@ -67,6 +143,24 @@ export default { |
|
|
|
console.log(res) |
|
|
|
this.$router.push({path: '/project/form', query: {key: res.data}}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
logoutHandle() { |
|
|
|
this.$confirm('您确定要退出登录吗？', '退出确认', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
this.$store.dispatch('user/logout').then(() => { |
|
|
|
router.push({ |
|
|
|
path: '/login', |
|
|
|
query: { |
|
|
|
redirect: router.currentRoute.fullPath |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -80,35 +174,23 @@ export default { |
|
|
|
width: 100%; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
.banner-container { |
|
|
|
height: 98px; |
|
|
|
} |
|
|
|
.left-container { |
|
|
|
min-width: 280px; |
|
|
|
height: 501px; |
|
|
|
line-height: 20px; |
|
|
|
border-radius: 2px; |
|
|
|
margin: 0 89px; |
|
|
|
text-align: center; |
|
|
|
//border: 1px solid rgba(255, 255, 255, 100); |
|
|
|
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
|
|
padding-left: 20px; |
|
|
|
} |
|
|
|
.userinfo-view { |
|
|
|
.header-container { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 42px; |
|
|
|
line-height: 42px; |
|
|
|
background-color: rgba(255, 255, 255, 100); |
|
|
|
.hi-tips { |
|
|
|
font-size: 21px; |
|
|
|
margin-left: 30px; |
|
|
|
} |
|
|
|
.name { |
|
|
|
width: 100px; |
|
|
|
justify-content: space-between; |
|
|
|
background-color: #fff; |
|
|
|
line-height: 38px; |
|
|
|
height: 38px; |
|
|
|
min-width: 1024px; |
|
|
|
.header-logo-img { |
|
|
|
width: 120px; |
|
|
|
height: 35px; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
.avatar { |
|
|
|
margin-left: 10px; |
|
|
|
.user-avatar { |
|
|
|
width: 35px; |
|
|
|
height: 35px; |
|
|
|
border-radius: 100px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
.menu-view { |
|
|
|
@ -116,13 +198,25 @@ export default { |
|
|
|
height: 501px; |
|
|
|
background-color: rgba(255, 255, 255, 100); |
|
|
|
padding: 20px; |
|
|
|
.menu-item-active { |
|
|
|
color: $menuActiveText; |
|
|
|
} |
|
|
|
.menu-item { |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-size: 20px; |
|
|
|
color: #333; |
|
|
|
font-size: 16px; |
|
|
|
text-align: left; |
|
|
|
line-height: 40px; |
|
|
|
line-height: 25px; |
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
color: $menuActiveText; |
|
|
|
} |
|
|
|
& .fas:hover { |
|
|
|
color: $menuActiveText; |
|
|
|
} |
|
|
|
.fas { |
|
|
|
color: #1c7bf9; |
|
|
|
display: inline-block; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
margin: 5px; |
|
|
|
} |
|
|
|
span { |
|
|
|
@ -130,24 +224,45 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.project-container { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
.project-item { |
|
|
|
display: flex; |
|
|
|
.banner-container { |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
.el-aside { |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
.el-card { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.user-person-menu { |
|
|
|
.nick-name { |
|
|
|
height: 16px; |
|
|
|
color: rgba(70, 70, 70, 86); |
|
|
|
font-size: 14px; |
|
|
|
line-height: 16px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.person-menu-item { |
|
|
|
color: rgba(70, 70, 70, 86); |
|
|
|
font-size: 14px; |
|
|
|
text-align: left; |
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
color: $menuActiveText; |
|
|
|
} |
|
|
|
} |
|
|
|
.person-menu-divider { |
|
|
|
background-color: rgba(210, 210, 210, 78); |
|
|
|
border: 1px solid rgba(210, 210, 210, 78); |
|
|
|
} |
|
|
|
} |
|
|
|
.about-container { |
|
|
|
position: fixed; |
|
|
|
width: 100%; |
|
|
|
bottom: 20px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-top: 40px; |
|
|
|
text-align: center; |
|
|
|
.fa-user { |
|
|
|
font-size: 19px; |
|
|
|
color: rgba(172, 172, 172, 100); |
|
|
|
margin: 1px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
wangqing
4 years ago