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