youngee_c_web_v2/pages/selectionsquare/selectionsquare.vue

<template>
	<view class="nav">
		<view class="bg_box" style="background-color: #FFFFFF;" :style="{
      backgroundImage: mysNavConfig.bgImage,
      paddingTop: navBarTop,
      height: navBarHeight,
      opacity: opacity,
    }" :class="{ fixed: mysNavConfig.navFixed }"></view>
		<view class="mys_navBar" :style="{
    paddingTop: navBarTop,
    height: navBarHeight,
    paddingRight: navBarRight,
   }" :class="{ fixed: mysNavConfig.navFixed }">
			<!-- 左slot -->
			<view class="my_left_custom" :style="{ height: btnHeight }">
				<slot name="left"></slot>
			</view>
			<view class="btn_type" :style="{ height: btnHeight }">
				<view class="btn_box nav_btn_t1" :style="{
          width: btnWidth,
          height: btnHeight,
          marginLeft: navBarLeft,
          borderRadius: mysNavConfig.type2Config.radius,
        }">
					<view class="btn_back" @tap="onLeftClick()">
						<image class="nv_icon" :src="mysNavConfig.type2Config.leftPath"
							:style="{ height: btnHeight, width: iconW }" mode="aspectFit" />
					</view>
					<view class="line"></view>
					<view class="btn_home" @tap="onLeftHome('top')">
						<image class="nv_icon" :src="mysNavConfig.type2Config.rightPath"
							:style="{ height: btnHeight, width: iconW }" mode="aspectFit" />
					</view>
				</view>
				<!-- 标题 -->
				<view class="title_container" v-if="!mysNavConfig.searchConfig"
					:style="{ top: navBarTop, height: btnHeight }">
					<text class="title_text" v-if="!!mysNavConfig.navTitle" :style="{
          color: mysNavConfig.navTitle.color,
          fontSize: mysNavConfig.navTitle.fontSize,
          fontWeight: mysNavConfig.navTitle.fontWeight,
        }">{{ mysNavConfig.navTitle.text }}</text>
					<slot name="center2"></slot>
				</view>
			</view>
		</view>
		<aTip text="点击添加到我的小程序 \n下次访问更方便哦！" isCustom="true" />
		<view :style="{marginTop:navH}"></view>
		<view class="home">
			<view>
				<!-- 多选框弹窗 -->
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<!-- <view class="option1" style="margin-top: 20%;">
							<h3 style="margin-bottom: 10rpx;">社媒平台</h3>
							<uni-data-checkbox mode="tag" multiple v-model="formData.hobby" :localdata="hobby">
							</uni-data-checkbox>
						</view>
						<view class="option2">
							<h3 style="margin-bottom: 10rpx;">样品形式</h3>
							<uni-data-checkbox mode="tag" multiple v-model="formData.hobby1" :localdata="hobby1">
							</uni-data-checkbox>
						</view>
						<view class="option3">
							<h3 style="margin-bottom: 10rpx;">任务形式</h3>
							<uni-data-checkbox mode="tag" multiple v-model="formData.hobby2" :localdata="hobby2">
							</uni-data-checkbox>
						</view> -->
						<view class="option1" style="margin-top: 20%;">
							<h3 style="margin-bottom: 10rpx;font-weight: bold;"><strong>样品形式</strong></h3>
							<uni-data-checkbox mode="tag" multiple v-model="formData.hobby1" :localdata="hobby1">
							</uni-data-checkbox>
						</view>
						<view class="option2">
							<h3 style="margin-bottom: 10rpx;font-weight: bold;">任务形式</h3>
							<uni-data-checkbox mode="tag" multiple v-model="formData.hobby2" :localdata="hobby2">
							</uni-data-checkbox>
						</view>
						<view class="option3">
							<h3 style="margin-bottom: 10rpx;font-weight: bold;">商品类目</h3>
							<uni-data-checkbox mode="tag" multiple v-model="formData.hobby3" :localdata="hobby3">
							</uni-data-checkbox>
						</view>
						<view class="butto">
							<button class="mini-btn" size="mini" @tap="reset">重置</button>
							<button class="mini-btn" size="mini" @tap="submitSearch">确定</button>
						</view>
					</view>
				</uni-popup>
			</view>

			<!-- banner -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="item in list1" @click="pick(item)">
						<image :src="item.img" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 商品卡片细节 -->
			<view class="commodity" style="margin-top: 3%;">
				<view class="project" v-for="(item,index) in selectionList" :key="index" @tap="toDetail(item)">
					<!-- 主图 -->
					<view class="projectdiagram" :style="{backgroundImage:`url(${item.coverphoto})`}">
						<view class="Mask" v-if="item.isFinished">
							<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home4.png" mode="">
							</image>
						</view>
						<view v-else>
							<view class="Mask" v-if="item.isLacked">
								<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent_upload/lack.png"
									mode="">
								</image>
							</view>
						</view>
						<view style="padding-left: 4%;padding-top: 2%;">
						</view>
					</view>

					<!-- 项目信息1 -->
					<view class="section">
						<view class="section1">
							<p>佣金:{{item.exclusive_commission}}%</p>
						</view>
						<view class="section2" v-if="item.task_mode == 1">
							<p>额外悬赏:￥{{item.show_task_reward}}</p>
						</view>
					</view>


					<!-- 平台logo、项目名称 -->
					<view class="projecttext">
						<image :src="item.platform_icon">
						</image>
						<span>{{item.selection_name|ellipsis}}</span>
					</view>

					<!-- 项目信息2 -->
					<view class="projectinfo">
						<view class="projectinfotxt">
							<p>预估赚:<span style="color: red;">￥{{item.show_earn}}</span></p>
						</view>
						<view class="projectinfotxt">
							<p>售价:<span style="color: red;">￥{{item.price}}</span></p>
						</view>
					</view>

					<!-- 项目信息3 -->
					<view class="projectinfo" style="justify-content: space-between;">

						<view class="projectinfotag">
							<view class="TitleText" v-if="item.sample_mode == 1">
								<p>免费领</p>
							</view>
							<view class="TitleText" style="background-color: #fcca00;" v-if="item.sample_mode !== 1">
								<p>查看</p>
							</view>
						</view>


						<view class="projectinfotxt" style="margin: 0 10rpx;" v-if="item.sample_mode == 1">
							<p>余<span style="color: #52b2f0;">{{item.remain_num}}</span>件</p>
						</view>

					</view>
				</view>
			</view>

			<!-- 普通弹窗  公众号-->
			<uni-popup ref="popup4" class="share" background-color="#fff" :maskClick="false">
				<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/younggee_logo.png"
								style="width: 250rpx; height: 80rpx;" mode=""></image>
							<!-- <span>YoungGee</span> -->
						</view>
						<view class="sharemap">
							<image :src="kefuUrl" style="width: 400rpx;height: 400rpx;" mode=""></image>
						</view>
						<view style="margin: 30rpx 0;">
							<button class="butmin1" size="mini" @tap="saveImage">保存二维码</button>
						</view>
						<view class="sharetxt">
							<text>
								使用样叽的过程中，有任何疑问，\n
								请添加上方微信。\n
								我们保证及时全力为您解决！
							</text>
						</view>
						<view style="margin: 30rpx 0;">
							<button class="butmin" size="mini" @tap="closepop">知道了</button>
						</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>
	</view>
	</view>
