|
@@ -1,15 +1,130 @@
|
|
|
<script setup lang="ts">
|
|
|
+import Introduce from "./components/introduce/index.vue";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+const moduleIndex = ref(0);
|
|
|
+watch(moduleIndex, (newValue: number) => {
|
|
|
+ // console.log(moduleIndex.value);
|
|
|
+ if (newValue === 3) {
|
|
|
+ router.push({
|
|
|
+ path: "/product",
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- //console.log(dataList);
|
|
|
+ moduleIndex.value = 0;
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="all">
|
|
|
-
|
|
|
+ <!-- 功能栏 -->
|
|
|
+ <div class="option-box">
|
|
|
+ <!-- 展馆介绍 -->
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ moduleIndex = 1;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="box-top"></div>
|
|
|
+ <div class="box-botoom">展馆介绍</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-line"></div>
|
|
|
+ <!-- 星星 -->
|
|
|
+ <div class="box-line"></div>
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ moduleIndex = 2;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="box-top"></div>
|
|
|
+ <div class="box-botoom">线上展厅</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-line"></div>
|
|
|
+ <!-- 星星 -->
|
|
|
+ <div class="box-line"></div>
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ moduleIndex = 3;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="box-top"></div>
|
|
|
+ <div class="box-botoom">文物鉴赏</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 场馆介绍 -->
|
|
|
+ <Introduce
|
|
|
+ v-show="moduleIndex == 1"
|
|
|
+ @close="
|
|
|
+ () => {
|
|
|
+ moduleIndex = 0;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.all {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(85, 117, 224, 0.418);
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .option-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ // background: rgba(114, 17, 17, 0.671);
|
|
|
+
|
|
|
+ .box-item {
|
|
|
+ height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ .box-top {
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ background: #fff3e1;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .box-botoom {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "AlimamaShuHeiTi-Bold";
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff3e1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-line {
|
|
|
+ width: 70px;
|
|
|
+ height: 2px;
|
|
|
+ background: #fff3e1;
|
|
|
+ margin-top: 34px;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|