sulibao-mini/pages/mine/mine.vue

<template>
  <view class="mine tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    
    <view class="top-backgroup">
      <image src='../../static/Group_1890181699.png' mode='widthFix' class='backgroud-image'></image>
    </view>
    
    <view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 图标logo/头像 -->
      <view class="tn-flex   tn-flex-col-center tn-margin-bottom" @click="tn('/minePages/set')" style="margin-top: -450rpx;justify-content: center;">
        <view class="justify-content-item" >
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <view class="logo-pic tn-shadow">
				
              <view class="logo-image">

				 <image v-if="personInfo.profilePhotoUrl" class="tn-shadow-blur" style="width: 140rpx;height: 140rpx;background-size: cover;" :src="personInfo.profilePhotoUrl"></image>
                 <image v-if="!personInfo.profilePhotoUrl" class="tn-shadow-blur" style="width: 140rpx;height: 140rpx;background-size: cover;" src="../../static/me2.png"></image>
              </view>
            </view>
			 

          </view>
        </view>
        
      </view>
      
      <!-- 没有授权，则显示这个授权按钮-->
      <view class="tn-flex tn-flex-row-between" @click="toLogin('/pages/login/login')" v-if="showLogin">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button shape="round" backgroundColor="#1d60b1" fontColor="#ffffff" padding="20rpx 0" width="40%" shadow>
            <text class="" :style="{fontSize:(wxFontSize-3)+'px'}">立即登录</text>
          </tn-button>
        </view>
      </view>
	  
	  <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white" v-if="!showLogin">
	    <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm"  @click="tn('/minePages/set')">
	      <view class="justify-content-item">
	        <view class="" style="font-size: 16px;" :style="{fontSize:(wxFontSize)+'px'}">
	          个人信息
	        </view>
	        
	      </view>
	      <view class="justify-content-item tn-text-lg tn-color-grey">
	        <view class="tn-color-gray tn-padding-top-xs">
			   <view class="tn-icon-right"></view>
	        </view>
	     
	      </view>
	    </view>
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm">
		  <view class="justify-content-item">
		    <view class="" style="font-size: 16px;" :style="{fontSize:(wxFontSize-1)+'px'}">
		      用户名
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs" :style="{fontSize:(wxFontSize-2)+'px'}">
		      {{personInfo.userRealName||personInfo.contactNickName||(personInfo.userName?'用户'+personInfo.userName.slice(-4):'')||'未登录'}}
		    </view>
 
		  </view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="" style="font-size: 16px;" :style="{fontSize:(wxFontSize-1)+'px'}">
		      联系方式
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs" :style="{fontSize:(wxFontSize-2)+'px'}">
		       {{personInfo.contactMethod||personInfo.userName||''}}
		    </view>
		 
		  </view>
		</view>
		
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="" style="font-size: 16px;" :style="{fontSize:(wxFontSize-1)+'px'}">
		      手机号
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs" :style="{fontSize:(wxFontSize-2)+'px'}">
		     {{personInfo.userName||'未登录'}}
		    </view>
		 
		  </view>
		</view>
		
		<!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
		  <view class="justify-content-item">
		    <view class="tn-text-bold tn-text-lg">
		      所属公司
		    </view>
		    
		  </view>
		  <view class="justify-content-item tn-text-lg tn-color-grey">
		    <view class="tn-color-gray tn-padding-top-xs">
		      未绑定
		    </view>
		 
		  </view>
		</view> -->
		
		
		 
	  </view>
      
       
      
      <!-- 方式15 start-->
      <view class="tn-flex tn-flex-row-between tn-bg-white about-shadow tn-margin-top-xl" style="padding-left: 12px;padding-right: 12px;">
        <view class="tn-padding-sm" @click="tn('/pages/mine/need')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <!-- <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;position: relative;"> -->
              <!-- <tn-badge absolute="true" v-if="needNum>0">
				<span style="color: #fff;font-size: 11px;
						background: #E83A30;
						width: 20px;
						height: 20px;
						text-align: center;
						border-radius: 20px;
						line-height: 20px;">{{needNum}}</span>
			  </tn-badge> -->
			<!--  <view class="tn-icon-like"></view>
            </view>  -->
			<view>
				<img style="width:38px;height: 38px;  margin-bottom: 10px;" src='/static/Group_1890181704.png'/>
			</view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis" :style="{fontSize:(wxFontSize-1)+'px'}">我的需求</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm" @click="tn('/pages/mine/share')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <!-- <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;position: relative;"> -->
              <!-- <tn-badge absolute="true" v-if="shareNum>0">
				<span style="color: #fff;font-size: 11px;
						background: #E83A30;
						width: 20px;
						height: 20px;
						text-align: center;
						border-radius: 20px;
						line-height: 20px;">{{shareNum}}</span>
              </tn-badge> -->
			<!--  <view class="tn-icon-share-triangle"></view>
            </view>  -->
			<view>
				<img style="width:38px;height: 38px;  margin-bottom: 10px;" src='/static/Group_1890181703.png'/>
			</view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis" :style="{fontSize:(wxFontSize-1)+'px'}">我的供应</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm" @click="tn('/pages/mine/coll')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
        <!--    <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-star"></view>
            </view>  -->
			<view>
				<img style="width:38px;height: 38px;  margin-bottom: 10px;" src='/static/Group_1890181702.png'/>
			</view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis" :style="{fontSize:(wxFontSize-1)+'px'}">我的收藏</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 方式15 end-->
      
      
       
      
      <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
        
		 
		
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="showFeedback">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
            <!--  <view class="tn-icon-message-fill" :style="{fontSize:(wxFontSize+1)+'px'}"></view> -->
			<img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_890181710.png'/>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm" :style="{fontSize:(wxFontSize-1)+'px'}">我有问题</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showInfo()">
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		     <!-- <view class="tn-icon-safe-fill" :style="{fontSize:(wxFontSize+1)+'px'}"></view> -->
			 <img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_1890181709.png'/>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">用户声明</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showInfo2()">
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <!-- <view class="tn-icon-lock" :style="{fontSize:(wxFontSize+1)+'px'}"></view> -->
			  <img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_1890181708.png'/>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">隐私协议</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click=showAbout()>
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <!-- <view class="tn-icon-help" :style="{fontSize:(wxFontSize+1)+'px'}"></view> -->
			  <img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_1890181707.png'/>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">了解速立保</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click=showFont()>
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <!-- <view class="tn-icon-font" :style="{fontSize:(wxFontSize+1)+'px'}"></view> -->
			  <img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_1890181706.png'/>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">字体大小</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" v-if="!showLogin" >
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <view class="tn-icon-message" style="color: #333;" :style="{fontSize:(wxFontSize+1)+'px'}"></view>
			  <!-- <img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_1890181705.png'/> -->
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">接收通知</view>
		    <view class="tn-color-gray">
				<switch  color="#46c603" @change="switchChange" :style="{transform:'scale('+(0.9+((wxFontSize-17)/25))+')'}" :checked="personInfo.smsNotice==1" />
			</view>
		  </view>
		</tn-list-cell>
		 
		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" v-if="!showLogin" @click="showLog()">
		  <view class="tn-flex tn-flex-col-center">
		    <view
		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
		      <!-- <view class="tn-icon-my-reduce" :style="{fontSize:(wxFontSize+1)+'px'}"></view> -->
			  <img style="width:18px;height: 18px;  margin-bottom: 0px;" src='/static/Group_1890181705.png'/>
		    </view>
		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">注销账户</view>
		    <view class="tn-color-gray tn-icon-right"></view>
		  </view>
		</tn-list-cell>
		 
      </view>
	  
	<!--  <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm"  v-if="!showLogin">
	    
	  		<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showLogout()">
	  		  <view class="tn-flex tn-flex-col-center"> -->
	  		   <!-- <view
	  		      class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
	  		      <view class="tn-icon-logout" :style="{fontSize:(wxFontSize+1)+'px'}"></view>
	  		    </view>
	  		    <view class="tn-margin-left-sm tn-flex-1" :style="{fontSize:(wxFontSize-1)+'px'}">退出登录</view>
	  		    <view class="tn-color-gray tn-icon-right"></view> -->
	  		
