<template> <view class="item-content"> <view class="item-row"> <view class="item_left"> <view class="line" style="height: calc(100% + 12rpx);"></view> <image style="margin-left: 18rpx; width: 38rpx; height: 38rpx;" src="../../static/icons/icon_address@2x.png" mode=""></image> </view> <view class="item_right"> <text class="row-visit" style=" flex: 1; font-size: 32rpx; font-family: Verdana, Verdana-Bold; font-weight: 700; line-height: 44rpx; color: #333333;"> <text>{{row1Pre}}{{row1Line}}{{row1Title}}</text> <text v-if="productTypeDesc">({{productTypeDesc}})</text> </text> <text class="row-adv" style="font-size: 28rpx; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: right; line-height: 40rpx; color: #333333;">{{row1right }}</text> </view> </view> <view class="item-row" style="margin-top: 2rpx;"> <view class="item_left"> <view class="line" style="height: calc(100% + 20rpx);"></view> <image style="margin-left: 32rpx;margin-top: 10rpx; width: 10rpx; height: 10rpx;" src="../../static/icons/icon_point@2x.png" mode=""></image> </view> <view class="item_right"> <text class="row-visit-time" style="flex: 1; font-size: 20rpx; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: left; color: #999999; line-height: 28rpx;">{{row2Pre}}{{row2Line}}{{row2Title}}</text> <text class="row-desc" style="line-height: 28rpx; font-size: 20rpx; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: left; color: #999999;">{{row2right}}</text> </view> </view> <view class="item-row" style="margin-top: 18rpx;margin-bottom: 20rpx;"> <view class="item_left"> <view class="line" style="height: calc(100% + 32rpx);" v-if='showRow4'></view> <image style="margin-left: 20rpx; width: 34rpx; height: 34rpx;" src="../../static/icons/icon_label@2x.png" mode=""></image> </view> <view class="item_right"> <view class="row-follow-time" style=" line-height: 34rpx; font-size: 24rpx; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: left; color: #333333;">{{row3Pre}}{{row3Line}}{{row3Title}}</view> </view> </view> <view class="item-row" style="margin-bottom: 20rpx;" v-if='showRow4'> <view class="item_left"> <image class="row-img2" style="margin-left: 32rpx;margin-top: 12rpx; width: 10rpx; height: 10rpx;" src="../../static/icons/icon_point@2x.png" mode=""></image> </view> <view class="item_right"> <text class="row-protext-time" style=" font-size: 24rpx; line-height: 34rpx; font-family: Verdana, Verdana-Regular; font-weight: 400; text-align: left; color: #333333;">{{row4Pre}}{{row4Line}}{{row4Title}}{{row4Las}}</text> </view> </view> </view> </template> <script> export default { props: { row1Title: { type: String, default: '', }, row1Pre: { type: String, default: '', }, row1Line:{ type: String, default: '', }, row2Title: { type: String, default: '', }, row2Pre: { type: String, default: '', }, row2Line:{ type: String, default: '', }, row3Title: { type: String, default: '', }, row3Pre: { type: String, default: '', }, row3Line:{ type: String, default: '', }, row4Title: { type: [String,Number], default: '', }, row4Pre: { type: String, default: '', }, row4Las: { type: String, default: '', }, row4Line:{ type: String, default: '', }, row1right: { type: String, default: '', }, row2right: { type: String, default: '', }, showRow4: { type: Boolean, default: false }, productTypeDesc: { type: String, default: '' } }, data() { return {} }, mounted() {}, methods: {} } </script> <style scoped lang="scss"> .item-content { margin-top: 22rpx; padding: 0 30rpx; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; .item-row { display: flex; .item_left { display: flex; width: 90rpx; position: relative; .line { position: absolute; left: 37rpx; top: 0rpx; width: 2rpx; background-color: #a7b3c6; } } .item_right { flex: 1; display: flex; justify-content: space-between; height: 100%; } } } </style>