ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

基本完成生成命令

Browse Source
This commit is contained in:
augushong
2022-10-21 20:23:47 +08:00
parent 2d54586f09
commit 9db8fe1d5f
8 changed files with 179 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
source/components/_index.scss
View File

@@ -1,2 +1,3 @@
@import './list/ul-music-list/index';
@import './list/ul-order-list-simple-card/index';
@import './list/ul-order-list-simple-card/index';
@import './list/ul-site-group/index';

4
source/components/list/ul-site-group/_index.env Normal file
View File

@@ -0,0 +1,4 @@
title=站点导航
padding=1
margin=0
gray=1

93
source/components/list/ul-site-group/_index.html Normal file
View File

@@ -0,0 +1,93 @@
<div class="ul-site-group">
<div class="ul-site-group-header">
基础样式
</div>
<div class="ul-site-list">
<div class="ul-site-item" v-for="i in 5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
<div class="ul-site-item">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
高度修复
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
</div>
</div>
</div>
</div>
</div>
<div class="ul-site-group">
<div class="ul-site-group-header">
卡片
</div>
<div class="ul-site-list">
<div class="ul-site-item card" v-for="i in 5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
<div class="ul-site-item card">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
高度修复
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
</div>
</div>
</div>
</div>
</div>
<div class="ul-site-group">
<div class="ul-site-group-header">
卡片(修复高度)
</div>
<div class="ul-site-list">
<div class="ul-site-item card same-height" v-for="i in 5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
<div class="ul-site-item card small-height">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
高度修复
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
</div>
</div>
</div>
</div>
</div>

0
source/components/list/ul-site-group/_index.md Normal file
View File

77
source/components/list/ul-site-group/_index.scss Normal file
View File

@@ -0,0 +1,77 @@
.ul-site-group {
margin-bottom: 8px;
}
.ul-site-group-header {
font-size : 16px;
color : #333;
padding-bottom: 8px;
}
.ul-site-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
margin-top : 8px;
}
.ul-site-item {
width : 20%;
margin-right : 5%;
display : flex;
align-items : flex-start;
justify-content: flex-start;
margin-bottom : 15px;
&.card {
background-color: #fff;
border-radius : 5px;
padding : 10px;
margin-right : 15px;
}
&.same-height {
align-self: normal;
}
}
.ul-site-item-logo {
width : 34px;
height : 34px;
margin-right : 8px;
margin-top : 4px;
background-size : cover;
background-position: center;
}
.ul-site-item-info {
width: calc(100% - 34px);
}
.ul-site-item-title {
color : #4662d9;
font-weight : bold;
text-decoration: none;
}
.ul-site-item-desc {
font-size: 12px;
color : #666;
}
@media screen and (max-width:450px) {
.ul-site-item {
width: 49%;
}
.ul-site-item-desc {
font-size : 11px;
margin-top: 3px;
}
}

77
source/scss/list/_ul-site-list.scss
View File

@@ -1,77 +0,0 @@
.ul-site-group {
margin-bottom: 8px;
}
.ul-site-group-header {
font-size : 16px;
color : #333;
padding-bottom: 8px;
}
.ul-site-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
margin-top : 8px;
}
.ul-site-item {
width : 20%;
margin-right : 5%;
display : flex;
align-items : flex-start;
justify-content: flex-start;
margin-bottom : 15px;
&.card {
background-color: #fff;
border-radius : 5px;
padding : 10px;
margin-right : 15px;
}
&.same-height {
align-self: normal;
}
}
.ul-site-item-logo {
width : 34px;
height : 34px;
margin-right : 8px;
margin-top : 4px;
background-size : cover;
background-position: center;
}
.ul-site-item-info {
width: calc(100% - 34px);
}
.ul-site-item-title {
color : #4662d9;
font-weight : bold;
text-decoration: none;
}
.ul-site-item-desc {
font-size: 12px;
color : #666;
}
@media screen and (max-width:450px) {
.ul-site-item {
width: 49%;
}
.ul-site-item-desc {
font-size : 11px;
margin-top: 3px;
}
}