切换模式页面

src/page-instrument/modeEntry/index.module.less

@@ -0,0 +1,40 @@
+.modeEntry {
+   width: 100vw;
+   height: 100vh;
+}
+
+.modeView {
+   position: fixed;
+   z-index: 99;
+   top: 0;
+   left: 0;
+   width: 100vw;
+   height: 100vh;
+   background: url(./images/bg.png) no-repeat;
+   background-size: 100% 100%;
+   .back {
+      position: absolute;
+      width: 38px;
+      height: 38px;
+      left: 27px;
+      top: 17px;
+   }
+   .name {
+      position: absolute;
+      left: 50%;
+      top: 23px;
+      transform: translateX(-50%);
+      width: 87px;
+      height: 21px;
+   }
+   .modeBox {
+      width: 100%;
+      margin-top: 90px;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 36px;
+      > img {
+         width: calc((100% - 2*40px)/3);
+      }
+   }
+}

src/page-instrument/modeEntry/index.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue"
+import styles from "./index.module.less"
+import ViewDetail from "../view-detail"
+import ModeView from "./modeView"
+import { headTopData } from "../header-top"
+
+export default defineComponent({
+   name: "modeEntry",
+   setup() {
+      return () => (
+         <div class={styles.modeEntry}>
+            <ViewDetail></ViewDetail>
+            {headTopData.modeType === "init" && <ModeView></ModeView>}
+         </div>
+      )
+   }
+})

src/page-instrument/modeEntry/modeView.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from "vue"
+import styles from "./index.module.less"
+import backImg from "./images/back.png"
+import nameImg from "./images/zt.png"
+import lxImg from "./images/lx.png"
+import glImg from "./images/gl.png"
+import pcImg from "./images/pc.png"
+import { headTopData } from "../header-top"
+
+export default defineComponent({
+   name: "modeView",
+   setup() {
+      return () => (
+         <div class={styles.modeView}>
+            <img src={backImg} class={styles.back} />
+            <img src={nameImg} class={styles.name} />
+            <div class={styles.modeBox}>
+               <img src={lxImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("practise")} />
+               <img src={glImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("follow")} />
+               <img src={pcImg} class={styles.modeImg} onClick={() => headTopData.handleChangeModeType("evaluating")} />
+            </div>
+         </div>
+      )
+   }
+})

src/page-instrument/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import Home from "./view-detail/index";
+import Home from "./modeEntry";
 import Notfind from "../view/notfind";
 
 const routes: RouteRecordRaw[] = [

vite.config.ts

@@ -78,8 +78,8 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
         // target: "https://dev.resource.colexiu.com",
-        // target: "https://test.kt.colexiu.com",
-        target: "https://mec.colexiu.com",
+         target: "https://test.kt.colexiu.com",
+        //target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),
       },