vue中sass嵌套显示

最新推荐文章于 2024-04-11 11:08:14 发布

原创最新推荐文章于 2024-04-11 11:08:14 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文将介绍如何在Vue项目中有效利用Sass的嵌套特性来组织和提升CSS代码的可读性。我们将探讨Sass的嵌套规则、导入指令以及与Vue组件的结合使用，帮助你更好地管理和维护样式。

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

<template>
  <div class="order-info">
    <div class="mui-card">
      <div class="mui-card-content" v-for="item in orderInfo.user_order_goods" :key="item.id">
        <div class="mui-card-content-inner">
          <div class="buy-info">
            <img :src="item.goods_goods.image" />
            <div class="item-info">
              <p class="name">{{ item.goods_goods.name }}</p>
              <p class="price">
                <span class="red">￥{{ item.price }}</span>
                <span>x{{ item.count }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="send-info">
        <div class="flex">
          <strong>配送服务</strong>
          <span>快递配送</span>
        </div>
        <div class="flex">
          <strong>配送时间</strong>
          <span>工作日、双休日与节假日均可送货</span>
        </div>
        <div class="flex">
          <strong>订单备注</strong>
          <span>{{ orderInfo.note||'无备注' }}</span>
        </div>
        <div class="flex">
          <strong>收货地址</strong>
          <div style="text-align: right; flex: 1; overflow: hidden;">
            <p style="margin-bottom:0;">{{orderInfo.address_name}} {{orderInfo.address_tel}}</p>
            <p>{{orderInfo.address_area}} {{orderInfo.address_detail}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="fare-info">
          <p class="flex">
            <span>商品金额：</span>
            <span class="red">￥{{ orderInfo.price }}</span>
          </p>
          <p class="flex">
            <span>运费：</span>
            <span class="red">￥0.00</span>
          </p>
          <p class="flex">
            <span>合计：</span>
            <span class="red">￥{{ orderInfo.price }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-info {
  padding: 0;
  .mui-card-content {
    // border-bottom: 1px solid #eee;
    .buy-info {
      display: flex;
      flex-wrap: row nowrap;
      overflow: hidden;
      justify-content: space-between;
      padding: 0;
      margin: 0;
      img {
        width: 1.8rem;
        height: 1.8rem;
      }
      .item-info {
        width: 100%;
        margin-left: 10px;
        text-align: left;
        .name {
          margin-top: 20px;
          color: #333;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin: 0;
        }
        .price {
          margin-bottom: 0;
          margin-top: 0.3rem;
          line-height: 24px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          .red {
            color: red;
            font-size: 14px;
          }
        }
      }
    }
  }
  .send-info {
    text-align: left;
    padding: 10px;
    // border-bottom: 1px solid #eee;
    .flex {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      span {
        margin: 5px 0;
        font-size: 13px;
      }
    }
  }
  .note {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #eee;
    textarea {
      font-size: 13px;
    }
  }
  .address-info {
    text-align: left;
    padding: 10px;
    strong {
      color: #333;
    }
  }
  .fare-info {
    padding: 10px;
    .flex {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      span {
        font-size: 14px;
      }
      .red {
        color: red;
        font-size: 14px;
      }
    }
  }
}
</style>