mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-09 21:52:48 +08:00
重构课程侧边列表
This commit is contained in:
@@ -148,35 +148,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
|
||||||
<legend>课程侧边列表</legend>
|
|
||||||
<div class="layui-field-box ">
|
|
||||||
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
|
|
||||||
<div class="ul-course-sidebar-list">
|
|
||||||
<a class="ul-course-sidebar-item" data-repeat="4">
|
|
||||||
<div class="ul-course-sidebar-item-poster-container">
|
|
||||||
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-sidebar-item-info">
|
|
||||||
<div class="ul-course-sidebar-item-title">
|
|
||||||
PHP8最新特性介绍和演示
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-sidebar-item-options">
|
|
||||||
<div class="ul-course-sidebar-item-option-item ul-color-main">
|
|
||||||
免费
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-sidebar-item-option-item">
|
|
||||||
初级
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-sidebar-item-option-item">
|
|
||||||
3节课
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|||||||
@@ -1371,6 +1371,36 @@
|
|||||||
width: 110px;
|
width: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ul-course-sidebar-list .ul-course-sidebar-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.ul-course-sidebar-list .ul-course-sidebar-item:not(:last-child) {
|
||||||
|
border-bottom: 1px dotted #999;
|
||||||
|
}
|
||||||
|
.ul-course-sidebar-list .ul-course-sidebar-item-poster {
|
||||||
|
height: 50px;
|
||||||
|
width: 80px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.ul-course-sidebar-list .ul-course-sidebar-item-option-item {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.ul-course-sidebar-list .ul-course-sidebar-item-info {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.ul-course-sidebar-list .ul-course-sidebar-item-title {
|
||||||
|
line-height: 2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.ul-list-record .item-record {
|
.ul-list-record .item-record {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -2666,41 +2696,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul-course-sidebar-item {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item:not(:last-child) {
|
|
||||||
border-bottom: 1px dotted #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-poster {
|
|
||||||
height: 50px;
|
|
||||||
width: 80px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-option-item {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-info {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-title {
|
|
||||||
line-height: 2;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .layui-quote-gray {
|
body .layui-quote-gray {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|||||||
2
public/cdn/layui-ul.min.css
vendored
2
public/cdn/layui-ul.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -12,6 +12,7 @@
|
|||||||
@import './list/ul-avatar-list/index';
|
@import './list/ul-avatar-list/index';
|
||||||
@import './list/ul-avatar-sidebar-list/index';
|
@import './list/ul-avatar-sidebar-list/index';
|
||||||
@import './list/ul-book-item/index';
|
@import './list/ul-book-item/index';
|
||||||
|
@import './list/ul-course-sidebar-list/index';
|
||||||
@import './list/ul-list-record/index';
|
@import './list/ul-list-record/index';
|
||||||
@import './list/ul-music-list/index';
|
@import './list/ul-music-list/index';
|
||||||
@import './list/ul-order-list-simple-card/index';
|
@import './list/ul-order-list-simple-card/index';
|
||||||
|
|||||||
6
source/components/list/ul-course-sidebar-list/_index.env
Normal file
6
source/components/list/ul-course-sidebar-list/_index.env
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
title=课程侧边列表
|
||||||
|
padding=1
|
||||||
|
margin=0
|
||||||
|
gray=1
|
||||||
|
mobile=0
|
||||||
|
inner_margin=0
|
||||||
25
source/components/list/ul-course-sidebar-list/_index.html
Normal file
25
source/components/list/ul-course-sidebar-list/_index.html
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<div class="ul-course-sidebar-list">
|
||||||
|
<a class="ul-course-sidebar-item" data-repeat="4">
|
||||||
|
<div class="ul-course-sidebar-item-poster-container">
|
||||||
|
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-info">
|
||||||
|
<div class="ul-course-sidebar-item-title">
|
||||||
|
PHP8最新特性介绍和演示
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-options">
|
||||||
|
<div class="ul-course-sidebar-item-option-item ul-color-main">
|
||||||
|
免费
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-option-item">
|
||||||
|
初级
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-option-item">
|
||||||
|
3节课
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
5
source/components/list/ul-course-sidebar-list/_index.php
Normal file
5
source/components/list/ul-course-sidebar-list/_index.php
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
];
|
||||||
39
source/components/list/ul-course-sidebar-list/_index.scss
Normal file
39
source/components/list/ul-course-sidebar-list/_index.scss
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
.ul-course-sidebar-list {
|
||||||
|
|
||||||
|
.ul-course-sidebar-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul-course-sidebar-item:not(:last-child) {
|
||||||
|
border-bottom: 1px dotted #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul-course-sidebar-item-poster {
|
||||||
|
height: 50px;
|
||||||
|
width: 80px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul-course-sidebar-item-option-item {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul-course-sidebar-item-info {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul-course-sidebar-item-title {
|
||||||
|
line-height: 2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -841,42 +841,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.ul-course-sidebar-item {
|
|
||||||
display : flex;
|
|
||||||
padding : 8px 0;
|
|
||||||
align-items : center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item:not(:last-child) {
|
|
||||||
border-bottom: 1px dotted #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-poster {
|
|
||||||
height : 50px;
|
|
||||||
width : 80px;
|
|
||||||
background-size : cover;
|
|
||||||
background-position: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-option-item {
|
|
||||||
display : inline-block;
|
|
||||||
font-size: 12px;
|
|
||||||
color : #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-info {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-course-sidebar-item-title {
|
|
||||||
line-height : 2;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space : nowrap;
|
|
||||||
overflow : hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .layui-quote-gray {
|
body .layui-quote-gray {
|
||||||
background-color : #f0f0f0;
|
background-color : #f0f0f0;
|
||||||
color : #666;
|
color : #666;
|
||||||
|
|||||||
@@ -75,9 +75,7 @@
|
|||||||
<fieldset class="layui-elem-field layui-field-title no-parser">
|
<fieldset class="layui-elem-field layui-field-title no-parser">
|
||||||
<legend>{$vo.config.TITLE}</legend>
|
<legend>{$vo.config.TITLE}</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="desc markdown-body ">
|
|
||||||
{$vo.desc|raw}
|
|
||||||
</div>
|
|
||||||
<div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}" data-mobile="{$vo.config.MOBILE|default='0'}" data-inner-margin="{$vo.config.INNER_MARGIN|default='0'}">
|
<div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}" data-mobile="{$vo.config.MOBILE|default='0'}" data-inner-margin="{$vo.config.INNER_MARGIN|default='0'}">
|
||||||
<div class="">
|
<div class="">
|
||||||
<span>预览效果</span>
|
<span>预览效果</span>
|
||||||
@@ -127,6 +125,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="desc markdown-body ">
|
||||||
|
{$vo.desc|raw}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
{/volist}
|
{/volist}
|
||||||
|
|||||||
Reference in New Issue
Block a user