dlsx
/
virtualSimulation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设置路由跳转对接提交

Browse Source
main
JayChou 1 week ago
parent f5b1ab61a5
commit 09b405503a
7 changed files with 238 additions and 151 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/index.ts
  2. 50
      src/layout/index.vue
  3. 2
      src/layout/loginPage.vue
  4. 314
      src/layout/studyPage.vue
  5. 2
      src/permissions.ts
  6. 9
      src/utils/request.ts
  7. 2
      src/views/subjectTest/index.vue

8
src/api/index.ts
Unescape View File

@ -74,3 +74,11 @@ export const getExperiment = ()=>{
method:'get', method:'get',
}) })
} }
// 确认实验
export const submitExperiment = (data:any) => {
return request({
url:'/xnRecords/verifyExperimentaInfo',
method:"POST",
data
})
}

50
src/layout/index.vue
Unescape View File

@ -2,8 +2,9 @@
<div class="container-bgc"> <div class="container-bgc">
<div class="top"> <div class="top">
<div class="loginBtn"> <div class="loginBtn">
<p @click="loginFn">{{user.token?'已登录':'登录/注册'}}</p> <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
</div> </div>
<div class="title">{{ setting.title }}</div> <div class="title">{{ setting.title }}</div>
</div> </div>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
@ -17,19 +18,25 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; // import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
import userStore from '@/store/modules/user'; import userStore from "@/store/modules/user";
const user = userStore(); const user = userStore();
const setting = settingStore(); const setting = settingStore();
const router = useRouter() const router = useRouter();
console.log(setting.title); console.log(setting.title);
user.token ? router.push('/spacePage') : '' const loginFn = () => {
const loginFn=()=>{ // user.token ? router.push("/spacePage") : "";
router.push('/login')
if(user.token){
router.push("/spacePage")
return
} }
router.push("/login");
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -58,30 +65,29 @@ const loginFn=()=>{
} }
.loginBtn { .loginBtn {
position: absolute; position: absolute;
/* 清除浮动影响 */ /* 清除浮动影响 */
float: left; float: left;
/* 向左浮动 */ /* 向左浮动 */
top: 10px; top: 10px;
left: 230px; left: 230px;
border: 1px solid #33FEFE; border: 1px solid #33fefe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 142px; width: 142px;
height: 40px; height: 40px;
line-height: 37px; line-height: 37px;
background: linear-gradient(to bottom, #08B9C1, #0758B8); background: linear-gradient(to bottom, #08b9c1, #0758b8);
transform: skew(-30deg); transform: skew(-30deg);
cursor: pointer; cursor: pointer;
/* 在X轴方向倾斜 -35 度 */ /* 在X轴方向倾斜 -35 度 */
border-radius: 5%; border-radius: 5%;
p{ p {
transform: skew(30deg); transform: skew(30deg);
/* 反向倾斜，抵消父元素的变形 */ /* 反向倾斜，抵消父元素的变形 */
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
} }
} }
} }
} }
</style> </style>

2
src/layout/loginPage.vue
Unescape View File

@ -429,7 +429,7 @@ const login = async () => {
}; };
const res = await user.logIn(data); const res = await user.logIn(data);
if (res) { if (res) {
router.push('/') router.push('/studyPage')
} }
}; };

314
src/layout/studyPage.vue
Unescape View File

