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-04-28 16:01:50 +08:00
parent a308ed7a2a
commit 51d5b7e159
8 changed files with 130 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
demo/pc/jumbotron.html Normal file
View File

@@ -0,0 +1,76 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>巨幕-清新底色</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray">
<div class="jumbotron clean">
<div class="main">
<div class="title">layui-ul</div>
<div class="desc">简洁、直观、强悍的纯SCSS组件库，让web开发更迅速、简单。</div>
<div class="option">
<a href="/" class="layui-btn layui-btn-normal">立即体验</a>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>巨幕-深色底色</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray">
<div class="jumbotron dark">
<div class="main">
<div class="title">layui-ul</div>
<div class="desc">欢迎使用layui-ul.
layui-ul是一套纯css的开源的样式库.
样式中集成了很多常见的组件面板,比如列表,导航,卡片,登陆注册表单等.
</div>
<div class="option">
<a href="/" class="layui-btn layui-btn-normal">立即体验</a>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>巨幕-偏心-深色底色</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray">
<div class="jumbotron left dark">
<div class="main">
<div class="title">layui-ul</div>
<div class="desc">欢迎使用layui-ul.
layui-ul是一套纯css的开源的样式库.
样式中集成了很多常见的组件面板,比如列表,导航,卡片,登陆注册表单等.
</div>
<div class="option">
<a href="/" class="layui-btn layui-btn-normal">立即体验</a>
</div>
</div>
</div>
</div>
</div>
</fieldset>

4
source/scss/jumbotron/_index.scss Normal file
View File

@@ -0,0 +1,4 @@
@import 'jumbotron';
@import 'jumbotron_dark';
@import 'jumbotron_clean';
@import 'jumbotron_left';

22
source/scss/jumbotron/_jumbotron.scss Normal file
View File

@@ -0,0 +1,22 @@
.jumbotron {
padding : 15px;
text-align: center;
.main {
margin : 20px auto;
max-width : 800px;
text-align: center;
.title {
font-size : 32px;
font-weight: 600;
}
.desc {
font-size : 18px;
line-height: 1.8;
margin : 25px auto;
}
}
}

5
source/scss/jumbotron/_jumbotron_clean.scss Normal file
View File

@@ -0,0 +1,5 @@
.jumbotron {
&.clean{
background-color: #fff;
}
}

6
source/scss/jumbotron/_jumbotron_dark.scss Normal file
View File

@@ -0,0 +1,6 @@
.jumbotron {
&.dark {
background-color: #1F2430;
color : #fff;
}
}

15
source/scss/jumbotron/_jumbotron_left.scss Normal file
View File

@@ -0,0 +1,15 @@
.jumbotron {
&.left {
.main {
text-align : left;
max-width : auto;
margin-left: 30px;
.desc {
max-width: 60%;
margin: 25px auto 25px 0;
}
}
}
}

1
source/scss/layui-ul.scss
View File

@@ -5,6 +5,7 @@
@import './fieldset/index';
@import './card/index';
@import './title/index';
@import './jumbotron/index';
/* 头部开始 */

2
view/admin/post/index.html
View File

@@ -71,7 +71,7 @@
</td>
<td>
<div class="layui-btn-container">
<a class="layui-btn layui-btn-sm" href="{:url('index/Post/read',['id'=>$vo.id])}">查看</a>
<a class="layui-btn layui-btn-sm" href="{$vo.read_url}">查看</a>
<a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
<div class="layui-btn layui-btn-sm delete">删除</div>
</div>