17 changed files with 4910 additions and 4372 deletions
@ -1 +1 @@ |
|||||
VITE_API_URL=http://localhost:4001 |
VITE_API_URL=http://localhost:3000 |
||||
|
|||||
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<div class="navbar flex items-center justify-between"> |
||||
|
<div class="project-name">项目名称</div> |
||||
|
<div class="project-action"> |
||||
|
<img /> |
||||
|
<img @click="toShowMask" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="role-list flex items-center"> |
||||
|
<div class="role-box relative"> |
||||
|
<div class="role-name">角色名称</div> |
||||
|
<div class="line-box absolute flex justify-center"><div class="line"></div></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="global"> |
||||
|
<div class="global-box"> |
||||
|
<div class="global-task">任务1</div> |
||||
|
<div class="global-task">任务1</div> |
||||
|
<div class="global-task">任务1</div> |
||||
|
<div class="global-task">任务1</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="task-list"> |
||||
|
<div class="task-box"> |
||||
|
<div class="task-time flex items-center justify-between"> |
||||
|
<div class="flex items-center"> |
||||
|
<img /> |
||||
|
<span>10日 09:00</span> |
||||
|
</div> |
||||
|
<div class="task-action"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="task-info"> |
||||
|
<div> |
||||
|
<div class="task-card"> |
||||
|
<div class="task-name">任务名</div> |
||||
|
<div class="task-con"> |
||||
|
<div> |
||||
|
<a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox> |
||||
|
</div> |
||||
|
<div> |
||||
|
<a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox> |
||||
|
</div> |
||||
|
<div> |
||||
|
<a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox> |
||||
|
</div> |
||||
|
<div> |
||||
|
<a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox> |
||||
|
</div> |
||||
|
<div> |
||||
|
<a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="open-icon" @click="openCard"> |
||||
|
<img /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="task-box"> |
||||
|
<div class="task-time flex items-center justify-between"> |
||||
|
<div class="flex items-center"> |
||||
|
<img /> |
||||
|
<span>10日 09:00</span> |
||||
|
</div> |
||||
|
<div class="task-action"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="task-info"> |
||||
|
<div> |
||||
|
<div class="task-card"> |
||||
|
<div class="task-name">任务名</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.navbar { |
||||
|
padding: 0 16px; |
||||
|
height: 44px; |
||||
|
} |
||||
|
|
||||
|
.project-name { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.role-list { |
||||
|
padding: 0 16px; |
||||
|
height: 36px; |
||||
|
border-bottom: 1px solid #cccccc; |
||||
|
} |
||||
|
|
||||
|
.role-box { |
||||
|
height: 36px; |
||||
|
} |
||||
|
|
||||
|
.role-name { |
||||
|
font-size: 14px; |
||||
|
line-height: 36px; |
||||
|
font-weight: 600; |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
|
||||
|
.role-box .line-box { |
||||
|
width: 100%; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.line-box .line { |
||||
|
width: 16px; |
||||
|
height: 2px; |
||||
|
background-color: #1890ff; |
||||
|
} |
||||
|
|
||||
|
.global { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
.global-box { |
||||
|
border: 1px solid #cccccc; |
||||
|
border-radius: 10px; |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
|
||||
|
.global-task { |
||||
|
padding: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.task-list { |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
|
||||
|
.task-box { |
||||
|
} |
||||
|
|
||||
|
.task-time { |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
.task-time img { |
||||
|
width: 23px; |
||||
|
height: 23px; |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.task-time span { |
||||
|
font-size: 14px; |
||||
|
color: #595959; |
||||
|
} |
||||
|
|
||||
|
.task-info { |
||||
|
margin: 8px 0; |
||||
|
padding-left: 11px; |
||||
|
} |
||||
|
|
||||
|
.task-info > div { |
||||
|
padding-left: 27px; |
||||
|
border-left: 1px solid #d2d2d2; |
||||
|
} |
||||
|
|
||||
|
.task-info .task-card { |
||||
|
padding: 16px; |
||||
|
border-radius: 8px; |
||||
|
-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12); |
||||
|
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12); |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
.task-con { |
||||
|
margin-top: 16px; |
||||
|
} |
||||
|
|
||||
|
.task-con > div { |
||||
|
height: 30px; |
||||
|
} |
||||
|
|
||||
|
.child-project-name { |
||||
|
color: #607d8b; |
||||
|
} |
||||
|
</style> |
||||
@ -1,5 +1,141 @@ |
|||||
<template>项目列表</template> |
<template> |
||||
|
<a-divider /> |
||||
|
<div class="project-list">项目列表</div> |
||||
|
<div class="list-flex"> |
||||
|
<div class="item-box"> |
||||
|
<div class="one-level h-70 cursor-pointer flex items-center" @click="toDetail()"> |
||||
|
<div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div> |
||||
|
<div class="detail"> |
||||
|
<div class="name-box flex items-center"> |
||||
|
<div class="name truncate">项目名称</div> |
||||
|
<div class="precent">50%</div> |
||||
|
</div> |
||||
|
|
||||
<script setup></script> |
<div class="time">11-21 00:00 至 11-21 23.59</div> |
||||
|
</div> |
||||
|
|
||||
<style scoped></style> |
<div class="right" @click.stop="openMenu"> |
||||
|
<img src="" /> |
||||
|
<img src="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="two-box"> |
||||
|
<div class="two-flex"> |
||||
|
<div class="two-level h-70 cursor-pointer flex items-center" @click="toDetail()"> |
||||
|
<div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div> |
||||
|
<div class="detail"> |
||||
|
<div class="name-box flex items-center"> |
||||
|
<div class="name truncate">项目名称</div> |
||||
|
<div class="precent">50%</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="time">11-21 00:00 至 11-21 23.59</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="right" @click.stop="openMenu"> |
||||
|
<img src="" /> |
||||
|
<img src="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="three-box"> |
||||
|
<div class="three-level h-70 cursor-pointer flex items-center" @click="toDetail()"> |
||||
|
<div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div> |
||||
|
<div class="detail"> |
||||
|
<div class="name-box flex items-center"> |
||||
|
<div class="name truncate">项目名称</div> |
||||
|
<div class="precent">50%</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="time">11-21 00:00 至 11-21 23.59</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
// import { useStore } from 'vuex'; |
||||
|
|
||||
|
// const store = useStore(); |
||||
|
|
||||
|
function toDetail() {} |
||||
|
</script> |
||||
|
<script> |
||||
|
export default { name: 'Projects' }; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.ant-divider-horizontal { |
||||
|
height: 16px; |
||||
|
background: #eeeeee; |
||||
|
margin: 0; |
||||
|
} |
||||
|
.project-list { |
||||
|
padding: 16px 0; |
||||
|
} |
||||
|
|
||||
|
.h-70 { |
||||
|
height: 70px; |
||||
|
} |
||||
|
|
||||
|
.one-level { |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
|
||||
|
.two-level { |
||||
|
padding: 0 16px 0 32px; |
||||
|
} |
||||
|
|
||||
|
.three-level { |
||||
|
padding: 0 16px 0 48px; |
||||
|
} |
||||
|
|
||||
|
.item-box .icon { |
||||
|
margin-right: 8px; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
width: calc(100% - 76px); |
||||
|
} |
||||
|
|
||||
|
.name-box { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
margin-right: 8px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1; |
||||
|
font-weight: 600; |
||||
|
max-width: calc(100% - 56px); |
||||
|
} |
||||
|
|
||||
|
.precent { |
||||
|
width: 48px; |
||||
|
height: 18px; |
||||
|
line-height: 18px; |
||||
|
text-align: center; |
||||
|
border-radius: 18px; |
||||
|
background-color: rgba(24, 144, 255, 0.2); |
||||
|
color: #1890ff; |
||||
|
font-size: 12px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 12px; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
width: 14px; |
||||
|
margin-left: 30px; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -1,20 +1,14 @@ |
|||||
<template> |
<template> |
||||
<menu-unfold-outlined v-if="collapsed" @click="toggleCollapse" /> |
<h1>课题数据库444444444</h1> |
||||
<menu-fold-outlined v-else class="trigger" @click="toggleCollapse" /> |
|
||||
<h1>课题数据库</h1> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup></script> |
||||
import { computed } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies |
|
||||
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; |
|
||||
|
|
||||
const store = useStore(); |
<style scoped> |
||||
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏 |
h1 { |
||||
|
font-size: 16px; |
||||
// toggle left window display |
font-weight: 600; |
||||
function toggleCollapse() { |
color: #666666; |
||||
store.commit('layout/setDisplay', { prop: 'left', show: !collapsed.value }); |
margin: 0; |
||||
} |
} |
||||
</script> |
</style> |
||||
|
|||||
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<div class="flex justify-between items-center"> |
||||
|
<h1 class="">实验平台</h1> |
||||
|
<div> |
||||
|
<menu-unfold-outlined v-if="collapsed" @click="toggleCollapse" /> |
||||
|
<menu-fold-outlined v-else class="trigger" @click="toggleCollapse" /> |
||||
|
用户信息 |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
// eslint-disable-next-line import/no-extraneous-dependencies |
||||
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏 |
||||
|
|
||||
|
// toggle left window display |
||||
|
function toggleCollapse() { |
||||
|
store.commit('layout/setDisplay', { prop: 'left', show: !collapsed.value }); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
h1 { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
export default { |
||||
|
namespaced: true, |
||||
|
|
||||
|
state: { |
||||
|
project: { name: '加载中...' }, // 当前项目信息
|
||||
|
projects: [], // 项目列表
|
||||
|
dotList: [], // 小红点
|
||||
|
}, |
||||
|
|
||||
|
getters: { |
||||
|
/** |
||||
|
* 当前项目的id |
||||
|
* @param {object} project |
||||
|
*/ |
||||
|
projectId({ project }) { |
||||
|
return project.id; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mutations: { |
||||
|
/** |
||||
|
* 设置state projects书籍 |
||||
|
* @param {object} state |
||||
|
* @param {array} projects 项目列表 |
||||
|
*/ |
||||
|
setProjects(state, projects) { |
||||
|
if (!projects || !projects.length) { |
||||
|
state.projects = []; |
||||
|
} else { |
||||
|
state.projects = [...projects]; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置子项目收缩展开 |
||||
|
* @param { object } state |
||||
|
* @param { object } options options:{ index,show } |
||||
|
*/ |
||||
|
setProjectItemShow(state, options) { |
||||
|
if (options.show) { |
||||
|
for (let i = 0; i < state.projects.length; i++) { |
||||
|
if (i === options.index) { |
||||
|
state.projects[i].show = true; |
||||
|
} else { |
||||
|
state.projects[i].show = false; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
state.projects[options.index].show = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置当前项目信息 |
||||
|
* @param { object } state |
||||
|
* @param { object } data |
||||
|
*/ |
||||
|
setProject(state, data) { |
||||
|
state.project = data || { name: '加载中...' }; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置当前项目名称 |
||||
|
* @param { object } state |
||||
|
* @param { string } data |
||||
|
*/ |
||||
|
setProjectName(state, data) { |
||||
|
state.project.name = data; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置小红点 |
||||
|
* @param { object } state |
||||
|
* @param { string } data |
||||
|
*/ |
||||
|
setDotList(state, data) { |
||||
|
state.dotList = data; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
actions: {}, |
||||
|
}; |
||||
@ -1,12 +1,26 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div class="task-detail"> |
||||
<div>左边 时间轴</div> |
<div class="task-con">任务详情页</div> |
||||
<div> |
<!-- <div> |
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</div> |
</div> --> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup></script> |
<script setup></script> |
||||
|
|
||||
<style scoped></style> |
<style scoped> |
||||
|
.task-detail { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 15px 12px; |
||||
|
} |
||||
|
|
||||
|
.task-con { |
||||
|
width: 100%; |
||||
|
height: 500px; |
||||
|
background-color: #fff; |
||||
|
border-radius: 10px; |
||||
|
border: 1px solid #cccccc; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -1,3 +1,5 @@ |
|||||
<template>登录</template> |
<template> |
||||
|
<div>登录</div> |
||||
|
</template> |
||||
|
|
||||
<script setup></script> |
<script setup></script> |
||||
|
|||||
File diff suppressed because it is too large
Loading…
Reference in new issue