2023-4-25

api/model.js

@@ -80,6 +80,14 @@ export function getShowTemplateList(data) {
 		url: '/api/pub/getShowTemplateList',
 		method: 'post',
 })
+}
+//我的模板
+export function userShowTemplateList(data) {
+	return request({
+		url: '/api/user/userShowTemplateList',
+		method: 'post',
+		data
+	});
 }
 
 //获取本人用户名片信息

pages/user/model/mymodel.vue

@@ -1,743 +1,179 @@
 <template>
-	<view class="content ">
-
-		<view class="item-name">
-			上传头像
-		</view>
-		<view class="con_box">
-			<view class="con_image">
-				<image class="img" @click="navCroper(400,400,'one')" :src="updata.avatar||`../../../static/image/upImg.png`">
-				</image>
-			</view>
-		</view>
-		<view class="item-name">
-			基本信息
-		</view>
-		<view class="listBox">
-			<view class="list">
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text> <text class="title">真实姓名</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.name" type="text" placeholder="请填写真实姓名"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">手机号</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.phone" type="text" placeholder="请填写手机号"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">身份证号</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.cardId" type="text" placeholder="请填写身份证号"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="title">从业时长</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.work_year" type="number" placeholder="请填写从业时长"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="title">籍贯</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.ancestral_place" type="number" placeholder="请填写籍贯"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="title">学历</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.education" type="number" placeholder="请填写学历"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="title">民族</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.minority" type="number" placeholder="请填写民族"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="title">出生日期</text>
-					</view>
-					<view class="right flex">
-						<picker class="input" value='2000-01-01' mode="date" @change="changetime">
-							<view>
-								{{updata.time||'请选择日期'}}
-							</view>
-						</picker>
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">职业</text>
-					</view>
-					<view class="right flex">
-						<picker class="input" :range='workTypeList' range-key='title' mode="selector"
-							@change="changeWorkType">
-							<view>
-								{{updata.word.title||'选择职业'}}
-							</view>
-						</picker>
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">收费类型</text>
-					</view>
-					<view class="right flex">
-						<picker class="input" :range='timeTypeList' range-key='title' mode="selector"
-							@change="changetimetype">
-							<view>
-								{{updata.timetype.title||'收费时间类型'}}
-							</view>
-						</picker>
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">最低价</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.minMoney" type="number" placeholder="请输入最低收费价"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">最高价</text>
-					</view>
-					<view class="right flex">
-						<input class="input" v-model="updata.maxMoney" type="number" placeholder="请输入最高收费价"
-							placeholder-class="placeholder" />
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">服务区域</text>
-					</view>
-					<view class="right">
-						<view class="citylist">
-							<view class="flex margin-b-20" v-for="(item,ind) in updata.onCity" :key="ind">
-								<view></view>
-								<view>
-									{{item.province+item.city+item.district}}
-									<text class="margin-l-10 del" @click="updata.onCity.splice(ind,1)">
-										删除
-									</text>
-								</view>
-							</view>
-							<view class="flex">
-								<view></view>
-								<pickerAddress class="buttom" @change="onCityClick">添加地区</pickerAddress>
+	<view class="indexBox">
+		<view class="hot-list-box">
+			<view class="list-box">
+				<view class="list" v-for="(item,index) in navList.orderList">
+					<view class="list-image-box">
+						<image class="list-image" :src="item.img" mode="widthFix"></image>
+					</view>
+					<view class="list-content">
+						<view class="list-title clamp">
+							{{item.title}}
+						</view>
+						<view class="list-money flex flex-start">
+							<view class="money">
+								￥{{item.price}}
 							</view>
 						</view>
-
-					</view>
-				</view>
-				<view class="flex listItem">
-					<view class="flex titleBox">
-						<text class="font-color-red font-size-sm">✲</text><text class="title">服务内容</text>
-					</view>
-					<view class="right">
-						<checkbox-group @change="checkTypeChange">
-							<label class="flex timetype margin-b-10" v-for="(item,ind) in typeList" :key="item.id">
-								<view class="margin-r-10">{{item.title}}</view>
-								<view>
-									<checkbox :value="`${item.id}`" :checked="item.checked" />
-								</view>
-							</label>
-						</checkbox-group>
 					</view>
 				</view>
 			</view>
 		</view>
