circulation_ancientCoins_new/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>{{rightTitle}}</template>
				<!-- #endif -->

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

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

<script>
export default {
  name: "listBox",
  props: {
	leftTitle: {
		type: String,
		default: ""
	},
	rightTitle: {
		type: String,
		default: ""
	}
  },
  data() {
    return {
    }
  },
  methods: {
  }
};
</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>