首页和文物鉴赏页top bar

src/assets/style/my-reset.css

@@ -10,10 +10,12 @@ html {
   overflow: hidden;
   touch-action: none;
   scroll-behavior: smooth; /* MDN: When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.(???) */
+  height: 100%;
 }
 
 body {
   text-align: justify;
+  height: 100%;
 }
 
 a {
@@ -40,4 +42,13 @@ menu {
 
 li {
   display: initial;
+}
+
+input {
+  outline: initial;
+  background: initial;
+  border: initial;
+  border-radius: initial;
+  width: initial;
+  height: initial;
 }

src/components/HelloWorld.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a
-        href="https://cli.vuejs.org"
-        target="_blank"
-        rel="noopener"
-      >vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-        >babel</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-        >eslint</a>
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >Core Docs</a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >Forum</a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >Community Chat</a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-          rel="noopener"
-        >Twitter</a>
-      </li>
-      <li>
-        <a
-          href="https://news.vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a
-          href="https://router.vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >vue-router</a>
-      </li>
-      <li>
-        <a
-          href="https://vuex.vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-        >vue-devtools</a>
-      </li>
-      <li>
-        <a
-          href="https://vue-loader.vuejs.org"
-          target="_blank"
-          rel="noopener"
-        >vue-loader</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-        >awesome-vue</a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/directives/v-click-outside.js

@@ -0,0 +1,28 @@
+export default {
+  install(Vue) {
+    Vue.directive('click-outside', {
+      bind(el, binding) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false
+          }
+          if (binding.expression) {
+            binding.value(e)
+          }
+        }
+        el.__vueClickOutside__ = documentHandler
+        if (binding.modifiers.click) {
+          document.addEventListener('click', documentHandler)
+        }
+        if (binding.modifiers.mousedown) {
+          document.addEventListener('mousedown', documentHandler)
+        }
+      },
+      unbind(el) {
+        document.removeEventListener('click', el.__vueClickOutside__)
+        document.removeEventListener('mousedown', el.__vueClickOutside__)
+        delete el.__vueClickOutside__
+      }
+    })
+  }
+}

src/router/index.js

@@ -1,16 +1,22 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import RelicsAppr from "@/views/RelicsAppr.vue"
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'HomeView',
     component: HomeView
   },
   {
+    path: '/relics-appr',
+    name: 'RelicsAppr',
+    component: RelicsAppr,
+  },
+  {
     path: '/about',
     name: 'about',
     // route level code-splitting

src/views/HomeView.vue

@@ -1,18 +1,100 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img
+      class="title"
+      src="@/assets/images/title.png"
+      alt="雨花台烈士纪念馆"
+      draggable="false"
+    >
+    <div class="button-group">
+      <router-link
+        class="router-link"
+        to="./"
+      >
+        <img
+          src="@/assets/images/button-to-scenes.png"
+          alt="场馆漫游"
+          draggable="false"
+        >
+        <span class="highlight">场馆漫游</span>
+      </router-link>
+      <router-link
+        class="router-link"
+        to="./"
+      >
+        <img
+          src="@/assets/images/button-to-scenes.png"
+          alt="全景风貌"
+          draggable="false"
+        >
+        <span>全景风貌</span>
+      </router-link>
+      <router-link
+        class="router-link"
+        to="./relics-appr"
+      >
+        <img
+          src="@/assets/images/button-to-scenes.png"
+          alt="文物赏析"
+          draggable="false"
+        >
+        <span>文物赏析</span>
+      </router-link>
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'HomeView',
   components: {
-    HelloWorld
   }
 }
 </script>