<!-- 			  </view>
	  		</tn-list-cell>
	  		 
	  </view> -->
	   <view  v-if="!showLogin">
		   <view :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showLogout()" >
		  <view style="background-color: rgba(255, 98, 58, 0.1);height: 42px; color: #FF623A; width: 100%;text-align: center;line-height: 42px;border-radius: 8px;">
		  退出登录
			</view>
			</view>
		</view>
    </view>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="确定注销账户吗?" content=" " @confirm="logOff()"
			@close="dialogClose"></uni-popup-dialog>
	</uni-popup>
    <view class='tn-tabbar-height'></view>

  </view>
</template>

<script>
  import request from '../../utils/request'
  import {
  	uniShowModal
  } from '../../utils/uni_api'
  export default {
    name: 'Mine',
    data() {
      return {
		  personInfo: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):{},
		  showLogin: false,
		  msgType:'',
		  shareNum:0,
		  needNum:0,
		  wxFontSize:17,
      }
    },
	onReady() {
	  const appBaseInfo = wx.getAppBaseInfo();
	  this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
	  console.warn(this.wxFontSize===20);
	  this.$nextTick(() => {
		  if(!uni.getStorageSync('userNo')){
		  	this.showLogin = true;
			return false;
		  }
		  if(!uni.getStorageSync('loginOut')){
			this.getContentRectInfo()
			// this.loadNum();
			// this.loadNum2();
		  }
	  })
	  
	},
	 
    methods: {
		fetchData(){
			if(!uni.getStorageSync('userNo')){
				this.showLogin = true;
				return false;
			}
			if(!uni.getStorageSync('loginOut')){
				this.getContentRectInfo()
				// this.loadNum();
				// this.loadNum2();
			}
		},
       // 获取内容容器的信息
       getContentRectInfo() {
       		  let that = this;
			  
       		  request.post('/slbWxma/getPersonlInfo', {
       		  	 
       		  }).then(res => {
				  console.warn(res);
				  if(res&&res.success){
					  that.personInfo = res.resultMap.userInfo||{};
					  uni.setStorageSync('userInfo', JSON.stringify(res.resultMap.userInfo));
					  that.showLogin = false;
				  }
       		  	console.warn(res);
       		  })
          
       },
	   loadNum(){
		   let that = this;
		   
		   request.post('/slbResourceDemand/show/my', {
		   	 
		   }).then(res => {
			  if(res&&res.resultMap){
				   that.needNum = res.resultMap.passNum||0
			  }
		   })
	   },
	   loadNum2(){
	   		   let that = this;
	   		   
	   		   request.post('/slbResourceShare/show/my', {
	   		   	 
	   		   }).then(res => {
	   			  if(res&&res.resultMap){
	   				   that.shareNum = res.resultMap.passNum||0
	   			  }
	   		   })
	   },
	   switchChange: function (e) {
		   //修改smsNotice
		   const that = this;
		   let params= this.personInfo;
		   params.smsNotice = e.detail.value?1:0;
		   request.post('/slbWxma/changePersonlInfo',{userInfo:JSON.stringify(params)},{
		   			  headers: {
		   			  	'Content-Type': 'application/json', // 默认值
		   			  },
		   }).then(res=>{
			  if(res.success){
				  uni.showToast({
					title:e.detail.value?'开启成功':'关闭成功',
					icon:'none'
				  })
				  that.getContentRectInfo()
			  }
		   })
	   },
	   showFont(){
		   let that = this;
		   uni.showActionSheet({
		   	itemList: ['跟随微信','小','中','大'],
		   	success: function (res) {
				if(res.tapIndex==1){
					uni.setStorageSync('fontSize',16)
					that.wxFontSize = 16;
					uni.reLaunch({
						url:'/pages/index/index?index=3'
					})
				}
				if(res.tapIndex==2){
					// uni.removeStorageSync('fontSize');
					uni.setStorageSync('fontSize',17)
					that.wxFontSize = 17;
					uni.reLaunch({
						url:'/pages/index/index?index=3'
					})
				}
				if(res.tapIndex==3){
					uni.setStorageSync('fontSize',20)
					that.wxFontSize = 20;
					uni.reLaunch({
						url:'/pages/index/index?index=3'
					})
				}
				if(res.tapIndex==0){
					const appBaseInfo = wx.getAppBaseInfo();
					uni.removeStorageSync('fontSize');
					that.wxFontSize = appBaseInfo.fontSizeSetting||17;
					uni.reLaunch({
						url:'/pages/index/index?index=3'
					})
				}
		   	},
		   	fail: function (res) {
		   		console.log(res.errMsg);
		   	}
		   });
	   },
	  

      // 跳转
      tn(e) {
		if(!uni.getStorageSync('userNo')){
			uni.setStorageSync('nextPage',e);
			uni.navigateTo({
			  url: '/pages/login/login',
			});
			return false;
		}
        uni.navigateTo({
          url: e,
        });
      },
	  toLogin(e){
		  uni.navigateTo({
		    url: e,
		  });
	  },
	  showFeedback(){
		  uni.navigateTo({
		    url: '/pages/mine/addFeed',
		  });
	  },
	  showInfo(){
		  uni.navigateTo({
		    url: '/pages/login/info?counted=1'
		  })
	  },
	  showInfo2() {
		  uni.navigateTo({
		  	url:'/pages/webview/web-view?url='+encodeURIComponent('https://slb-m.lx-device.com/webview?title=隐私协议&url='+'https://oss.lx-device.com/userFeedback/1735201139460G1J.docx'),
		  })
	  },
	  showAbout(){
		  uni.navigateTo({
		    url: '/pages/mine/about'
		  })
	  },
	  showLog(){
		 let that = this;
		 
		 uniShowModal('确定注销账户吗?', '', {
			showCancel: true,
		 	success: (res) => {
				console.error(res);
				if(res.confirm){
					that.logOff(); 
				}
		 		
		 	}
		 })		 
	  },
	  showLogout(){
		 let that = this;
		 
		 uniShowModal('确定退出登录吗?', '', {
			showCancel: true,
		 	success: (res) => {
				console.error(res);
				if(res.confirm){
					 uni.setStorageSync('loginStatus', 'false');
					 uni.setStorageSync('loginOut', 'true');
					 uni.removeStorageSync('userMap');
					 uni.removeStorageSync('userNo');
					 uni.removeStorageSync('userInfo');
					 that.showLogin = true;
					 that.shareNum = 0;
					 that.needNum = 0;
					 that.personInfo = {};
					 // uni.reLaunch({
					 // 	url:'/pages/index/index'
					 // })
				}
		 		
		 	}
		 })		 
	  },
	  //注销
	  logOff(){
		  const that = this;
		  request.post('/slbWxma/logOff', {
			  userNo: uni.getStorageSync('userNo'),
		  }).then(res => {
		  	if (res&&res.success) {
				 uni.setStorageSync('loginStatus', 'false');
				 uni.setStorageSync('loginOut', 'true');
				 uni.removeStorageSync('userMap');
				 uni.removeStorageSync('userNo');
				 uni.removeStorageSync('userInfo');
				 that.showLogin = true;
				
				 that.personInfo = {};
				 
		  		 uni.showToast({
		  		 	title: '注销成功',
		  		 	icon: 'none'
		  		 })
				 uni.reLaunch({
				   url: '/pages/index/index'
				 })
		  	}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		  })
	  }
    }
  }
