applet/uni-app/问星数据.../pages/index/index.vue

<template>
	<view class="content">
		<view class="headerBox">
		  <swiper class="swiperBox" :indicator-dots="bannerList.length>1?true:false"
		    indicator-active-color="#fff"
		    indicator-color="rgba(255,255,255,.2)"
		    circular="true"
		    :style="'height:'+(isIPhoneX?'574rpx':'534rpx')"
		    :autoplay="true" interval="3000">
		    <swiper-item style="height:auto;" v-for="(item,index) in bannerList" :key="index">
		      <image :src="item.small_url" v-if="!isIPhoneX" mode="widthFix" :data-info="item" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')"></image>
		      <image v-else :src="item.big_url"  mode="widthFix" :data-info="item" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')"></image>
		    </swiper-item>
		  </swiper>
		  <view class="searchView" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')" style="top:110rpx;">
		    <view class="searchBox">
		      <image src="../../static/img/search.png"/>
		      <input placeholder="搜索视频号、趋势、标签、视频动态" disabled placeholder-class="input"  type='text' confirm-type="search"/>
		    </view>
		  </view>
		</view>
		<view class="panel">
			
		<view class="modular">
		  <view class="modular_item" @click="openPage">
			<image src="../../static/img/new.png" mode="widthFix" class="new_icon"></image>
			<image src="../../static/img/tuiguang.png" mode="widthFix"></image>
			<text>视频号冷启动</text>
		  </view>
		  <view class="modular_item" @click="openWxApplet('weixin://dl/business/?t=MORR0T2Seih')">
			<image src="/static/img/newlive.png" mode="widthFix"></image>
			<text>正在直播</text>
		  </view>
		  <view class="modular_item" @click="openWxApplet('weixin://dl/business/?t=iXIeePBxa0b')">
			<image src="/static/img/live.png" mode="widthFix"></image>
			<text>直播监控</text>
		  </view>
		  <view class="modular_item" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')">
			<image src="/static/img/fans.png" mode="widthFix"></image>
			<text>消息订阅</text>
		  </view>
		  <view class="modular_item" @click="openWxApplet('weixin://dl/business/?t=vh7GswoTCIa')">
			<image src="/static/img/qu.png" mode="widthFix"></image>
			<text>趋势查询</text>
		  </view>
		</view>
		<view class="myList" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')">
			<image src="../../static/img/sph.png"></image>
			我的视频号
			<view class="text">随时随地查看我的视频号</view>
			<image mode="widthFix" src="../../static/img/jt_right.png"></image>
		</view>
		<view @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')" style="padding-bottom:20rpx;margin-bottom:22rpx" class="myItem">
			<image class="shouquan" style="width:100%" mode="widthFix" src="../../static/img/shouquan.png"></image>
		</view>
		<view class="hotModule hotVideo">
			<view class="title">
				<view class="left">
				  <image src="../../static/img/video.png" mode="widthFix"></image>
				  <text>热门视频</text>
				</view>
				<view class="right" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')" data-page="/pages/cyRank/index" data-type="1">
				  <text>查看全部</text>
				  <image src="../../static/img/jt_right.png" mode="widthFix" class="jt"></image>
				</view>
			</view>
			<!-- <scroll-view  class="hotVideoInfo"> -->
			<scroll-view :scroll-x="true" class="hotVideoInfo">
				<view class="item" v-for="(item,index) in hotVideoList" :key="index" :data-item="item" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')">
				  <image :src="item.cover_url?item.cover_url:item.head_url" mode="aspectFill" class="videoImg"></image>
				  <text class="videoDesc">{{item.description?item.description:'-'}}</text>
				</view>
			</scroll-view>
		</view>
		
		<view class="hotModule">
			  <view class="title">
				<view class="left">
				  <image src="../../static/img/title_topic.png" mode="widthFix"></image>
				  <text>标签话题</text>
				</view>
				<view class="right" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')">
				  <text>查看全部</text>
				  <image src="../../static/img/jt_right.png" mode="widthFix" class="jt"></image>
				</view>
			  </view>
			  <view class="hotTopic">
				<view class="topicInfo" v-for="(item,index) in videoTopicsList" :key="index" @click="openWxApplet('weixin://dl/business/?t=o3aIVwrmPmt')">
				  <view class="topicName">
					<image src="../../static/img/topic.png" mode="widthFix"></image>
					<span>{{item.topic_name?item.topic_name:'-'}}</span>
				  </view>
				  <view class="topicData">
					平均点赞:<span>{{(item.like_count_avg)}}</span>
				  </view>
				  <view class="topicData">
					参与视频号:<span>{{(item.red_count)}}</span>
				  </view>
				</view>
			  </view>
			</view>
		<view class="bottom">问星数据·视频号数据平台</view>
		</view>
		<tab-bar :current='0'></tab-bar>
		<applet-mask v-if="appletMaskFlag" @closeMask='closeMask'></applet-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				hotVideoList: [],
				videoTopicsList: [],
				isIPhoneX:1,
				appletMaskFlag:false
			}
		},
		onLoad() {
			this.getBanner()
			this.getVideoHotList()
			this.videoTopics()
		},
		methods: {
			openPage(){
				uni.navigateTo({
					url:'../extension/extension'
				})
			},
			closeMask(){
				this.appletMaskFlag = false
			},
			getBanner(){
				this.$req(this.$api.homeResource,'get',{type: 1},(res) => {
				  if(res && res.errno == 0){
					var res = res.rst;
					this.bannerList = res;
				  }
				},()=>{
				})
			},
			 getVideoHotList(){//热门视频
				this.$req(this.$api.hotList, 'get', {
				  page:1,
				  pagesize:10,
				}, (res) => {
				  if(res && res.errno == 0){
					//成功
					this.hotVideoList = res.rst.data
				  }
				},()=>{
				})
			 },
			 
			   videoTopics(){//标签话题
				 this.$req(this.$api.videoTopics, 'get', {
				   type:3,
				   sort:'like_count_avg'
				 }, (res) => {
				   if(res && res.errno == 0){
					 //成功
					 this.videoTopicsList = res.rst.slice(0,6)
				   }
				 },()=>{
				 })
			   },
			   openWxApplet(scheme){
					var sUserAgent = navigator.userAgent.toLowerCase();
					if(sUserAgent.indexOf("baidu") > 0 || sUserAgent.indexOf("ucbrowser") > 0 ) {
						this.appletMaskFlag = true;
						this.$burialPoint({project_name:'小程序版h5',button_name:'点击打开弹框',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'首页',url_value:window.location.href})
						_hmt?_hmt.push(['_trackEvent','小程序版h5', '点击打开弹框', uni.getStorageSync('key'),'']):'';
					}else{
						if (!navigator.userAgent.toLowerCase().match(/micromessenger/i) && scheme) {
							this.$burialPoint({project_name:'小程序版h5',button_name:'页面按钮直接打开微信',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'首页',url_value:window.location.href})
							_hmt?_hmt.push(['_trackEvent','小程序版h5', '页面按钮直接打开微信', uni.getStorageSync('key'),'']):'';
						   location.href = scheme
						}else{
							this.$burialPoint({project_name:'小程序版h5',button_name:'微信端-点击打开弹框',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'首页',url_value:window.location.href})
							_hmt?_hmt.push(['_trackEvent','小程序版h5', '微信端-点击打开弹框', uni.getStorageSync('key'),'']):'';
							this.appletMaskFlag = true;
						}
					}
			   }
		}
	}
