<div role="list">
  <div role="listitem">
    <div class="card" role="link" tabindex="-1" aria-labelledby="a11y__card--title" aria-describedby="a11y__badege a11y__price">
      <div class="midai__object--card" aria-hidden="true">
        <img src="//gw.alicdn.com/bao/uploaded/i4/2580703436/TB2LI8xyOpnpuFjSZFkXXc4ZpXa_!!2580703436.jpg_360x10000Q50.jpg" alt="6条装,南韩珍珠吸水抹布">
      </div>
      <div class="media__body--card" aria-hidden="true">
        <h5 class="media__title" id="a11y__card--title">珍珠粒抹布吸水不掉毛加厚擦玻璃布擦家具桌子拖地板洗碗布清洁巾</h5>
        <div class="media__des">
          <span class="badge" id="a11y__badege">金币抵3%</span>
        </div>
        <div class="media__price" id="a11y__price">
          <span>¥</span>
          <span>109</span>
          <span>.00</span>
        </div>
      </div>
    </div>
  </div>
  <div role="listitem">
    <div class="card" role="link" tabindex="-1" aria-labelledby="a11y__card--title" aria-describedby="a11y__badege a11y__price">
      <div class="midai__object--card" aria-hidden="true">
        <img src="//gw.alicdn.com/bao/uploaded/i4/2580703436/TB2LI8xyOpnpuFjSZFkXXc4ZpXa_!!2580703436.jpg_360x10000Q50.jpg" alt="6条装,南韩珍珠吸水抹布">
      </div>
      <div class="media__body--card" aria-hidden="true">
        <h5 class="media__title" id="a11y__card--title">珍珠粒抹布吸水不掉毛加厚擦玻璃布擦家具桌子拖地板洗碗布清洁巾</h5>
        <div class="media__des">
          <span class="badge" id="a11y__badege">金币抵3%</span>
        </div>
        <div class="media__price" id="a11y__price">
          <span>¥</span>
          <span>109</span>
          <span>.00</span>
        </div>
      </div>
    </div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-size: 3rem;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  border: none 0;
  background-color: transparent;
  color: #f36;
}

div {
  color: #90f;
}

h1 {
  color: #09f;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border-width: 0;
}

#heading,
#button {
  display: none;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;

  border: 1px solid #cccccc1a;
  background-color: #fff;
  border-radius: 1.2333vw;
  box-shadow: 0 0 0.8vw rgba(0, 0, 0.25);
  max-width: 80vw;
  min-width: 80vw;
}

.midai__object--card {
  border-radius: 1.2333vw 1.2333vw 0 0;
}

.midai__object--card img {
  max-width: 100%;
  height: auto;
  border-radius: 0.8vw 0.8vw 0 0;
}

.media__body--card {
  padding: 2.6667vw;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.media__title {
  font-size: 5.866vw;
  color: #444;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 1%;
  font-weight: 500;
  margin: 2.666vw 0;
}

.media__des {
  display: flex;
}

.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fcf1eb;
  color: #ff5000;
  font-size: 3.2vw;
  padding: 0.52333vw 2.666vw;
  border-radius: 10em;
}

.media__price {
  color: #ff5000;
  font-size: 2.933vw;
  margin-top: 2.666vw;
  display: inline-flex;
  align-items: flex-end;
  font-weight: 500;
  line-height: 1;
}

.media__price span:first-child,
.media__price span:last-child {
  font-size: 1.86667vw;
}

div[role="list"] {
  display: flex;
  list-style: none outside none;
  flex-direction: column;
}

div[role="listitem"] {
  margin: 10px 0;
}
document.documentElement.setAttribute("lang", "zh-CN");
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.