Skip to content

D
DA-Platform

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

Commit ba5c14d3 by 李景熙
Options

common_front

parent 468dc6a5
Showing with 1194 additions and 4 deletions
DAPlatform/build/webpack.base.conf.js
'use strict' 'use strict'
const webpack = require('webpack')
const path = require('path') const path = require('path')
const utils = require('./utils') const utils = require('./utils')
const config = require('../config') const config = require('../config')
...@@ -40,7 +41,7 @@ module.exports = { ...@@ -40,7 +41,7 @@ module.exports = {
}, },
module: { module: {
rules: [ rules: [
...(config.dev.useEslint ? [createLintingRule()] : []), ...(config.dev.useEslint ? [] : []),
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue-loader', loader: 'vue-loader',
...@@ -88,5 +89,11 @@ module.exports = { ...@@ -88,5 +89,11 @@ module.exports = {
net: 'empty', net: 'empty',
tls: 'empty', tls: 'empty',
child_process: 'empty' child_process: 'empty'
} },
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
} }
DAPlatform/src/App.vue
<template> <template>
<div id="app"> <div id="app">
<img src="./assets/logo.png">
<router-view/> <router-view/>
</div> </div>
</template> </template>
......
DAPlatform/src/components/Index.vue 0 → 100644
<template>
<div>
<nav-header></nav-header>
<router-view></router-view>
</div>
</template>
<script>
import NavHeader from './NavHeader'
export default {
name: 'index',
data () {
return {
}
},
components: {
NavHeader
}
}
</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
</style>
DAPlatform/src/components/Login.vue 0 → 100644
<template>
<div class="login-container">
<div class="login-background-text">DAPlatform</div>
<div class="login-panel">
<ul class="nav-justified">
<li role="presentation" :class="{active: mode =='login'}">
<a @click="mode='login'">登录</a>
</li>
<li role="presentation" :class="{active: mode =='register'}">
<a @click="mode='register'">注册</a>
</li>
</ul>
<div v-if="mode=='login'" class="login-input-group">
<div class="input-group">
<span>用户名：</span>
<input type="text" class="form-control" placeholder="输入用户名" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span>密码：</span>
<input type="text" class="form-control" placeholder="输入密码" aria-describedby="basic-addon1">
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" @click="login()">登录</button>
</div>
</div>
<div v-else class="register-input-group">
<div class="input-group">
<span>用户名：</span>
<input type="text" class="form-control" placeholder="输入用户名" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span>密码：</span>
<input type="text" class="form-control" placeholder="输入密码" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span>邮箱：</span>
<input type="text" class="form-control" placeholder="确认密码" aria-describedby="basic-addon1">
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">注册</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
mode: 'login'
}
},
methods: {
login () {
console.log('login')
this.$router.push('/taskhall').catch(data => {})
}
}
}
</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.login-container {
position: relative;
width: 100%;
min-height: 100vh;
background-color: rgb(119, 243, 202);
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);
}
.login-panel {
position: relative;
float: right;
width: 400px;
height: 450px;
margin-right: 10vw;
margin-top: 20vh;
margin-bottom: 10vh;
padding-top: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.active a{
color: rgb(97, 211, 173);
}
a {
font-weight: bold;
font-size: 1.3em;
cursor: pointer;
color: black;
}
.input-group{
/* border: solid; */
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30px;
padding-right: 30px;
margin-top: 40px;
}
.input-group span{
font-size: 1.em;
}
.input-group input{
width: 70%;
height: 50px;
}
.btn-group{
position: absolute;
bottom: 40px;
right: 25px;
}
.btn-group button{
width: 350px;
background-color: rgb(97, 211, 173);
color: white;
border: none;
}
</style>
DAPlatform/src/components/NavHeader.vue 0 → 100644
<template>
<div class="nav-header-container">
<div class="nav-header">
<div class="nav-header-logo">DAPlatform</div>
<div class="nav-header-navigator">
<router-link :to="{name: 'taskhall'}">任务大厅</router-link>
<router-link :to="{name: 'index'}">其它</router-link>
</div>
<div class="nav-header-userInfo">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<router-link :to="{name: 'login'}">登录</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'nav-header',
data () {
return {
}
}
}
</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.nav-header-container{
width: 100vw;
background-color: rgb(97, 211, 173);
}
.nav-header{
width: 90vw;
min-width: 800px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
.nav-header-logo{
/* border: solid; */
float: left;
color: white;
font-size: 25px;
font-weight: bold;
line-height: 50px;
margin-right: 50px;
}
.nav-header-navigator{
float: left;
}
.nav-header-navigator a{
display: inline-block;
color: white;
font-weight: bold;
line-height: 50px;
width: 6em;
}
.nav-header-navigator a:hover{
background-color: rgb(64, 167, 132);
}
.nav-header-userInfo{
float: right;
color: white;
line-height: 50px;
}
.nav-header-userInfo a{
color: white;
margin-left: 10px;
}
</style>
DAPlatform/src/components/TaskHall.vue 0 → 100644
<template>
<div class="taskhall">
<div class="taskhall-left">
<div class="task-list">
<ul>
<li><a :class="{'tab-active': activeName == '任务大厅'}" @click="activeName='任务大厅'">任务大厅</a></li>
</ul>
<div class="tasks-body">
<div class="task-filter">
<div class="task-filter-item">
<!-- 任务类型： -->
</div>
<div class="task-filter-item">
任务名称：<input type="text">
</div>
<div class="task-filter-item btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-success">查询</button>
</div>
</div>
<div class="tasks">
<div class="task-item">
<span class="task-item-state">进行中</span>
<span class="task-item-title">单物体语义分割</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-state">进行中</span>
<span class="task-item-title">人脸质量判断</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-state">进行中</span>
<span class="task-item-title">图片属性标注</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
</div>
</div>
</div>
</div>
<div class="taskhall-right">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">公告栏</h3>
</div>
<div class="panel-body">
新任务即将发布<br>
...
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'taskhall',
data () {
return {
activeName: '任务大厅'
}
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
}
}
}
</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.taskhall{
width: 90vw;
min-width: 800px;
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 40px;
display: flex;
}
.taskhall-left{
/* border: solid; */
width: 70%;
height: 500px;
}
.task-list{
width: 95%;
height: 100%;
}
.task-list ul{
display: flex;
padding: 0;
border-bottom: 1px solid rgb(97, 211, 173);
margin-bottom: 0;
}
.task-list ul li{
display: inline-block;
padding:0px;
}
.task-list ul li a{
display: inline-block;
width: 100%;
padding: 15px;
height: 100%;
color: black;
cursor: pointer;
}
.tab-active{
border-radius: 5px 5px 0 0;
background-color: rgb(97, 211, 173);
color: white;
}
.tasks-body{
border: 1px solid rgb(97, 211, 173);
border-top: none;
padding-top: 20px;
/* width: 100%; */
/* height: 500px; */
}
.task-filter{
text-align: left;
}
.task-filter-item{
margin-left: 30px;
margin-bottom: 20px;
}
.task-type-btn{
background-color: rgb(97, 211, 173);
}
.btn-success{
background-color: rgb(97, 211, 173);
border: none;
}
.task-item{
position: relative;
display: flex;
height: 80px;
border-top: 1px solid rgb(231, 231, 231);
align-items: center;
}
.task-item-state{
color:rgb(97, 211, 173);
font-weight: bold;
margin-left: 30px;
}
.task-item-title{
font-size: 20px;
font-weight: bold;
margin-left: 40px;
}
.task-item button{
position: absolute;
right: 20px;
/* line-height: 50px; */
}
.taskhall-right{
/* border: solid; */
width: 30%;
height: 500px;
}
.panel-success{
border-color: rgb(97, 211, 173);
}
.panel-heading{
background-color: rgb(97, 211, 173);
border-color: rgb(97, 211, 173);
}
</style>
DAPlatform/src/components/UserHome.vue 0 → 100644
<template>
<div class="main">
<div class="title">
个人主页
</div>
<div class="information">
<div class="avatar">
头像
<img>
</div>
<div class="others">
<ul>
<li>用户名</li>
<li>邮箱</li>
<li>积分</li>
</ul>
</div>
</div>
<div class="task">
<ul>
<li>单物体语义分割</li>
<li>人脸质量判断</li>
<li>图片属性标注</li>
<li>任务4</li>
<li>任务5</li>
</ul>
</div>
</div>
</template>
<style type="text/css">
/* *{
padding: 0;
margin: 0;
}*/
.title{
width: 900px;
height: 120px;
margin-left: 150px;
margin-bottom: 20px;
margin-top: 20px;
font-size: 75px;
color:black;
background-color: #c0c0c0;
}
.information{
width: 900px;
height: 200px;
margin-left: 150px;
margin-bottom: 20px;
}
.avatar{
width: 200px;
float:left;
}
.others{
width: 650px;
float:right;
margin-left: 10px;
}
.task{
margin-left: 150px;
width: 900px;
height: 1200px;
}
.main{
background-color: #f5f5f5;
width:1200px;
height: 1200px;
margin: 20px auto;
}
.avatar img{
height: 200px;
width: 200px;
}
.avatar, .others{
background-color: #f5f5f5;
height:200px;
}
.others li{
font-weight: bold;
list-style: none;
hegiht:50px;
margin-bottom: 5px;
margin-top: 5px;
background-color: white;
line-height: 50px;
cursor: pointer;
float: center;
}
.task li{
font-weight: bold;
list-style: none;
hegiht:50px;
margin-bottom: 5px;
margin-top: 5px;
background-color: white;
line-height: 50px;
cursor: pointer;
float: center;
}
</style>
<script type="text/javascript">
</script>
DAPlatform/src/components/execute.vue 0 → 100644
<template>
<div class="userbody">
<div class="side-bar">
</div>
<div class="main">
<div class="article" style="width: 75%;text-align: left;border-top:5px solid #343434;">
<div style="height: 100%;width: 100%;padding: 20px 30px">
<div class="userheadcontent" style="margin-bottom: 30px">
<div style="position: relative;width: 90px;height: 90px;margin-right: 15px;margin-left: 5px">
<img id="userImg" style="position: absolute;height: 120px" src="../assets/logo.png">
</div>
<div class="userheadleft">
<div class="title">{{'英语标注求助'}}</div>
<div class="status">发布用户名:{{'李宗国'}}</div>
<div class="status">发表时间:{{'2020年5月9号'}}</div>
<div class="status">所属单位:{{'北京航空航天大学'}}</div>
</div>
</div>
<div class="usercontent">
<div class="userleft">
<div class="userposttext" style = "width: 100px;">分片情况如下:</div>
<div class="userheadright">
<div class="headtext" @click="biaozhu" id="guanzhuButton1" >{{'+添加任务'}}</div>
</div>
<div style="width: 100%;height: 1px;background: darkgray"></div>
<div class="userintro1">{{'.'}}</div>
<div class="userintro">{{'人脸关键点标注，对人脸范围内的关键点进行标注和微调，每个点有准确的位置，用于精密的表情变化和人脸关键点识别。随着AI技术的发展，人脸关键点也越来越精细（数量多），对标注员的基本功和标注团队审核能力的要求也越来越高。标注质量的好坏，对人工智能人脸模型的算法精确度有很大作用，如果人脸关键点标注不好，那么人脸识别算法就无法很好地进行人脸识别，影响实际应用！'}}</div>
<div class="userheadright">
<div class="headtext" @click="biaozhu" id="guanzhuButton2" >{{'+添加任务'}}</div>
</div>
<div style="width: 100%;height: 1px;background: darkgray"></div>
<div class="userintro1">{{'.'}}</div>
<div style="position: relative;width: 90px;overflow: hidden;height: 90px;margin-right: 15px;margin-left: 5px">
<img id="userImg1" style="position: absolute;height: 90px" src="../assets/1.jpg">
</div>
<div class="userheadright">
<div class="headtext" @click="biaozhu" id="guanzhuButton3" >{{'+添加任务'}}</div>
</div>
<div style="width: 100%;height: 1px;background: darkgray"></div>
<div class="userintro1">{{'.'}}</div>
<div class="userintro">{{'人脸关键点检测方法大致分为三种：基于模型的ASM(Active Shape Model)和AAM(Active Appearnce Model)基于级联形状回归CPR(Cascaded pose regression)基于深度学习的方法专业的人工智能数据服务商，提供数据采集与数据标注服务'}}</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'execute',
methods: {
biaozhu () {
console.log('1')
this.$router.push({path: '/Signup'})
}
}
}
</script>
<style scoped>
.userheadcontent{
display: flex;
}
.userheadleft{
flex: 1;
height: 100%;
margin-right: 10px;
}
.userheadright{
/*display: flex;*/
width: 30%;
height: 100%;
text-align:center;
float: right;
vertical-align: middle;
}
.usercontent{
display: flex;
}
.userintro{
font-size: 14px;
margin-top: 30px;
margin-bottom: 15px;
line-height: 25px;
}
.userintro1{
font-size: 0px;
margin-top: 0px;
margin-bottom: 15px;
line-height: 25px;
}
.userleft{
flex: 1;
height: 100%;
margin-right: 20px;
}
.headtext{
outline:none;
font-family: "Yu Gothic UI";
font-size: 15px;
height: 35px;
width:100px;
border-radius: 30px;
background: rgba(0,0,0,0);
text-align: center;
vertical-align:middle;
line-height: 35px;
color: #343434;
border: 1px solid #343434;
transition: background-color 0.2s ease,border-width 0.2s ease,border-radius 0.2s ease;
}
.headtext:hover{
background: #a6dadd;
color: white;
border: 1px solid #a6dadd;
}
.headtext:active{
border-radius: 35px;
background: #343434;
color: white;
border: 1px solid #343434;
}
.userposttext{
color: #343434;
font-size: 15px;
font-weight: bold;
border-bottom: black solid 3px;
}
.userbody {
background:#f1f1f1;
/*line-height: 1.7;*/
height: 100%;
width: 100%;
}
a {
text-decoration: none;
}
a, body {
color: #9fc6dc;
}
.side-bar {
float: left;
width: 20%;
height: 100%;
position: fixed;
}
.side-bar > * {
padding: 10px 15px;
}
.side-bar .nav a,
.side-bar .tag-list a {
display: block;
padding: 5px;
color: #888;
-webkit-transition: color 200ms;
-o-transition: color 200ms;
transition: color 200ms;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover {
color: #9fc6dc;
}
.side-bar .nav a {
font-weight: 700;
}
.main {
float: right;
width: 80%;
color: #454545;
}
.article-list .item .title,
.article .title {
color: #454545;
font-size: 26px;
font-weight: 700;
margin-bottom: 30px;
}
.article-list .item .status,
.article .status {
font-size: 13px;
color: #ccc;
}
.article-list .item > *,
.article > * {
margin: 10px 0;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
DAPlatform/src/components/missionDetail(1).vue 0 → 100644
<template>
<div id = "missionDetail">
<el-container>
<el-header>
</el-header>
<el-main>
<el-row :gutter="20" >
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="待审核的任务" name="first">未完成的任务<p></p>
<el-row :gutter="24" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="4" >
<li>任务名：待审核任务:1</li>
<li>当前分数:1</li>
<li>发布者：xxx</li>
</el-col>
<el-col span="8" offset="">
任务简介：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-col>
<el-col span="2" offset="4">
<el-input v-model="input" placeholder="输入得分"></el-input>
<el-button>点击打分</el-button></el-col>
</el-row>
<el-form>
<span>图片标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">图1：</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图2：</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图3：</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
<span>文字标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">文字1：</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字2：</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字3：</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
</el-form>
<el-button>提交</el-button>
</el-tab-pane>
<el-tab-pane label="已完成的任务" name="second">已完成的任务
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="4" >
<li>任务名：已完成任务:1</li>
<li>当前分数:1</li>
<li>发布者：xxx</li>
</el-col>
<el-col span="8" >
任务简介：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-col>
<el-col span="2" offset="4">
<el-button>导出任务</el-button></el-col>
</el-row>
<span>图片标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">图1：</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图2：</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">图3：</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
<span>文字标注:</span>
<el-row :gutter="20" style="border-bottom: 1px solid;border-bottom-color: #8c939d;padding-bottom: 5px">
<el-col span="6" offset="1">
<el-row :gutter="6">文字1：</el-row>
<el-row :gutter="6"><el-tag>属性1</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字2：</el-row>
<el-row :gutter="6"><el-tag>属性2</el-tag></el-row>
</el-col>
<el-col span="6" offset="1">
<el-row :gutter="6">文字3：</el-row>
<el-row :gutter="6"><el-tag>属性3</el-tag></el-row>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
</el-main>
<el-footer>
</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name: 'missionDetail'
}
</script>
<style>
#missionDetail {
}
.el-header , .el-footer{
color: black;
background-color: black;
width: 100%;
height: 200px;
}
.el-main{
min-height: 400px;
}
.el-row{
margin-bottom: 20px;
}
</style>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
DAPlatform/src/components/release.vue 0 → 100644
<template>
<div id="release">
<el-header></el-header>
<el-main>
<el-form>
<!-- 添加图片分片-->
<el-row :gutter="20">
<el-col span="10">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-col>
<el-col span="10">
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传文本文件</div>
</el-upload>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col span="10">
<el-input v-model="input" placeholder="图片模板"></el-input>
</el-col>
<el-col span="10">
<el-input v-model="input" placeholder="文字模板"></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col span="8">
<el-input v-model="input" placeholder="输入任务名称">
</el-input>
</el-col>
<el-col span="5">
<el-button type="primary" @click="onSubmit">创建任务</el-button>
</el-col>
</el-row>
</el-form>
</el-main>
<el-footer></el-footer>
</div>
</template>
<style>
#release {
}
.el-header , .el-footer{
color: black;
background-color: black;
width: 100%;
height: 200px;
}
.el-main{
min-height: 400px;
}
.el-row{
margin-bottom: 20px;
}
</style>
<script>
export default {
name: 'release'
}
</script>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
DAPlatform/src/components/releasepersonal.vue 0 → 100644
<template>
<div class="taskhall">
<div class="taskhall-left">
<div class="task-list">
<div class="task-item">
<span class="task-item-title">用户名</span>
</div>
<div class="task-item">
<span class="task-item-title">邮箱号</span>
</div>
<div class="task-item">
<span class="task-item-title">积分</span>
</div>
<ul>
<li><a :class="{'tab-active': activeName == '已发布任务'}" @click="activeName='已发布任务'">已发布任务</a></li>
<li><a :class="{'tab-active': activeName == '待审核任务'}" @click="activeName='待审核任务'">待审核任务</a></li>
<li><a :class="{'tab-active': activeName == '已完成任务'}" @click="activeName='已完成任务'">已完成任务</a></li>
</ul>
<div class="tasks-body">
<div class="task-filter">
<div class="task-filter-item">
<!-- 任务类型： -->
</div>
</div>
<div class="tasks">
<div class="task-item">
<span class="task-item-title">单物体语义分割</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-title">人脸质量判断</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
<div class="task-item">
<span class="task-item-title">图片属性标注</span>
<button type="button" class="btn btn-success">进入任务</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'releasepersonal',
data () {
return {
activeName: '已发布任务'
}
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
}
}
}
</script>
<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.taskhall{
width: 90vw;
min-width: 800px;
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 40px;
display: flex;
}
.taskhall-left{
/* border: solid; */
width: 70%;
height: 500px;
}
.task-list{
width: 95%;
height: 100%;
}
.task-list ul{
display: flex;
padding: 0;
border-bottom: 1px solid rgb(97, 211, 173);
margin-bottom: 0;
}
.task-list ul li{
display: inline-block;
padding:0px;
}
.task-list ul li a{
display: inline-block;
width: 100%;
padding: 15px;
height: 100%;
color: black;
cursor: pointer;
}
.tab-active{
border-radius: 5px 5px 0 0;
background-color: rgb(97, 211, 173);
color: white;
}
.tasks-body{
border: 1px solid rgb(97, 211, 173);
border-top: none;
padding-top: 20px;
/* width: 100%; */
/* height: 500px; */
}
.task-filter{
text-align: left;
}
.task-filter-item{
margin-left: 30px;
margin-bottom: 20px;
}
.task-type-btn{
background-color: rgb(97, 211, 173);
}
.btn-success{
background-color: rgb(97, 211, 173);
border: none;
}
.task-item{
position: relative;
display: flex;
height: 80px;
border-top: 1px solid rgb(231, 231, 231);
align-items: center;
}
.task-item-state{
color:rgb(97, 211, 173);
font-weight: bold;
margin-left: 30px;
}
.task-item-title{
font-size: 20px;
font-weight: bold;
margin-left: 40px;
}
.task-item button{
position: absolute;
right: 20px;
/* line-height: 50px; */
}
.taskhall-right{
/* border: solid; */
width: 30%;
height: 500px;
}
.panel-success{
border-color: rgb(97, 211, 173);
}
.panel-heading{
background-color: rgb(97, 211, 173);
border-color: rgb(97, 211, 173);
}
</style>
DAPlatform/src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' import release from '@/components/release'
import HelloWorld from '../components/HelloWorld'
import MissionDetail from '../components/missionDetail(1)'
import execute from '../components/execute'
import Login from '@/components/Login'
import Index from '@/components/Index'
import releasepersonal from '../components/releasepersonal'
import userhome from '../components/UserHome'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/release',
name: 'Release',
component: release
},
{
path: '/', path: '/',
name: 'HelloWorld', name: 'HelloWorld',
component: HelloWorld component: HelloWorld
},
{
path: '/missiondetail',
name: 'missiondetail',
component: MissionDetail
},
{
path: '/execute',
name: 'execute',
component: execute
},
{
path: '/index',
name: 'index',
component: Index,
children: [
{
path: 'taskhall',
name: 'taskhall',
component: () => import('../components/TaskHall.vue')
}
]
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/userinfo',
name: 'userinfo',
component: releasepersonal
},
{
path: '/userhome',
name: 'userhome',
component: userhome
} }
] ]
}) })
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