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

✨(component): update index.vue

Browse Source
This commit is contained in:
就眠儀式 2022-10-02 00:56:47 +08:00
parent 50802d31ce
commit 5b1426ee1b
1 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
package/document-component/src/view/index.vue
View File

@ -66,28 +66,46 @@
</div> </div>
<div class="box-list"> <div class="box-list">
<lay-row :space="30"> <lay-row :space="30">
<lay-col :md="6" :sm="12" :xs="12"> <lay-col :md="8" :sm="12" :xs="12">
<div class="box"> <div class="box">
<h1 class="title">🌈 Classic design</h1> <div class="icon">🐼</div>
<h2 class="title">Classic design</h2>
<p class="details">layui css.</p> <p class="details">layui css.</p>
</div> </div>
</lay-col> </lay-col>
<lay-col :md="6" :sm="12" :xs="12"> <lay-col :md="8" :sm="12" :xs="12">
<div class="box"> <div class="box">
<h1 class="title">🐝 Small volume</h1> <div class="icon">🐝</div>
<h2 class="title">Small volume</h2>
<p class="details">only 14.9 MB.</p> <p class="details">only 14.9 MB.</p>
</div> </div>
</lay-col> </lay-col>
<lay-col :md="6" :sm="12" :xs="12"> <lay-col :md="8" :sm="12" :xs="12">
<div class="box"> <div class="box">
<h1 class="title">🍬 Setup script</h1> <div class="icon">☀️</div>
<h2 class="title">Setup script</h2>
<p class="details">use grammar sugar.</p> <p class="details">use grammar sugar.</p>
</div> </div>
</lay-col> </lay-col>
<lay-col :md="6" :sm="12" :xs="12"> <lay-col :md="8" :sm="12" :xs="12">
<div class="box"> <div class="box">
<h1 class="title">😋 Quick build</h1> <div class="icon">🚀</div>
<p class="details">easy to use</p> <h2 class="title">Classic design</h2>
<p class="details">layui css.</p>
</div>
</lay-col>
<lay-col :md="8" :sm="12" :xs="12">
<div class="box">
<div class="icon">☁️</div>
<h2 class="title">Small volume</h2>
<p class="details">only 14.9 MB.</p>
</div>
</lay-col>
<lay-col :md="8" :sm="12" :xs="12">
<div class="box">
<div class="icon">⚡</div>
<h2 class="title">Setup script</h2>
<p class="details">use grammar sugar.</p>
</div> </div>
</lay-col> </lay-col>
</lay-row> </lay-row>
@ -103,7 +121,7 @@
> >
<lay-avatar <lay-avatar
src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png" src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png"
style="border-radius: 4px" style="border-radius: 2px"
></lay-avatar> ></lay-avatar>
</a> </a>
</lay-tooltip> </lay-tooltip>
@ -413,6 +431,7 @@ body {
.link-list { .link-list {
padding: 50px 250px; padding: 50px 250px;
border-top: 1px solid #eeeeee;
} }
.link-list .layui-col { .link-list .layui-col {
@ -421,16 +440,28 @@ body {
.box { .box {
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid rgba(60, 60, 60, 0.12); border: 1px solid #f9f9f9;
border-radius: 4px; border-radius: 4px;
padding: 24px; padding: 24px;
height: 100%; height: 100%;
} }
.box .icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
border-radius: 6px;
background-color: #e5e5e5;
width: 48px;
height: 48px;
font-size: 24px;
}
.box .title { .box .title {
line-height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 24px;
} }
.box .details { .box .details {
@ -438,7 +469,7 @@ body {
padding-top: 8px; padding-top: 8px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
color: rgba(60, 60, 60, 0.7); color: rgba(56 56 56 / 70%);
} }
.site-container .layui-field-title { .site-container .layui-field-title {