guangdongVR_museum/code/src/views/gdmuseum/mobile.vue

<template>
  <div class="gdmuseum">
    <div class="info" v-if="currentMuseum">
      <div class="title">
        <div>
          {{currentMuseum.name}}
          <img
            :class="isShowDesc ? 'expand' : 'collapse'" src="@/assets/images/icon/down_prompt.png" alt=""
            @click="onClickExpandBtn"
          >
        </div>
      </div>
      <p v-show="isShowDesc">
        {{currentMuseum.description || '暂无简介'}}
      </p>
    </div>
    <component
      :key="panelPage" class="limitwidth" :is="panelPage"
      :currentMuseumItem="currentMuseum"
    ></component>
  </div>

  <teleport to='body' >
    <vtab @handleTab="handleTab" :list="menu" class="tabcon" />
  </teleport>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed, nextTick } from "vue";
import vtab from "@/components/tab/mobile.vue";
import { getMuseumDetail } from "@/config/api";

import collections from "./exhibition/mobile/collections";
import guide from "./exhibition/mobile/guide";
import permanent from "./exhibition/mobile/permanent";
import review from "./exhibition/mobile/review";
import temporary from "./exhibition/mobile/temporary";

const panelPage = ref(permanent)
const currentMuseum = ref(null)

const menu = ref([
  {
    name: "常设展览",
    id: "permanent",
    component: permanent
  },
  {
    name: "临时展览",
    id: "temporary",
    component: temporary
  },
  {
    name: "展览回顾",
    id: "review",
    component: review
  },
  {
    name: "藏品展示",
    id: "collections",
    component: collections
  },
  {
    name: "展馆导览",
    id: "guide",
    component: guide
  },
]);

const isShowDesc = ref(true)

let handleTab = (data) => {
  console.log(data, "data");
  panelPage.value = data.component
};

const onClickExpandBtn = () => {
  isShowDesc.value = !isShowDesc.value
}

onMounted(() => {
  getMuseumDetail({
    id: 1,
  }, data => {
    currentMuseum.value = data.data
  })
})
</script>

<style lang="scss" scoped>
.gdmuseum {
  background: #e8e3d1;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 60px);

  .info {
    padding-top: 20px;
    width: 90%;
    margin: 0 auto;

    > .title {
      font-size: 18px;
      font-weight: bold;
      color: var(--main-color);
      text-align: center;
      position: relative;
      text-align: center;
      > div {
        display: inline-block;
        > img {
          position: absolute;
          right: calc(-1 * (15px + 17px));
          top: 11px;
          width: 17px;
          height: 9px;
          &.collapse {
            transform: rotate(180deg);
          }
        }
      }
    }

    >p {
      width: 100%;
      line-height: 1.8;
      font-size: 16px;
      margin-top: 16px;
      text-indent: 32px;
      color: #333333;
      text-align: justify;
    }
  }
}

.tabcon {
    position: fixed;
    bottom: 20px;
    left: 5%;
    width: 30%;
    z-index: 9999;
  }
</style>