<template>
	<view>
		<view class="tabs">
			<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
			<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
				价格
				<image
					class="icon"
					mode="widthFix" :src="require(marketType == 'low' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
				/>
			</view>
		</view>
		<view class="lists">
			<view class="item" v-for="(item, index) in 10" :key="index">
				<image class="cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
				<view class="content">
					<view class="title nowrap">易品新境权证<text>*1</text></view>
					<view class="text nowrap">谷风一木3层软抽面巾纸</view>
					<view class="text nowrap">转让方：温文尔雅的小阿玉</view>
					<view class="text nowrap">Hash：djsakljkljfl3213dsaHKLDJS82231csa</view>
				</view>
				<view class="price">￥21000.00/个</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex	: 0,
				marketType	: 'low',
				marketArray : []
			};
		},
		methods:{
			onTabs(e){
				let index = e.target.dataset.index
				if(index == 0 && index == this.tabIndex) return	
				if(index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'low' ? 'high': 'low'
				this.tabIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background: white;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		.tabs-item{
			font-size: $title-size-m;
			color: $text-gray;
			.icon{
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
				margin-left: $margin / 3;
				margin-bottom: 4rpx;
			}
			&.show{
				color: $text-price;
			}
		}
	}
	// 列表
	.lists{
		padding: 70rpx $padding $padding;
		.item{
			min-height: 168rpx;
			position: relative;
			background: white;
			border-radius: $radius/2;
			margin-top: $margin;
			padding: $padding;
			.cover{
				position: absolute;
				left: $padding;
				top: $padding;
				width: 168rpx;
				height: 168rpx;
			}
			.content{
				padding-left: calc(168rpx + #{$padding});
				.title{
					position: relative;
					font-size: $title-size-lg;
					color: $text-color;
					font-weight: bold;
					line-height: 52rpx;
					padding-right: 60rpx;
					text{
						position: absolute;
						right: 0;
						top: 0;
						width: 60rpx;
						text-align: right;
						font-weight: normal;
					}
				}
				.text{
					font-size: $title-size-sm;
					color: $text-gray;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
			.price{
				margin-top: $margin - 10;
				padding-top: $padding - 10;
				font-size: $title-size-m;
				text-align: right;
				border-top: solid 1rpx $border-color;
				font-weight: bold;
				color: $text-price;
			}
		}
	}
</style>
