// 卡片基础样式
.ul-card-a {
  box-sizing: border-box;
  width: 200px;
  display: flex;
  align-items: center;
  border: 1px solid $color-border;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;
  background-color: $color-white;
  color: $color-text;
  padding: $space-md;
  cursor: pointer;
  margin-right: $space-md;
  margin-bottom: $space-md;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
  
  &:hover {
    box-shadow: $shadow-base;
    border-color: $color-primary-base;
    transform: translateY(-2px);
  }
  
  // 状态变体
  &.dark {
    background-color: $color-dark-base;
    color: $color-white;
    border-color: $color-dark-hover;
    
    &__description {
      color: $color-text-placeholder;
    }
    
    &__image {
      background-color: $color-dark-hover;
      
      &::before {
        color: $color-text-placeholder;
      }
    }
  }
  
  &.primary {
    border-color: $color-primary-base;
    background-color: $color-primary-light;
    
    &__title {
      color: $color-primary-base;
    }
  }
  
  &.success {
    border-color: $color-success-base;
    background-color: $color-success-light;
    
    &__title {
      color: $color-success-base;
    }
  }
  
  &.warning {
    border-color: $color-warning-base;
    background-color: $color-warning-light;
    
    &__title {
      color: $color-warning-base;
    }
  }
  
  &.danger {
    border-color: $color-danger-base;
    background-color: $color-danger-light;
    
    &__title {
      color: $color-danger-base;
    }
  }
  
  &.info {
    border-color: $color-info-base;
    background-color: $color-info-light;
    
    &__title {
      color: $color-info-base;
    }
  }
  
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    
    &:hover {
      box-shadow: $shadow-sm;
      border-color: $color-border;
      transform: none;
    }
  }
  
  // 选中状态
  &.selected {
    border-color: $color-primary-base;
    box-shadow: 0 0 0 2px $color-primary-light;
    
    &:hover {
      box-shadow: 0 0 0 2px $color-primary-light, $shadow-base;
    }
  }
  
  // 加载状态
  &.loading {
    position: relative;
    overflow: hidden;
    
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: loading-shimmer 1.5s infinite;
    }
  }
  
  // 激活状态
  &.active {
    border-color: $color-primary-base;
    background-color: rgba($color-primary-base, 0.05);
    
    &__title {
      color: $color-primary-base;
      font-weight: $font-weight-bold;
    }
  }
}

.ul-card-a__media {
  flex: 0 0 40%;
  margin-right: $space-md;
}

.ul-card-a__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: $radius-base;
  background-color: $color-gray-light;
  display: flex;
  align-items: center;
  justify-content: center;

}

.ul-card-a__content {
  flex: 1;
  display: flex;
  align-items: center;
}

.ul-card-a__header {
  text-align: center;
  width: 100%;
}

.ul-card-a__title {
  font-size: $font-size-lg;
  font-weight: $font-weight-medium;
  line-height: 1.4;
  margin-bottom: $space-xs;
  @include text-ellipsis(2);
}

.ul-card-a__description {
  font-size: $font-size-sm;
  color: $color-text-secondary;
  line-height: 1.4;
  @include text-ellipsis(2);
}

// 响应式设计 Mixin
@mixin card-responsive($breakpoint) {
  @if $breakpoint == md {
    .ul-card-a {
      width: calc(50% - #{$space-md});
      margin-right: $space-md;
      margin-bottom: $space-md;
      padding: $space-sm;
      
      .ul-card-a__media {
        flex: 0 0 60px;
        margin-right: $space-sm;
      }
      
      .ul-card-a__image {
        aspect-ratio: 1;
      }
      
      .ul-card-a__title {
        font-size: $font-size-md;
        text-align: left;
      }
      
      .ul-card-a__description {
        font-size: $font-size-xs;
        text-align: left;
      }
    }
  }
  
  @if $breakpoint == sm {
    .ul-card-a {
      width: calc(50% - #{$space-sm});
      margin-right: $space-sm;
      margin-bottom: $space-sm;
      padding: $space-sm;
      flex-direction: column;
      text-align: center;
      
      .ul-card-a__media {
        flex: none;
        margin-right: 0;
        margin-bottom: $space-sm;
        width: 100%;
      }
      
      .ul-card-a__image {
        width: 60px;
        height: 60px;
        margin: 0 auto;
      }
      
      .ul-card-a__content {
        width: 100%;
      }
      
      .ul-card-a__header {
        text-align: center;
      }
      
      .ul-card-a__title {
        font-size: $font-size-sm;
        text-align: center;
      }
      
      .ul-card-a__description {
        font-size: $font-size-xs;
        text-align: center;
      }
    }
  }
}

// 响应式设计
@include media-breakpoint-down(md) {
  @include card-responsive(md);
}

// 小屏幕手机适配
@include media-breakpoint-down(sm) {
  @include card-responsive(sm);
}

// 动画定义
@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes card-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

// 点击涟漪效果
.ul-card-a {
  position: relative;
  overflow: hidden;
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba($color-primary-base, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
  }
  
  &:active::before {
    width: 100%;
    height: 100%;
    transition: width 0.3s ease, height 0.3s ease;
  }
  
  // 防止涟漪效果影响内容
  .ul-card-a__media,
  .ul-card-a__content {
    position: relative;
    z-index: 1;
  }
  
  // 脉冲动画效果
  &.pulse {
    animation: card-pulse 2s infinite;
  }
}

// 焦点状态
.ul-card-a:focus {
  outline: none;
  box-shadow: 0 0 0 2px $color-primary-light;
}

// 键盘导航支持
.ul-card-a:focus-visible {
  box-shadow: 0 0 0 2px $color-primary-base;
}

// 紧凑模式
.ul-card-a.compact {
  padding: $space-sm;
  
  &__media {
    flex: 0 0 40px;
    margin-right: $space-sm;
  }
  
  &__image {
    width: 40px;
    height: 40px;
  }
  
  &__title {
    font-size: $font-size-sm;
  }
  
  &__description {
    font-size: $font-size-xs;
  }
}

.ul-card-a {
  box-sizing: border-box;
  width: 200px;
  display: flex;
  align-items: center;
  border: 1px solid var(--ul-color-border);
  border-radius: 6px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  background-color: var(--ul-color-white);
  color: var(--ul-color-text);
  padding: 16px;
  cursor: pointer;
  margin-right: 16px;
  margin-bottom: 16px;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.ul-card-a:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--ul-color-primary-base);
  transform: translateY(-2px);
}
.ul-card-a.dark {
  background-color: var(--ul-color-dark-base);
  color: var(--ul-color-white);
  border-color: var(--ul-color-dark-hover);
}
.ul-card-a.dark__description {
  color: var(--ul-color-text-placeholder);
}
.ul-card-a.dark__image {
  background-color: var(--ul-color-dark-hover);
}
.ul-card-a.dark__image::before {
  color: var(--ul-color-text-placeholder);
}
.ul-card-a.primary {
  border-color: var(--ul-color-primary-base);
  background-color: var(--ul-color-primary-light);
}
.ul-card-a.primary__title {
  color: var(--ul-color-primary-base);
}
.ul-card-a.success {
  border-color: var(--ul-color-success-base);
  background-color: var(--ul-color-success-light);
}
.ul-card-a.success__title {
  color: var(--ul-color-success-base);
}
.ul-card-a.warning {
  border-color: var(--ul-color-warning-base);
  background-color: var(--ul-color-warning-light);
}
.ul-card-a.warning__title {
  color: var(--ul-color-warning-base);
}
.ul-card-a.danger {
  border-color: var(--ul-color-danger-base);
  background-color: var(--ul-color-danger-light);
}
.ul-card-a.danger__title {
  color: var(--ul-color-danger-base);
}
.ul-card-a.info {
  border-color: var(--ul-color-info-base);
  background-color: var(--ul-color-info-light);
}
.ul-card-a.info__title {
  color: var(--ul-color-info-base);
}
.ul-card-a.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ul-card-a.disabled:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  border-color: var(--ul-color-border);
  transform: none;
}
.ul-card-a.selected {
  border-color: var(--ul-color-primary-base);
  box-shadow: 0 0 0 2px var(--ul-color-primary-light);
}
.ul-card-a.selected:hover {
  box-shadow: 0 0 0 2px var(--ul-color-primary-light), 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.ul-card-a.loading {
  position: relative;
  overflow: hidden;
}
.ul-card-a.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loading-shimmer 1.5s infinite;
}
.ul-card-a.active {
  border-color: var(--ul-color-primary-base);
  background-color: rgba(var(--ul-color-primary-base), 0.05);
}
.ul-card-a.active__title {
  color: var(--ul-color-primary-base);
  font-weight: 700;
}
.ul-card-a__media {
  flex: 0 0 40%;
  margin-right: 16px;
}
.ul-card-a__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  background-color: var(--ul-color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ul-card-a__content {
  flex: 1;
  display: flex;
  align-items: center;
}
.ul-card-a__header {
  text-align: center;
  width: 100%;
}
.ul-card-a__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ul-card-a__description {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .ul-card-a {
    width: calc(50% - 16px);
    margin-right: 16px;
    margin-bottom: 16px;
    padding: 8px;
  }
  .ul-card-a .ul-card-a__media {
    flex: 0 0 60px;
    margin-right: 8px;
  }
  .ul-card-a .ul-card-a__image {
    aspect-ratio: 1;
  }
  .ul-card-a .ul-card-a__title {
    font-size: 14px;
    text-align: left;
  }
  .ul-card-a .ul-card-a__description {
    font-size: 10px;
    text-align: left;
  }
}
@media (max-width: 575.98px) {
  .ul-card-a {
    width: calc(50% - 8px);
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;
    flex-direction: column;
    text-align: center;
  }
  .ul-card-a .ul-card-a__media {
    flex: none;
    margin-right: 0;
    margin-bottom: 8px;
    width: 100%;
  }
  .ul-card-a .ul-card-a__image {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }
  .ul-card-a .ul-card-a__content {
    width: 100%;
  }
  .ul-card-a .ul-card-a__header {
    text-align: center;
  }
  .ul-card-a .ul-card-a__title {
    font-size: 12px;
    text-align: center;
  }
  .ul-card-a .ul-card-a__description {
    font-size: 10px;
    text-align: center;
  }
}
@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes card-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.ul-card-a {
  position: relative;
  overflow: hidden;
}
.ul-card-a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(var(--ul-color-primary-base), 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}
.ul-card-a:active::before {
  width: 100%;
  height: 100%;
  transition: width 0.3s ease, height 0.3s ease;
}
.ul-card-a .ul-card-a__media, .ul-card-a .ul-card-a__content {
  position: relative;
  z-index: 1;
}
.ul-card-a.pulse {
  animation: card-pulse 2s infinite;
}
.ul-card-a:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ul-color-primary-light);
}
.ul-card-a:focus-visible {
  box-shadow: 0 0 0 2px var(--ul-color-primary-base);
}
.ul-card-a.compact {
  padding: 8px;
}
.ul-card-a.compact__media {
  flex: 0 0 40px;
  margin-right: 8px;
}
.ul-card-a.compact__image {
  width: 40px;
  height: 40px;
}
.ul-card-a.compact__title {
  font-size: 12px;
}
.ul-card-a.compact__description {
  font-size: 10px;
}

