8 changed files with 221 additions and 92 deletions
@ -0,0 +1,115 @@
|
||||
<template> |
||||
<div style="width: 1680px;height: 780px;"> |
||||
<div style="width: 90%;;height: 100%;"> |
||||
<div style="display: flex;align-items: center;justify-content: stretch;width: 100%;height: 50%"> |
||||
<div style="width: 55%;;margin-left: 6%;margin-top:3%;height: 100%;"> |
||||
<a-card style="width: 100%;height: 100%;border-radius: 20px;"> |
||||
<span class="font" style="display: inline-block;height: 10%;"><i class="iconfont icon-daibanrenwu" style="font-size: 35px;"></i>待办 |
||||
<i class="iconfont icon-shenglvehao"></i> |
||||
</span> |
||||
<div style="width: 100%;height: 150px"> |
||||
暂无待办 |
||||
</div> |
||||
<a-divider style="border: 1px solid #c7c7c7"/> |
||||
<ul class="ul-li" style="list-style-type:none;padding-left: 0px;"> |
||||
<!-- 这里可以用for循环--> |
||||
<li><a-tag color="#539ee6">物资审批1</a-tag><span style="margin-left: 70px">关于xxxx物资的审批流程</span><span style="margin-left: 150px">2020.10.1 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6">物资审批2</a-tag><span style="margin-left: 70px">关于xxxx物资的审批流程</span><span style="margin-left: 150px">2020.10.1 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6">物资审批3</a-tag><span style="margin-left: 70px">关于xxxx物资的审批流程</span><span style="margin-left: 150px">2020.10.1 10:10:20</span></li> |
||||
</ul> |
||||
</a-card> |
||||
</div> |
||||
|
||||
<div style="width: 55%;margin-left: 3%;margin-top:3%; height: 100%;"> |
||||
<a-card style="width: 100%;height: 100%;border-radius: 20px;"> |
||||
<span class="font" style="display: inline-block;height: 10%;"><i class="iconfont icon-rizhi-copy" style="font-size: 30px;"></i>登录日志 |
||||
<i class="iconfont icon-shenglvehao"></i> |
||||
</span> |
||||
<ul class="ul-li" style="list-style-type:none;padding-left: 0px;"> |
||||
<!-- 这里可以用for循环--> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
<li><a-tag color="#539ee6" style="width: 85px;text-align: center;">企划部</a-tag><span style="margin-left: 50px">李朝阳</span><span style="margin-left: 100px">2002.2.10 10:10:20</span></li> |
||||
</ul> |
||||
</a-card> |
||||
</div> |
||||
</div> |
||||
<div style="width: 100%;margin-top: 5%;margin-left: 6%;height: 70%"> |
||||
<a-card style="width: 94%;height: 90%;border-radius: 20px;"> |
||||
<span class="font" style="display: inline-block;height: 10%;"><i class="iconfont icon-rizhi-copy" style="font-size: 30px;"></i>全部应用 |
||||
</span> |
||||
<ul class="apply-use" style="list-style-type: none;padding: 0px"> |
||||
<li><i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资审批</span></li> |
||||
<li><i class="iconfont icon-suggest-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资申领</span></li> |
||||
<li><i class="iconfont icon-process-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资报废</span></li> |
||||
<li><i class="iconfont icon-suggest-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资申领</span></li> |
||||
<li><i class="iconfont icon-process-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资报废</span></li> |
||||
<li><i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资审批</span></li> |
||||
<li><i class="iconfont icon-suggest-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资申领</span></li> |
||||
<li><i class="iconfont icon-process-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资报废</span></li> |
||||
<li><i class="iconfont icon-suggest-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资申领</span></li> |
||||
<li><i class="iconfont icon-process-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资报废</span></li> |
||||
<li><i class="iconfont icon-lianxiren1-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资审批</span></li> |
||||
<li><i class="iconfont icon-suggest-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资申领</span></li> |
||||
<li><i class="iconfont icon-process-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资报废</span></li> |
||||
<li><i class="iconfont icon-suggest-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资申领</span></li> |
||||
<li><i class="iconfont icon-process-copy" style="font-size: 35px;"></i><span style="margin-left: 20px">物资报废</span></li> |
||||
</ul> |
||||
</a-card> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'HomePage' |
||||
} |
||||
</script> |
||||
|
||||
|
||||
<style scoped> |
||||
@import url("http://at.alicdn.com/t/c/font_3733417_ws9m9bvag1h.css"); |
||||
.border-style{ |
||||
width: 40%; |
||||
height: 50%; |
||||
border: 1px solid lightgrey; |
||||
border-radius: 15px; |
||||
background-color: #ffffff; |
||||
margin: 30px 0 0 50px; |
||||
box-shadow: 0 0 2px 2px lightgrey; |
||||
display: inline-block; |
||||
padding: 2%; |
||||
font-size: 30px; |
||||
} |
||||
|
||||
.font{ |
||||
font-size: 12px; |
||||
font-width: bold; |
||||
} |
||||
|
||||
.ul-li li{ |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.iconfont{ |
||||
vertical-align: -10%; |
||||
} |
||||
.apply-use li{ |
||||
float: left; |
||||
border: 1px solid black; |
||||
width: 15%; |
||||
height: 60px; |
||||
margin: 40px 0 0 60px; |
||||
} |
||||
|
||||
|
||||
</style> |
Loading…
Reference in new issue