增加用户头像信息卡片

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

@@ -78,6 +78,10 @@
     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 {