标签: 商品详情

::::tabs
@tab 骨架

<template>
   <!-- 左边显示封面，右边显示商品详情 -->
  <div class="qi-product">
    <!-- 封面 -->
    <image class="cover"></image>
    <!-- 商品详情，垂直展示详情 -->
    <div class="info">
      <!-- 商品名称 -->  
      <div class="name"></div>
      <!-- 商品描述 -->
      <div class="description">
      </div>
      <!-- 品牌 -->
      <div class="brand">
      </div>
      <!-- 商品价格 -->
      <div class="price-row">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss">
// 导入多行溢出scss函数
@import "../../app.scss";
.qi-product {
  padding: 15px 0;
  display: flex;
  align-items: flex-start;
  width: 100%;
  .cover {
    width: 150px;
    height: 150px;
    border-radius: 10px;
  }
  .info {
    // 撑开多余的空间
    flex: 1;
    margin-left: 20px;
    padding-right: 10px;
  }
}
</style>

起凡2024/1/21大约 1 分钟

商品纵向详情

效果

源码解析

骨架

从上到下分别显示

封面
标题
标签
价格和品牌

:::tabs

@tab html

<template>
  <div class="product-cover">
    <!-- 图片的高度自适应，宽度固定 -->
    <image
      class="cover"
      mode="widthFix"
    ></image>
    <div class="title">
    </div>
    <div class="tags">
    </div>
    <div class="price-brand">
    </div>
  </div>
</template>

起凡2024/1/20大约 2 分钟