<view class="ul-flex ul-flex-wrap">
    <!-- 基础卡片 -->
    <view class="ul-card-a">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">基础卡片</view>
                <view class="ul-card-a__description">这是基础卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 主要状态卡片 -->
    <view class="ul-card-a primary">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">主要卡片</view>
                <view class="ul-card-a__description">主要状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 成功状态卡片 -->
    <view class="ul-card-a success">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">成功卡片</view>
                <view class="ul-card-a__description">成功状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 警告状态卡片 -->
    <view class="ul-card-a warning">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">警告卡片</view>
                <view class="ul-card-a__description">警告状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 危险状态卡片 -->
    <view class="ul-card-a danger">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">危险卡片</view>
                <view class="ul-card-a__description">危险状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 信息状态卡片 -->
    <view class="ul-card-a info">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">信息卡片</view>
                <view class="ul-card-a__description">信息状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 深色主题卡片 -->
    <view class="ul-card-a dark">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">深色卡片</view>
                <view class="ul-card-a__description">深色主题卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 禁用状态卡片 -->
    <view class="ul-card-a disabled">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">禁用卡片</view>
                <view class="ul-card-a__description">禁用状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 选中状态卡片 -->
    <view class="ul-card-a selected">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">选中卡片</view>
                <view class="ul-card-a__description">选中状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 激活状态卡片 -->
    <view class="ul-card-a active">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">激活卡片</view>
                <view class="ul-card-a__description">激活状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 加载状态卡片 -->
    <view class="ul-card-a loading">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">加载卡片</view>
                <view class="ul-card-a__description">加载状态卡片说明</view>
            </view>
        </view>
    </view>
    <!-- 脉冲动画卡片 -->
    <view class="ul-card-a pulse">
        <view class="ul-card-a__media">
            <view class="ul-card-a__image ul-demo-view"></view>
        </view>
        <view class="ul-card-a__content">
            <view class="ul-card-a__header">
                <view class="ul-card-a__title">脉冲卡片</view>
                <view class="ul-card-a__description">脉冲动画效果卡片</view>
            </view>
        </view>
    </view>
</view>
<!-- 紧凑模式卡片 -->
<view class="ul-card-a compact">
    <view class="ul-card-a__media">
        <view class="ul-card-a__image ul-demo-view"></view>
    </view>
    <view class="ul-card-a__content">
        <view class="ul-card-a__header">
            <view class="ul-card-a__title">紧凑卡片</view>
            <view class="ul-card-a__description">紧凑模式卡片说明</view>
        </view>
    </view>
</view>
<!-- 全宽卡片 -->
<view class="ul-card-a" style="width: 100%;">
    <view class="ul-card-a__media">
        <view class="ul-card-a__image ul-demo-view"></view>
    </view>
    <view class="ul-card-a__content">
        <view class="ul-card-a__header">
            <view class="ul-card-a__title">全宽卡片 </view>
            <view class="ul-card-a__description">全宽模式卡片说明，适合在容器中占满宽度 </view>
        </view>
    </view>
</view>
<!-- 组合状态示例：主要+选中 -->
<view class="ul-card-a primary selected">
    <view class="ul-card-a__media">
        <view class="ul-card-a__image ul-demo-view"></view>
    </view>
    <view class="ul-card-a__content">
        <view class="ul-card-a__header">
            <view class="ul-card-a__title">组合状态</view>
            <view class="ul-card-a__description">主要状态 + 选中状态的组合示例</view>
        </view>
    </view>
</view>
<!-- 组合状态示例：成功+激活 -->
<view class="ul-card-a success active">
    <view class="ul-card-a__media">
        <view class="ul-card-a__image ul-demo-view"></view>
    </view>
    <view class="ul-card-a__content">
        <view class="ul-card-a__header">
            <view class="ul-card-a__title">组合状态</view>
            <view class="ul-card-a__description">成功状态 + 激活状态的组合示例</view>
        </view>
    </view>
</view>

.ul-card-bank {
    width: 249px;
    border: 1px solid $color-border;
    border-radius: $radius-base;
    box-shadow: $shadow-sm;
    display: inline-block;
    margin-right: $space-md;
    margin-bottom: $space-sm;
    color: $color-text-secondary;
    font-size: $font-size-sm;
    cursor: pointer;
    background: $color-white;

    &__header {
        @include flex(space-between, center);
        padding: $space-sm 0;
        margin: 0 $space-md;
        border-bottom: 1px dotted $color-border;
    }

    
    &__body {
        @include flex(space-between, center);
        height: 40px;
        padding: $space-sm $space-sm $space-lg 0;
    }

    &__footer {
        @include flex(space-between, center);
        padding: $space-xs $space-md;
        background: $bg-color-page;
        border-top: 1px solid $color-border;
    }

    &__line {
        width: 88px;
        height: 23px;
        font-weight: $font-weight-normal;
        text-align: center;
        background: $color-dark-base;
        border-radius: 0 $radius-base 0 0;
        font-size: $font-size-md;
        float: left;
    }

    &__line-triangle {
        width: 0;
        height: 3px;
        display: block;
        float: right;
        border-left: 9px solid transparent;
        border-bottom: 20px solid $color-white;
    }

    &__tips {
        color: $color-info-base;
        font-size: $font-size-md;
    }

    // 主题色变体
    @each $name, $color in $theme-colors {
        &.#{$name} {
            .ul-card-bank__line {
                background: $color;
            }
            
            .ul-card-bank__tips {
                color: $color;
            }
        }
    }

    &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

.ul-card-bank {
  width: 249px;
  border: 1px solid var(--ul-color-border);
  border-radius: 4px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  display: inline-block;
  margin-right: 16px;
  margin-bottom: 8px;
  color: var(--ul-color-text-secondary);
  font-size: 12px;
  cursor: pointer;
  background: var(--ul-color-white);
}
.ul-card-bank__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 8px 0;
  margin: 0 16px;
  border-bottom: 1px dotted var(--ul-color-border);
}
.ul-card-bank__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 40px;
  padding: 8px 8px 24px 0;
}
.ul-card-bank__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 4px 16px;
  background: var(--ul-bg-color-page);
  border-top: 1px solid var(--ul-color-border);
}
.ul-card-bank__line {
  width: 88px;
  height: 23px;
  font-weight: 400;
  text-align: center;
  background: var(--ul-color-dark-base);
  border-radius: 0 4px 0 0;
  font-size: 14px;
  float: left;
}
.ul-card-bank__line-triangle {
  width: 0;
  height: 3px;
  display: block;
  float: right;
  border-left: 9px solid transparent;
  border-bottom: 20px solid var(--ul-color-white);
}
.ul-card-bank__tips {
  color: var(--ul-color-info-base);
  font-size: 14px;
}
.ul-card-bank.primary .ul-card-bank__line {
  background: var(--ul-color-primary-base);
}
.ul-card-bank.primary .ul-card-bank__tips {
  color: var(--ul-color-primary-base);
}
.ul-card-bank.success .ul-card-bank__line {
  background: var(--ul-color-success-base);
}
.ul-card-bank.success .ul-card-bank__tips {
  color: var(--ul-color-success-base);
}
.ul-card-bank.danger .ul-card-bank__line {
  background: var(--ul-color-danger-base);
}
.ul-card-bank.danger .ul-card-bank__tips {
  color: var(--ul-color-danger-base);
}
.ul-card-bank.warning .ul-card-bank__line {
  background: var(--ul-color-warning-base);
}
.ul-card-bank.warning .ul-card-bank__tips {
  color: var(--ul-color-warning-base);
}
.ul-card-bank.info .ul-card-bank__line {
  background: var(--ul-color-info-base);
}
.ul-card-bank.info .ul-card-bank__tips {
  color: var(--ul-color-info-base);
}
.ul-card-bank.dark .ul-card-bank__line {
  background: var(--ul-color-dark-base);
}
.ul-card-bank.dark .ul-card-bank__tips {
  color: var(--ul-color-dark-base);
}
.ul-card-bank.light .ul-card-bank__line {
  background: var(--ul-color-light-base);
}
.ul-card-bank.light .ul-card-bank__tips {
  color: var(--ul-color-light-base);
}
.ul-card-bank.gray .ul-card-bank__line {
  background: var(--ul-color-gray-base);
}
.ul-card-bank.gray .ul-card-bank__tips {
  color: var(--ul-color-gray-base);
}
.ul-card-bank.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

<!-- 默认主题 -->
<view class="ul-card-bank">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">中国银行</view>
        <view class="ul-card-bank__number">尾号 ********123456</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">默认</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2021-03-15</view>
        <view class="ul-card-bank__name">**宏</view>
    </view>
</view>
<!-- 主要主题 -->
<view class="ul-card-bank primary">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">工商银行</view>
        <view class="ul-card-bank__number">尾号 ********654321</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">主要</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2021-06-20</view>
        <view class="ul-card-bank__name">**明</view>
    </view>
</view>
<!-- 成功主题 -->
<view class="ul-card-bank success">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">建设银行</view>
        <view class="ul-card-bank__number">尾号 ********789012</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">成功</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2021-09-10</view>
        <view class="ul-card-bank__name">**华</view>
    </view>
</view>
<!-- 危险主题 -->
<view class="ul-card-bank danger">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">农业银行</view>
        <view class="ul-card-bank__number">尾号 ********345678</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">危险</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2021-12-05</view>
        <view class="ul-card-bank__name">**芳</view>
    </view>