</template>

<script>
	import aTip from "@/components/mys-tip_1.0.01/a_tip/aTip";
	import {
		getQueryString,
		fansview,
		money,
		getDaysBetweenDates,
		getDaysAndHoursBetweenDates
	} from '@/components/utils.js';
	import {
		saveImageToPhotosAlbum,
		showToast,
		downloadFile
	} from '@/uni_modules/sakura-canvas/js_sdk/util'
	export default {
		// 父组件向子组件传值 props
		props: {
			mysNavConfig: {
				type: Object,
				default () {
					return {
						/* 固定导航 */
						navFixed: true,
						/* 开启单页显示首页图标 */
						isHome: true,
						/* 占位开启 */
						navPadding: true,
						/* 背景 */
						bgColor: "#f8f8f8",
						/* 渐变色 */
						opacity: 1,
						/* 渐变开启 */
						isOpacity: false,
						/* 渐变延时效果 */
						opacityTime: 100,
						/* 左侧按钮样式 可选 type1 type2 （type2根据小程序胶囊位置调整） */
						btnType: "type1",
						/* type1 左侧文字配置 */
						leftText: {
							text: "",
							color: "",
							fontSize: "16px", // px upx rpx
							fontWeight: "", // blod
						},
						/* 标题 */
						navTitle: {
							text: "带货",
							color: "",
							fontSize: "32rpx", // px upx rpx
							fontWeight: "normal", // blod
						},
						/* type2 按钮 */
						type2Config: {
							// 左图标
							leftPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png3.png",
							// 右图标
							rightPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png1.png",
							// 圆角
							radius: "40rpx",
						},
					};
				},
			},
			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: {
			aTip
		},
		data() {
			return {
				// nav
				navH: getApp().globalData.navHeight,
				kefuUrl: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu.jpeg",
				iconW: undefined,
				iconH: undefined,
				btnWidth: undefined,
				btnHeight: undefined,
				navBarTop: undefined,
				navBarHeight: undefined,
				navBarLeft: undefined,
				navBarRight: undefined,
				inputHeight: undefined,

				// banner
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 1000,

				// 旧多选框
				/*formData: {
									hobby: [],
									hobby1: [],
									hobby2: [],
								},
								hobby: [{
									text: '红book',
									value: 1
								}, {
									text: '抖音',
									value: 2
								}, {
									text: '微博',
									value: 3
								}, {
									text: '快手',
									value: 4
								}, {
									text: 'B站',
									value: 5
								}, {
									text: '大众点评',
									value: 6
								}, {
									text: '知乎',
									value: 7
								}],
								hobby1: [{
									text: '免费领样',
									value: 1
								}, {
									text: '垫付后返',
									value: 2
								}, {
									text: '不提供样品',
									value: 3
								}],
								hobby2: [{
									text: '悬赏任务',
									value: 1
								}, {
									text: '纯佣带货',
									value: 2
								}], */

				// 多选框
				formData: {
					hobby1: [], //样品形式
					hobby2: [], //任务形式
					hobby3: [], //商品类目
				},
				//平台种类直接从表中获得，此版本中只有抖音平台
				hobby: [],

				hobby1: [{
					text: '免费领样',
					value: 1
				}, {
					text: '不提供样品',
					value: 3
				}],
				hobby2: [{
					text: '悬赏任务',
					value: 1
				}, {
					text: '纯佣带货',
					value: 2
				}],

				hobby3: [{
					text: '智能家居',
					value: 1
				}, {
					text: '食品饮料',
					value: 2
				}, {
					text: '珠宝文玩',
					value: 3
				}, {
					text: ' 奢侈品',
					value: 4
				}, {
					text: '个户家清',
					value: 5
				}, {
					text: '礼品文创',
					value: 6
				}, {
					text: '\u3000生鲜\u3000',
					value: 7
				}, {
					text: '农资绿植',
					value: 8
				}, {
					text: '本地生活',
					value: 9
				}, {
					text: '钟表配饰',
					value: 10
				}, {
					text: '玩具乐器',
					value: 11
				}, {
					text: '二手闲置',
					value: 12
				}, {
					text: '服饰内衣',
					value: 13
				}, {
					text: '\u3000美妆\u3000',
					value: 14
				}, {
					text: '数码家电',
					value: 15
				}, {
					text: '图书教育',
					value: 16
				}, {
					text: '鞋靴箱包',
					value: 17
				}, {
					text: '母婴宠物',
					value: 18
				}, {
					text: '虚拟充值',
					value: 19
				}, {
					text: '户外运动',
					value: 20
				}],


				list1: [{
						img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png',
						name: '/page_tasksquare/banner/guide'
					},
					{
						img: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home7.png',
						name: '/page_tasksquare/banner/cooperation'
					}
				],

				per: 0,
				max_page: 0,
				filtCondition: '',
				selectionList: [],
				product: {},
				younggeeProductPhoto: {},
			}
		},
		watch: {
			scrollTop(val) {
				if (!this.mysNavConfig.isOpacity) {
					return;
				}
				this.setOpacity(val, this.mysNavConfig.opacityTime);
			},
		},
		created() {
			this.init();
		},
		//onshow生命周期执行完之后，this内部就有了很多内容
		async onShow() {
			this.isLoginApi()
			await this.getInfoListApi()
			this.per = 0
			this.selectionList = []
			this.getSelectionListApi()
		},
		async onLoad() {},
		//下拉刷新
		onPullDownRefresh() {
			this.per = 0
			this.selectionList = []
			this.getSelectionListApi()
			//停止下拉刷新
			uni.stopPullDownRefresh()
		},
		// 下拉懒加载
		async onReachBottom() {
			++this.per;
			if (this.per >= this.max_page) {
				uni.showToast({
					title: "已加载全部"
				})
			} else {
				uni.showLoading({
					title: '加载中'
				})
				await this.getSelectionListApi()
				uni.hideLoading();
			}
		},

		methods: {

			/**
			 * @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;
				}
			},
			/* type2 点击分类 */
			onLeftHome(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			init() {
				if (this.mysNavConfig.isHome) {
					let pages = getCurrentPages().length;
					/* 单页显示home图标 */
					pages === 1 ? (this.isHome = true) : (this.isHome = false);
				}
				// 开启渐变 强制fixed
				this.navBarTop = uni.getSystemInfoSync().statusBarHeight +
					"px";
				if (!this.mysNavConfig.opacity) {
					this.opacity = 1;
					!this.mysNavConfig.isOpacity ? (this.opacity = 1) : ((this
						.mysNavConfig.navFixed = true), (this
						.opacity = 0));
				} else {
					this.opacity = this.mysNavConfig.opacity;
					!this.mysNavConfig.isOpacity ? "" : ((this.mysNavConfig
						.navFixed = true), (this.opacity = 0));
				}

				// #ifdef MP
				this.initMP();
				// #endif
				// #ifdef APP-PLUS-NVUE
				this.navBarHeight = 44 + uni.getSystemInfoSync()
					.statusBarHeight + "px";
				// #endif
			},
			/* 小程序初始化位置 */
			initMP() {
				// getSystemInfoSync用于获取系统信息同步接口
				let gS = uni.getSystemInfoSync();
				// getMenuButtonBoundingClientRect用于获取胶囊按钮位置布局信息
				let rect = uni.getMenuButtonBoundingClientRect();

				let rectHeight = rect.height;
				this.btnWidth = rect.width + "px";
				this.btnHeight = rectHeight + "px";
				this.iconW = Math.floor(rect.width / 4 - 5) + "px";
				this.iconH = rectHeight / 2 + "px";
				this.inputHeight = rectHeight - 3 + "px";
				this.navBarTop = rect.top + "px";
				this.navBarLeft = gS.screenWidth - rect.right + "px";
				this.navBarRight = gS.screenWidth - rect.right + rect.width +
					"px";
				this.navBarHeight = gS.statusBarHeight + rectHeight + (rect
					.top - gS.statusBarHeight) * 2 + "px";
			},
			toDetail(item) {
				console.log("item:", item)
				uni.navigateTo({
					url: '/page_selectionsquare/selectiondetail/selectiondetail?id=' + item.selection_id +
						'&pid=' + item.YounggeeProduct.product_id
				});
			},

			async submitSearch() {
				//被选中的hobby才会加入数据中，加入的是value数字
				console.log('look-----', this.formData.hobby1)
				console.log('look-----333333', this.formData.hobby3)
				this.per = 0;
				this.$refs.popup.close()
				var filtCondition = ''
				//各平台名字展示
				// for (var i = 0; i < this.formData.hobby.length; i++) {
				// 	filtCondition += "&platform[]" + "=" + this.formData.hobby[i]
				// }

				//"&secform[]=" 是一个固定的字符串部分，用来表示参数格式
				//最后参数形如&secform[]=2&secform[]=3&secform[]=9
				//样品形式
				for (var j = 0; j < this.formData.hobby1.length; j++) {
					filtCondition += "&secform[]" + "=" + this.formData.hobby1[j]
				}

				//任务形式
				for (var j = 0; j < this.formData.hobby2.length; j++) {
					filtCondition += "&taskform[]" + "=" + this.formData.hobby2[j]
				}

				//商品类目 
				for (var j = 0; j < this.formData.hobby3.length; j++) {
					filtCondition += "&categoryform[]" + "=" + this.formData.hobby3[j]
				}

				this.filtCondition = filtCondition
				console.log("过滤条件", this.filtCondition)
				uni.showLoading({
					title: '加载中'
				});
				this.selectionList = []
				await this.getSelectionListApi()
				uni.hideLoading();
			},
			async reset() {
				this.per = 0;
				this.$refs.popup.close()
				this.formData.hobby1 = [];
				this.formData.hobby2 = [];
				this.formData.hobby3 = [];
				this.filtCondition = '';
				uni.showLoading({
					title: '加载中'
				});
				this.selectionList = []
				await this.getSelectionListApi()
				uni.hideLoading();
			},
			/* 点击左侧 */
			onLeftClick() {
				uni.navigateTo({
					url: '/page_selectionsquare/search'
				});
			},
			isLoginApi() {
				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')
						}
					})
			},
			//获取一些info表中的信息----包含thirdplatform
			//res是一个包含服务器响应的对象
			getInfoListApi() {
				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)
						}
					})
			},
			getSelectionListApi() {
				// this.filtCondition =
				// 	"&secform[]=1&taskform[]=1&categoryform[]=1&categoryform[]=6&createTime[]=3"
				//idx:当前页 cnt：每页展示个数
				return this.$http.get('/youngee/c/g/get-selection-list' +
					"?" +
					"idx" +
					"=" +
					this.per +
					"&cnt=20" +
					"&" +
					"sortField=" +
					"sales_count" +
					"sortOrder=1" +
					"&" +
					this.filtCondition
					// 20 + this.filtCondition
					//请求发送后，使用 .then() 方法处理响应结果 res。
				).then(res => {
					if (res.data.code === 0) {
						console.log("res is here------->: ", res)
						// 获取res返回数据
						this.max_page = res.data.data.max_page
						let selectionList = res.data.data.SelectionDetail
						const count = res.data.data.count
						// 数据处理
						if (selectionList === null) {
							return
						}
						for (var i = 0; i < selectionList.length; i++) {
							console.log("**** selectionList[i]****", selectionList[i])
							this.product = selectionList[i].YounggeeProduct
							this.younggeeProductPhoto = selectionList[i].YounggeeProductPhoto

							// for (let j = 0; j < this.younggeeProductPhoto.length; ++j) {
							// 	//1为主图，2为详情图，3为视频  selectionList[i]就是item
							// 	if (this.younggeeProductPhoto[j].symbol == 1) {
							// 		selectionList[i].coverphoto = this.younggeeProductPhoto[j].photo_url
							// 	}
							// }

							for (var k = 0; k < this.platformList.length; k++) {
								if (selectionList[i].platform === this.platformList[k].id) {
									selectionList[i].platform_icon = this.platformList[k].platform_icon
								}
							}


							//打印商品详情表
							console.log(selectionList[i])
							// 商品价格
							selectionList[i].price = this.product.product_price
							//高佣
							selectionList[i].exclusive_commission = this.product.exclusive_commission
							//预估赚
							selectionList[i].show_earn = this.product.commission_price
							//额外悬赏
							// if (selectionList[i].task_mode == 1) {
							// 	selectionList[i].show_task_reward = selectionList[i].RewardStrategy.per_reward
							// }

							// 判断是否到期
							selectionList[i].isFinished = this.isFinish(selectionList[i])
							// 判断是否有库存
							selectionList[i].isLacked = selectionList[i].remain_num == 0 ? true : false
						}
						//...selectionList 是扩展运算符的语法，它会将 selectionList 数组中的所有元素展开，并作为单独的参数传递给 push() 方法
						//用于在原有数据的基础上添加新的数据
						this.selectionList.push(...selectionList);
					}
				});
			},
			isFinish(selection) {
				var timeNow = new Date();
				var ddl = new Date(selection.task_ddl.replace(/-/g, "/"));
				var diff = getDaysAndHoursBetweenDates(timeNow, ddl);
				let remain_days = diff.days;
				let remain_hours = diff.hours;
				if (remain_days <= 0 & remain_hours <= 0) return true;
				// let remain_days = getDaysBetweenDates(timeNow, ddl);
				// if (remain_days < 0) return true;
				else return false;
			},
			toggle4(type) {
				this.type4 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup4.open(type)
				// this.$refs.popup1.close()
			},
			// 保存图片
			async saveImage() {
				// showToast('保存成功')
				wx.downloadFile({
					url: this.kefuUrl,
					success: function(res) {
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								wx.showToast({
									title: "保存成功",
									icon: "success",
									duration: 2000
								})
							},
							fail: function(err) {
								console.log(err);
							},
							complete(res) {
								console.log(res);
							}
						})
					}
				})
			},
			closepop() {
				this.$refs.popup4.close()
			},
			xieyi() {
				console.log('进入联系我们')
			},
			pick(item) {
				console.log(item)
				uni.navigateTo({
					url: item.name
				});
			},
		}
	}