-		<view class="item-name">
-			自评
-		</view>
-		<view class="listBox">
-			<view class="list">
-				<view class="listItem">
-					<textarea auto-height :maxlength='-1' v-model="updata.mymask" type="text" placeholder="请填写自评内容"
-						placeholder-class="placeholder" />
-				</view>
-			</view>
-			<view class="con_box">
-				<view class="con_image" v-for="(item,ind) in updata.imageList">
-					<image class="img" @click="navCroper(400,400,'tab',ind)"
-						:src="item"></image>
-					<image @click="updata.imageList.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
-				</view>
-				<view class="con_image">
-					<image class="img" @click="navCroper(400,400,'all')"
-						src="../../../static/image/upImg.png"></image>
-				</view>
-			</view>
-		</view>
-		<view class="item-name">
-			我的证书
-		</view>
-		<view class="listBox">
-			<view class="con_box">
-				<view class="con_image" v-for="(item,ind) in updata.service_audit_imgs">
-					<image class="img" @click="navCroper(400,400,'audit',ind)"
-						:src="item"></image>
-					<image @click="updata.service_audit_imgs.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
-				</view>
-				<view class="con_image">
-					<image class="img" @click="navCroper(400,400,'auditall')"
-						src="../../../static/image/upImg.png"></image>
-				</view>
-			</view>
-		</view>
-		<view class="item-name">
-			服务展示
-		</view>
-		<view class="listBox">
-			<view class="con_box">
-				<view class="con_image" v-for="(item,ind) in updata.service_imgs">
-					<image class="img" @click="navCroper(400,400,'service',ind)"
-						:src="item"></image>
-					<image @click="updata.service_imgs.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
-				</view>
-				<view class="con_image">
-					<image class="img" @click="navCroper(400,400,'serviceall')"
-						src="../../../static/image/upImg.png"></image>
-				</view>
-			</view>
-		</view>
-		<view class="base-buttom" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</view>
+		<uni-load-more :status="navList.loadingType"></uni-load-more>
 	</view>
 </template>
 
 <script>
 	import {
-		getServiceTimeTypeList,
-		getServiceTypeList,
-		subInfoAudit,
-		getUserWorkTypeList
-	} from '@/api/model.js';
-
+		mapState,
+		mapMutations
+	} from 'vuex';
 	import {
-		isCardNo
-	} from '@/utils/rocessor.js';
+		share
+	} from '@/api/wx';
 	import {
-		mapState
-	} from "vuex"
-
-	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
-
+		getBannerList,
+		getShowTemplateList
+	} from '@/api/model.js';
 	export default {
-		components: {
-			pickerAddress
-		},
 		data() {
 			return {
-				// 上传数据
-				updata:{
-					avatar: '', //用户头像
-					name: '', //用户名称
-					phone: '', //手机号
-					cardId: '', //身份证号
-					minMoney: '',//最低价
-					maxMoney: '',//最高价
-					checkedType: [], //选中的服务类型
-					time: '', //出生日期
-					timetype: {
-						title: '',
-						code:''
-					}, //选中的时间类型
-					onCity: [], //选中的城市
-					mymask:'',//自评
-					imageList: [], //自评上传图片列表
-					ancestral_place:'',//籍贯
-					education:'',//学历
-					ancestral_place:'',//籍贯
-					minority:'',//民族
-					
-					work_year:'',//从业时长
-					word: {
-						title: '',
-						id:''
-					},
-					service_audit_imgs: [], //我的证书
-					service_imgs: [], //服务展示
+				// 商品列表
+				navList: {
+					state: 1,
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10, //每次信息条数
+					count: 0, //总消息条数
 				},
-				typeList: [], //服务类型
-				timeTypeList: [], //时间类型
-				workTypeList: [], //工作类型
-				loding: false, //是否载入中
-
 			};
 		},
-		onLoad(options) {
-			this.init()
+		onLoad: function(option) {
+			this.getShowTemplateList();
 		},
-		computed: {
-			// #ifdef H5
-			...mapState(['urlFile']),
-			// #endif
-			...mapState(['baseURL']),
+		// 滚动到底部
+		onReachBottom() {
+			this.getShowTemplateList();
 		},
 		methods: {
-			// 初始化
-			init() {
-				const that = this;
-				getServiceTimeTypeList().then(
-					(res) => {
-						that.timeTypeList = res.data.list
-						that.updata.timetype=that.timeTypeList[0];
-						console.log(res);
-					}
-				).catch(
-					(res) => {
-						console.log(res);
-					}
-				)
-				getServiceTypeList().then(
-					(res) => {
-						that.typeList = res.data.list
-						console.log(res);
-					}
-				).catch(
-					(res) => {
-						console.log(res);
-					}
-				)
-				getUserWorkTypeList().then(
-					(res) => {
-						console.log(res);
-						that.workTypeList = res.data.list
-						that.updata.word=that.workTypeList[0]
-					}
-				).catch(
-					(res) => {
-						console.log(res);
-					}
-				)
-			},
-			// 选中的服务类型
-			checkTypeChange(type) {
-				this.updata.checkedType = type.detail.value;
-				console.log(type)
-			},
-			// 选中的工作类型
-			changeWorkType(type){
-				this.updata.word =  this.workTypeList[type.detail.value];
-				console.log(this.updata.word)
-			},
-			// 选择时间类型
-			changetimetype(res) {
-				this.updata.timetype = this.timeTypeList[res.detail.value];
-			},
-			// 时间选择
-			changetime(time) {
-				this.updata.time = time.detail.value;
-				console.log(time);
-			},
-			// 选择省市区
-			onCityClick({
-				data
-			}) {
-				let address = {};
-				address.province = data[0];
-				address.city = data[1];
-				address.district = data[2];
-				this.updata.onCity.push(address)
-				console.log(this.onCity, 'cs');
-			},
-			upLoad(path) {
-				// #ifdef H5
-				console.log(path, 'h5');
-				// #endif
-				uni.showLoading({
-					title: '图片上传中',
-					mask: true
-				});
-				return new Promise((resolve, error) => {
-					uni.uploadFile({
-						url: this.baseURL + '/api/user/qiniuUpload', //仅为示例，非真实的接口地址
-						filePath: path,
-						name: 'file',
-						header: {
-							"token": uni.getStorageSync('token')
-						},
-						success: (uploadFileRes) => {
-							if ("string" === typeof uploadFileRes.data) {
-								resolve(JSON.parse(uploadFileRes.data).data)
-							} else {
-								resolve(uploadFileRes.data.data)
-							}
-						},
-						complete() {
-							uni.hideLoading()
-						}
-					});
-				})
-			},
-			// 图片裁切
-			/**
-			 * @param {Number} w 裁切宽度比例
-			 * @param {Number} h 裁切高度比例
-			 * @param {Number} mw 图片最小宽度
-			 * @param {Number} mh 图片最小高度
-			 * @param {String} url url修改
-			 */
-			navCroper(w, h, type, ind) {
-				let that = this;
-				let tt = (type == 'upimg' ? 2 : 1)
-				this.onImg(tt).then((url) => {
-					uni.navigateTo({
-						url: `../realName/cropper?width=${w}&height=${h}`,
-						events: {
-							uploadSuccess(res) {
-								that.upLoad(res).then((urldata) => {
-									console.log(urldata);
-									if (type == 'one') {
-										that.updata.avatar = urldata.img
-									} else if (type == 'all') {
-										that.updata.imageList.push(urldata.img)
-									} else if (type == 'tab') {
-										that.updata.imageList.splice(ind, 1, urldata.img)
-									}else if (type == 'audit') {
-										that.updata.service_audit_imgs.splice(ind, 1, urldata.img)
-									}else if (type == 'auditall') {
-										that.updata.service_audit_imgs.push( urldata.img)
-									}else if (type == 'service') {
-										that.updata.service_imgs.splice(ind, 1, urldata.img)
-									}else if (type == 'serviceall') {
-										that.updata.service_imgs.push( urldata.img)
-									}
-								})
-							}
-						},
-						success: function(res) {
-							// 通过eventChannel向被打开页面传送数据
-							res.eventChannel.emit('urlNext', {
-								url
-							})
-						}
+			// 获取模板列表
+			getShowTemplateList(source) {
+				//这里是将订单挂载到tab列表下
+				let navItem = this.navList;
+				let state = navItem.state;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+				getShowTemplateList({
+						is_recommend: 1,
+						page: navItem.page,
+						pageSize: navItem.limit
 					})
-				})
-			},
-			onImg(type) {
-				const _this = this
-				return new Promise((ok, erro) => {
-					// 判断是否需要选择
-					if (type == 1) {
-						uni.showActionSheet({
-							itemList: ['拍照', '选择一张照片'],
-							success: function(res) {
-								_this.chooseImage(res.tapIndex).then((url) => {
-									ok(url)
-								}).catch((res) => {
-									erro(res)
-								})
-							},
-							fail: function(res) {
-								erro(res)
-								console.log(res.errMsg);
-							}
+					.then(({
+						data
+					}) => {
+						let arr = data.list.map(e => {
+							return e;
 						});
-					}
-					// 判断是否只需要拍照
-					if (type == 2) {
-						_this.chooseImage(0).then((url) => {
-							ok(url)
-						}).catch((res) => {
-							erro(res)
-						})
-					}
-				})
-
-			},
-			chooseImage: function(index) {
-				const _this = this
-				return new Promise((ok, error) => {
-					// 从相册/相机选择
-					// 如需直接开相机或直接选相册，请只使用一个选项
-					const sourceType = index === 0 ? ['camera'] : ['album']
-					uni.chooseImage({
-						count: 1, //默认9
-						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-						sourceType: sourceType,
-						success: function(res) {
-							ok(res.tempFilePaths[0])
-						},
-						fail(e) {
-							uni.showModal({
-								title: '文件打开错误',
-								content: '请设置授权文件存储权限',
-								showCancel: false,
-							});
-							error(e)
+						navItem.orderList = navItem.orderList.concat(arr);
+						navItem.page++;
+						if (navItem.limit == arr.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
 						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
 					});
-				})
 
 			},
-
-			// 实名认证
-			confirm(e) {
-				const that = this;
-				if (!that.updata.avatar) {
-					uni.showModal({
-						title: '错误',
-						content: '请上传头像',
-						showCancel: false,
-					});
-					return
-				}
-				
-				if (!that.updata.name) {
-					uni.showModal({
-						title: '错误',
-						content: '请填写姓名',
-						showCancel: false,
-					});
-					return
-				}
-				if (!that.updata.cardId) {
-					uni.showModal({
-						title: '错误',
-						content: '请填写身份证号',
-						showCancel: false,
-					});
-					return
-				}else if(!isCardNo(that.updata.cardId)){
-					uni.showModal({
-						title: '错误',
-						content: '请填写正确的身份证号',
-						showCancel: false,
-					});
-					return
-				}
-				if (!that.updata.phone) {
-					uni.showModal({
-						title: '错误',
-						content: '请填写手机号',
-						showCancel: false,
-					});
-					return
-				}
-				if (!that.updata.timetype.code) {
-					uni.showModal({
-						title: '错误',
-						content: '请选择收费时间类型',
-						showCancel: false,
-					});
-					return
-				}
-				if (!that.updata.minMoney) {
-					uni.showModal({
-						title: '错误',
-						content: '请填写最低收费价',
-						showCancel: false,
-					});
-					return
-				}
-				if (!that.updata.maxMoney) {
-					uni.showModal({
-						title: '错误',
-						content: '请填写最高收费价',
-						showCancel: false,
-					});
-					return
-				}
-				if (that.updata.onCity.length==0) {
-					uni.showModal({
-						title: '错误',
-						content: '请选择服务区域',
-						showCancel: false,
-					});
-					return
-				}
-				if (that.updata.checkedType.length==0) {
-					uni.showModal({
-						title: '错误',
-						content: '请选择服务内容',
-						showCancel: false,
-					});
-					return
+			navTo(url) {
+				if (url) {
+					if (url.indexOf('http') > -1) {
+						// #ifdef H5
+						window.location.href = url
+						// #endif
+						// #ifdef APP
+						plus.runtime.openURL(url)
+						// #endif
+					} else {
+						uni.navigateTo({
+							url: url
+						})
+					}
 				}
-				that.loding = true;
-				subInfoAudit({
-						avatar:that.updata.avatar,
-						name:that.updata.name,
-						mobile:that.updata.phone,
-						idcard:that.updata.cardId,
-						service_type:that.updata.timetype.code,
-						service_min_price:that.updata.minMoney,
-						service_max_price:that.updata.maxMoney,
-						service_area:that.updata.onCity.map((arr)=>{
-							return arr.district
-						}),
-						service_project:that.updata.checkedType,
-						service_intro_content:that.updata.mymask,
-						service_intro_imgs:that.updata.imageList,
-						work_year:that.updata.work_year,
-						ancestral_place:that.updata.ancestral_place,
-						education:that.updata.education,
-						minority:that.updata.minority,
-						service_audit_imgs:that.updata.service_audit_imgs,
-						service_imgs:that.updata.service_imgs,
-						user_work_type_id:that.updata.word.id,
-					})
-					.then((e) => {
-						that.loding = false;
-						this.$api.msg(e.msg);
-					})
-					.catch(err => {
-						this.loding = false;
-						console.log(err);
-					});
 			}
-		}
+		},
 	};
 </script>
 
 <style lang="scss">
-	.content,
-	page {
+	page,
+	.indexBox {
+		height: auto;
 		min-height: 100%;
 	}
 
-	.content {
-		padding-bottom: 150rpx;
-	}
-
-	.item-name {
-		margin: $page-row-spacing;
-		font-size: $font-lg;
-		font-weight: bold;
-		color: $font-color-dark;
-	}
-
-	.con_box {
-		margin: $page-row-spacing;
-
-		.con_image {
-			width: 150rpx;
-			height: 150rpx;
-			display: inline-block;
-			margin-right: 20rpx;
-			position: relative;
-
-			.img {
-				width: 100%;
-				height: 100%;
-			}
-
-			.tip {
-				position: absolute;
-				top: -10rpx;
-				right: -10rpx;
-				width: 30rpx;
-				height: 30rpx;
-				background-color: #FFF;
-				border-radius: 99rpx;
-			}
-		}
-	}
-
-	.listBox {
-		margin: $page-row-spacing;
-		margin-top: 30rpx;
-		border-radius: 20rpx;
-		overflow: hidden;
-		background-color: #FFFFFF;
-	}
-
-	.list {
-		.input {
-			text-align: right;
-			font-size: $font-base;
-			color: $color-gray;
-			width: 100%;
-		}
-
-		.listItem {
-			padding: 35rpx 40rpx;
-			border-bottom: 1px solid $page-color-light;
-		}
+	.hot-list-box {
+		padding: $page-row-spacing;
+		padding-bottom: 0;
 
-		.listIconImg {
-			width: 36rpx;
-		}
+		.list-box {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			align-items: flex-start;
+			padding-bottom: 20rpx;
 
-		.right {
-			color: $font-color-light;
-			font-size: $font-base;
-			flex-grow: 1;
-			justify-content: flex-end;
+			.list {
+				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+				border-radius: 15rpx;
 
-			.timetype {
-				width: 100%;
-				justify-content: flex-end;
-			}
+				.list-image-box {
+					width: 330rpx;
+					height: 420rpx;
+					overflow: hidden;
 
-			.citylist {
-				.del {
-					color: $color-red;
-					font-size: $font-sm;
-					border: 1px solid $color-red;
-					border-radius: 10rpx;
-					line-height: 1;
-					padding: 5rpx 15rpx;
+					.list-image {
+						width: 100%;
+					}
 				}
-			}
 
-			.img {
-				width: 26rpx;
-			}
-
-			.buttom {
-				color: $base-color;
-				border: 1px solid $base-color;
-				border-radius: 10rpx;
-				line-height: 1;
-				padding: 10rpx 20rpx;
-			}
-		}
+				.list-content {
+					padding: 20rpx;
+					line-height: 1;
+					.list-title {
+						color: $font-color-dark;
+						font-size: $font-base;
+						margin-bottom: 10rpx;
+					}
 
-		.titleBox {
-			.title {
-				color: $font-color-base;
-				font-size: $font-base;
+					.list-money {
+						.money {
+							font: $font-lg;
+							color: #FF3342;
+						}
+					}
+				}
 			}
 		}
 	}
-
-	.bg-gray {
-		background-color: $color-gray;
-	}
-
-	.base-buttom {
-		position: fixed;
-		bottom: 30rpx;
-		right: 0rpx;
-		left: 0rpx;
-	}
 </style>