partnerApp/pages/my/my.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>

		<!-- 头部信息Start -->
		<view class="prodet-intro d-flex" v-show="prodetIntroShow">
			<view class="icon iconfont icon-notice d-flex a-center j-center"></view>
			<view class="u-f1">
				<p class="animate">掌柜爆款百万医疗！众安尊享e生2020版，最高300万一般医疗保障，100种重疾+121种罕见病医疗最高600万保障，四大增值服务，一年低至136元起！点击了解>>
				</p>
			</view>
			<view class="icon iconfont icon-cuo d-flex a-center j-center" @tap="controlProdetIntro"></view>
		</view>
		<view class="home-info d-flex">
			<view class="mystatus d-flex a-center j-center">{{userInfo.sysUser.status=='1'?'已认证':'未认证'}}</view>
			<image :src="avatar" mode="aspectFill" @tap="popupShow = true"></image>
			<view class="person-info" @tap="openDetail">
				<h3>{{userInfo.sysUser.name}}</h3>
				<p>你身边最贴心、最权威的保险咨询专家【个性化签名】</p>
			</view>
		</view>
		<!-- 头部信息End -->
		<!-- 我的订单Start -->
		<scroll-view scroll-x class="my-orders">
			<view :style="'width: calc(((690upx)/4)*'+orderTypeList.length+')'">
				<uni-grid :column="orderTypeList.length" :show-border="false" :square="false" @change="openOrder"
					style="width: 100%;height:100%">
					<uni-grid-item style="width: calc((690upx)/4)" class="d-flex a-center j-center"
						v-for="(item ,index) in orderTypeList" :index="index" :key="index">
						<view style="width: calc((690upx)/4)"
							class="grid-item-box d-flex a-center j-center flex-column">
							<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor"></view>
							<text class="text">{{item.text}}</text>
							<view v-if="item.badge" class="grid-dot" v-show="item.badge>0">
								<uni-badge :text="(item.badge>99)?'99+':item.badge" :type="item.type" size="small"
									:inverted="false" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</scroll-view>
		<!-- 我的订单End -->

		<!-- 广告轮播 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true"
				indicator-active-color="#ffffff" :indicator-dots="swiperList.length>1">
				<swiper-item v-for="swiper in swiperList" :key="swiper.sid">
					<image mode="aspectFill" :src="swiper.img" lazy-load></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 广告End -->

		<!-- 我的钱包Start -->
		<view class="my-wallet">
			<view class="header d-flex a-center j-sb">
				<view>我的钱包</view>
				<span @tap="toWallet" style="font-size: 24upx;color: #333;">更多</span>
			</view>
			<view class="wallet-body d-flex">
				<view class="flex-1" @tap="toBillDetails(1)">
					<view class="d-flex a-center j-center">预收账户</view>
					<view style="color: #33AAEE;" class="d-flex a-center j-center">￥{{advanceMoney}}</view>
				</view>
				<view class="flex-1" @tap="toBillDetails(2)">
					<view class="d-flex a-center j-center">可提现余额</view>
					<view style="color: #33AAEE;" class="d-flex a-center j-center">￥{{withdrawal}}</view>
				</view>
				<view class="flex-1" @tap="toBillDetails(3)">
					<view class="d-flex a-center j-center">推广费</view>
					<view style="color: #DA4452;" class="d-flex a-center j-center">￥{{extendMoney}}</view>
				</view>
			</view>
		</view>
		<!-- 我的钱包End -->

		<!-- 我的工具Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>我的工具</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(324upx)" class="swiper" :indicator-dots="(toolsListLength!=1)?true:false">
					<swiper-item class="swiper" v-for="(count,cindex) of  toolsListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
							@change="toTools($event,'toolsList')">
							<uni-grid-item class="d-flex a-center j-center"
								v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)" v-for="(item ,index) in toolsList"
								:index="index" :key="item.text">
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor">
									</view>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 我的工具End -->

		<!-- 售后管理Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>售后管理</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(serviceListLength!=1)?true:false">
					<swiper-item class="swiper" v-for="(count,cindex) of  serviceListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
							@change="toTools($event,'serviceList')">
							<uni-grid-item class="d-flex a-center j-center"
								v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"
								v-for="(item ,index) in serviceList" :index="index" :key="item.text">
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor">
									</view>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 售后管理End -->

		<!-- 我的关于Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>关于掌柜</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(aboutListLength!=1)?true:false">
					<swiper-item class="swiper" v-for="(count,cindex) of  aboutListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
							@change="toTools($event,'aboutList')">
							<uni-grid-item class="d-flex a-center j-center"
								v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)" v-for="(item ,index) in aboutList"
								:index="index" :key="item.text">
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor">
									</view>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 我的关于End -->

		<!-- 菜单Start -->
		<block v-for="(item,index) in menusList" :key="index">
			<my-list-item :item="item" :index="index"></my-list-item>
		</block>
		<!-- 菜单End -->

		<!-- 头像预览Start -->
		<z-popup v-model="popupShow" :hideOnBlur="false" type="center" width="600upx" radius="12upx">
			<view class="popup_title">
				<text @click="popupShow = false">取消</text>
				<view>头像预览</view>
				<text @click="changeAvatar">更换</text>
			</view>
			<view class="popup_content">
				<view class="body d-flex a-center j-center">
					<image :src="avatar" mode="aspectFill" @longtap="saveAvatar"></image>
				</view>
			</view>
		</z-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import zPopup from '@/components/common/z-popup.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import myListItem from "@/components/modules/my/my-list-item.vue";
	export default {
		components: {
			zPopup,
			myListItem
		},

		data() {
			return {
				popupShow: false, //头像是否展示
				mystatusText: "已认证",
				prodetIntroShow: true, //显示滚动公告
				advanceMoney: '0', // 预收账户金额
				withdrawal: '0', //可提现金额
				extendMoney: '0', //推广费

				//轮播
				swiperList: [{
					sid: 0,
					src: '自定义src0',
					img: '/static/image/my/ads/ban1.png'
				}],

				orderTypeList: [{
						icon: 'icon-jixurenwu',
						orderstatus: 0,
						text: '报价中',
						badge: '0',
						type: "primary",
						orderStage: 0,
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-hebaozhong',
						orderstatus: 1,
						text: '待核保',
						badge: '0',
						type: "success",
						orderStage: 1,
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-querenzhifu',
						orderstatus: 2,
						text: '待缴费',
						badge: '0',
						type: "error",
						orderStage: 2,
						iconColor: '#DD525E'
					},
					{
						icon: 'icon-peisong',
						orderstatus: 3,
						text: '已承保',
						badge: '0',
						type: "error",
						orderStage: 3,
						iconColor: '#0696FF'
					},
				],
				toolsList: [{
						icon: 'icon-shandian',
						text: '闪电增员',
						url: '/pages/tools/addStaff/addStaff',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-tuanduiguanli',
						text: '团队管理',
						url: '/pages/tools/team/team',
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-kehuguanli',
						text: '客户管理',
						url: '/pages/tools/customer/customer',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-yejiguanli',
						text: '业绩管理',
						url: '/pages/tools/achievement/achievement',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-20xiaoshifuwurexian',
						text: '报案服务',
						url: '/pages/tools/insuranceClaims/insuranceClaims',
						iconColor: '#DD525E'
					},
					{
						icon: 'icon-qianbao',
						text: '钱包',
						url: '/pages/wallet/wallet',
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-baodan',
						text: '保单',
						url: '/pages/tools/policy',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-jisuanqi',
						text: '计算器',
						url: '/pages/tools/calculator/calculator',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-xiaomishu',
						text: '掌柜秘书',
						url: '/pages/tools/messageReminder/messageReminder',
						iconColor: '#DD525E'
					},
					{
						icon: 'icon-xiaomishu',
						text: '海报管理',
						url: '/pages/tools/poster/poster',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-xiaomishu',
						text: '优惠劵',
						url: '/pages/tools/coupon/coupon',
						iconColor: '#0696FF'
					}
				],
				aboutList: [{
						icon: 'icon-yejiguanli',
						text: '常见问题',
						url: '/pages/set/question',
						iconColor: '#0696FF'
					},
					// { icon: 'icon-baodan',text: '意见反馈',url:'/pages/set/suggest',iconColor:'#DD525E'},
					{
						icon: 'icon-baodan',
						text: '意见反馈',
						url: '',
						iconColor: '#DD525E'
					},
					{
						icon: 'icon-yongjinguanli',
						text: '联系客服',
						tel: '4006333016',
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-qianbao',
						text: '关于我们',
						url: '/pages/set/about',
						iconColor: '#0696FF'
					}
				],
				serviceList: [{
						icon: 'icon-yejiguanli',
						text: '发票申请',
						popup: '请加微信15513511113,联系客服操作',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-yongjinguanli',
						text: '保单批改',
						popup: '请加微信15513511113,联系客服操作',
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-qianbao',
						text: '申请退保',
						popup: '请加微信15513511113,联系客服操作',
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-qianbao',
						text: '自助理赔',
						popup: '请加微信15513511113,联系客服操作',
						iconColor: '#0696FF'
					}
				],
				menusList: [{
						icon: "shangcheng",
						name: "掌柜商场",
						clicktype: "nothing",
						url: "",
						auth: true
					},
					{
						icon: "chexiandingdan",
						name: "车险之家",
						clicktype: "navigateTo",
						url: "/pages/carInsure/entry",
						auth: true
					}
				]
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.navigateTo({
					url: "/pages/set/set"
				})
			}
		},
		computed: {
			...mapState(['avatar', 'userInfo', "userCheckInfo"]),

			toolsListLength() {
				return Math.ceil(this.toolsList.length / 8);
			},
			aboutListLength() {
				return Math.ceil(this.aboutList.length / 4);
			},
			serviceListLength() {
				return Math.ceil(this.serviceList.length / 4);
			}
		},
		onShow() {
			if (this.userInfo.sysUser.status == '1') {
				this.mystatusText = "已认证";
			} else if (this.userStatus == '2') {
				this.mystatusText = "未认证";
			}
		},
		async onload() {
			await this.getAdvanceMoney(); //预收金额
			await this.getPayAccount(); //可提现余额
			await this.getExtendMoney(); //推广费
			await this.getOrderNum(); //获取订单数量
		},
		methods: {
			...mapMutations(['setUserModules', 'setOrderType', 'setOrderStage']),
			//获得订单数量
			async getOrderNum() {
				console.log(this.userInfo)
				var data = {
					"columnFilters": {
						"orderstatus": {
							"name": "orderstatus",
							"value": ""
						},
						"userid": {
							"name": "userid",
							// "value": this.userInfo.sysUser.id
						},
						"quotestatus": {
							"name": "quotestatus",
							"value": '1'
						}
					},
					"pageNum": 1,
					"pageSize": 1
				};
				for (let i = 0; i < this.orderTypeList.length; i++) {
					data.columnFilters.orderstatus.value = this.orderTypeList[i].orderstatus;
					let res = await this.$http.post('/insOrder/findPage', data, {
						load: false
					});
					// 请求失败处理
					if (res.code == 200) {
						this.orderTypeList[i].badge = res.data.totalSize;
					} else {
						this.orderTypeList[i].badge = '0';
					}
				}
			},

			// 预收账户金额查询
			async getAdvanceMoney() {
				let res = await this.$http.get('/insPayApply/advanceAccount?userid=', {}, {
					load: false
				});
				// 请求失败处理
				if (res.code == 200) {
					this.advanceMoney = res.data;
				} else {
					this.advanceMoney = '0';
				}
			},

			// 可提现余额查询
			async getPayAccount() {
				let res = await this.$http.get('/insPayApply/payAccount?userid=', {}, {
					load: false
				});
				// 请求失败处理
				if (res.code == 200) {
					this.withdrawal = res.data.accountBalance;
				} else {
					this.withdrawal = '0';
				}
			},

			//推广费
			async getExtendMoney() {
				let res = await this.$http.get('/insPayApply/extendAccount?userid=', {}, {
					load: false
				});
				// 请求失败处理
				if (res.code == 200) {
					this.extendMoney = res.data.accountBalance;
				} else {
					this.extendMoney = '0';
				}
			},

			// 广告滚动
			controlProdetIntro() {
				this.prodetIntroShow = !this.prodetIntroShow;
			},

			//保存头像
			saveAvatar() {
				var that = this;
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: that.avatar,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						})
					}
				})
			},

			//修改头像
			async changeAvatar() {
				let [err, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (!chooseImageRes) return;
				const isLt2M = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 2;
				if (!isLt2M) {
					return uni.showToast({
						title: '上传图片大小不能超过 2MB!',
						icon: "none"
					});
				}
				// 上传
				pathToBase64(chooseImageRes.tempFilePaths[0])
					.then(async base64 => {
						var paramImg = {
							"imgList": [base64],
							"imgtype": "avatar",
							"taskid": "",
						}
						let res = await this.$http.post('/insTaskImage/save', paramImg);
						if (res.code == 200) {
							this.setUserModules({
								title: 'avatar',
								data: base64
							})
							uni.showToast({
								title: '更换头像成功!',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '更换头像失败!',
								icon: 'none',
								duration: 2000
							});
						}
					})
			},

			//去工具页面
			toTools(e, listName) {
				if (!!this[listName][e.detail.index].url && (this[listName][e.detail.index].url ==
						'/pages/wallet/wallet')) {
					if ((!!this.userInfo.esmUserInternal) && (!!this.userInfo.esmUserInternal.accountno)) {
						this.navigate({
							url: this[listName][e.detail.index].url
						}, "navigateTo", true)
					} else {
						this.navigate({
							url: '/pages/wallet/bindBank',
							complete: () => {
								setTimeout(() => {
									uni.showToast({
										title: '请先绑定银行卡',
										duration: 3000,
										icon: "none"
									});
								}, 500);

							}
						}, "navigateTo", true)
					}
				} else if (this[listName][e.detail.index].url) {
					this.navigate({
						url: this[listName][e.detail.index].url
					}, "navigateTo", true)
				} else if (this[listName][e.detail.index].tel) {
					uni.makePhoneCall({
						phoneNumber: this[listName][e.detail.index].tel,
					})
				} else if (this[listName][e.detail.index].popup) {
					uni.showModal({
						showCancel: false,
						content: this[listName][e.detail.index].popup,
					});
				} else {
					uni.showToast({
						title: this[listName][e.detail.index].text + '更新中...',
						icon: 'none'
					})
				}

			},

			// 去账单明细
			toBillDetails(type) {
				this.navigate({
					url: "/pages/wallet/billDetails" + type
				}, "navigateTo", true)
			},
			// 去账单明细
			toWallet(type) {
				this.navigate({
					url: "/pages/wallet/wallet"
				}, "navigateTo", true)
			},
			//跳转个人信息页面
			openDetail() {
				this.navigate({
					url: "/pages/user/userInfo"
				}, "navigateTo", false)
			},
			//跳转订单页面
			openOrder(e) {
				let index = e.detail.index;
				this.setOrderStage(this.orderTypeList[index].orderStage);
				this.navigate({
					url: "/pages/orders/orders"
				}, "switchTab", true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background-color: #FEFEFE;
	}

	/* 产品介绍Start */
	.prodet-intro {
		width: 100%;
		height: 70upx;
		background-color: #333;
		color: #3ae;
		white-space: nowrap;
		border-top: 1upx solid #666;
		border-bottom: 1upx solid #666;
		box-sizing: border-box;
	}

	.prodet-intro>view:nth-of-type(1) {
		width: 60upx;
		height: 100%;
		flex-shrink: 1;
		padding-left: 20upx;
		font-size: 36upx;
	}

	.prodet-intro>view:nth-of-type(2) {
		overflow: hidden;
		line-height: 70upx;
		font-size: 24upx;
	}

	.prodet-intro>view:nth-of-type(3) {
		width: 60upx;
		padding-right: 20upx;
		flex-shrink: 1;
		height: 100%;
		font-size: 36upx;
	}

	.animate {
		padding-left: 40rpx;
		display: inline-block;
		white-space: nowrap;
		animation: 20s wordsLoop linear infinite normal;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(750rpx);
			-webkit-transform: translateX(750rpx);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	/* 产品介绍End */

	/* 头像预览Start */
	.popup_box {
		width: 100%;
	}

	.popup_title {
		display: flex;
		justify-content: space-between;
		height: 88upx;
		line-height: 88upx;
		border-bottom: 2upx solid #ebebeb;
		padding: 0 20upx;
		background-color: #FFF;
	}

	.popup_title view {
		font-size: 32upx;
		display: flex;
		align-items: center;
	}

	.popup_title text {
		width: 80upx;
		flex-shrink: 0;
		text-align: center;
	}

	.popup_title text {
		font-size: 28upx;
		color: #999;
	}

	.popup_title text:last-child {
		color: $themeColor;
	}

	.popup_content {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		text-align: center;
	}

	.popup_content .body image {
		width: 300upx;
		height: 300upx;
	}

	/* 头像预览End */

	/* 个人信息Start */
	.home-info {
		height: 243upx;
		padding-top: 25upx;
		/* background: #343740; */
		background: url(/static/image/my/infoBg.jpg) no-repeat 50%;
		background-size: 100% 100%;
		color: #FFFFFF;
		position: relative;
	}

	.home-info .mystatus {
		position: absolute;
		top: 100upx;
		left: 45upx;
		border-radius: 20upx;
		z-index: 10;
		font-size: 20upx;
		height: 35upx;
		width: 100upx;
		background-color: #007AFF;
	}

	.home-info>image {
		width: 110upx;
		height: 110upx;
		margin: 0upx 20upx 0upx 40upx;
		border-radius: 50%;
		flex-shrink: 1;
	}

	.home-info .person-info {
		display: inline-block;
		width: 70%;
		vertical-align: top;
		padding-top: 5upx;
		color: #fff;
	}

	.home-info .person-info>p {
		font-size: 24upx;
		line-height: 30upx;
		opacity: .4;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 个人信息End */

	/* 我的订单Start */
	.my-orders,
	.wallet-body {
		position: relative;
		width: 690upx;
		height: 180upx;
		margin: -80upx 30upx 0upx;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0upx 0upx 10upx #efeff4;
		overflow: hidden;
	}

	.my-orders .grid-item-box {
		padding: 20upx 0;
	}

	.my-orders .grid-item-box .icon {
		width: 60upx;
		height: 70upx;
		font-size: 55upx;
		color: #1396DB;
		margin-bottom: 15upx;
	}

	.my-orders .grid-item-box .text {
		font-size: 24upx;
		color: #666666;
	}

	/* 我的订单End */

	/* 我的钱包Start */
	.wallet-body {
		margin-top: 0upx;
		padding: 20upx 20upx 0;
		box-sizing: border-box;
	}

	.wallet-body>view {
		flex-shrink: 1;
	}

	.wallet-body>view>view {
		line-height: 65upx;
	}

	.wallet-body>view>view:nth-of-type(1) {
		font-size: 24upx;
	}

	.wallet-body>view>view:nth-of-type(2) {
		font-size: 28upx;
		font-weight: bold;
	}

	/* 我的钱包End */

	/* 小的分项标题Start */
	.header {
		margin-top: 30upx;
		height: 50upx;
		padding: 0upx 50upx;
		font-size: 28upx;
		line-height: 50upx;
		margin-bottom: 10upx;
	}

	.header>view:nth-of-type(1) {
		font-weight: bold;
	}

	.header>view:nth-of-type(2) {
		font-size: 24upx;
		color: #BBBBBB;
	}

	.header>view:nth-of-type(2) .icon {
		font-size: 20upx;
	}

	/* 小的分项标题End */

	.order-body {
		margin: 15upx 30upx;
		box-shadow: 0upx 0upx 10upx #efeff4;
		border-radius: 20upx;
	}

	.grid-item-box {
		flex: 1;
		padding: 20upx 0;
	}

	.grid-item-box .icon {
		width: 60upx;
		height: 70upx;
		font-size: 50upx;
		color: #1396DB;
	}

	.grid-item-box .text {
		font-size: 24upx;
		color: #666666;
	}

	.grid-dot {
		position: absolute;
		top: 20upx;
		right: 25upx;
		background-color: none;
	}

	.swiper {
		width: 100%;
	}

	.swiper-view .keep-out {
		width: 100%;
		height: 30upx;
		border-radius: 100% 100% 0 0;
		margin-top: -15upx;
		position: absolute;
	}

	.swiper-view .swiper {
		overflow: hidden;
		padding: 30upx 20upx 0;
		box-sizing: border-box;
		width: 100%;
		height: 200upx;
	}

	.swiper-view .swiper image {
		width: 100%;
		height: 200upx;
	}
</style>