CommunityApp/pages/index/index.vue

<template>
	<view class="content">
		<view class="">
			<loading isFullScreen color="#2f7ff5" :active="isloading" text="开门中..."></loading>
			<u-navbar :is-back="false" title=" ">
				<view class="slot-wrap">
					<view v-if="$isEmpty(plot)" class="padding-left-20" @click="$u.toast('暂无小区信息')">
						<u-icon name="map-fill" color="#2f7ff5" size="34"></u-icon>
						<text class="padding-left-sm " style="font-size: 34rpx;">暂无小区信息</text>
					</view>
					<picker v-else @change="typeChange" :value="plotIndex" :range="plotArray">
						<view class="padding-left-20 ">
							<u-icon name="map-fill" color="#2f7ff5" size="34"></u-icon>
							<text class="padding-left-sm " style="font-size: 34rpx;">{{plot}}</text>
						</view>
					</picker>
				</view>
			</u-navbar>
			<!-- 头图 -->
			<swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in adList" :key="index">
					<image v-if="item.videoType==0" :src="item.videoUri" mode="aspectFill"></image>
					<video v-if="item.videoType==1" :src="item.videoUri" autoplay loop muted :show-play-btn="false"
						:controls="false" objectFit="cover"></video>
				</swiper-item>
			</swiper>
			<view class="">
				<view class="bg-white" style="height: 10rpx;"></view>
				<hotConsult @onTap="jump('../notice/notice')" @detailTap="goNoticeDetail" :swiperTexts="noticeList">
				</hotConsult>
			</view>

			<view style="background-color: #FFFFFF;">
				<view style="padding: 30rpx 30rpx 0 30rpx;">
					<text class="text-bold text-lg">智慧社区</text>
				</view>
				<view style="padding: 40rpx 10rpx 0rpx;" class="cu-list grid col-5 no-border">
					<view class="cu-item" :class="item.index==5?'img1-lg':''" @click="top(item.index)"
						v-for="(item,index) in gridList" :key="index">
						<block v-if="item.index==5">
							<view class="grid-icon">
								<image style="width: 88rpx;height: 88rpx;"
									:src="modalShow?'../../static/home/open4.png':'../../static/home/open4.png'" />
							</view>
							<text style="color: #333333;font-size: 30rpx;font-weight: 800;">{{item.title}}</text>
						</block>
						<block v-else>
							<view class="grid-icon">
								<image style="width: 48rpx;height: 48rpx;" :src="item.icon" />
							</view>
							<text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
						</block>
						<view class="cu-tag bg-red badge" v-if="item.badge>0">{{item.badge}}</view>
					</view>
				</view>

				<!-- 设备列表 -->
				<view v-if="modalShow" class="flex justify-around margin-top-10">
					<view @click="open(item)" v-for="(item,index) in device_list" :key="index"
						style="flex-direction: column;" class="flex justify-center align-center">
						<image style="width: 60rpx;height: 60rpx;" src="/static/kaimen.png" />
						<view class="text-center padding-top-20 text-cut-1" style="font-size: 24rpx;">
							{{item.deviceName}}
						</view>
					</view>
				</view>

			</view>
			<view class="nav-list bg-white padding-top-20">
				<view hover-class="none" @click="top(item.index)" class="nav-li light" navigateTo
					:style="{backgroundColor:item.color}" v-for="(item,index) in elements" :key="index">
					<view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
					<view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}</view>
					<image :src="item.icon" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bg-white">
			<image src="/static/common/banner.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view v-if="!this.$isEmpty(goodsList)">
			<view class="tj-title">
				<view class="">
					<text class="text-lg text-bold">为您推荐</text>
					<text class="sub-title">有料</text>
					<text class="sub-title">好物</text>
					<text class="sub-title">有优惠</text>
				</view>
				<view class="sub-title" style="color: #969696;padding-top: 8rpx;font-size: 24rpx;"
					@click="jump('/pages/life/life','type')">
					<text>查看更多></text>
				</view>
			</view>
			<view>
				<goods :goodsList="goodsList"></goods>
			</view>
		</view>
		<view style="height: 80rpx;" v-if="fasle">
			<u-divider bgColor="#f1f1f1;" height="80">到底了</u-divider>
		</view>
		<login ref="login" @signIn="signIn"></login>
		<bindHome v-if="vuex_member" @reload="onshow"></bindHome>
	</view>
