yiliangyiyun-app/pages/grain_pulse/home.vue

<template>
	<view>
		<view class="header">
			<view class="flex justify-between map">
				<view class='Medium flex align-item-center locationwrap'>
					<image class='location' src="../../static/img/liangmai/icon_ditu.png" mode=""></image>
					黑龙江中天昊元…
				</view>
				<view class='Regular flex align-item-center distribution justify-center'>
					<image class='cangku' src="../../static/img/liangmai/cangku.png" mode=""></image>
					分布
				</view>
			</view>
			<view class="cu-bar search">
				<view class="search-form round" @click="naviageToPage('/pages/grain_pulse/search')">
					<image class='icon-scarch' src="../../static/img/liangmai/sousuo.png" mode=""></image>
					<view class='Regular'> 请输入货名或标题</view>
				</view>
			</view>
		</view>
		<view class="content" >
			<view @click='friendcircle' class="friendcircle">
				<view class='title flex align-item-center Medium'>
					<image class='icon-friendcircle' src="../../static/img/liangmai/icon.png" mode=""></image>
					圈友说
				</view>
				<view class='friendcircle-content flex justify-between'>
					<image class='bg' src="../../static/img/liangmai/bg.png" mode=""></image>
					<view class='friendcircle-content-right'>
						<view class='friendcircle-content-right-item Regular flex align-item-center'><image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…</view>
						<view class='friendcircle-content-right-item Regular flex align-item-center'><image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…</view>
						<view class='friendcircle-content-right-item Regular flex align-item-center'><image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…</view>
						<view class='friendcircle-content-right-item Regular flex align-item-center'><image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…</view>
					</view>
				</view>
			</view>
			<view class='list-type'>
				<view :class='status==0?"Semibold active":"Regular"' class="typeitem">全部</view>
				<view :class='status==0?"Semibold active":"Regular"' class="typeitem">粮库</view>
				<view :class='status==0?"Semibold active":"Regular"' class="typeitem">加工厂</view>
				<view :class='status==0?"Semibold active":"Regular"' class="typeitem">烘干塔</view>
				<view :class='status==0?"Semibold active":"Regular"' class="typeitem">饲料厂</view>
				<view :class='status==0?"Semibold active":"Regular"' class="typeitem">饲料厂</view>
			</view>
			<view @click='todetails' class="listitem">
				<view class="flex">
					<image class='listitem-left' src="../../static/img/authentication/bankup(2).png" mode=""></image>
					<view class="listitem-right">
						<view class="companyname Medium">中天昊元粮库中天昊元粮库</view>
						<view class='Regular introduce'>我是企业介绍我是企业介绍我是企业介绍我是</view>
					</view>
				</view>
				<view class="flex  align-item-center justify-between">
					<view class='companylocation flex align-item-center Regular'>
						<image class='location' src="../../static/img/liangmai/icon_ditu.png" mode=""></image>
						辽宁省营口市鲅鱼圈区xx路108号
					</view>
					<view class='distance Regular'>50m</view>
				</view>
			</view>
		</view>
		<view class="enter">
			<image style='width:56.5px;height:28px;' src="../../static/img/liangmai/ruzhu.png" mode=""></image>
			<view class='enter-content'>入驻</view>
		</view>
		
	</view>
</template>

<script>
	export default {
        components: {
            
        },
		data() {
			return {
				status:0
			}
		},
		onLoad(){
			
		},
		methods: {
			friendcircle(){
				uni.navigateTo({
					url:'/pages/grain_pulse/friendcircle'
				})
			},
			todetails(){
				uni.navigateTo({
					url:'/pages/grain_pulse/details'
				})
			},
			naviageToPage(item){
				uni.navigateTo({
					url:item
				})
			}
		}
	}
</script>

<style scoped>
	/* 《--头部 */
	.header{
		padding:0 12.5px;
		background:#fff;
		border-radius:0 0 10px 10px;
	}
	/* 头部--》 */
	/* 《--定位 */
	.location{
		width:15.5px;height:17.5px;margin-right:2.5px;
	}
	.locationwrap{
		font-size:16px;
	}
	/* 定位 --》 */
	/* 《--分布 */
	.map{
		padding:8.5px 0;
	}
	.cangku{
		width:16.5px;height:16.5px;margin-right:5px;
	}
	.distribution{
		background:#F5F6FA;
		width: 71.5px;
		height:32px;
		border-radius:15px;
		font-size:12px;
	}
	/* 分布--》 */
	/* 《--搜索 */
	.cu-bar .search-form{
		background:#F5F6F9;
		margin:0;
		margin-bottom:18px;
		padding:10px 18px;
	}
	.icon-scarch{
		width:15px;
		height:15px;
		margin-right:5px;
	}
	/* 搜索--》 */
	/* 《--内容 */
	.content{
		margin-top:13px;
	}
	/* 内容--》 */
	/* 《--圈友说 */
	.friendcircle{
		background:#fff;
		margin:0 9px;
		border-radius:4px;
	}
	.friendcircle .title{
		font-size:16px;
		padding:11.5px 14.5px;
	}
	.icon-friendcircle{
		width:17px;height: 17px;margin-right:5.5px;
	}
	.bg{
		width:110px;height:124px;
	}
	.friendcircle-content{
		padding:0 17px 18px;
	}
	.friendcircle-content-right{
		margin-left:15.5px;
	}
	.friendcircle-content-right-item{
		background: linear-gradient(90deg, #F5F6FA 0%, #FFFFFF 100%);
		border-radius:12.5px;
		margin-bottom:10px;
		width:205.5px;
		font-size:12px;
		padding:3px 0;
	}
	.headportrait{
		width:22.5px;height:22.5px;
		margin-right:8.5px;
	}
	/* 圈友说--》 */
	/* 《--类型 */
	.list-type{
		background: linear-gradient(180deg, #F5F6FA 0%, #FFFFFF 100%);
		width:100%;
		padding-top:5px;
		height:49px;
		overflow-x: scroll;
	}
	.typeitem{
		margin:10px;
		position:relative;
		display:inline-block;
		padding-top:8px;
		padding-bottom:5px;
	}
	.typeitem.active{
		font-size:16px;
	}
	.typeitem.active:after{
		content:'';
		display:block;
		position:absolute;
		height:3px;
		bottom:0;
		background:#22C572;
		width:50%;
		left:50%;
		transform: translateX(-50%);
	}
	/* 类型--》 */
	/* 《--数据 */
	.listitem{
		background:#fff;
		margin:10px;
		padding:15px 19px;
	}
	.listitem-left{
		width:98.5px;
		height:96.5px;
		margin-right:8px;
		border-radius:5px;
	}
	.companyname{
		font-size:14px;
		color:#333;
	}
	.introduce{
		font-size:12px;
		color:#676E80;
	}
	.companylocation{
		color:#676E80;
		background:#F5F6FA;
		margin-top:8px;
		padding:4px 10px;
		border-radius:15px;
	}
	.distance{
		color:#AFB3BF;
		padding:4px;
		margin-top:8px;
	}
	/* 数据--》 */
	.enter{
		position:fixed;
		right:0;
		width:56.5px;height:28px;
	}
	.enter-content{
		position:absolute;
		right:5px;
		top:50%;
		transform: translateY(-50%);
		color:#fff;
		
	}
</style>