start view 外观

.eslintrc.js

@@ -49,5 +49,6 @@ module.exports = {
     mapMutations: true,
     store: true,
     utils: true,
+    useSizeAdapt: true,
   }
 }

src/App.vue

@@ -1,6 +1,7 @@
 <template>
-  <router-view />
-  {{ $uaInfo }}
+  <div class="app-view">
+    <router-view />
+  </div>
 </template>
 
 <script>
@@ -19,19 +20,19 @@ export default {
 //   overflow: hidden;
 // }
 
-// * {
-//   user-select: none;
-//   -webkit-touch-callout: none;
-// }
+* {
+  user-select: none;
+  -webkit-touch-callout: none;
+}
 
-// #app {
-//   height: 100%;
-// }
+#app {
+  height: 100%;
+}
 
-// // 360浏览器不支持not()
-// input, textarea {
-//   user-select: initial;
-// }
+// 360浏览器不支持not()
+input, textarea {
+  user-select: initial;
+}
 
 // 字体
 // @font-face {
@@ -47,9 +48,9 @@ export default {
 // }
 
 // 滚动条
-// ::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
-// ::-webkit-scrollbar-corner { background: #dddecc; }
+::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
+::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果
 .fade-out-leave-active {
@@ -83,4 +84,18 @@ export default {
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
+</style>
+
+<style lang="less">
+.app-view{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(/src/assets/images/bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
 </style>

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,12 +1,55 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/Home.vue'
+import StartView from "@/views/StartView.vue"
+import StepOne from "@/views/StepOne.vue"
+import StepTwo from "@/views/StepTwo.vue"
+import StepThree from "@/views/StepThree.vue"
+import StepFour from "@/views/StepFour.vue"
+import StepFive from "@/views/StepFive.vue"
+import StepSix from "@/views/StepSix.vue"
+import StepSeven from "@/views/StepSeven.vue"
+
 // import store from '@/store/index.js'
 
 const routes = [
   {
-    path: '/',
-    name: 'HomeView',
-    component: HomeView,
+    path: '/start',
+    name: 'StartView',
+    component: StartView,
+  },
+  {
+    path: '/step-one',
+    name: 'StepOne',
+    component: StepOne,
+  },
+  {
+    path: '/step-two',
+    name: 'StepTwo',
+    component: StepTwo,
+  },
+  {
+    path: '/step-three',
+    name: 'StepThree',
+    component: StepThree,
+  },
+  {
+    path: '/step-four',
+    name: 'StepFour',
+    component: StepFour,
+  },
+  {
+    path: '/step-five',
+    name: 'StepFive',
+    component: StepFive,
+  },
+  {
+    path: '/step-six',
+    name: 'StepSix',
+    component: StepSix,
+  },
+  {
+    path: '/step-seven',
+    name: 'StepSeven',
+    component: StepSeven,
   },
 ]
 
@@ -17,7 +60,7 @@ const router = createRouter({
 
 router.beforeEach((to, from) => {
   // 生产环境下强制每次都从首页进入
-  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView') {
+  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'StartView') {
     return '/'
   }
 })

src/useFunctions/useSizeAdapt.js

@@ -0,0 +1,30 @@
+// 用法：
+// width: calc(950 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+import { onBeforeUnmount, ref } from 'vue'
+
+export default function useSizeAdapt(windowWidthWhenDesign = 375, windowHeightWhenDesign = 724) {
+  const windowSizeInCssForRef = ref('')
+  const windowSizeWhenDesignForRef = ref('')
+
+  function compute() {
+    if (window.innerWidth / window.innerHeight > windowWidthWhenDesign / windowHeightWhenDesign) {
+      windowSizeWhenDesignForRef.value = windowHeightWhenDesign
+      windowSizeInCssForRef.value = '100vh'
+    } else {
+      windowSizeWhenDesignForRef.value = windowWidthWhenDesign
+      windowSizeInCssForRef.value = '100vw'
+    }
+  }
+
+  compute()
+  window.addEventListener('resize', compute)
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', compute)
+  })
+
+  return {
+    windowSizeInCssForRef,
+    windowSizeWhenDesignForRef,
+  }
+}

src/views/Home.vue

@@ -1,37 +0,0 @@
-<template>
-  <div
-    class="home"
-  >
-    {{ $env.BASE_URL }}
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HomeView',
-  inject: ['$uaInfo', '$env'],
-  data() {
-    return {
-    }
-  },
-  computed: {
-    ...mapState([
-    ]),
-  },
-  mounted() {
-  },
-  unmounted() {
-  },
-  methods: {
-    ...mapMutations([
-    ]),
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.home {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/StartView.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="start-view">
+    <img
+      class="logo"
+      src="@/assets/images/logo.png"
+      alt=""
+      draggable="false"
+    >
+    <img
+      class="start-view-banner"
+      src="@/assets/images/start-view-banner.png"
+      alt=""
+      draggable="false"
+    >
+    <div class="btn-group">
+      <button>体验版画过程</button>
+      <button>分享</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+
+</script>
+
+<style lang="less" scoped>
+.start-view{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(/src/assets/images/bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >img.logo{
+    position: absolute;
+    top: 19px;
+    left: 23px;
+    height: 35px;
+  }
+  >img.start-view-banner{
+    position: absolute;
+    top: 42.27%;
+    left: 50%;
+    width: calc(375 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(500 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    transform: translate(-50%, -50%);
+  }
+  >.btn-group{
+    position: absolute;
+    bottom: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >button{
+      flex: 0 0 auto;
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+      font-weight: bold;
+      color: #484238;
+      line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+    >button:first-of-type{
+      background-image: url(@/assets/images/btn-long-bright.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button:last-of-type{
+      background-image: url(@/assets/images/btn-short-dark.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+  }
+}
+</style>

src/views/StepFive.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    setp1!!!!
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/StepFour.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    setp1!!!!
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/StepOne.vue

@@ -0,0 +1,14 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/StepSeven.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    setp1!!!!
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/StepSix.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    setp1!!!!
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/StepThree.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    setp1!!!!
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/StepTwo.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    setp1!!!!
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+
+</style>

vue.config.js

@@ -31,6 +31,7 @@ module.exports = defineConfig({
         mapState: ['vuex', 'mapState'],
         mapGetters: ['vuex', 'mapGetters'],
         mapMutations: ['vuex', 'mapMutations'],
+        useSizeAdapt: ['/src/useFunctions/useSizeAdapt.js', 'default'],
       }),
     ],
   },