forked from opentiny/tiny-vue
65 lines
2.5 KiB
Vue
65 lines
2.5 KiB
Vue
<template>
|
||
<div>
|
||
<tiny-column-list-item :image="imageUrl" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" 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 :flex-basis="['40%', '20%', '20%', '20%']">
|
||
<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">
|
||
<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 } from '@opentiny/vue'
|
||
|
||
export default {
|
||
components: {
|
||
TinyColumnListItem: ColumnListItem
|
||
},
|
||
data() {
|
||
return {
|
||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
|
||
}
|
||
}
|
||
}
|
||
</script>
|