</view>
<!-- 警告主题 -->
<view class="ul-card-bank warning">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">交通银行</view>
        <view class="ul-card-bank__number">尾号 ********901234</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">警告</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2022-01-15</view>
        <view class="ul-card-bank__name">**强</view>
    </view>
</view>
<!-- 信息主题 -->
<view class="ul-card-bank info">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">招商银行</view>
        <view class="ul-card-bank__number">尾号 ********567890</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">信息</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2022-03-20</view>
        <view class="ul-card-bank__name">**丽</view>
    </view>
</view>
<!-- 深色主题 -->
<view class="ul-card-bank dark">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">邮政储蓄</view>
        <view class="ul-card-bank__number">尾号 ********112233</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">深色</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2022-05-25</view>
        <view class="ul-card-bank__name">**伟</view>
    </view>
</view>
<!-- 禁用状态 -->
<view class="ul-card-bank disabled">
    <view class="ul-card-bank__header">
        <view class="ul-card-bank__title">中信银行</view>
        <view class="ul-card-bank__number">尾号 ********445566</view>
    </view>
    <view class="ul-card-bank__body">
        <view class="ul-card-bank__line">
            <view class="ul-card-bank__line-triangle"></view>
        </view>
        <view class="ul-card-bank__tips">禁用</view>
    </view>
    <view class="ul-card-bank__footer">
        <view class="ul-card-bank__time">绑定日期:2022-07-30</view>
        <view class="ul-card-bank__name">**静</view>
    </view>
</view>

.ul-card-data {
  background-color: $color-white;
  border: 1px solid $color-border;
  border-radius: $radius-base;
  padding: $space-md;
  display: flex;
  flex-direction: column;
  border-top: 3px solid transparent; // 为状态色预留位置

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $space-sm;
    border-bottom: 1px solid $color-border;
    flex-wrap: wrap; // 允许内容换行
    gap: $space-sm; // 设置元素间距
  }

  &__tag {
    font-size: $font-size-sm;
    padding: 2px $space-xs;
    border-radius: $radius-sm;
    line-height: 1.5;
  }

  &__body {
    padding: $space-md 0;
    flex: 1;
  }

  &__main {
    display: grid;
    grid-template-columns: repeat(2, 1fr); // 固定为两列，更整齐
    gap: $space-md;
  }

  &__item {
    display: flex; // 改回 flex 布局
    justify-content: flex-start; // 两端对齐
    align-items: baseline;
    gap: $space-sm;
  }

  &__item-title {
    color: $color-text-secondary;
    white-space: nowrap; // 防止标题换行
  }


  &__item-value {
    font-weight: $font-weight-bold;
    text-align: right; // 值靠右对齐
  }


  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: $space-sm;
    border-top: 1px solid $color-border;
    flex-wrap: wrap; // 允许内容换行
    gap: $space-md;
  }
  

  &__footer-left,
  &__footer-right {
    display: flex;
    align-items: center;
    gap: $space-sm;
    flex-wrap: wrap; // 内部元素也允许换行
  }

  // 状态变体
  &.primary {
    border-top-color: $color-primary-base;
    .ul-card-data__tag {
      background-color: $color-primary-light;
      color: $color-primary-base;
    }
  }

  &.success {
    border-top-color: $color-success-base;
    .ul-card-data__tag {
      background-color: $color-success-light;
      color: $color-success-base;
    }
  }

  &.danger {
    border-top-color: $color-danger-base;
    .ul-card-data__tag {
      background-color: $color-danger-light;
      color: $color-danger-base;
    }
  }

  &.warning {
    border-top-color: $color-warning-base;
    .ul-card-data__tag {
      background-color: $color-warning-light;
      color: $color-warning-base;
    }
  }

  &.info {
    border-top-color: $color-info-base;
    .ul-card-data__tag {
      background-color: $color-info-light;
      color: $color-info-base;
    }
  }

  &.dark {
    border-top-color: $color-dark-base;
    .ul-card-data__tag {
      background-color: $color-dark-light;
      color: $color-dark-base;
    }
  }

  // 响应式设计
  @include media-breakpoint-down(sm) {
    padding: $space-sm;

    &__main {
      gap: $space-sm;
    }

    &__item {
      // 移动端保持 grid 布局，效果依然良好
    }
  }
}

.ul-card-data {
  background-color: var(--ul-color-white);
  border: 1px solid var(--ul-color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-top: 3px solid transparent;
}
.ul-card-data__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ul-color-border);
  flex-wrap: wrap;
  gap: 8px;
}
.ul-card-data__tag {
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  line-height: 1.5;
}
.ul-card-data__body {
  padding: 16px 0;
  flex: 1;
}
.ul-card-data__main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ul-card-data__item {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 8px;
}
.ul-card-data__item-title {
  color: var(--ul-color-text-secondary);
  white-space: nowrap;
}
.ul-card-data__item-value {
  font-weight: 700;
  text-align: right;
}
.ul-card-data__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--ul-color-border);
  flex-wrap: wrap;
  gap: 16px;
}
.ul-card-data__footer-left, .ul-card-data__footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ul-card-data.primary {
  border-top-color: var(--ul-color-primary-base);
}
.ul-card-data.primary .ul-card-data__tag {
  background-color: var(--ul-color-primary-light);
  color: var(--ul-color-primary-base);
}
.ul-card-data.success {
  border-top-color: var(--ul-color-success-base);
}
.ul-card-data.success .ul-card-data__tag {
  background-color: var(--ul-color-success-light);
  color: var(--ul-color-success-base);
}
.ul-card-data.danger {
  border-top-color: var(--ul-color-danger-base);
}
.ul-card-data.danger .ul-card-data__tag {
  background-color: var(--ul-color-danger-light);
  color: var(--ul-color-danger-base);
}
.ul-card-data.warning {
  border-top-color: var(--ul-color-warning-base);
}
.ul-card-data.warning .ul-card-data__tag {
  background-color: var(--ul-color-warning-light);
  color: var(--ul-color-warning-base);
}
.ul-card-data.info {
  border-top-color: var(--ul-color-info-base);
}
.ul-card-data.info .ul-card-data__tag {
  background-color: var(--ul-color-info-light);
  color: var(--ul-color-info-base);
}
.ul-card-data.dark {
  border-top-color: var(--ul-color-dark-base);
}
.ul-card-data.dark .ul-card-data__tag {
  background-color: var(--ul-color-dark-light);
  color: var(--ul-color-dark-base);
}
@media (max-width: 575.98px) {
  .ul-card-data {
    padding: 8px;
  }
  .ul-card-data__main {
    gap: 8px;
  }
}

<view class="ul-card-data success">
    <view class="ul-card-data__header">
        <view class="ul-text-bold">服务器状态 (Success)</view>
        <view class="ul-card-data__tag">运行中</view>
    </view>
    <view class="ul-card-data__body">
        <view class="ul-card-data__main">
            <view class="ul-card-data__item">
                <view class="ul-card-data__item-title">CPU:</view>
                <view class="ul-card-data__item-value">25%</view>
            </view>
            <view class="ul-card-data__item">
                <view class="ul-card-data__item-title">内存:</view>
                <view class="ul-card-data__item-value">60%</view>
            </view>
            <view class="ul-card-data__item">
                <view class="ul-card-data__item-title">硬盘:</view>
                <view class="ul-card-data__item-value">45%</view>
            </view>
            <view class="ul-card-data__item">
                <view class="ul-card-data__item-title">带宽:</view>
                <view class="ul-card-data__item-value">10.2 Mbps</view>
            </view>
        </view>
    </view>
    <view class="ul-card-data__footer">
        <view class="ul-card-data__footer-left">
            <view class="ul-text-sm ul-text-secondary">上次更新: 3分钟前</view>
        </view>
        <view class="ul-card-data__footer-right"><button class="ul-btn xs">刷新</button></view>
    </view>
</view>
<view class="ul-card-data danger" style="margin-top: 1rem;">
    <view class="ul-card-data__header">
        <view class="ul-text-bold">服务器状态 (Danger)</view>
        <view class="ul-card-data__tag">已宕机</view>
    </view>
</view>
<view class="ul-card-data warning" style="margin-top: 1rem;">
    <view class="ul-card-data__header">
        <view class="ul-text-bold">服务器状态 (Warning)</view>
        <view class="ul-card-data__tag">高负载</view>
    </view>
</view>
<view class="ul-card-data info" style="margin-top: 1rem;">
    <view class="ul-card-data__header">
        <view class="ul-text-bold">服务器状态 (Info)</view>
        <view class="ul-card-data__tag">维护中</view>
    </view>
</view>
<view class="ul-card-data primary" style="margin-top: 1rem;">
    <view class="ul-card-data__header">
        <view class="ul-text-bold">服务器状态 (Primary)</view>
        <view class="ul-card-data__tag">主节点</view>
    </view>
</view>
<view class="ul-card-data dark" style="margin-top: 1rem;">
    <view class="ul-card-data__header">
        <view class="ul-text-bold">服务器状态 (Dark)</view>
        <view class="ul-card-data__tag">离线</view>
    </view>
</view>

