youngee_c_web_v2/pages/tasksquare/search.vue

<template>
	<view class="nav">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="home" style="padding-top: 160rpx;">
			<view>
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue">
				</uni-search-bar>
			</view>
			<view class="commodity" style="margin-top: 3%;">
				<view class="project" v-for="(item,index) in projectList" :key="index" @tap="project(item)">
					<view class="projectdiagram" :style="{backgroundImage:`url(${item.coverphoto})`}">
						<view class="Mask" v-if="item.ddl">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png" mode="">
							</image>
						</view>
						<view style="padding-left: 4%;padding-top: 2%;">
						</view>
					</view>
					<view class="projecttext">
						<image :src="item.project_imgper" mode=""></image>
						<span>{{item.project_name|ellipsis}}</span>
					</view>
					<view style="padding-left: 1%;">
						<view class="TitleText" v-if="item.isself===1">
							<p>自报价</p>
						</view>
						<view class="TitleText" v-if="item.isfixedfee===1">
							<p>固定稿费</p>
						</view>
						<view class="TitleText" v-if="item.project_form===3">
							<p>线下探店</p>
						</view>
					</view>

					<view class="introduction">
						<view class="rleft" style="">
							<p>商品价值： <span
									style="color: red;font-weight: 600;">￥{{item.ProductInfo.ProductPrice}}</span></p>
						</view>
						<view class="rright" style="display: flex;justify-content:space-between;">
							<p>招募人数： <span style="color: balck;font-weight: 600;">{{item.taskNum}}</span></p>
							<p>报名人数： <span style="color: balck;font-weight: 600;">{{item.apply_num}}</span>
							</p>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 普通弹窗  公众号-->
		<uni-popup ref="popup4" class="share" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="sharepage">
					<view class="projecttext1">
						<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/project15.png"
							style="width: 80rpx; height: 80rpx;" mode=""></image>
						<span>YoungGee</span>
					</view>
					<view class="" style="margin-top: 5%;">
						<p style='color: #333333;font-size: 28rpx;text-align: center;'>扫码联系</p>
					</view>
					<view class="sharemap">
						<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu.png"
							style="width: 400rpx;height: 400rpx;" mode=""></image>
					</view>
				</view>

			</view>
		</uni-popup>
		<view class="contact" @click="toggle4('center')">
			<view class="contt">
				<!-- <image class="img2" src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home2.png" mode=""></image> -->
				<image class="img1"
					src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu_20211124192542.png" mode="">
				</image>

			</view>

		</view>
	</view>
