youngee_c_web_v2/page_selectionsquare/selectiondetail/selectiondetail.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view class="" id="wrap0" v-show="!loading">
			<view class="home">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item v-for="item in carouselImages">
							<image :src="item.PhotoUrl" mode="aspectFill" style="width: 100%;height: 100%;"
								@click="handlePreviewImage1(item.PhotoUrl)" v-if="item.Symbol !== 3">
							</image>
							<video :src="item.PhotoUrl" style="width: 100%;height: 100%;" v-if="item.Symbol === 3">
							</video>
						</swiper-item>
					</swiper>

					<view class="">
						<view class="Tasktext">
							<!-- <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/pingtai2.png" mode=""> -->
							<image :src="selection.PlatformInfo.platform_icon" mode="">
							</image>
							<!-- <span>PUYU朴郁小树茶冻干茶粉PUYU朴郁小树茶冻干茶粉</span> -->
							<span>{{selection.selection_name}}</span>
						</view>
						<view class="introduction">
							<view class="rleft">
								<!-- <p>余<span style="color: #52b2f0;">123567</span>件</p> -->
								<p>余<span style="color: #52b2f0;">{{selection.remain_num}}</span>件</p>
							</view>
							<view class="rright">
								<!-- <p>距离任务有效期还有<span style="color: #f70606;">1107</span>天</p> -->
								<p v-if="selection.remain_days < 0"><span style="color: #f70606;">任务已结束</span></p>
								<p v-else>距离任务有效期还有<span style="color: #f70606;">{{selection.remain_days}}</span>天</p>
							</view>
						</view>
						<view class="projectinfo">
							<view class="projectinfotxt">
								<p>售价</p>
								<!-- <p style="font-size: 36rpx;">￥79.9</p> -->
								<p style="font-size: 36rpx;">￥{{selection.show_estimated_cost}}</p>
							</view>
							<view class="projectinfotxt">
								<p>预估赚</p>
								<!-- <p style="color: #f70606;font-size: 36rpx;">￥7.9</p> -->
								<p style="color: #f70606;font-size: 36rpx;">￥{{selection.show_estimated_income}}</p>
							</view>
							<view class="projectinfotxt">
								<p>佣金</p>
								<!-- <p style="color: #f70606;font-size: 36rpx;">10%</p> -->
								<p style="color: #f70606;font-size: 36rpx;">{{selection.commission_rate}}%</p>
							</view>
							<view class="projectinfotxt" v-if="selection.task_mode === 1">
								<p>额外悬赏</p>
								<!-- <p style="color: #f70606;font-size: 36rpx;">￥100.0</p> -->
								<p style="color: #f70606;font-size: 36rpx;">￥{{selection.show_task_reward}}</p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="interval"></view> -->
			<view class="home" style="padding-top: 0;">
				<view>
					<view class="circularmark">
						<p>任务&领样形式</p>
					</view>
					<view class="markcontent">
						<p>任务形式：{{selection.show_task_mode}}</p>
						<p>领样形式：{{selection.show_sample_mode}}</p>
					</view>
				</view>
				<view class="" v-if="selection.isNeedSample">
					<view class="circularmark">
						<p>领样要求</p>
					</view>
					<view class="markcontent">						
						<p>{{selection.sample_condition}}</p>
					</view>
				</view>
				<view class="" v-if="selection.isNeedCondition">
					<view class="circularmark">
						<p>返现&悬赏条件</p>
					</view>
					<view class="markcontent">
						<p>{{selection.reward_condition}}</p>
					</view>
				</view>
				<view class="">
					<view class="circularmark">
						<p>任务要求</p>
					</view>
					<view class="markcontent">
						<p>内容形式：{{selection.show_content_type}}</p>
						<p>带货链接：{{selection.product_url|ellipsis}}
							<image :src="picture.icon_copy" mode="" class="copy-img"
								@click="handleCopy(selection.product_url)" />
						</p>
					</view>
				</view>
			</view>
			<view class="" id="wrap1">
				<view class="home" style="padding-top: 0;">
					<view class="">
						<view class="circularmark">
							<p>卖点总结</p>
						</view>
						<view class="markcontent">
							<text class="wvp" style="margin: 10rpx 0;" decode="true" user-select="true">
								{{selection.detail}} </text>
						</view>
					</view>
				</view>
			</view>
			<view class="" id="wrap2">
				<view class="home" style="padding-top: 0;">
					<view class="">
						<view class="circularmark">
							<p>BRIEF</p>
						</view>
						<view class="markcontent1">
							<view v-if="hasNoProjectPhoto">
								<view class="diagram" style="font-size: 32rpx;margin: 0 30rpx;">
									<p>暂无详情说明</p>
								</view>
							</view>
							<view v-else>
								<view v-if="briefType == 'pdf'">
									<view class="diagram-pdf" v-for="item in briefFiles">
										<image :src="picture.icon_pdf"></image>
										<p>{{item.file_name}}</p>
										<button type="default"
											@tap="downloadFile(item.file_url, item.file_name)">点击下载</button>
									</view>
								</view>
								<view v-else-if="briefType == 'doc' || briefType == 'docx'">
									<view class="diagram-pdf" v-for="item in briefFiles">
										<image :src="picture.icon_word"></image>
										<p>{{item.file_name}}</p>
										<button type="default"
											@tap="downloadFile(item.file_url, item.file_name)">点击下载</button>
									</view>
								</view>
								<view  v-else class="diagram" v-for="item in briefFiles">
									<image :src="item.file_url" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" id="wrap2">
				<view class="home" style="padding-top: 0;">
					<view class="">
						<view class="circularmark">
							<p>示例</p>
						</view>
						<view class="markcontent1">
							<view v-if="isPhoto == 0">
								<view class="diagram" style="font-size: 32rpx;margin: 0 30rpx;">
									<p>无</p>
								</view>
							</view>
							<view style="display:flex;justify-content: center;" v-if="isPhoto == 2">
								<!-- <video class="videos" :src="url" @error="ErrorCallback" controls> </video> -->
								<video class="videos" :src="exampleImgs[0].file_url" @error="ErrorCallback" controls>
								</video>
							</view>

							<view style="display:flex;justify-content: center;" v-if="isPhoto == 2">
								<view  type="default" @click="downloadVideo(exampleImgs[0].file_url)">下载视频</view>
							</view>
							<view class="diagram" v-for="item in exampleImgs" v-if="isPhoto == 1">
								<image :src="item.file_url" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="" id="wrap2">
				<view class="home" style="padding-top: 0;">
					<view class="">
						<view class="circularmark">
							<p>商品详情图</p>
						</view>
						<view class="markcontent1">
							<view v-if="hasNoProductPhoto">
								<view class="diagram" style="font-size: 32rpx;margin: 0 30rpx;">
									<p>无</p>
								</view>
							</view>
							<view class="diagram" v-for="item in carouselImages" v-else>
								<image :src="item.PhotoUrl" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="interval2"></view>
			<view class="signup">
				<button type="default" class="but1" v-if="!isSign && !ddl" @click="submit()">立即申请</button>
				<button type="default" class="but1" disabled v-if="isSign && !ddl"> 已报名 </button>
				<button type="default" class="but1" disabled v-if="ddl"> 报名结束 </button>
				<button type="default" class="but2" @click="toggle1('bottom')">
					<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/task8.png" mode=""></image>
					分享
				</button>
			</view>

			<view>
				<!-- 底部普通弹窗 -->
				<uni-popup ref="popup1" background-color="#fff" @change="change" style="border-radius: 20rpx;">
					<view class="popup-content1" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view
							style="display: flex; justify-content: space-around; margin-top: 10% ;margin-bottom: 3% ;">
							<view>
								<button class="tii2" data-name="shareBtn" open-type="share">
									<view class="circular" style="margin-top: 10% ;">
										<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/taskw.png"
											mode=""></image>
									</view>
									<p class="tii">发送给朋友</p>
								</button>
							</view>
							<view>
								<button class="tii2" @click="toggle2('center')">
									<view class="circular" style="margin-top: 10% ;">
										<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/taske.png"
											mode=""></image>
									</view>
									<p class="tii">生成分享码</p>
								</button>
							</view>
						</view>

						<button type="default" class="errar" @click="cancel()">取消</button>
					</view>
				</uni-popup>
			</view>

			<uni-popup ref="popup2" class="share1" background-color="#fff" @change="change">
				<view class="popup-content">
					<image :src="canvasUrl" mode="widthFix" style="width: 300px;height: 420px;margin-top: 30rpx;">
					</image>
					<mosoweCanvas ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="420"
						width="300" imgType="png" />

					<view class="" style="text-align: center;margin: 5% 0;">
						<button class="butmin" size="mini" @tap="saveImage">保存</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import mosoweCanvas from "@/components/mosowe-canvas-image/mosowe-canvas-image";
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import zSwiper from '@/components/z-swiper/index.vue'; // npm安装
	import {
		getQueryString,
		fansview,
		money,
		getDaysBetweenDates
	} from '@/components/utils.js';
	import {
		saveImageToPhotosAlbum,
		showToast,
		downloadFile
	} from '@/uni_modules/sakura-canvas/js_sdk/util'
	export default {
		filters: {
			ellipsis(value) {
				if (!value) return "";
				if (value.length > 30) {
					return value.slice(0, 30) + "...";
				}
				return value;
			},
		},
		components: {
			mvBar,
			zSwiper,
			mosoweCanvas
		},
		data() {
			return {
				// nav
				navH: getApp().globalData.navHeight,
				picture: getApp().globalData.picture,
				mysNavConfig: {
					/* 占位开启  */
					// navPadding: true,
					/* 背景 */
					// bgColor: "#f8f8f8",
					/* 开启单页显示首页图标 */
					isHome: false,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "任务详情",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png2.png",
						// 右图标
						rightPath: "https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},

				isPhoto: 0,
				url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',

				coopStrategy: "点击报名后显示",
				canvasUrl: '',
				hackReset: true,
				showWarning: false,
				arrowMargin: 0,
				cotainerMargin: 0,
				screenWidth: 0,
				ddl: false,
				loading: true,
				isSign: false,
				strategy_id: 0,
				strategy: null,
				input_offer: 0.0,
				chooseBtn: 0,
				share: {
					title: "",
					path: '',
					imageUrl: '',
					desc: '',
					content: ''
				},
				mainPhoto: '',
				content_type_info: ["图文", "视频"],
				sample_mode_info: ["免费领样", "垫付领样", "不提供样品"],
				task_mode_info: ["悬赏任务", "纯佣带货"],

				tabBarStyle: {},
				activeTab: 0,
				hei: '',
				hei1: '',
				topp0: '',
				topp1: '',
				topp2: '',
				scrollTop: '',
				activeColor: '#f2d22d',
				value: '',
				value1: '',
				coop_choice: [],
				type: 'center',
				type1: 'center',
				type2: 'center',
				item: {
					title: '0'
				},

				// 指示器样式
				mode: 'circle',
				indicatorPos: 'bottomCenter',
				carousel_images: ['https://img2.baidu.com/it/u=2141851239,1037607188&fm=26&fmt=auto&gp=0.jpg',
					'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/home1.png',
				],
				dotIndex: 0, //指示器索引
				dotFloatIndex: 0, //位置指示器索引

				// 视频轮播
				fullScreen: true,
				topFloat: true,
				fotterFloat: true,
				swiper: {
					margin: "150rpx",
					index: 0,
					list: [

					]
				},
				tar: false,
				token: '',

				// 测试数据
				carouselImages: [{
						Symbol: 1,
						PhotoUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/a69be940-e294-4dd4-9b09-d80274c75a15.png'
					},
					{
						Symbol: 2,
						PhotoUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/e1a40241-a566-4227-9b3c-afefe88f4b69.png'
					},
					{
						Symbol: 2,
						PhotoUrl: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/deb21a8b-1517-4352-823b-b70e0cd6883d.png'
					},
				],
				productUrl: 'https://haohuo.jinritemai.com/views/product/detail?id=3519429421675223776&origin_type=604',
				productDetail: 'puyu朴郁小树茶是朴郁公司的一款茶饮，采用先进的冻干粉末技术，将红茶/绿茶精华萃取并制作成冻干茶粉。外包装申请了国家专利，一花一树造型更符合时下追求品味的年轻人的审美。本品获得2021年国家创新美食银奖。',
				projectPhoto: [{
						Symbol: 1,
						photo_url: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/a69be940-e294-4dd4-9b09-d80274c75a15.png'
					},
					{
						Symbol: 2,
						photo_url: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/e1a40241-a566-4227-9b3c-afefe88f4b69.png'
					},
					{
						Symbol: 2,
						photo_url: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/backstage_upload/deb21a8b-1517-4352-823b-b70e0cd6883d.png'
					},
				],

				// 数据
				qrcode: '',
				selectionId: '',
				talent: {},
				account: [],
				selection: {},
				product: {},
				productPhoto: [],
				briefFiles: [],
				exampleImgs: [],
				hasNoProductPhoto: true,

				hasNoProjectPhoto: true,
				briefType: "",

				youngLeadTeamId: "",
				youngTeamId: "",
			};
		},
		onShareAppMessage(res) {
			return {
				title: this.share.title,
				path: 'page_selectionsquare/selectiondetail/selectiondetail?id=' + this.selectionId,
				imageUrl: this.share.imageUrl,
				desc: '',
				content: '',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		computed: {
			lists: {
				get() {
					let tmplist = [
						// 大图
						{
							type: 'image',
							content: this.mainPhoto,
							width: 300,
							height: 320,
							x: 0,
							y: 0,
						},
						// 标题
						{
							type: 'text',
							content: this.selection.selection_name,
							color: '#333333',
							weight: 'bold',
							size: '12px',
							width: 200,
							height: 20,
							x: 20,
							y: 340,
						},
						// 文案1
						{
							type: 'text',
							content: "样品数量：" + this.selection.sample_num,
							color: '#333333',
							size: '10px',
							width: 60,
							height: 20,
							x: 20,
							y: 370,
						},
						// 文案2
						{
							type: 'text',
							content: "扫码立即报名",
							color: '#333333',
							size: '10px',
							width: 60,
							height: 20,
							x: 110,
							y: 370,
						},
						{
							type: 'text',
							content: "发布任务请登录",
							color: '#333333',
							size: '10px',
							width: 70,
							height: 20,
							x: 20,
							y: 400,
						},
						{
							type: 'text',
							content: "www.younggee.com",
							color: '#333333',
							size: '10px',
							// style: 'italic',
							width: 60,
							height: 20,
							x: 90,
							y: 400,
						},
						// 二维码
						{
							type: 'qr',
							content: this.qrcode,
							projectid: this.selectionId,
							width: 80,
							height: 80,
							x: 215,
							y: 325,
						},
					]
					return tmplist
				},
				set() {}
			}
		},

		async created() {},
		async onShow() {
			// 判断登录
			await this.isLogin();
			if (this.token === '') {
				uni.showModal({
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							uni.navigateBack();
						}
					}
				});
			} else {
				this.loading = true;
				uni.showLoading({
					title: '加载中'
				});
				this.getLeadTeam();
				this.getTalentInfo();
				await this.getSelectionDetail();
				await this.getTalentAccountInfo();
				if (this.account.length != 0) {
					await this.isSignUp();
				}
				this.loading = false;
				uni.hideLoading();
			}
		},
		onLoad(options) {
			console.log(options)
			const scene = decodeURIComponent(options.scene);
			if (scene != "undefined") {
				this.selectionId = scene;
			} else {
				this.selectionId = options.id
			}
			this.share.path = 'https://younggee.com/wxapp/taskdetail?action=taskdetail&id=' + this.selectionId
			console.log("share path: ", this.share.path)
			this.postlist()
		},
		onReady() { // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以
			this.init();
		},
		methods: {
			handleCopy(content) {
				wx.setClipboardData({
					data: content,
					success: function(res) {
						console.log("复制成功");
					}
				});
			},
			handlePreviewImage1(item) {
				console.log("image src: ", item)
				let that = this
				wx.previewImage({
					current: item, // 当前显示图片的http链接
					urls: that.carousel_images // 需要预览的图片http链接列表
				})
			},
			init() {
				let rect = uni.getMenuButtonBoundingClientRect();
				let screenWidth = uni.getSystemInfoSync().screenWidth;
				this.arrowMargin = rect.width * 0.75 + 4;
				this.cotainerMargin = screenWidth - rect.right;
			},
			// 判断登陆是否过期
			isLogin() {
				return this.$https.get('/youngee/c/t/g/is-login')
					.then(res => {
						if (res.data.code === 403) {
							// 登陆已失效
							this.token = ""
						} else {
							this.token = uni.getStorageSync('token')
						}
					})
			},
			postlist() {
				// uni.showModal({
				// 	content: "项目id为："+this.projectid,
				// })
				this.$https.post('/youngee/c/p/get-qrcode', {
						scene: this.selectionId,
						page: 'page_selectionsquare/selectiondetail/selectiondetail',
						// scene: this.taskid,
						// page: 'pages/task/taskdetails',
					})
					.then(res => {
						console.log(res)
						this.qrcode = 'data:image/png;base64,' + res.data.data;
					})
			},
			getLeadTeam() {
				this.$https.get('/youngee/c/t/g/get-lead-young-team-id' +
					"?" +
					"project_type=2" +
					"&selection_id" +
					"=" +
					this.selectionId
				).then(res => {
					if (res.data.code === 0) {
						if (res.data.data.num != 0) {
							this.youngLeadTeamId = res.data.data.team_id
						}
					}
				})
			},
			getSelectionDetail() {
				return this.$https.get('/youngee/c/t/g/get-selection-detail' +
					"?" +
					"selectionid" +
					"=" +
					this.selectionId
				).then(res => {
					if (res.data.code === 0) {
						console.log("res: ", res)
						this.selection = res.data.data
						if (this.selection.reward_condition === "")
							this.selection.reward_condition = "无"

						this.share.title = this.selection.selection_name

						// 商品信息
						// 解析json
						this.product = JSON.parse(this.selection.product_snap)
						this.productPhoto = JSON.parse(this.selection.product_photo_snap)
						this.selection.Product = this.product
						this.selection.Product.ProductPhoto = this.productPhoto

						// 提取分享图、主图、轮播图
						this.carouselImages = []
						for (let i = 0; i < this.productPhoto.length; i++) {
							if (this.productPhoto[i].Symbol === 1) {
								this.mainPhoto = this.productPhoto[i].PhotoUrl
								this.share.imageUrl = this.productPhoto[i].PhotoUrl
							}
							if (this.productPhoto[i].Symbol != 3) {
								this.carouselImages.push(this.productPhoto[i])
							}
						}
						this.hasNoProductPhoto = this.carouselImages.length === 0 ? true : false;

						// brief、示例图
						console.table(this.selection.SelectionBrief)
						this.hasNoProjectPhoto = this.selection.SelectionBrief === null ? true : false;
						if (!this.hasNoProjectPhoto) {
							for (let i = 0; i < this.selection.SelectionBrief.length; ++i) {
								let url = this.selection.SelectionBrief[i].file_url
								this.briefType = url.split('.').pop()
							}
						}
						this.briefFiles = this.selection.SelectionBrief
						this.exampleImgs = this.selection.SelectionExample
						if (this.exampleImgs !== null) {
							for (let i = 0; i < this.exampleImgs.length; i++) {
								if (this.exampleImgs[i].file_url.endsWith("jpg") || this.exampleImgs[i].file_url
									.endsWith("png")) {
									this.isPhoto = 1
								} else {
									this.isPhoto = 2
								}
							}
						} else {
							this.isPhoto = 0
						}


						// 计算预估赚金额
						this.selection.price = this.product.ProductPrice
						this.selection.estimated_income = this.selection.price * this.selection
							.commission_rate / 100

						// 转换展示信息格式
						this.selection.show_content_type = this.content_type_info[parseInt(this.selection
							.content_type) - 1]
						this.selection.show_sample_mode = this.sample_mode_info[parseInt(this.selection
							.sample_mode) - 1]
						this.selection.show_task_mode = this.task_mode_info[parseInt(this.selection
							.task_mode) - 1]
						this.selection.isNeedCondition = parseInt(this.selection.sample_mode) === 2 || parseInt(this.selection.task_mode) === 1 ? true : false
						this.selection.isNeedSample = parseInt(this.selection.sample_mode) === 3 ? false : true
						this.selection.show_task_reward = money(this.selection.task_reward)
						this.selection.show_estimated_income = money(this.selection.estimated_income)
						this.selection.show_estimated_cost = money(this.selection.price)

						// 判断任务是否已结束
						var timeNow = new Date()
						var ddl = new Date(this.selection.task_ddl.replace(/-/g, "/"));
						this.selection.remain_days = getDaysBetweenDates(timeNow, ddl)

						this.ddl = this.selection.remain_days < 0 ? true : false
						if (this.selection.remain_num == 0) this.ddl = true
					}
				})
			},
			// 达人信息
			getTalentInfo() {
				return this.$https.get('/youngee/c/t/g/get-talent-info')
					.then(res => {
						this.talent = res.data.data
					})
			},
			//账号信息
			getTalentAccountInfo() {
				return this.$https.get('/youngee/c/t/g/get-talent-account')
					.then(res => {
						var accounts = res.data.data
						this.account = []
						if (res.data.code != -3) {
							for (var i = 0; i < accounts.length; i++) {
								if (this.selection.platform === accounts[i].platform_id) {
									accounts[i].show_fans_count = fansview(accounts[i].fans_count)
									this.account.push(accounts[i])
								}
							}
						}
					})
			},
			isSignUp() {
				return this.$https.get('/youngee/c/t/g/is-sign-up-sec-task' +
						"?" +
						"selection_id" +
						"=" +
						this.selectionId)
					.then(res => {
						console.log(res);
						let task;
						if (res.data.code === 0) {
							this.isSign = res.data.data.is_sign;
							task = res.data.data.sec_task_info
							if (this.isSign) {
								this.youngLeadTeamId = task.lead_team_id
								this.youngTeamId = task.team_id
							}
						}
					})
			},
			onPageScroll(res) {
				uni.$emit('onPageScroll', res.scrollTop);
				this.scrollTop = res.scrollTop;
				// console.log(res.scrollTop);
				if (res.scrollTop <= this.topp1 - this.hei1) {
					// console.log(0)
					this.activeTab = 0
				}
				if (res.scrollTop > this.topp1 - this.hei1 && res.scrollTop < this.topp2 - this.hei1) {
					// console.log(1)
					this.activeTab = 1
				}
				if (res.scrollTop > this.topp2 - this.hei1) {
					// console.log(2)
					this.activeTab = 2
				}
			},
			//获取节点离顶部高度
			getInfo() {
				const query = uni.createSelectorQuery().in(this);

				query.select('#wrap0').boundingClientRect(data => {

					this.topp0 = data.top
				}).exec();
				query.select('#wrap1').boundingClientRect(data => {

					this.topp1 = data.top
				}).exec();
				query.select('#wrap2').boundingClientRect(data => {
					this.topp2 = data.top
					// console.log(this.topp2)
				}).exec();
				query.select('#wap').boundingClientRect(data => {

					// console.log(data)
					this.hei = data.height
					this.tabBarStyle = {
						height: data.height + data.height + 'px',
						width: '100% ',
					}
				}).exec();
				query.select('#wa').boundingClientRect(data => {

					// console.log(data)
					this.hei1 = data.height

				}).exec();

			},
			//视频轮播
			effect3dMarginMethed() {
				this.effect3dMargin++
			},
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
			},
			//底部弹出层
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			submit(type) {
				let that = this
				if (that.talent.is_bind_location === 0) {
					// 前往个人信息绑定三合一界面
					uni.showModal({
						content: '请先绑定个人信息',
						success: function(res) {
							if (res.confirm) {
								if (that.account.length === 0) {
									uni.navigateTo({
										url: '/page_tasksquare/bindinfo?platform_id=' + that
											.selection.platform
									})
								} else {
									uni.navigateTo({
										url: '/page_tasksquare/bindinfo?platform_id=' +
											that.selection.platform +
											'&account_id=' +
											that.account[0].account_id
									})
								};
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (that.account.length === 0) {
					uni.showModal({
						content: '请先绑定社媒账号',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_mycenter/myinformation/bindaccount?platform_id=' +
										that.selection.platform
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					var data = {
						selectionId: this.selectionId,
						selection: this.selection,
						youngTeamId: this.youngTeamId,
						youngLeadTeamId: this.youngLeadTeamId,
					}
					data = JSON.stringify(data)
					console.log("data: ", data)
					uni.navigateTo({
						url: '/page_selectionsquare/selectiondetail/information?textObj=' + encodeURIComponent(
							data)
					})
				}
			},
			// 下载视频
			downloadVideo(url) {
				// 自定义 文件名称
				let fileName = new Date().valueOf();
				const task = uni.downloadFile({
					url: url,
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4', //  拼接本地文件路径
					success: (res) => {
						let filePath = res.filePath
						uni.saveVideoToPhotosAlbum({
							filePath,
							success: (res) => {
								uni.showToast({
									title: '下载成功',
									icon: 'success',
								})
								let fileMgr = wx.getFileSystemManager();
								// 删除本地文件
								fileMgr.unlink({
									filePath: wx.env.USER_DATA_PATH + '/' + fileName +
										'.mp4',
									success: function(r) {
										console.log('unlink-getFileSystemManager')
										console.log(r)
									},
								})
							},
							complete(res) {
								console.log('saveVideoToPhotosAlbum-complete')
								console.log(res)
							}
						})
					},
					complete(res) {
						console.log('downloadFiledownloadFiledownloadFiledownloadFiledownloadFile')
						console.log(res)
						uni.hideLoading()
					}
				})
				task.onProgressUpdate(this.onProgress)
			},
			// 提示下载进度
			onProgress(res) {
				uni.showToast({
					icon: 'loading',
					mask: true,
					title: res.progress + "%"
				})
			},
			toggle1(type) {
				// if (this.youngLeadTeamId === "") {
				// 	this.$https.post('/youngee/c/t/p/add-young-team', {
				// 			selection_id: this.selectionId,
				// 			project_type: 2,
				// 		})
				// 		.then(res => {
				// 			console.log(res)
				// 			this.youngLeadTeamId = res.data.data;
				// 		})
				// }
				this.type1 = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup1.open(type)
			},
			cancel() {
				this.$refs.popup1.close()
			},
			// 更新账号
			Reset() {
				console.log("Reset func running")
				uni.navigateTo({
					url: '/pages/mycenter/myinformation/bindaccount?platform_id=' + this
						.information
						.project_platform + '&account_id=' + this.account[0].account_id,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			//进入信息确认页面
			determine() {
				console.log(this.strategy_id)
				if (this.strategy_id === 0 || this.strategy === null) {
					this.showWarning = true;
					setTimeout(() => {
						this.showWarning = false;
					}, 2000)
					return
				}
				let index = 0;
				for (let i = 0; i < this.coop_choice.length; ++i) {
					if (this.strategy_id === this.coop_choice[i].strategy_id) {
						index = i
					}
				}
				if (this.account[0].fans_count < this.strategy.followers_low) {
					this.coop_choice[index].warningText = "粉丝量不符合报名条件"
					this.coop_choice[index].showWarning = true;
					this.hackReset = false;
					this.hackReset = true;
					setTimeout(() => {
						this.coop_choice[index].showWarning = false;
						this.hackReset = false;
						this.hackReset = true;
					}, 2000)
				} else if (this.strategy.fee_form === 3 && (this.strategy.offer === 0 || this.strategy.offer === null)) {
					this.coop_choice[index].warningText = "请填写自报价金额"
					this.coop_choice[index].showWarning = true;
					this.hackReset = false;
					this.hackReset = true;
					setTimeout(() => {
						this.coop_choice[index].showWarning = false;
						this.hackReset = false;
						this.hackReset = true;
					}, 2000)
				} else {
					this.$refs.popup.close()
					this.strategy.offer = parseInt(this.strategy.offer)
					this.strategy.showOffer = money(this.strategy.offer)
					var data = {
							projectid: this.projectid,
							information: this.information,
							account: this.account[0].account_id,
							strategy: this.strategy,
						},
						data = JSON.stringify(data)
					console.log("data")
					console.log(data)
					uni.navigateTo({
						url: '/pages/tasksquare/information?textObj=' + encodeURIComponent(data)
					});
				}
			},
			beginCanvas() {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			_canvasImage(e) {
				console.log("url", e)
				this.canvasUrl = e;
			},
			// 保存图片
			async saveImage() {
				let {
					canvasUrl
				} = this
				let res = await saveImageToPhotosAlbum(canvasUrl)
				if (!res.success) return
				showToast('保存成功')
				this.$refs.popup2.close()
			},
			toggle2(type) {
				if (this.canvasUrl !== '') {
					this.type2 = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup2.open(type)
					this.$refs.popup1.close()
				} else {
					this.beginCanvas()
					this.type2 = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup2.open(type)
					this.$refs.popup1.close()
				}
			},
			deletContract() {
				try {
					let file = wx.getFileSystemManager();
					file.readdir({
						dirPath: `${wx.env.USER_DATA_PATH}`,
						success: res => {
							console.log(res);
							if (res.files.length > 2) {
								file.unlink({
									filePath: `${wx.env.USER_DATA_PATH}/${res.files[0]}`,
									complete: res => {

									}
								})
							}
						}
					})
				} catch (error) {

				}
			},
			downloadFile(url, file) {
				let that = this
				console.log(url, file)
				// const fileName = url.split('/').pop()
				const newPath = `${wx.env.USER_DATA_PATH}/${file}`;
				that.deletContract();
				wx.showLoading({
					title: '正在打开',
					mask: true
				})
				wx.downloadFile({
					url: url,
					filePath: newPath,
					header: {},
					success: function(res) {
						var filePath = res.filePath;
						console.log(filePath);
						wx.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功')
								wx.hideLoading()
							},
							fail: function(res) {
								console.log(res);
								wx.hideLoading()
							},
							complete: function(res) {
								console.log(res);
							}
						})
					},
					fail: function(res) {
						console.log('文件下载失败');
						console.log(res)
					},
					complete: function(res) {},
				})
			},
		}
	};
</script>
<style>
	/deep/ .share1 .uni-popup .uni-popup__wrapper {
		width: 300px !important;
		/* height: 500px !important; */
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx !important;
	}

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;
		border-radius: 15rpx;
	}
</style>
<style lang="scss" scoped>
	text {
		font-size: 24rpx;
	}

	#coop_box {
		// display: flex;
		margin-top: 15rpx;
	}

	#coop_box .coop_box_btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// width: 700rpx;
		background-color: #f4f4f4;
		border-radius: 15rpx;
		font-size: 30rpx;
		text-align: center;
		cursor: pointer;
		margin: 40rpx 0;
		padding: auto 10rpx;
	}

	.borderColor {
		border: 2px solid #f7d43c !important;
	}

	.offer_input {
		width: 120rpx;
		border: 1px solid #cccccc;
	}

	.wvp {
		color: #000;
		margin: 0 5rpx;
	}

	.wvp1 {
		padding: 0 30rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		background-color: #f2d22d;
		border: 10rpx;
	}

	.my-canvas {
		position: fixed;
		top: -99999999999rpx;
		left: -99999999999rpx;
		z-index: -99999999999;
		opacity: 0;
	}

	.poster {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		overflow: hidden;
	}

	.butmin {
		width: 200rpx;
		height: 65rpx;
		background-color: #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 2;
	}

	//视频轮播
	.full {
		position: relative;

		.btns {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			z-index: 1;
			left: 100rpx;
			top: 50rpx;
			right: 100rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			>view {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				padding: 0 20rpx;
			}

			&.full {
				position: relative;
				left: 0;
				right: 0;

				>view {
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 0 20rpx;
					background-color: rgba(0, 0, 0, 0.1);
					margin-bottom: 10rpx;
				}
			}
		}
	}

	//轮播图
	page {
		background-color: #fff;
	}

	.top-swiper {
		margin-bottom: 30rpx;

		.bg {
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;



			.image {
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;

				&::after {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
					background-image: linear-gradient(to bottom, transparent, #FFF);
				}

				>image {
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}

		.box {
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			// position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}

		.swiper {
			height: 450rpx;
			margin: 0 20rpx;

			.le-img {
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.8);
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 4px;

				&.le-active {
					transform: scale(1);
				}
			}

		}
	}

	//其他的
	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		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;
	}


	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	//轮播图

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 750rpx;
		display: flex;
		justify-content: center;
	}

	.swiper-item {
		display: block;
		width: 100%;
		height: 750rpx;
		line-height: 750rpx;
		text-align: center;
	}

	.swiper-list {
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

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

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

	}

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

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

	.TitleText p {
		color: #C49A0A;
		font-size: 50%;

	}

	.introduction {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 2%;
	}

	.rleft p {
		font-size: 24rpx;
	}

	.rright p {
		font-size: 24rpx;
	}

	.projectinfo {
		margin: 30rpx 0;
		display: flex;
		justify-content: space-around;
	}

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

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

	.interval {
		width: 100%;
		height: 40rpx;
		background-color: #E4E4E4;
		margin-top: 5%;
	}

	.circularmark {
		// display: inline-block;
		width: 250rpx;
		margin: 10rpx auto;
		padding: 10rpx;
		background-color: #f2d22d;
		border-radius: 10rpx;
		position: relative;
	}

	.circularmark p {
		font-size: 85%;
		text-align: center;
		font-weight: 800;
	}

	.circularmark image {
		width: 60rpx;
		height: 68rpx;
		position: absolute;
		top: -30%;
		left: -10%;
	}

	.btnn {
		background-color: #3296FA;
		border-radius: 20rpx;
		font-size: 25rpx;
		line-height: 34rpx;
	}

	.markcontent {
		// width: 100%;
		// background-color: #E4E4E4;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding-top: 2%;
		padding-bottom: 2%;
	}

	.markcontent p {
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.markcontent span {
		font-size: 24rpx;
		// color: #333333;
		// margin: 3% ;
	}

	.interval2 {
		width: 100%;
		height: 100rpx;
		background-color: #E4E4E4;
		margin-top: 5%;
	}

	.markcontent1 {
		width: 100%;
		border-radius: 20rpx;
		padding-top: 2%;
		padding-bottom: 2%;
	}

	.markcontent1 p {
		font-size: 24rpx;
		// color: #333333;
		// margin: 3% ;
		// text-indent: 2em;
	}

	.trademark {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #f2d22d;
		margin: 0 auto;
	}

	.trademark image {
		width: 100%;
		height: 100%;
	}

	.diagram {
		width: 100%;
		// height: 1000rpx;
	}

	.diagram image {
		width: 100%;
		// height: 100% ;
	}

	.diagram-pdf {
		padding: 0 20rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.diagram-pdf image {
		width: 60rpx;
		height: 60rpx;
	}

	.diagram-pdf p {
		width: 50%;
		font-size: 32rpx;
	}

	.diagram-pdf button {
		background-color: #FFFFFF;
		border: 2rpx solid #f2d22d;
		border-radius: 20rpx;
		font-size: 32rpx;
		// letter-spacing: 5rpx;
		font-weight: 500;
		position: relative;
	}

	.but1 {
		width: 60%;
		background-color: #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;

		&.on {
			background-color: #C0C0C0;

		}

	}

	.but5 {
		background-color: #f2d22d;
		border-radius: 20rpx;
		font-size: 32rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;
		text-align: center;
		padding: 0 10rpx;

		&.on {
			background-color: #C0C0C0;

		}

	}

	/** 必须提升样式优先权(!important) **/
	button[disabled] {
		width: 60%;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 80%;
		color: white !important;
		background: #c4c1c1 !important;
	}

	.but2 {
		width: 25%;
		background-color: #FFFFFF;
		border: 2rpx solid #f2d22d;
		border-radius: 20rpx;
		font-size: 36rpx;
		line-height: 180%;
		letter-spacing: 10rpx;
		font-weight: 500;
		position: relative;
		text-indent: 0.5em;
		height: 80%;
	}

	.but2 image {
		width: 19%;
		height: 56%;
		position: absolute;
		left: 9%;
		top: 21%;
	}

	.signup {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding: 2% 0;
		background-color: #FFFFFF;
	}

	.pick {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.nex {
		width: 100rpx;
		height: 20rpx;
		vertical-align: middle;
	}

	.sampledrawing {
		display: flex;
		width: 96%;
		margin: 0 auto 50rpx;
	}

	.samplecharacter {
		flex: 1;
		margin-top: 2%;
	}

	.samplecharacter p {
		padding: 1%;
	}


	/deep/.uni-popup__content {
		background-color: #4CD964;
		border-radius: 20rpx !important;
	}

	/deep/.uni-popup__mask {
		background: rgba(0, 0, 0, 0.5) !important;
	}

	.butto {
		text-align: center;
	}

	/deep/ .mini-btn1 {
		height: 75rpx;
		width: 270rpx;
		line-height: 70rpx;
		margin: 10rpx 0;
		font-size: 30rpx;
		// box-shadow: 0rpx 0rpx 0rpx 5rpx #f2d22d;
		border: 1rpx solid #f2d22d !important;
	}

	/deep/ .mini-btn2 {
		height: 75rpx;
		width: 350rpx;
		line-height: 70rpx;
		margin: 10rpx 0;
		font-size: 30rpx;
		background-color: #f2d22d;
		// box-shadow: 0rpx 0rpx 0rpx 5rpx #f2d22d;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag {
		background-color: #FFFFFF !important;
		box-shadow: 0rpx 0rpx 6rpx 0rpx #464100;
		border-radius: 10rpx !important;
	}

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

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

	/deep/.buu .uni-data-checklist .checklist-group {
		flex-direction: column !important;
	}


	.surplus p {
		margin-bottom: 17%;
		margin-top: 8%;
		font-size: 80%;

	}

	.circular {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #28EA71;
		margin: 0 auto;
	}

	.circular image {
		width: 60%;
		height: 60%;
		padding: 20%;
	}

	.tii {
		text-align: center;
		font-size: 26rpx;
		margin-top: 2%;
	}

	.tii2 {
		text-align: center;
		font-size: 26rpx;
		margin-top: 2%;
		background-color: #FFFFFF;

	}

	.errar {
		background-color: #FFFFFF;

	}

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

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

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

	}

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

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

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

	}

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

	.Tasktext2 span {
		color: #333333;
		font-size: 88%;
		font-weight: 600;
		text-indent: 2em;

	}

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

	.textti p {
		font-size: 60%;
		color: #999999;
		text-align: center;
	}

	.immg image {
		width: 200rpx;
		height: 200rpx;
	}

	.immg {
		line-height: 150%;
	}

	.immg p {
		color: #333333;
		font-size: 90%;
		font-weight: 600;

	}

	.warr p {
		font-weight: 500;
		font-size: 90%;

		&.lor {
			border-bottom: 2rpx solid #f2d22d;

		}
	}

	.tip_box {
		position: fixed;
		right: 0;
		z-index: 9999;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		flex-direction: column;
		margin-top: -40rpx;

		.arrow {
			width: 0;
			height: 0;
			border: 10rpx solid;
			border-color: transparent;
		}

		.container {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 4rpx 10px;

			.tips {
				flex: 1;
			}
		}
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>