// 重新设计卡片组件样式
.ul-card-data-a {
  display: inline-flex;
  border: 1px solid $color-border;
  border-radius: $radius-lg;
  padding: $space-lg;
  margin-right: $space-md;
  margin-bottom: $space-md;
  background: $color-white;
  box-shadow: $shadow-sm;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: $shadow-base;
  }


  // 响应式设计
  @include media-breakpoint-down(md) {
    display: block;
    margin-right: 0;
    padding: $space-md;
  }

  &__title {
    padding-bottom: $space-md;
    color: $color-primary-base;
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;
    line-height: 1.1;
    letter-spacing: -0.5px;
  }

  &__options {
    @include flex(space-between, center);
    gap: $space-sm;
    width: 100%;
  }

  &__item {
    @include flex(center, center);
    gap: $space-xs;

    &:not(:last-child) {
      margin-right: $space-sm;
    }
  }

  // 重新设计图标样式 - 确保完美居中
  &__icon {
    @include flex(center, center);
    margin-right: $space-md;
    font-size: 1.8rem;
    background: linear-gradient(135deg, $color-primary-hover, $color-primary-base);
    padding: $space-md;
    color: $color-white;
    border-radius: $radius-lg;
    box-shadow: 0 4px 8px rgba($color-primary-base, 0.2);

    // 确保图标在容器中完美居中
    &::before {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }

  &__info {
    flex: 1;
    min-width: 0;
  }

  &__value {
    font-size: $font-size-xxl;
    color: $color-primary-base;
    font-weight: $font-weight-bold;
    margin-top: $space-xs;
    line-height: 1.1;
    letter-spacing: -0.5px;
  }

  &__main {
    @include flex(flex-start, center);
    width: 100%;

  }

  &__subtitle {
    line-height: $line-height-base;
    color: $color-text-secondary;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
  }

  &__stat-item {
    @include flex(center, center, column);
    padding: $space-lg $space-xl;
    text-align: center;
    color: $color-text-secondary;
    position: relative;
    flex: 1;
    text-align: center;

    &:not(:last-child) {
      border-right: 1px solid $color-border;
    }

    @include media-breakpoint-down(sm) {
      padding: $space-md $space-lg;

    }
  }

  &__stat-value {
    font-size: $font-size-xl;
    line-height: 1.3;
    font-weight: $font-weight-bold;
    color: $color-text;
    margin-bottom: $space-xs;
  }

  &__stat-title {
    font-size: $font-size-sm;
    color: $color-text-secondary;
    font-weight: $font-weight-normal;
  }

  // 主题色变体
  @each $name, $color in $theme-colors {
    &.#{$name} {
      .ul-card-data-a__icon {
        $hover-color: var(--ul-color-#{$name}-hover);
        background: linear-gradient(135deg, $hover-color, $color);
        box-shadow: 0 4px 8px rgba($color, 0.2);
      }
    }
  }



  // 变体样式
  &.type-a {
    flex-direction: column;
    min-width: 240px;
  }

  &.type-b {
    min-width: 300px;

    @include media-breakpoint-down(sm) {
      min-width: auto;
    }
  }

  &.type-c {
    display: flex;
    justify-content: space-around;
    padding: $space-md 0;

    @include media-breakpoint-down(sm) {
      min-width: auto;
    }
  }

  &.compact {
    padding: $space-md;

    #{&}__title {
      font-size: $font-size-xl;
      padding-bottom: $space-sm;
    }

    #{&}__value {
      font-size: $font-size-xl;
    }

    #{&}__icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      min-height: 48px;
      font-size: 1.4rem;
      padding: $space-sm;
    }
  }
}

.ul-card-data-a {
  display: inline-flex;
  border: 1px solid var(--ul-color-border);
  border-radius: 8px;
  padding: 24px;
  margin-right: 16px;
  margin-bottom: 16px;
  background: var(--ul-color-white);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.ul-card-data-a:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 767.98px) {
  .ul-card-data-a {
    display: block;
    margin-right: 0;
    padding: 16px;
  }
}
.ul-card-data-a__title {
  padding-bottom: 16px;
  color: var(--ul-color-primary-base);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.ul-card-data-a__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
.ul-card-data-a__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
.ul-card-data-a__item:not(:last-child) {
  margin-right: 8px;
}
.ul-card-data-a__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-right: 16px;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--ul-color-primary-hover), var(--ul-color-primary-base));
  padding: 16px;
  color: var(--ul-color-white);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(var(--ul-color-primary-base), 0.2);
}
.ul-card-data-a__icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ul-card-data-a__info {
  flex: 1;
  min-width: 0;
}
.ul-card-data-a__value {
  font-size: 20px;
  color: var(--ul-color-primary-base);
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.ul-card-data-a__main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.ul-card-data-a__subtitle {
  line-height: 1.5;
  color: var(--ul-color-text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.ul-card-data-a__stat-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 24px 32px;
  text-align: center;
  color: var(--ul-color-text-secondary);
  position: relative;
  flex: 1;
  text-align: center;
}
.ul-card-data-a__stat-item:not(:last-child) {
  border-right: 1px solid var(--ul-color-border);
}
@media (max-width: 575.98px) {
  .ul-card-data-a__stat-item {
    padding: 16px 24px;
  }
}
.ul-card-data-a__stat-value {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ul-color-text);
  margin-bottom: 4px;
}
.ul-card-data-a__stat-title {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  font-weight: 400;
}
.ul-card-data-a.primary .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-primary-hover), var(--ul-color-primary-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-primary-base), 0.2);
}
.ul-card-data-a.success .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-success-hover), var(--ul-color-success-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-success-base), 0.2);
}
.ul-card-data-a.danger .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-danger-hover), var(--ul-color-danger-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-danger-base), 0.2);
}
.ul-card-data-a.warning .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-warning-hover), var(--ul-color-warning-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-warning-base), 0.2);
}
.ul-card-data-a.info .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-info-hover), var(--ul-color-info-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-info-base), 0.2);
}
.ul-card-data-a.dark .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-dark-hover), var(--ul-color-dark-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-dark-base), 0.2);
}
.ul-card-data-a.light .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-light-hover), var(--ul-color-light-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-light-base), 0.2);
}
.ul-card-data-a.gray .ul-card-data-a__icon {
  background: linear-gradient(135deg, var(--ul-color-gray-hover), var(--ul-color-gray-base));
  box-shadow: 0 4px 8px rgba(var(--ul-color-gray-base), 0.2);
}
.ul-card-data-a.type-a {
  flex-direction: column;
  min-width: 240px;
}
.ul-card-data-a.type-b {
  min-width: 300px;
}
@media (max-width: 575.98px) {
  .ul-card-data-a.type-b {
    min-width: auto;
  }
}
.ul-card-data-a.type-c {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
}
@media (max-width: 575.98px) {
  .ul-card-data-a.type-c {
    min-width: auto;
  }
}
.ul-card-data-a.compact {
  padding: 16px;
}
.ul-card-data-a.compact__title {
  font-size: 18px;
  padding-bottom: 8px;
}
.ul-card-data-a.compact__value {
  font-size: 18px;
}
.ul-card-data-a.compact__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  font-size: 1.4rem;
  padding: 8px;
}

<view class="ul-title-section">type-a</view>
<!-- Type A: 余额卡片 -->
<view class="ul-card-data-a type-a" data-repeat="2">
    <view class="ul-card-data-a__title">509,778.80</view>
    <view class="ul-card-data-a__options">
        <view class="ul-card-data-a__item"><i class="ul-card-data-a__icon fa fa-wallet"></i> 余额</view>
        <view class="ul-card-data-a__item"><button class="ul-btn ul-btn-sm">充值</button> <button class="ul-btn ul-btn-sm">提现</button> <button class="ul-btn ul-btn-sm">记录</button></view>
    </view>
</view>
<view class="ul-title-section">type-b</view>
<!-- Type B: 数据卡片 -->
<view class="ul-card-data-a type-b" data-repeat="2">
    <view class="ul-card-data-a__main">
        <view class="ul-card-data-a__icon fa fa-chart-line"></view>
        <view class="ul-card-data-a__info">
            <view class="ul-card-data-a__subtitle">盈亏总额(元) </view>
            <view class="ul-card-data-a__value">0.00</view>
        </view>
    </view>
</view>
<view class="ul-title-section">type-c</view>
<!-- Type C: 统计卡片 -->
<view class="ul-card-data-a type-c">
    <view class="ul-card-data-a__stat-item" data-repeat="3">
        <view class="ul-card-data-a__stat-value">0</view>
        <view class="ul-card-data-a__stat-title">余额</view>
    </view>
</view>
<view class="ul-title-section">紧凑模式</view>
<!-- 紧凑模式示例 -->
<view class="ul-card-data-a type-b compact">
    <view class="ul-card-data-a__main">
        <view class="ul-card-data-a__icon fa fa-chart-bar"></view>
        <view class="ul-card-data-a__info">
            <view class="ul-card-data-a__subtitle">紧凑模式</view>
            <view class="ul-card-data-a__value">1,234.56</view>
        </view>
    </view>
</view>
<view class="ul-title-section">主题色变体</view>
<!-- 主题色变体 -->
<view class="ul-card-data-a type-b success">
    <view class="ul-card-data-a__main">
        <view class="ul-card-data-a__icon fa fa-check-circle"></view>
        <view class="ul-card-data-a__info">
            <view class="ul-card-data-a__subtitle">Success</view>
            <view class="ul-card-data-a__value">100%</view>
        </view>
    </view>
</view>
<view class="ul-card-data-a type-b danger">
    <view class="ul-card-data-a__main">
        <view class="ul-card-data-a__icon fa fa-times-circle"></view>
        <view class="ul-card-data-a__info">
            <view class="ul-card-data-a__subtitle">Danger</view>
            <view class="ul-card-data-a__value">-5.2%</view>
        </view>
    </view>
</view>
<view class="ul-card-data-a type-b warning">
    <view class="ul-card-data-a__main">
        <view class="ul-card-data-a__icon fa fa-exclamation-triangle"></view>
        <view class="ul-card-data-a__info">
            <view class="ul-card-data-a__subtitle">Warning</view>
            <view class="ul-card-data-a__value">3 Alerts</view>
        </view>
    </view>
</view>
<view class="ul-card-data-a type-b info">
    <view class="ul-card-data-a__main">
        <view class="ul-card-data-a__icon fa fa-info-circle"></view>
        <view class="ul-card-data-a__info">
            <view class="ul-card-data-a__subtitle">Info</view>
            <view class="ul-card-data-a__value">Updated</view>
        </view>
    </view>
</view>

