增加用户头像信息卡片

public/cdn/layui-ul.css

@@ -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;

source/components/_index.scss

@@ -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';

source/components/card/ul-card-avatar-info/_index.env

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

source/components/card/ul-card-avatar-info/_index.html

@@ -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>

source/components/card/ul-card-avatar-info/_index.php

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

source/components/card/ul-card-avatar-info/_index.scss

@@ -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;
+    }
+}

source/scss/_common.scss

@@ -13,17 +13,17 @@
 }
 
 .ul-inline-block {
-    display      : inline-block !important;
+    display: inline-block !important;
-    margin-right : 15px;
+    margin-right: 15px;
     margin-bottom: 15px;
 }
 
 .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;
 }
 
@@ -57,13 +57,13 @@
 }
 
 .ul-common-flex-list {
-    display  : flex;
+    display: flex;
     flex-wrap: wrap;
 }
 
 .ul-common-flex-sb {
-    display        : flex;
+    display: flex;
-    align-items    : center;
+    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-image: url("https://layui.ulthon.com/cdn/img/view.jpg");
-    background-size    : cover;
+    background-size: cover;
     background-position: center;
+
+    &.circel {
+        border-radius: 100%;
+    }
 }
 
 .ul-demo-mobile-page {
-    width     : 360px;
+    width: 360px;
-    height    : 660px;
+    height: 660px;
-    border    : 0;
+    border: 0;
     box-shadow: 0 0 3px #bbb;
 }