<template>
  <view class="template-home">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
    <view class="tn-flex tn-flex-row-center dd-camera" @click="open">
      <camera device-position="front" flash="off" @error="error" style="width: 330rpx; height: 440rpx;border-radius: 1000px;overflow: hidden;background-color: #FFFFFF00;border: 20rpx solid #FFFFFF1A;">
      </camera>
    </view>
    
    <!-- 套娃式轮播 -->
    <swiper class="card-swiper" :current="cardCur" :circular="false" :vertical="true" :autoplay="false" duration="500" interval="5000"
      @change="cardSwiper">
      
      <!-- 纵向滚动的轮播-单色补光灯 -->
      <swiper-item>
        <view class="" style="height: 100vh;width: 100vw;">
          <!-- 横向滚动的轮播-套娃 -->
          <swiper class="img-swiper" :current="imgCur" :circular="true" :autoplay="false" duration="500" interval="12000" @change="imgSwiper">
            <swiper-item v-for="(item,index) in swiperList2" :key="index" :class="imgCur==index?'cur':''">
              <view class="swiper-item" :style="'background-color: '+ item.color +''">
              </view>
            </swiper-item>
          </swiper>
          
          <view class="" style="position: absolute;top: 380rpx;width:100vw;z-index: 9999 !important;opacity: 0.3;">
            <view class="tn-flex tn-flex-row-between tn-color-white tn-text-xl">
              <view class="tn-icon-left-double" @click="prevSlide" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
              <view class="tn-icon-right-double" @click="nextSlide" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
            </view>
          </view>
          
        </view>
      </swiper-item>
      
      <!-- 纵向滚动的轮播-渐变补光灯 -->
      <swiper-item>
        <view class="" style="height: 100vh;width: 100vw;">
          <!-- 横向滚动的轮播-套娃 -->
          <swiper class="img-swiper" :current="linearCur" :circular="true" :autoplay="false" duration="500" interval="12000" @change="linearSwiper">
            <swiper-item v-for="(item,index) in swiperList3" :key="index" :class="linearCur==index?'cur':''">
              <view class="swiper-item" :style="'background:linear-gradient( 0deg,' + item.color + ',' + item.color2 + ')'">
              </view>
            </swiper-item>
          </swiper>
          
          <view class="" style="position: absolute;top: 380rpx;width:100vw;z-index: 9999 !important;opacity: 0.3;">
            <view class="tn-flex tn-flex-row-between tn-color-white tn-text-xl">
              <view class="tn-icon-left-double" @click="prevSlideLinear" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
              <view class="tn-icon-right-double" @click="nextSlideLinear" style="width: 120rpx;height: 60rpx;line-height: 60rpx;"></view>
            </view>
          </view>
          
        </view>
      </swiper-item>
      
      <!-- 纵向滚动的轮播-随机单色补光灯 -->
      <swiper-item>
        <view class="swiper-item random-color">
        </view>
      </swiper-item>
      
      <!-- 纵向滚动的轮播-渐变补光灯 -->
      <swiper-item>
        <view class="swiper-item gradient-color">
        </view>
      </swiper-item>
    
      <!-- 纵向滚动的轮播-循环输出 -->
      <!-- <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item gradient-color">
        </view>
        
        <view class="swiper-item-text">
          <view class="tn-color-white tn-text-xxl tn-text-bold tn-text-center">
            <text class="tn-padding-right-xs" :class="['tn-icon-' + item.icon]"></text>
            <text class="">{{item.user}}</text>
          </view>
          <view class="tn-color-white tn-padding-top-xs tn-text-df clamp-text-2 tn-text-center tn-margin-top-sm"
            style="opacity: 0.8;">
            {{item.title}}
          </view>
        </view>
      </swiper-item> -->
    
      
    
    </swiper>
    
    <!-- 功能按钮 -->
    <view class="" style="position: fixed;bottom: 0;z-index: 999 !important;width: 100vw;">
      <view class="tn-flex tn-flex-row-around tn-flex-col-center">
        
        <!-- 权限-->
        <!-- <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-icon-camera-fill">
              </view>
            </view>  
          </view>
        </view> -->
        
        <!-- 最新图片，这里可以加一个预览最新图片-->
        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="previewNewImage">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="light-pic" :style="'background-image:url(' + src + ')'">
              <view class="light-image">
              </view>
            </view>
          </view>
        </view>
        
        <!-- <view class="" v-if="showContentTips===true" style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF00;" @click="tn('/minePages/help')">
          <view class="" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="margin: 10rpx">
              <view class="tn-icon-help-fill">
              </view>
            </view>  
          </view>
        </view>
        <view class="" v-else style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF40;" @click="takePhoto">
          <view class="tn-bg-white" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
          </view>
        </view> -->
        
        <view class="" style="border-radius: 1000rpx;padding: 6rpx;border: 6rpx solid #FFFFFF40;" @click="takePhoto">
          <view class="tn-bg-white" style="width: 120rpx;height: 120rpx;border-radius: 1000rpx;">
          </view>
        </view>
        
        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tipsClick">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-icon-menu-circle-fill time" :class="[showContentTips ? 'dd-rotate' : '']">
              </view>
            </view>  
          </view>
        </view>
        
      </view>
      
      <view class="tn-tabbar-height"></view>
      
    </view>
    
    <!-- 弹窗内容 -->
    <view class="dd-glass" style="position: absolute;bottom: 0;border-radius: 40rpx 40rpx 0 0;">
      <!-- :style="{'height': showContentTips ? `calc( 0 - 116px - ${vuex_custom_bar_height}px)`: `calc( 100vh - 340px - ${vuex_custom_bar_height}px)`}" -->
      <view class="time" :class="[showContentTips ? 'box-cur' : 'box']">
        <view class="" style="position: absolute;top: -40rpx;width: 100vw;">
          <view class="tn-flex tn-flex-row-center" @click="tipsClick" style="background-color: #FF565600;">
            <view class="tn-icon-down tn-color-white" style="padding-top: 60rpx;">
            </view>
          </view>
        </view>
      
        <view class="tn-flex" style="padding-top: 40rpx;">
          <block v-for="(item,index) in swiperList" :key="index">
            <view class="tn-text-center tn-margin tn-padding-sm"
              :class="cardCur==index?'active-bg':''" @tap.stop="handleSwiperClick(index)">
              <view class="tn-text-xxl tn-color-white" :class="'tn-icon-'+ item.icon + ';' "></view>
            </view>
          </block>
        </view>
        
          
        <!-- 套娃式轮播-菜单 -->
        <swiper class="" :current="cardCur" :circular="false" :vertical="false" :autoplay="false" duration="500" interval="5000"
          @change="cardSwiper" style="height: 320rpx;width: 750rpx;">
          
          <swiper-item>
            <view class="tn-flex tn-flex-wrap">
              <block v-for="(item,index) in swiperList2" :key="index">
                <view class="tn-text-center tn-padding" @tap.stop="handleSwiperClick2(index)">
                  <view :class="imgCur==index?'active':''" :style="'background-color: '+ item.color +''" style="width: 90rpx;height: 56rpx;border-radius: 10rpx;"></view>
                  <view class="tn-text-center tn-text-sm tn-padding-top-xs tn-color-white">
                    {{ item.name }}
                  </view>
                </view>
                
              </block>
            </view>
          </swiper-item>
          
          <swiper-item>
            <view class="tn-flex tn-flex-wrap">
              <block v-for="(item,index) in swiperList3" :key="index">
                <view class="tn-text-center tn-padding" @tap.stop="handleSwiperClick3(index)">
                  <view :class="linearCur==index?'active':''" :style="'background:linear-gradient( 0deg,' + item.color + ',' + item.color2 + ')'" style="width: 90rpx;height: 56rpx;border-radius: 10rpx;"></view>
                  <view class="tn-text-center tn-text-sm tn-padding-top-xs tn-color-white">
                    {{ item.name }}
                  </view>
                </view>
                
              </block>
            </view>
          </swiper-item>
          
          <swiper-item>
            <view class="tn-color-white tn-padding tn-text-center tn-margin-top">
              随机单色补光灯
            </view>
            <view class="tn-color-white tn-text-center">
              正在随机变化
            </view>
          </swiper-item>
          <swiper-item>
            <view class="tn-color-white tn-padding tn-text-center tn-margin-top">
              随机渐变补光灯
            </view>
            <view class="tn-color-white tn-text-center">
              正在随机变化
            </view>
          </swiper-item>
        
        </swiper>
          
        <!-- 安全 -->
        <view class="tn-tabbar-bottom"></view>
      
      </view>
    
    </view>
    
    
    <!-- 温馨提醒，这个需要放最外层，也就是放这里-->
    <tn-toast ref="toast"></tn-toast>


  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'Light',
    mixins: [template_page_mixin],
    data() {
      return {
        src:"https://resource.tuniaokj.com/images/flower/guye1.jpg",
        
        // 显示组件相关提示信息
        showContentTips: false,
        
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          icon: 'con-pisces',
        }, {
          id: 1,
          type: 'image',
          icon: 'con-cancer',
        }, {
          id: 2,
          type: 'image',
          icon: 'con-leo',
        }, {
          id: 3,
          type: 'image',
          icon: 'con-gemini',
        }],


        imgCur: 0,
        swiperList2: [{
          id: 0,
          type: 'image',
          name: "罗兰紫",
          color: '#9736ff',
        }, {
          id: 1,
          type: 'image',
          name: "高冷蓝",
          color: '#b3f0f9',
        }, {
          id: 2,
          type: 'image',
          name: "可爱粉",
          color: '#fdb4bf',
        }, {
          id: 3,
          type: 'image',
          name: "茉莉黄",
          color: '#fff364',
        }, {
          id: 4,
          type: 'image',
          name: "清新蓝",
          color: '#598eff',
        }, {
          id: 5,
          type: 'image',
          name: "氛围紫",
          color: '#701bf9',
        }, {
          id: 6,
          type: 'image',
          name: "热情红",
          color: '#ff6e3a',
        }, {
          id: 7,
          type: 'image',
          name: "庄严蓝",
          color: '#785aff',
        }, {
          id: 8,
          type: 'image',
          name: "日照黄",
          color: '#FFAC00',
        }, {
          id: 9,
          type: 'image',
          name: "月影白",
          color: '#ecf0ef',
        }],
        
        linearCur: 0,
        swiperList3: [{
          id: 0,
          type: 'image',
          name: "渐变1",
          color: '#7300ff',
          color2: '#ff00fb',
        }, {
          id: 1,
          type: 'image',
          name: "渐变2",
          color: '#0037ff',
          color2: '#fe00a5',
        }, {
          id: 2,
          type: 'image',
          name: "渐变3",
          color: '#ff0004',
          color2: '#9500ff',
        }, {
          id: 3,
          type: 'image',
          name: "渐变4",
          color: '#00fef6',
          color2: '#ff0073',
        }, {
          id: 4,
          type: 'image',
          name: "渐变5",
          color: '#1500ff',
          color2: '#ff6a00',
        }, {
          id: 5,
          type: 'image',
          name: "渐变6",
          color: '#fe00dc',
          color2: '#00fbff',
        }, {
          id: 6,
          type: 'image',
          name: "渐变7",
          color: '#fb9b00',
          color2: '#ff0004',
        }, {
          id: 7,
          type: 'image',
          name: "渐变8",
          color: '#007bff',
          color2: '#00e5fe',
        }, {
          id: 8,
          type: 'image',
          name: "渐变9",
          color: '#00b3ff',
          color2: '#ff00c4',
        }, {
          id: 9,
          type: 'image',
          name: "渐变10",
          color: '#f00000',
          color2: '#ffcc00',
        }],


      }
    },
    
    // 内页用法，亮度最大
    onLoad() {
      uni.setScreenBrightness({
      	value: 1,
      	success: function () {
      		console.log('success');
      	}
      });
    },
    
    methods: {
      // 短震动跳转
      tn(e) {
        wx.vibrateShort();
        uni.navigateTo({
          url: e,
        });
      },
      
      // 拍摄并预览最新图片
      takePhoto() {
        wx.vibrateShort();
        const ctx = uni.createCameraContext();
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            
            this.src = res.tempImagePath
            
            uni.saveImageToPhotosAlbum({
            	filePath: res.tempImagePath,
            	success() {
            		uni.showToast({
            			position: "center",
            			icon: "none",
            			title: "图片保存成功吖。不会泄露你的任何隐私嗷嗷"
            		})
            	},
            	fail(e) {
            		uni.showModal({
            			content: "嘤嘤嘤，保存相册失败。不会泄露你的任何隐私",
            			showCancel: false
            		});
            	}
            })
            
          }
        });
        
      },
      
      // 拍摄并预览最新图片
      previewNewImage() {
        wx.vibrateShort();
        const ctx = uni.createCameraContext();
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            
            this.src = res.tempImagePath
            
            uni.previewImage({
              urls: [res.tempImagePath]
            })
            
          }
        });
        
      },
      
      
      error(e) {
        console.log(e.detail);
      },
    
      
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // cardSwiper点击事件
      handleSwiperClick(index) {
        this.cardCur = index
      },
      
      
      // imgSwiper
      imgSwiper(e) {
        this.imgCur = e.detail.current
      },
      // imgSwiper点击事件
      handleSwiperClick2(index) {
        this.imgCur = index
      },
      
      // linearSwiper
      linearSwiper(e) {
        this.linearCur = e.detail.current
      },
      // linearSwiper点击事件
      handleSwiperClick3(index) {
        this.linearCur = index
      },
      
      prevSlide() {
        // 点击按钮切换到上一个
        this.imgCur = (this.imgCur - 1 + 10) % 10; // 有10个
      },
      nextSlide() {
        // 点击按钮切换到下一个
        this.imgCur = (this.imgCur + 1) % 10; // 有10个
      },
      
      prevSlideLinear() {
        // 点击按钮切换到上一个
        this.linearCur = (this.linearCur - 1 + 10) % 10; // 有10个
      },
      nextSlideLinear() {
        // 点击按钮切换到下一个
        this.linearCur = (this.linearCur + 1) % 10; // 有10个
      },
      
      
      // 提示
      open() {
        wx.vibrateShort();
        this.$refs.toast.show({
          title: '',
          content: '图鸟补光灯为纯前端模板，没有后台功能，不会泄露你的任何隐私',
          icon: '',
          image: '',
          duration: 1200
        })
      },
      
      // 点击内容提示信息
      tipsClick() {
        wx.vibrateShort();
        this.showContentTips = !this.showContentTips
      },
      
    }
  }
