日常开发

src/assets/styles/index.scss

@@ -6,6 +6,9 @@
 body {
   margin: 0;
   background: radial-gradient(87% 87% at 9% -34%, #315F7E 0%, #0F1926 100%);
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
 }
 
 ul,
@@ -18,6 +21,3 @@ ul li {
   list-style: none;
 }
 
-// .messageBoxClass{
-
-// }

src/components/FaceWindow/index.vue

@@ -166,4 +166,13 @@ defineExpose({
     }
   }
 }
+@keyframes shineani {
+		0% {
+			top: -19vh;
+		}
+
+		100% {
+			top: 19vh;
+		}
+	}
 </style>

src/router/index.ts

@@ -15,7 +15,8 @@ const router = createRouter({
         { path: '/train', component: () => import('@/views/train/index.vue') },
         { path: '/train/test', component: () => import('@/views/train/test.vue') },
         { path: '/train/run', component: () => import('@/views/train/run.vue') },
-        { path: '/train/multiple', component: () => import('@/views/train/multiple.vue') }
+        { path: '/train/multiple', component: () => import('@/views/train/multiple.vue') },
+        { path: '/set', component: () => import('@/views/set/index.vue') }
       ]
     }
   ]

src/views/home/index.vue

@@ -1,10 +1,29 @@
 <template>
-  <div>
-    <div @click="getLogout">退出</div>
-    <div style="display: flex; justify-content: space-around;">
-      <div v-for="(item, index) in list1" :key="index" @click="getJump(item.url, item.name)">{{ item.name }}</div>
-      <div v-for="(item, index) in list2" :key="index" @click="getJump(item.url, item.name)">{{ item.name }}</div>
+  <div class="home">
+    <div class="logo"><img src="@/assets/images/logo.png" /></div>
+    <div class="menu">
+      <div class="left">
+        <div class="li" @click="getJump('/train', '自助锻炼')"><img src="@/assets/images/home/train.png" />
+        </div>
+      </div>
+      <div class="right">
+        <div class="right-top">
+          <div class="li" @click="getJump('/test', '测试')"><img src="@/assets/images/home/test.png" />
+          </div>
+          <div class="li" @click="getJump('/ranking', '排行榜')"><img src="@/assets/images/home/ranking.png" />
+          </div>
+        </div>
+        <div class="right-bottom">
+          <div class="li" @click="getJump('/competition', '竞赛')"><img src="@/assets/images/home/competition.png" />
+          </div>
+          <div class="li" @click="getJump('/course', '课程')"><img src="@/assets/images/home/course.png" />
+          </div>
+          <div class="li" @click="getJump('/set', '设置')"><img src="@/assets/images/home/set.png" />
+          </div>
+        </div>
+      </div>
     </div>
+
   </div>
 </template>
 