.ul-card-data-simple {
  display: flex;
  gap: $space-md;
  background-color: $color-white;

  border-radius: $radius-md;
  box-shadow: $shadow-sm;
  justify-content: flex-start;

  &__item {
    padding: $space-md;
    border-radius: $radius-base;
    position: relative;


    &.line {
      border-right: 1px solid $color-border;
      padding-right: $space-lg;
    }

    &.main {
      background-color: rgba($color-primary-base, 0.1);
    }
  }

  &__title {
    font-size: $font-size-sm;
    color: $color-text-secondary;
    margin-bottom: $space-xs;
  }

  &__value {
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;
    color: $color-text;
  }

  &__rate {
    font-size: $font-size-sm;
    color: $color-text-secondary;
    margin-top: $space-xs;
    display: flex;
    align-items: center;

    &.up {
      color: $color-success-base;

      &::after {
        content: "↑";
      }
    }

    &.down {
      color: $color-danger-base;

      &::after {
        content: "↓";
      }
    }
  }

  // 主题色变体
  @each $theme,
  $color in $theme-colors {
    &.#{$theme} {
      background-color: $color;
      box-shadow: none;
      padding: $space-md;

      .ul-card-data-simple__item.line {
        border-color: rgba($color-white, 0.2);
      }

      .ul-card-data-simple__title,
      .ul-card-data-simple__rate {
        color: $color-white;
      }

      .ul-card-data-simple__value {
        color: $color-white;
      }


      .ul-card-data-simple__item:first-child {
        background-color: $color-white;

        .ul-card-data-simple__title,
        .ul-card-data-simple__rate {
          color: $color;
        }

        .ul-card-data-simple__value {
          color: $color;
        }
      }

      // 特殊处理 light 和 gray 主题的文本颜色
      @if $theme=='light' {

        .ul-card-data-simple__title,
        .ul-card-data-simple__rate {
          color: rgba($color-light-text, 0.7);
        }

        .ul-card-data-simple__value {
          color: $color-light-text;
        }

        .ul-card-data-simple__item:first-child {
          background-color: $color-white;

          .ul-card-data-simple__title,
          .ul-card-data-simple__rate {
            color: $color-black;
          }

          .ul-card-data-simple__value {
            color: $color-black;
          }
        }
      }

      @else if $theme=='gray' {

        .ul-card-data-simple__title,
        .ul-card-data-simple__rate {
          color: rgba($color-gray-text, 0.7);
        }

        .ul-card-data-simple__value {
          color: $color-gray-text;
        }

        .ul-card-data-simple__item:first-child {
          background-color: $color-white;

          .ul-card-data-simple__title,
          .ul-card-data-simple__rate {
            color: $color-black;
          }

          .ul-card-data-simple__value {
            color: $color-black;
          }
        }
      }
    }
  }
}

@charset "UTF-8";
.ul-card-data-simple {
  display: flex;
  gap: 16px;
  background-color: var(--ul-color-white);
  border-radius: 6px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  justify-content: flex-start;
}
.ul-card-data-simple__item {
  padding: 16px;
  border-radius: 4px;
  position: relative;
}
.ul-card-data-simple__item.line {
  border-right: 1px solid var(--ul-color-border);
  padding-right: 24px;
}
.ul-card-data-simple__item.main {
  background-color: rgba(var(--ul-color-primary-base), 0.1);
}
.ul-card-data-simple__title {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  margin-bottom: 4px;
}
.ul-card-data-simple__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ul-color-text);
}
.ul-card-data-simple__rate {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  margin-top: 4px;
  display: flex;
  align-items: center;
}
.ul-card-data-simple__rate.up {
  color: var(--ul-color-success-base);
}
.ul-card-data-simple__rate.up::after {
  content: "↑";
}
.ul-card-data-simple__rate.down {
  color: var(--ul-color-danger-base);
}
.ul-card-data-simple__rate.down::after {
  content: "↓";
}
.ul-card-data-simple.primary {
  background-color: var(--ul-color-primary-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.primary .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.primary .ul-card-data-simple__title, .ul-card-data-simple.primary .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.primary .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.primary .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.primary .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.primary .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-primary-base);
}
.ul-card-data-simple.primary .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-primary-base);
}
.ul-card-data-simple.success {
  background-color: var(--ul-color-success-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.success .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.success .ul-card-data-simple__title, .ul-card-data-simple.success .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.success .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.success .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.success .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.success .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-success-base);
}
.ul-card-data-simple.success .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-success-base);
}
.ul-card-data-simple.danger {
  background-color: var(--ul-color-danger-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.danger .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.danger .ul-card-data-simple__title, .ul-card-data-simple.danger .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.danger .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.danger .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.danger .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.danger .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-danger-base);
}
.ul-card-data-simple.danger .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-danger-base);
}
.ul-card-data-simple.warning {
  background-color: var(--ul-color-warning-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.warning .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.warning .ul-card-data-simple__title, .ul-card-data-simple.warning .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.warning .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.warning .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.warning .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.warning .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-warning-base);
}
.ul-card-data-simple.warning .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-warning-base);
}
.ul-card-data-simple.info {
  background-color: var(--ul-color-info-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.info .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.info .ul-card-data-simple__title, .ul-card-data-simple.info .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.info .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.info .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.info .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.info .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-info-base);
}
.ul-card-data-simple.info .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-info-base);
}
.ul-card-data-simple.dark {
  background-color: var(--ul-color-dark-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.dark .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.dark .ul-card-data-simple__title, .ul-card-data-simple.dark .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.dark .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.dark .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.dark .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.dark .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-dark-base);
}
.ul-card-data-simple.dark .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-dark-base);
}
.ul-card-data-simple.light {
  background-color: var(--ul-color-light-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.light .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.light .ul-card-data-simple__title, .ul-card-data-simple.light .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.light .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.light .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.light .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.light .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-light-base);
}
.ul-card-data-simple.light .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-light-base);
}
.ul-card-data-simple.light .ul-card-data-simple__title, .ul-card-data-simple.light .ul-card-data-simple__rate {
  color: rgba(var(--ul-color-light-text), 0.7);
}
.ul-card-data-simple.light .ul-card-data-simple__value {
  color: var(--ul-color-light-text);
}
.ul-card-data-simple.light .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.light .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.light .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-black);
}
.ul-card-data-simple.light .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-black);
}
.ul-card-data-simple.gray {
  background-color: var(--ul-color-gray-base);
  box-shadow: none;
  padding: 16px;
}
.ul-card-data-simple.gray .ul-card-data-simple__item.line {
  border-color: rgba(var(--ul-color-white), 0.2);
}
.ul-card-data-simple.gray .ul-card-data-simple__title, .ul-card-data-simple.gray .ul-card-data-simple__rate {
  color: var(--ul-color-white);
}
.ul-card-data-simple.gray .ul-card-data-simple__value {
  color: var(--ul-color-white);
}
.ul-card-data-simple.gray .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.gray .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.gray .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-gray-base);
}
.ul-card-data-simple.gray .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-gray-base);
}
.ul-card-data-simple.gray .ul-card-data-simple__title, .ul-card-data-simple.gray .ul-card-data-simple__rate {
  color: rgba(var(--ul-color-gray-text), 0.7);
}
.ul-card-data-simple.gray .ul-card-data-simple__value {
  color: var(--ul-color-gray-text);
}
.ul-card-data-simple.gray .ul-card-data-simple__item:first-child {
  background-color: var(--ul-color-white);
}
.ul-card-data-simple.gray .ul-card-data-simple__item:first-child .ul-card-data-simple__title, .ul-card-data-simple.gray .ul-card-data-simple__item:first-child .ul-card-data-simple__rate {
  color: var(--ul-color-black);
}
.ul-card-data-simple.gray .ul-card-data-simple__item:first-child .ul-card-data-simple__value {
  color: var(--ul-color-black);
}

<view class="ul-section">
    <view class="ul-card-data-simple">
        <view class="ul-card-data-simple__item line">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
            <view class="ul-card-data-simple__rate up">30%</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
            <view class="ul-card-data-simple__rate down">30%</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
            <view class="ul-card-data-simple__rate">30%</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple primary">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple success">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple danger">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple warning">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple info">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple dark">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple light">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-data-simple gray">
        <view class="ul-card-data-simple__item main">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">订单数量</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
        <view class="ul-card-data-simple__item">
            <view class="ul-card-data-simple__title">线下订单</view>
            <view class="ul-card-data-simple__value">120</view>
        </view>
    </view>
</view>

.ul-card-easy-image {
    box-sizing: border-box;
    border: 1px solid $color-border;
    border-radius: $radius-md;
    background-color: $color-white;
    box-shadow: $shadow-sm;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-base;
    }

    &__main {
        height: 160px;
        background-color: $color-bg;
    }

    &__footer {
        @include flex(space-between, center);
        padding: $space-sm $space-md;
    }

    &__title {
        font-size: $font-size-base;
        color: $color-text;
        font-weight: $font-weight-medium;
        @include text-ellipsis;
    }


    &__option {
        flex-shrink: 0;
    }
}

.ul-card-easy-image {
  box-sizing: border-box;
  border: 1px solid var(--ul-color-border);
  border-radius: 6px;
  background-color: var(--ul-color-white);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}
