CommunityApp/pages/index/index.vue

<template>
	<view class="content">
		<view class="">
<!-- 			<view  class="cu-modal" :class="modalShow?'show':''"  @tap="modalShow=false">
				<view  class="cu-dialog" @tap.stop="">
					<view class="bg-white" style="height: 20rpx;"></view>
					<radio-group  class="block" @change="RadioChange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in device_list" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub margin-left-sm">{{item.name}}</view>
									<radio class="roundn blue" :class="doorValue==item.id?'checked':''" :checked="doorValue==item.id?true:false"
									 :value="item.id"></radio>
								</label>
							</view>
						</view>
					</radio-group>
					<view class="bg-white" style="height: 120rpx;"></view>
				</view>
			</view> -->
			<loading  isFullScreen color="#2f7ff5" :active="isloading" text="开门中..."></loading>
			<u-navbar :is-back="false" title=" ">
				<view class="slot-wrap">
					<picker @change="typeChange" :value="plotIndex" :range="plotArray">
					  <view class="padding-left-20 ">
					  	<u-icon name="map" size="34"></u-icon>
					  	<text class="padding-left-sm " style="font-size: 34rpx;">{{plot?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="jump('../notice/detail')" :swiperTexts="swiperTexts"></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: 100rpx;height: 100rpx;" :src="modalShow?'../../static/grid1/kaisuo1.png':'../../static/grid1/kaisuo0.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-orange badge" v-if="item.badge>0">{{item.badge}}</view>
					</view>
				</view>
				<view v-if="modalShow==true" class="flex justify-around margin-top-30" >
					<view @click="open" 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/grid1/kaimen.png"/>
						<view class="text-center padding-top-20" 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="/static/banner.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view >
			<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,
				modalShow:false,
				//开门设备列表
				doorValue:'',
				device_list: [],
				
				background: {
					backgroundColor: '#e54d42',
				},
				swiperTexts:[
					{
						title:'疫情期间，出入小区请佩戴好口罩，配合门卫大叔做好测温登记工作。谢谢大家的配合。'
					},
					{
						title:'停水停电通知。市政通水设施突发性故障抢修，本小区供水压力暂受影响，敬请做好储水准备，预约影响时间2020年11月28号22时至11月29号16时，由此给您带来不便，敬请谅解。'
					},
					{
						title:'2020年10月1日-2020年10月8日，中秋 国庆节放假，假期间需注意,祝国庆节玩的开心。'
					},
					{
						title:'疫情期间，出入小区请佩戴好口罩，配合门卫大叔做好测温登记工作。谢谢大家的配合。'
					}
				],
				
				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/abcd.png"
					},
				],
				elements: [{
					title: '防疫登记',
					name: '在线防疫登记',
					color: '#e3f5ff',
					icon: '../../static/home/fanyi1.png',
					index:6
				}, {
					title: '物业缴费',
					name: '在线物业缴费',
					color: '#e9f9f3',
					icon: '../../static/home/jiaofei.png',
					index:7
				},
				{
					title: '物业报修',
					name: '在线物业报修',
					color: '#ffefef',
					icon: '../../static/home/baoxiu1.png',
					index:8
				}, {
					title: '更多服务',
					name: '更多智慧服务',
					color: '#eeeeee',
					icon: '../../static/home/more.png',
					index:99
				}],
				gridList2:[
					{
						icon:'../../static/grid1/kaisuo.png',
						title:"A区",
						badge:0,
						index:1
					},
					{
						icon:'../../static/grid1/kaisuo.png',
						title:"D区",
						badge:0,
						index:1
					},
				],
				gridList:[
					{
						icon:'../../static/grid1/fangwu.png',
						title:"我的房屋",
						badge:0,
						index:1
					},
					{
						icon:'../../static/grid1/renyuan.png',
						title:"家庭成员",
						badge:0,
						index:2
					},
					{
						icon:'../../static/grid1/kaisuo1.png',
						title:"开门",
						badge:0,
						index:5
					},
					{
						icon:'../../static/grid1/cheliang.png',
						title:"我的车辆",
						badge:0,
						index:3
					},
					{
						icon:'../../static/grid1/fangke1.png',
						title:"访客授权",
						badge:0,
						index:4
					},
					
				]
			}
		},
		onShow() {
			//处理进入小程序的不同场景
			this.execParam();
			this.loadData()
			//每次打开此页面都把商品数组打乱
			this.$u.randomArray(this.goodsList)
			if(this.isFirst){
				this.isFirst=false
			}else{
				this.getRoomByMemberId()
			}
		},
		onLoad(options) {
			that=this
			//处理进入小程序的场景
			this.handelShare(options)
			this.isFirst=true
			//拉取后台用户信息
			this.getOpenId();
			this.isIPX=uni.getStorageSync('isIPX')
			//获取轮播列表
			this.getAdList();
			//获取推荐商品列表
			this.fetchGoodsList()
		},
		methods: {
			open(){
				//进度条加载
				this.isloading=true
				let that=this
				setTimeout(()=>{
					that.openDoor()
				},2300)
			},
			//立即开门
			openDoor: function (event) {
				 // let device_id = event.currentTarget.dataset.device_id;
				 let device_id=this.doorValue
				 let that = this;
				 let params = {};
				 params['member_id'] = app.globalData.member.id;
				 params['device_id'] = device_id;
				 let operation = 'member/openDoor';
				 app.globalData.postRequest(params, operation, function (res) {
					 that.isloading=false
				   app.globalData.oneFailHint(res.data.result_msg,function(){
					   that.modalShow=false
				   });
				 });
			},
			getAuthDevice: function () {
			  let that = this;
			  let params = {};
			  params['member_id'] = app.globalData.member.id;
			  let operation = 'member/getAuthDeviceByMemberId';
			  app.globalData.postRequest(params, operation, function (res) {
			    console.info("查询结果:" + res.data.result_msg); //获取成功
			
			    if (res.data.result_code == 1) {
			      let list = [];
			      if (uni.getStorageSync('plotName')) {
			        res.data.list.map(item => {
			          if (item.name.indexOf(uni.getStorageSync('plotName')) >= 0) {
			            list.push(item);
			          }
			        });
			      } else {
					 console.log(res.data.list)
			        list = res.data.list;
			      }
				 console.log(list)
				 that.setData({
					device_list: list
				  });
				 console.log(that.device_list)
				 if(!that.$isEmpty(that.device_list)){
					 that.doorValue=that.device_list[0].id
				 }
			      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(e){
				this.e = e;
				console.log(12,e)
				//二维码扫描链接 start
				if(e != null && e.q != null){
					let url = decodeURIComponent(e.q);
					let param = {};
					// 把参数按&拆分成数组
					let index = url.indexOf("?");
					let query = url.substring(index+1,index.length);
					var param_arr = query.split("&");
					for (var i = 0; i < param_arr.length; i++) {
					    var pair = param_arr[i].split("=");
					    param[pair[0]]=pair[1];
					}
					if(param['type'] == "share"){
						let path = 'pagesM/pages/goods_des';
						let params = `id=${param['id']}&storeId=${param['storeId']}&inviteCode=${param['inviteCode']}`
						let url = `${path}?${params}`;
						console.error("url = " + url);
						this.e = null;
						uni.navigateTo({url: url});
					}
				}
				//二维码扫描链接 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();
				this.goodsList=indexProduct[1].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];
			
			    uni.removeStorageSync("plotName");
			    uni.removeStorageSync("residentialId");
			    uni.setStorageSync("plotName", value);
			    uni.setStorageSync("residentialId", residentialId);
				
				
			    _this.setData({
			      plotIndex: e.detail.value,
			      plot: value
			    });
				
			  }).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
			        });
			      }
			    }
			  });
			},
			//获取openid
			getOpenId: function () {
			  var openid = uni.getStorageSync("openid");
			  console.info("缓存中获取的openid=" + openid);
			  var that = this;
			  if (openid == null || openid == '') {
			    uni.login({
			      success: res => {
			        let params = {};
			        params['js_code'] = res.code;
					that.jsCode=res.code
			        let operation = 'miniprogram/getOpenid'; //发起请求
			        app.globalData.postRequest(params, operation, function (res) {
			          //获取成功
			          if (res.data.result_code == 1) {
						  console.log("获取openid成功")
			            //openid存入缓存
			            uni.setStorageSync("openid", res.data.openid);
						that.openid=res.data.openid
						that.sessionKey=res.data.sessionKey
			            that.getMemberByOpenid(res.data.openid);
			          } else {
			            app.globalData.oneFailHint(res.data.result_msg);
			          }
			        });
			      }
			    });
			  } else {
			    that.getMemberByOpenid(openid);
			  }
			},
			//根据openid获取用户信息
			getMemberByOpenid: function (openid) {
			  let _this = this;
			  let params = {};
			  params['openid'] = openid;
			  let operation = 'miniprogram/getMemberByOpenid';
			  app.globalData.postRequest(params, operation, function (res) {
			    console.info("getMemberByOpenid==" + res.data.result_msg); //获取成功
			    if (res.data.result_code == 1) {
			      app.globalData.member = res.data.member;
			      app.globalData.anyHousePass = res.data.anyHousePass; //获取房屋列表
			      _this.getRoomByMemberId();
				  _this.getAuthDevice()
			    } else {
					
			    }
			  });
			},
			/**
			 * 游客登陆
			 */
			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 = {};
			  params['member_id'] = app.globalData.member.id;
			  let operation = 'estate/getRoomByMemberId';
			  app.globalData.postRequest(params, operation, function (res) {
			    console.info("获取成功" + res.data.result_msg); //获取成功
			    let list = [];
				
			    let residentialIdList = [];
			    if (res.data.result_code == 1) {
					app.globalData.userId=res.data.list[0].userId
			      res.data.list.map(item => {
			        if (list.indexOf(item.residentialName) == -1) {
			          list.push(item.residentialName);
			          residentialIdList.push(item.residentialId);
			        }
			      });
			
			      if (list.length < 1) {
			        uni.removeStorageSync("plotName");
			        uni.removeStorageSync("residentialId");
			      } else {
			        //获取本地储存的当前所在小区
			        let plot = that.plot;
			        if (uni.getStorageSync('plotName')) {
			          plot = uni.getStorageSync('plotName');
			          that.setData({
			            plot: plot
			          });
			        } else {
			          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.residentialId=residentialIdList[index]
					  residentialList.push(tmp)
				  })
				  uni.setStorage({
				  	key:"residentialList",
					data:residentialList
				  })
				  console.log();
			      that.setData({
			        plotArray: list,
			        residentialIdList: residentialIdList
			      });
			    }
			  });
			},
			top: function (index) {
			 if (index==5) {
				 if (this.$isEmpty(this.device_list)) {
				 	uni.showToast({
				 		title:"暂无设备",
						icon:"none"
				 	})
					return
				 }
				 this.modalShow=!this.modalShow
			 	 return
			 }
			  if (index==99) {
				  //查看更多
				  uni.navigateTo({
				  	url:"../tool-list/tool-list"
				  })
				  return
			  }
			  var that = this;
			    var member = app.globalData.member;
			    var anyHousePass = app.globalData.anyHousePass; //会员认证状态：{ 0：未认证，1：待审审核，2：已认证 }
			    if (member == null) {
			      //去注册
				  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:
			          //我的车辆
			          uni.showToast({
			          	title:"待开发",
						icon:"none"
			          })
			          break;
			        case 4:
			          //访客授权
			          url = '/pages/authorize_record/authorize_record';
			          break;
			        case 5:
					  //一键开门
					  uni.switchTab({
					  	url:"../device/device"
					  })
			          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;
			        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';
			  app.globalData.postRequest(params, operation, function (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('亲，你的信息已审核通过');
			      }
			      app.globalData.member = member;
			      app.globalData.anyHousePass = res.data.anyHousePass;
			    } else {
			      app.globalData.oneFailHint(res.data.result_msg);
			    }
			  });
			}
		}
	}
</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>