@@ -12,55 +31,6 @@
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 
-const list1 = [{
-  name: "自助锻炼",
-  en: "TRAINING",
-  icon: "../../static/images/home/train.png",
-  url: "/train",
-}];
-
-const list2 = [
-  {
-    name: "测试",
-    en: "TEST",
-    icon: "../../static/images/home/test.png",
-    url: "/test",
-  }, {
-    name: "竞赛",
-    en: "PE",
-    icon: "../../static/images/home/pe.png",
-    url: "/competition",
-  },
-  {
-    name: "排行榜",
-    en: "RANKING",
-    icon: "../../static/images/home/ranking.png",
-    url: "/ranking",
-  },
-  {
-    name: "课程",
-    en: "COURSE",
-    icon: "../../static/images/home/course.png",
-    url: "/course",
-  }
-];
-
-// 退出
-const getLogout = () => {
-  proxy?.$modal.confirm("确定退出吗？").then(() => {
-    proxy?.$modal.loading();
-    let params = {};
-    proxy?.$http.common.logout(params).then((res: any) => {
-    });
-  }).finally(() => {
-    proxy?.$modal?.closeLoading()
-    //清空缓存
-    localStorage.clear();
-    //跳转
-    router.push({ path: '/login' });
-  });
-};
-
 //跳转
 const getJump = (url: string, name: string) => {
   if (url == undefined || !url) {
@@ -75,4 +45,96 @@ onMounted(() => {
 })
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+$waiPadding: 6.51rem;
+
+.home {
+  width: 100vw;
+  height: 100vh;
+}
+
+.logo {
+  img {
+    width: 14.563rem;
+  }
+
+  position: absolute;
+  left: $waiPadding;
+  top: 5.19rem;
+}
+
+.menu {
+  width: calc(100% - ($waiPadding * 2));
+  padding-top: 10rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  line-height: 0;
+
+  .li {
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    transition: all 0.5s;
+
+    &:hover {
+      transform: scale(1.06);
+    }
+  }
+
+  .left {
+    width: 32.6%;
+
+    .li {
+      width: 100%;
+    }
+  }
+
+  .right {
+    width: calc(100% - 32.6%);
+    $myPadding: 1.22rem;
+
+    .right-top {
+      display: flex;
+      justify-content: space-between;
+      padding-left: $myPadding;
+      margin-bottom: $myPadding;
+
+      .li {
+        width: calc(50% - $myPadding /2);
+      }
+    }
+
+    .right-bottom {
+
+      display: flex;
+      justify-content: space-between;
+      padding-left: $myPadding;
+
+      .li:nth-child(1) {
+        width: calc(50% - $myPadding /2);
+      }
+
+      .li:nth-child(2),
+      .li:nth-child(3) {
+        width: calc((50% - $myPadding /2)/2 - $myPadding /2);
+      }
+    }
+
+  }
+}
+
+@media screen and (max-width: 1450px) {
+  $waiPadding: 13rem;
+
+  .logo {
+    left: $waiPadding;
+  }
+
+  .menu {
+    width: calc(100% - ($waiPadding * 2));
+  }
+}
+</style>

src/views/login/index.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="login">
-    <div class="login-logo"> <img src="@/assets/images/logo.png">
+    <div class="logo"> <img src="@/assets/images/logo.png">
       </img></div>
     <transition :enter-active-class="proxy?.animate.error.enter">
       <div class="login-content" :key="key">
         <div class="login-content-center">
-          <div class="login-title"> <img src="@/assets/images/login.png">
-            </img></div>
+          <div class="login-title"> <img src="@/assets/images/login.png" /></div>
           <div class="login-input-box">
             <div class="login-item">
               <input class="login-input login-input-username" type="text" placeholder="请输入帐号"
@@ -21,8 +20,7 @@
         </div>
       </div>
     </transition>
-    <div class="erweima"> <img src="@/assets/images/erweima.png">
-      </img>
+    <div class="erweima"> <img src="@/assets/images/erweima.png" />
       <span>扫码登录</span>
     </div>
   </div>
@@ -93,14 +91,16 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.login-logo {
+<style lang="scss" scoped>
+$waiPadding: 6.51rem;
+
+.logo {
   img {
     width: 14.563rem;
   }
 
   position: absolute;
-  left: 6.51rem;
+  left: $waiPadding;
   top: 5.19rem;
 }
 
@@ -196,4 +196,13 @@ onMounted(() => {
     padding-top: 3px;
   }
 }
+
+@media screen and (max-width: 1450px) {
+  $waiPadding: 13rem;
+
+  .logo {
+    left: $waiPadding;
+  }
+
+}
 </style>

src/views/set/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="set">
+    <div @click="getLogout">退出</div>
+    <div @click="getExit">返回</div>
+  </div>
+</template>
+
+<script setup name="Login" lang="ts">
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+
+
+// 退出
+const getLogout = () => {
+  proxy?.$modal.confirm("确定退出吗？").then(() => {
+    proxy?.$modal.loading();
+    let params = {};
+    proxy?.$http.common.logout(params).then((res: any) => {
+    });
+  }).finally(() => {
+    proxy?.$modal?.closeLoading()
+    //清空缓存
+    localStorage.clear();
+    //跳转
+    router.push({ path: '/login' });
+  });
+};
+
+/**
+ * 退出
+*/
+const getExit = () => {
+  router.go(-1);
+};
+
+onMounted(() => {
+
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/train/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <div class="train">
+    <div class="logo"> <img src="@/assets/images/logo.png">
+      </img></div>
     <div class="menu">
       <transition-group :enter-active-class="proxy?.animate.dialog.enter"
         :leave-active-class="proxy?.animate.dialog.leave">
@@ -21,6 +23,7 @@ const router = useRouter();
 const { proxy } = getCurrentInstance() as any;
 const optionWindowRef = ref();
 
+
 const data = reactive<any>({
   projectList: [],
   timerManager: {},
@@ -86,4 +89,14 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.logo {
+  img {
+    width: 14.563rem;
+  }
+
+  position: absolute;
+  left: 6.51rem;
+  top: 5.19rem;
+}
+</style>