.ul-card-easy-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.ul-card-easy-image__main {
  height: 160px;
  background-color: var(--ul-color-bg);
}
.ul-card-easy-image__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 8px 16px;
}
.ul-card-easy-image__title {
  font-size: 14px;
  color: var(--ul-color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul-card-easy-image__option {
  flex-shrink: 0;
}

<view class="ul-card-easy-image">
    <view class="ul-card-easy-image__main ul-demo-view"></view>
    <view class="ul-card-easy-image__footer">
        <view class="ul-card-easy-image__title">画写板</view>
        <view class="ul-card-easy-image__option">
            <view class="ul-btn ul-btn-mini ul-btn-primary">立即咨询</view>
        </view>
    </view>
</view>

.ul-card-file {
    box-sizing: border-box;
    width: 240px;
    border: 1px solid $color-border;
    border-radius: $radius-md;
    background-color: $color-white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    flex-direction: column;

    &:hover {
        box-shadow: $shadow-base;
        border-color: $color-primary-base;
        transform: translateY(-2px);
    }


    &__main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: $space-md;
    }

    &__info {
        flex: 1;
        min-width: 0;
        margin-right: $space-sm;
    }

    &__name {
        font-size: $font-size-md;
        color: $color-text;
        font-weight: $font-weight-medium;
        @include text-ellipsis(2);
        margin-bottom: $space-xs;
        line-height: $line-height-base;
        min-height: calc(#{$font-size-md} * #{$line-height-base} * 2);
    }

    &__desc {
        font-size: $font-size-sm;
        color: $color-text-secondary;
    }

    &__icon {
        font-size: 48px;
        flex-shrink: 0;
        color: $color-text-placeholder;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
    }

    &__footer {
        display: flex;
        justify-content: space-between;
        padding: $space-sm $space-md;
        font-size: $font-size-sm;
        color: $color-text-secondary;
        border-top: 1px solid $color-border;
    }

    // File type variants
    &.excel { .ul-card-file__icon { color: #1D6F42; } }
    &.zipper { .ul-card-file__icon { color: #E8CA0E; } }
    &.word { .ul-card-file__icon { color: #2A5699; } }
    &.pdf { .ul-card-file__icon { color: #D93025; } }
    &.powerpoint { .ul-card-file__icon { color: #D24625; } }
    &.audio { .ul-card-file__icon { color: #F47C00; } }
    &.code { .ul-card-file__icon { color: #7E57C2; } }
    &.image { .ul-card-file__icon { color: #4285F4; } }
    &.video { .ul-card-file__icon { color: #E53935; } }
    &.text { .ul-card-file__icon { color: #5F6368; } }
    &.file { .ul-card-file__icon { color: $color-text-placeholder; } }
    &.link { .ul-card-file__icon { color: $color-primary-base; } }
}

.ul-card-file {
  box-sizing: border-box;
  width: 240px;
  border: 1px solid var(--ul-color-border);
  border-radius: 6px;
  background-color: var(--ul-color-white);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  flex-direction: column;
}
.ul-card-file:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--ul-color-primary-base);
  transform: translateY(-2px);
}
.ul-card-file__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
}
.ul-card-file__info {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}
.ul-card-file__name {
  font-size: 14px;
  color: var(--ul-color-text);
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 4px;
  line-height: 1.5;
  min-height: calc(14px * 1.5 * 2);
}
.ul-card-file__desc {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
}
.ul-card-file__icon {
  font-size: 48px;
  flex-shrink: 0;
  color: var(--ul-color-text-placeholder);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
.ul-card-file__footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  border-top: 1px solid var(--ul-color-border);
}
.ul-card-file.excel .ul-card-file__icon {
  color: #1D6F42;
}
.ul-card-file.zipper .ul-card-file__icon {
  color: #E8CA0E;
}
.ul-card-file.word .ul-card-file__icon {
  color: #2A5699;
}
.ul-card-file.pdf .ul-card-file__icon {
  color: #D93025;
}
.ul-card-file.powerpoint .ul-card-file__icon {
  color: #D24625;
}
.ul-card-file.audio .ul-card-file__icon {
  color: #F47C00;
}
.ul-card-file.code .ul-card-file__icon {
  color: #7E57C2;
}
.ul-card-file.image .ul-card-file__icon {
  color: #4285F4;
}
.ul-card-file.video .ul-card-file__icon {
  color: #E53935;
}
.ul-card-file.text .ul-card-file__icon {
  color: #5F6368;
}
.ul-card-file.file .ul-card-file__icon {
  color: var(--ul-color-text-placeholder);
}
.ul-card-file.link .ul-card-file__icon {
  color: var(--ul-color-primary-base);
}

<view class="ul-card-file excel ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.excel </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-excel fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file zipper ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.zipper </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-zipper fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file word ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.word </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-word fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file pdf ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.pdf </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-pdf fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file powerpoint ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.powerpoint </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-powerpoint fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file audio ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.audio </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-audio fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file code ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.code </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-code fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file image ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.image </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-image fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file video ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.video </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-video fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file text ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">核弹制作与发射 从入门到精通.text </view>
            <view class="ul-card-file__desc">75GB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-file-text fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file file ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">未知文件类型</view>
            <view class="ul-card-file__desc">1.2MB</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa-regular fa-file fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file link ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">这是一个外部链接</view>
            <view class="ul-card-file__desc">ului.design</view>
        </view>
        <view class="ul-card-file__icon"><i class="fa fa-link fa-fw"></i></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>
<view class="ul-card-file link ul-margin-xs">
    <view class="ul-card-file__main">
        <view class="ul-card-file__info">
            <view class="ul-card-file__name">这是一个图片图标</view>
            <view class="ul-card-file__desc">ului.design</view>
        </view>
        <view class="ul-card-file__icon ul-demo-icon"></view>
    </view>
    <view class="ul-card-file__footer"><span>来自ulthon邮箱</span> <span>2022年6月24日</span></view>
</view>

.ul-card-info {
    background-color: $color-white;
    border-radius: $radius-lg;
    box-shadow: $shadow-base;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &__header {
        height: 120px;
    }

    &__img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    &__body {
        padding: $space-md;
    }

    &__title {
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        color: $color-text;
        text-align: center;
    }

    &__line {
        height: 1px;
        background-color: $color-border;
        margin: $space-md 0;
    }

    &__info {
        display: flex;
        flex-direction: column;
        gap: $space-sm;
    }

    &__info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $font-size-base;
    }

    &__info-title {
        color: $color-text-secondary;
    }

    &__info-value {
        color: $color-text;
        font-weight: $font-weight-medium;
    }

    &__footer {
        padding: 0 $space-md $space-md;
    }
}

.ul-card-info {
  background-color: var(--ul-color-white);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ul-card-info__header {
  height: 120px;
}
.ul-card-info__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.ul-card-info__body {
  padding: 16px;
}
.ul-card-info__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ul-color-text);
  text-align: center;
}
.ul-card-info__line {
  height: 1px;
  background-color: var(--ul-color-border);
  margin: 16px 0;
}
.ul-card-info__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ul-card-info__info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.ul-card-info__info-title {
  color: var(--ul-color-text-secondary);
}
.ul-card-info__info-value {
  color: var(--ul-color-text);
  font-weight: 500;
}
.ul-card-info__footer {
  padding: 0 16px 16px;
}

<view class="ul-card-info">
    <view class="ul-card-info__header">
        <view class="ul-card-info__img" style="background-image: url('/static/images/view.jpg');"></view>
    </view>
    <view class="ul-card-info__body">
        <view class="ul-card-info__title">奥宏科技</view>
        <view class="ul-card-info__line"></view>
        <view class="ul-card-info__info">
            <view class="ul-card-info__info-item">
                <view class="ul-card-info__info-title">ID</view>
                <view class="ul-card-info__info-value">2369</view>
            </view>
            <view class="ul-card-info__info-item">
                <view class="ul-card-info__info-title">性别</view>
                <view class="ul-card-info__info-value">男</view>
            </view>
            <view class="ul-card-info__info-item">
                <view class="ul-card-info__info-title">工作时间</view>
                <view class="ul-card-info__info-value">3年</view>
            </view>
            <view class="ul-card-info__info-item">
                <view class="ul-card-info__info-title">地址</view>
                <view class="ul-card-info__info-value">山东省临沂市兰山区</view>
            </view>
        </view>
    </view>
    <view class="ul-card-info__footer">
        <view class="ul-btn fluid ul-btn-primary"><i class=""></i> 立即联系</view>
    </view>
</view>

.ul-card-message {
  background-color: $color-white;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;
  padding: $space-md;
  border: 1px solid $color-border;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: $space-sm;
    margin-bottom: $space-sm;
    border-bottom: 1px solid $color-border;
  }

  &__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: $color-text;
  }

  &__status {
    font-size: $font-size-sm;
    color: $color-text-secondary;
  }

  &__body {
    margin-bottom: $space-md;
  }

  &__item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: $space-sm;
    font-size: $font-size-base;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__item-title {
    color: $color-text-secondary;
    flex-shrink: 0;
    margin-right: $space-sm;
    width: 60px;
  }

  &__item-value {
    color: $color-text;
    word-break: break-all;
  }

  &__footer {
    @include flex(space-between, center);
    gap: $space-sm;
    padding-top: $space-md;
    border-top: 1px solid $color-border;
  }

  &__footer-left {
    font-size: $font-size-sm;
    color: $color-text-secondary;
  }

  &__footer-right {
    @include flex(flex-end, center);
    gap: $space-sm;
  }
}

.ul-card-message {
  background-color: var(--ul-color-white);
  border-radius: 6px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  padding: 16px;
  border: 1px solid var(--ul-color-border);
}
.ul-card-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ul-color-border);
}
.ul-card-message__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ul-color-text);
}
.ul-card-message__status {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
}
.ul-card-message__body {
  margin-bottom: 16px;
}
.ul-card-message__item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 8px;
  font-size: 14px;
}
.ul-card-message__item:last-child {
  margin-bottom: 0;
}
.ul-card-message__item-title {
  color: var(--ul-color-text-secondary);
  flex-shrink: 0;
  margin-right: 8px;
  width: 60px;
}
.ul-card-message__item-value {
  color: var(--ul-color-text);
  word-break: break-all;
}
.ul-card-message__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ul-color-border);
}
.ul-card-message__footer-left {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
}
.ul-card-message__footer-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

<view class="ul-card-message">
    <view class="ul-card-message__header">
        <view class="ul-card-message__title">奥宏科技·预约会议</view>
        <view class="ul-card-message__status">技术人员</view>
    </view>
    <view class="ul-card-message__body">
        <view class="ul-card-message__item">
            <view class="ul-card-message__item-title">预约时间</view>
            <view class="ul-card-message__item-value">2022年4月4日14:29:12</view>
        </view>
        <view class="ul-card-message__item">
            <view class="ul-card-message__item-title">地点</view>
            <view class="ul-card-message__item-value">一楼会议室</view>
        </view>
        <view class="ul-card-message__item">
            <view class="ul-card-message__item-title">备注</view>
            <view class="ul-card-message__item-value">备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容 </view>
        </view>
    </view>
    <view class="ul-card-message__footer">
        <view class="ul-card-message__footer-left">更新于: 20分钟前</view>
        <view class="ul-card-message__footer-right">
            <view class="ul-btn ul-btn-sm">取消</view>
            <view class="ul-btn ul-btn-sm ul-btn-primary">确认</view>
        </view>
    </view>
</view>

.ul-card-money {
    padding: $space-lg;
    border-radius: $radius-xl;
    color: $color-white;
    background-color: $color-primary-base; // 默认主题


    &__main {
        .ul-card-money__title {
            font-weight: $font-weight-bold;
            font-size: $font-size-sm;
        }

        .ul-card-money__option {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            margin-top: $space-sm;

            .ul-card-money__value {
                font-size: 26px; // 无对应变量，暂时保留
                font-weight: $font-weight-bold;
            }

            .ul-card-money__button {
                margin-left: $space-md;
                padding-bottom: $space-sm;
            }
        }
    }

    &__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        margin-top: $space-lg;

        .ul-card-money__label {
            font-size: $font-size-sm;
        }

        .ul-card-money__value {
            margin-top: $space-sm;
            font-size: $font-size-lg;
        }
    }

    // 主题色变体
    @each $theme, $colors in $theme-color-variants {
        &.#{$theme} {
            background-color: map-get($colors, "base");
            color: map-get($colors, "text");
        }
    }
}

.ul-card-money {
  padding: 24px;
  border-radius: 12px;
  color: var(--ul-color-white);
  background-color: var(--ul-color-primary-base);
}
.ul-card-money__main .ul-card-money__title {
  font-weight: 700;
  font-size: 12px;
}
.ul-card-money__main .ul-card-money__option {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: 8px;
}
.ul-card-money__main .ul-card-money__option .ul-card-money__value {
  font-size: 26px;
  font-weight: 700;
}
.ul-card-money__main .ul-card-money__option .ul-card-money__button {
  margin-left: 16px;
  padding-bottom: 8px;
}
.ul-card-money__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  margin-top: 24px;
}
.ul-card-money__footer .ul-card-money__label {
  font-size: 12px;
}
.ul-card-money__footer .ul-card-money__value {
  margin-top: 8px;
  font-size: 16px;
}
.ul-card-money.primary {
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-primary-text);
}
.ul-card-money.success {
  background-color: var(--ul-color-success-base);
  color: var(--ul-color-success-text);
}
.ul-card-money.danger {
  background-color: var(--ul-color-danger-base);
  color: var(--ul-color-danger-text);
}
.ul-card-money.warning {
  background-color: var(--ul-color-warning-base);
  color: var(--ul-color-warning-text);
}
.ul-card-money.info {
  background-color: var(--ul-color-info-base);
  color: var(--ul-color-info-text);
}
.ul-card-money.dark {
  background-color: var(--ul-color-dark-base);
  color: var(--ul-color-dark-text);
}
.ul-card-money.light {
  background-color: var(--ul-color-light-base);
  color: var(--ul-color-light-text);
}
.ul-card-money.gray {
  background-color: var(--ul-color-gray-base);
  color: var(--ul-color-gray-text);
}

<view class="ul-section">
    <view class="ul-card-money primary">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money success">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money danger">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money warning">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money info">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money dark">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money light">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-card-money gray">
        <view class="ul-card-money__main">
            <view class="ul-card-money__title">卡片余额 (元)</view>
            <view class="ul-card-money__option">
                <view class="ul-card-money__value">6,688.00</view>
                <view class="ul-card-money__button">
                    <view class="ul-btn ul-btn-mini">查看详情</view>
                </view>
            </view>
        </view>
        <view class="ul-card-money__footer">
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">昨日收益</view>
                <view class="ul-card-money__value">+12.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">本月收益</view>
                <view class="ul-card-money__value">+126.00</view>
            </view>
            <view class="ul-card-money__item">
                <view class="ul-card-money__label">累计收益</view>
                <view class="ul-card-money__value">+1,230.00</view>
            </view>
        </view>
    </view>
</view>

.ul-card-profile {
    &__main {
        padding: $space-md;
        background-color: $color-primary-base;
        color: $color-white;
        border-radius: $radius-md;
        position: relative;
    }

    &__header {
        font-size: $font-size-xxl;
        display: flex;
        margin-bottom: $space-md;
        align-items: center;
        flex-wrap: wrap;
        gap: $space-sm;
    }

    &__name {
        font-weight: $font-weight-bold;
    }

    &__badge {
        background-color: $color-warning-base;
        color: $color-white;
        padding: $space-xs $space-sm;
        border-radius: $radius-sm;
        font-size: $font-size-xs;
        font-weight: $font-weight-bold;
        line-height: 1;
    }

    &__field {
        font-size: $font-size-md;
        display: flex;
        margin-bottom: $space-sm;
        align-items: center;
        gap: $space-sm;
    }

    &__icon {
        flex-shrink: 0;
        width: 16px;
        text-align: center;
    }

    &__value {
        @include text-ellipsis(1);
    }
        &__footer {
        display: flex;
        font-size: $font-size-sm;
        justify-content: space-between;
        margin-top: $space-md;
        align-items: center;
        flex-wrap: wrap;
        gap: $space-sm;
        }

    &__meta {
        color: rgba($color-white, 0.8);
        }

    &__avatar {
        position: absolute;
        top: 0;
        right: 0;
        padding: $space-lg;
        z-index: 9;
    }

    // 颜色主题状态类
    &.primary &__main {
        background-color: $color-primary-base;
    }

    &.success &__main {
        background-color: $color-success-base;
    }

    &.danger &__main {
        background-color: $color-danger-base;
    }

    &.warning &__main {
        background-color: $color-warning-base;
    }

    &.info &__main {
        background-color: $color-info-base;
    }

    &.dark &__main {
        background-color: $color-dark-base;
    }

    &.light &__main {
        background-color: $color-light-base;
        color: $color-text;
    }

    &.gray &__main {
        background-color: $color-gray-base;
    }

    // 徽章颜色状态类
    &.primary &__badge {
        background-color: $color-primary-base;
    }

    &.success &__badge {
        background-color: $color-success-base;
    }

    &.danger &__badge {
        background-color: $color-danger-base;
    }

    &.warning &__badge {
        background-color: $color-warning-base;
    }

    &.info &__badge {
        background-color: $color-info-base;
    }

    &.dark &__badge {
        background-color: $color-dark-base;
    }

    &.light &__badge {
        background-color: $color-light-base;
        color: $color-text;
    }

    &.gray &__badge {
        background-color: $color-gray-base;
    }

    // Responsive design
    @include media-breakpoint-down(md) {
        &__header {
            font-size: $font-size-xl;
            margin-bottom: $space-sm;
}

        &__field {
            font-size: $font-size-sm;
            margin-bottom: $space-xs;
        }

        &__footer {
            font-size: $font-size-xs;
            flex-direction: column;
            align-items: flex-start;
            gap: $space-xs;
        }

        &__avatar {
            padding: $space-md;
        }
    }
}

.ul-card-profile__main {
  padding: 16px;
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-white);
  border-radius: 6px;
  position: relative;
}
.ul-card-profile__header {
  font-size: 20px;
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ul-card-profile__name {
  font-weight: 700;
}
.ul-card-profile__badge {
  background-color: var(--ul-color-warning-base);
  color: var(--ul-color-white);
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.ul-card-profile__field {
  font-size: 14px;
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  gap: 8px;
}
.ul-card-profile__icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.ul-card-profile__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul-card-profile__footer {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-top: 16px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ul-card-profile__meta {
  color: rgba(var(--ul-color-white), 0.8);
}
.ul-card-profile__avatar {
  position: absolute;
  top: 0;
  right: 0;
  padding: 24px;
  z-index: 9;
}
.ul-card-profile.primary .ul-card-profile__main {
  background-color: var(--ul-color-primary-base);
}
.ul-card-profile.success .ul-card-profile__main {
  background-color: var(--ul-color-success-base);
}
.ul-card-profile.danger .ul-card-profile__main {
  background-color: var(--ul-color-danger-base);
}
.ul-card-profile.warning .ul-card-profile__main {
  background-color: var(--ul-color-warning-base);
}
.ul-card-profile.info .ul-card-profile__main {
  background-color: var(--ul-color-info-base);
}
.ul-card-profile.dark .ul-card-profile__main {
  background-color: var(--ul-color-dark-base);
}
.ul-card-profile.light .ul-card-profile__main {
  background-color: var(--ul-color-light-base);
  color: var(--ul-color-text);
}
.ul-card-profile.gray .ul-card-profile__main {
  background-color: var(--ul-color-gray-base);
}
.ul-card-profile.primary .ul-card-profile__badge {
  background-color: var(--ul-color-primary-base);
}
.ul-card-profile.success .ul-card-profile__badge {
  background-color: var(--ul-color-success-base);
}
.ul-card-profile.danger .ul-card-profile__badge {
  background-color: var(--ul-color-danger-base);
}
.ul-card-profile.warning .ul-card-profile__badge {
  background-color: var(--ul-color-warning-base);
}
.ul-card-profile.info .ul-card-profile__badge {
  background-color: var(--ul-color-info-base);
}
.ul-card-profile.dark .ul-card-profile__badge {
  background-color: var(--ul-color-dark-base);
}
.ul-card-profile.light .ul-card-profile__badge {
  background-color: var(--ul-color-light-base);
  color: var(--ul-color-text);
}
.ul-card-profile.gray .ul-card-profile__badge {
  background-color: var(--ul-color-gray-base);
}
@media (max-width: 767.98px) {
  .ul-card-profile__header {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .ul-card-profile__field {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .ul-card-profile__footer {
    font-size: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ul-card-profile__avatar {
    padding: 16px;
  }
}

<view class="ul-card-profile">
    <view class="ul-card-profile__main">
        <view class="ul-card-profile__header">
            <view class="ul-card-profile__name">张三</view>
            <span class="ul-card-profile__badge">A类</span>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fas fa-phone"></i>
            <view class="ul-card-profile__value">13012341234</view>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fas fa-map-marker-alt"></i>
            <view class="ul-card-profile__value">山东省临沂市兰山区xxx街道xxx小区 </view>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fab fa-weixin"></i>
            <view class="ul-card-profile__value">13012341234</view>
        </view>
        <view class="ul-card-profile__footer">
            <view class="ul-card-profile__meta">创建者：奥古斯宏 </view>
            <view class="ul-card-profile__meta">创建时间：2023年5月20日16:24:17</view>
        </view>
        <view class="ul-card-profile__avatar">
            <view class="ul-demo-view circle" style="width: 48px;height: 48px;"></view>
        </view>
    </view>
</view>
<!-- 添加不同颜色主题的示例 -->
<view class="ul-card-profile success" style="margin-top: 16px;">
    <view class="ul-card-profile__main">
        <view class="ul-card-profile__header">
            <view class="ul-card-profile__name">李四</view>
            <span class="ul-card-profile__badge">B类</span>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fas fa-phone"></i>
            <view class="ul-card-profile__value">13112341234</view>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fas fa-map-marker-alt"></i>
            <view class="ul-card-profile__value">北京市朝阳区xxx街道xxx小区</view>
        </view>
        <view class="ul-card-profile__footer">
            <view class="ul-card-profile__meta">创建者：管理员 </view>
            <view class="ul-card-profile__meta">创建时间：2023年6月15日10:30:00</view>
        </view>
        <view class="ul-card-profile__avatar">
            <view class="ul-demo-view circle" style="width: 48px;height: 48px;"></view>
        </view>
    </view>
</view>
<view class="ul-card-profile warning" style="margin-top: 16px;">
    <view class="ul-card-profile__main">
        <view class="ul-card-profile__header">
            <view class="ul-card-profile__name">王五</view>
            <span class="ul-card-profile__badge">C类</span>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fas fa-phone"></i>
            <view class="ul-card-profile__value">13212341234</view>
        </view>
        <view class="ul-card-profile__field">
            <i class="ul-card-profile__icon fas fa-map-marker-alt"></i>
            <view class="ul-card-profile__value">上海市浦东新区xxx街道xxx小区</view>
        </view>
        <view class="ul-card-profile__footer">
            <view class="ul-card-profile__meta">创建者：系统 </view>
            <view class="ul-card-profile__meta">创建时间：2023年7月20日14:45:00</view>
        </view>
        <view class="ul-card-profile__avatar">
            <view class="ul-demo-view circle" style="width: 48px;height: 48px;"></view>
        </view>
    </view>
</view>

.ul-card-qrcode {
    width: 280px;
    box-shadow: $shadow-base;
    border-radius: $radius-lg;
    margin-right: $space-lg;
    margin-bottom: $space-lg;
    background-color: $color-white;
    transition: all .3s ease;

    &:hover {
        transform: translateY(-4px);
        box-shadow: $shadow-lg;
    }

    
    &__main {
        position: relative;
    }

    &__header {
        padding: $space-lg;
        background-color: $color-bg;
        border-radius: $radius-lg $radius-lg 0 0;
    }

    &__body {
        position: relative;
        padding: $space-lg;
    }

    &__point-left,
    &__point-right {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: $bg-color-page;
        border-radius: $radius-circle;
        top: -10px;
    }

    &__point-left {
        left: -10px;
    }

    &__point-right {
        right: -10px;
    }

    &__line {
        position: absolute;
        top: 0;
        left: $space-lg;
        right: $space-lg;
        height: 1px;
        background-image: linear-gradient(to right, $color-border 0%, $color-border 50%, transparent 50%);
        background-size: 12px 1px;
        background-repeat: repeat-x;
    }

    &__content {
        text-align: center;
    }

    &__img {
        width: 160px;
        height: 160px;
        margin: 0 auto;
        display: block;
    }

    &__desc {
        margin-top: $space-md;
        font-size: $font-size-sm;
        color: $color-text-secondary;
    }

    // 状态
    &.primary {
        .ul-card-qrcode__header {
            background-color: $color-primary-light;
        }
        .ul-avatar-sidebar-list-item-title {
            color: $color-primary-base;
        }
    }
}

// 响应式
@include media-breakpoint-down(sm) {
    .ul-card-qrcode {
        width: 100%;
        margin-right: 0;
    }
}

.ul-card-qrcode {
  width: 280px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-right: 24px;
  margin-bottom: 24px;
  background-color: var(--ul-color-white);
  transition: all 0.3s ease;
}
.ul-card-qrcode:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}
.ul-card-qrcode__main {
  position: relative;
}
.ul-card-qrcode__header {
  padding: 24px;
  background-color: var(--ul-color-bg);
  border-radius: 8px 8px 0 0;
}
.ul-card-qrcode__body {
  position: relative;
  padding: 24px;
}
.ul-card-qrcode__point-left, .ul-card-qrcode__point-right {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--ul-bg-color-page);
  border-radius: 50%;
  top: -10px;
}
.ul-card-qrcode__point-left {
  left: -10px;
}
.ul-card-qrcode__point-right {
  right: -10px;
}
.ul-card-qrcode__line {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background-image: linear-gradient(to right, var(--ul-color-border) 0%, var(--ul-color-border) 50%, transparent 50%);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}
.ul-card-qrcode__content {
  text-align: center;
}
.ul-card-qrcode__img {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: block;
}
.ul-card-qrcode__desc {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ul-color-text-secondary);
}
.ul-card-qrcode.primary .ul-card-qrcode__header {
  background-color: var(--ul-color-primary-light);
}
.ul-card-qrcode.primary .ul-avatar-sidebar-list-item-title {
  color: var(--ul-color-primary-base);
}
@media (max-width: 575.98px) {
  .ul-card-qrcode {
    width: 100%;
    margin-right: 0;
  }
}

<view class="ul-flex ul-flex-wrap">
    <!-- 基础样式 -->
    <view class="ul-card-qrcode">
        <view class="ul-card-qrcode__main">
            <view class="ul-card-qrcode__header">
                <view class="ul-avatar-sidebar-list">
                    <view class="ul-avatar-sidebar-item">
                        <view class="ul-avatar-sidebar-item__img ul-demo-avatar"></view>
                        <view class="ul-avatar-sidebar-item__info">
                            <view class="ul-avatar-sidebar-item__title">用户名称</view>
                            <view class="ul-avatar-sidebar-item__intro">这里是用户的简介信息...</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="ul-card-qrcode__body">
                <view class="ul-card-qrcode__point-left"></view>
                <view class="ul-card-qrcode__point-right"></view>
                <view class="ul-card-qrcode__line"></view>
                <view class="ul-card-qrcode__content">
                    <img class="ul-card-qrcode__img" src="/static/images/qrcode.jpg" alt="qrcode">
                    <view class="ul-card-qrcode__desc">扫码关注我们</view>
                </view>
            </view>
        </view>
    </view>
    <!-- primary 状态 -->
    <view class="ul-card-qrcode primary">
        <view class="ul-card-qrcode__main">
            <view class="ul-card-qrcode__header">
                <view class="ul-avatar-sidebar-list">
                    <view class="ul-avatar-sidebar-item">
                        <view class="ul-avatar-sidebar-item__img ul-demo-avatar"></view>
                        <view class="ul-avatar-sidebar-item__info">
                            <view class="ul-avatar-sidebar-item__title">用户名称</view>
                            <view class="ul-avatar-sidebar-item__intro">这里是用户的简介信息...</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="ul-card-qrcode__body">
                <view class="ul-card-qrcode__point-left"></view>
                <view class="ul-card-qrcode__point-right"></view>
                <view class="ul-card-qrcode__line"></view>
                <view class="ul-card-qrcode__content">
                    <img class="ul-card-qrcode__img" src="/static/images/qrcode.jpg" alt="qrcode">
                    <view class="ul-card-qrcode__desc">扫码有惊喜</view>
                </view>
            </view>
        </view>
    </view>
</view>

.ul-card-simple-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $space-md;
  margin: $space-sm;
  border-radius: $radius-md;
  background-color: $color-white;
  box-shadow: $shadow-sm;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  flex-shrink: 0;


  &:hover {
    box-shadow: $shadow-base;
    transform: translateY(-2px);
  }

  &__image {
    width: 48px;
    height: 48px;
    border-radius: $radius-circle;
    background-size: cover;
    background-position: center;
    margin-bottom: $space-sm;
    background-color: $color-bg;
  }

  &__title {
    font-size: $font-size-base;
    color: $color-text;
  }

  // 选中状态
  &.selected {
    border: 1px solid $color-primary-base;
    box-shadow: 0 0 0 2px rgba($color-primary-base, 0.2);
  }

  // 激活状态
  &.active {
    background-color: $color-primary-light;

    .ul-card-simple-icon__title {
      color: $color-primary-base;
      font-weight: $font-weight-bold;
    }
  }

  // 禁用状态
  &.disabled {
    cursor: not-allowed;
    background-color: $color-bg;
    opacity: 0.7;

    &:hover {
      box-shadow: $shadow-sm;
      transform: none;
    }

    .ul-card-simple-icon__title {
      color: $color-text-disabled;
    }
  }

  // 响应式设计
  @include media-breakpoint-down(md) {
    width: auto;
    height: auto;
    padding: $space-sm;
    flex: 1 1 calc(33.333% - #{$space-sm});
    min-width: 90px;

    &__image {
      width: 40px;
      height: 40px;
    }

    &__title {
      font-size: $font-size-sm;
    }
  }
}

.ul-card-simple-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 8px;
  border-radius: 6px;
  background-color: var(--ul-color-white);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  flex-shrink: 0;
}
.ul-card-simple-icon:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.ul-card-simple-icon__image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-bottom: 8px;
  background-color: var(--ul-color-bg);
}
.ul-card-simple-icon__title {
  font-size: 14px;
  color: var(--ul-color-text);
}
.ul-card-simple-icon.selected {
  border: 1px solid var(--ul-color-primary-base);
  box-shadow: 0 0 0 2px rgba(var(--ul-color-primary-base), 0.2);
}
.ul-card-simple-icon.active {
  background-color: var(--ul-color-primary-light);
}
.ul-card-simple-icon.active .ul-card-simple-icon__title {
  color: var(--ul-color-primary-base);
  font-weight: 700;
}
.ul-card-simple-icon.disabled {
  cursor: not-allowed;
  background-color: var(--ul-color-bg);
  opacity: 0.7;
}
.ul-card-simple-icon.disabled:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  transform: none;
}
.ul-card-simple-icon.disabled .ul-card-simple-icon__title {
  color: var(--ul-color-text-placeholder);
}
@media (max-width: 767.98px) {
  .ul-card-simple-icon {
    width: auto;
    height: auto;
    padding: 8px;
    flex: 1 1 calc(33.333% - 8px);
    min-width: 90px;
  }
  .ul-card-simple-icon__image {
    width: 40px;
    height: 40px;
  }
  .ul-card-simple-icon__title {
    font-size: 12px;
  }
}

<view class="ul-flex ul-flex-wrap">
    <view class="ul-card-simple-icon" data-repeat="3">
        <view class="ul-card-simple-icon__image ul-demo-icon"></view>
        <view class="ul-card-simple-icon__title">默认状态</view>
    </view>
    <view class="ul-card-simple-icon selected">
        <view class="ul-card-simple-icon__image ul-demo-icon"></view>
        <view class="ul-card-simple-icon__title">选中状态</view>
    </view>
    <view class="ul-card-simple-icon active">
        <view class="ul-card-simple-icon__image ul-demo-icon"></view>
        <view class="ul-card-simple-icon__title">激活状态</view>
    </view>
    <view class="ul-card-simple-icon disabled">
        <view class="ul-card-simple-icon__image ul-demo-icon"></view>
        <view class="ul-card-simple-icon__title">禁用状态</view>
    </view>
</view>