WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增项目卡片

Browse Source
This commit is contained in:
yannqing 2024-03-16 01:37:59 +08:00
parent 340f91b03b
commit 8596d4fb85
2 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/HomePage/IndexView.vue
View File

@ -2,6 +2,7 @@
<div class="w-[100%] h-auto">
<div class="flex flex-col">
<NavBar v-bind="user" />
<!-- <ProjectCard v-bind="project"/>-->
<router-view></router-view>
<More/>
<Icp/>
@ -22,6 +23,17 @@ const user = reactive({
username:'',
isLoggedIn:false
})
//
// const project = reactive({
// name: "梁溪区纪委大数据项目平台",
// principalUser: "赵谦孙里",
// isFinish: -1,
// description: "前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。框架、解决方案，来实现互联网产品的用户界面交互。框架、解决方案，来",
// cycle: 60,
// workLoad: 120,
// id: 1,
// tags: ['web','大数据'],
// })
onMounted(() => {
initFlowbite();
@ -62,6 +74,7 @@ import NewProfile from "@/components/HomeComponents/NewProfile.vue";
import ProjectList from "@/components/HomeComponents/ProjectList.vue";
import TeamProfile from "@/components/HomeComponents/TeamProfile.vue";
import ExcellentMember from "@/components/HomeComponents/ExcellentMember.vue";
import ProjectCard from "@/views/ProjectPage/MainMessage/ProjectCard.vue";
</script>

78
src/views/ProjectPage/MainMessage/ProjectCard.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<a-card hoverable style="width: 30vw; margin: 30px;" :loading="false">
<template #title>
<div style="display: flex; flex-direction: row">
<div style="display: flex; flex-direction: row; width: 18vw">
<div style="width: 0.5vw; height: 3vh; background-color: #BD3124; border-radius: 10px; margin-right: 0.2vw;margin-top: 0.3vh"/>
<div style="text-shadow: 2px 2px 6px rgba(189, 49, 36, 0.4);">{{ project.name }}</div>
</div>
<div style="margin-left: 1.8vw;
font-size: 70%;
font-weight: normal;
text-shadow: 2px 2px 4px #B886F8;
display: flex;
flex-direction: row;
margin-top: 0.8vh;">
<div style="width: 0.5vw; height: 2.5vh; background-color: #B886F8; border-radius: 10px; margin-right: 0.2vw;"/>负责人：{{ project.principalUser }}</div>
</div>
</template>
<div style="display: flex; flex-direction: column; height: 10vh; margin-top: 0">
<!-- description-->
<div style="display: flex; flex-direction: row; height: 8vh">
<div style="width: 0.8vw; height: 2vh; background-color: rgba(233, 157, 66, 1); border-radius: 10px; margin-right: 0.2vw;"/>
<div style="font-size: 60%; text-shadow: 2px 2px 6px rgba(233, 157, 66, 1); color: rgba(154, 154, 154, 1)">{{ project.description }}</div>
</div>
<!-- other message-->
<div style="display: flex; flex-direction: row; height: 2vh">
<!-- status-->
<div style="display: flex; flex-direction: row; width: 5vw">
<!-- <div style="width: 0.5vw;height: 0.8vh; background-color: rgba(204, 247, 131, 1); border-radius: 50%; margin-right: 0.2vw; margin-top: 0.6vh"/>-->
<sync-outlined :spin="true" style="color:#87d068;" v-if="project.isFinish===2"/>
<div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===2">进行中</div>
<check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
<div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===1">已完成</div>
<PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
<div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===0">未开始</div>
<InfoCircleOutlined style="color: red" v-if="project.isFinish===-1"/>
<div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===-1">已暂停</div>
</div>
<!-- works-->
<div style="display: flex; flex-direction: row; width: 8.5vw">
<smile-two-tone />
<div style="font-size: 60%; margin-left: 0.3vw">工作量：{{ project.workLoad }}人/天</div>
</div>
<div style="display: flex; flex-direction: row; width: 8vw">
<schedule-two-tone two-tone-color="pink"/>
<div style="font-size: 60%; margin-left: 0.3vw">周期：{{ project.cycle }}天</div>
</div>
</div>
</div>
<template #actions>
<a-tag v-for="(tag, index) in project.tags" :color="color[index]">
{{ tag }}
</a-tag>
<a-button type="text" shape="circle" :icon="h(ArrowRightOutlined)"></a-button>
</template>
</a-card>
</template>
<script setup>
import {ArrowRightOutlined, SmileTwoTone, CheckCircleTwoTone, ScheduleTwoTone, SyncOutlined, PlayCircleOutlined, InfoCircleOutlined} from "@ant-design/icons-vue";
import {h} from "vue";
const project = defineProps(["name","id","isFinish","principalUser","description","cycle","workLoad","tags"])
const color = ['pink','red','green','orange','cyan','blue','purple']
</script>