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.id)" 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.name}}
						</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="http://139.9.103.171:1888/miniofile/cyzhyc/d31d50fd-eb42-4131-9eb0-baf8eebc5357-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;">
			<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
		</view>
	
	</view>
</template>

<script>
	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:{
			goods,hotConsult,loading
		},
		data() {
			return {
				isloading:false,
				//开门设备列表
				device_list: [],
				background: {
					backgroundColor: '#e54d42',
				},
				noticeList:[],
				
				modalShow:false,
				
				userInfo:{},
				jsCode:'',
				openid:'',
				sessionKey:'',
				isFirst:false,
				
				goodsList:[],
				isIPX:false,
				//广告轮播图
				swiperIndex: 0,
				plot: null,
				plotArray: [],
				//小区名字
				plotIndex: 0,
				residentialIdList: [] ,//小区id
				
				adList: [
					{
					  'videoType': 0,
					  'videoUri': "http://139.9.103.171:1888/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.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.getRoomByMemberId()
			}
		},
		onLoad(options) {
			that=this
			//处理进入小程序的场景
			that.handelShare(options)
			this.isFirst=true
			//拉取后台用户信息
			this.getOpenId();
			this.isIPX=uni.getStorageSync('isIPX')
			//获取轮播列表
			this.getAdList();
			//获取推荐商品列表
			this.fetchGoodsList()
		},
		methods: {
			fetchAuthRecordNum(){
				try{
					let memberId=app.globalData.member.id
					let residentialId=uni.getStorageSync("residentialId");
					console.log(residentialId,"11111111")
					if (!this.$isEmpty(memberId)) {
						let params={
							member_id:memberId,
							residential_id:residentialId,
							size:99,
							auditStatus:0
						}
						this.$http.getGuestRecordsByMemberId(params).then(res =>{
							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(id){
				//直接开门
				that.openDoor(id)
				//进度条加载模式开门
				// this.isloading=true
				// let that=this
				// setTimeout(()=>{
				// 	that.openDoor(id)
				// },500)
			},
			//立即开门
			openDoor: function (id) {
				 let device_id=id
				 let that = this;
				 let params = {};
				 params['member_id'] = app.globalData.member.id;
				 params['device_id'] = device_id;
				 // let operation = 'member/openDoor';
				 that.$http.openDoor(params).then(res =>{
					 that.isloading=false
					 app.globalData.oneFailHint(res.data.result_msg,function(){
					 });
					
				 });
			},
			getAuthDevice: function () {
			  let that = this;
			  let params = {};
			  params['member_id'] = app.globalData.member.id;
			  params['residential_id'] =  uni.getStorageSync("residentialId");
			  // let operation = 'member/getAuthDeviceByMemberId';
			  that.$http.getAuthDeviceByMemberId(params).then (res =>{
				  console.info("设备列表:" ,res.data); //获取成功
				  if (res.data.result_code == 1) {
				    let list = [];
				    if (uni.getStorageSync('plotName')) {
				      res.data.list.map(item => {
				  		if (item.residentialId.indexOf(uni.getStorageSync('residentialId'))>=0) {
				  			list.push(item);
				  		}
				      });
				    } else {
				  	 console.log(res.data.list)
				      list = res.data.list;
				    }
				   console.log(list)
				   that.setData({
				  	device_list: list
				    });
				    app.globalData.device_list = 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(",")
					//从小程序二维码进入
					console.log(scene+">>>>>>>>>>>>>>>");
					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
					console.log(url);
					uni.redirectTo({
						url:url
					})
				}
				
				
				if(!this.$isEmpty(options.source)){
				}
				//二维码扫描链接 end
				
				//点击转发卡片进入的小程序
				this.execParam();
				
				wx.showShareMenu({
				  withShareTicket: true
				})
			},
			tab(index){
				console.log(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();
				console.log(indexProduct,"/****");
				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.getRoomByMemberId()]).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 => {
			    console.log(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=>{
					 //获取成功
					 that.noticeList = res.data.noticeList;				 
				});
			},
			//获取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;
					console.log("aaaaaaaaaaaaaaaaaaaa")
			        // let operation = 'miniprogram/getOpenid'; //发起请求
			        that.$http.getOpenid(params).then(res=>{
						console.log(JSON.stringify(res)+"?******")
						//获取成功
						if (res.data.result_code == 1) {
												  console.log("获取openid成功");
						  //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=>{
						console.log(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.tel);
				    that.$u.vuex('vuex_member',res.data.member)
				    app.globalData.anyHousePass = res.data.anyHousePass; //获取房屋列表
				    _this.getRoomByMemberId();
				    _this.getAuthDevice()
					_this.fetchAuthRecordNum() 
				  } 
			},
			/**
			 * 游客登陆
			 */
			async touristLogin() {
			  // 检查是否登录
			  this.isLogin = this.$auth.isAuth
			  console.log(this.$auth.isAuth);
			  if (!this.$auth.isAuth) { // 就算是游客，也重新登录
			    console.log('需要使用游客身份，执行游客登录!')
			    let resp = await this.$api.touristLogin()
				console.log("Resp",resp);
			    let userType = this.$global.userType.tourist
			    this.$auth.login(userType, resp.sessionId, resp.userId, resp)
			    console.log('游客登录成功!', resp)
			  } else {
			    console.log(`已登录!`)
			  }
			},
			//根据会员id获取我的房屋列表
			getRoomByMemberId: function () {
			  let that = this;
			  let params = {};
			  // console.log("app:"+)
			  params['member_id'] = app.globalData.member.id;
			  // let operation = 'estate/getRoomByMemberId';
			  this.$http.getRoomByMemberId(params).then(res => {
				  console.info("获取成功" , res.data); //获取成功
				  let list = [];
				  let doorNeedAuditList=[]
				  let residentialIdList = [];
				  let personTelList=[]
				  
				  if (res.data.result_code == 1) {
				  	that.fetchNoticeList(res.data.list[0].residentialId);
				  	app.globalData.userId=res.data.list[0].userId
				     res.data.list.map(item => {
				      if (list.indexOf(item.residentialName) == -1) {
				        list.push(item.residentialName);
				  	  doorNeedAuditList.push(item.doorNeedAudit)
				        residentialIdList.push(item.residentialId);
				  	  personTelList.push(item.personTel)
				      }
				    });
				    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
			  }
			  
			   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].id)
						 }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.getRoomByMemberId()
				    }
				    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>