HTML列表呈现技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/youngAda/article/details/109248978

这篇博客探讨了使用HTML进行列表展示的第二种方法，详细介绍了相关HTML标签的使用和布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
export default {
    goToInfo(id) {
      this.$router.push('/order/info/' + id)
    },
  },
}
</script>

```html
<template>
  <div class="order-list">
    <div class="order-item" v-for="item in orderList" :key="item.id">
      <div class="mui-card">
        <div class="mui-card-header">
          <span>{{ item.create_time }}</span>
          <span>
            <span v-if="item.is_pay">已支付</span>
            <span v-else>未支付</span>
          </span>
        </div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <router-link class="goods-list" :to="'/order/info/' + item.id">
              <div class="goods-item" v-for="goods in item.user_order_goods" :key="goods.id">
                <img :src="goods.goods_goods.image">
                <span>x{{ goods.count }}</span>
              </div>
            </router-link>
          </div>
          <div class="totel"><span>实付金额：{{ item.price }}</span>
            <p><span v-if="item.is_cancel">已取消</span>
              <a href="#" v-else @click="cancel(item.id)">取消订单</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-list {
  .mui-card-header {
    display: flex;
    flex-flow: row nowrap;
    overflow: hidden;
    justify-content: space-between;
    span {
      font-size: 14px;
      margin: 0;
    }
  }
  .mui-card-header:after {
    background-color: #ececec;
  }
  .mui-card-content-inner {
    padding: 10px 15px;
    .goods-list {
      display: flex;
      flex-flow: row wrap;
      .goods-item {
        width: 70px;
        height: 70px;
        margin: 10px 10px 10px 0;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 2px;
        }
        span {
          position: absolute;
          right: 0;
          bottom: 0;
          background: #000;
          color: #fff;
          opacity: 0.5;
          padding: 0px 5px;
          border-radius: 2px;
          font-size: 12px;
        }
      }
    }
  }
  .totel {
    display: flex;
    justify-content: space-between;
    right: 0;
    bottom: 0;
    text-align: right;
    padding: 10px;
    margin: 0;
  }
}
</style>

第二种列表展示方式