308 lines
8.7 KiB
HTML
308 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>工作台</title>
|
|
<link rel="stylesheet" href="../../component/layui/css/layui.css" />
|
|
<link rel="stylesheet" href="../../component/font-awesome-4.7.0/css/font-awesome.css" />
|
|
|
|
<style>
|
|
.avatar {
|
|
width: 110px;
|
|
height: 110px;
|
|
border-radius: 100px;
|
|
margin: 10px;
|
|
margin-left: 35px;
|
|
}
|
|
|
|
#info {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#info .info-title {
|
|
|
|
opacity: 0.8;
|
|
font-size: 18px;
|
|
}
|
|
|
|
#info .info-content {
|
|
margin-top: 40px;
|
|
font-size: 13px;
|
|
color: gray;
|
|
}
|
|
.card{
|
|
width:100%;
|
|
height:160px;
|
|
background-color: whitesmoke;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
.card .header .avatar{
|
|
width: 25px;
|
|
height: 25px;
|
|
margin:20px;
|
|
}
|
|
.card .header{
|
|
color: dimgray;
|
|
}
|
|
.card .body{
|
|
color:gray;
|
|
}
|
|
.card .body{
|
|
margin-left:20px;
|
|
margin-right:20px;
|
|
}
|
|
.card .footer{
|
|
margin-left:20px;
|
|
margin-right:20px;
|
|
margin-top:20px;
|
|
font-size: 13px;
|
|
color: gray;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.card:hover{
|
|
box-shadow: 0px 0px 5px darkgray;
|
|
background-color: white;
|
|
}
|
|
.list{
|
|
|
|
}
|
|
|
|
.list .list-item{
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: gray;
|
|
padding: 5px;
|
|
padding-left: 15px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.list .list-item:hover{
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
|
|
.list .list-item .title{
|
|
font-size:14px;
|
|
width: 100%;
|
|
}
|
|
.list .list-item .footer{
|
|
position: absolute;
|
|
right: 30px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body style="background-color: gainsboro;" class="layui-anim layui-anim-upbit">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md2 layui-col-xs4 layui-hide-xs">
|
|
<img src="../../assets/images/avatar.jpg" style="box-shadow:2px 0px 10px gray;" class="avatar">
|
|
</div>
|
|
<div class="layui-col-md8 layui-col-xs12">
|
|
<div id="info">
|
|
<h3 class="info-title">晚上好，就眠仪式，休息一会儿吧 !</h3>
|
|
<div class="info-content"> 前端工程师 | 蚂蚁金服 | 软件二部 | Lay平台 </div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md2 layui-col-xs2 layui-hide-xs">
|
|
<div style="height: 20px!important;"></div>
|
|
<a href='https://gitee.com/Jmysy/Pear-One-Layui'><img src='https://gitee.com/Jmysy/Pear-One-Layui/widgets/widget_3.svg?color=756ae8' alt='Fork me on Gitee/'></img></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-pearone-container layui-row layui-col-space10" style="margin-left:5px;margin-right: 5px;">
|
|
<div class="layui-col-md9 layui-row">
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">我的项目</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md4">
|
|
<div class="card">
|
|
<div class="header">
|
|
<img class="avatar" src="../../assets/images/avatar.jpg"></img><span class="title">PearOne</span>
|
|
</div>
|
|
<div class="body">
|
|
城镇中有那么多的酒馆，她却偏偏走进了我的酒馆
|
|
</div>
|
|
<div class="footer">9小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="card">
|
|
<div class="header">
|
|
<img class="avatar" src="../../assets/images/avatar.jpg"></img><span class="title">Angular</span>
|
|
</div>
|
|
<div class="body">
|
|
希望是一个好东西，也许是最好的，好东西是不会消亡
|
|
</div>
|
|
<div class="footer">9小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="card">
|
|
<div class="header">
|
|
<img class="avatar" src="../../assets/images/avatar.jpg"></img><span class="title">Vue</span>
|
|
</div>
|
|
<div class="body">
|
|
生命就像一盒巧克力，结果往往出人意料
|
|
</div>
|
|
<div class="footer">9小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="card">
|
|
<div class="header">
|
|
<img class="avatar" src="../../assets/images/avatar.jpg"></img><span class="title">BootStrap</span>
|
|
</div>
|
|
<div class="body">
|
|
一切都在不可避免的走向庸俗
|
|
</div>
|
|
<div class="footer">9小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="card">
|
|
<div class="header">
|
|
<img class="avatar" src="../../assets/images/avatar.jpg"></img><span class="title">Ant Design</span>
|
|
</div>
|
|
<div class="body">
|
|
你要是愿意，我就永远爱你，你要是不愿意，我就永远相思
|
|
</div>
|
|
<div class="footer">9小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="card">
|
|
<div class="header">
|
|
<img class="avatar" src="../../assets/images/avatar.jpg"></img><span class="title">Jmys</span>
|
|
</div>
|
|
<div class="body">
|
|
在所谓'人世间'摸爬滚打至今，我唯一愿意是为真理的，一切都会过去
|
|
</div>
|
|
<div class="footer">9小时前</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">开源动态</div>
|
|
<div class="layui-card-body">
|
|
<script src='https://gitee.com/Jmysy/Pear-One-Layui/widget_preview' async defer></script>
|
|
<div id="osc-gitee-widget-tag"></div>
|
|
<style>
|
|
.osc_pro_color {color: #4183c4 !important;}
|
|
.osc_panel_color {background-color: #ffffff !important;}
|
|
.osc_background_color {background-color: #ffffff !important;}
|
|
.osc_border_color {border-color: #e3e9ed !important;}
|
|
.osc_desc_color {color: #666666 !important;}
|
|
.osc_link_color * {color: #9b9b9b !important;}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">最近更新</div>
|
|
<div class="layui-card-body">
|
|
<ul class="list">
|
|
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2019-12-15 11:28</span></li>
|
|
<li class="list-item"><span class="title">可视化配置选项卡样式</span><span class="footer">2019-12-14 10:30</span></li>
|
|
<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span></li>
|
|
<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span></li>
|
|
<li class="list-item"><span class="title">加入第三方消息通知</span><span class="footer">2019-12-5 22:18</span></li>
|
|
<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span></li>
|
|
<li class="list-item"><span class="title">框架正式开源</span><span class="footer">2019-11-27 07:23</span></li>
|
|
<li class="list-item"><button class="layui-btn layui-btn-normal layui-btn-fluid">查 看 更 多</button></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">版本信息</div>
|
|
<div class="layui-card-body">
|
|
<table class="layui-table">
|
|
<thead>
|
|
<tr>
|
|
<th>脚手框架</th>
|
|
<th>Pear One</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>开源作者</td>
|
|
<td>就 眠 仪 式</td>
|
|
</tr>
|
|
<tr>
|
|
<td>当前版本</td>
|
|
<td>1.0.1 Version</td>
|
|
</tr>
|
|
<tr>
|
|
<td>基于框架</td>
|
|
<td>Layui | JQuery | awesome</td>
|
|
</tr>
|
|
<tr>
|
|
<td>开源协议</td>
|
|
<td>Apache License</td>
|
|
</tr>
|
|
<tr>
|
|
<td>开发周期</td>
|
|
<td>2019 年 11 月 15 日</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>下载渠道</td>
|
|
<td>
|
|
<button class="layui-btn layui-btn-normal layui-btn-sm">
|
|
<i class="fa fa-gitlab"></i><span> 码 云</span>
|
|
</button>
|
|
<button class="layui-btn layui-btn-primary layui-btn-sm">
|
|
<i class="fa fa-github"></i><span> Git Hub</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<script src="../../component/layui/layui.js"></script>
|
|
<script>
|
|
layui.use(['carousel', 'form'], function() {
|
|
var carousel = layui.carousel,
|
|
form = layui.form;
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|