lotteryDraw_client/components/listBox.vue

<template>
  <view class="list-box-com">
	  <view class="item">
		  <view class="left PfScMedium">
		  	{{leftTitle}}
		  </view>

		  <view class="right">
				<!-- #ifdef MP-WEIXIN -->
					<template v-if="rightTitle">
						{{rightTitle}}
					</template>

					<template v-else-if="indexkey >= 0 && Object.keys(info).length > 0">
						<view class="item-inner" v-html="info.custom" v-if="info.custom" @click="edit" :data-item="info" :data-key="indexkey"></view>
					</template>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<slot>{{rightTitle}}</slot>
				<!-- #endif -->

		  </view>
	  </view>
  </view>
</template>

<script>
export default {
	options: {
		styleIsolation: 'shared'
	},
  name: "listBox",
  props: {
		leftTitle: {
			type: String,
			default: ""
		},
		rightTitle: {
			type: String,
			default: ""
		},
		info: {
			type: Object,
			default: {}
		},
		indexkey: {
			type: Number,
			default: -1
		}
  },
  data() {
    return {
    }
  },
  methods: {
		edit(e) {
			this.$emit('editevent', e)
		}
  }
};
</script>

<style lang="scss" scoped>
	.list-box-com{
		width: 100%;
		background: #FFFFFF;
		box-sizing: border-box;
		.item{
			width: 692rpx;
			padding: 40rpx 26rpx;
			box-sizing: border-box;
			margin: 0 auto;
			display: flex;
			background: #FFFFFF;
			justify-content: space-between;
			line-height: 44rpx;
			font-size: 32rpx;
			border-bottom: 2rpx solid rgba(151,151,151,0.15);
			align-items: center;
			.left{
				color: #000000;
				letter-spacing: 2rpx;
				width: 140rpx;
				flex-shrink: 0;
				text-align: left;
				padding-right: 20rpx;
			}
			.right{
				flex-grow: 1;
				color: #666666;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>