搞搞搞

.eslintrc.js

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

src/App.vue

@@ -1,17 +1,34 @@
 <template>
   <div class="app-view">
+    <h1>{{ title }}</h1>
+    <progress-comp
+      class="progress"
+      :cur-idx="curStep"
+    />
+    <div class="test" />
     <router-view />
   </div>
 </template>
 
-<script>
+<script setup>
 // import { onClickOutside } from '@vueuse/core'
+import ProgressComp from "@/components/ProgressComp.vue"
+import { computed, inject, ref } from 'vue'
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+inject('$uaInfo')
+inject('$env')
+
+const curStep = ref(0)
+
+const title = computed(() => {
+  return config.stepList[curStep.value].name
+})
 
-export default {
-  inject: ['$uaInfo', '$env'],
-  mounted() {
-  }
-}
 </script>
 
 <style lang="less">
@@ -86,7 +103,7 @@ input, textarea {
 // }
 </style>
 
-<style lang="less">
+<style lang="less" scoped>
 .app-view{
   position: absolute;
   left: 0;
@@ -97,5 +114,32 @@ input, textarea {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
+  >h1{
+    position: absolute;
+    top: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.progress{
+    position: absolute;
+    left: 50%;
+    top: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    transform: translateX(-50%);
+  }
+  >.test{
+    position: absolute;
+    left: 50%;
+    top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    background-color: #fff;
+  }
 }
 </style>

src/components/ProgressComp.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="progress">
+    <div
+      v-for="idx in 6"
+      :key="idx"
+      class="node"
+      :class="{
+        active: curIdx === idx - 1,
+      }"
+    >
+      <div
+        class="outer-ring"
+      />
+    </div>
+    <div class="line" />
+  </div>
+</template>
+
+<script setup>
+defineProps(['curIdx'])
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+</script>
+
+<style lang="less" scoped>
+.progress{
+  background-color: red;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  >.node{
+    width: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    height: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    border-radius: 50%;
+    background: #BFAA94;
+    position: relative;
+    z-index: 1;
+    >.outer-ring{
+      display: none;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      border: 1px dashed #FFE096;
+      width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+      height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+  }
+  >.node.active{
+    background: rgba(255, 224, 150, 1);
+    >.outer-ring{
+      display: initial;
+    }
+  }
+  >.line{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height:0;
+    border-top: 1px dashed #BFAA94;
+    transform: translateY(-50%);
+    z-index: 0;
+  }
+}
+</style>

src/config.js

@@ -1,2 +1,22 @@
 export default {
+  stepList: [
+    {
+      name: '完成线稿',
+    },
+    {
+      name: '将线稿复写至胶板上',
+    },
+    {
+      name: '雕刻胶版',
+    },
+    {
+      name: '用滚筒将颜料铺平',
+    },
+    {
+      name: '蒙上版画纸，用木蘑菇压实',
+    },
+    {
+      name: '完成转印',
+    },
+  ]
 }

src/views/StartView.vue

@@ -13,7 +13,9 @@
       draggable="false"
     >
     <div class="btn-group">
-      <button>体验版画过程</button>
+      <button @click="$router.push({name: 'StepOne'})">
+        体验版画过程
+      </button>
       <button>分享</button>
     </div>
   </div>