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">
<legend>极简图标卡片</legend>
<div class="layui-field-box">

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

@@ -40,11 +40,11 @@
}
.ul-bg-black {
background-color: #393D49;
background-color: #393d49;
}
.ul-bg-dark {
background-color: #1F2430;
background-color: #1f2430;
}
.ul-color-main {
@@ -87,6 +87,10 @@
box-shadow: 0 0 3px #bbb;
}
.data-item {
margin-right: 15px;
}
.ul-order-list-simple-card .item {
box-shadow: 0 0 3px #ddd;
border-radius: 2px;
@@ -2580,10 +2584,6 @@
cursor: pointer;
}
.data-item {
margin-right: 15px;
}
.data-img .data-img-main {
max-width: 120px;
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 './card/ul-card/index';
@import './card/ul-card-a/index';
@import './card/ul-card-avatar-info/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 {
padding: 15px;
padding: 15px;
}
.ul-margin-md {
margin: 15px;
margin: 15px;
}
.ul-section {
margin-bottom: 15px;
margin-bottom: 15px;
}
.ul-inline-block {
display: inline-block !important;
margin-right: 15px;
margin-bottom: 15px;
display: inline-block !important;
margin-right: 15px;
margin-bottom: 15px;
}
.ul-icon-exit {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("img/exit.png");
background-size: cover;
background-position: center;
display: inline-block;
width: 16px;
height: 16px;
background-image: url("img/exit.png");
background-size: cover;
background-position: center;
}
.ul-border-right {
border-right: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.ul-bg-white {
background-color: #fff;
background-color: #fff;
}
.ul-bg-gray {
background-color: #f0f0f0;
background-color: #f0f0f0;
}
.ul-bg-black {
background-color: #393D49;
background-color: #393d49;
}
.ul-bg-dark {
background-color: #1F2430;
background-color: #1f2430;
}
.ul-color-main {
color: #6cf !important;
color: #6cf !important;
}
.ul-color-white {
color: #fff !important;
color: #fff !important;
}
.ul-common-flex-list {
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.ul-common-flex-sb {
display: flex;
align-items: center;
justify-content: space-between;
display: flex;
align-items: center;
justify-content: space-between;
}
.ul-mobile-box {
width: 360px;
width: 360px;
}
/* 通用类结束 */
.ul-demo-img-bg {
background-image: url("https://layui.ulthon.com/cdn/img/view.jpg");
background-size: cover;
background-position: center;
background-image: url("https://layui.ulthon.com/cdn/img/view.jpg");
background-size: cover;
background-position: center;
&.circle {
border-radius: 100%;
}
&.circle {
border-radius: 100%;
}
}
.ul-demo-mobile-page {
width: 360px;
height: 660px;
border: 0;
box-shadow: 0 0 3px #bbb;
}
width: 360px;
height: 660px;
border: 0;
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;
}
.data-item {
margin-right: 15px;
}
.data-img .data-img-main {
max-width: 120px;