当前位置:网站首页>Waterfall flow layout of uni app Homepage
Waterfall flow layout of uni app Homepage
2022-06-13 06:05:00 【Jiuwujiuwu】
<view class="pubuBox">
<view class="pubuItem">
<view class="item-masonry" v-for="(item, index) in hotSalesList" :key="index" @tap="clickRight(item)">
<view class="positions">
<image :src="item.pic" mode="widthFix"></image>
<view class="city">{
{item.city}}</view>
</view>
<view class="listtitle"> -->
<view class="listtitle1">{
{ item.prodName }}</view>
<view class="listtitle2">
{
{ item.registerDate }}/{
{item.mileage}}km
</view>
<view class="listtitle3">
<view class="price">
<text class="symbol">¥</text>
<text class="big-num">{
{parsePrice(item.oriPrice)[0]}}</text>
<text class="small-num">.{
{parsePrice(item.oriPrice)[1]}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
.pubuBox {
padding: 22rpx;
}
.pubuItem {
column-count: 2;
column-gap: 20rpx;
}
.item-masonry {
box-sizing: border-box;
border-radius: 15rpx;
overflow: hidden;
background-color: #fff;
break-inside: avoid;
/* Avoid inserting page breaks inside elements */
box-sizing: border-box;
margin-bottom: 20rpx;
box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
}
.city {
width: 100%;
position: absolute;
bottom: 10rpx;
text-align: center;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
}
.item-masonry .positions {
width: 100%;
position: relative;
}
.positions image {
width: 100%;
}
.listtitle {
padding-left: 22rpx;
/* font-size: 24rpx; */
padding-bottom: 22rpx;
}
.listtitle1 {
line-height: 39rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 39rpx;
max-height: 78rpx;
font-size: 30rpx;
font-weight: 400;
color: #333333;
padding-top: 20rpx;
}
.listtitle2 {
font-size: 26rpx;
font-weight: 400;
color: #666666;
margin-top: 12rpx;
}
.listtitle2son {
font-size: 26px;
font-weight: 400;
color: #666666;
}
.listtitle3 {
font-size: 28rpx;
color: #909399;
line-height: 32rpx;
padding-top: 18rpx;
}
.Index {
width: 100%;
height: 100%;
}
边栏推荐
- Use of Nacos configuration center
- USB debugging assistant
- 微信小程序:基础复习
- The Boys x PUBGMOBILE 联动火热来袭!来看最新游戏海报
- Leetcode- divide candy - simple
- Time conversion'2015-04-20t11:12:00.000+0000 '
- Leetcode perfect number simple
- Leetcode- third largest number - simple
- [compilation and assembly link] coff file and structure description
- Ffmpeg download suffix is Video files for m3u8
猜你喜欢
随机推荐
MySQL trigger
Annotation only integration SSM framework
Uniapp mobile terminal uses canvas to draw background convex arc
Leetcode- third largest number - simple
CORS request principle
Uniapp dynamically shows / hides the navigation bar return button
Leetcode- detect uppercase letters - simple
HBuilderX:HBuilderX安装以及其常用插件安装
Leetcode planting flowers - simple
USB debugging assistant 20181018 (v1.3)
JNDI configuration for tongweb7
智能数字资产管理助力企业决胜后疫情时代
软件测试——接口常见问题汇总
Leetcode- reverse vowels in string - simple
Exception after repeated application redeployment on tongweb: application instance has been stopped already or outofmemoryerror:metaspace
Leetcode- reverse string - simple
Echart矩形树图:简单实现矩形树图
微信小程序:点击事件获取当前设备信息(基础)
The Boys x PUBGMOBILE 联动火热来袭!来看最新游戏海报
Sentinel series integrates Nacos and realizes dynamic flow control