121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<template>
|
||
<view style="height: 100%;">
|
||
<scroll-view scroll-x="true" class="scroll-box" style="height: 100%;">
|
||
<view :class="'item-box'+' bg'+((index+'').slice(-1))" v-for="(item,index) in goodsList" :key="index"
|
||
@click="chooseItem(item)">
|
||
<image style="border-radius: 7px;" :src="item.artificerImg" :style="'width:'+imgWidth+'px;'+'height:'+imgHeight+'px;'" mode=""></image>
|
||
<view class="item-name">{{item.artificerName}}</view>
|
||
<view class="item-descr">{{item.content}}</view>
|
||
<!-- <view class="xiangshi" v-if="item.bdxsl">相识度：{{item.bdxsl}}%</view> -->
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
listTitle: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
goodsList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
imgWidth: {
|
||
type: Number
|
||
},
|
||
imgHeight: {
|
||
type: Number
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
//点击某个item
|
||
chooseItem(item) {
|
||
this.$emit("clickItem", item)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/deep/ ::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
display: none;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
/deep/.uni-scroll-view-content{
|
||
display: flex;
|
||
align-items: center;
|
||
/* justify-content: center; */
|
||
}
|
||
.xiangshi{
|
||
padding: 5px;
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
position: absolute;
|
||
bottom: 0;
|
||
margin-bottom: 54px;
|
||
}
|
||
.subtitle {
|
||
padding: 16rpx 32rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.scroll-box {
|
||
display: flex;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
/* min-height: 242rpx; */
|
||
}
|
||
|
||
.item-box {
|
||
display: inline-block;
|
||
width: 33%;
|
||
height: 210px;
|
||
/* margin-right: 10px; */
|
||
border-radius: 10px;
|
||
margin-top: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.item-name {
|
||
display: table;
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: bold;
|
||
white-space: pre-wrap;
|
||
color: #333333;
|
||
margin-top: 8px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
}
|
||
|
||
.item-descr {
|
||
text-align: left;
|
||
display: table;
|
||
width: 100px;
|
||
font-size: 24rpx;
|
||
line-height: 15px;
|
||
white-space: pre-wrap;
|
||
color: #999999;
|
||
margin-top: 11px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
</style> |