yjxp-web/src/views/onlineRollCall/districtCountyRollCall.vue

<template>
  <div class="container">
    <div v-for="(item, index) in menuData" :key="index" class="box" @click="handleClick(item.key)">
      <div class="box-left">
        <i :class="item.img" />
      </div>
      <div class="label">{{ item.name }}</div>
      <div class="box-right" />
    </div>
  </div>
</template>

<script lang="ts" setup name="districtCountyRollCall">
import {reactive} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();
const menuData = reactive([
  { name: '茂南区', key: '茂南区', img: 'icon-mn' },
  { name: '电白区', key: '电白区', img: 'icon-db' },
  { name: '高州市', key: '高州市', img: 'icon-gz' },
  { name: '化州市', key: '化州市', img: 'icon-hz' },
  { name: '信宜市', key: '信宜市', img: 'icon-xy' },
  { name: '滨海新区', key: '滨海新区', img: 'icon-bh' },
  { name: '高新区', key: '高新区', img: 'icon-gx' }
])
const handleClick = (key: string) => {
  router.push({ name : 'SpotCheckUnits', query: { key } })
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 50px);
  .box {
    width: 359px;
    height: 65px;
    background: url('@/assets/images/onlineRollCall/box2.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    position: relative;
    padding: 0 27px;
    .box-left, .box-right {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 47px;
    }
    .icon-mn {
      width: 47px;
      height: 46px;
      background: url('@/assets/images/onlineRollCall/icon_mn.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon-db {
      width: 47px;
      height: 50px;
      background: url('@/assets/images/onlineRollCall/icon_db.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon-gz {
      width: 47px;
      height: 46px;
      background: url('@/assets/images/onlineRollCall/icon_gz.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon-hz {
      width: 47px;
      height: 50px;
      background: url('@/assets/images/onlineRollCall/icon_hz.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon-xy {
      width: 47px;
      height: 46px;
      background: url('@/assets/images/onlineRollCall/icon_xy.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon-bh {
      width: 47px;
      height: 50px;
      background: url('@/assets/images/onlineRollCall/icon_bh.png') no-repeat;
      background-size: 100% 100%;
    }
    .icon-gx {
      width: 47px;
      height: 49px;
      background: url('@/assets/images/onlineRollCall/icon_gx.png') no-repeat;
      background-size: 100% 100%;
    }
    .label {
      flex: 1;
      text-align: center;
      color: #414F64;
      font-size: 16px;
    }
  }
}
</style>