</script>

<style>
	.content {
		background: #F0F0F0;
	}
	.logo{
	  width: 250rpx;
	  position: fixed;
	  left: 0;
	  right: 0;
	  margin: auto;
	  text-align: center;
	  color: #fff;
	  font-size: 32rpx;
	  font-weight: bold;
	  z-index: 2;
	}
	.searchView {
	  width: 584rpx;
	  margin: auto;
	  padding-top: 100rpx;
	  margin-top: 40rpx;
	  height: 76rpx;
	  background: rgba(255,255,255,.3);
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  border-radius: 38rpx;
	  padding: 0 16rpx;
	}
	.searchView .searchBox {
	  width: auto;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.index {
	  overflow: hidden;
	  margin-top: -39rpx;
	  margin-bottom: 100rpx;
	  position: relative;
	  z-index: 1;
	}
	.panel {
	  position: relative;
	  z-index: 10;
	  padding-bottom: 100rpx;
	  background: #F0F0F0;
	  border-top-left-radius: 46rpx;
	  border-top-right-radius: 46rpx;
	  overflow: hidden;
	  margin-top: -39rpx;
	}
	.searchView image {
	  display: inline-block;
	  width: 34rpx;
	  height: 34rpx;
	  margin: 0 20rpx;
	}
	
	.searchView input {
	  /* flex: 1; */
	  display: inline-block;
	  width: 416rpx;
	  height: 76rpx;
	  line-height: 76rpx;
	  font-size: 26rpx;
	  color: #fff;
	  text-align: center;
	}
	.input {
	  color: #fff;
	  font-weight: lighter;
	}
	.modular{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 38rpx 7rpx 30rpx;
	  background: #fff;
	  border-bottom: 2rpx solid rgba(229, 229, 229, .5);
	}
	.myList {
	  width: 100%;
	  height: 96rpx;
	  line-height: 96rpx;
	  display: flex;
	  align-items: center;
	  background: #fff;
	  color: #2E2E2E;
	  font-size: 30rpx;
	  font-weight: bold;
	  padding: 0 46rpx 0 26rpx;
	  /* margin-top: 22rpx; */
	}
	.myList image {
	  width: 32rpx;
	  height: 32rpx;
	  margin-right: 10rpx;
	}
	.myList .text {
	  flex: 1;
	  color: #4B4545;
	  font-weight: lighter;
	  font-size: 26rpx;
	  padding-left: 22rpx;
	}
	.myList image:last-child {
	  width: 12rpx;
	  height: auto;
	  margin: 0;
	}
	.myList .text text {
	    display: inline-block;
	    background: #ffffff;
	    color: #2662FF;
	    border: 1px solid #2662FF;
	    font-size: 22rpx;
	    width: 130rpx;
	    line-height: 40rpx;
	    padding: 0 16rpx;
	    border-radius: 40rpx;
	    text-align: center;
	    margin-left: 12rpx;
	    transform: scale(.8);
	}
	.modular .modular_item{
	  width: 156rpx;
	  /* height: 173rpx; */
	  background: #fff;
	  border-radius: 12px;
	  text-align: center;
	  position: relative;
	}
	.modular .modular_item image{
	  width: 70rpx;
	  height: 70rpx;
	  margin: 0 auto 12rpx;
	  display: block;
	}
	.modular .modular_item .new_icon{
	  width: 44rpx;
	  height: 20rpx;
	  margin: 0;
	  position: absolute;
	  top: -10rpx;
	  right: 20rpx;
	  animation: scaleDraw 2s ease-in-out infinite;
	  -webkit-animation: scaleDraw 2s ease-in-out infinite;
	  z-index: 2;
	}
	@keyframes scaleDraw { 
	  0%{
	      transform: scale(1); 
	  }
	  25%{
	      transform: scale(1.3);
	  }
	  50%{
	      transform: scale(1);
	  }
	  75%{
	      transform: scale(1.3);
	  }
	}
	.modular .modular_item text{
	  color: #000000;
	  font-size: 24rpx;
	  line-height: 40rpx;
	}
	.follw_view {
	  background: #fff;
	  padding-bottom: 26rpx;
	}
	/* 我的视频号轮播数据 */
	.myItemBox {
	  height: 196rpx;
	  margin-bottom: 22rpx;
	}
	.myItemBox .wx-swiper-dots{
	  position:absolute;
	  margin-bottom: 14rpx;
	}
	.wx-swiper-dot {
	  width: 10rpx!important;
	  height: 10rpx!important;
	  border-radius: 10rpx;
	}
	.myItemBox .wx-swiper-dot {
	  width: 20rpx!important;
	  height: 6rpx;
	  border-radius: 4rpx;
	}
	.myItemBox .wx-swiper-dot-active {
	  width: 20rpx;
	  height: 6rpx;
	  border-radius: 4rpx;
	}
	.myItemBox .wx-swiper-dot {
	  width: 20rpx!important;
	  height: 6rpx!important;
	  border-radius: 10rpx;
	}
	.myItem {
	  padding: 0 20rpx;
	  background: #fff;
	}
	.myItem .shouquan {
	  width: 100%;
	  height: auto;
	}
	.myItem .userBox {
	  float: left;
	  /* width: 100%; */
	  width: calc(100% - 27rpx)!important;
	  height: 130rpx!important;
	  border-radius: 14rpx;
	  padding: 0 14rpx;
	  background: #F6E9DD;
	  color: #593E21;
	  display: flex;
	  align-items: center;
	}
	.myItem .userImg {
	  width: 76rpx;
	  height: 76rpx;
	  border-radius: 50%;
	  margin-right: 12rpx;
	}
	.myItem .infoBox {
	  width: 220rpx;
	  color: #000000;
	  font-size: 28rpx;
	  font-weight: bold;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.myItem .userData {
	  flex: 1;
	  padding-right: 20rpx;
	  text-align: center; 
	}
	.myItem .userDataItem {
	  float: left;
	  width: 33.33333%;
	  font-size: 22rpx;
	  overflow: hidden;
	  line-height: 32rpx;
	}
	.myItem .data {
	  display: block;
	  line-height: 38rpx;
	  color: #403333;
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-bottom: 10rpx;
	}
	.swiper{
	  height: 250rpx;
	  display: flex;
	  white-space: nowrap;
	  padding-left: 24rpx;
	}
	.swiper .swiper-item-div{
	  display: inline-block;
	  margin-right: 20rpx;
	}
	.swiper .swiper-item{
	  width: 600rpx;
	  height: 250rpx;
	  margin: auto;
	  display: inline-block;
	  /* background: #FFF3F4; */
	
	  background: #F6F4FD;
	  border-radius: 14rpx;
	  vertical-align: middle;
	}
	.swiper-item-div:nth-child(2n+1) .swiper-item {
	  background: #FFFAF3;
	}
	.swiper-item-div:nth-child(2n) .swiper-item {
	  background: #F6F4FD;
	}
	.swiper .swiper-item .goLogin{
	  width: 128rpx;
	  height: 56rpx;
	  border-radius: 28rpx;
	  border: 2rpx solid #89899C;
	  color: #89899C;
	  font-size: 28rpx;
	  line-height: 54rpx;
	  text-align: center;
	  display:block;
	  margin: auto;
	  margin-top: 62rpx;
	}
	.swiper .swiper-item .add{
	  margin-top: 62rpx;
	  color: #E6CACA;
	  font-size: 106rpx;
	  line-height: 60rpx;
	  font-weight: bold;
	  text-align: center;
	}
	.swiper .swiper-item .hint{
	  margin-top: 44rpx;
	  color: #89899C;
	  font-size: 26rpx;
	  line-height: 36rpx;
	  text-align: center;
	}
	.swiper .swiper-item .hint text{
	  color: #E36C3B;
	}
	.swiper .userBox{
	  position: relative;
	  padding-left: 14rpx;
	  display: flex;
	  align-items: center;
	}
	.swiper .swiper-item .userImg{
	  width: 135rpx;
	  height: 135rpx;
	  border-radius: 50%;
	  margin-right: 10rpx;
	}
	.swiper .swiper-item .info{
	  width: calc(100% - 180rpx);
	  margin-left: 10rpx;
	}
	.swiper .swiper-item .info .userTitleBox{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.swiper .swiper-item .info .userTitleBox .userTitle{
	  max-width: 196rpx;
	  color: #000000;
	  padding-right: 20rpx;
	  font-size: 30rpx;
	  line-height: 40rpx;
	  font-weight: bold;
	  overflow: hidden;    
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.swiper .swiper-item .info .userTitleBox .auth_div{
	  flex: 1;
	  overflow: hidden;
	  text-overflow:ellipsis; 
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	.swiper .swiper-item .info .userTitleBox .auth_div .icon{
	  width: 34rpx;
	  height: 34rpx;
	  vertical-align: middle;
	}
	.swiper .swiper-item .info .userTitleBox .auth_div text{
	  color: #89899C;
	  font-size: 24rpx;
	  line-height: 40rpx;
	  vertical-align: middle;
	}
	.swiper .swiper-item .info .userData{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin-top: 28rpx;
	}
	.swiper .swiper-item .info .userData .userDataItem{
	  text-align: center;
	}
	.swiper .swiper-item .info .userData .userDataItem:nth-child(2) .data {
	   color: #E93269
	 }
	 .swiper .swiper-item .info .userData .userDataItem:first-child {
	  text-align: left;
	 }
	 .swiper .swiper-item .info .userData .userDataItem:last-child {
	  text-align: right;
	 }
	.swiper .swiper-item .info .userData .userDataItem .data{
	  color: #000000;
	  font-size: 32rpx;
	  line-height: 44rpx;
	  font-weight: 600;
	}
	.swiper .swiper-item .info .userData .userDataItem view{
	  color: #89899C;
	  font-size: 26rpx;
	  line-height: 36rpx;
	  margin-top: 6rpx;
	}
	.otherXCX{
	  width: 100%;
	  height: 150rpx;
	  border-radius: 14rpx;
	  margin: auto;
	  display: flex;
	  align-items: center;
	}
	.otherXCX image{
	  width: 112rpx;
	  height: 112rpx;
	  margin-left: 34rpx;
	  margin-right: 44rpx;
	}
	.otherXCX .otherXCX_con{
	  color: #000000;
	  font-size: 26rpx;
	  line-height: 46rpx;
	}
	.otherXCX .otherXCX_con text{
	  color: #2562FF;
	  font-size: 46rpx;
	}
	.hotModule{
	  background: #fff;
	  border-radius: 14rpx;
	  margin-bottom: 28rpx;
	}
	.hotModule:last-child {
	  margin-bottom: 0;
	}
	.hotVideo{
	  margin-top: 18rpx;
	  height: 396rpx;
	  background: #fff;
	  overflow: hidden;
	}
	/* .hotModule  */
	.title{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 46rpx 0 30rpx;
	  height: 80rpx;
	  position: relative;
	  border-bottom: 1rpx solid rgba(229, 229, 229, .5);
	}
	/* .hotModule  */
	.title .left image{
	  width: 32rpx;
	  height: 32rpx;
	  vertical-align: middle;
	  margin-right: 8rpx;
	}
	/* .hotModule  */
	.title .left text{
	  color: #2E2E2E;
	  font-size: 30rpx;
	  height: 42rpx;
	  font-weight: bold;
	  vertical-align: middle;
	}
	/* .hotModule  */
	.title .right{
	  color: #6B6B6B;
	  font-size: 24rpx;
	  line-height: 34rpx;
	  display: flex;
	  align-items: center;
	}
	/* .hotModule  */
	.title .jt{
	  /* display: inline-block; */
	  width: 12rpx;
	  height: 12rpx;
	  /* vertical-align: middle; */
	  margin-left: 10rpx;
	}
	/* .hotModule  */
	.title text{
	  vertical-align: middle;
	}
	.hotVideoInfo{
	  display: flex;
	  white-space: nowrap;
	  margin: 30rpx;
	  margin-bottom: 0;
	  overflow: hidden;
	  padding-right: 30rpx;
	}
	.hotVideoInfo .item{
	  width: 172rpx;
	  margin-right: 20rpx;
	  display: inline-block;
	  vertical-align: top;
	}
	.hotVideoInfo .item .videoImg{
	  width: 172rpx;
	  height: 172rpx;
	  border-radius: 11rpx;
	}
	.hotVideoInfo .item .videoDesc{
	  color: #000000;
	  font-size: 24rpx;
	  line-height: 34rpx;
	  height: 34rpx;
	  width: 168rpx;
	  display: block;
	  overflow: hidden;
	  text-overflow:ellipsis; 
	  white-space: nowrap;
	  margin-top: 14rpx;
	}
	.hotTopic{
	  padding: 30rpx 28rpx 40rpx;
	}
	.hotTopic .topicInfo{
	  display: flex;
	  align-items: center;
	}
	.hotTopic .topicInfo .topicName{
	  padding: 12rpx;
	  padding-left: 0;
	  padding-right: 16rpx;
	  margin-right:20rpx;
	}
	.hotTopic .topicInfo .topicName image{
	  width: 29rpx;
	  height: 29rpx;
	  vertical-align: middle;
	  margin-right: 18rpx;
	}
	.hotTopic .topicInfo .topicName span{
	  color: #000000;
	  font-size: 28rpx;
	  line-height: 40rpx;
	  width: 140rpx;
	  display: inline-block;
	  overflow: hidden;
	  text-overflow:ellipsis; 
	  white-space: nowrap;
	  vertical-align: middle;
	  margin-left: 10rpx;
	}
	.hotTopic .topicInfo .topicData{
	  color: #89899C;
	  font-size: 24rpx;
	  line-height: 34rpx;
	  width: calc((100% - 340rpx) / 2);
	  padding-left: 50rpx;
	}
	.hotTopic .topicInfo .topicData span{
	  color: #000000;
	}
	.tipBox {
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0rpx;
	  left: 0;
	  background: rgba(0,0,0,.7);
	  z-index: 1000;
	}
	.close {
	  display: inline-block;
	  width: 36rpx;
	  height: 36rpx;
	  margin: 10rpx 0 10rpx;
	}
	.tip {
	  width: 360rpx;
	  border-radius: 20rpx;
	  position: fixed;
	  top: 0;
	  right: 90rpx;
	  background: #fff;
	  color: #000;
	  margin-top: 10rpx;
	  z-index: 1001;
	  font-size: 24rpx;
	  line-height: 30rpx;
	  padding: 20rpx 26rpx;
	  text-align: right;
	}
	.tip .main {
	  text-align: left;
	}
	.tipImg {
	  width: 100%;
	  height: auto;
	  margin-top: 20rpx;
	}
	.tip:after {
	  content: "";
	  position: absolute;
	  top: -27rpx;
	  right: 40rpx;
	  border: 16rpx solid transparent;
	  border-bottom-color: #fff;
	}
	.tip text {
	  display: inline-block;
	  color: #2562FF;
	  margin-left: 8rpx;
	}
	.tip .more {
	  display: inline-block;
	  width: 40rpx;
	  height: auto;
	  border-radius: 12rpx;
	  vertical-align: middle;
	}
	.headerBox{
	  width: 100%;
	  height: auto;
	  position: relative;
	  z-index: 1;
	  background: #2562FF;
	  margin-top: -100rpx;
	}
	.swiperBox {
	  width: 100%;
	  height: 520rpx;
	}
	.swiperBox .wx-swiper-dots{
	  position:absolute;
	  left: inherit;
	  right: 30rpx;
	  margin-bottom: 70rpx;
	}
	.swiperBox .wx-swiper-dot-active {
	  width: 10rpx;
	  height: 10rpx;
	  border-radius: 50%;
	}
	.swiperBox swiper-item {
	  height: auto!important;
	}
	.swiperBox image {
	  width: 100%;
	  height: auto;
	}
	.headerMain {
	  width: 100%;
	  position: fixed;
	  top: 0;
	  z-index: 3;
	  background: rgba(0,0,0,.7);
	}
	.header{
	  width: 196rpx;
	  position: fixed;
	  left: 20rpx;
	  border-radius: 38rpx;
	  color: #ffffff;
	  font-size: 24rpx;
	  padding: 0 16rpx;
	  line-height: 32px;
	  text-align: center;
	  background: rgba(255, 255, 255, 0.2);
	  font-size: 24rpx;
	  z-index: 2;
	}
	.header image {
	  width: 26rpx;
	  height: 26rpx;
	  border-radius: 6rpx;
	  vertical-align: middle;
	}
	.header .search{
	  width: 38rpx;
	  height: 38rpx;
	  position: absolute;
	  left: 30rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.header .platform_icon{
	  width: 23rpx;
	  height: 10rpx;
	  vertical-align: middle;
	}
	.bottom {
	  margin-top: 100rpx;
	  padding-bottom: 200rpx;
	  text-align: center;
	  color: #AFAFAF;
	  font-size: 26rpx;
	}
	/* 弹层 */
	.maskBox {
	  width: 100vw;
	  height: 100vh;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: rgba(0,0,0,.3);
	  z-index: 3;
	}
	.maskMain {
	  height: auto;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	  text-align: center;
	}
	.maskMain .img {
	  display: inline-block;
	  border-radius: 16rpx;
	  width: 60vw;
	  height: auto;
	}
	.maskMain .close {
	  width: 60rpx;
	  height: 60rpx;
	  margin-top: 30rpx;
	}
	
	/* 授权弹框 */
	.showModal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0, 0, 0, 0.4);
	  z-index: 99;
	}
	
	.showModal .showModalCon {
	  width: 550rpx!important;
	  min-height: 200rpx;
	  background: #ffffff;
	  border-radius: 8rpx;
	  position: absolute;
	  top: 50%;
	  left: 0;
	  right: 0;
	  transform: translateY(-50%);
	  margin: auto;
	  padding: 10rpx 0 40rpx;
	  box-sizing: border-box;
	}
	
	.showModal .showModalCon .showtitle {
	  font-size: 32rpx;
	  text-align: center;
	  padding: 20rpx;
	  border-bottom: 2rpx solid #f4f4f4;
	}
	
	.showModal .showModalCon .con {
	  font-size: 28rpx;
	  color: #666666;
	  line-height: 40rpx;
	  padding: 0 60rpx 20rpx;
	  margin: 30rpx 0;
	  min-height: 150rpx;
	}
	
	.showModal .showModalCon .button {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 28rpx;
	  color: #2662FF;
	  border-top: 2rpx solid #f4f4f4;
	  background: transparent;
	  padding: 0;
	}
	.sph_extension{
	  background: #ffffff;
	  border-bottom: none;
	}
	/* 关注公众号 */
	.border {
	  position: absolute;
	  top: 0;
	  left: 20rpx;
	  border: 8rpx solid #fff;
	  width: calc(100% - 40rpx + 2rpx);
	  min-width: 300px;
	  height: 84px;
	  z-index: 1;
	}
</style>