tiny-vue/examples/sites/demos/mobile-first/app/column-list-item/content-slot.vue

<template>
  <div>
    <tiny-column-list-item class="mb-3">
      <template #column1>
        <ul>
          <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
          <li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
          <li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
        </ul>
      </template>
      <template #column2>
        <ul class="text-color-text-secondary">
          <li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
          <li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
          <li><span>尺寸：</span><span>6.5英寸</span></li>
        </ul>
      </template>
    </tiny-column-list-item>
    <tiny-column-list-item class="mb-3">
      <template #column1>
        <ul>
          <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
          <li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
          <li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
        </ul>
      </template>
      <template #column2>
        <ul class="text-color-text-secondary">
          <li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
          <li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
          <li><span>尺寸：</span><span>6.5英寸</span></li>
        </ul>
      </template>
      <template #column3>
        <ul class="text-color-text-secondary">
          <li class="mb-1 sm:mb-1.5"><span>最小包装数：</span><span>2</span></li>
          <li class="mb-1 sm:mb-1.5"><span>参考价格：</span><span>8888.55</span></li>
          <li><span>换算率：</span><span>55</span></li>
        </ul>
      </template>
    </tiny-column-list-item>
    <tiny-column-list-item>
      <template #column1>
        <ul>
          <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
          <li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
          <li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
        </ul>
      </template>
      <template #column2>
        <ul class="text-color-text-secondary">
          <li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
          <li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
          <li><span>尺寸：</span><span>6.5英寸</span></li>
        </ul>
      </template>
      <template #column3>
        <ul class="text-color-text-secondary">
          <li class="mb-1 sm:mb-1.5"><span>最小包装数：</span><span>2</span></li>
          <li class="mb-1 sm:mb-1.5"><span>参考价格：</span><span>8888.55</span></li>
          <li><span>换算率：</span><span>55</span></li>
        </ul>
      </template>
      <template #column4>
        <ul class="text-color-text-secondary">
          <tiny-tag size="mini" type="success" effect="dark" class="mb-0.5">上架中</tiny-tag>
          <li class="mb-1 sm:mb-1.5"><span>上架时间：</span><span>2023-01-31</span></li>
          <li class="mb-1 sm:mb-1.5"><span>顺序号：</span><span>123456</span></li>
        </ul>
      </template>
    </tiny-column-list-item>
  </div>
</template>

<script>
import { ColumnListItem, Tag } from '@opentiny/vue'

export default {
  components: {
    TinyColumnListItem: ColumnListItem,
    TinyTag: Tag
  },
  data() {
    return {}
  }
}
</script>