</template>

<script>
	import bindHome from "@/comps/bindHome.vue"
	import login from "@/comps/login.vue"
	import loading from "@/comps/loading/loading.vue"
	import hotConsult from "@/comps/hot-consult/hot-consult.vue"
	import goods from "@/comps/goods/goods.vue"
	var app = getApp();
	let that;
	export default {
		components: {
			bindHome,
			login,
			goods,
			hotConsult,
			loading
		},
		data() {
			return {
				isloading: false,
				//开门设备列表
				device_list: [],
				background: {
					backgroundColor: '#e54d42',
				},
				noticeList: [],

				modalShow: false,

				userInfo: {},
				jsCode: '',
				openid: '',
				sessionKey: '',
				isFirst: false,

				goodsList: [],
				isIPX: false,

				residentialIdList: [], //小区id

				//广告轮播图
				swiperIndex: 0,
				plot: null,
				plotArray: [],
				//小区名字
				plotIndex: 0,
				adList: [{
					'videoType': 0,
					'videoUri': "https://szsq.nxzhsq.cn/community/miniofile/app/banner.jpg"
				}, ],
				elements: [{
						title: '防疫登记',
						name: '在线防疫登记',
						color: '#e3f5ff',
						icon: '../../static/home/fanyi1.png',
						index: 6
					},
					{
						title: '健康码',
						name: '通行防疫码',
						color: '#e5eef9',
						icon: '../../static/home/health.png',
						index: 9
					},

					{
						title: '物业报修',
						name: '在线物业报修',
						color: '#ffefef',
						icon: '../../static/home/baoxiu1.png',
						index: 8
					},
					{
						title: '物业缴费',
						name: '在线物业缴费',
						color: '#e9f9f3',
						icon: '../../static/home/jiaofei.png',
						index: 7
					},
					// {
					// 	title: '更多服务',
					// 	name: '更多智慧服务',
					// 	color: '#eeeeee',
					// 	icon: '../../static/home/more.png',
					// 	index:99
					// }
				],
				gridList: [{
						icon: '../../static/home/fangwu.png',
						title: "我的房屋",
						badge: 0,
						index: 1
					},
					{
						icon: '../../static/home/renyuan.png',
						title: "家庭成员",
						badge: 0,
						index: 2
					},
					{
						icon: '../../static/home/open4.png',
						title: "开门",
						badge: 0,
						index: 5
					},
					{
						icon: '../../static/home/cheliang.png',
						title: "我的车辆",
						badge: 0,
						index: 3
					},
					{
						icon: '../../static/home/fangke1.png',
						title: "访客授权",
						badge: this.vuex_auth_audit_count,
						index: 4
					},

				]
			}
		},
		onShow() {
			this.onshow()
		},
		onLoad(options) {
			that = this
			//处理进入小程序的场景
			that.handelShare(options)
			this.isFirst = true
			//拉取后台用户信息
			this.isIPX = uni.getStorageSync('isIPX')
			//获取轮播列表
			this.getAdList();
			//获取推荐商品列表
			// this.fetchGoodsList()
		},
		methods: {
			onshow(){
				this.login()
				// this.fetchNoticeList()
				//获取访客授权待审核的数量
				if (this.canReset) this.fetchAuthRecordNum()
				this.canReset = true
				
				//获取设备列表
				this.getAuthDevice()
				
				//处理进入小程序的不同场景
				this.execParam();
				// this.loadData()
				//每次打开此页面都把商品数组打乱
				// this.$u.randomArray(this.goodsList)
				if (this.isFirst) {
					this.isFirst = false
				} else {
					this.getResidentialListByMember()
				}
			},
			signIn() {
				this.getOpenId();
			},
			/**
			 * 做个假登录
			 */
			login() {
				if (!this.vuex_isAuth) {
					this.plot = ''
					this.noticeList = []
					this.$refs.login.show()
				} else {
					this.signIn()
				}
			},
			fetchAuthRecordNum() {
				try {
					let memberId = app.globalData.member.id
					let residentialId = uni.getStorageSync("residentialId");
					if (!this.$isEmpty(memberId)) {
						let params = {
							member_id: memberId,
							residential_id: residentialId,
							size: 99,
							auditStatus: 0
						}
						this.$http.getGuestRecordsByMemberId(params).then(res => {
							if (this.$isNotEmpty(res.data.list)) {
								let length = res.data.list.length
								that.$u.vuex('vuex_auth_audit_count', length)
								that.gridList.forEach(item => {
									if (item.index == 4) {
										item.badge = length
									}
								})
							}

						})
					}
				} catch (e) {

				}
			},
			open(item) {
				//直接开门
				that.openDoor(item)
				//进度条加载模式开门
				// this.isloading=true
				// let that=this
				// setTimeout(()=>{
				// 	that.openDoor(id)
				// },500)
			},
			//立即开门
			openDoor(item) {
				let params = {
					memberId: app.globalData.member.id,
					serialNum: item.deviceSerialNum,
					deviceFactory: item.deviceFactory,
					residentialId: item.residentialId,
					userType: 'ZH_'
				}
				this.$http.openDoor(params).then(res => {
					this.isloading = false
					if (res.data.success) {
						this.$u.toast('开门成功')
					} else {
						this.$u.toast('开门失败')
					}
				});
			},
			getAuthDevice: function() {
				let that = this;
				let params = {};
				let member=app.globalData.member
				if (this.$isEmpty(member) 
					|| member.state !=2
					|| this.$isEmpty(uni.getStorageSync("residentialId"))) {
					return
				}
				params['id'] = app.globalData.member.id;
				params['residentialId'] = uni.getStorageSync("residentialId");
				that.$http.getAuthDeviceByMemberId(params).then(res => {
					if (res.data.success) {
						this.device_list = res.data.data
						app.globalData.device_list = this.device_list
					}
				});
			},
			async loadData(options) {
				//进入小程序时进行游客登陆，
				//以免直接进入商品详情时会提示用户未授权
				await this.$nextTick(function() {
					this.touristLogin()
				})
			},
			getParam(e) {
				// 用来保存所有的属性名称和值
				let param = "";
				// 开始遍历
				for (let p in e) {
					// 方法
					if (typeof(e[p]) != "function" && p != 'type') {
						// p 为属性名称，e[p]为对应属性的值
						param += (param.length > 1 ? '&' : '') + p + "=" + e[p];
					}
				}
				// 最后显示所有的属性
				return param;
			},
			execParam() {
				let _this = this;
				if (this.e != null) {
					setTimeout(function() {
						if (_this.e == null) return;
						if (_this.e.type == "share") {
							let path = _this.e.path == null || _this.e.path.length <= 0 ?
								'pagesM/pages/goods_des' : '/' + _this.e.path;
							let param = _this.getParam(_this.e);
							let url = `${path}?${param}`;
							console.error("url = " + url);
							_this.e = null;
							uni.navigateTo({
								url: url
							});
						}
					}, 1000);
				}
			},
			handelShare(options) {
				//二维码扫描链接 start
				if (!this.$isEmpty(options.scene)) {
					let scene = decodeURIComponent(options.scene).split(",")
					//从小程序二维码进入
					let path = "/pagesM/pages/goods_des"
					let params = "?id=" + scene[0] + "&storeId=" + scene[1]
					if (!this.$isEmpty(scene[2])) {
						params = params + "&inviteCode=" + scene[2]
					}
					let url = path + params
					uni.redirectTo({
						url: url
					})
				}
				if (!this.$isEmpty(options.source)) {}
				//二维码扫描链接 end

				//点击转发卡片进入的小程序
				this.execParam();

				wx.showShareMenu({
					withShareTicket: true
				})
			},
			tab(index) {},
			jump(url, type) {
				if (!this.$isEmpty(type)) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			/**
			 * 获取商品推荐列表
			 */
			async fetchGoodsList() {
				let indexProduct = await this.$api.storeHomeProducts();
				this.goodsList = indexProduct[0].products
				this.$u.randomArray(this.goodsList)
			},
			//轮播圆点
			bindchange(e) {
				this.setData({
					swiperIndex: e.detail.current
				});
			},
			//改变小区
			typeChange: function(e) {
				let _this = this;
				Promise.all([_this.getResidentialListByMember()]).then(result => {
					let value = _this.plotArray[e.detail.value];
					let residentialId = _this.residentialIdList[e.detail.value];
					_this.fetchNoticeList(residentialId);
					let residentialList = uni.getStorageSync('residentialList')

					uni.setStorageSync("personTel", residentialList[e.detail.value].personTel);
					uni.setStorageSync("plotName", value);
					uni.setStorageSync("residentialId", residentialId);
					uni.setStorageSync('doorNeedAudit', residentialList[e.detail.value].doorNeedAudit)


					_this.setData({
						plotIndex: e.detail.value,
						plot: value
					});

					//更新设备列表
					_this.getAuthDevice()

				}).catch(error => {});
			},
			//一键开门
			goOpen: function() {
				var that = this;
				var member = app.globalData.member;
				var anyHousePass = app.globalData.anyHousePass; //会员认证状态：{ 0：未认证，1：待审审核，2：已认证 }
				if (member == null) {
					//未注册
					app.globalData.footaddmore();
					return;
				} else if (member.state == 0 && !anyHousePass) {
					//未认证
					app.globalData.choosePlot();
					return;
				} else if (member.state == 1 && !anyHousePass) {
					//待审核
					that.pending();
					return;
				} else if (member.state == 2 || anyHousePass) {
					//已认证
					uni.navigateTo({
						url: '/pages/oneButton/oneButton'
					});
				}
			},
			/**
			 * 获取轮播图列表
			 */
			getAdList: function() {
				let that = this;
				let params = {};
				let operation = 'adPushApp/getList';
				// app.globalData.postRequest(params, operation, function (res) {
				//   //获取成功
				//   if (res.data.result_code == 1) {
				//     let adList = res.data.list;
				//     if (adList && adList.length > 0) {
				//       that.setData({
				//         adList: adList
				//       });
				//     }
				//   }
				// });
			},
			fetchNoticeList(id) {
				let that = this
				let operation = 'notice/noticeList'
				let params = {}
				params.residentialId = id;
				that.$http.getNoticeList(params).then(res => {
					//获取成功
					let list = res.data.data;
					if (this.$isEmpty(list)) {
						list = [{
							title: '暂无社区公告',
							content: '暂无社区公告'
						}]
					}
					that.noticeList = list
				});
			},
			//获取openid
			getOpenId: function() {
				var that = this;
				uni.login({
					success: res => {
						let params = {};
						params['js_code'] = res.code;
						params['name'] = 'community';
						params['app_type'] = 1;
						that.jsCode = res.code;
						// let operation = 'miniprogram/getOpenid'; //发起请求
						that.$http.getOpenid(params).then(res => {
							//获取成功
							if (res.data.result_code == 1) {
								//openid存入缓存
								uni.setStorageSync("openid", res.data.openid);
								uni.setStorageSync("appletType", res.data.appletType);
								that.$u.vuex('vuex_appletType', res.data.appletType);
								that.openid = res.data.openid
								that.sessionKey = res.data.sessionKey

								that.getMemberByOpenid(res.data.openid);
							} else {

								app.globalData.oneFailHint(res.data.result_msg);
							}

						}).catch(err => {});
					}
				});
			},
			//根据openid获取用户信息
			async getMemberByOpenid(openid) {
				let _this = this;
				let params = {};
				params['openid'] = openid;
				// let operation = 'miniprogram/getMemberByOpenid';
				let res = await this.$http.getMemberByOpenid(params)
				if (res.data.result_code == 1) {
					app.globalData.member = res.data.member;
					uni.setStorageSync("myPhone", res.data.member.phone);
					that.$u.vuex('vuex_member', res.data.member)
					app.globalData.anyHousePass = res.data.anyHousePass; //获取房屋列表
					_this.getResidentialListByMember();
					_this.getAuthDevice()
					_this.fetchAuthRecordNum()
					_this.getOwnRoomList()
				}else{
					uni.removeStorageSync("personTel");
					uni.removeStorageSync("plotName");
					uni.removeStorageSync("residentialId");
					uni.removeStorageSync("doorNeedAudit");
					uni.removeStorageSync("myPhone");
					uni.removeStorageSync("residentialList");
				}
			},
			getOwnRoomList(){
				let params={
					memberId:this.vuex_member.id
				}
				this.$http.getHouseUserCondition(params).then(res=>{
					let list=res.data.data
					list.forEach(item=>{
						item.address=item.residentialName+"-"+item.buildingName+"-"+item.unitName+"-"+item.roomName
					})
					getApp().globalData.own_room_list = list;
					this.$u.vuex('vuex_own_room_list',list)
				})
			},
			/**
			 * 游客登陆
			 */
			async touristLogin() {
				// 检查是否登录
				this.isLogin = this.$auth.isAuth
				if (!this.$auth.isAuth) { // 就算是游客，也重新登录
					let resp = await this.$api.touristLogin()
					let userType = this.$global.userType.tourist
					this.$auth.login(userType, resp.sessionId, resp.userId, resp)
				} else {
					console.log(`已登录!`)
				}
			},
			//根据会员id获取我的房屋列表
			getResidentialListByMember: function() {
				let that = this;
				let params = {};
				if (this.$isEmpty(app.globalData.member)) {
					return
				}
				params['id'] = app.globalData.member.id;
				this.$http.getResidentialListByMember(params).then(res => {
					if (this.$isEmpty(res.data.data)) {
						return
					}
					let list = [];
					let doorNeedAuditList = []
					let residentialIdList = [];
					let personTelList = []
					
					if (res.data.success) {
						that.fetchNoticeList(res.data.data[0].residentialId);
						app.globalData.userId = res.data.data[0].userId
						
						res.data.data.forEach(item=>{
							list.push(item.name);
							doorNeedAuditList.push(item.doorNeedAudit)
							residentialIdList.push(item.id);
							personTelList.push(item.personPhone)
						})
						if (list.length < 1) {
							uni.removeStorageSync("personTel");
							uni.removeStorageSync("plotName");
							uni.removeStorageSync("residentialId");
							uni.removeStorageSync("doorNeedAudit");
						} else {
							//获取本地储存的当前所在小区
							let plot = that.plot;
							if (uni.getStorageSync('plotName')) {
								plot = uni.getStorageSync('plotName');
								that.setData({
									plot: plot
								});
							} else {
								uni.setStorageSync("personTel", personTelList[0]);
								uni.setStorageSync("doorNeedAudit", doorNeedAuditList[0]);
								uni.setStorageSync("plotName", list[0]);
								uni.setStorageSync("residentialId", residentialIdList[0]);
								that.setData({
									plot: list[0]
								});
							}
						}
						let residentialList = []
						list.forEach((item, index) => {
							let tmp = {}
							tmp.residentialName = item
							tmp.personTel = personTelList[index]
							tmp.residentialId = residentialIdList[index]
							tmp.doorNeedAudit = doorNeedAuditList[index]
							tmp.estateTel = doorNeedAuditList[index]
							residentialList.push(tmp)
						})
						uni.setStorage({
							key: "residentialList",
							data: residentialList
						})
						//为 小区 picker 设置默认项
						let defaultPlotId = uni.getStorageSync("residentialId")
						if (!that.$isEmpty(defaultPlotId)) {
							that.plotIndex = residentialIdList.indexOf(defaultPlotId)
						}
						that.setData({
							plotArray: list,
							residentialIdList: residentialIdList
						});
					}

				});
			},
			/**
			 * 跳转
			 * @param {Object} index 当前项的index属性,而不是当前项的下标
			 */
			top: function(index) {
				if (index == 99) {
					//查看更多
					uni.navigateTo({
						url: "../tool-list/tool-list"
					})
					return
				}
				if (index == 9) {
					uni.navigateToMiniProgram({
						appId: 'wx2eec5fb00157a603',
					})
					return
				}
				if (!this.vuex_isAuth) {
					this.plot = ''
					this.noticeList = []
					this.$refs.login.show()
					return
				}

				var that = this;
				var member = app.globalData.member;
				var anyHousePass = app.globalData.anyHousePass; //会员认证状态：{ 0：未认证，1：待审审核，2：已认证 }
				if (this.$isEmpty(member)) {
					//去注册
					uni.navigateTo({
						url: "../empty/empty"
					})
					return
				} else if (member.state == 0 && !anyHousePass) {
					//去认证
					uni.navigateTo({
						url: "../empty/empty?type=2"
					})
					return
				} else if (member.state == 1 && !anyHousePass) {
					//待审核
					that.pending();
				} else if (member.state == 2 || anyHousePass) {
					//已认证
					//获取页面传过来的值
					var url;
					switch (index) {
						case 1:
							//我的家人  
							url = '/pages/myhome/myhome';
							break;
						case 2:
							//家庭成员
							url = '/pages/myFamily/myFamily';
							break;
						case 3:
							//我的车辆
							url = "/pages/myCar/myCar";
							break;
						case 4:
							//访客授权
							url = '/pages/authorize_record/authorize_record';
							break;
						case 5:
							if (this.$isEmpty(this.device_list)) {
								uni.showToast({
									title: "暂无设备",
									icon: "none"
								})
								return
							}
							if (this.device_list.length == 1) {
								this.open(this.device_list[0])
							} else {
								this.modalShow = !this.modalShow
							}
							break;
						case 6:
							//防疫登记
							url = '/pages/tool-list/epidemic-pass/epidemic-pass';
							break;
						case 7:
							//物业缴费
							uni.showToast({
								title: "待开发",
								icon: "none"
							})
							break;
						case 8:
							//物业报修
							url = '/pages/services/property/property';
							break;
						case 9:

							// url = '/pages/healthCode/healthCode';
							break;
						default:
							url = "";
							break;
					}
					if (url != '') {
						uni.navigateTo({
							url: url,
							success: function(res) {
								that.setData({
									firstJump: false
								});
							}
						});
					}
				}
			},
			openBluetoothAdapter: function() {
				uni.openBluetoothAdapter({
					success: function(res) {
						uni.navigateTo({
							url: "/pages/bluetooth/bluetooth"
						});
					},
					fail: function(res) {
						uni.showModal({
							content: '请开启手机蓝牙后再试'
						});
					}
				});
			},
			//用户信息待审核中
			pending: function() {
				var openid = uni.getStorageSync("openid");
				let params = {};
				params['openid'] = openid;
				// let operation = 'miniprogram/getMemberByOpenid';
				this.$http.getMemberByOpenid(params).then(res => {
					//获取成功
					if (res.data.result_code == 1) {
						let member = res.data.member; //待审核
						if (member.state == 1 && !res.data.anyHousePass) {
							app.globalData.oneFailHint('亲，你的信息正在审核，请耐心等待');
						} else if (member.state == 2) {
							app.globalData.oneFailHint('亲，你的信息已审核通过');
							that.getResidentialListByMember()
						}
						app.globalData.member = member;
						app.globalData.anyHousePass = res.data.anyHousePass;
					} else {
						app.globalData.oneFailHint(res.data.result_msg);
					}

				});
			},
			goNoticeDetail(item) {
				app.globalData.noticeDetail = item
				uni.navigateTo({
					url: "../notice/detail",
				})
			}
		}
	}
</script>

<style lang="scss">
	.img1-lg {
		margin-top: -80rpx;
	}

	.location_item {
		background-color: #FFFFFF;
		display: flex;
		padding: 30rpx;
		font-size: 32rpx;
	}

	.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.tj-title {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;

		.sub-title {
			font-size: 26rpx;
			padding-left: 16rpx;
			color: #c7c7c7;
		}
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.nav-li {
		padding: 30upx 20rpx;
		border-radius: 12upx;
		width: 40%;
		margin: 20rpx 1% 10upx;
		// background-image: url(/static/unicorn-base/index/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li image {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 70upx;
		height: 70upx;
		text-align: center;
		line-height: 60upx;
	}
</style>