SOURCE

<div class="snap">
	<img class="goods" src="https://gw.alicdn.com/tfs/i2/O1CN014xvveX28s5ykadAz0_!!0-juitemmedia.jpg" alt="">
	<p class="title">百年扁氏艾草膝盖贴正品关...</p>
	<p class="desc">领卷立减10元</p>
	<div class="bar">
        <p class="txt">已抢222件</p>
    </div>
	<strong class="newPrice">￥98</strong>
    <strong class="oldPrice">￥98</strong>
</div>

p {
    margin: 0;
    padding: 0;
}
.snap {
    margin: 0 auto;
    width: 300px;;
    padding-bottom: 24px;
    background: #fff;
}
.goods {
    width: 300px;
    height: 300px;
}
.title, .desc, .bar, .newPrice {
    margin-left: 20px;
}
.title {
    font-size: 21px;
}
.desc {
    font-size: 20px;
}
.desc, .bar, .newPrice {
    color: #ff0036;
}
.newPrice, .oldPrice {
    font-weight: 400;
}
.newPrice {
    font-size: 27px;
}
.oldPrice {
    color: #a69999;
    text-decoration: line-through;
}
.bar {
    position: relative;
    width: 214px;
    height: 21px;
    line-height: 21px;
    margin-top: 12px;
    margin-bottom: 12px;
    background: #ffe2e1;
    border-radius: calc(21px);
    font-size: 18px;
    vertical-align: middle;
}
.bar::before {
    /* display: block; */
    float: left;
    content: "";
    width: 10%;
    height: 100%;
    border-top-left-radius: 21px;
    border-bottom-left-radius: 21px;
    background: #ff1249;
}
.bar::after {
    float: right;
    margin-right: 10px;
    content: "10%";
}
.bar .txt {
    position: absolute;
    top: 0;
    color: #fff;
    left: 20px;
}