barter-app/pages/equity/index.vue

<template>
	<view>
		<!-- 状态栏 -->
		<nv :config="nvConfig" @nvTabTap="onNvTab"></nv>
		<!-- 搜索 -->
		<view class="search">
			搜索
		</view>
		<!-- 推荐商家 -->
		<scroll-view scroll-x class="recommended">
			<block v-for="(item, index) in 4" :key="index">
				<view class="item-box">
					<image
						class="item-cover"
						src="@/static/dev/mall-logo-01.png"
						mode="aspectFill"
					></image>
					<view class="item-title">MLB</view>
					<view class="item-btn">进店</view>
				</view>
				<view class="item-box">
					<image
						class="item-cover"
						src="@/static/dev/mall-logo-00.png"
						mode="aspectFill"
					/>
					<view class="item-title">名创优品</view>
					<view class="item-btn">进店</view>
				</view>
			</block>
		</scroll-view>
		<!-- 热易商家 -->
		<swiper class="hot-swiper">
			<swiper-item v-for="(item, index) in 3" :key="index">
				<view class="hot-box">
					<image
						class="cover"
						src="@/static/dev/mall-logo-00.png"
						mode="aspectFill"
					/>
					<view class="content">
						<view class="title nowrap">MLB（美职联）</view>
						<view class="credibility">
							<uni-rate
								:readonly="true"
								color="#ddd"
								active-color="#c82626"
								:value="2.5"
								:size="14"
							/>
						</view>
						<view class="trading nowrap">累计交易100次</view>
					</view>
					<view class="btn">进店</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 行业分类 -->
		<scroll-view class="industry-tabs" scroll-x>
			<view class="industry-item show">全部</view>
			<view class="industry-item">轻工食品</view>
			<view class="industry-item">服饰纺织</view>
			<view class="industry-item">家居用品</view>
			<view class="industry-item">住宿餐饮</view>
			<view class="industry-item">建筑建材</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				nvConfig: {
					tabArr: [
						{title:'企业广场', active:true},
						{title:'易货商城'}
					],
					color: "#555"
				}
			};
		},
		methods:{
			onNvTab(e){
				let tabIndex = e.index
				for(let i in this.nvConfig.tabArr){
					if(i == tabIndex) this.nvConfig.tabArr[i].active = true
					else this.nvConfig.tabArr[i].active = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 行业分类
	.industry-tabs{
		white-space:nowrap;
		padding: $padding 0;
		.industry-item{
			margin-left: $margin;
			display: inline-block;
			line-height: 50rpx;
			font-size: $title-size-lg;
			color: $text-gray;
			&:last-child{
				margin-right: $margin;
			}
			&.show{
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
			}
		}
	}
	// 热易商家
	.hot-swiper{
		margin: $margin;
		height: 198rpx;
		.hot-box{
			position: absolute;
			height: 100%;
			width: 100%;
			border-radius: ($radius/2);
			background: white;
			box-shadow: 0 0 6rpx 6rpx rgba($color: #000, $alpha: .02);
			padding: $padding;
			box-sizing: border-box;
			.cover{
				position: absolute;
				left: $padding;
				top: $padding;
				width: calc(198rpx - #{$padding * 2});
				height: calc(198rpx - #{$padding * 2});
			}
			.content{
				padding-left: calc(198rpx - #{$padding});
				padding-right: calc(100rpx + #{$padding});
				.title{
					font-weight: bold;
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 40rpx;
					color: $text-color;
					padding-bottom: 10rpx;
				}
				.credibility{
					height: calc(108rpx - #{$padding * 2});
					font-size: $title-size-m;
					color: $text-gray;
				}
				.trading{
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
				}
			}
			.btn{
				position: absolute;
				top: 50%;
				right: $padding;
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				width: 100rpx;
				text-align: center;
				margin-top: -25rpx;
			}
		}
	}
	// 推荐商家
	.recommended{
		white-space:nowrap;
		padding: $padding 0;
		.item-box{
			display: inline-block;
			background: white;
			box-shadow: 0 0 6rpx 6rpx rgba($color: #000, $alpha: .02);
			width: 240rpx;
			margin-left: $margin;
			border-radius: ($radius/2);
			padding: ($padding + $padding/2) $padding;
			box-sizing: border-box;
			text-align: center;
			&:last-child{
				margin-right: $margin;
			}
			.item-cover{
				background: #eee;
				width: 88rpx;
				height: 88rpx;
				vertical-align: top;
				border-radius: $radius / 2;
			}
			.item-title{
				font-weight: bold;
				font-size: $title-size-lg;
				padding: ($padding/2) 0;
				color: $text-color;
			}
			.item-btn{
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				display: inline-block;
				width: 100rpx;
			}
		}
	}
</style>

<!-- goods: [
	{
		cover: "https://yanxuan-item.nosdn.127.net/d3b072b5006f56935d15d239cbc5c953.jpg",
		title: "片片大果仁，夏威夷坚果脆片 可可味 55克",
		price: "16",
		sales: "25"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/8cfaed758404e23bc74c7214505ce5ec.jpg",
		title: "每日坚果亚麻籽谷物燕麦片 600克",
		price: "58",
		sales: "1002"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/65af0745153e2dfa3d7c4fafb7472db6.jpg",
		title: "全新升级银罐，玲珑柑普茶 130克（10颗）",
		price: "98",
		sales: "2235"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/f3af9b6eaf15e6e3be1f14e14da90930.jpg",
		title: "别致养生设计 猪鬃气垫按摩梳",
		price: "79",
		sales: "992"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/cb99e8a2f4597f3a5d05347a9eeb64c5.png",
		title: "2020年新款，日式减压按摩腰靠",
		price: "219",
		sales: "231"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/fff6aead2baff207e869f0aa6f276b63.png",
		title: "T300无线吸尘器",
		price: "159",
		sales: "988"
	}
] -->