</template>
<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import request from '@/components/request.js'
	import searchVue from "./search.vue";
	/* 默认首页路径 */
	const homePath = "/pages/pupu/pupudao";
	/* 默认首页图标路径 */
	const homeIconPath = "/static/img/png4.png";
	/* 默认返回图标路径 */
	const backIconPath = "/static/img/png2.png";
	export default {
		props: {
			scrollTop: {
				type: Number,
				default: function() {
					return 0;
				},
			},
		},
		filters: {
			ellipsis(value) {
				if (!value) return "";
				if (value.length > 20) {
					return value.slice(0, 20) + "...";
				}
				return value;
			},
		},
		components: {
			mvBar,
		},
		data() {
			return {
				searchValue: "",
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "任务搜索",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
				token: '',
				per: 0,
				type4: 'center',
				//轮播图
				img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				list1: [{
						img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png',
						name: '/pages/tasksquare/guide'
					},
					{
						img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home7.png',
						name: '/pages/tasksquare/cooperation'
					}
				],
				//弹窗
				type: 'center',
				formData: {
					hobby: [],
					hobby1: [],
					hobby2: [],
				},
				hobby: [],
				hobby1: [{
					text: '产品置换',
					value: 1
				}, {
					text: '固定稿费',
					value: 2
				}, {
					text: '自报价',
					value: 3
				}],
				hobby2: [{
					text: '实体商品寄拍',
					value: 1
				}, {
					text: '虚拟产品测评',
					value: 2
				}, {
					text: '线下探店打卡',
					value: 3
				}],
				iconW: undefined,
				iconH: undefined,
				btnWidth: undefined,
				btnHeight: undefined,
				navBarTop: undefined,
				navBarHeight: undefined,
				navBarLeft: undefined,
				navBarRight: undefined,
				inputHeight: undefined,
				opacity: 0,
				isHome: false,
				homeIconPath: homeIconPath,
				backIconPath: backIconPath,
				img: '../../static/home/home.png',
				// 最多显示页数
				max_page: '',
				tupian: {
					wen: '原创图片',
					lin: 1,
				},
				projectList: [],
				img456: '../../static/home/home.png',
				platformList: [],
				filtCondition: '',
			};
		},
		computed: {
			isSharePage() {},
		},
		watch: {
			scrollTop(val) {
				if (!this.mysNavConfig.isOpacity) {
					return;
				}
				this.setOpacity(val, this.mysNavConfig.opacityTime);
			},
		},
		onShow() {
			this.isLogin()
		},
		onLoad() {
			this.getInfoList()
			this.per = 0
			this.getProjectListAPI()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.per = 0
			this.getProjectListAPI()
			//停止下拉刷新
			uni.stopPullDownRefresh()
		},
		// 下拉懒加载
		async onReachBottom() {
			++this.per;
			if (this.per >= this.max_page) {
				uni.showToast({
					title: "已加载全部"
				})
			} else {
				uni.showLoading({
					title: '加载中'
				})
				await this.$http.get('/youngee/c/g/get-project-list' +
					"?" +
					"idx" +
					"=" +
					this.per +
					"&cnt" +
					"=" +
					20 + this.filtCondition
				).then(res => {
					console.log(res)
					this.max_page = res.data.data.max_page
					for (var i = 0; i < res.data.data.ProjectInfos.length; i++) {
						// 封面图片
						res.data.data.ProjectInfos[i].ProductInfo = JSON.parse(res.data.data.ProjectInfos[i]
							.product_snap);

						// 封面图片
						let ProductPhoto = JSON.parse(res.data.data.ProjectInfos[i].product_photo_snap);
						for (let j = 0; j < ProductPhoto.length; ++j) {
							if (ProductPhoto[j].Symbol == 1) {
								res.data.data.ProjectInfos[i].coverphoto = ProductPhoto[j].PhotoUrl
							}
						}
						// 获取平台图片
						for (var j = 0; j < this.platformList.length; j++) {
							if (res.data.data.ProjectInfos[i].project_platform === this.platformList[j]
								.id) {
								res.data.data.ProjectInfos[i].project_imgper = this.platformList[j]
									.platform_icon
							}
						}

						// 任务数量&稿费形式
						res.data.data.ProjectInfos[i].taskNum = 0
						let lengthOfRecruitStrategys = res.data.data.ProjectInfos[i]
							.RecruitStrategys != null ? res.data.data.ProjectInfos[i]
							.RecruitStrategys
							.length : 0
						for (var j = 0; j < lengthOfRecruitStrategys; j++) {
							res.data.data.ProjectInfos[i].taskNum = Number(res.data.data
								.ProjectInfos[i]
								.taskNum) + Number(res.data.data.ProjectInfos[i]
								.RecruitStrategys[j]
								.recruit_number)

							res.data.data.ProjectInfos[i].isfixedfee = 0
							if (res.data.data.ProjectInfos[i].RecruitStrategys[j].fee_form === 2) {
								res.data.data.ProjectInfos[i].isfixedfee = 1
							}

							res.data.data.ProjectInfos[i].isself = 0
							if (res.data.data.ProjectInfos[i].RecruitStrategys[j].fee_form === 3) {
								res.data.data.ProjectInfos[i].isself = 1
							}
						}
						//结束时间
						var newdate = new Date()
						// console.log(newdate)
						var endTime = new Date(res.data.data.ProjectInfos[i].recruit_ddl.replace(
							/-/g, "/"));
						res.data.data.ProjectInfos[i].ddl = endTime - newdate < 0 ? 1 : 0
						res.data.data.ProjectInfos[i].recruit_ddl = this.thistime(res.data.data
							.ProjectInfos[i]
							.recruit_ddl)
					}
					this.projectList.push.apply(this.projectList, res.data.data.ProjectInfos);
					console.log(this.projectList)
				})
				uni.hideLoading();
			}
		},
		methods: {
			async search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
				this.per = 0;
				this.filtCondition = ''
				if (res.value != "")
					this.filtCondition = "&searchvalue" + "=" + res.value
				uni.showLoading({
					title: '加载中'
				});
				await this.getProjectListAPI()
				uni.hideLoading();
			},
			getProjectListAPI() {
				return this.$http.get('/youngee/c/g/get-project-list' +
					"?" +
					"idx" +
					"=" +
					this.per +
					"&cnt" +
					"=" +
					20 + this.filtCondition
				).then(res => {
					console.log(res)
					if (res.data.code === 0) {
						for (var i = 0; i < res.data.data.ProjectInfos.length; i++) {
							// 封面图片
							res.data.data.ProjectInfos[i].ProductInfo = JSON.parse(res.data.data.ProjectInfos[i]
								.product_snap);

							// 封面图片
							let ProductPhoto = JSON.parse(res.data.data.ProjectInfos[i].product_photo_snap);
							for (let j = 0; j < ProductPhoto.length; ++j) {
								if (ProductPhoto[j].Symbol == 1) {
									res.data.data.ProjectInfos[i].coverphoto = ProductPhoto[j].PhotoUrl
								}
							}
							// 获取平台图片
							for (var j = 0; j < this.platformList.length; j++) {
								if (res.data.data.ProjectInfos[i].project_platform === this.platformList[j]
									.id) {
									res.data.data.ProjectInfos[i].project_imgper = this.platformList[j]
										.platform_icon
								}
							}

							// 任务数量&稿费形式
							res.data.data.ProjectInfos[i].taskNum = 0
							let lengthOfRecruitStrategys = res.data.data.ProjectInfos[i]
								.RecruitStrategys != null ? res.data.data.ProjectInfos[i]
								.RecruitStrategys
								.length : 0
							for (var j = 0; j < lengthOfRecruitStrategys; j++) {
								res.data.data.ProjectInfos[i].taskNum = Number(res.data.data
									.ProjectInfos[i]
									.taskNum) + Number(res.data.data.ProjectInfos[i]
									.RecruitStrategys[j]
									.recruit_number)

								res.data.data.ProjectInfos[i].isfixedfee = 0
								if (res.data.data.ProjectInfos[i].RecruitStrategys[j].fee_form === 2) {
									res.data.data.ProjectInfos[i].isfixedfee = 1
								}

								res.data.data.ProjectInfos[i].isself = 0
								if (res.data.data.ProjectInfos[i].RecruitStrategys[j].fee_form === 3) {
									res.data.data.ProjectInfos[i].isself = 1
								}
							}
							//结束时间
							var newdate = new Date()
							// console.log(newdate)
							var endTime = new Date(res.data.data.ProjectInfos[i].recruit_ddl.replace(
								/-/g, "/"));
							res.data.data.ProjectInfos[i].ddl = endTime - newdate < 0 || res.data.data
								.ProjectInfos[i]
								.project_status > 4 ? 1 : 0
							res.data.data.ProjectInfos[i].recruit_ddl = this.thistime(res.data.data
								.ProjectInfos[i]
								.recruit_ddl)
						}
						this.max_page = res.data.data.max_page
						this.projectList = res.data.data.ProjectInfos;
					} else if (res.data.code === -4) {
						uni.showToast({
							title: "暂无任务"
						})
						this.max_page = 1
						this.projectList = []
					} else {
						uni.showToast({
							title: res.data.msg
						})
						this.max_page = 1
						this.projectList = []
					}
				})
			},
			// 判断登陆是否过期
			isLogin() {
				return this.$https.get('/youngee/c/t/g/is-login')
					.then(res => {
						if (res.data.code === 403) {
							// 登陆已失效
							this.token = ""
							uni.clearStorage();
						} else {
							this.token = uni.getStorageSync('token')
						}
					})
			},
			// 信息表
			getInfoList() {
				return this.$http.get('/youngee/c/g/get-info-tables')
					.then(res => {
						this.hobby = []
						this.platformList = res.data.data.ThirdPlatform
						let l = this.platformList != null ? this.platformList.length : 0;
						for (var i = 0; i < l; i++) {
							var obj = {}
							obj.text = this.platformList[i].platform_name
							obj.value = this.platformList[i].id
							this.hobby.push(obj)
						}
					})
			},
			// 计算结束时间
			thistime(val) {
				// 转换格式
				var beginTime = new Date(val.replace(/-/g, "/"));
				// 当前时间
				var thisTime = new Date();
				// 相减
				var dateMiss = beginTime.getTime() - thisTime.getTime();
				// 天数
				var day = Math.floor(dateMiss / (24 * 3600 * 1000));
				// 减去天数剩下的毫秒数
				var backOne = dateMiss % (24 * 3600 * 1000);
				// 小时数
				var hours = Math.floor(backOne / (3600 * 1000));
				var deadline_time = '',
					deadline_time = day + '天' + hours + '时结束'
				return deadline_time
			},
			//弹出层
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle4(type) {
				this.type4 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup4.open(type)
				// this.$refs.popup1.close()
			},
			xieyi() {
				console.log('进入联系我们')
			},
			go(url) {
				uni.navigateTo({
					url: url,
				});
			},
			// 进入任务详情
			project(item) {
				// uni.navigateTo({
				// 	url: '/pages/test/test'
				// });
				console.log(item.project_id)
				if (item.project_type === 1) {
					uni.navigateTo({
						url: '/pages/tasksquare/taskdetail?id=' + item.project_id
					});
				} else {
					uni.navigateTo({
						url: '/pages/tasksquare/specialTask/specialTaskDetail?id=' + item.project_id
					});
				}
				// }
			},
			/**
			 * @param scrollTop 页面顶部距离
			 * @param down 滑动显示效果延时
			 */
			setOpacity(scrollTop, down = 60) {
				if (scrollTop > 0) {
					if (scrollTop < down) {
						this.opacity = scrollTop / down;
					}
					if (scrollTop > down) {
						this.opacity = 1;
					}
				} else {
					this.opacity = 0;
				}
			},
		},
		created() {},
		onReady() {
			// setTimeout(() => {
			//   // 改变手机状态栏颜色
			//   uni.setNavigationBarColor({
			//     frontColor: "#000000",
			//     backgroundColor: "#FF4258",
			//   });
			// }, 10);
		},
	};
