<div class="card">
  <div class="card__badge">本周特推</div>
  <div class="card__media">
    <img src="https://picsum.photos/800/800?random=2" alt="六一儿童节幼儿园舞台眼影盘亮片表演出亮晶晶闪粉学生彩妆化妆" />
  </div>
  <div class="card__content">
    <h3 class="card__heading">六一儿童节幼儿园舞台眼影盘亮片表演出亮晶晶闪粉学生彩妆化妆</h3>
    <p class="card__body">购后返100金币</p>
    <div class="card__footer">
      <div class="card__price">
        <div class="card__price--current">
          <span aria-hidden="true">&yen;</span>
          <strong aria-hidden="true">1</strong>
          <i class="sr-only">抢购价1元</i>
        </div>
        <div class="card__price--orgion" aria-hidden="true">&yen;280.06</div>
        <div class="sr-only">原价280.06元</div>
      </div>
      <button class="card__button">1元抢</button>
    </div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #ffce00;
  color: #fff;
}

.card {
  display: flex;
  background: #ffffff;
  position: relative;
}

.card__media {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
}

.card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.card__content > * {
  width: 100%;
}

.card__heading {
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 900;
}

.card__body {
  color: #5b5b5b;
}

.card__footer {
  display: flex;
  margin-top: auto;
  align-items: flex-end;
  justify-content: space-between;
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border: none 0;
  color: #fff;
  border-radius: 10rem;
  background-image: linear-gradient(180deg, #f74b4b 0%, #e32828 99%);
}

.card__price {
  display: flex;
  color: #5b5b5b;
  align-items: flex-end;
  line-height: 1;
}

.card__price--current {
  font-weight: 600;
  color: #ff1300;
}

.card__price--orgion {
  text-decoration: none;
  position: relative;
  bottom: 0.1325em;
}

.card__price--orgion::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background-color: currentColor;
  z-index: 2;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.card__badge {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(180deg, #f74b4b 0%, #e32828 99%);
  font-weight: 600;
}

/* pixel */

:root {
  --ideal-viewport-width: 750;
  --current-viewport-width: 100vw;
  --min-viewport-width: 320px;
  --max-viewport-width: 1440px;
  --clamped-viewport-width: clamp(
    var(--min-viewport-width),
    var(--current-viewport-width),
    var(--max-viewport-width)
  );
}

body {
  padding: calc(
    20 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card {
  width: calc(
    702 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  box-shadow: 0
      calc(4 * var(--clamped-viewport-width) / var(--ideal-viewport-width))
      calc(4 * var(--clamped-viewport-width) / var(--ideal-viewport-width)) 0
      #ff5400,
    inset 0
      calc(-2 * var(--clamped-viewport-width) / var(--ideal-viewport-width)) 0 0
      rgba(255, 255, 255, 0.51),
    inset 0
      calc(-7 * var(--clamped-viewport-width) / var(--ideal-viewport-width))
      calc(6 * var(--clamped-viewport-width) / var(--ideal-viewport-width))
      calc(3 * var(--clamped-viewport-width) / var(--ideal-viewport-width))
      #ffcca4;
  border-radius: calc(
    38 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  padding: calc(
    24 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__media {
  width: calc(
    170 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  height: calc(
    170 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  border-radius: calc(
    24 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  margin-right: calc(
    20 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__media img {
  border-radius: calc(
    24 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__heading {
  font-size: calc(
    30 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  margin-bottom: calc(
    6 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__body {
  font-size: calc(
    24 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

button {
  min-width: calc(
    210 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  min-height: calc(
    62 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  padding: 0
    calc(20 * var(--clamped-viewport-width) / var(--ideal-viewport-width));
  font-size: calc(
    26 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__price {
  font-size: calc(
    22 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__price--current {
  font-size: calc(
    24 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__price--current span {
  margin-right: calc(
    -4 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__price--current strong {
  font-size: calc(
    46 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__price--orgion {
  margin-left: calc(
    8 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
}

.card__price--orgion::after {
  height: calc(2 * var(--clamped-viewport-width) / var(--ideal-viewport-width));
}

.card__badge {
  font-size: calc(
    24 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  border-radius: calc(
      36 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
    )
    0 calc(36 * var(--clamped-viewport-width) / var(--ideal-viewport-width)) 0;
  max-width: calc(
    146 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  min-height: calc(
    42 * var(--clamped-viewport-width) / var(--ideal-viewport-width)
  );
  width: 100%;
}

.sr-only:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
document.documentElement.setAttribute("lang", "zh-cn");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.