<template>
  <view class="template-mimicry">
    <!-- 顶部自定义导航 -->
    <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>

    <swiper class="card-swiper" :circular="true"
      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view>
        <view class="swiper-item2 image-banner">
          <image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
        </view>
        <view class="swiper-item-text">
          <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
          <view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
        </view>
    
      </swiper-item>
    </swiper>
    <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
            <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
    </view>
    
    <view class="keyboard-fixed">
      <view class="keyboard-box">
        <view class="keyboard">
          <view class="key s2 esc">??</view>
          <view class="key">1</view>
          <view class="key">2</view>
          <view class="key">3</view>
          <view class="key">4</view>
          <view class="key">5</view>
          <view class="key">6</view>
          <view class="key">7</view>
          <view class="key">8</view>
          <view class="key">9</view>
          <view class="key">0</view>
          <view class="key sub">-</view>
          <view class="key add">=</view>
          <view class="key s4 back">??</view>
          <view class="key s3 tab">??</view>
          <view class="key">Q</view>
          <view class="key">W</view>
          <view class="key">E</view>
          <view class="key">R</view>
          <view class="key">T</view>
          <view class="key">Y</view>
          <view class="key">U</view>
          <view class="key">I</view>
          <view class="key">O</view>
          <view class="key">P</view>
          <view class="key openbracket">[</view>
          <view class="key closebracket">]</view>
          <view class="key s3 pipe">\</view>
          <view class="key s4 cap">??</view>
          <view class="key">A</view>
          <view class="key">S</view>
          <view class="key">D</view>
          <view class="key dotted">F</view>
          <view class="key">G</view>
          <view class="key">H</view>
          <view class="key dotted">J</view>
          <view class="key">K</view>
          <view class="key">L</view>
          <view class="key semi">;</view>
          <view class="key comma">,</view>
          <view class="key s4 enter">??</view>
          <view class="key s5 shift">??</view>
          <view class="key">Z</view>
          <view class="key">X</view>
          <view class="key">C</view>
          <view class="key">V</view>
          <view class="key">B</view>
          <view class="key">N</view>
          <view class="key">M</view>
          <view class="key openangular">,</view>
          <view class="key closeangular">.</view>
          <view class="key slash">/</view>
          <view class="key s5 shift up">??</view>
          <view class="key s3 control">☕</view>
          <view class="key s3 win">??</view>
          <view class="key s3 alt">⭐️</view>
          <view class="key s12 space"></view>
          <view class="key s3 alt">⭐️</view>
          <view class="key s2 fn left">??</view>
          <view class="key s2 fn down">??‍??</view>
          <view class="key s2 control right">☕</view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateMimicry',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          name: '总有你想不到的创意',
          text: '海量分享',
          url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
        }, {
          id: 1,
          type: 'image',
          name: '寻找一起成长的小伙伴',
          text: '愉快玩耍',
          url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
        }, {
          id: 2,
          type: 'image',
          name: '更多彩蛋等你探索',
          text: '酷炫多彩',
          url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
        }, {
          id: 3,
          type: 'image',
          name: '商业合作请联系作者',
          text: '免费开源',
          url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
          pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d6.png'
        }],
      }
    },
    methods: {
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  
  .template-mimicry{
    background: #d8dee8;
    height: 100vh;
  }
  
  .keyboard-fixed{
    position: fixed;
    bottom: 0;

  }
  
  .keyboard-box{
     margin: 0 auto;
     padding: 30rpx 0;
      overflow: hidden;
      display: grid;
      place-items: center;
      // background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
  }
  
  .keyboard {
    display: grid;
    grid-template-columns: repeat(30, 2.3vw);
    grid-template-rows: repeat(5, 3.25vh);
    grid-gap: 0.95vw;
    // background: #c2ccdb;
    padding: 1.73vh 1.73vw;
    // border-radius: 1.27vw;
    // box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
  }
  .keyboard .key {
    border-radius: 0.76vw;
    grid-column: auto/span 2;
    width: 100%;
    height: 100%;
    padding: 0.475vw;
    font-size: 1.9vw;
    display: grid;
    align-items: center;
    color: #000;
    justify-content: center;
    cursor: pointer;
    background: #d8dee8;
    box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
    transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
    user-select: none;
  }
  .keyboard .key:hover,
  .keyboard .key.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f6f8fa, inset 0.32vw 0.32vw 0.63vw #c2ccdb;
    color: #fff;
    text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
  }
  .keyboard .key.dotted {
    position: relative;
  }
  .keyboard .key.dotted::before {
    content: '_';
    font-weight: bold;
    color: #b5c0d2;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .keyboard .key.esc {
    background: #ed4c67;
    color: #fbdbe1;
  }
  .keyboard .key.esc:hover,
  .keyboard .key.esc.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f38e9f, inset 0.32vw 0.32vw 0.63vw #c71432;
    color: #fff;
    text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
  }
  .keyboard .key.back {
    background: #d63031;
    color: #f7d6d6;
  }
  .keyboard .key.back:hover,
  .keyboard .key.back.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #e57c7d, inset 0.32vw 0.32vw 0.63vw #991e1f;
    color: #fff;
    text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
  }
  .keyboard .key.shift {
    background: #1e90ff;
    color: #d2e9ff;
  }
  .keyboard .key.shift:hover,
  .keyboard .key.shift.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #71b9ff, inset 0.32vw 0.32vw 0.63vw #0065c8;
    color: #fff;
    text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
  }
  .keyboard .key.control {
    background: #be2edd;
    color: #f2d5f8;
  }
  .keyboard .key.control:hover,
  .keyboard .key.control.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #d57be9, inset 0.32vw 0.32vw 0.63vw #891aa1;
    color: #fff;
    text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
  }
  .keyboard .key.win {
    background: #f7b731;
    color: #fdf1d6;
  }
  .keyboard .key.win:hover,
  .keyboard .key.win.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fad17d, inset 0.32vw 0.32vw 0.63vw #c78908;
    color: #fff;
    text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
  }
  .keyboard .key.alt {
    background: #5352ed;
    color: #dddcfb;
  }
  .keyboard .key.alt:hover,
  .keyboard .key.alt.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #9291f3, inset 0.32vw 0.32vw 0.63vw #1615ca;
    color: #fff;
    text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
  }
  .keyboard .key.fn {
    background: #26de81;
    color: #d4f8e6;
  }
  .keyboard .key.fn:hover,
  .keyboard .key.fn.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #76eaaf, inset 0.32vw 0.32vw 0.63vw #189e5a;
    color: #fff;
    text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
  }
  .keyboard .key.cap {
    background: #ee5a24;
    color: #fcded3;
    position: relative;
  }
  .keyboard .key.cap:hover,
  .keyboard .key.cap.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f49675, inset 0.32vw 0.32vw 0.63vw #b23a0e;
    color: #fff;
    text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
  }
  .keyboard .key.cap::before {
    content: '';
    position: absolute;
    width: 0.5vw;
    height: 0.5vw;
    background: #f6ac91;
    top: 1vw;
    right: 1vw;
    border-radius: 50%;
  }
  .keyboard .key.cap.on::before {
    background: #fbded3;
    box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
  }
  .keyboard .key.tab {
    background: #12cbc4;
    color: #cafaf8;
  }
  .keyboard .key.tab:hover,
  .keyboard .key.tab.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #5aede7, inset 0.32vw 0.32vw 0.63vw #0d8e89;
    color: #fff;
    text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
  }
  .keyboard .key.enter {
    background: #fdcb6e;
    color: #fff5e2;
  }
  .keyboard .key.enter:hover,
  .keyboard .key.enter.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fddea3, inset 0.32vw 0.32vw 0.63vw #fba403;
    color: #fff;
    text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
  }
  .keyboard .key.s2 {
    font-size: 1.73vw;
    grid-column: auto/span 2;
  }
  .keyboard .key.s3 {
    font-size: 1.73vw;
    grid-column: auto/span 3;
  }
  .keyboard .key.s4 {
    font-size: 1.73vw;
    grid-column: auto/span 4;
  }
  .keyboard .key.s5 {
    font-size: 1.73vw;
    grid-column: auto/span 5;
  }
  .keyboard .key.s6 {
    font-size: 1.73vw;
    grid-column: auto/span 6;
  }
  .keyboard .key.s12 {
    font-size: 1.73vw;
    grid-column: auto/span 12;
  }
  .keyboard .key[on-shift] {
    font-size: 1.461538461538461vw;
    justify-items: center;
  }
  .keyboard .key[on-shift]::before {
    content: attr(on-shift);
    align-items: end;
  }



    /* 轮播视觉差 start */
    .card-swiper {
      height: 600rpx !important;
    }
  
    .card-swiper swiper-item {
      width: 750rpx !important;
      left: 0rpx;
      box-sizing: border-box;
      padding: 0rpx 0rpx 120rpx 0rpx;
      overflow: initial;
    }
  
    .card-swiper swiper-item .swiper-item {
      width: 100%;
      display: block;
      height: 100%;
      border-radius: 0rpx;
      transform: scale(1);
      transition: all 0.2s ease-in 0s;
      overflow: hidden;
    }
  
    .card-swiper swiper-item.cur .swiper-item {
      transform: none;
      transition: all 0.2s ease-in 0s;
    }
  
    .card-swiper swiper-item .swiper-item2 {
      margin-top: -340rpx;
      width: 100%;
      display: block;
      height: 100%;
      border-radius: 0rpx;
      transform: translate(340rpx, 20rpx) scale(0.5, 0.5);
      transition: all 0.6s ease 0s;
      overflow: hidden;
    }
  
    .card-swiper swiper-item.cur .swiper-item2 {
      margin-top: -340rpx;
      width: 100%;
      transform: translate(300rpx, 0rpx) scale(0.8, 0.8);
      transition: all 0.6s ease 0s;
    }
  
    .card-swiper swiper-item .swiper-item-text {
      margin-top: -320rpx;
      width: 100%;
      display: block;
      height: 50%;
      border-radius: 10rpx;
      transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
      transition: all 0.6s ease 0s;
      overflow: hidden;
    }
  
    .card-swiper swiper-item.cur .swiper-item-text {
      margin-top: -380rpx;
      width: 100%;
      transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
      transition: all 0.6s ease 0s;
    }
    
    .image-banner{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image-banner image{
      width: 100%;
    }
    
    /* 轮播指示点 start*/
    .indication{
      z-index: 9999;
      width: 100%;
      height: 36rpx;
      position: absolute;
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
    }
    
    .spot{
      background-color: #FFF;
      opacity: 0.4;
      width: 10rpx;
      height: 10rpx;
      border-radius: 20rpx;
      margin: 0 8rpx !important;
      left: -270rpx;
      top: -180rpx;
      position: relative;
    }
    
    .spot.active{
      opacity: 1;
      width: 30rpx;
      background-color: #FFF;
    }
</style>
