theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: 物料市场

Browse Source
This commit is contained in:
就眠儀式 2022-02-19 02:36:46 +08:00
parent 9be325abbd
commit d64fdd71e6
1 changed files with 77 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
example/src/view/material.vue
View File

@ -2,9 +2,31 @@
<div class="alone-banner layui-bg-black">
<div class="layui-main">
<h1>物 料 市 场</h1>
<p class="layui-hide-xs">
让 轮 子 产 生 价 值
</p>
<p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨</p>
</div>
</div>
<br />
<div class="layui-container" style="width: 80%">
<div class="layui-row">
<div class="layui-col layui-col-md6">
<div class="project-list-item">
<img
class="project-list-item-cover"
src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"
/>
<div class="project-list-item-body">
<h2>Sandbox</h2>
<div class="project-list-item-text layui-text">
生命就像一盒巧克力，结果往往出人意料
</div>
<div class="project-list-item-desc">
<span class="time">几秒前</span>
<div class="ew-head-list"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -31,6 +53,44 @@
.alone-banner p {
padding-top: 20px;
color: #e2e2e2;
color: rgba(255,255,255,.8);
color: rgba(255, 255, 255, 0.8);
}
.project-list-item {
background-color: #fff;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.project-list-item .project-list-item-cover {
width: 100%;
height: 180px;
display: block;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.project-list-item-body {
padding: 20px;
border: 1px solid #e8e8e8;
}
.project-list-item .project-list-item-body > h2 {
font-size: 16px;
color: #333;
margin-bottom: 12px;
}
.project-list-item .project-list-item-text {
height: 40px;
overflow: hidden;
margin-bottom: 12px;
font-size: 14px;
}
.project-list-item .project-list-item-desc .time {
color: #999;
font-size: 12px;
}
</style>