</script>

<style lang="scss" scoped>
  .template-home {
    max-height: 100vh;
  }

  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  // css不写多一些，页面的玩法就很难炫起来，所以别吐槽css多了，下方分类的很清晰了的，且尽量不用那种看不懂的scss写法了的

  .dd-camera{
    position: fixed;
    top: 160rpx;
    left: calc(50vw - 175rpx);
    z-index: 99999 !important;
  }
  
  .dd-rotate{
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  .time{
    transition: all 0.3s ease-in-out;
  }

  /* 全屏轮播  start*/
  .card-swiper {
    height: 100vh !important;
  }

  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    overflow: initial;
  }

  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100vh;
    border-radius: 0rpx;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
  }

  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
    will-change: transform;
  }

  .card-swiper swiper-item .swiper-item-text {
    margin-top: -68vh;
    // margin-top: calc(-380rpx + env(safe-area-inset-bottom) / 2);
    // margin-top: calc(-380rpx + constant(safe-area-inset-bottom));
    background: none;
    width: 100%;
    display: block;
    height: 80vh;
    // border-radius: 10rpx;
    transform: translate(0rpx, 0rpx) scale(1);
    transition: all 0.6s ease 0s;
    will-change: transform;
    overflow: hidden;
  }

  .card-swiper swiper-item.cur .swiper-item-text {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    margin-top: -68vh;
    // margin-top: calc(-380rpx - env(safe-area-inset-bottom) / 2);
    // margin-top: calc(-380rpx - constant(safe-area-inset-bottom));
    width: 100%;
    height: 80vh;
    padding: 30rpx 10rpx 180rpx 30rpx;
    transform: translate(0rpx, 0rpx) scale(1);
    transition: all 0.6s ease 0s;
    will-change: transform;
  }
  
  .active {
    border: 2rpx solid #FFFFFF;
  }
  
  .active-bg {
    background-color: #FFFFFF33;
    border-radius: 100rpx;
  }

  /* 轮播图片入口 start*/
  .img-swiper {
    height: 100vh !important;
  }

  .img-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    overflow: initial;
  }

  .img-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100vh;
    border-radius: 0rpx;
    transform: scale(0.9);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
  }

  .img-swiper swiper-item.cur .swiper-item {
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
  }
  
  
  
  .random-color {
    margin: 0;
    width: 100%;
    height: 100vh;
    color: #fff;
    overflow: hidden;
    animation: color-loop 18s infinite;
  }
  
  @keyframes color-loop {
    0% {
      background: #ff00a6;
    }
  
    20% {
      background: #aa00ff;
    }
  
    40% {
      background: #0099ff;
    }
  
    60% {
      background: #00ffe2;
    }
  
    80% {
      background: #f1b500;
    }
    
    100% {
      background: #f10000;
    }
    
  }
  
  
  .gradient-color {
    margin: 0;
    width: 100%;
    height: 100vh;
    // background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
    // background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);
    // background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423);
    background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a, #c471f5, #ec008c, #ff4e50);
    background-size: 500% 500%;
    animation: gradientBG 15s ease infinite;
  }
  
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
  
    100% {
      background-position: 0% 50%;
    }
  }
  
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      width: 30%;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        background-color: #FFFFFF33;
        width: 100rpx;
        height: 100rpx;
        font-size: 50rpx;
        color: #FFFFFF;
        border-radius: 1000rpx;
        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_bg5.png);
        }
      }
    }
  }
  
  /* 补光照片 start */
  .light-image {
    border-radius: 1000rpx;
    width: 100rpx;
    height: 100rpx;
    position: relative;
  }
  
  .light-pic {
    background-color: #FFFFFF33;
    width: 100rpx;
    height: 100rpx;
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    // border: 1rpx solid rgba(255,255,255,0.05);
    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  .time{
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }
  
  .box-cur {
    height: 50vh;
  }
  
  .box {
    height: 0;
  }
  
  /* 毛玻璃*/
  .dd-glass {
    width: 100%;
    backdrop-filter: blur(8rpx);
    -webkit-backdrop-filter: blur(8rpx);
    background-color: #000000CC;
    // background: linear-gradient(0deg, #000000CC, #0000005C);
  }
  
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 60rpx;
  	height: calc(80rpx + env(safe-area-inset-bottom) / 2);
    height: calc(80rpx + constant(safe-area-inset-bottom));
  }
  
  /* 安全 start*/
  .tn-tabbar-bottom {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom));
    height: calc(120rpx + constant(safe-area-inset-bottom) * 2);
  }
  
</style>
