hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-09 10:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:概览和创建项目,创建子项目两个弹窗

Browse Source
This commit is contained in:
岳佳鑫
2022-10-14 18:35:51 +08:00
parent 93b5695f98
commit 17cf9e258e
15 changed files with 541 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
src/views/projectcenter/TaskPage.vue
View File

@@ -1,51 +1,42 @@
<!-- 任务页面 -->
<template>
<div class="taskpage">
<div class="header">
<div class="box">
<img src="../../assets/images/projectadd/picture.png"/>
</div>
<div class="imgfor">
<div class="forz">管理者进阶-腾飞班</div>
<div class="fort">项目经理：黄华/刘俊</div>
<div class="fort">起止时间：2022-07-21 00:00至2020-10-21 00:00</div>
</div>
<div class="right">
<div class="end" style="margin-right: 5px">
<div style="margin-top: 20px;margin-left: 10px">
<img class="endimg" src="../../assets/images/projectadd/ending.png"/>
<span class="endtext">结束项目</span>
</div>
</div>
<div class="end">
<div style="margin-top: 20px;margin-left: 10px">
<img class="endimg" src="../../assets/images/leveladd/more.png"/>
<div class="tableSelect" style="margin-left: 10px;margin-right: 20px">
<a-select
style="width: 50px; color: #7096E3"
value="更多"
dropdownClassName="tabledropdown"
>
<a-select-option value="撤回" label="撤回">
<div>撤回</div>
</a-select-option>
<a-select-option value="复制" label="复制">
<div>复制</div>
</a-select-option>
<a-select-option value="存为模板" label="存为模板">
<div>存为模板</div>
</a-select-option>
</a-select>
</div>
</div>
</div>
<router-link to="/projectmanage" class="end">
<div style="margin-top: 20px;margin-left: 10px;margin-right:30px">
<img class="ending" src="../../assets/images/leveladd/back.png" />
<span class="endtext" style="color:#4EA6FF">返回</span>
</div>
</router-link>
<div class="addhead" style="flex-shrink: 0">
<div class="leftimg">
<img class="img" src="../../assets/images/projectadd/picture.png" />
</div>
<div class="imgfor">
<div class="forz">管理者进阶-腾飞班</div>
<div class="fort">项目经理：黄华、刘俊</div>
<div class="fort">起止时间：2022-07-21 00:00至2022-10-21 00:00</div>
</div>
<div class="right">
<img class="img1" src="../../assets/images/leveladd/ma.png" />
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/pub.png" />
<div class="pub">发布</div>
<div class="line"></div>
<img
style="margin-right: 15px"
class="img2"
src="../../assets/images/leveladd/more.png"
/>
<div class="more">
<span style="color: #7096e3; cursor: pointer">更多</span>
<div class="moreArrow"></div>
<div class="moreItems">
<div class="sammo">撤回</div>
<div class="sammo">复制</div>
</div>
</div>
<div class="line"></div>
<router-link to="/projectmanage"
><div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div></router-link
>
</div>
</div>
<div class="split" style="flex-shrink: 0;"></div>
<div class="content">
@@ -53,7 +44,33 @@
v-model:activeKey="activeKey"
size="large"
:tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
<a-tab-pane key="1" tab="概览"><div class="split"></div></a-tab-pane>
<a-tab-pane key="1" tab="概览">
<div class="split"></div>
<div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
<div class="second">
<div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
<div class="centermain">快速添加任务/阶段</div>
</div>
<div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div>
<div class="centermain">快速添加学员</div>
</div>
<div class="taskbox" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
<div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
<div class="centermain">快速发布项目</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="任务" force-render>
<div class="split"></div>
<div class="onerow">
@@ -249,9 +266,55 @@
<a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</div>
<div>
<a-modal
v-model:visible="pubproject"
:title="null"
@ok="closeModal"
:footer="null"
:closable="false"
wrapClassName="pubproject"
width="679px"
height="437px"
>
<div class="modalHeader"
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
>
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px">项目发布</span>
</div>
<div style="cursor: pointer;margin-right:32px" @click="closeModal">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
</a-modal>
</div>
</div>
</template>
<script lang="ts">
<script>
import { reactive, toRefs } from "vue";
export default {
name:"taskPage",
setup(){
const state = reactive({
pubproject: true,
});
const showModal = () => {
state.pubproject = true;
};
const closeModal = () => {
state.pubproject = false;
};
return {
...toRefs(state),
showModal,
closeModal,
};
},
}
</script>
<style lang="scss">
.taskpage {
@@ -259,78 +322,171 @@
display: flex;
flex-direction: column;
//position: relative;
.header {
.addhead {
width: 100%;
height: 130px;
// background-color: lightgreen;
display: flex;
flex-wrap: wrap;
.box {
border: 12px solid #E7F2FF;
margin: 16px 0 16px 19px;
border-radius: 8px;
//float: left;
justify-content: space-between;
align-items: center;
position: relative;
.leftimg {
width: 151px;
height: 100px;
border: 10px solid #e7f2ff;
border-radius: 8px;
margin-left: 20px;
.img {
width: 100%;
height: 100%;
}
}
.imgfor {
margin-left: 32px;
display: flex;
flex: 1;
flex-direction: column;
margin-top: 38px;
margin-left: 15px;
//float: left;
//position: absolute;
//left: 210px;
.forz {
font-size: 16px;
color: #363636;
font-weight: 500;
font-weight: 600;
font-size: 16px;
}
.fort {
display: flex;
flex-wrap: wrap;
color: #878b92;
font-size: 14px;
color: #878B92;
margin-top: 2px;
}
}
.right {
display: flex;
//position: absolute;
//right: 10px;
//top: 5px;
//float: right;
.end {
border-left: 1px solid #E8EFFA;
height: 82px;
margin-top:30px;
//width: 113px;
.endimg {
width: 42px;
height: 42px;
}
.endtext {
font-size: 14px;
color: #57C887;
padding: 7px;
}
}
@media screen and (max-width: 1030px) {
.imgfor {
margin-left: 20px;
}
}
.right {
// width: 500px;
height: 100%;
// background-color: red;
//position: absolute;
//right: 0;
display: flex;
align-items: center;
.img1 {
width: 24px;
height: 24px;
margin-right: 50px;
}
.line {
height: 65%;
width: 1px;
background-color: #e8effa;
margin-right: 28px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
}
.pub {
color: #ffb64e;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
}
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 10px;
margin-right: 60px;
}
.more {
position: relative;
margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 15px;
}
.moreItems {
width: 110px;
height: 80px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: -48px;
top: 30px;
z-index: 100;
cursor: pointer;
.sammo {
text-align: center;
margin-top: 12px;
cursor: pointer;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
}
}
@media screen and (max-width: 1240px) {
.line {
margin-right: 10px;
}
.img1 {
margin-right: 15px;
}
.img2 {
margin-right: 10px;
}
.return {
margin-right: 10px;
}
.pub {
margin-right: 10px;
}
.more {
margin-right: 10px;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
.tableBox {
margin: 20px 38px 30px;
.ant-table-thead > tr > th {
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
padding: 5px 16px;
background-color: #eff4fc;
}
margin: 20px 38px 30px;
.ant-table-thead > tr > th {
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
padding: 5px 16px;
background-color: #eff4fc;
}
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.content {
//display: flex;
//margin: 0 37px;
@@ -391,6 +547,51 @@
}
}
}
.second {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 40px;
.taskbox {
width: 412px;
height: 160px;
border-radius: 10px;
position: relative;
margin-right: 68px;
margin-bottom: 40px;
cursor: pointer;
.leftt {
position: absolute;
top: 18px;
left: 0;
}
.photo {
position: absolute;
top: 42px;
left: 37px;
}
.rightt {
position: absolute;
top: 69px;
right: 26px;
}
.centerbox {
position: absolute;
top: 52px;
left: 145px;
font-size: 20px;
font-weight: 700;
//line-height: 36px;
}
.centermain {
color: rgba(135, 139, 146, 1);
font-size: 14px;
position: absolute;
left: 144px;
bottom: 49px;
}
}
}
.stage {
display: flex;
height: 49px;