| | |
| | | <template> |
| | | <view> |
| | | <view class="tabContent " :class="{'flex': !isTrue }" v-show="true"> |
| | | <view style="width: 50%;" v-for="(item, index) in tableData" :key="index"> |
| | | <view class="paramBox "> |
| | | <!-- <view class="param-title">{{item.name}}</view> --> |
| | | <view v-for="(subItem, subIndex) in item.list" :key="subIndex"> |
| | | <view class="param-item"> |
| | | <label style="padding-left: .1rem;background-color: #5879a4;color: #fff;">{{subItem.name}}</label> |
| | | <text class="font-family" style="padding-left: .2rem;background-color: #ebf3fe;flex-grow: 1;">{{subItem.value}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- <view v-if="isTrue " style="height: 30rpx;"></view> --> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | <script> |
| | | export default { |
| | | props: { |
| | | tableData: { |
| | | type: Array, |
| | | default () { |
| | | return [] |
| | | } |
| | | }, |
| | | isTrue: { |
| | | true: Boolean, |
| | | defalut() { |
| | | return false; |
| | | } |
| | | } |
| | | <template> |
| | | <view> |
| | | <view class="tabContent" :class="{ flex: !isTrue }" v-show="true"> |
| | | <view style="width: 50%" v-for="(item, index) in tableData" :key="index"> |
| | | <view class="paramBox"> |
| | | <!-- <view class="param-title">{{item.name}}</view> --> |
| | | <view v-for="(subItem, subIndex) in item.list" :key="subIndex"> |
| | | <view class="param-item"> |
| | | <label>{{ subItem.name }}</label> |
| | | <text v-if="subItem.valueClick" class="font-family" style="color: #027edc;cursor: pointer;" :title="subItem.value" @click="subItem.valueClick">{{ subItem.value }}</text> |
| | | <text v-else class="font-family" :title="subItem.value">{{ subItem.value }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- <view v-if="isTrue " style="height: 30rpx;"></view> --> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | <script> |
| | | export default { |
| | | props: { |
| | | tableData: { |
| | | type: Array, |
| | | default() { |
| | | return []; |
| | | } |
| | | }, |
| | | isTrue: { |
| | | true: Boolean, |
| | | defalut() { |
| | | return false; |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return {}; |
| | | }, |
| | | methods: {} |
| | | }; |
| | | </script> |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | | <style scoped> |
| | | view { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | } |
| | | }, |
| | | methods: { |
| | | .tabContent { |
| | | background: #fff; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .param-title { |
| | | background: #f5f5f5; |
| | | height: 80rpx; |
| | | line-height: 80rpx; |
| | | margin: 20rpx 30rpx 0; |
| | | font-size: 28rpx; |
| | | text-indent: 30rpx; |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | view { |
| | | |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .tabContent { |
| | | background: #fff; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .param-title { |
| | | background: #f5f5f5; |
| | | height: 80rpx; |
| | | line-height: 80rpx; |
| | | margin: 20rpx 30rpx 0; |
| | | font-size: 28rpx; |
| | | text-indent: 30rpx; |
| | | } |
| | | |
| | | .param-item { |
| | | height: .3rem; |
| | | line-height: .3rem; |
| | | font-size: .14rem; |
| | | border-bottom: .02rem solid #fff; |
| | | margin: 0 4rpx; |
| | | /* border-left: 1rpx solid #f5f5f5; |
| | | .param-item { |
| | | height: 0.3rem; |
| | | line-height: 0.3rem; |
| | | font-size: 0.14rem; |
| | | border-bottom: 0.02rem solid #fff; |
| | | margin: 0 4rpx; |
| | | /* border-left: 1rpx solid #f5f5f5; |
| | | border-right: 1rpx solid #f5f5f5; */ |
| | | /* padding: 0 30rpx; */ |
| | | display: flex; |
| | | } |
| | | /* padding: 0 30rpx; */ |
| | | display: flex; |
| | | } |
| | | |
| | | .param-item label { |
| | | width: 1.55rem; |
| | | color: #999; |
| | | margin-right: .03rem !important; |
| | | } |
| | | </style> |
| | | .param-item label { |
| | | width: 1.55rem; |
| | | color: #999; |
| | | margin-right: 0.03rem !important; |
| | | padding-left: 0.1rem; |
| | | background-color: #5879a4; |
| | | color: #fff; |
| | | } |
| | | |
| | | .param-item text { |
| | | padding-left: 0.2rem; |
| | | background-color: #ebf3fe; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | </style> |