realtorEasier-webSite/mobile/src/pages/service/temp/use.vue

<template>
  <div class="use-layout">
    <!-- <iselect @current="handleCurrent"/> -->
    <!--  @click="$router.push({name:'useimg',params:{id:i}})" -->
     <list :data="useList">
      <div slot="item" slot-scope="{data,i}" @click="clickItem(data,i)" >
        <div class="title">{{`${language==='en'?data.titleEn:data.title}`}}
          <img
            v-if="data.sub"
            :src="`${$cdn}images/right-arrow.png`"
            class="jiantou"
            :class="{'active':activeIdx===i}"
          />
          <div class="sub" :class="{'open':activeIdx===i}" >
            <div v-for="(item,i) in data.sub" :key="i" @touchstart.stop="$router.push({name:'useimg',params:{id:item.img,type,name: 'use'}})">
              <p v-html="language==='en'?item.nameEn:item.name"></p>
            </div>
          </div>
        </div>
      </div>
    </list>
  </div>
</template>

<script>
import select from '../plugin/select'
import list from '../plugin/list'
import {mapState} from 'vuex'

export default {
  props: ['data'],
  components: {
    iselect: select,
    list
  },
  computed: {
    ...mapState({
      language: state => state.language.current
    })
  },
  data () {
    return {
      activeIdx: '',
      useList: this.data.data.pro,
      type: 0
    }
  },
  methods: {
    clickItem (data, i) {
      this.activeIdx = (this.activeIdx === i ? '' : i)
      if (!data.sub) {
        this.$router.push({name: 'useimg', params: {id: data.img, type: this.type, name: 'use'}})
      }
    },
    handleCurrent (data) {
      this.type = data
      this.useList = data ? this.data.data.lite : this.data.data.pro
    }
  }
}
</script>

<style lang="scss" scoped>
$animatype: cubic-bezier(0.645, 0.045, 0.355, 1);
$bannerHeight: 48px;

.use-layout{
  width: 100%;
   .item {
    padding: 12px 8px;
    border-bottom: 1px solid #f2f2f2;
    .title {
      position: relative;
      font-size: 16px;
      color: #4a90e2;
      padding-right: 24px;
      .jiantou {
        transition: transform 0.3s $animatype;
        position: absolute;
        top: 0;
        right: 0;
        height: 24px;
        transform: rotate(0deg);
      }
      .active {
        transform: rotate(90deg);
      }
    }
    .sub {
      transition: max-height 0.3s $animatype;
      max-height: 0;
      overflow: hidden;
      padding-top: 8px;
      p{
        font-size: 16px;
        color: #4a90e2;
      }
    }
    .open {
      max-height: 420px;
    }
  }
}
</style>