szfh_one/src/components/fold.vue

<template>
  <div class="fold">
    <ul>
      <li :class="{anima:isActive}" @click.stop="showItem(item)" :style="{background:item.color,transitionDelay:`${(i+1)*0.1}s`}" v-for="(item,i) in rawdata" :key="i">
        <div>
          <span>{{item.name}}</span>
          <span>{{item.xuhao}}</span>
        </div>
        <img v-if="item.sub" :src="require(`@/assets/images/${!item.show?`show_enlarge@2x.png`:`show_narrow@2x.png`}`)" alt="">
        <ul @click.stop v-if="item.sub" :style="{maxHeight:item.show?`${item.sub.data.length*70}px`:'0','padding-bottom':item.show?'10px':'0'}">
          <li :style="{background:item.sub.bgclr||''}" v-for="(sub,idx) in item.sub.data" :key="idx">
            <div @click.stop="showItem(sub)" :class="{bLine:item.bgclr}">
              <div>
                <span>{{sub.name}}</span>
                <span>{{sub.xuhao}}</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import {data} from './data.js'
import {data as data2} from './data2.js'

import browser from '@/utils/browser'


export default {
  props:['isActive'],
  data(){
    let tt = data.concat(data2)
    let temp = tt.filter(item=>{
      item.show = false
      return !item.isHide
    })
    return {
      rawdata:temp,
      isMobile: browser.mobile
    }
  },
  methods:{
    goto(url){
      this.$router.push({
        name:'iframe',
        params:{
          id: url
        }
      })
    },
    showItem(item){
      if (!item.sub) {
        this.goto(item.url)
        return 
      }
      item.show = !item.show
    }
  }
}
</script>

<style lang="less" scoped>
.fold{
  width: 320px;
  min-height: 70px;
  max-height: 600px;
  background: linear-gradient(180deg, #00D3F6 0%, #234ED8 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  padding: 15px;
  border-radius: 4px;
  overflow: auto;
  .mb-top{
    position: relative;
    border-bottom: 1px solid #ECECEC;
    margin-bottom: 10px;
    padding: 10px 0 20px;
    font-weight: bold;
    >img{
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      top: 0px;
    }
  }
  >ul{
    color: #FFFFFF;
    height: 100%;
    overflow: hidden;
   >li{
      padding: 0 15px;
      line-height: 40px;
      border-radius: 4px;
      background: #231815;
      position: relative;
      margin-bottom: 10px;
      overflow: hidden;
      transform: translateX(150%);
      transition: none;
      >div{
        display: flex;
        justify-content: space-between;
      }
     >img{
       position: absolute;
       top: 18px;
       right: 15px;
       width: 10px;
     }
     >ul{
      max-height: 0;
      transition: all 0.3s ease;
       >li{
          line-height: 36px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          padding: 0 10px;
          font-size: 14px;
          overflow: hidden;
          cursor: pointer;
          &:not(:last-of-type){
            margin-bottom: 10px;
          }
          >div{
            >div{
              display: flex;
              justify-content: space-between;
              &:not(:last-of-type){
                border-bottom: 1px solid rgba(255,255,255,0.4);
              }
            }
          }
          .bLine{
            >div{
              &:not(:last-of-type){
                border-bottom: 1px solid rgba(0,0,0,0.1);
              }
            }
          }
       }
     }
   } 
   .anima{
      transform: translateX(0);
      transition: ease .3s transform;
   }
  }
}

@media screen and (max-width: 500px) {
  .fold{
    max-height: calc(100vh - 70px);
  }

}
</style>