tangjia/src/pages/home/index.vue

<template>
  <div class="layout" :class="{wide: isWide}" @touchmove.prevent>
    <div>
      <ViewOperation height="100%" v-if="!isWide" :scale="0.7">
        <div class="address">
          <!-- <img src="@/assets/images/address.png" alt=""> -->
          <maps />
          <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
          <a v-for="item in address" :key="item.name" :class="item.name" @click="to(item)">
            {{item.text}}<span>{{item.count}}</span>
          </a>
        </div>
      </ViewOperation>
      <div class="address wide" v-else>
        <!-- <img src="@/assets/images/address.png" alt=""> -->
        <maps />
        <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
        <a v-for="item in address" :key="item.name" :class="item.name" @click="to(item)">
          {{item.text}}<span>{{item.count}}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import data from '@/data'
import browser from '@/util/browser'
import ViewOperation from '@/components/ViewOperation'
import maps from '@/components/maps'

const setting = [
  {name: 'yf', text: '永丰社区'},
  {name: 'bs', text: '北沙社区'},
  {name: 'sc', text: '上栅社区'},
  {name: 'jf', text: '金峰社区'},
  {name: 'nz', text: '那洲社区'},
  {name: 'gt', text: '官塘社区'},
  {name: 'ht', text: '会同社区'},
  {name: 'nt', text: '宁堂社区'},
  {name: 'xc', text: '下栅社区'},
  {name: 'da', text: '东岸社区'},
  {name: 'js', text: '鸡山社区'},
  {name: 'yx', text: '银星社区'},
  {name: 'hh', text: '后环社区'},
  {name: 'tl', text: '唐乐社区'},
  {name: 'tj', text: '唐家社区'},
  {name: 'qa', text: '淇澳社区'}
]
const wh = {width: window.innerWidth, height: window.innerHeight}

setting.forEach(item => {
  item.count = data.modules.find(m => m.title === item.text).children.length
})

window.addEventListener('resize', function () {
  wh.width = window.innerWidth
  wh.height = window.innerHeight
})

export default {
  data () {
    return {
      ismobile: browser.mobile,
      address: setting,
      wh: wh
    }
  },
  computed: {
    isWide () {
      return this.wh.width > 1085
    }
  },
  components: {
    ViewOperation,
    maps
  },
  methods: {
    to (item) {
      let link = this.$isLocal ? {name: 'list', params: {title: item.text, type: '全部'}} : {name: 'map', params: {title: item.text}}
      this.$router.push(link)
    }
  }
}
</script>

<style scoped>
@import url('./style.css');
</style>