guangdongVR_museum/code/src/views/home/list.vue

<template>
  <div class="museum-list">
    <div class="mcon">
      <p v-if="list.length>0">{{list[0].cityName}} {{currentId === 'museum' ? '博物馆' : '虚拟场景'}}数量：{{list.length}}</p>
      <ul>
        <li @click="onClickItem(item)" v-for="(item,i) in list" :key="i">
          {{item.name}}
        </li>
      </ul>
    </div>

    <ul class="select">
      <li @click="onClickSelect({id:'museum'})" :class="{ active: currentId == 'museum' }">
        <span></span>
        <span>博物馆</span>
      </li>
      <li @click="onClickSelect({id:'scene'})" :class="{ active: currentId == 'scene' }">
        <span></span>
        <span>虚拟场景</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { getMuseumList, getExhibitionList } from "@/config/api";
import { useRoute,useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const currentId = ref('')

const list = ref([])

const onClickSelect = (data) => {
  currentId.value = data.id
}

const onClickItem = data => {
  if (data.name === '广东省博物馆') {
    router.push({name: 'gdmuseum'})
  } else {
    router.push({name:'exhibition',query:{id:data.id}})
  }
}

const getList = () => {
  let getData = currentId.value == 'museum' ? getMuseumList : getExhibitionList
  getData({
    "cityId": route.params.id,
    "pageNum": 1,
    "pageSize": 1000,
    "searchKey": ""
  }, data => {
    list.value = data.data.records
  })
}

watch(currentId, () => {
  getList()
})

onMounted(() => {
  if (route.query.type) {
    currentId.value = route.query.type
    router.replace({name: route.name, query: {}})
  } else {
    currentId.value = 'museum'
  }
  getList()
})

</script>

<style lang="scss" scoped>
.museum-list {
  background: #E8E3D1;
  color: #333333;

  .mcon {
    width: 1400px;
    margin: 0 auto;
    padding-top: 50px;


    >p {
      font-size: 24px;
    }

    >ul {
      display: flex;
      flex-wrap: wrap;

      >li {
        width: 270px;
        height: 50px;
        margin: 40px 104px 0 0;
        line-height: 50px;
        border-radius: 50px;
        border: 1px solid #333333;
        text-align: center;
        cursor: pointer;

        &:nth-of-type(4n) {
          margin-right: 0;
        }

        &:hover,
        &.active {
          color: var(--main-color);
          border-color: var(--main-color);
        }
      }
    }
  }

  .select {
    width: 400px;
    display: flex;
    padding: 10px 0;
    justify-content: center;
    background: var(--main-color);
    border-radius: 50px;
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;

    >li {
      display: flex;
      align-items: center;
      margin: 0 40px;
      cursor: pointer;

      >span {
        margin-right: 6px;
        display: inline-block;

        &:first-of-type {
          width: 20px;
          height: 20px;
          position: relative;
          border-radius: 50%;
          background: #fff;
        }
      }

      &.active {
        >span {
          &:first-of-type {
            &::before {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
              background: var(--font-active);
              border-radius: 50%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {

  .museum-list {
    color: #333333;
    width: 100%;

    .mcon {
      width: 90%;
      padding-top: 20px;

      >p {
        font-size: 18px;
      }

      >ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        >li {
          width: 48%;
          height: 40px;
          margin: 10px 0;
          line-height: 40px;
          border: 1px solid #999;
          color: #999;
        }
      }
    }

    .select {
      width: 90%;
      display: flex;
      padding: 10px 0;
      justify-content: space-evenly;
      position: absolute;
      bottom: 22px;
      > li {
        margin: 0;
      }
    }
  }

}
</style>