yicangzongtai_app_240321/pages/research/recommend/details.vue

<template>
	<view class="details" v-if="opusInfo">
		<navbar :config="config">
			<!-- <view
			slot="left"
			>
			<view class="slotBox">
				
				<view class="hxicon back" @click="iconBtn">
					&#xe679;
				</view>
			</view>
			</view> -->
		</navbar>
		<!-- 头部图片 -->
		<swiper class="swiper" style="height: 584rpx;" indicator-dots="true" autoplay="true" interval="5000"
			duration="1500" circular="true">
			<swiper-item v-if="opusInfo.opus_type == 1">
				<!--  <video :src="opusInfo.media_address" style="width: 100%;height: 100%;" ></video> -->
				<!-- <j-video class="jvideo" :url="opusInfo.media_address" width="750rpx" height="100%"></j-video> -->
				<video class="jvideo" :src="opusInfo.media_address" width="750rpx" height="100%"></video>
			</swiper-item>
			<block v-if="">
				<swiper-item  v-for="(item, index) in imglist" :key="index" @click="preImg(index)">
					<image :src="item" mode="widthFix" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</block>
			
		</swiper>
		<!-- <view class="top-image">
			<image src="../../../static/delImg/banenr.png" mode=""></image>
		</view> -->
		<view v-if="isMy == true ? isMy : false">
			<view v-if="opusInfo.opus_status==0"
				style="text-align: center;margin-top: 10rpx;color: orange;font-weight: 700;  padding: 30rpx;">
				待审核
			</view>
			<view v-if="opusInfo.opus_status==1"
				style="text-align: center;margin-top: 10rpx;color: #1a1a1a;font-weight: 700; padding: 30rpx;">

			</view>
			<view v-if="opusInfo.opus_status==2"
				style="text-align: center;margin-top: 10rpx;color: red;font-weight: 700; padding: 30rpx;">
				审核不通过：
				<text style="color: #000000;font-weight: 400; ">{{opusInfo.audit_remark}}</text>

			</view>
		</view>

		<view class="title">
			{{ opusInfo.title }}
		</view>
		<!-- 标题 -->
		<view class="three-even">

			<view class="item" style="position: relative">
				<view class="good" @click="clickGood">
					<view v-if="likeNum == true">
						<!-- <image src="../../../static/login/good-job.png" mode=""></image> -->
						<text class="iconfont" style="font-size: 40rpx;color: #03341F;">&#xe610;</text>
					</view>
					<view v-else>
						<!-- <image src="../../../static/good.png" mode=""></image> -->
							<text class="iconfont" style="font-size: 40rpx;color: #03341F;">&#xe642;</text>
					</view>
					<view class="num">
						{{ opusInfo.like_num }}
					</view>
				</view>
				<view class="message" @click="shouMsg">
					<image :src="imgUrl+'/message.png'" mode=""></image>
					<view class="num">
						{{ opusInfo.comment_sum }}
					</view>
				</view>
				<!-- @click="share" -->
				<view class="link">
					<text class="iconfont link-item">&#xea1b;</text>
					<button class="iconfont" open-type="share">&#xea1b;</button>
					<!-- <text class="iconfont link-item">&#xea1b;</text> -->
					<view class="num">
						{{ opusInfo.share_num }}
					</view>
				</view>
				<view v-if="isMy == true ? isMy : false" style="
            position: absolute;
            right: 6rpx;
            color: #999999;
            padding: 10rpx 24rpx;
          " @click="delWorks">
					删除
				</view>
			</view>
		</view>
		<!-- 个人信息 -->
		<view class="personal" @click="goToHomepage()">
			<view class="item">
				<image style="border-radius: 50%;" v-if="opusInfo.head_photo" :src="opusInfo.head_photo" mode="">
				</image>
				<image style="border-radius: 50%;" v-else :src="imgUrl+'/head-on.png'" mode=""></image>
				<view class="name-time">
					<view class="name">
						{{ opusInfo.nickname }}
					</view>
					<view class="time">
						{{ opusInfo.create_time }}
					</view>
				</view>
				<view class="follow-button" v-if="falg == false" @click.stop="goFollow">
					+关注
				</view>
				<view class="follow-button" v-if="falg == true" @click.stop="goFollow">
					已关注
				</view>
			</view>
		</view>
		<!-- 简介 -->
		<view class="introduce">
			<view class="top">
				<view class="simple">
					<view class="line"> </view>
					<view class="item"> 简介 </view>
				</view>
				<view class="simple-content">
					{{ opusInfo.content }}
				</view>
			</view>
		</view>
		<!-- 简介 -->
		<view class="recommend">
			<view class="recommend-item">
				<view v-for="(item, index) in opusInfo.opus_goods_list" :key="item.id">
					<view class="componen-titem" v-if="index < goodIndex" @click="goProductDetail(item.goodsId)">
						<view class="img">
							<image style="border-radius: 10rpx;" :src="item.goods.cover" mode=""></image>
						</view>
						<view class="item">
							<view class="item-title">
								{{ item.goods.title }}
							</view>
							<view class="num">
								<view class="num-color">
									<rich-text :nodes="$mUtil.priceBigSmall(item.goods.min_sale_price)"></rich-text>
								</view>
								<view class="button" v-if="ispay"> 立即抢购 </view>
							</view>
						</view>
					</view>
				</view>
				<view class="see-more" v-if="
            opusInfo.opus_goods_list.length > 0 &&
            goodIndex <= opusInfo.opus_goods_list.length
          ">
					<view class="item" @click="goodIndex = 6" style="font-size: 28rpx;  -webkit-transform: scale(0.8);">
						查看更多商品 </view>
					<view class="iconfont u-font24 linge">&#xe645;</view>
				</view>
			</view>
		</view>
		<view class="stay-msg">
			<view class="title-top"> 精选留言 </view>
			<view class="msg-wap" v-if="opusInfo.user_comment_list.length > 0">
				<view class="character" v-for="item in opusInfo.user_comment_list" :key="item.id">
					<view class="image">
						<image v-if="item.head_photo" style="border-radius: 50%;" :src="item.head_photo" mode="">
						</image>
						<image v-else style="border-radius: 50%;" :src="imgUrl+'/head-on.png'" mode=""></image>
					</view>
					<view class="item">
						<view class="top u-text-width-two" > {{ item.nickname||item.mobile}} </view>
						<view class="time">
							{{ item.create_time }}
						</view>
						<view class="content">
							{{ item.content }}
						</view>
					</view>
				</view>
			</view>
			<nodata style="margin-bottom: 100rpx;" v-else :config="{ top: 0, content: '暂无数据~' }"></nodata>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="show-bottom">
				<view class="top">
					<view class="line"> </view>
					<view class="item"> 添加评论 </view>
					<view class="deter-mine" @click="sendMsg()"> 发送 </view>
				</view>
				<view class="input">
					<textarea class="texterea-item" v-model="content" maxlength="100" placeholder="我要说两句"
						placeholder-style="color: #cccccc;padding:''22rpx 20rpx"></textarea>
				</view>
			</view>
		</uni-popup>
		<share ref="shares" :contentHeight="580" v-if="isvisible"></share>
	</view>
