yiliangyiyun-app/pages/grain_pulse/details.vue

<template>
	<view>
		<view class='swiper'>
			<swiper class="screen-swiper header-swiper" ::class="dotStyle?'square-dot':'round-dot'"
				:indicator-dots="false" :circular="true"  interval="5000" 
				 :current="status" @change="topSwiperTab">
				<swiper-item class="swiper-item" v-for="(item,index) in imagelist" :key="index"
					:class="status==index?'text-white':''" @click="naviageToPage(item.url)">
					<image :src="item.url"></image>
					<!-- 	<view style='position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);'>11111</view> -->
				</swiper-item>
			</swiper>
			<view class="dots">
				<text class='Regular'>{{status+1}} / {{imagelist.length}}</text>
			</view>
			<view class='functionality'>
				<image @click='show=true' class='jubao' src="../../static/img/liangmai/jubao.png" mode=""></image>
				<image class='collect' :src="iscollect?'../../static/img/liangmai/shoucang1.png':'../../static/img/liangmai/shoucang-2.png'" mode=""></image>
			</view>
		</view>
		<view class='company'>
			<view style='padding:21px;'>
				<view style='font-size:24px;' class='Medium'>中天昊元粮库中天昊元粮库</view>
				<view style='margin-top:3px;' class='flex'>
					<view class='aptitude'>
						<image class='aptitudeImage' :src="aptiutudeStatus?'../../static/img/liangmai/bg_no_check.png':'../../static/img/liangmai/bg_check.png'" mode=""></image>
						<text class='aptitudeText Medium'>资质</text>
					</view>
					<view class='Regular' style='font-size:13px;'>主营：<text>烘干塔 粮库 加工厂</text></view>
				</view>
				<view style='margin:12.5px 0;' class='flex'>
					<view class="tag Regular">
						超大规模
					</view>
					<view class="tag Regular">
						超大规模
					</view>
					<view class="tag Regular">
						超大规模
					</view>
				</view>
				
				
			</view>
			<view class="generalSituation">
				<view class="title Medium">企业概况</view>
				<view class="content Regular">
					黑龙江中天昊元贸易有限公司成立至今，从仅2名员工的人资力量以及从俭的办公条件，现以发展转型为员工70余人，年贸易周转量150余万吨的规模性粮食贸易公司…
				</view>
			</view>
			<view class='contactWay'>
				<view class="title Medium">联系方式</view>
				<view class='contactWayContent'>
					<view class='flex linkman'>
						<view style='flex:1;' class='title Regular'>联系人</view>
						<view style='flex:3;'>
							<view class='Regular linkmanItem' v-for='item in linkmanList'>
								{{item.name}} <a :href="item.phone"><image class="phone" src="../../static/img/liangmai/dianhau.png" mode=""></image></a>
							</view>
						</view>
					</view>
					<view class="flex mailbox">
						<view style='flex:1;' class='title Regular'>邮箱</view>
						<view class='Regular' style='font-size:14px;flex:3;'>
							12345678@xx.com
						</view>
					</view>
					<view class="flex fax">
						<view style='flex:1;' class='title Regular'>传真</view>
						<view class='Regular' style='font-size:14px;flex:3;'>
							12345678@xx.com
						</view>
					</view>
					<view class="flex fax">
						<view style='flex:1;' class='title Regular'>地址</view>
						<view style='font-size:14px;flex:3;' class='Regular'>
							12345678@xx.com
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="selector" v-model="show"  @confirm='selecttype' :range="selector"></u-picker>
	</view>
	
</template>

<script>
	export default {
	    components: {
	        
	    },
		data() {
			return {
				imagelist:[
					{url:'../../static/img/authentication/banklow(2).png'},
					{url:'../../static/img/authentication/banklow(2).png'},
					{url:'../../static/img/authentication/banklow(2).png'}
				],
				linkmanList:[
					{name:'廖经理',phone:'18513069273'},
					{name:'廖经理',phone:'18513069273'},
					{name:'廖经理',phone:'18513069273'},
					{name:'廖经理',phone:'18513069273'},
				],
				dotStyle: false,
				status: 0,
				show:false,
				selector:['纠错','举报'],
				aptiutudeStatus:false,
				iscollect:false
			}
		},
		onLoad(){
			
		},
		methods: {
			topSwiperTab(e) {
				var that = this;
				this.status = Number(e.target.current);
			},
			selecttype(e){
				console.log(e)
				if(e[0]==1){
					uni.navigateTo({
						url:'/pages/grain_pulse/jubao'
					})
				}else{
					uni.navigateTo({
						url:'/pages/grain_pulse/errorcorrection'
					})
				}
			},
			jubao(){
				
			},
		}
	}
</script>

<style lang='scss' scoped>
	/* 《--轮播 */
	.swiper{
		position:relative;
		height:281.5px;
	}
	.screen-swiper{
		height:281.5px;
	}
	.swiper .dots{
		position:absolute;
		bottom:53px;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 0px 11px 11px 0px;
		width: 58.5px;
		height: 23px;
		line-height:23px;
		text-align:center;
		padding:3px;
		color:#FFFFFF;
	}
	.functionality{
		position: absolute;
		right:0;
		bottom:53px;
	}
	.jubao{
		width:22px;height:19px;
		margin-right:25px;
	}
	.collect{
		width:22px;height:22px;
		margin-right:19.5px;
	}
	/* 轮播--》 */
	/*《--公司 */
	.company{
		background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
		height:550px;
		border-radius:20px;
		margin-top:-38px;
		position: relative;
		z-index: 3;
	}
	.aptitude,.aptitudeImage{
		width: 38px;
		height:20px;
	}
	.aptitude{
		position:relative;
		margin-right:5px;
	}
	.aptitudeText{
		color:#8B511E;
		position:absolute;
		left:0;
		width:40px;
		top:0;
		text-align:center;
		width:100%;
		line-height: 20px;
		font-size:11px;
		height:100%;
	}
	.tag{
		background:#F5F6F9;
		padding:2.5px 6.5px;
		border-radius:3px;
		font-size:11px;
		margin-right:11.5px;
	}
	.generalSituation{
		background:#fff;
		margin:9px;
		padding:12px;
		border-radius:10px;
		.title{
			font-size:16px;
			margin:0 0 9.5px;
		}
		.content{
			font-size:12px;
			color:#676E80;
		}
	}
	.contactWay{
		margin:9px;
		padding:11.5px 13px;
		background:#fff;
		border-radius:10px;
		>.title{
			font-size:16px;
			color:#333;
			margin-bottom:12px;
		}
		.contactWayContent{
			.linkman>.title,.mailbox>.title,.fax>.title,.address>.title{
				color:#676E80;
				font-size:14px;
			}
			.mailbox,.fax,.address{
				margin-bottom:10px;
			}
			.linkmanItem{
				margin-bottom:10px;
			}
			.phone{
				width:14px;height:14px;margin-left:6px;
			}
		}
	}
	/* 公司--》 */
</style>