@ -1,157 +1,223 @@
<template> <template>
<div class="login_container"> <div class="login_container">
<div class="top"> <div class="top">
<div class="loginBtn"> <div class="loginBtn">
<p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p> <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
</div> </div>
<div class="title">{{ setting.title }}</div> <div class="submit">
</div> <p @click="submit">提交</p>
<div class="main-content"> </div>
<div class="box" :style="{ backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})` }" <div class="title">{{ setting.title }}</div>
@click="handleBoxClick(1)">
知识点学习
</div>
<div class="box" :style="{ backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})` }"
@click="handleBoxClick(2)">学习</div>
<div class="box" :style="{ backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})` }"
style="margin-bottom: 80px;" @click="handleBoxClick(3)">仿真实验</div>
</div>
</div> </div>
<div class="main-content">
<div
class="box"
:style="{
backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})`,
}"
@click="handleBoxClick(1)"
>
知识点学习
</div>
<div
class="box"
:style="{
backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})`,
}"
@click="handleBoxClick(2)"
>
学习
</div>
<div
class="box"
:style="{
backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})`,
}"
style="margin-bottom: 80px"
@click="handleBoxClick(3)"
>
仿真实验
</div>
</div>
</div>
</template> </template>
<script setup lang="ts" name="studyPage"> <script setup lang="ts" name="studyPage">
import { ref } from "vue" import { ref } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
const setting = settingStore(); const setting = settingStore();
import userStore from '@/store/modules/user'; import userStore from "@/store/modules/user";
import btn1 from '@/assets/images/btn1.png' import btn1 from "@/assets/images/btn1.png";
import btn2 from '@/assets/images/btn2.png' import btn2 from "@/assets/images/btn2.png";
console.log(btn1, 'btn1'); import { submitExperiment } from "@/api";
import { ElMessage } from "element-plus";
const router = useRouter() const router = useRouter();
const user = userStore(); const user = userStore();
const loginFn = () => { const loginFn = () => {
router.push('/login') // user.token ? router.push("/spacePage") : "";
}
if (user.token) {
router.push("/spacePage");
return;
}
router.push("/login");
};
const isBox1Clicked = ref(false); const isBox1Clicked = ref(false);
const isBox2Clicked = ref(false); const isBox2Clicked = ref(false);
const isBox3Clicked = ref(false); const isBox3Clicked = ref(false);
const handleBoxClick = (boxNumber) => { const handleBoxClick = (boxNumber) => {
isBox1Clicked.value = false; isBox1Clicked.value = false;
isBox2Clicked.value = false; isBox2Clicked.value = false;
isBox3Clicked.value = false; isBox3Clicked.value = false;
switch (boxNumber) { switch (boxNumber) {
case 1: case 1:
isBox1Clicked.value = true; isBox1Clicked.value = true;
// router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例 // router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例
router.push('/knowledgePage') router.push("/knowledgePage");
break; break;
case 2: case 2:
isBox2Clicked.value = true; isBox2Clicked.value = true;
// router.push('/page2'); router.push("/subjectTest");
break; break;
case 3: case 3:
isBox3Clicked.value = true; isBox3Clicked.value = true;
// router.push('/page3'); router.push("/");
break; break;
default: default:
break; break;
}
};
const submit = async () => {
await submitExperiment({ getStudyRecords_id: user.userInfo.id }).then(
(res: any) => {
console.log(res);
if (res.code == 500) {
ElMessage.error(res.message);
} else {
ElMessage.success(res.message);
}
} }
);
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.login_container { .login_container {
position: relative; position: relative;
width: 100%;
// height: 1080px;
min-height: 100vh;
background-color: #091d22;
background: url("../assets//images/bg1.png") no-repeat;
background-size: cover;
.top {
width: 100%; width: 100%;
// height: 1080px; height: 75px;
min-height: 100vh; text-align: center;
background-color: #091d22; font-size: 42px;
background: url("../assets//images/bg1.png") no-repeat; line-height: 75px;
font-style: italic;
background: url("../assets/images/topbgc.png") no-repeat;
// background-position: center bottom -10px;
background-size: cover; background-size: cover;
.top { .title {
width: 100%; color: #fff;
height: 75px; }
text-align: center;
font-size: 42px;
line-height: 75px;
font-style: italic;
background: url("../assets/images/topbgc.png") no-repeat;
// background-position: center bottom -10px;
background-size: cover;
.title { .loginBtn {
color: #fff; position: absolute;
} /* 清除浮动影响 */
float: left;
/* 向左浮动 */
top: 10px;
left: 230px;
border: 1px solid #33fefe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 142px;
height: 40px;
line-height: 37px;
background: linear-gradient(to bottom, #08b9c1, #0758b8);
transform: skew(-30deg);
cursor: pointer;
/* 在X轴方向倾斜 -35 度 */
border-radius: 5%;
.loginBtn { p {
position: absolute; transform: skew(30deg);
/* 清除浮动影响 */ /* 反向倾斜，抵消父元素的变形 */
float: left; font-size: 18px;
/* 向左浮动 */ color: #fff;
top: 10px; }
left: 230px; }
border: 1px solid #33FEFE; .submit {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); position: absolute;
width: 142px; /* 清除浮动影响 */
height: 40px; // float: right;
line-height: 37px; /* 向左浮动 */
background: linear-gradient(to bottom, #08B9C1, #0758B8); top: 10px;
transform: skew(-30deg); right: 230px;
cursor: pointer; border: 1px solid #33fefe;
/* 在X轴方向倾斜 -35 度 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5%; width: 142px;
height: 40px;
line-height: 37px;
background: linear-gradient(to bottom, #08b9c1, #0758b8);
transform: skew(-30deg);
cursor: pointer;
/* 在X轴方向倾斜 -35 度 */
border-radius: 5%;
p { p {
transform: skew(30deg); transform: skew(30deg);
/* 反向倾斜，抵消父元素的变形 */ /* 反向倾斜，抵消父元素的变形 */
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
} }
}
} }
}
} }
.main-content { .main-content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
// background: url("../assets/images/login.png") no-repeat;
background-position: center;
background-size: 50% auto;
flex-direction: column;
.box {
width: 520px;
height: 162px;
// background-color: #007BFF;
// background: url("../assets/images/btn2.png") no-repeat;
background-repeat: no-repeat;
margin: 30px 0 0 25px;
cursor: pointer;
background-repeat: no-repeat;
background-size: contain;
/* 让图片完整显示在盒子内 */
background-position: center;
/* 图片在盒子中水平和垂直居中 */
display: flex; display: flex;
/* 使用 flex 布局 */
justify-content: center; justify-content: center;
align-items: center; /* 水平居中 */
min-height: 100vh; // align-items: center;
margin: 0; /* 垂直居中 */
// background: url("../assets/images/login.png") no-repeat; color: white;
background-position: center; /* 设置文字颜色 */
background-size: 50% auto; text-align: center;
flex-direction: column; /* 文本居中对齐 */
font-size: 49px;
.box { font-weight: 700;
line-height: 190px;
width: 520px; }
height: 162px;
// background-color: #007BFF;
// background: url("../assets/images/btn2.png") no-repeat;
background-repeat: no-repeat;
margin: 30px 0 0 25px;
cursor: pointer;
background-repeat: no-repeat;
background-size: contain;
/* 让图片完整显示在盒子内 */
background-position: center;
/* 图片在盒子中水平和垂直居中 */
display: flex;
/* 使用 flex 布局 */
justify-content: center;
/* 水平居中 */
// align-items: center;
/* 垂直居中 */
color: white;
/* 设置文字颜色 */
text-align: center;
/* 文本居中对齐 */
font-size: 49px;
font-weight: 700;
line-height: 190px;
}
} }
</style> </style>

2
src/permissions.ts
Unescape View File

@ -6,7 +6,7 @@ const store = userStore(pinia);
router.beforeEach((to: any, from: any, next: any) => { router.beforeEach((to: any, from: any, next: any) => {
if (to.path === "/login") { if (to.path === "/login") {
if (store.token) { if (store.token) {
next("/"); next("/studyPage");
} else { } else {
next(); next();
} }

9
src/utils/request.ts
Unescape View File

@ -2,8 +2,9 @@
import axios from "axios"; import axios from "axios";
import pinia from "@/store"; import pinia from "@/store";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import {removeToken} from '@/utils/auth'
import userStore from "@/store/modules/user"; import userStore from "@/store/modules/user";
import router from '@/router'
// 创建axios实例 // 创建axios实例
const server = axios.create({ const server = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, baseURL: import.meta.env.VITE_APP_BASE_API,
@ -26,8 +27,14 @@ server.interceptors.response.use((response) => {
// useuserStore.clearStatus(); // useuserStore.clearStatus();
// return Promise.reject(response); // return Promise.reject(response);
} }
if(response.data.code=== 401){
ElMessage.error(response.data.message);
return Promise.reject(response);
}
if (response.data.code === 412) { if (response.data.code === 412) {
ElMessage.error(response.data.message); ElMessage.error(response.data.message);
removeToken()
router.push('/login')
return Promise.reject(response); return Promise.reject(response);
} }
return response.data; return response.data;

2
src/views/subjectTest/index.vue
Unescape View File

@ -157,7 +157,7 @@ import { useRouter } from 'vue-router';
// 退出答题 // 退出答题
const router = useRouter() const router = useRouter()
const resetAnswers = () => { const resetAnswers = () => {
router.push('/spacePage') router.push('/studyPage')
}; };
// 计时器相关变量 // 计时器相关变量
const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值 const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值

Write Preview
Loading…
Cancel
Save