</script>

<style>
	/deep/ .share .uni-popup .uni-popup__wrapper {
		width: 80% !important;
		border-radius: 15rpx !important;
	}
</style>
<style lang="scss" scoped>
	//nav
	.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;
	}
</style>

<style lang="scss" scoped>
	.option1 {
		padding: 5rpx 18rpx;

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

	.option2 {
		padding: 5rpx 18rpx;
	}

	.option3 {
		padding: 5rpx 18rpx;

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

	.butmin {
		// height: 48rpx;
		width: 250rpx;
		background-color: #FCCF41;
		line-height: 48rpx;
	}

	.butmin1 {
		// height: 48rpx;
		width: 250rpx;
		background-color: #fff;
		border: #000000 1rpx solid;
		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;
	}

	.swiper {
		height: 300rpx;
	}

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

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

<style lang="scss" scoped>
	.commodity {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.project {
		width: 49%;
		height: 550rpx;
		border-radius: 20rpx;
		margin-bottom: 4%;
	}

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

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

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

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

	.projectinfo {
		display: flex;
		justify-content: space-between;
		margin-top: 5%;
	}

	.projectinfotxt {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.projectinfotxt p {
		color: #767272;
		font-size: 20rpx;
		margin: 5rpx 0;
	}

	.projectinfotag {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	// 美化背景色
	.section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 20rpx;
		margin: 6rpx 0;
		color: #ffffff;
	}


	.section1 {
		background-image: linear-gradient(to top, #c54529, #e38e3e);
		border-radius: 8px;
		width: 140rpx;
		height: 45rpx;
		text-align: center;
		line-height: 40rpx;

	}

	.section2 {
		background-image: linear-gradient(to top, #6991e1, #db9c53);
		border-radius: 8px;
		width: 200rpx;
		height: 45rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.TitleText {
		// height: 30rpx;
		width: 120rpx;
		height: 45rpx;
		background-color: #f70606;
		border-radius: 20rpx;
		display: inline-block;
		text-align: center;
		// padding: 0rpx 10rpx 0rpx 10rpx;
		margin-right: 6%;
		line-height: 42rpx;
	}

	.TitleText p {
		color: #fff;
		font-size: 20rpx;
	}

	.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%;
	}

	//弹窗
	.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: 5% 0;
		text-align: center;
	}

	.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;

	}

	.sharetxt {
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sharetxt text {
		font-size: 24rpx;
		text-align: left;
		line-height: 20rpx
	}

	.butmin {
		// height: 48rpx;
		width: 250rpx;
		background-color: #FCCF41;
		line-height: 48rpx;
	}

	.butmin1 {
		// height: 48rpx;
		width: 250rpx;
		background-color: #fff;
		border: #000000 1rpx solid;
		line-height: 48rpx;
	}

	.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;
	}

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

	}

	.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}
</style>