Skip to content

D
DA-Platform

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit db7ea350 by Wang Yuhang
Options

Merge branch 'wyh-dev' into dev 

合并，美化登录界面和个人界面
parents e14cb9fb bc4cf8fb
Showing with 148 additions and 163 deletions
DAPlatform-front/src/components/Login.vue
<template>
<div class="login-container">
<div class="login-background-text">DAPlatform</div>
<div class="login-panel">
<div class="login-panel" :style="{height: panelHeight}">
<div class="logo">DAPlatform</div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
active-text-color="#409EFF">
<el-menu-item index="1">登录</el-menu-item>
......@@ -15,17 +15,24 @@
密码：
<el-input class="input" v-model="password" placeholder="请输入密码"></el-input>
</div>
<div class="input-item" v-if="activeIndex == '2'">
确认密码：
<el-input class="input" v-model="confirm" placeholder="请确认密码"></el-input>
</div>
<div class="input-item" v-if="activeIndex == '2'">
邮箱：
<el-input class="input" v-model="email" placeholder="请输入邮箱"></el-input>
</div>
<el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button>
<el-button v-else class="btn" type="primary" @click="register">注册</el-button>
<transition name="fade">
<div class="input-item" v-if="activeIndex == '2'">
确认密码：
<el-input class="input" v-model="confirm" placeholder="请确认密码"></el-input>
</div>
</transition>
<transition name="fade">
<div class="input-item" v-if="activeIndex == '2'">
邮箱：
<el-input class="input" v-model="email" placeholder="请输入邮箱"></el-input>
</div>
</transition>
<transition name="fade">
<el-button v-if="activeIndex == '1'" type="primary" @click="login">登录</el-button>
</transition>
<transition name="fade">
<el-button v-if="activeIndex == '2'" type="primary" @click="register">注册</el-button>
</transition>
</div>
</div>
</template>
......@@ -39,12 +46,19 @@ export default {
password: '',
confirm: '',
email: '',
activeIndex: '1'
activeIndex: '1',
panelHeight: '333px'
}
},
methods: {
handleSelect (key, keyPath) {
this.activeIndex = key
if (this.activeIndex === key) return
this.activeIndex = '0'
this.panelHeight = key === '1' ? '333px' : '473px'
var self = this
setTimeout(function () {
self.activeIndex = key
}, 550)
},
login () {
this.$router.push('/index').catch(data => {})
......@@ -62,30 +76,61 @@ export default {
position: relative;
min-width: 1400px;
min-height: 100vh;
background-color: #409EFF;
overflow: hidden;
.login-background-text {
position: absolute;
color: white;
font-size: 150px;
top: 30vh;
left: 5vw;
text-shadow: 30px 30px 0px rgba(255, 255, 255, 0.4);
z-index: 1;
}
background-image: linear-gradient(to top right, #409EFF, rgb(171, 209, 247));
.login-panel {
float: right;
width: 400px;
margin-right: 10vw;
margin-right: auto;
margin-left: auto;
margin-top: 20vh;
margin-bottom: 10vh;
padding-top: 20px;
background-color: white;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 0px 2px #f7f5f562;
z-index: 100;
animation: show-panel 1s;
transition: height 0.5s;
@keyframes show-panel{
from{
opacity: 0;
transform: translateY(20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
.logo{
color: #409EFF;
font-size: 28px;
}
.el-menu-demo{
background-color: #ffffff00;
.el-menu-item{
background-color: #ffffff00;
}
}
.el-button{
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
}
}
}
.fade-enter-active, .fade-leave-active{
transition: all 0.5s;
}
.fade-enter/* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateX(20px);
}
.fade-leave-to{
opacity: 0;
transform: translateX(-20px);
}
.input-item{
display: flex;
padding-left: 30px;
......@@ -97,9 +142,4 @@ export default {
width: 70%;
}
}
.btn{
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
DAPlatform-front/src/components/Task.vue
......@@ -71,8 +71,7 @@ export default {
begin () {
if (this.checkedPieces.length === 0) {
alert('请选择分片')
}
else{
} else {
this.$router.push('/ongoing')
}
}
......
DAPlatform-front/src/components/UserHome.vue
<template>
<div class="taskhall-container">
<el-container>
<el-aside width="300px">
<div>
<img src ="../assets/logo.png">
<div class="user-info-container">
<div class="user-info-panel">
<div class="user-info-left">
<img src="../assets/avatar.jpg" alt="">
<el-button type="primary" plain>更换头像</el-button>
</div>
<div class="user-info-right">
<div class="user-info-main">
<p><span>用户名：</span>小明</p>
<p><span>用户ID：</span>65535</p>
<p><span>邮箱：</span>123456@buaa.edu.cn</p>
<p><span>身份：</span>任务发布者</p>
</div>
<el-divider></el-divider>
<div class="user-info-more">
<h3>我的积分</h3>
<p><span>图像：</span><span class="point">333</span><span class="type-more">准确率：</span>70%</p>
<p><span>文本：</span><span class="point">333</span><span class="type-more">准确率：</span>65%</p>
<p><span>发布任务：</span><span class="point">333</span><span class="type-more">数量：</span>15</p>
</div>
</div>
</div>
</el-aside>
<el-main>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">用户名</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">小明</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">用户ID</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">4</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">邮箱</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">xxx@buaa.edu.cn</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">类型</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light">任务发布者</div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-blue">密码</div></el-col>
<el-col :span="18"><div class="grid-content bg-blue-light"> <el-button type="danger" plain>修改密码</el-button></div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-line bg-blue-dark" height:2px></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">类型</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">积分</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">准确率</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">图象</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">233</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">66%</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">文本</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">323</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">77%</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-blue">发布</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue-light">333</div></el-col>
<el-col :span="8"><div class="grid-content bg-blue">\</div></el-col>
</el-row>
</el-main>
</el-container>
</div>
</div>
</template>
<style scope lang="scss">
@import '../assets/scss/config.scss';
.taskhall-container{
padding: 40px 10% 100px 10%;
min-width: $min-width;
min-height: 600px;
overflow:hidden;
background-color: $bg-color;
}
</style>
<style>
/* .taskhall{
width: 90vw;
min-width: 800px;
border: solid;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}*/
.el-aside {
background-color: #e1f2fb !important;/*#8EC3F9 !important;*/
color: #FFFFFF;
text-align: center;
line-height: 200px;
}
.el-aside img{
margin-top: 50px;
width: 200px;
height: 200px;
}
.el-main {
background-color: #ffffff !important;
color: #FFFFFF;
text-align: center;
line-height: 40px;
width: 80%;
}
body > .el-container {
margin-bottom: 40px;
}
<script>
export default {
name: 'user-home'
}
</script>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
<style scope lang="scss">
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.user-info-container{
@include container();
.user-info-panel{
@include whiteBoard();
min-height: 500px;
display: flex;
.user-info-left{
width: 300px;
img{
width: 150px;
margin-top: 20px;
margin-bottom: 20px;
}
}
.user-info-right{
width: 100%;
text-align: left;
box-sizing: border-box;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
span{
display: inline-block;
min-width: 150px;
}
.user-info-more{
margin-top: 50px;
.point::after{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url("../assets/point.png") no-repeat center;
background-size: contain;
vertical-align: middle;
margin-left: 7px;
margin-bottom: 5px;
}
.type-more{
min-width: 4em;
}
}
}
}
.el-col {
border-radius: 4px;
}
.bg-blue-dark {
background: #769fcd;
}
.bg-blue {
background: #CAE4FF;/*#8EC3F9;*/
}
.bg-blue-light {
background: #e1f2fb !important;
}
.grid-content {
border-radius: 4px;
height: 40px;
color: #000000
}
.grid-line {
border-radius: 4px;
height: 6px;
}
.row-bg {
padding: 10px 0;
background-color: #FFFFFF;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment