Files
czg_zysh_ointment_weapp/pages/index/components/popula/index.vue
2024-03-21 15:54:39 +08:00

97 lines
1.9 KiB
Vue

<template>
<view class="">
<view class="fourcontent">
<u-scroll-list indicatorActiveColor="#6C6E8D" indicatorWidth='40' :indicator="false">
<view class="scrollfourcontent" v-for="(item, index) in list" :key="index"
@click="eeInfo(item)">
<view class="scrollfourcontenttitem flex-colum">
<image class="scrolltowcontentitem_image" :src="item.img" mode="aspectFill"></image>
<view class="scrolltowcontentitem_one">
{{item.title}}
</view>
<view class="scrolltowcontentitem_tow">
{{item.price}}
</view>
</view>
</view>
</u-scroll-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
props: {
list: {
type: Array,
default () {
return []
}
},
data: {
type: Number,
default: 0
},
},
methods: {
eeInfo(e) { //热门项目
uni.pro.navigateTo('order/orderInfo', {
id: e.id,
})
},
}
}
</script>
<style lang="scss">
.fourcontent {
margin-left: 8rpx;
.scrollfourcontent {
padding: 22rpx 0;
.scrollfourcontenttitem {
width: 280rpx;
margin-left: 30rpx;
align-items: flex-start;
padding-bottom: 16rpx;
background: #FFFFFF;
box-shadow: 0px 4rpx 6rpx 2px rgba(0, 0, 0, 0.16);
border-radius: 18rpx;
.scrolltowcontentitem_image {
border-top-left-radius: 18rpx;
border-top-right-radius: 18rpx;
width: 280rpx;
height: 292rpx;
}
.scrolltowcontentitem_one {
padding-left: 16rpx;
padding-top: 16rpx;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #28292D;
}
.scrolltowcontentitem_tow {
margin-left: 16rpx;
margin-top: 8rpx;
font-size: 24rpx;
font-family: Roboto-Bold, Roboto;
font-weight: bold;
color: #F45C4C;
}
}
}
}
</style>