You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
4.0 KiB
155 lines
4.0 KiB
<template>
|
|
<view class="list-item flex-row">
|
|
<image :src="item.pictureUrl || '/static/imgs/factory/default-factory.png'" class="image_8" />
|
|
<view class="center-group flex-col">
|
|
<view class="flex-row">
|
|
<text class="text_11 text-ellipsis" @click="go2('factory-info', { id: item.id })">{{ item.name }}</text>
|
|
<view class="right-text-wrapper_1 flex-col">
|
|
<text class="text_18">{{ item.score }}分</text>
|
|
</view>
|
|
</view>
|
|
<view class="center-group_1 flex-row">
|
|
<image
|
|
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16508554099266202544.png"
|
|
class="image_10"
|
|
/>
|
|
<text class="text_13">{{ item.address }}</text>
|
|
<text class="text_14">{{ item.mileage === -1 ? '未知' : '距您' + item.mileage + 'km' }}</text>
|
|
</view>
|
|
<view class="bottom-group flex-row" v-if="item.boxTags && item.boxTags.length > 0">
|
|
<view v-for="(tag, index) in item.boxTags" :key="tag.id" class="text-wrapper flex-col items-center" :class="'text-wrapper_' + index">
|
|
<text>{{ tag.name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row group_10">
|
|
<image v-for="pic in arrSlice(item.sampleBoxUrl, 3)" :key="pic" :src="pic" class="image_16" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2 } from '@/utils/hook.js'
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
go2,
|
|
arrSlice(arr, length) {
|
|
if (!arr) {
|
|
return []
|
|
}
|
|
return arr.slice(0, length)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-item {
|
|
&:first-of-type {
|
|
border-top: solid 2rpx rgb(221, 221, 221);
|
|
}
|
|
padding: 25rpx 32rpx 21rpx;
|
|
border-bottom: solid 2rpx rgb(216, 216, 216);
|
|
.image_8 {
|
|
border-radius: 8rpx;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
.center-group {
|
|
margin-left: 16rpx;
|
|
flex: 1 1 auto;
|
|
.text_11 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
line-height: 48rpx;
|
|
white-space: nowrap;
|
|
max-width: 408rpx;
|
|
}
|
|
.center-group_1 {
|
|
margin-top: 12rpx;
|
|
padding: 0 2rpx;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 26rpx;
|
|
line-height: 37rpx;
|
|
white-space: nowrap;
|
|
|
|
.image_10 {
|
|
margin: 8rpx 0 5rpx;
|
|
width: 20rpx;
|
|
height: 23rpx;
|
|
}
|
|
.text_13 {
|
|
margin-left: 8rpx;
|
|
white-space: pre-wrap;
|
|
flex: 1 1 auto;
|
|
}
|
|
.text_14 {
|
|
margin-left: 24rpx;
|
|
font-size: 26rpx;
|
|
color: #888888;
|
|
}
|
|
}
|
|
.bottom-group {
|
|
margin-top: 17rpx;
|
|
flex-wrap: wrap;
|
|
.text-wrapper {
|
|
padding: 2rpx 4rpx;
|
|
margin-right: 6rpx;
|
|
font-size: 18rpx;
|
|
font-weight: 500;
|
|
line-height: 25rpx;
|
|
white-space: nowrap;
|
|
background-color: rgba(255, 77, 79, 0.08);
|
|
border-radius: 2rpx;
|
|
height: 29rpx;
|
|
}
|
|
.text-wrapper_0 {
|
|
border: solid 2rpx rgb(255, 77, 79);
|
|
color: rgb(255, 77, 79);
|
|
}
|
|
.text-wrapper_1 {
|
|
color: rgb(254, 134, 0);
|
|
border: solid 2rpx rgb(254, 136, 6);
|
|
}
|
|
.text-wrapper_2 {
|
|
color: rgb(19, 194, 194);
|
|
border: solid 2rpx rgb(19, 194, 194);
|
|
}
|
|
}
|
|
}
|
|
.right-text-wrapper_1 {
|
|
margin: 11rpx 14rpx 0 12rpx;
|
|
padding-top: 2rpx;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 18rpx;
|
|
font-weight: 600;
|
|
line-height: 25rpx;
|
|
white-space: nowrap;
|
|
background-image: linear-gradient(90deg, rgb(255, 186, 101) 0%, rgb(255, 186, 101) 0%, rgb(255, 143, 53) 100%, rgb(255, 143, 53) 100%);
|
|
border-radius: 14rpx 2rpx 14rpx 14rpx;
|
|
height: 28rpx;
|
|
.text_18 {
|
|
margin-left: 6rpx;
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
.group_10 {
|
|
margin-top: 16rpx;
|
|
.image_16 {
|
|
border-radius: 4rpx;
|
|
margin-right: 16rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|