dudao_uniapp/pages/content/List/List.vue

<template>
	<view class="bg">
		<!-- 轮播 -->
		<view class="swipercontent ">
			<swiper class="swiper-box" style='height:474upx;' autoplay="true" circular="true" current="{swiperCurrent}"
				@change="swiperChange($event)" :data-current="swiperCurrent">
				<!-- <block > -->
				<swiper-item v-for="(item, index) in pic" :key="index">
					<view class='swiper-img'>
						<image :src="item" class="slide-image" />
					</view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<block v-for="(item, index) in pic" :key="index">
					<view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
		</view>

		<!--内容区域  -->
		<view class="content">

			<view class="cont-title">
				<!-- 		<view class="dtitle">
					<image class="limg" src="../../../static/images/ling.png" mode=""></image>
					<view class="title">
						乡村振兴六脉神剑
					</view>
					<image class="limg" src="../../../static/images/ling.png" mode=""></image>
				</view>
				<view class="
				* ftitle">
					乡村振兴服务(Rural Revitalization Services）
				</view> -->
				<!-- <image :src="top" mode="widthFix"></image> -->
				<view class="types">
					<image class="typePic" :src="top" mode="widthFix"></image>
				</view>
			</view>

			<!-- lieviao -->
			<view class="">
				<view class="cont-title h">
					<view class="dtitle">
						<image class="limg" src="../../../static/images/ling.png" mode=""></image>
						<view class="title">
							{{cate.cate_name}}
						</view>
						<image class="limg" src="../../../static/images/ling.png" mode=""></image>
					</view>
					<view class="ftitle">
						{{cate.sub_cate}}
					</view>

					<view class='listening'>
						<view class="list">
							<block v-for="(item, index) in listCase" :key="index">
								<view class="listcent" @tap="listDl($event)" :data-id="item.id">
									<image class="listPic" :src="item.pic" mode=""></image>
									<view class="biaot">
										<view class="bt">{{item.name}}</view>
										<view class="xianq">
											<view class="text">点击查看详情</view>
											<image class="jt" src="../../../static/images/jt.png" mode=""></image>
										</view>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>

			</view>
			<!-- 分类 -->
			<view class="">
				<view class="cont-title h">
					<view class="dtitle">
						<image class="limg" src="../../../static/images/ling.png" mode=""></image>
						<view class="title">
							公司其它六大业务
						</view>
						<image class="limg" src="../../../static/images/ling.png" mode=""></image>
					</view>
					<view class="ftitle">
						Company's Other Six Major Businesses
					</view>
					<!--五大业务  -->
					<view class="businesss">
						<view class="bus-content" v-for="(item, index) in business" :key="index">

							<view class="listness" v-if="index %2==0" @tap="cateList($event)" :data-id="item.id">
								<view class="bus-left">
									<view class="bus-conts1">
										<view class="bus-titles1">
											{{item.name}}
										</view>
										<view class="bustag">
											<view class="bustext" v-for="(items, index) in item.tag" :key="index">
												<view class="buslxian">|</view>
												<view class="bust">{{items}}</view>
											</view>
										</view>
										<view class="anniu">
											了解详情
										</view>
									</view>
								</view>
								<view class="bus-right">
									<image class="busPic" :src="item.cover" mode=""></image>
								</view>
							</view>

							<view class="listness" v-else-if="index %2==1" @tap="cateList($event)" :data-id="item.id">
								<view class="bus-right left">
									<image class="busPic" :src="item.cover" mode=""></image>
								</view>
								<view class="bus-left right">
									<view class="bus-conts1">
										<view class="bus-titles1">
											{{item.name}}
										</view>
										<view class="bustag">
											<view class="bustext" v-for="(items, index) in item.tag" :key="index">
												<view class="buslxian">|</view>
												<view class="bust">{{items}}</view>
											</view>
										</view>
										<view class="anniu">
											了解详情
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>

				</view>
			</view>

		</view>




		<view class="qiye-wei" v-if="poster != '' || wechat != '' ">

			<image v-if=" poster != '' " class="qiye-pic1" :src="poster" mode="widthFix"></image>

			<image v-if=" wechat != ''" class="qiye-pic2" :src="wechat" mode="widthFix"></image>


		</view>



		<view class="footer">
			<view class="footer-cont">

				<!-- 				<view class="footer-btn">
					<view class="btn-title"> <text class="btn-title-sz">{{config.but_name[0]}}</text>  <text class="btn-title-sz1">{{config.but_name[1]}}</text> </view>
					
					<view class="btn-fdesc">{{config.but_title}}</view>
				</view> -->

				<view class="footer-btn">

					<view class="btn-title">
						<label class="btn-title-sz"> {{config.but_name[0]}}</label>
						<label class="btn-title-sz1"> {{config.but_name[1]}}</label>
						<text class=""></text>
					</view>

					<view class="btn-fdesc">{{config.but_title}}<text></text></view>
				</view>



				<view class="logocont">
					<view class="logos">
						<image class="logo" src="../../../static/images/icon.png" mode=""></image>
						<view class="logo-text">
							<text class="logo-texts" v-for="(item, index) in cate.tag" :key="index">{{item}}</text>
						</view>
					</view>

					<view class="code">
						<image class="codePic" :src="cate.code" mode=""></image>
						<view class="codetext"><text class="codetext-s"> 长按二维码 获取更多</text> <text
								class="codetext-a">超级创意</text> </view>
					</view>
				</view>

			</view>


			<!-- 底部标签 -->
			<view class="business">
				<!-- <view class="businesscard">
					<view class="left">
						<view class="phone">
							<image class="pic" :src="cate.tel_pic" mode=""></image>
							<view class="cont">
								
								
								<view class="bus-cont">
								<view class="title1">{{cate.list_name[0]}}</view>
								
								<view class="tel">
									<text class="tel-num">{{cate.tel_name}}：</text>
									<text class="tel-txt">{{cate.phone}}</text>
								</view>
								
								<view class="bus-desc">{{config.but_flag}}</view>
								</view>
			
							</view>
						</view>
						<view class="bustag1" >
							
							<view class="bustext1" v-for="(item, index) in tag" :key="index">
								<view class="buslxian1">|</view>
								<view class="bust1">{{item}}</view>
							</view>
						</view>
					</view>
					<view class="rights1" @tap="tel">
			            <image class="ri-tel" src="../../../static/images/phone.gif" mode=""></image>  
					</view>
			
				</view> -->

				<view class="businesscard">


					<image class="pic" :src="cate.tel_pic" mode=""></image>
					<view class="cont">

						<view class="bus-cont">
							<view class="title1">{{cate.list_name[0]}} <text></text> </view>

							<view class="tel">
								<label class="tel-num">{{cate.tel_name}}:</label>
								<label class="tel-txt">{{cate.phone}}</label>
								<text></text>
							</view>

							<view class="bus-desc">{{config.but_flag}}<text></text></view>
						</view>

					</view>

					<view class="rights1" @tap="tel">
						<image class="ri-tel" src="../../../static/images/phone.gif" mode=""></image>
						<!-- <view class="ri-tel">立即咨询</view> -->
					</view>

				</view>
			</view>

		</view>


	</view>
</template>

<script>
	import share from '../../../components/share2.js'

	export default {
		data() {
			return {
				swiperCurrent: 0,
				pic: [],
				top: '',
				tabnum: 4,
				currentTab: 0, //预设当前项的值
				scrollLeft: 0, //tab标题的滚动条位置
				scrollTop: 0,
				account: [],
				phine: '',
				cate: [],
				listCase: [],
				cateid: '',
				business: [],
				case: [],
				type: '2',
				shares: '',
				config: '',
				poster: '',
				wechat: ''
			}
		},
		onLoad(e) {

			var that = this;
			console.log(222, e.cateid)
			that.cateid = e.cateid
			// return
			this.swiperChange = function(event) {
				this.swiperCurrent = event.detail.current;
			}
			//#ifdef H5

			this.inso1()
			this.insow()
			this.inso()
			// console.log(33338333,Dever_Share())

			//#endif
			this.getap()
			this.share()
			this.con_list()


			wx.loadFontFace({
				family: 'MFJinHei',
				source: 'url("https://trade.5dev.cn/cmmc/main/assets/mobile/css/MFJinHei_Noncommercial-Regular1.ttf")',
				success: console.log
			})
		},
		// onShareAppMessage(e) {
		// 	var that = this;
		// 	var pic = this.pic[0];
		// 	console.log(11189, pic)
		// 	// return share.share(this.typename, '/pages/taBbar/home/home?path=https://trade.5dev.cn/cmmc/dist/#/my?type=' + this.applet +'&id=',this.id, this.typename, that,
		// 	// 			  2,this.typename,
		// 	// 			);
		// 	// return share.share(this.name, '/pages/content/share/share?id='+ uni.getStorageSync('uid')+'&path=/pages/content/share/share?type=' + this.applet +'&id=',uni.getStorageSync('uid'),  this.name, that,
		// 	// return share.share(this.name, '/pages/content/share/share?type=' + this.applet +'&id=',uni.getStorageSync('uid'), this.name, that,

		// 	return share.share(this.shares.cate_name, '/pages/taBbar/Home/Home?id=' + this.cate.id + '&type=' + this.type +
		// 		'&path=/pages/content/List/List?id=', this.cate.id, this.shares.cate_name, that,
		// 		that.shares.cate_pic, this.shares.cate_name,
		// 	);

		// },


		onShareAppMessage(e) {

			var that = this;
			console.log(111, e)

			// var pic = that.myshopShare.pic;
			var scene = uni.getStorageSync('scene', scene);
			return share.share('/pages/taBbar/Home/Home?id=' + this.cate.id + '&type=' + this.type +
				'&path=/pages/content/List/List?id=' + this.cate.id,
				this.shares.cate_name, that.shares.cate_pic, 9)
		},




		methods: {


			con_list() {
				var that = this;
				var params = new Object()
				uni.request({
					// url: 'https://trade.5dev.cn/dudaowenlv/content/?l=api.share',
					url: this.host + 'api.con_list',
					data: params,
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {
						console.log(22222, res)
						that.poster = res.data.data.config.poster
						that.wechat = res.data.data.config.wechat
						// that.shares = res.data.data

					}
				})
			},
			share() {
				var that = this;
				var params = new Object()
				// params.signature = uni.getStorageSync('signature')
				// uni.showLoading({
				// 	title: '加载中'
				// });
				params.cate_id = that.cateid
				uni.request({
					// url: 'https://trade.5dev.cn/dudaowenlv/content/',
					url: this.host + 'l=api.share',
					data: params,
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {
						that.shares = res.data.data
						console.log(2222, res)
					}
				})
			},
			tel() {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: that.phine
				});
			},
			cateList(event) {
				console.log(2222, event.currentTarget.dataset.id)
				var cid = event.currentTarget.dataset.id
				uni.redirectTo({
					url: '/pages/content/List/List?cateid=' + cid
				})
			},
			listDl(event) {
				console.log(2222, event.currentTarget.dataset.id)
				var cid = event.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/content/List-dl/List-dl?id=' + cid
				})
			},
			getap() {
				var that = this;
				var params = new Object()
				params.id = that.cateid
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					// url: 'https://trade.5dev.cn/dudaowenlv/content/?l=api.lists',
					url: this.host + 'l=api.lists',
					data: params,
					method: 'GET',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success(res) {

						uni.setNavigationBarTitle({
							title: res.data.data.cate.title
						})

						console.log(2222, res.data.data.cate)
						that.pic = res.data.data.cate.pic.split(",");
						that.business = res.data.data.business;
						that.listCase = res.data.data.case;
						that.config = res.data.data.config
						var mob = res.data.data.cate.phone;
						that.phine = mob.replace(/(\d{3})(\d{4})/, "$1  $2  ");
						that.cate = res.data.data.cate;
						that.top = res.data.data.cate.top;
						that.account = res.data.data.cate.list_name;
						uni.hideLoading();
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh(); //得到数据后停止下拉刷新	

						//#ifdef H5

						let button = false;
						let uid = -1;
						let project = 104;
						let url = "http://cm.5dev.cn/wechat/share/?api.";
						let param = {
							title: res.data.data.config.h5_share_name,
							img: res.data.data.config.h5_share_pic,
							desc: res.data.data.config.h5_share_desc,
							url: window.location.href
						};
						console.log(89897, param);

						Dever_Share.Init(uid, project, url, param, button);
						//#endif


						// 						console.log(11118, m)
					}
				})
			},
			inso1() {
				var url =
					"https://code.jquery.com/jquery-3.5.1.min.js";
				console.log(111198, url);
				var jsap = document.createElement("script");
				jsap.charset = "utf-8";
				jsap.src = url;
				document.head.appendChild(jsap);
			},

			inso() {
				var url =
					"https://trade.5dev.cn/dever_package/script/assets/dever/share.js?t1&callback=onLoad";
				console.log(111198, url);
				var jsap = document.createElement("script");
				jsap.charset = "utf-8";
				jsap.src = url;
				document.head.appendChild(jsap);
			},

			insow() {
				var url =
					"https://trade.5dev.cn/dever_package/script/assets/lib/share/weixin.js";
				console.log(111198, url);
				var jsap = document.createElement("script");
				jsap.charset = "utf-8";
				jsap.src = url;
				document.head.appendChild(jsap);
			},


		}
	}
