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

feat: 迁移卡片

Browse Source
This commit is contained in:
augushong
2025-08-15 10:29:34 +08:00
parent d115c8e06b
commit b5d74cb728
11 changed files with 110 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
demo/pc/card.html
View File

@@ -1,48 +1,3 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>详细属性卡片</legend>
<div class="layui-field-box">
<div class="ul-padding-md layui-bg-gray">
<div class="layui-card ul-card">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
</span>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>极简图标卡片</legend> <legend>极简图标卡片</legend>
<div class="layui-field-box"> <div class="layui-field-box">

12
public/cdn/layui-ul.css
View File

@@ -40,11 +40,11 @@
} }
.ul-bg-black { .ul-bg-black {
background-color: #393D49; background-color: #393d49;
} }
.ul-bg-dark { .ul-bg-dark {
background-color: #1F2430; background-color: #1f2430;
} }
.ul-color-main { .ul-color-main {
@@ -87,6 +87,10 @@
box-shadow: 0 0 3px #bbb; box-shadow: 0 0 3px #bbb;
} }
.data-item {
margin-right: 15px;
}
.ul-order-list-simple-card .item { .ul-order-list-simple-card .item {
box-shadow: 0 0 3px #ddd; box-shadow: 0 0 3px #ddd;
border-radius: 2px; border-radius: 2px;
@@ -2580,10 +2584,6 @@
cursor: pointer; cursor: pointer;
} }
.data-item {
margin-right: 15px;
}
.data-img .data-img-main { .data-img .data-img-main {
max-width: 120px; max-width: 120px;
margin: 5px; margin: 5px;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -1,4 +1,5 @@
@import './blockquote/layui-quote-gray/index'; @import './blockquote/layui-quote-gray/index';
@import './card/ul-card/index';
@import './card/ul-card-a/index'; @import './card/ul-card-a/index';
@import './card/ul-card-avatar-info/index'; @import './card/ul-card-avatar-info/index';
@import './card/ul-card-bank/index'; @import './card/ul-card-bank/index';

6
source/components/card/ul-card/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=详细属性卡片
padding=1
margin=0
gray=1
mobile=0
inner_margin=0

48
source/components/card/ul-card/_index.html Normal file
View File

@@ -0,0 +1,48 @@
<div class="layui-card ul-card">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img
class="data-img-main"
src="/static/images/view.jpg"
alt=""
>
<img
class="data-img-main"
src="/static/images/view.jpg"
alt=""
>
<img
class="data-img-main"
src="/static/images/view.jpg"
alt=""
>
</span>
</div>
</div>
</div>

0
source/components/card/ul-card/_index.md Normal file
View File

5
source/components/card/ul-card/_index.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
return [
];

3
source/components/card/ul-card/_index.scss Normal file
View File

@@ -0,0 +1,3 @@
.ul-card {
}

79
source/scss/_common.scss
View File

@@ -1,92 +1,93 @@
/* 通用类开始 */ /* 通用类开始 */
.ul-padding-md { .ul-padding-md {
padding: 15px; padding: 15px;
} }
.ul-margin-md { .ul-margin-md {
margin: 15px; margin: 15px;
} }
.ul-section { .ul-section {
margin-bottom: 15px; margin-bottom: 15px;
} }
.ul-inline-block { .ul-inline-block {
display: inline-block !important; display: inline-block !important;
margin-right: 15px; margin-right: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.ul-icon-exit { .ul-icon-exit {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: url("img/exit.png"); background-image: url("img/exit.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.ul-border-right { .ul-border-right {
border-right: 1px solid #bbb; border-right: 1px solid #bbb;
} }
.ul-bg-white { .ul-bg-white {
background-color: #fff; background-color: #fff;
} }
.ul-bg-gray { .ul-bg-gray {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.ul-bg-black { .ul-bg-black {
background-color: #393d49;
background-color: #393D49;
} }
.ul-bg-dark { .ul-bg-dark {
background-color: #1F2430; background-color: #1f2430;
} }
.ul-color-main { .ul-color-main {
color: #6cf !important; color: #6cf !important;
} }
.ul-color-white { .ul-color-white {
color: #fff !important; color: #fff !important;
} }
.ul-common-flex-list { .ul-common-flex-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.ul-common-flex-sb { .ul-common-flex-sb {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.ul-mobile-box { .ul-mobile-box {
width: 360px; width: 360px;
} }
/* 通用类结束 */ /* 通用类结束 */
.ul-demo-img-bg { .ul-demo-img-bg {
background-image: url("https://layui.ulthon.com/cdn/img/view.jpg"); background-image: url("https://layui.ulthon.com/cdn/img/view.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
&.circle { &.circle {
border-radius: 100%; border-radius: 100%;
} }
} }
.ul-demo-mobile-page { .ul-demo-mobile-page {
width: 360px; width: 360px;
height: 660px; height: 660px;
border: 0; border: 0;
box-shadow: 0 0 3px #bbb; box-shadow: 0 0 3px #bbb;
} }
.data-item {
margin-right: 15px;
}

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

@@ -63,9 +63,6 @@
cursor: pointer; cursor: pointer;
} }
.data-item {
margin-right: 15px;
}
.data-img .data-img-main { .data-img .data-img-main {
max-width: 120px; max-width: 120px;