parent
50aa26a040
commit
4c09c6d099
10 changed files with 628 additions and 203 deletions
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 170 KiB |
@ -0,0 +1,237 @@ |
|||||||
|
<template> |
||||||
|
<div class="login_container"> |
||||||
|
<div class="top"> |
||||||
|
<div class="loginBtn"> |
||||||
|
<p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p> |
||||||
|
</div> |
||||||
|
<div class="title">{{ setting.title }}</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="main-content"> |
||||||
|
<div class="personal-center"> |
||||||
|
<div class="leftBox"> |
||||||
|
<h2>个人中心</h2> |
||||||
|
<p>学生8527</p> |
||||||
|
<button class="btn1" @click="handleHomeClick">首页</button> |
||||||
|
<button class="btn2" @click="handleRecordClick">学习/成绩记录</button> |
||||||
|
<button class="btn3" @click="handlePasswordClick">密码管理</button> |
||||||
|
</div> |
||||||
|
<div class="rightBoxes"> |
||||||
|
<div class="topBox"></div> |
||||||
|
<div class="bottomBox"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts" name="spacePage"> |
||||||
|
|
||||||
|
import { ref } from "vue" |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
import settingStore from "@/store/modules/setting"; |
||||||
|
const setting = settingStore(); |
||||||
|
import userStore from '@/store/modules/user'; |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
const user = userStore(); |
||||||
|
const loginFn = () => { |
||||||
|
router.push('/login') |
||||||
|
} |
||||||
|
const handleHomeClick = () => { |
||||||
|
// 处理首页按钮点击逻辑，如路由跳转 |
||||||
|
console.log('首页按钮被点击'); |
||||||
|
}; |
||||||
|
const handleRecordClick = () => { |
||||||
|
console.log('学习/成绩记录按钮被点击'); |
||||||
|
}; |
||||||
|
const handlePasswordClick = () => { |
||||||
|
console.log('密码管理按钮被点击'); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.login_container { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
// height: 1080px; |
||||||
|
min-height: 100vh; |
||||||
|
background-color: #091d22; |
||||||
|
background: url("../assets//images/bg3.png") no-repeat; |
||||||
|
background-size: cover; |
||||||
|
|
||||||
|
.top { |
||||||
|
width: 100%; |
||||||
|
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 { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.loginBtn { |
||||||
|
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轴方向倾斜 -30 度 */ |
||||||
|
border-radius: 5%; |
||||||
|
|
||||||
|
p { |
||||||
|
transform: skew(30deg); |
||||||
|
/* 反向倾斜，抵消父元素的变形 */ |
||||||
|
font-size: 18px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.main-content { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.personal-center { |
||||||
|
display: flex; |
||||||
|
width: 1800px; |
||||||
|
height: 600px; |
||||||
|
margin-top: 150px; |
||||||
|
justify-content: space-evenly; |
||||||
|
|
||||||
|
.leftBox { |
||||||
|
position: relative; |
||||||
|
width: 550px; |
||||||
|
height: 600px; |
||||||
|
background: url("../assets/images/space1.png") no-repeat; |
||||||
|
transform: skewX(-5deg); |
||||||
|
margin-right: -80px; |
||||||
|
// flex-direction: column; |
||||||
|
|
||||||
|
h2 { |
||||||
|
position: absolute; |
||||||
|
top: 5px; |
||||||
|
left: 58%; |
||||||
|
transform: translateX(-50%); |
||||||
|
color: #ededd8; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 700; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
position: absolute; |
||||||
|
top: 26%; |
||||||
|
left: 52%; |
||||||
|
transform: translateX(-50%); |
||||||
|
color: #fdeda0; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 700; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
.btn1, |
||||||
|
.btn2, |
||||||
|
.btn3 { |
||||||
|
display: block; |
||||||
|
width: 200px; |
||||||
|
height: 55px; |
||||||
|
background-color: #e9ddab; |
||||||
|
margin: 10px auto; |
||||||
|
border: none; |
||||||
|
border-radius: 5px; |
||||||
|
color: #333; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 700; |
||||||
|
transform: skewX(-17deg); |
||||||
|
} |
||||||
|
|
||||||
|
.btn1 { |
||||||
|
position: absolute; |
||||||
|
top: 268px; |
||||||
|
left: 28%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn2 { |
||||||
|
position: absolute; |
||||||
|
left: 24%; |
||||||
|
top: 360px; |
||||||
|
} |
||||||
|
.btn3 { |
||||||
|
position: absolute; |
||||||
|
left: 20%; |
||||||
|
top: 453px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rightBoxes { |
||||||
|
width: 1200px; |
||||||
|
height: 600px; |
||||||
|
// background-color: skyblue; |
||||||
|
// flex: 1; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
flex-direction: column; |
||||||
|
transform: skewX(-17deg); |
||||||
|
|
||||||
|
.topBox { |
||||||
|
// width: 800px; |
||||||
|
// height: 300px; |
||||||
|
flex: 1; |
||||||
|
background-color: lightgreen; |
||||||
|
background: url("../assets/images/space2.png") no-repeat; |
||||||
|
// display: flex; |
||||||
|
// justify-content: center; |
||||||
|
// align-items: center; |
||||||
|
transform: skewX(15deg); |
||||||
|
} |
||||||
|
|
||||||
|
.bottomBox { |
||||||
|
margin-top: 36px; |
||||||
|
flex: 1; |
||||||
|
// width: 800px; |
||||||
|
// height: 200px; |
||||||
|
background-color: lightcoral; |
||||||
|
background: url("../assets/images/space3.png") no-repeat; |
||||||
|
// display: flex; |
||||||
|
// justify-content: center; |
||||||
|
// align-items: center; |
||||||
|
transform: skewX(15deg); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// .personal-center { |
||||||
|
// background-color: #003366; |
||||||
|
// padding: 20px; |
||||||
|
// color: white; |
||||||
|
// border-radius: 10px; |
||||||
|
// transform: skewX(-15deg); |
||||||
|
// display: flex; |
||||||
|
|
||||||
|
|
||||||
|
// }</style> |
||||||
@ -0,0 +1,155 @@ |
|||||||
|
<template> |
||||||
|
<div class="login_container"> |
||||||
|
<div class="top"> |
||||||
|
<div class="loginBtn"> |
||||||
|
<p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p> |
||||||
|
</div> |
||||||
|
<div class="title">{{ setting.title }}</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})` }" |
||||||
|
@click="handleBoxClick(3)">仿真实验</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts" name="studyPage"> |
||||||
|
import { ref } from "vue" |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
import settingStore from "@/store/modules/setting"; |
||||||
|
const setting = settingStore(); |
||||||
|
import userStore from '@/store/modules/user'; |
||||||
|
import btn1 from '@/assets/images/btn1.png' |
||||||
|
import btn2 from '@/assets/images/btn2.png' |
||||||
|
console.log(btn1, 'btn1'); |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
const user = userStore(); |
||||||
|
const loginFn = () => { |
||||||
|
router.push('/login') |
||||||
|
} |
||||||
|
const isBox1Clicked = ref(false); |
||||||
|
const isBox2Clicked = ref(false); |
||||||
|
const isBox3Clicked = ref(false); |
||||||
|
const handleBoxClick = (boxNumber) => { |
||||||
|
isBox1Clicked.value = false; |
||||||
|
isBox2Clicked.value = false; |
||||||
|
isBox3Clicked.value = false; |
||||||
|
switch (boxNumber) { |
||||||
|
case 1: |
||||||
|
isBox1Clicked.value = true; |
||||||
|
// router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例 |
||||||
|
break; |
||||||
|
case 2: |
||||||
|
isBox2Clicked.value = true; |
||||||
|
// router.push('/page2'); |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
isBox3Clicked.value = true; |
||||||
|
// router.push('/page3'); |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.login_container { |
||||||
|
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%; |
||||||
|
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 { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.loginBtn { |
||||||
|
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%; |
||||||
|
|
||||||
|
p { |
||||||
|
transform: skew(30deg); |
||||||
|
/* 反向倾斜，抵消父元素的变形 */ |
||||||
|
font-size: 18px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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: 10px; |
||||||
|
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> |
||||||
Loading…
Reference in new issue