steamCard.svg

<svg width="420" height="225" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <foreignObject width="420" height="225">
      <div xmlns="http://www.w3.org/1999/xhtml" class="container" style="padding: 10px;">
        <style>
        * {
          box-sizing: border-box;
          image-rendering: crisp-edges;
          image-rendering: -webkit-optimize-contrast;
          color: black;
          font-family: "Motiva Sans", "Microsoft YaHei", Arial, Helvetica, sans-serif;
          font-size: 16px;
          }
      
          html,
          body {
          margin: 0;
          padding: 3px;
          }
      
          p {
          margin: 0;
          padding: 0;
          }
      
          img {
          margin: 0;
          padding: 0;
          width: 25px;
          height: 25px;
          }
      
          ::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          }
      
          ::-webkit-scrollbar-track {
          border-radius: 3px;
          background: rgba(0, 0, 0, 0.06);
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
          }
      
          ::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background: rgba(0, 0, 0, 0.12);
          box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
          -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
          }
      
          .card {
          width: 400px;
          padding: 10px;
          background: white;
          border-radius: 10px;
          box-shadow: gray 0 0 10px;
          }
      
          .title {
          padding-left: 8px;
          font-size: 18px;
          }
      
          .title span {
          float: right;
          }
      
          .box {
          height: 161px;
          overflow-y: auto;
          }
      
          .box>ul {
          padding: 0 10px;
          margin: 15px 0 0 0;
          list-style: none;
          }
      
          .box>ul li {
          display: grid;
          grid-template-columns: 1.2fr 1fr 1.5fr;
          }
      
          .box>ul li+li {
          margin-top: 5px;
          padding-top: 5px;
          border-top: 1px solid #dcdfe6;
          }
      
          .one {
          display: flex;
          align-items: center;
          }
      
          .one .game-name {
            margin-left: 5px;
            width: 86px;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
      
          .two {
          display: flex;
          justify-content: center;
          align-items: center;
          }
      
          .two .time {
          font-weight: bold;
          font-size: 14px;
          color: #303133;
          }
      
          .three {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          }
      
          .three>div {
          font-size: 12px;
          }
        </style>

        <div class="card">
          <div class="title">🎮 Steam 最新动态 <span>（过去 2 周）</span></div>
          <div class="box">
            <ul>
              <li>
          <div class="one">
            <img
              src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/P8A0fwhp2uaVFqepSSyXNzl5Z5bgjLEmtOH4YaRAzFo5Ztx4EkrYX6Yx+tXvBFlba14Kt7a4jWaFo2jdD/vH8qwbvVNV+Gl7Fb3YfUtBc4glP8ArIx1259R6HqOhHIrw5TqznKMJa32/wAj9UpYXA4bC0MRiKCdOUVeVr2b/mXZ9+/yNCT4daLGymS32AnABncAn2+aszxL4PsvC+n/ANq2JuLa5t2VkaOUnDZwDz7nNdLd6PoXxH06K4ilEhTG2aE4kjP91h/Q/h61F8VpHt/CjKkRkWWVEds42DOc+/IA/Gop1antIxcne+qZtjctwiwletCjHkUbxlHW97+Wlip4R8QDw/8ADM6lNEWFvvVFJ/1hMhC/QZOPwNdNpt7pHxC0BsKs9tKNssL/AH429D6EdQRXHeFvHOl+GdAXRdXtbj7RE0kU0LwAjlycEE+9bWi/EfwnaI8NrD/Zsf3uLcIrH/gOc1NalPmlKMHe+jOzLMww3sqFKriIez9moyi1re3fbydzznXdI1X4W+IxPaSuLdyTDMfuyL/dcdyPT8a7bxVfTa98LYb+8gWC4l2SbEJx9/AP4jnHvW1qHxC8K6nF5F00V7GG4jlg3Ln1+YYrI8W+KdL8Q6UdG05GlllRRDHCoxkH5UABzngcYrZOpVlByhqnqzyqtLAZfSxUaGLUqc4vlhe9m/6svxP/2Q=="
              alt="" />
            <div class="game-name">Dota 2</div>
          </div>
          <div class="two">
            <div class="time">51.18 小时</div>
          </div>
          <div class="three">
            <div class="total">总时数 9289 小时</div>
            <div class="last-time">最后运行日期: 1/24/2025</div>
          </div>
        </li>
            </ul>
          </div>
        </div>

      </div>
    </foreignObject>
  </svg>