淘宝移动端首页的商品列表

    <main>
        <div class="topMain">
            <div class="topMain-left">
              <div class="item1">
                <div class="title">聚划算</div>
                <div class="items" style="background-color:bisque;">
                  <a href="">
                    <span style="color: tomato;">品牌折扣</span>
                    <img src="static/images/items/item1.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item2">
                <div class="title"></div>
                <div class="items" style="background-color:bisque;">
                  <a href="">
                    <span style="color: tomato;">划算好货</span>
                    <img src="static/images/items/item2.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item3">
                <div class="title">淘抢购</div>
                <div class="items">
                  <a href="">
                    <span>限时半价</span>
                    <img src="static/images/items/item3.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item4">
                <div class="title">天天特卖</div>
                <div class="items">
                  <a href="">
                    <span>9.9包邮</span>
                    <img src="static/images/items/item4.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item5">
                <div class="title">每日好店</div>
                <div class="items">
                  <a href="">
                    <span>挖深藏的店</span>
                    <img src="static/images/items/item5.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item6">
                <div class="title"><span style="color: white; background-color: orange;">精选</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item7.jpg" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
            </div>
            <div class="topMain-right">
              <div class="item1">
                <div class="title">淘宝直播</div>
                <div class="items">
                  <a href="">
                    <span>好物传送门</span>
                    <img src="static/images/items/item1.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item2">
                <div class="title"><span style="color:white; background-color: red;">LIVE&gt;</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item9.png" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
              <div class="item3">
                <div class="title">有好货</div>
                <div class="items">
                  <a href="">
                    <span>全民口碑推荐</span>
                    <img src="static/images/items/item10.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item4">
                <div class="title"><span style="color: white; background-color: darkturquoise; margin-left: -0.35rem;">品质好物</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item11.png" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
              <div class="item5">
                <div class="title">哇哦视频</div>
                <div class="items">
                  <a href="">
                    <span>粉丝都爱看</span>
                    <img src="static/images/items/item12.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item6">
                <div class="title"><span style="color: white; background-color: coral;">亲测</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item13.webp" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
            </div>
            <div class="topMain-buttom">
              <img src="static/images/taobao/tt.png" alt="">
              <a href="">
                <span>评测</span>
                <span>实测：五款最强防霾滤芯安利给你</span>
              </a>
            </div>
        </div>
        <div class="displayMain">
            <div class="advance">
              <img src="static/images/taobao/cnxh.png" alt="">
            </div>
            <div class="displayWindow">
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
            </div>
        </div>
    </main>

main{
    position: relative;
    padding: 0.1rem;
    top: 3.36rem;
}
main .topMain{
    background-color: #fff;
    height: 4.03rem;
    border-radius: 0.06rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr 1fr 1fr .4rem;
    gap: .1rem;
}
main .topMain-left{
    grid-area: 1 / 1 / 4 / 2;
}
main .topMain-right{
    grid-area: 1 / 2 / 4 / 3;
}
main .topMain-buttom{
    grid-area: 4 / 1 / 5 / 3;
    height: .4rem;
    font-size: 0.13rem;
    display: grid;
    grid-template-columns: .75rem 1fr;
    place-content: center;
}
main .topMain-buttom img{
    width: 100%;
    height: 100%;
}
main .topMain-buttom img{
    width: .64rem;
    height: .2rem;
    margin-left: .1rem;
}
main .topMain-buttom a{
    place-self: center start;
}
main .topMain-buttom a span:first-of-type{
    padding: 0.02rem 0.05rem;
    background-color: #feefec;
    color: #e86217;
    border-radius: .04rem;
    margin-left: 0.1rem;
}
main .topMain .topMain-left{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
}
main .topMain .topMain-right{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
    border-left: .01rem solid #eee;
}
main .topMain .topMain-left img,
main .topMain .topMain-right img
{
    width: 100%;
    height: 100%;
    width: .5rem;
    height: .5rem;
}
main .topMain .topMain-left div,
main .topMain .topMain-right div
{
    text-align: center;
}
main .topMain .title{
    text-align: start !important;
    height: .2rem;
    font-size: 0.15rem;
    font-weight: bold;
}
main .topMain .title>span{
    font-size: 0.1rem;
    font-weight: normal;
    padding: 0.02rem 0.03rem;
    border-radius: .03rem;
    margin-left: -0.2rem;
}
main .topMain .topMain-left .items{
    margin: .1rem;
    background-color: bisque;
    border-radius: .05rem;
}
main .topMain .topMain-left .items a span{
    font-size: 0.12rem;
    font-weight: bold;
    color: #e86217;
}
main .topMain .topMain-right .items{
    margin: .1rem;
    background-color: bisque;
    border-radius: .05rem;
}
main .topMain .topMain-right .items a span{
    font-size: 0.1rem;
    font-weight: bold;
    color: #e86217;
}
main .displayMain{
    top:7.39rem;
    width: 100vw;
}
main .displayMain .advance{
    width: 100vw;
    height: .47rem;
    display: grid;
    place-content: center;
}
main .displayMain .advance img{
    width: 1.61rem;
    height: .20rem;
}
main .displayMain .displayWindow{
    top: 7.85rem;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
main .displayMain .displayWindow .item{
    width: 1.71rem;
    height: 2.6rem;
    border-radius: .06rem;
    background-color: white;
    margin-top: .1rem;
}
main .displayMain .displayWindow .item .itemName{
    height: .57rem;
    font-size: 0.13rem;
    color:#333;
    margin: .05rem;
    overflow: hidden;
    line-height: .185rem;
    text-overflow: ellipsis;
}
main .displayMain .displayWindow .item img{
    width: 1.71rem;
    height: 1.71rem;
    border-radius: .06rem .06rem 0 0;
}
main .displayMain .displayWindow .item .priceInfo span:nth-last-of-type(n+2){
    color: #ff5500;
    margin: .05rem;
}