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
2023-05-20 16:40:04 +08:00
parent 3b128a868b
commit 4090314532
9 changed files with 162 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,6 +76,9 @@
background-size: cover;
background-position: center;
}
.ul-demo-img-bg.circel {
border-radius: 100%;
}
.ul-demo-mobile-page {
width: 360px;
@@ -734,6 +737,46 @@
margin-left: 10px;
}
.ul-card-avatar-info .main {
padding: 12px;
background-color: #1E9FFF;
color: #fff;
border-radius: 6px;
position: relative;
}
.ul-card-avatar-info .main-title {
font-size: 22px;
display: flex;
margin-bottom: 14px;
align-items: center;
}
.ul-card-avatar-info .main-title .item {
margin-right: 6px;
}
.ul-card-avatar-info .item-title {
font-size: 14px;
display: flex;
margin-bottom: 8px;
align-items: center;
}
.ul-card-avatar-info .item-title .item {
margin-right: 6px;
}
.ul-card-avatar-info .footer-title {
display: flex;
font-size: 12px;
justify-content: space-between;
margin-top: 12px;
align-items: center;
}
.ul-card-avatar-info .fixed-container {
position: absolute;
top: 0;
right: 0;
padding: 15px;
z-index: 9;
}
.ul-card-data {
display: inline-block;
border: 1px solid #eee;

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,3 +1,4 @@
@import './card/ul-card-avatar-info/index';
@import './card/ul-card-data-a/index';
@import './card/ul-card-data-simple/index';
@import './card/ul-card-file/index';

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

@@ -0,0 +1,6 @@
title=用户头像信息卡片
padding=1
margin=0
gray=1
mobile=1
inner_margin=0

39
source/components/card/ul-card-avatar-info/_index.html Normal file
View File

@@ -0,0 +1,39 @@
<div class="ul-card-avatar-info">
<div class="main">
<div class="main-title">
<div class="item">
张三
</div>
<span class="item layui-badge layui-bg-orange">A类</span>
</div>
<div class="item-title">
<i class="item layui-icon layui-icon-cellphone"></i>
<div class="item">
13012341234
</div>
</div>
<div class="item-title">
<i class="item layui-icon layui-icon-location"></i>
<div class="item">
山东省临沂市兰山区xxx街道xxx小区
</div>
</div>
<div class="item-title">
<i class="item layui-icon layui-icon-login-wechat"></i>
<div class="item">
13012341234
</div>
</div>
<div class="footer-title">
<div class="item">
创建者：奥古斯宏
</div>
<div class="item">
创建时间：2023年5月20日16:24:17
</div>
</div>
<div class="fixed-container">
<div class="ul-demo-img-bg circel" style="width: 48px;height: 48px;"></div>
</div>
</div>
</div>

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

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

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

48
source/components/card/ul-card-avatar-info/_index.scss Normal file
View File

@@ -0,0 +1,48 @@
.ul-card-avatar-info {
.main {
padding: 12px;
background-color: #1E9FFF;
color: #fff;
border-radius: 6px;
position: relative;
}
.main-title {
font-size: 22px;
display: flex;
margin-bottom: 14px;
align-items: center;
.item {
margin-right: 6px;
}
}
.item-title {
font-size: 14px;
display: flex;
margin-bottom: 8px;
align-items: center;
.item {
margin-right: 6px;
}
}
.footer-title {
display: flex;
font-size: 12px;
justify-content: space-between;
margin-top: 12px;
align-items: center;
}
.fixed-container {
position: absolute;
top: 0;
right: 0;
padding: 15px;
z-index: 9;
}
}

34
source/scss/_common.scss
View File

@@ -13,17 +13,17 @@
}
.ul-inline-block {
display : inline-block !important;
margin-right : 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;
display: inline-block;
width: 16px;
height: 16px;
background-image: url("img/exit.png");
background-size: cover;
background-position: center;
}
@@ -57,13 +57,13 @@
}
.ul-common-flex-list {
display : flex;
display: flex;
flex-wrap: wrap;
}
.ul-common-flex-sb {
display : flex;
align-items : center;
display: flex;
align-items: center;
justify-content: space-between;
}
@@ -75,14 +75,18 @@
/* 通用类结束 */
.ul-demo-img-bg {
background-image : url("https://layui.ulthon.com/cdn/img/view.jpg");
background-size : cover;
background-image: url("https://layui.ulthon.com/cdn/img/view.jpg");
background-size: cover;
background-position: center;
&.circel {
border-radius: 100%;
}
}
.ul-demo-mobile-page {
width : 360px;
height : 660px;
border : 0;
width: 360px;
height: 660px;
border: 0;
box-shadow: 0 0 3px #bbb;
}