circulation_ancientCoins_new/components/listBox.vue

<template>
  <view class="list-box-com">
	  <view class="item flex-between">
		  <view :class="'left ft30'">
		  	{{leftTitle}}
		  </view>
		  <view class="right ft30">
		  	<slot>{{rightTitle}}</slot>
		  </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;
			box-sizing: border-box;
			margin: 0 auto;
			display: flex;
			background: #FFFFFF;
			justify-content: space-between;
			line-height: 44rpx;
			font-weight: 400;
			align-items: center;
			padding: 42rpx 0;
			margin: 0 24rpx;
			border-bottom: 2rpx solid #F0F0F0;
			.left{
				text-align: left;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				letter-spacing: 2rpx;
				color: #222222;
			}
			.right{
				flex-grow: 1;
				display: flex;
				justify-content: flex-end;
				font-size: 32rpx;
				font-weight: normal;
				line-height: normal;
				text-align: right;
				letter-spacing: 0.24rpx;
				color: #666666;
			}
		}
		
	}
</style>