<!--
|
* @Author: 胡思旗 931347610@qq.com
|
* @Date: 2023-08-28 15:23:47
|
* @LastEditors: 胡思旗 931347610@qq.com
|
* @LastEditTime: 2023-08-28 16:19:49
|
* @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\list_page.vue\components\ProjectList.vue
|
* @Description:项目列表组件
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="project-box flex-display flex-align-center">
|
<div class="project-card" v-for="item in cardList" :key="item.id">
|
<div class="project-left">
|
<div class="head mb10 flex-display flex-align-center flex-justify-between">
|
<div class="head-left flex-display flex-align-center">
|
<a-tag color="#87d068">进行中</a-tag>
|
<span class="head-text">5</span>
|
</div>
|
<div class="head-right">
|
<a-dropdown>
|
<dash-outlined />
|
<template #overlay>
|
<a-menu>
|
<a-menu-item>
|
<a href="javascript:;">编辑</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a href="javascript:;">归档</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a href="javascript:;">删除</a>
|
</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</div>
|
</div>
|
<div class="wrapper">
|
<div class="introduction mb10">5</div>
|
<div class="time mb5">创建时间: 2023/08/28</div>
|
<div class="manager mb5 flex-display flex-align-center">
|
<user-outlined />
|
<div class="user_name ml10">接口活</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div class="enter">
|
<export-outlined />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { DashOutlined, UserOutlined, ExportOutlined } from '@ant-design/icons-vue'
|
import { defineProps } from 'vue'
|
import { status, projectCard } from './data'
|
const props = defineProps({
|
cardList: {
|
type: Array as () => projectCard[],
|
required: true,
|
},
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.project-box {
|
.project-card {
|
cursor: pointer;
|
width: 100%;
|
min-height: 120px;
|
background: #232323;
|
user-select: none;
|
border-bottom: 1px solid #4f4f4f;
|
display: flex;
|
}
|
|
.project-left {
|
padding: 16px;
|
flex: 1;
|
width: calc(100% - 48px);
|
box-sizing: border-box;
|
|
.head {
|
.head-left {
|
font-size: 16px;
|
}
|
}
|
}
|
|
.enter {
|
background: #303030;
|
width: 48px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
height: 100%;
|
cursor: pointer;
|
}
|
}
|
</style>
|