+
+<style lang="less" scoped>
+.home {
+  position: relative;
+  height: 100%;
+  background-color: #D8B275;
+  .title {
+    position: absolute;
+    width: 39.63rem;
+    top: 9.4%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .button-group {
+    position: absolute;
+    left: 50%;
+    bottom: 8.08rem;
+    transform: translateX(-50%);
+    display: inline-flex;
+    flex-direction: column;
+    gap: 3rem;
+    > .router-link {
+      display: inline-block;
+      width: 21.67rem;
+      height: 6.25rem;
+      position: relative;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+      > span {
+        position: absolute;
+        top: 50%;
+        left: 8.46rem;
+        transform: translateY(-50%);
+        color: #fff;
+        font-weight: bold;
+        font-size: 1.83rem;
+      }
+      > span.highlight {
+        color: #D8B275;
+      }
+    }
+  }
+}
+</style>

src/views/RelicsAppr.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="relics-appr">
+    <div class="top-bar">
+      <div class="left-wrap">
+        <button
+          class="switch-3d"
+          :class="currentDim === 3 ? 'choosen' : ''"
+          @click="currentDim = 3"
+        >
+          三维文物
+        </button>
+        <button
+          class="switch-2d"
+          :class="currentDim === 2 ? 'choosen' : ''"
+          @click="currentDim = 2"
+        >
+          二维文物
+        </button>
+      </div>
+      <div class="search-or-input">
+        <div
+          v-if="!isShowInput"
+          class="search-wrap"
+        >
+          <div
+            v-click-outside.click="onClickOutside"
+            class="select-wrap"
+            @click="isShowSelections = !isShowSelections"
+          >
+            <div class="select">
+              {{ typeList[currentTypeIdx].name }}
+            </div>
+            <img
+              src="@/assets/images/expand.png"
+              alt="展开"
+              class="expand-icon"
+              :class="{
+                expanded: isShowSelections,
+              }"
+            >
+          </div>
+          <button
+            class="begin-input"
+            @click="isShowInput = true"
+          >
+            <img
+              src="@/assets/images/search.png"
+              alt="搜索"
+              draggable="false"
+            >
+          </button>
+          <ul
+            v-show="isShowSelections"
+            class="selection-wrap"
+          >
+            <li
+              v-for="(item, index) in typeList"
+              :key="item.id"
+              :class="{
+                choosen: currentTypeIdx === index,
+              }"
+              @click="currentTypeIdx = index"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+        </div>
+        <div
+          v-if="isShowInput"
+          class="input-wrap"
+        >
+          <button class="search">
+            <img
+              src="@/assets/images/search.png"
+              alt="搜索"
+              draggable="false"
+            >
+          </button>
+          <input type="text">
+          <button
+            class="cancel"
+            @click="isShowInput = false"
+          >
+            取消
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDim: 3,
+      typeList: [
+        {
+          name: '全部',
+          id: 'all',
+        },
+        {
+          name: '手稿',
+          id: 'script',
+        },
+        {
+          name: '书刊',
+          id: 'book',
+        },
+        {
+          name: '用具',
+          id: 'tool',
+        },
+        {
+          name: '服装',
+          id: 'clothes',
+        },
+      ],
+      currentTypeIdx: 0,
+      isShowSelections: false,
+      isShowInput: false,
+    }
+  },
+  methods: {
+    onClickOutside() {
+      this.isShowSelections = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.relics-appr {
+  // position: relative;
+  height: 100%;
+  width: 100%;
+  background-image: url(@/assets/images/relics-background.png);
+  background-size: cover;
+  padding-left: 1.67rem;
+  padding-right: 1.67rem;
+  .top-bar {
+    position: fixed;
+    top: 3.17rem;
+    left: 1.67rem;
+    right: 1.67rem;
+    height: 4.17rem;
+    display: flex;
+    justify-content: space-between;
+    .left-wrap {
+      display: flex;
+      height: 100%;
+      gap: 0.83rem;
+      > button {
+        height: 100%;
+        width: 9.58rem;
+        border-radius: 2.08rem;
+        border: 0.08rem solid #930909;
+        background-color: #fff;
+        color: #666666;
+        &.choosen {
+          color: #D8B275;
+          background: #930909;
+        }
+      }
+    }
+    .search-or-input {
+      width: 19.58rem;
+      height: 100%;
+      background: #930909;
+      border-radius: 2.08rem;
+      padding: 0 1.21rem;
+      > .search-wrap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+        > .select-wrap {
+          flex: 0 0 auto;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          > .select {
+            color: #FFFFFF;
+            font-size: 1.67rem;
+            white-space: nowrap;
+          }
+          > img {
+            margin-left: 0.54rem;
+            margin-right: 0.54rem;
+            width: 1.23rem;
+            &.expanded {
+              transform: rotate(180deg);
+            }
+          }
+        }
+        > button.begin-input {
+          height: 100%;
+          flex: 1 0 1px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          > img {
+            width: 2.24rem;
+            height: 2.08rem;
+          }
+        }
+        > ul {
+          position: absolute;
+          left: 0;
+          top: calc(1rem + 100%);
+          width: 11.67rem;
+          height: 20rem;
+          background: #FFFFFF;
+          border-radius: 0.42rem 0.42rem 0.42rem 0.42rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+          align-items: center;
+          > li {
+            color: #666;
+            font-size: 1.67rem;
+            &.choosen {
+              color: #930909;
+            }
+          }
+        }
+      }
+      > .input-wrap {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        .search {
+          flex: 0 0 auto;
+          width: 2.24rem;
+          height: 2.08rem;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        input {
+          flex: 1 0 auto;
+          width: 1px;
+          height: 100%;
+        }
+        .cancel {
+          flex: 0 0 auto;
+          color: #D8BF7C;
+          font-size: 1.67rem;
+        }
+      }
+    }
+
+  }
+}
+</style>