</script>
<style>
	/deep/ .share .uni-popup .uni-popup__wrapper {
		width: 70% !important;
		border-radius: 15rpx !important;
	}
</style>
<style lang="scss" scoped>
	.option1 {
		padding: 5rpx 18rpx;

		/deep/.uni-data-checklist .checklist-group .checklist-box .checklist-content {
			width: 100rpx;
			text-align: center;
		}
	}

	.option2 {
		padding: 5rpx 18rpx;
	}

	.option3 {
		padding: 5rpx 18rpx;
	}


	//弹窗
	.sharepage {
		width: 90%;
		margin: 0 auto;
		// position: relative;
	}

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;

		border-radius: 15rpx;
	}

	.projecttext1 {
		// padding-top: 5%;
		padding: 0 0 0 1%;
		height: 80rpx;
		margin-top: 7%;
		text-align: center;
	}

	.projecttext1 span {
		color: #333333;
		font-size: 100%;
		font-weight: 550;
		text-indent: 2em;

	}

	.projecttext1 image {
		vertical-align: middle;
		width: 80rpx;
		height: 80rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.sharemap {
		margin: 0 auto;
		text-align: center;
		margin-top: 15%;
		margin-bottom: 15%;
	}

	.sharemap image {
		width: 400rpx;
		height: 400rpx;

	}

	.butmin {
		height: 48rpx;
		background-color: #3397FA;
		color: #FFFFFF;
		line-height: 48rpx;
	}

	//弹出层
	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		background-color: #FFFFFF !important;
		border-radius: 20rpx !important;
		padding: 8rpx 30rpx !important;
		border: 0 !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 24rpx;
		color: #333333;
	}

	/deep/ .mini-btn {
		height: 70rpx;
		width: 250rpx;
		line-height: 70rpx;
		margin: 20rpx;
		letter-spacing: 4rpx;
		background-color: #FCCF41;
	}

	/deep/ .mini-btn1 {
		height: 70rpx;
		width: 400rpx;
		line-height: 70rpx;
		margin: 20rpx;
		letter-spacing: 4rpx;
		color: white;
		;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
		background-color: #FCCF41 !important;
	}

	.butto {
		text-align: center;
	}

	//其他
	.nav {
		position: relative;
	}

	.nv_padding {
		height: 88upx;
		background-color: transparent;
	}

	/* 图标默认大小 */
	.nv_icon {
		width: 16px;
		height: 16px;
	}

	.bg_box {
		position: absolute;
		width: 750upx;
		height: 88upx;

		z-index: 10;
		top: 0;
		background-color: transparent;
		/* #ifdef MP */
		box-sizing: border-box;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		/* #endif */
	}

	.mys_navBar {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		height: 88upx;
		/* #endif */
		// #ifdef MP
		box-sizing: border-box;
		// #endif
		width: 750upx;
		flex-direction: row;
		background-color: transparent;
		position: absolute;
		z-index: 10;
		top: 0;
	}

	.fixed {
		position: fixed;
	}

	/*
 left 按钮
*/
	.btn_type {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		margin-left: 16upx;
		/* #endif */
		// #ifndef MP
		align-items: center;
		// #endif
		flex: 1;
		flex-direction: row;
		// background-color: #fff;
	}

	.btn_box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		margin-left: 16upx;
		/* #endif */
		flex-direction: row;
		// #ifndef MP
		align-items: center;
		// #endif
	}

	.btn_back,
	.btn_home {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		width: 76upx;
		height: 62upx;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	/* 按钮类型1 */
	.nav_btn_t1 {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		// #ifdef MP
		box-sizing: border-box;
		// #endif
		flex-direction: row;
		align-items: center;
		border-style: solid;
		border-width: 1px;
		border-color: #C0C0C0;
		// background-color: rgba(0, 0, 0, 0.2);
		background-color: #FFFFFF;
		width: 130upx;
		height: 45upx;
	}

	.line {
		width: 1upx;
		height: 60%;
		/* #ifdef APP-PLUS-NVUE */
		height: 30upx;
		/* #endif */
		background-color: #C0C0C0;
	}

	/*
标题
 */
	.title_container {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		position: absolute;
		left: 375upx;
		bottom: 0;
		transform: translateX(-50%);
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.title_text {
		// flex: 1;
		text-overflow: ellipsis;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
		overflow: hidden;
		font-weight: 550;

		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		lines: 1;
		/* #endif */
	}

	/* 
左边自定义
 */
	.my_left_box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.my_left_icon {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* #ifndef MP */
		margin-left: 18upx;
		/* #endif */
	}

	.my_left_custom {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		// justify-content: center;
	}

	/* 文字 */
	.leftText {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-left: 4upx;
		font-size: 15px;
	}

	/* 
中间
 */
	.my_custom_box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	/*
搜索框 
 */
	.nv_search_box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		flex: 1;

		/* #ifndef MP */
		height: 60upx;
		/* #endif */
		background-color: #f8f8f8;
		padding-right: 20upx;
		padding-left: 20upx;
		border-radius: 60upx;
		margin-right: 15upx;
		margin-left: 15upx;
	}

	.nv_input {
		flex: 1;
		padding-left: 16upx;
		font-size: 13px;
	}

	.close {
		width: 50upx;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* #ifndef MP */
		height: 62upx;
		/* #endif */
	}

	/* 
右边 自定义
 */
	.my_right_icon {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* #ifndef MP */
		// min-width: 70upx;
		/* #endif */
		padding-left: 6px;
		padding-right: 10px;
	}

	.imge image {
		width: 100%;
		height: 260rpx;
	}

	.commodity {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.share {
		text-align: center;
		line-height: 10rpx;
		margin-top: 10rpx;
	}

	.share image {
		vertical-align: middle;
		width: 25rpx;
		height: 25rpx;
		display: inline-block
	}

	.share p {
		display: inline-block;
		font-size: 24rpx;
		color: #333333;
	}

	.project {
		width: 49%;
		height: 550rpx;
		// background-color: #ccc;
		border-radius: 20rpx;
		// box-shadow: 0rpx 5rpx 5rpx #ccc;
		margin-bottom: 0%;
	}

	.projectdiagram {
		width: 100%;
		height: 61%;
		background-size: 100% 100%;
		position: relative;
		border-radius: 10rpx;
		;
	}

	.TitleText1 {
		height: 30rpx;
		background-color: #FDD442;
		border-radius: 10rpx;
		display: inline-block;
		padding: 0rpx 20rpx 0rpx 20rpx;
		line-height: 30rpx;
	}

	.TitleText2 {
		opacity: 0.8;
		height: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: inline-block;
		padding: 0rpx 20rpx 0rpx 20rpx;
		line-height: 30rpx;
	}

	.TitleText2 p {
		color: #464100;
		font-size: 24rpx;

	}

	.projecttext {
		// padding-top: 5%;
		padding: 0 0 0 1%;
		// height: 80rpx;
	}

	.projecttext span {
		color: #333333;
		font-size: 25rpx;
		font-weight: 550;
		text-indent: 2em;

	}

	.TitleText1 p {
		color: #333333;
		font-size: 18rpx;

	}

	.projecttext {
		// height: 70rpx;
	}

	.projecttext image {
		vertical-align: middle;
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.TitleText {
		// height: 30rpx;
		background-color: #FDD442;
		border-radius: 10rpx;
		display: inline-block;
		padding: 0rpx 20rpx 0rpx 20rpx;
		line-height: 30rpx;
		margin-top: 0%;
	}

	.TitleText p {
		color: black;
		font-size: 18rpx;
	}

	.introduction {
		width: 100%;
		margin: 10rpx auto 0;


	}

	.rleft p {
		font-size: 18rpx;

		color: #999999;
	}

	.rright p {
		font-size: 18rpx;
		color: #999999;

	}

	.Mask {
		position: absolute;
		background-color: #000000;
		opacity: 0.6;
		width: 100%;
		height: 100%;
		// z-index: 999;
		text-align: center;
		border-radius: 20rpx;
	}

	.Mask image {
		width: 50%;
		height: 52%;
		padding-top: 25%;
	}

	.contt {
		position: relative;
	}

	.contact {
		position: fixed;
		top: 80%;
		right: 13%;
	}

	.img1 {
		width: 84rpx;
		height: 124rpx;
		position: absolute;

	}

	.img2 {
		width: 114rpx;
		height: 40rpx;
		position: absolute;
		top: 130rpx;
		left: -12rpx;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
</style>