</script>

<style>
	/* 			@font-face {
		font-family: Snickles;
		src: url('https://trade.5dev.cn/cmmc/main/assets/mobile/css/mfjin.TTF');
		font-weight: normal;
		font-style: normal;
	} */
	.bg {
		background: #f7f7f7;
	}

	/* 轮播自定义样式 */
	.swipercontent {
		position: relative;
	}

	.swiper-box {
		background: #fff;
	}

	.slide-image {
		width: 100%;
		height: 454upx;
		display: block;
	}

	.swiper-box .uni-swiper-dots {
		position: absolute;
		margin: 0 auto !important;
		top: 316upx;
	}

	.swiper-box .uni-swiper-dot {
		width: 19upx;
		display: inline-flex;
		height: 7upx;
		margin-right: 20upx;
		justify-content: space-between;
	}

	.swiper-box .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: #e0e0e0;
	}

	.swiper-box .uni-swiper-dot-active::before {
		background: #2f2f2f;
		border-radius: 4upx;
	}

	.swipercontent {
		position: relative;
	}

	.dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0upx;
		display: flex;
		justify-content: center;
	}

	.dot {
		margin: 0 8upx;
		width: 21upx;
		height: 9upx;
		background: #333;
		border-radius: 16upx;
	}

	.dot.active {
		width: 21upx;
		background: #dfdfdf;
	}

	/* 结束 */
	/* 内容 */
	.cont-title {
		background: #FFFFFF;
	}

	.h {
		margin-top: 20upx;
	}

	.dtitle {
		overflow: hidden;
		_zoom: 1;
		display: flex;
		justify-content: center;
		margin: 0 auto;
		padding-top: 47upx;
		/* width: 300upx; */
	}

	.title {
		font-size: 42upx;
		font-family: PingFang-SC-Medium;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
		padding: 0 24upx;
		float: left;
	}

	.limg {
		float: left;
		width: 35upx;
		height: 15upx;
		display: block;
		margin-top: 22upx;
	}

	.ftitle {
		margin-top: 8upx;
		font-size: 28upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}

	.types {
		margin: 0 9upx;
		padding: 0upx 0 0upx 0;
	}

	.typePic {
		width: 100%;
	}

	/* tab切换列表 */
	/* 列表 */
	.listening {
		background: #FFFFFF;
	}

	.list {
		margin: 0 10upx;
		padding-top: 56upx;
		overflow: hidden;
		_zoom: 1;
		padding-bottom: 41upx;
	}

	.listcent {
		margin-left: 23upx;
		float: left;
		width: 333upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0upx 4upx 8upx 0upx rgba(201, 201, 201, 0.75);
		border-radius: 10upx;
		height: 348upx;
		margin-bottom: 21upx;
	}

	.listPic {
		display: block;
		width: 333upx;
		height: 230upx;
		border-radius: 10upx 10upx 0px 0px;
	}

	/*  */
	.biaot {
		background: #fff;
		text-align: center;
	}

	.bt {
		font-size: 26upx;
		font-family: PingFang-SC-Regular;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		padding: 20upx 12upx 18upx 12upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.xianq {
		overflow: hidden;
		_zoom: 1;
		margin: 0 81upx;
	}

	.text {
		font-size: 24upx;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		float: left;
	}

	.jt {
		width: 14upx;
		height: 16upx;
		float: right;
		display: block;
		margin-top: 11upx;
	}

	.footer-cont {
		padding: 67upx 80upx 46upx 80upx;
		background: #DD4243;
	}

	.tag {
		overflow: hidden;
		_zoom: 1;
	}

	.tag-title {
		font-size: 26upx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.labels {
		overflow: hidden;
		_zoom: 1;
		float: left;
	}

	.label {
		font-size: 26upx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		float: left;
	}

	.lxian {
		font-size: 26upx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		float: left;
		margin: 0 4upx;
	}

	.labels:last-child .lxian {
		font-size: 0upx;
		float: left;
		margin: 0;
	}

	.labels:first-child .lxian {
		font-size: 0upx;
		float: left;
		margin: 0;
	}

	/* 	.tel {
		overflow: hidden;
		_zoom: 1;
		margin-top: 23upx;
		line-height:44upx;
	} */

	.telpic {
		width: 37upx;
		height: 41upx;
		float: left;
		display: block;
		margin-right: 20upx;
	}

	.laos {
		/* font-family: MFJinHei; */
		/* font-weight: bold; */
		font-size: 34upx;
		color: #FFFFFF;
		float: left;
	}

	.phine {
		/* font-family: MFJinHei; */
		letter-spacing: 2upx;
		/* font-weight: bold; */
		font-size: 34upx;
		color: #FFFFFF;
		float: left;
	}

	.bohao {
		width: 36upx;
		height: 40upx;
		display: block;
		float: left;
		margin-left: 38upx;
		margin-top: 5upx;
	}

	.tjt {
		width: 39upx;
		height: 28upx;
		display: block;
		float: left;
		margin-left: 12upx;
		margin-top: 12upx;

	}

	.logocont {
		overflow: hidden;
		_zoom: 1;
		/* margin-top: 42upx; */
	}

	/* 	.logo {
		width: 353upx;
		height: 195upx;
		float: left;
	} */

	.code {
		float: right;
	}

	.codePic {
		width: 182upx;
		height: 182upx;

	}

	.codetext {
		text-align: center;
		font-size: 16upx;
		font-family: SourceHanSansCN-Bold;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	/* 业务 */
	.businesss {
		margin: 54upx 0 80upx 0;
	}

	.bus-content {}

	.bus-content:last-child .listness {
		padding-bottom: 0upx;
	}

	.listness {
		padding: 0 32upx;
		overflow: hidden;
		_zoom: 1;
		padding-bottom: 15upx;
	}

	.listness:last-child {
		margin-bottom: 0upx;
	}

	.bus-left {
		width: 334upx;
		height: 245upx;
		background: rgba(221, 66, 67, 1);
		float: left;
	}

	.bus-conts1 {
		margin: 0 16upx 0 28upx;
	}

	.bus-right {
		width: 334upx;
		height: 245upx;
		float: right;
	}

	.busPic {
		width: 334upx;
		height: 245upx;
	}

	.bus-titles1 {
		font-size: 44upx;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		margin-top: 44upx;
		margin-bottom: 25upx;
	}

	.bustag {
		overflow: hidden;
		_zoom: 1;
	}

	.bustext {
		overflow: hidden;
		_zoom: 1;
		float: left;

	}

	.buslxian {
		float: left;
		font-size: 20upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 0 6upx;
	}

	.bustext:first-child .buslxian {
		float: left;
		font-size: 0upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 0;
	}

	.bust {
		float: left;
		font-size: 20upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.anniu {
		margin-top: 30upx;
		width: 94upx;
		height: 34upx;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 2upx;
		line-height: 34upx;
		text-align: center;
		font-size: 20upx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	/* 		.bohao {
	    animation: move 1s 0s infinite;
	    -webkit-animation: move 1s 0s infinite;

	} */

	@keyframes move {

		0%,
		5% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		15% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		35% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		45% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		55% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		60% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		65% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		70% {
			-webkit-transform: rotate(6deg);
			transform: rotate(6deg);
		}

		75% {
			-webkit-transform: rotate(-6deg);
			transform: rotate(-6deg);
		}

		80% {
			-webkit-transform: rotate(6deg);
			transform: rotate(6deg);
		}

		85% {
			-webkit-transform: rotate(-6deg);
			transform: rotate(-6deg);
		}

		90% {
			-webkit-transform: rotate(6deg);
			transform: rotate(6deg);
		}

		95% {
			-webkit-transform: rotate(-6deg);
			transform: rotate(-6deg);
		}

		100% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	}

	.tjt {
		animation: move 1s 0s infinite;
		-webkit-animation: move 1s 0s infinite;
	}


	.tjt {
		position: relative;
		animation: myfirst 1s 0s infinite;
		-webkit-animation: myfirst 1s linear 1s infinite alternate;
	}

	@keyframes myfirst {
		0% {
			left: 0px;
		}

		25% {
			left: 3px;
		}

		50% {
			left: 6px;
		}

		75% {
			left: 3px;
		}

		100% {
			left: 0px;
		}
	}










	.footer-cont {
		padding: 72upx 73upx 37upx 86upx;
		background: #FFFFFF;
	}

	.tag {
		overflow: hidden;
		_zoom: 1;
	}

	.labels {
		overflow: hidden;
		_zoom: 1;
		float: left;
		/* display: inline-block; */
		/* display: flex; */
	}

	.label {
		font-size: 26upx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		float: left;
	}

	.lxian {
		font-size: 26upx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		float: left;
		margin: 0 4upx;
	}

	.labels:last-child .lxian {
		font-size: 0upx;
		float: left;
		margin: 0;
	}

	.labels:first-child .lxian {
		font-size: 0upx;
		float: left;
		margin: 0;
	}

	/* 	.tel {
			overflow: hidden;
			_zoom: 1;
			margin-top: 23upx;
			line-height:44upx;
	
		} */

	.telpic {
		width: 37upx;
		height: 41upx;
		float: left;
		display: block;
		margin-right: 20upx;
	}

	.laos {
		/* font-family: MFJinHei; */
		/* font-weight: bold; */
		font-size: 34upx;
		color: #FFFFFF;
		float: left;
	}

	.phine {
		/* font-family: MFJinHei; */
		letter-spacing: 2upx;
		/* font-weight: bold; */
		font-size: 34upx;
		color: #FFFFFF;
		float: left;
	}

	.bohao {
		width: 36upx;
		height: 40upx;
		display: block;
		float: left;
		margin-left: 38upx;
		margin-top: 5upx;

	}

	/* .flex{height:100%;display:flex;justify-content:center;align-items:center} */
	/* .bohao{
			width: 34upx;
			height: 36upx;
			display: block;
			float: left;
			margin-left: 38upx;
			margin-top: 5upx;
	
	} */


	.tjt {
		width: 39upx;
		height: 28upx;
		display: block;
		float: left;
		margin-left: 12upx;
		margin-top: 12upx;

	}

	/* 		.footer-btn{
			 text-align:justify;
			 text-align-last:justify;
			
		}
		.btn-title{
			font-size:58upx;
			font-family:Source Han Sans CN;
			font-weight:800;
			color:rgba(220,66,66,1);
			line-height:58upx;
			text-align: center;
			margin-bottom: 14rpx;
		}
	.btn-title-sz{
			color: #DC4242;
		}
		.btn-title-sz1{
				color: #211717;
			}
			.btn-fdesc{
				font-size:32upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:32upx;
				text-align: center;
				margin-bottom: 24rpx;
			} */

	.footer-btn view {

		text-align: justify;
		display: inline-block;
		text-align-last: justify;
		text-justify: inter-ideograph;
		vertical-align: top;
	}

	.footer-btn view text {
		display: inline-block;
		height: 0;
		width: 100%
			/* 换行 */
	}

	.btn-title {
		display: flex;
		font-size: 58upx;
		font-family: Source Han Sans CN;
		font-weight: 800;
		color: rgba(220, 66, 66, 1);
		line-height: 58upx;
		margin-bottom: 14rpx;
		height: 58rpx;
		width: 100%;
	}

	.btn-title-sz {
		color: #DC4242;

	}

	.btn-title-sz1 {
		color: #211717;

	}

	.btn-fdesc {
		width: 100%;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 32upx;
		height: 32rpx;
		text-align: center;
		margin-bottom: 24rpx;
	}

	.logocont {
		overflow: hidden;
		_zoom: 1;
		/* margin-top: 42upx; */
	}

	.logos {
		float: left;
		width: 352upx;
		margin-top: 15upx;
	}

	.logo {
		width: 324upx;
		height: 160upx;
		display: block;
		margin: 0 auto;
		/* padding-bottom: 20rpx; */

	}

	.logo-text {
		text-align: center;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 28upx;
		margin-top: 20rpx;

	}

	.logo-texts {
		margin-right: 8rpx;
	}

	.logo-texts:last-child {
		margin-right: 0rpx;
	}

	.code {
		float: right;
	}

	.codePic {
		width: 210upx;
		height: 210upx;
		display: block;

	}

	.codetext {
		text-align: center;
		/* font-size: 16upx;
			font-family: SourceHanSansCN-Bold;
			font-weight: bold;
			color: rgba(255, 255, 255, 1); */

		font-size: 16upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16upx;
		/* text-align:justify;
			 text-align-last:justify; */
	}

	.codetext-s {
		color: #333333;
	}

	.codetext-a {
		color: #DC4242;
	}



	/* 	.bohao {
	
	    animation: shake 1s;
	    -o-animation: shake 1s;
	    -webkit-animation: shake 1s;
	    -moz-animation: shake 1s;
	} */

	/* .bohao {
	    animation: move 1s 0s infinite;
	    -webkit-animation: move 1s 0s infinite;
	
	} */

	@keyframes move {

		0%,
		5% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		15% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		35% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		45% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		55% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		60% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		65% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		70% {
			-webkit-transform: rotate(6deg);
			transform: rotate(6deg);
		}

		75% {
			-webkit-transform: rotate(-6deg);
			transform: rotate(-6deg);
		}

		80% {
			-webkit-transform: rotate(6deg);
			transform: rotate(6deg);
		}

		85% {
			-webkit-transform: rotate(-6deg);
			transform: rotate(-6deg);
		}

		90% {
			-webkit-transform: rotate(6deg);
			transform: rotate(6deg);
		}

		95% {
			-webkit-transform: rotate(-6deg);
			transform: rotate(-6deg);
		}

		100% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	}

	.tjt {
		animation: move 1s 0s infinite;
		-webkit-animation: move 1s 0s infinite;
	}


	.tjt {
		position: relative;
		animation: myfirst 1s 0s infinite;
		-webkit-animation: myfirst 1s linear 1s infinite alternate;
	}

	@keyframes myfirst {
		0% {
			left: 0px;
		}

		25% {
			left: 3px;
		}

		50% {
			left: 6px;
		}

		75% {
			left: 3px;
		}

		100% {
			left: 0px;
		}
	}



	/* 底部 */

	.business {
		/* position: absolute; */
		/* bottom: 0.66rem; */
		width: 100%;
		background: #DD4243;


	}

	.businesscard {
		height: 190upx;
		/* background: rgba(0, 0, 0, 0.4); */
		/* margin: 0 32upx; */
		overflow: hidden;
		_zoom: 1;
		padding: 0 42upx 0 53upx;
		display: flex;

	}

	.left {
		float: left;

	}

	.rights1 {
		/* float: right; */
		/* padding: 4rpx 12rpx; */

		/* background: #fcebeb; */
		margin-top: 13upx;
		margin-left: 10rpx;
	}

	.ri-tel {
		/* color: #e03537; */
		/* font-size: 28upx; */
		/* text-align: center; */
		width: 103upx;
		height: 173upx;
		display: block;
	}

	.phone {
		overflow: hidden;
		_zoom: 1;
		display: flex;
	}

	.pic {
		width: 154upx;
		height: 154upx;
		/* border-radius: 50%; */
		display: block;
		margin: 18upx 20upx 0 0upx;
		display: block;
		/* margin-bottom: 17upx; */

	}

	.bus-cont view {
		/* 	text-align: justify;
		text-align-last: justify; */
		text-align: justify;
		display: inline-block;
		text-align-last: justify;
		text-justify: inter-ideograph;
		vertical-align: top;
		width: 100%;

	}

	.bus-cont view text {
		display: inline-block;
		height: 0;
		width: 100%
			/* 换行 */
	}




	.title1 {
		margin-top: 41upx;
		margin-bottom: 17rpx;
		font-size: 28upx;
		height: 28upx;
		line-height: 28upx;
		/* font-weight:bold; */
		color: #fff;
	}

	.tel {
		color: #fff;
		font-size: 30upx;

		line-height: 30upx;
		height: 30upx;
		/* text-align: left; */
		/* display: flex; */
		/* line-height: 30rpx; */

	}

	.tel-num {
		/* height: 30upx;
		line-height: 30upx; */
	}

	.tel-txt {
		/* 	height: 30upx;
		line-height: 30upx; */
		letter-spacing: 6upx;
	}

	.bus-desc {
		/* margin-top: 20rpx; */
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		/* color:rgba(51,51,51,1); */
		line-height: 20upx;
		color: #fff;
		height: 20upx;

		/* font-size:20px; */
		/* font-family:Source Han Sans CN; */
		/* font-weight:400; */
		/* color:rgba(51,51,51,1); */
		/* line-height:29px; */
	}

	.cont {
		overflow: hidden;
		_zoom: 1;
		flex: 1;
	}


	.bustag1 {
		overflow: hidden;
		_zoom: 1;
	}

	.bustext1 {
		overflow: hidden;
		_zoom: 1;
		float: left;
		/* margin-bottom: 30upx; */
	}

	.buslxian1 {
		float: left;
		font-size: 30upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 0 6upx;
	}

	.bustext1:first-child .buslxian1 {
		float: left;
		font-size: 0upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 0;
	}

	.bust1 {
		float: left;
		font-size: 30upx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}


	.qiye-wei {
		background: #FFFFFF;
		/* padding-bottom: 50rpx; */
		position: relative;
	}

	.qiye-pic1 {
		margin: auto;
		display: block;
		height: 300rpx;
		vertical-align: middle;
		max-width: 100%;
	}

	.qiye-pic2 {
		margin: auto;
		display: block;
		vertical-align: middle;
		height: 300rpx;
		max-width: 100%;
	}
</style>