</script>

<style lang="scss" scoped>
  .mine{
    max-height: 100vh;
  }
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  
  .tn-color-cat{
    color: #1D2541;
  }
  .tn-bg-cat{
    background-color: #1D2541;
  }

  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      flex-basis: 5%;
      width: 100rpx;
      position: absolute;
    }
  }
  /* 自定义导航栏内容 end */


  /* 顶部背景图 end */
  

  /* 用户头像 start */
  .logo-image {
    width: 140rpx;
    height: 140rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 8rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }

  /* 页面 start*/
  .about-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  .about {

    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
    }
  }

  /* 页面 end*/
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
  
            
        }
      }
    }
  }
  
  /* 图标容器12 start */
  .tn-three{
      position: absolute;
      top: 50%;
      right: 50%;
      bottom: 50%;
      left: 50%;
      transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
      text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  }
  .icon20 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  


  .button-vip {
    width: 100%;
    height: 150rpx;
    border-radius: 15rpx;
    position: relative;
    z-index: 1;
    
    &::after {
      content: " ";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 1;
      transform: scale(1, 1);
      background-size: 100% 100%;
      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
    }    
  }
  

  /* 图标容器12 start */
  .icon12 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 15rpx;
        height: 15rpx;
        font-size: 50rpx;
        border-radius: 50%;
        margin-bottom: 38rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
            
        }
      }
    }
  }
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
  
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 40rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
  
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  
  /* 图标容器1 end */
  
  
  /* 顶部背景图 start */
  .top-backgroup {
    height: 450rpx;
    z-index: -1;
  
    .backgroud-image {
      width: 100%;
      height: 450rpx;
      // z-index: -1;
    }
  }
  
  /* 顶部背景图 end */


</style>