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

增加二维码卡片组件

Browse Source
This commit is contained in:
augushong
2023-04-15 17:52:54 +08:00
parent 2ed7ee5d5a
commit 2ad16c3c45
8 changed files with 147 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -870,6 +870,58 @@
margin-left: 10px; margin-left: 10px;
} }
.ul-card-qrcode {
position: relative;
min-width: 200px;
min-height: 100px;
display: inline-block;
background-color: #E2DFDF;
padding: 10px;
}
.ul-card-qrcode .header {
padding: 20px;
}
.ul-card-qrcode .body {
position: relative;
}
.ul-card-qrcode .body .main {
padding: 36px;
}
.ul-card-qrcode .body .main .img {
width: 300px;
}
.ul-card-qrcode__main {
background-color: #fff;
border-radius: 20px;
overflow: hidden;
}
.ul-card-qrcode__point-left {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #E2DFDF;
left: -10px;
top: 0;
}
.ul-card-qrcode__point-right {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #E2DFDF;
right: -10px;
top: 0;
}
.ul-card-qrcode__line {
position: absolute;
width: 100%;
height: 0;
border-bottom: 2px dashed #E2DFDF;
top: 8px;
left: 0;
}
.ul-easy-image { .ul-easy-image {
margin: 5px; margin: 5px;
border-radius: 15px; border-radius: 15px;

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

File diff suppressed because one or more lines are too long

BIN
public/static/images/qrcode.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

1
source/components/_index.scss
View File

@@ -1,3 +1,4 @@
@import './card/ul-card-qrcode/index';
@import './card/ul-easy-image/index'; @import './card/ul-easy-image/index';
@import './descriptions/ul-descriptions-info/index'; @import './descriptions/ul-descriptions-info/index';
@import './descriptions/ul-easy-item/index'; @import './descriptions/ul-easy-item/index';

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

@@ -0,0 +1,6 @@
title=二维码卡片
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

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

@@ -0,0 +1,25 @@
<div class="ul-card-qrcode">
<div class="ul-card-qrcode__main">
<div class="header">
<div class="ul-avatar-sidebar-list" >
<div class="ul-avatar-sidebar-list-item" >
<div class="ul-avatar-sidebar-list-item-img"></div>
<div class="ul-avatar-sidebar-list-item-info">
<div class="ul-avatar-sidebar-list-item-title">张三</div>
<div class="ul-avatar-sidebar-list-item-intro">法外狂徒不寂寞</div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="ul-card-qrcode__point-left"></div>
<div class="ul-card-qrcode__point-right"></div>
<div class="ul-card-qrcode__line"></div>
<div class="main">
<img class="img" src="/static/images/qrcode.jpg" alt="">
</div>
</div>
</div>
</div>

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

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

@@ -0,0 +1,62 @@
.ul-card-qrcode {
position: relative;
min-width: 200px;
min-height: 100px;
display: inline-block;
background-color: #E2DFDF;
padding: 10px;
.header {
padding: 20px;
}
.body {
position: relative;
.main {
padding: 36px;
.img {
width: 300px;
}
}
}
&__main {
background-color: #fff;
border-radius: 20px;
overflow: hidden;
}
&__point-left {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #E2DFDF;
left: -10px;
top: 0;
}
&__point-right {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #E2DFDF;
right: -10px;
top: 0;
}
&__line {
position: absolute;
width: 100%;
height: 0;
border-bottom: 2px dashed #E2DFDF;
top: 8px;
left: 0;
}
}