</template>

<script>
	import share from "./../../public/share";
	import jVideo from "../../../components/j-video/j-video.vue"
	let app = getApp()
	export default {
		components: {
			share,
			jVideo
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "作品详情",
					color: "#fff",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, ['#0B844A','#00a54e']],
					
					// leftSlot:true,
				},
				opusInfo: null,
				goodIndex: 2,
				imglist: [],
				falg: true,
				content: null,
				isvisible: false,
				likeNum: null,
				options: null,
				publisher_id: null,
				existence:true,
				imgUrl: this.$mConfig.staticUrl,
				ispay: app.globalData.openPay,
				fromShare: false // 是否分享过来的页面
			};
		},
		onLoad(options) {
			this.options = options.id;
			if(options.share == 1) {
				this.fromShare = true
			}
			
			this.browseList()
			console.log(this.imglist)
			console.log(this.imglist.length > 0)
		},
		onShareAppMessage(res) {
			this.$http
			  .post(`/opus/cache-bbs`, {
			    bbs_type: 2,
			    model_type: 0,
			    model_id: this.opusInfo.id,
			  })
			  .then((res) => {});
			let that = this
		  return {
		    title: this.opusInfo.title,
		    path: "/pages/research/recommend/details?id=" + this.options + '&share=1',
		    imageUrl: "",
		    desc: "",
		    content: '',
		    success(res) {
		      uni.showToast({
		        title: "分享成功",
		      });
		    },
		    fail(res) {
		      uni.showToast({
		        title: "分享失败",
		        icon: "none",
		      });
		    },
		  };
		},
		onShareTimeline(res) {
		    let imgUrl;
		    if (this.imglist.length > 0) {
		        imgUrl = this.imglist.split(",")[0];
		    }
		    return {
		        title: this.opusInfo.title,
		        type: 0,
		        query: "/pages/research/recommend/details?id=" + this.options + '&share=1',
		        summary: "",
		        imageUrl: imgUrl,
		    };
		},
		onShow() {
			this.getDetail(this.options);
		},
		onUnload() {
			//    uni.switchTab({
			// 	url:"/pages/research/recommend/recommend"
			// })

			// let pages = getCurrentPages();

			// let beforePage = pages[0];
			// // #ifdef H5
			// beforePage.isload();
			// // #endif
			// // #ifndef H5
			// beforePage.$vm.isload();
			// // #endif

			// uni.navigateBack({
			//   delta: 2,
			// });
		},

		methods: {
			iconBtn() {
				if(this.fromShare) {
					uni.redirectTo({
						url: '/pages/index/home'
					});
				}else {
					uni.navigateBack();
				}
			},
			preImg(index) {
				console.log(111, index)
				uni.previewImage({
							urls: this.imglist,
							current: index
						})
					},
					doesItExist(id){
						this.$http.get("/opus/info/"+id).then((res)=>{
							if(res&&res.code==200){
								if(res.data==null){
									this.$mUtil.toast("该作品已被删除")
									
								}else{
									
									
								}
							}else{
								return false
							}
						})
					},
					share() {
						let token = uni.getStorageSync("apiToken");
						if (!token) {
							uni.navigateTo({
								url: "/pages/login/index",
							});
						} else {
							this.$http.get("/opus/info/"+this.options).then(res=>{
								if(res&&res.code==200){
									if(res.data==null){
										this.$mUtil.toast("该作品已被删除")
										return false
									}else{
										this.isvisible = true;
										this.$nextTick(() => {
											this.$refs.shares.shareInfo(
												"/?pageType=3&type=1&id=" + this.opusInfo.id,
                        'pages/down',
												this.opusInfo.title,
												"",
												this.opusInfo.cover
											);
										});
									}
								}
							})
						}
					},
					goProductDetail(id) {
						uni.navigateTo({
							url: "/pages/product/goods/goods?id=" +
								id +
								"&shareId=" +
								this.opusInfo.publisher_id,
						});
					},
					//浏览作品
					browseList() {
						this.$http
							.post("/opus/cache-bbs", {
								bbs_type: 0,
								model_type: 0,
								model_id: this.options,
								num: 1,
							})
							.then((res) => {
								if (res && res.code == 200) {}
							});
					},
					//删除自己的作品
					delWorks() {
						let that = this;
						uni.showModal({
							title: "你确定要删除你的作品吗？",
							success: function(res) {
								if (res.confirm) {
									that.$http.del(`/opus/delete/${that.options}`).then((res) => {
										if (res && res.code == 200) {
											console.log("删除成功");
											that.$mUtil.toast("删除成功");
											setTimeout(() => {
												uni.navigateBack()
											}, 1000);
										}
									});
								} else if (res.cancel) {
									console.log("用户取消");
								}
							},
						});
					},
					//点赞功能完成
					clickGood() {
						let token = uni.getStorageSync("apiToken")
						if (!token) {
							uni.navigateTo({
								url: "../register/login"
							})
						} else {
							if (this.likeNum == true) {			
								this.$http.post(`/opus/cancel-like/${this.options}`).then((res) => {
									if (res && res.code == 200) {
										this.$mUtil.toast("已取消点赞");
										this.likeNum = false;
										this.opusInfo.like_num--;
									}
								});
							}
							if (this.likeNum == false) {
							
								this.$http
									.post("/opus/cache-bbs", {
										bbs_type: 1,
										model_type: 0,
										model_id: this.options,
									})
									.then((res) => {
										if (res && res.code == 200) {
											this.$mUtil.toast("点赞成功");
											this.opusInfo.like_num++;
											this.likeNum = true;
										}
									});
							}
							// var pages = getCurrentPages(); // 获取页面栈
							// var prevPage = pages[pages.length - 2]; // 上一个页面
							// console.log('prevPage', prevPage)
							// if (prevPage.$vm) {

							// } else {

							// }
						}
					},
					goToHomepage() {
						// console.log(this.opusInfo)
						this.publisherId = this.opusInfo.publisher_id
						// console.log(this.publisherId)
						uni.navigateTo({
							url: "../community/homepage?user_id=" + this.publisherId
						})
					},

					//点击关注
					goFollow() {
						let concernedUserId = this.opusInfo.publisher_id;
						if (this.falg == false) {
							this.$http
								.post("/concerns/concern", {
									concerned_user_id: concernedUserId,
								})
								.then((res) => {
									if (res && res.code == 200) {
										this.falg = true;
										this.$mUtil.toast("已关注对方");
									}
								});
						}
						if (this.falg == true) {
							console.log(222);
							this.$http
								.post("/concerns/cancel-concern", {
									concerned_user_id: concernedUserId,
								})
								.then((res) => {
									if (res && res.code == 200) {
										this.falg = false;
										this.$mUtil.toast("已取消关注");
									}
								});
						}
					},
					getDetail(id) {
						this.$http.get("/opus/info/" + id).then((res) => {
							if (res && res.code == 200) {
								if (res && res.data == null) {
									this.$mUtil.toast("该商品已被删除")
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								} else {
									this.opusInfo = res.data;
									this.falg = res.data.is_concern;
									if(res.data.images) {
										this.imglist = res.data.images.split(",");
									}
									
									this.likeNum = res.data.is_like;
									console.log(res.data.is_me);
									this.isMy = res.data.is_me;
								}

							}
						});
					},

					more() {
						console.log(666);
					},
					//弹出评论框
					shouMsg() {
						let token = uni.getStorageSync("apiToken")
						if (!token) {
							uni.navigateTo({
								url: "../register/login"
							})
						} else {
							this.$refs.popup.open();
						}

					},
					//发送消息，暂时还没写，目前是关闭评论框
					sendMsg() {
						if (this.content == null) {
							this.$mUtil.toast("请填写留言内容");
							return false;
						}
						this.$http
							.post("/opus/comment/", {
								model_id: this.opusInfo.id,

								content: this.content,
							})
							.then((res) => {
								if (res && res.code == 200) {
									this.$mUtil.toast("留言成功");
									this.$refs.popup.close();
									this.getDetail(this.opusInfo.id);
									this.content = ""
								}
							});
					},
			},
		};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'hxicon';
		/* project id 2009392 */
		src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
	}
	
	@font-face {
		font-family: 'iconfont';
		/* project id 2070236 */
		src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot');
		src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff') format('woff'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.svg#iconfont') format('svg');
	}
	.hxicon {
		font-family: hxicon;
		font-size: 20px;
		font-style: normal;
		/* #ifndef APP-PLUS-NVUE */
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		/* #endif */
	
	}
	/deep/ video {
		width: 750rpx;
		height: 90%;
	}
	.slotBox {
		.back {
			padding: 0 13rpx;
		}
	}
	.show-bottom {
		background-color: #ffffff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 37rpx 30rpx 22rpx 30rpx;

		.input {
			.texterea-item {
				background-color: #fafafa;
				padding: 22rpx 20rpx;
				border-radius: 21rpx;
				margin: 22rpx 29rpx 4rpx 30rpx;
			}
		}

		.top {
			display: flex;
			align-items: center;

			.line {
				width: 6rpx;
				height: 26rpx;
				background-color: #0B844A;
				border-radius: 3rpx;
			}

			.item {
				font-size: 36rpx;
				color: #1a1a1a;
				font-weight: 700;
				margin-left: 14rpx;
				flex: 1;
			}

			.deter-mine {
				font-size: 30rpx;
				font-weight: 500;
				color: #1a1a1a;
			}
		}
	}

	.stay-msg {
		.title-top {
			font-size: 36rpx;
			font-weight: 700;
			color: #1a1a1a;
			padding: 28rpx 0 31rpx 32rpx;
		}
		.msg-wap {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
		.character {
			padding-right: 30rpx;
			display: flex;
			margin-bottom: 40rpx;

			.image {
				margin-left: 32rpx;
				margin-right: 18rpx;

				image {
					width: 83rpx;
					height: 83rpx;
				}
			}

			.item {
				.top {
					font-size: 28rpx;
					font-weight: 400;
					color: #1a1a1a;
				}

				.time {
					font-size: 24rpx;
					color: #999999;
					font-weight: 500;
				}
			}
		}

		.character:nth-child(odd) {
			.content {
				font-size: 28rpx;
				font-weight: 500;
				color: #1a1a1a;
				margin-top: 15rpx;
			}
		}

		.character:nth-child(even) {
			.content {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				margin-top: 15rpx;
			}
		}
	}

	.recommend {
		width: 750rpx;
		padding-bottom: 40rpx;
		border-bottom: 10rpx solid #f5f5f5;

		.recommend-item {
			width: 720rpx;
			margin: 0 auto;

			.see-more {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #999999;
				font-weight: 400;

				.linge {
					margin-left: 9rpx;
				}
			}
		}

		.componen-titem {
			margin: 0 auto;
			display: flex;
			padding: 30rpx 39rpx;

			.img {
				image {
					width: 139rpx;
					height: 139rpx;
				}
			}

			.item {
				margin-left: 19rpx;
				padding-right: 39rpx;
				width: 100%;
				height: 139rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.item-title {
					color: #1a1a1a;
					font-size: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal !important;
				}

				.num {
					// margin-top: 18rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					width: 100%;

					.num-color {
						color: #ff0000;

						.large {
							font-size: 38rpx;
							font-weight: 700;
						}

						.small {
							font-size: 20rpx;
							font-weight: Regular;
						}
					}
				}

				.button {
					padding: 12rpx 35rpx 11rpx 35rpx;
					background-color: #0B844A;
					border-radius: 32rpx;
					color: #ffffff;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}

	.introduce {
		padding: 40rpx 19rpx 40rpx 30rpx;
		border-bottom: 8rpx solid #f5f5f5;

		.practice {
			margin-top: 34rpx;

			.practice-item {
				display: flex;
				align-items: center;

				.simple {
					width: 6rpx;
					height: 26rpx;
					background: #0B844A;
					border-radius: 3rpx;
				}

				.practice-details {
					font-size: 28rpx;
					font-weight: 700;
					color: #1a1a1a;
					margin-left: 16rpx;
				}
			}

			.introduction-details {
				margin-top: 19rpx;
				font-size: 24rpx;
				color: #666666;
				font-weight: 500;
				text-align: left;

				.item {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.middle {
			margin-top: 34rpx;

			.middle-item {
				display: flex;
				align-items: center;

				.simple {
					width: 6rpx;
					height: 26rpx;
					background-color: #0B844A;
					border-radius: 3rpx;
				}

				.material {
					font-size: 28rpx;
					font-weight: 700;
					color: #1a1a1a;
					margin-left: 16rpx;
				}
			}

			.item-block {
				margin-top: 19rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666;
				line-height: 38rpx;
			}
		}

		.top {
			.simple-content {
				color: #666666;
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 19rpx;
			}

			.simple {
				display: flex;
				align-items: center;

				.line {
					width: 6rpx;
					height: 26rpx;
					line-height: 26rpx;
					background-color: #0B844A;
					border-radius: 3rpx;
				}

				.item {
					margin-left: 16rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #1a1a1a;
				}
			}
		}
	}

	.personal {
		border-bottom: 8rpx solid #f5f5f5;

		.item {
			display: flex;
			margin: 28rpx 30rpx 40rpx 30rpx;

			.follow-button {
				margin-top: 12rpx;
				color: #0B844A;
				font-size: 28rpx;
				font-weight: 400;
				padding: 10rpx 26rpx;
				background-color: rgba(218, 198, 161, 1);
				border-radius: 18rpx;
				height: 40rpx;
				line-height: 40rpx;
			}

			.name-time {
				margin-left: 18rpx;
				flex: 1;
				width: 100%;

				.name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 400rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #1a1a1a;
					font-weight: 400;
					opacity: 1;
					letter-spacing: -1rpx;
					margin-bottom: 10rpx;
				}

				.time {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					color: #999999;
					opacity: 1;
				}
			}

			image {
				width: 83rpx;
				height: 83rpx;
			}
		}
	}

	.three-even {
		.item {
			display: flex;
			margin: 0 30rpx;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #e6e6e6;
			justify-content: flex-start;

			.link {
				display: flex;
				align-items: center;
				position: relative;
				.link-item {
					color: #03341F;
					margin-left: 44rpx;
				
					margin-left: 44rpx;
				}

				.num {
					margin-left: 11rpx;
					color: #999;
				}
				button {
					opacity: 0;
					position: absolute;
					top: 0;
					left: 44rpx;
					z-index: 1;
				}
			}

			.message {
				display: flex;
				align-items: center;
				image {
					margin-left: 44rpx;
					width: 38rpx;
					height: 30rpx;
				}

				.num {
					margin-left: 11rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: 500;
				}
			}

			.good {
				display: flex;
				align-items: center;
				image {
					width: 37rpx;
					height: 37rpx;
				}

				.num {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #999999;
					font-weight: 500;
				}
			}
		}
	}

	.title {
		margin: 33rpx 36rpx 18rpx 10rpx;
		padding-left: 16rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1a1a1a;
	}

	.top-image {
		width: 750rpx;
		height: 584rpx;

		image {
			width: 750rpx;
			height: 584rpx;
		}
	}
</style>