CSS通用优惠券样式

C+ 安口木2025-10-01 16:26
样式如图：
这么点模块css还挺多的，写个demo方便CV
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通用优惠券样式</title>
    <style>
      body {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .coupon-card {
        display: flex;
        width: 100%;
        max-width: 350px;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid red;
      }

      .coupon-left {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        border-right: 1px dashed #e8e8e8;
      }

      .coupon-image {
        width: 60px;
        height: 60px;
        border: 1px solid green;
      }

      .coupon-middle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 50%;
        padding: 15px 12px;
        border-right: 1px dashed #e8e8e8;
      }

      .coupon-title {
        max-width: 140px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .coupon-condition {
        font-size: 12px;
        color: #999;
      }

      .coupon-right {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
      }

      .use-button {
        background-color: #1890ff;
        color: white;
        border: none;
        border-radius: 16px;
        padding: 6px 12px;
        font-size: 12px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="coupon-card">
      <div class="coupon-left">
        <img
          class="coupon-image"
          src="https://picsum.photos/200/300?random=1"
        />
      </div>

      <div class="coupon-middle">
        <div class="coupon-title">神州租车2天满减券州租车</div>
        <div class="coupon-condition">限指定商品可用</div>
      </div>

      <div class="coupon-right">
        <button class="use-button">去使用</button>
      </div>
    </div>
  </body>
</html>