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> |
|||
<menu-unfold-outlined v-if="collapsed" @click="toggleCollapse" /> |
|||
<menu-fold-outlined v-else class="trigger" @click="toggleCollapse" /> |
|||
<h1>课题数据库</h1> |
|||
<h1>课题数据库444444444</h1> |
|||
</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'; |
|||
<script setup></script> |
|||
|
|||
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 }); |
|||
<style scoped> |
|||
h1 { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #666666; |
|||
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> |
|||
<div> |
|||
<div>左边 时间轴</div> |
|||
<div> |
|||
<div class="task-detail"> |
|||
<div class="task-con">任务详情页</div> |
|||
<!-- <div> |
|||
<router-view></router-view> |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<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> |
|||
|
|||
File diff suppressed because it is too large
Loading…
Reference in new issue