搞搞搞

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <router-view />
-  {{ $uaInfo }}
 </template>
 
 <script>
@@ -24,9 +23,9 @@ export default {
 //   -webkit-touch-callout: none;
 // }
 
-// #app {
-//   height: 100%;
-// }
+#app {
+  height: 100%;
+}
 
 // // 360浏览器不支持not()
 // input, textarea {

src/main.js

@@ -93,7 +93,7 @@ VueViewer.setDefaults({
   fullscreen: true,
   keyboard: true,
 })
-  
+
 // 必须在vue根组件挂载之后执行
 if (uaInfo.device.type === 'mobile') {
   document.getElementById('app').classList.add('mobile')

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/Home.vue'
+import UnitList from '../views/UnitList.vue'
 // import store from '@/store/index.js'
 
 const routes = [
@@ -8,6 +9,11 @@ const routes = [
     name: 'HomeView',
     component: HomeView,
   },
+  {
+    path: '/unit-list',
+    name: 'UnitList',
+    component: UnitList,
+  },
 ]
 
 const router = createRouter({

src/views/Home.vue

@@ -2,7 +2,13 @@
   <div
     class="home"
   >
-    {{ $env.BASE_URL }}
+    <h1>扬州中国大运河博物馆<br>线上图文展</h1>
+    <button
+      class="begin"
+      @click="onClickBegin"
+    >
+      开始游览
+    </button>
   </div>
 </template>
 
@@ -25,13 +31,32 @@ export default {
   methods: {
     ...mapMutations([
     ]),
+    onClickBegin() {
+      this.$router.push({
+        name: 'UnitList',
+      })
+    }
   },
 }
 </script>
 
 <style lang="less" scoped>
-.home {
+.home{
   width: 100%;
   height: 100%;
+  position: relative;
+  >h1{
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  >button.begin{
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 </style>

src/views/UnitList.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="unit-list">
+    <aside
+      :class="{
+        expand: isExpand,
+      }"
+    >
+      <ul>
+        <li>
+          <img
+            class="banner"
+            src=""
+            alt=""
+            draggable="false"
+          >
+          <h2>运河镌石------馆藏大运河沿线碑拓展</h2>
+        </li>
+        <li>
+          <img
+            class="banner"
+            src=""
+            alt=""
+            draggable="false"
+          >
+          <h2>运河上的舟楫小书展</h2>
+        </li>
+      </ul>
+      <button
+        class="expand-shrink"
+        @click="onClickExpandShrink"
+      >
+        展开-收起
+      </button>
+    </aside>
+    <main>
+      <h3>前言</h3>
+      <p>这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言</p>
+      <ul>
+        <li>
+          <h3>章节标题</h3>
+          <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
+        </li>
+      </ul>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isExpand: false,
+    }
+  },
+  methods: {
+    onClickExpandShrink() {
+      this.isExpand = !this.isExpand
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.unit-list{
+  height: 100%;
+  position: relative;
+  >aside{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 200px;
+    height: 100%;
+    background-color: blue;
+    transition: width 0.5s;
+    border-radius: 0 10px 10px 0;
+    >ul{
+      background: yellow;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: calc(100% - 50px);
+      overflow: auto;
+      >li{
+        max-width: 500px;
+        flex: 0 0 auto;
+        >img.banner{
+          background: red;
+          object-fit: contain;
+        }
+        >h2{
+          background: white;
+        }
+      }
+    }
+    >button.expand-shrink{
+      bottom: 20px;
+      left: 50%;
+      position: absolute;
+      transform: translateX(-50%);
+    }
+  }
+  >aside.expand{
+    width: 100%;
+  }
+  >main{
+    >h3{
+    }
+    >p{
+    }
+    >ul{
+      counter-reset: my-count;
+      >li{
+        >h3{
+          ::before{
+          }
+        }
+        >p{
+
+        }
+      }
+    }
+  }
+}
+
+ul {
+  > li {
+    counter-increment: count;
+    > span {
+      &::before {
+        content: counter(count, upper-alpha);
+      }
+    }
+  }
+}
+</style>