卡片列表布局说明
uXui 以样式形式提供了卡片列表布局，因为卡片列表布局在实际项目中变化较多，所以以样式形式提供会更灵活，请您看一下相关样式说明，应用时可以在页面上复写相关样式，达到修改的目的。
运行图示
样式说明
/* 卡片宽度 = 外层宽度 （690 / 一行数量 2） - 间距 */
/* 实际使用过程中请跟据项目要求进行宽度修改实现一行多列 */
.ux-card-item{width:330rpx; margin-bottom:30rpx;}
/* 图片宽度、高度修饰 */
.ux-card-img{width:330rpx; height:190rpx; overflow:hidden; position:relative;}
/* 标题顶部间距 */
.ux-card-title{margin-top:5px;}
/* 描述顶部间距 */
.ux-card-desc{margin-top:4px;}
/* 定位标签样式 */
.ux-card-tip{width:68rpx; height:40rpx; line-height:40rpx; text-align:center;}
/* 定位于图片上方的标题修饰 */
.ux-card-mask-title{line-height:40rpx; ....}
演示代码
<template>
<scroll-view class="ux-flex1 ux-page-color ux-body">
<text class="ux-h6 ux-color-grey ux-mt">布局演示</text>
<view class="ux-mt">
<view
class="ux-card-list">
<view class="ux-card-item" hover-class="ux-tap">
<view class="ux-card-img">
<ux-image
:width="330"
:height="190"
mode="aspectFill"
src="https://img1.baidu.com/it/u=3489534312,3743866914&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=375"></ux-image>
</view>
<text class="ux-card-title ux-text ux-primary-color">卡片标题</text>
<text class="ux-card-desc ux-text-small ux-color-grey2">描述小文本</text>
</view>
<view class="ux-card-item" hover-class="ux-tap">
<view class="ux-card-img">
<ux-image
:width="330"
:height="190"
mode="aspectFill"
src="https://img0.baidu.com/it/u=4206271295,2258237311&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"></ux-image>
<text
class="ux-card-tip ux-color-white ux-bg-black-opacity5"
style="top:10rpx; left:10rpx;">推荐</text>
</view>
<text class="ux-card-title ux-text">定位标签</text>
<text class="ux-card-desc ux-text-small ux-color-grey2">描述小文本</text>
</view>
<view class="ux-card-item" hover-class="ux-tap">
<view class="ux-card-img">
<ux-image
:width="330"
:height="190"
mode="aspectFill"
src="https://img0.baidu.com/it/u=1111318229,2695488584&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"></ux-image>
<text
class="ux-card-tip ux-color-white ux-bg-red"
style="top:10rpx; right:10rpx;">HOT</text>
</view>
<text class="ux-card-title ux-text">定位标签</text>
<text class="ux-card-desc ux-text-small ux-color-grey2">描述小文本</text>
</view>
<view class="ux-card-item" hover-class="ux-tap">
<view class="ux-card-img">
<ux-image
:width="330"
:height="190"
mode="aspectFill"
src="https://img0.baidu.com/it/u=3924543082,1959566204&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"></ux-image>
</view>
<text class="ux-card-title ux-text">描述布局</text>
<view class="ux-card-desc ux-flex ux-row ux-space-between ux-nowrap">
<text class="ux-text-small ux-color-grey3">左边元素</text>
<text class="ux-text-small ux-color-red">右边元素</text>
</view>
</view>
<view class="ux-card-item" hover-class="ux-tap">
<view class="ux-card-img">
<ux-image
:width="330"
:height="190"
mode="aspectFill"
src="https://img2.baidu.com/it/u=3776837266,404066217&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"></ux-image>
</view>
<text
class="ux-card-mask-title ux-bg-black-opacity3 ux-color-white ux-text ux-text-center">标题在图片上 · 居中</text>
</view>
<view class="ux-card-item" hover-class="ux-tap">
<view class="ux-card-img">
<ux-image
:width="330"
:height="190"
mode="aspectFill"
src="https://img0.baidu.com/it/u=2652793495,1179928793&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"></ux-image>
</view>
<text
class="ux-card-mask-title ux-bg-black-opacity3 ux-color-white ux-text">标题在图片上</text>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
