insistence
1 year ago
6 changed files with 812 additions and 1064 deletions
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="linkGroup"> |
||||
|
<a v-for="(item, index) in links" :key="index" :href="item.href"> |
||||
|
{{ item.title }} |
||||
|
</a> |
||||
|
<a-button size="small" type="primary" ghost> |
||||
|
<PlusOutlined /> 添加 |
||||
|
</a-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Button } from "ant-design-vue"; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
AButton: Button, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup> |
||||
|
import { PlusOutlined } from "@ant-design/icons-vue"; |
||||
|
|
||||
|
const links = [ |
||||
|
{ |
||||
|
title: "操作一", |
||||
|
href: "", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作二", |
||||
|
href: "", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作三", |
||||
|
href: "", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作四", |
||||
|
href: "", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作五", |
||||
|
href: "", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作六", |
||||
|
href: "", |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.linkGroup { |
||||
|
padding: 20px 0 8px 24px; |
||||
|
font-size: 0; |
||||
|
& > a { |
||||
|
display: inline-block; |
||||
|
width: 25%; |
||||
|
margin-bottom: 13px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-size: 14px; |
||||
|
&:hover { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,736 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="pageHeaderContent"> |
||||
|
<div class="avatar"> |
||||
|
<a-avatar size="large" :src="currentUser.avatar" /> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="contentTitle"> |
||||
|
早安， |
||||
|
{{ currentUser.name }} |
||||
|
，祝你开心每一天！ |
||||
|
</div> |
||||
|
<div>{{ currentUser.title }} |{{ currentUser.group }}</div> |
||||
|
</div> |
||||
|
<div class="extraContent"> |
||||
|
<div class="statItem"> |
||||
|
<a-statistic title="项目数" :value="56" /> |
||||
|
</div> |
||||
|
<div class="statItem"> |
||||
|
<a-statistic title="团队内排名" :value="8" suffix="/ 24" /> |
||||
|
</div> |
||||
|
<div class="statItem"> |
||||
|
<a-statistic title="项目访问" :value="2223" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div style="padding: 10px"> |
||||
|
<a-row :gutter="24"> |
||||
|
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24"> |
||||
|
<a-card |
||||
|
class="projectList" |
||||
|
:style="{ marginBottom: '24px' }" |
||||
|
title="进行中的项目" |
||||
|
:bordered="false" |
||||
|
:loading="false" |
||||
|
:body-style="{ padding: 0 }" |
||||
|
> |
||||
|
<template #extra> |
||||
|
<a href=""> <span style="color: #1890ff">全部项目</span> </a> |
||||
|
</template> |
||||
|
<a-card-grid |
||||
|
v-for="item in projectNotice" |
||||
|
:key="item.id" |
||||
|
class="projectGrid" |
||||
|
> |
||||
|
<a-card |
||||
|
:body-style="{ padding: 0 }" |
||||
|
style="box-shadow: none" |
||||
|
:bordered="false" |
||||
|
> |
||||
|
<a-card-meta :description="item.description" class="w-full"> |
||||
|
<template #title> |
||||
|
<div class="cardTitle"> |
||||
|
<a-avatar size="small" :src="item.logo" /> |
||||
|
<a :href="item.href"> |
||||
|
{{ item.title }} |
||||
|
</a> |
||||
|
</div> |
||||
|
</template> |
||||
|
</a-card-meta> |
||||
|
<div class="projectItemContent"> |
||||
|
<a :href="item.memberLink"> |
||||
|
{{ item.member || "" }} |
||||
|
</a> |
||||
|
<span class="datetime" ml-2 :title="item.updatedAt"> |
||||
|
{{ item.updatedAt }} |
||||
|
</span> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
</a-card-grid> |
||||
|
</a-card> |
||||
|
<a-card |
||||
|
:body-style="{ padding: 0 }" |
||||
|
:bordered="false" |
||||
|
class="activeCard" |
||||
|
title="动态" |
||||
|
:loading="false" |
||||
|
> |
||||
|
<a-list :data-source="activities" class="activitiesList"> |
||||
|
<template #renderItem="{ item }"> |
||||
|
<a-list-item :key="item.id"> |
||||
|
<a-list-item-meta> |
||||
|
<template #title> |
||||
|
<span> |
||||
|
<a class="username">{{ item.user.name }}</a |
||||
|
> |
||||
|
<span class="event"> |
||||
|
<span>{{ item.template1 }}</span |
||||
|
> |
||||
|
<a href="" style="color: #1890ff"> |
||||
|
{{ item?.group?.name }} </a |
||||
|
> <span>{{ item.template2 }}</span |
||||
|
> |
||||
|
<a href="" style="color: #1890ff"> |
||||
|
{{ item?.project?.name }} |
||||
|
</a> |
||||
|
</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
<template #avatar> |
||||
|
<a-avatar :src="item.user.avatar" /> |
||||
|
</template> |
||||
|
<template #description> |
||||
|
<span class="datetime" :title="item.updatedAt"> |
||||
|
{{ item.updatedAt }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</a-list-item-meta> |
||||
|
</a-list-item> |
||||
|
</template> |
||||
|
</a-list> |
||||
|
</a-card> |
||||
|
</a-col> |
||||
|
<a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24"> |
||||
|
<a-card |
||||
|
:style="{ marginBottom: '24px' }" |
||||
|
title="快速开始 / 便捷导航" |
||||
|
:bordered="false" |
||||
|
:body-style="{ padding: 0 }" |
||||
|
> |
||||
|
<EditableLinkGroup /> |
||||
|
</a-card> |
||||
|
<a-card |
||||
|
:style="{ marginBottom: '24px' }" |
||||
|
:bordered="false" |
||||
|
title="XX 指数" |
||||
|
> |
||||
|
<div class="chart"> |
||||
|
<div ref="radarContainer" /> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
<a-card |
||||
|
:body-style="{ paddingTop: '12px', paddingBottom: '12px' }" |
||||
|
:bordered="false" |
||||
|
title="团队" |
||||
|
> |
||||
|
<div class="members"> |
||||
|
<a-row :gutter="48"> |
||||
|
<a-col |
||||
|
v-for="item in projectNotice" |
||||
|
:key="`members-item-${item.id}`" |
||||
|
:span="12" |
||||
|
> |
||||
|
<a :href="item.href"> |
||||
|
<a-avatar :src="item.logo" size="small" /> |
||||
|
<span class="member">{{ item.member }}</span> |
||||
|
</a> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
Statistic, |
||||
|
Row, |
||||
|
Col, |
||||
|
Card, |
||||
|
CardGrid, |
||||
|
CardMeta, |
||||
|
List, |
||||
|
ListItem, |
||||
|
ListItemMeta, |
||||
|
Avatar, |
||||
|
} from "ant-design-vue"; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
AStatistic: Statistic, |
||||
|
ARow: Row, |
||||
|
ACol: Col, |
||||
|
ACard: Card, |
||||
|
ACardGrid: CardGrid, |
||||
|
ACardMeta: CardMeta, |
||||
|
AList: List, |
||||
|
AListItem: ListItem, |
||||
|
AListItemMeta: ListItemMeta, |
||||
|
AAvatar: Avatar, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<script setup> |
||||
|
import { Radar } from "@antv/g2plot"; |
||||
|
import EditableLinkGroup from "./editable-link-group.vue"; |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: "DashBoard", |
||||
|
}); |
||||
|
|
||||
|
const currentUser = { |
||||
|
avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png", |
||||
|
name: "吴彦祖", |
||||
|
userid: "00000001", |
||||
|
email: "antdesign@alipay.com", |
||||
|
signature: "海纳百川，有容乃大", |
||||
|
title: "交互专家", |
||||
|
group: "蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED", |
||||
|
}; |
||||
|
|
||||
|
const projectNotice = [ |
||||
|
{ |
||||
|
id: "xxx1", |
||||
|
title: "Alipay", |
||||
|
logo: "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png", |
||||
|
description: "那是一种内在的东西，他们到达不了，也无法触及的", |
||||
|
updatedAt: "几秒前", |
||||
|
member: "科学搬砖组", |
||||
|
href: "", |
||||
|
memberLink: "", |
||||
|
}, |
||||
|
{ |
||||
|
id: "xxx2", |
||||
|
title: "Angular", |
||||
|
logo: "https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png", |
||||
|
description: "希望是一个好东西，也许是最好的，好东西是不会消亡的", |
||||
|
updatedAt: "6 年前", |
||||
|
member: "全组都是吴彦祖", |
||||
|
href: "", |
||||
|
memberLink: "", |
||||
|
}, |
||||
|
{ |
||||
|
id: "xxx3", |
||||
|
title: "Ant Design", |
||||
|
logo: "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png", |
||||
|
description: "城镇中有那么多的酒馆，她却偏偏走进了我的酒馆", |
||||
|
updatedAt: "几秒前", |
||||
|
member: "中二少女团", |
||||
|
href: "", |
||||
|
memberLink: "", |
||||
|
}, |
||||
|
{ |
||||
|
id: "xxx4", |
||||
|
title: "Ant Design Pro", |
||||
|
logo: "https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png", |
||||
|
description: "那时候我只会想自己想要什么，从不想自己拥有什么", |
||||
|
updatedAt: "6 年前", |
||||
|
member: "程序员日常", |
||||
|
href: "", |
||||
|
memberLink: "", |
||||
|
}, |
||||
|
{ |
||||
|
id: "xxx5", |
||||
|
title: "Bootstrap", |
||||
|
logo: "https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png", |
||||
|
description: |
||||
|
"............................凛冬将至.........................", |
||||
|
updatedAt: "6 年前", |
||||
|
member: "高逼格设计天团", |
||||
|
href: "", |
||||
|
memberLink: "", |
||||
|
}, |
||||
|
{ |
||||
|
id: "xxx6", |
||||
|
title: "React", |
||||
|
logo: "https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png", |
||||
|
description: "生命就像一盒巧克力，结果往往出人意料", |
||||
|
updatedAt: "6 年前", |
||||
|
member: "骗你来学计算机", |
||||
|
href: "", |
||||
|
memberLink: "", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const activities = [ |
||||
|
{ |
||||
|
id: "trend-1", |
||||
|
updatedAt: "几秒前", |
||||
|
user: { |
||||
|
name: "曲丽丽", |
||||
|
avatar: |
||||
|
"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png", |
||||
|
}, |
||||
|
group: { |
||||
|
name: "高逼格设计天团", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
project: { |
||||
|
name: "六月迭代", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
template1: "在", |
||||
|
template2: "新建项目", |
||||
|
}, |
||||
|
{ |
||||
|
id: "trend-2", |
||||
|
updatedAt: "几秒前", |
||||
|
user: { |
||||
|
name: "付小小", |
||||
|
avatar: |
||||
|
"https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png", |
||||
|
}, |
||||
|
group: { |
||||
|
name: "高逼格设计天团", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
project: { |
||||
|
name: "六月迭代", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
template1: "在", |
||||
|
template2: "新建项目", |
||||
|
}, |
||||
|
{ |
||||
|
id: "trend-3", |
||||
|
updatedAt: "几秒前", |
||||
|
user: { |
||||
|
name: "林东东", |
||||
|
avatar: |
||||
|
"https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png", |
||||
|
}, |
||||
|
group: { |
||||
|
name: "中二少女团", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
project: { |
||||
|
name: "六月迭代", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
template1: "在", |
||||
|
template2: "新建项目", |
||||
|
}, |
||||
|
{ |
||||
|
id: "trend-4", |
||||
|
updatedAt: "几秒前", |
||||
|
user: { |
||||
|
name: "周星星", |
||||
|
avatar: |
||||
|
"https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png", |
||||
|
}, |
||||
|
group: { |
||||
|
name: "5 月日常迭代", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
template1: "将", |
||||
|
template2: "更新至已发布状态", |
||||
|
}, |
||||
|
{ |
||||
|
id: "trend-5", |
||||
|
updatedAt: "几秒前", |
||||
|
user: { |
||||
|
name: "朱偏右", |
||||
|
avatar: |
||||
|
"https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png", |
||||
|
}, |
||||
|
group: { |
||||
|
name: "工程效能", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
project: { |
||||
|
name: "留言", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
template1: "在", |
||||
|
template2: "发布了", |
||||
|
}, |
||||
|
{ |
||||
|
id: "trend-6", |
||||
|
updatedAt: "几秒前", |
||||
|
user: { |
||||
|
name: "乐哥", |
||||
|
avatar: |
||||
|
"https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png", |
||||
|
}, |
||||
|
group: { |
||||
|
name: "程序员日常", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
project: { |
||||
|
name: "品牌迭代", |
||||
|
link: "http://github.com/", |
||||
|
}, |
||||
|
template1: "在", |
||||
|
template2: "新建项目", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const radarContainer = ref(); |
||||
|
const radarData = [ |
||||
|
{ |
||||
|
name: "个人", |
||||
|
label: "引用", |
||||
|
value: 10, |
||||
|
}, |
||||
|
{ |
||||
|
name: "个人", |
||||
|
label: "口碑", |
||||
|
value: 8, |
||||
|
}, |
||||
|
{ |
||||
|
name: "个人", |
||||
|
label: "产量", |
||||
|
value: 4, |
||||
|
}, |
||||
|
{ |
||||
|
name: "个人", |
||||
|
label: "贡献", |
||||
|
value: 5, |
||||
|
}, |
||||
|
{ |
||||
|
name: "个人", |
||||
|
label: "热度", |
||||
|
value: 7, |
||||
|
}, |
||||
|
{ |
||||
|
name: "团队", |
||||
|
label: "引用", |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
name: "团队", |
||||
|
label: "口碑", |
||||
|
value: 9, |
||||
|
}, |
||||
|
{ |
||||
|
name: "团队", |
||||
|
label: "产量", |
||||
|
value: 6, |
||||
|
}, |
||||
|
{ |
||||
|
name: "团队", |
||||
|
label: "贡献", |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
name: "团队", |
||||
|
label: "热度", |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: "部门", |
||||
|
label: "引用", |
||||
|
value: 4, |
||||
|
}, |
||||
|
{ |
||||
|
name: "部门", |
||||
|
label: "口碑", |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: "部门", |
||||
|
label: "产量", |
||||
|
value: 6, |
||||
|
}, |
||||
|
{ |
||||
|
name: "部门", |
||||
|
label: "贡献", |
||||
|
value: 5, |
||||
|
}, |
||||
|
{ |
||||
|
name: "部门", |
||||
|
label: "热度", |
||||
|
value: 7, |
||||
|
}, |
||||
|
]; |
||||
|
let radar; |
||||
|
onMounted(() => { |
||||
|
radar = new Radar(radarContainer.value, { |
||||
|
data: radarData, |
||||
|
xField: "label", |
||||
|
yField: "value", |
||||
|
seriesField: "name", |
||||
|
point: { |
||||
|
size: 4, |
||||
|
}, |
||||
|
legend: { |
||||
|
layout: "horizontal", |
||||
|
position: "bottom", |
||||
|
}, |
||||
|
}); |
||||
|
radar.render(); |
||||
|
}); |
||||
|
|
||||
|
onBeforeUnmount(() => { |
||||
|
radar?.destroy?.(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.textOverflow() { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
// mixins for clearfix |
||||
|
// ------------------------ |
||||
|
.clearfix() { |
||||
|
zoom: 1; |
||||
|
&::before, |
||||
|
&::after { |
||||
|
display: table; |
||||
|
content: " "; |
||||
|
} |
||||
|
&::after { |
||||
|
clear: both; |
||||
|
height: 0; |
||||
|
font-size: 0; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.activitiesList { |
||||
|
padding: 0 24px 8px 24px; |
||||
|
.username { |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
} |
||||
|
.event { |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pageHeaderContent { |
||||
|
display: flex; |
||||
|
padding: 12px; |
||||
|
margin-bottom: 24px; |
||||
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; |
||||
|
.avatar { |
||||
|
flex: 0 1 72px; |
||||
|
& > span { |
||||
|
display: block; |
||||
|
width: 72px; |
||||
|
height: 72px; |
||||
|
border-radius: 72px; |
||||
|
} |
||||
|
} |
||||
|
.content { |
||||
|
position: relative; |
||||
|
top: 4px; |
||||
|
flex: 1 1 auto; |
||||
|
margin-left: 24px; |
||||
|
color: rgba(0, 0, 0, 0.45); |
||||
|
line-height: 22px; |
||||
|
.contentTitle { |
||||
|
margin-bottom: 12px; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
font-weight: 500; |
||||
|
font-size: 20px; |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.extraContent { |
||||
|
.clearfix(); |
||||
|
|
||||
|
float: right; |
||||
|
white-space: nowrap; |
||||
|
.statItem { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
padding: 0 32px; |
||||
|
> p:first-child { |
||||
|
margin-bottom: 4px; |
||||
|
color: rgba(0, 0, 0, 0.45); |
||||
|
font-size: 14px; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
> p { |
||||
|
margin: 0; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
font-size: 30px; |
||||
|
line-height: 38px; |
||||
|
> span { |
||||
|
color: rgba(0, 0, 0, 0.45); |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
top: 8px; |
||||
|
right: 0; |
||||
|
width: 1px; |
||||
|
height: 40px; |
||||
|
background-color: #e8e8e8; |
||||
|
content: ""; |
||||
|
} |
||||
|
&:last-child { |
||||
|
padding-right: 0; |
||||
|
&::after { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.members { |
||||
|
a { |
||||
|
display: block; |
||||
|
height: 24px; |
||||
|
margin: 12px 0; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
transition: all 0.3s; |
||||
|
.textOverflow(); |
||||
|
.member { |
||||
|
margin-left: 12px; |
||||
|
font-size: 14px; |
||||
|
line-height: 24px; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
&:hover { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.projectList { |
||||
|
:deep(.ant-card-meta-description) { |
||||
|
height: 44px; |
||||
|
overflow: hidden; |
||||
|
color: rgba(0, 0, 0, 0.45); |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
.cardTitle { |
||||
|
font-size: 0; |
||||
|
a { |
||||
|
display: inline-block; |
||||
|
height: 24px; |
||||
|
margin-left: 12px; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
font-size: 14px; |
||||
|
line-height: 24px; |
||||
|
vertical-align: top; |
||||
|
&:hover { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.projectGrid { |
||||
|
width: 33.33%; |
||||
|
} |
||||
|
.projectItemContent { |
||||
|
display: flex; |
||||
|
height: 20px; |
||||
|
margin-top: 8px; |
||||
|
overflow: hidden; |
||||
|
font-size: 12px; |
||||
|
line-height: 20px; |
||||
|
.textOverflow(); |
||||
|
a { |
||||
|
display: inline-block; |
||||
|
flex: 1 1 0; |
||||
|
color: rgba(0, 0, 0, 0.45); |
||||
|
.textOverflow(); |
||||
|
&:hover { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
.datetime { |
||||
|
flex: 0 0 auto; |
||||
|
float: right; |
||||
|
color: rgba(0, 0, 0, 0.25); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.datetime { |
||||
|
color: rgba(0, 0, 0, 0.25); |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 1200px) and (min-width: 992px) { |
||||
|
.activeCard { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
.members { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
.extraContent { |
||||
|
margin-left: -44px; |
||||
|
.statItem { |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 992px) { |
||||
|
.activeCard { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
.members { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
.extraContent { |
||||
|
float: none; |
||||
|
margin-right: 0; |
||||
|
.statItem { |
||||
|
padding: 0 16px; |
||||
|
text-align: left; |
||||
|
&::after { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 768px) { |
||||
|
.extraContent { |
||||
|
margin-left: -16px; |
||||
|
} |
||||
|
.projectList { |
||||
|
.projectGrid { |
||||
|
width: 50%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 576px) { |
||||
|
.pageHeaderContent { |
||||
|
display: block; |
||||
|
.content { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
.extraContent { |
||||
|
.statItem { |
||||
|
float: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 480px) { |
||||
|
.projectList { |
||||
|
.projectGrid { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue