2 Commits
24b8accbd1
...
88851daadb
| Author | SHA1 | Message | Date |
|---|---|---|---|
chenzhen
|
88851daadb |
结算分析跳转购买已完成、错题界面（刚开始）、答题页面（差返回后端的数据还要改一下，时间到了要提交）
|
2 months ago |
|
chenzhen
|
4f90d38c7b |
完成了答题界面的功能以及对应的结算界面的跳转
|
2 months ago |
20 changed files with 1716 additions and 607 deletions
-
237package-lock.json
-
1package.json
-
BINsrc/assets/buy.jpg
-
BINsrc/assets/enter.jpg
-
BINsrc/assets/false.jpg
-
BINsrc/assets/home.jpg
-
BINsrc/assets/huiche.png
-
BINsrc/assets/result.jpg
-
BINsrc/assets/return.jpg
-
BINsrc/assets/square.jpg
-
BINsrc/assets/true.jpg
-
7src/main.js
-
12src/router/index.js
-
42src/views/BuyView.vue
-
81src/views/HomeView.vue
-
175src/views/ProblemView.vue
-
348src/views/ReportView.vue
-
274src/views/ResultView.vue
-
114src/views/TestView.vue
-
1032src/views/TextView.vue
|
After Width: 1920 | Height: 970 | Size: 593 KiB |
|
After Width: 792 | Height: 159 | Size: 54 KiB |
|
After Width: 518 | Height: 349 | Size: 33 KiB |
|
After Width: 1920 | Height: 1040 | Size: 713 KiB |
|
After Width: 45 | Height: 45 | Size: 3.2 KiB |
|
After Width: 485 | Height: 397 | Size: 34 KiB |
|
After Width: 102 | Height: 129 | Size: 5.2 KiB |
|
After Width: 452 | Height: 273 | Size: 34 KiB |
|
After Width: 490 | Height: 341 | Size: 31 KiB |
@ -0,0 +1,42 @@ |
|||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<div class="enter" @click="enter"> |
||||
|
<img src="../assets/huiche.png" alt="返回上一页" class="img1"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default{ |
||||
|
name:'BuyView', |
||||
|
data(){ |
||||
|
return{ |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
enter(){ |
||||
|
this.$router.push({ |
||||
|
name:'ReportView' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.home{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-image: url('@/assets/buy.jpg'); |
||||
|
color: white; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.enter{ |
||||
|
position: relative; |
||||
|
top: 45px; |
||||
|
left: 360px; |
||||
|
} |
||||
|
.img1{ |
||||
|
width: 70px; |
||||
|
height: 60px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,175 @@ |
|||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<div class="top"> |
||||
|
<div class="img-top" @click="jump"> |
||||
|
<img src="../assets/return.jpg" alt="返回" class="img1"> |
||||
|
</div> |
||||
|
<span> |
||||
|
<h1>📈股票知识评测系统</h1> |
||||
|
</span> |
||||
|
<p>全方面评估您的股票投资知识水平，获取个性化学习建议</p> |
||||
|
</div> |
||||
|
<div class="popup-all" v-if="showDialog"> |
||||
|
<div class="popup-top" @click="closeDialog"></div> |
||||
|
<div class="popup-content"> |
||||
|
<h3>确认提示</h3> |
||||
|
<p>确定返回报告吗？</p> |
||||
|
<div class="popup-buttons"> |
||||
|
<button class="cancel-btn" @click="closeDialog">取消</button> |
||||
|
<button class="confirm-btn" @click="confirmExit">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="question-all"> |
||||
|
<div v-for="problem in currentProblem" :key="problem.id" class="question-card"> |
||||
|
<div class="question"> |
||||
|
<span class="text">{{problem.id}}、</span>{{ problem.stem }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="options"> |
||||
|
<lable class="option"> |
||||
|
<input type="radio"> |
||||
|
</lable> |
||||
|
<lable class="option"> |
||||
|
<input type="radio"> |
||||
|
</lable> |
||||
|
<lable class="option"> |
||||
|
<input type="radio"> |
||||
|
</lable> |
||||
|
<lable class="option"> |
||||
|
<input type="radio"> |
||||
|
</lable> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
showDialog: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
jump() { |
||||
|
this.showDialog = true; |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.showDialog = false; |
||||
|
}, |
||||
|
confirmExit() { |
||||
|
this.showDialog = false; |
||||
|
this.$router.push({ name: 'ReportView' }); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.home{ |
||||
|
min-height: 100vh; |
||||
|
width: 100%; |
||||
|
background-color: #24293c; |
||||
|
overflow:auto; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.top{ |
||||
|
background:#0c4a6e; |
||||
|
color: white; |
||||
|
padding: 30px; |
||||
|
margin-bottom: 10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.img-top{ |
||||
|
float: left; |
||||
|
} |
||||
|
.img-top:hover{ |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.img1{ |
||||
|
width: 30px; |
||||
|
height: 50px; |
||||
|
float: left; |
||||
|
} |
||||
|
h1{ |
||||
|
margin-bottom: 10px; |
||||
|
background: none; |
||||
|
font-size: 2.2em; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 1.2em; |
||||
|
margin-bottom: 10px; |
||||
|
background: none; |
||||
|
} |
||||
|
.popup-all{ |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
.popup-top{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(5px); |
||||
|
} |
||||
|
.popup-content{ |
||||
|
background-color: #f1f5f9; |
||||
|
padding: 20px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.3); |
||||
|
} |
||||
|
.popup-buttons{ |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
.cancel-btn{ |
||||
|
background-color: #f1f5f9; |
||||
|
color: #24293c; |
||||
|
border-radius: 10px; |
||||
|
border: transparent 0px ; |
||||
|
margin: 5px; |
||||
|
padding: 5px 10px; |
||||
|
} |
||||
|
.confirm-btn{ |
||||
|
background-color: #22608b; |
||||
|
color: #f1f5f9; |
||||
|
border-radius: 10px; |
||||
|
border: transparent 0px ; |
||||
|
margin: 5px; |
||||
|
padding: 5px 10px; |
||||
|
} |
||||
|
.content { |
||||
|
float: left; |
||||
|
width: calc(65% - 20px); |
||||
|
min-height: 920px; |
||||
|
border: #274779 solid 2px; |
||||
|
border-radius: 10px; |
||||
|
color: #f1f5f9; |
||||
|
padding: 20px 40px 50px; |
||||
|
margin-right: 20px; |
||||
|
background-color: #2a3147; |
||||
|
} |
||||
|
.question-all{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 30px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,348 @@ |
|||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<div class="top"> |
||||
|
<div @click="showConfirmDialog" class="ret-top"> |
||||
|
<img src="../assets/return.jpg" alt="返回" class="ret"> |
||||
|
</div> |
||||
|
<h1>📈股票知识评测系统</h1> |
||||
|
<p>全方面评估您的股票投资知识水平，获取个性化学习建议</p> |
||||
|
</div> |
||||
|
<div class="popup-block" v-if="showDialog"> |
||||
|
<div class="popup-top" @click="closeDialog"></div> |
||||
|
<div class="popup-content"> |
||||
|
<h3>确认提示</h3> |
||||
|
<p>确定要退出吗？</p> |
||||
|
<div class="popup-buttons"> |
||||
|
<button class="cancel-btn" @click="closeDialog">取消</button> |
||||
|
<button class="confirm-btn" @click="confirmExit">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<h1>系统分析报告</h1> |
||||
|
|
||||
|
<div class="right"> |
||||
|
<div class="right-top"> |
||||
|
<img src="../assets/square.jpg" alt="柱状图展示....." class="img3"> |
||||
|
<div class="right-top-left"> |
||||
|
<div v-show="score!=100" > |
||||
|
<img src="../assets/false.jpg" alt="继续努力....." class="img1"> |
||||
|
</div> |
||||
|
<div v-show="score==100" > |
||||
|
<img src="../assets/true.jpg" alt="你真棒....." class="img2"> |
||||
|
</div> |
||||
|
<div> |
||||
|
<p style="font-size: 2.2em;text-align: center;">您的分数是：{{this.score}}分</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="left"> |
||||
|
<p>最好的投资是投资自己，而最好的课程是，是适合你的课程</p><br> |
||||
|
<p>人无法赚到认知以外的钱，请根据测试结果，聚焦你的核心短板进行强化，扩大你的认知边界</p> |
||||
|
</div> |
||||
|
<div class="right-down"> |
||||
|
<div v-show="score==100"> |
||||
|
<p>恭喜您全部回答正确</p> |
||||
|
<p>接下还需巩固知识</p> |
||||
|
<p>推荐课程是：量能擒牛</p> |
||||
|
</div> |
||||
|
<div v-show="score!=100"> |
||||
|
<p>接下还需巩固知识</p> |
||||
|
<p>推荐课程是：量能擒牛</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content-button"> |
||||
|
<button class="check-btn" @click="goCheck">查看错题</button> |
||||
|
<button class="buy-btn" @click="goBuy">前往购买</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script scoped> |
||||
|
import axios from 'axios'; |
||||
|
export default{ |
||||
|
name: 'ReportView', |
||||
|
data() { |
||||
|
return { |
||||
|
showDialog:false, |
||||
|
score:0, |
||||
|
give: null |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
async getScore(){ |
||||
|
const submissionData = JSON.parse(localStorage.getItem('submissionData')); |
||||
|
console.log('第一个'+submissionData); |
||||
|
try{ |
||||
|
const res = await axios.post('http://192.168.40.41:8000/api/knowledge/scores',submissionData); |
||||
|
this.score = res.data.data[0].score; |
||||
|
console.log('第二个'+this.score); |
||||
|
}catch(err){ |
||||
|
console.log(err); |
||||
|
} |
||||
|
}, |
||||
|
showConfirmDialog() { |
||||
|
this.showDialog = true; |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.showDialog = false; |
||||
|
}, |
||||
|
confirmExit() { |
||||
|
this.showDialog = false; |
||||
|
this.$router.push('/'); |
||||
|
}, |
||||
|
goBuy() { |
||||
|
this.$router.push('/buy'); |
||||
|
}, |
||||
|
goCheck() { |
||||
|
this.$router.push('/problem'); |
||||
|
}, |
||||
|
}, |
||||
|
async mounted(){ |
||||
|
await this.getScore(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.ret{ |
||||
|
width: 30px; |
||||
|
height: 50px; |
||||
|
float: left; |
||||
|
} |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.top { |
||||
|
background: linear-gradient(135deg, #0c4a6e 100%); |
||||
|
color: white; |
||||
|
padding: 30px; |
||||
|
margin-bottom: 30px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.top h1 { |
||||
|
font-size: 2.2em; |
||||
|
margin-bottom: 10px; |
||||
|
background: none; |
||||
|
} |
||||
|
.top p { |
||||
|
font-size: 1.1em; |
||||
|
opacity: 0.9; |
||||
|
background: none; |
||||
|
} |
||||
|
.home { |
||||
|
min-height: 100vh; |
||||
|
width: 100%; |
||||
|
background-color: #24293c; |
||||
|
overflow: auto; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.ret-top { |
||||
|
float: left; |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.ret-top:hover { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.content{ |
||||
|
border: #274779 solid 2px; |
||||
|
border-radius: 50px; |
||||
|
padding: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #2f374d; |
||||
|
padding: 30px; |
||||
|
color: white; |
||||
|
} |
||||
|
.left{ |
||||
|
border: #274779 solid 2px; |
||||
|
border-radius: 50px; |
||||
|
padding: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #2f374d; |
||||
|
width: 30%; |
||||
|
top: 200px; |
||||
|
float: right; |
||||
|
margin: 10px 0; |
||||
|
padding: 20px; |
||||
|
color: #65befc; |
||||
|
} |
||||
|
|
||||
|
.right-top{ |
||||
|
border: #274779 solid 2px; |
||||
|
border-radius: 50px; |
||||
|
padding: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #2f374d; |
||||
|
width: 65%; |
||||
|
margin: 10px; |
||||
|
padding: 30px 40px; |
||||
|
float: left; |
||||
|
} |
||||
|
.img3{ |
||||
|
width: 600px; |
||||
|
height: 400px; |
||||
|
float: left; |
||||
|
margin: auto; |
||||
|
} |
||||
|
.right-top-left{ |
||||
|
float: right; |
||||
|
margin-right: 50px; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.right-down{ |
||||
|
border: #274779 solid 2px; |
||||
|
border-radius: 50px; |
||||
|
padding: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #2f374d; |
||||
|
width: 65%; |
||||
|
height: 300px; |
||||
|
float: left; |
||||
|
margin: 10px; |
||||
|
padding-top: 40px; |
||||
|
padding-left: 60px; |
||||
|
clear: right; |
||||
|
} |
||||
|
.content::after { |
||||
|
content: ""; |
||||
|
display: table; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.ret-top { |
||||
|
float: left; |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.ret-top:hover { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.popup-block { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.popup-top { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(5px); |
||||
|
} |
||||
|
|
||||
|
.popup-content { |
||||
|
position: relative; |
||||
|
background: white; |
||||
|
padding: 30px; |
||||
|
border-radius: 15px; |
||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
||||
|
max-width: 400px; |
||||
|
width: 90%; |
||||
|
text-align: center; |
||||
|
z-index: 1001; |
||||
|
animation: dialogSlideIn 0.3s ease-out; |
||||
|
} |
||||
|
|
||||
|
.popup-content h3 { |
||||
|
color: #333; |
||||
|
margin-bottom: 15px; |
||||
|
font-size: 1.4em; |
||||
|
} |
||||
|
|
||||
|
.popup-content p { |
||||
|
color: #666; |
||||
|
margin-bottom: 25px; |
||||
|
font-size: 2.2em; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.popup-buttons { |
||||
|
display: flex; |
||||
|
gap: 15px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn, .confirm-btn { |
||||
|
padding: 12px 30px; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
font-size: 1em; |
||||
|
font-weight: bold; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
min-width: 100px; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn { |
||||
|
background: #f1f1f1; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn:hover { |
||||
|
background: #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.confirm-btn { |
||||
|
background: #ff4757; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.confirm-btn:hover { |
||||
|
background: #ff3742; |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
.img1,.img2{ |
||||
|
width: 270px; |
||||
|
height: 180px; |
||||
|
float: left; |
||||
|
margin: auto; |
||||
|
} |
||||
|
.right-down p{ |
||||
|
font-size: 2.2em; |
||||
|
line-height: 1.5; |
||||
|
color: #65befc; |
||||
|
} |
||||
|
.left p{ |
||||
|
font-size: 2.2em; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
.content-button{ |
||||
|
margin-top: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.buy-btn,.check-btn{ |
||||
|
position: relative; |
||||
|
top:200px; |
||||
|
padding: 12px 30px; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
font-size: 2em; |
||||
|
font-weight: bold; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
min-width: 100px; |
||||
|
background-color: #22608b; |
||||
|
color: white; |
||||
|
margin:40px; |
||||
|
float: right; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,274 @@ |
|||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<div class="top"> |
||||
|
<div @click="showConfirmDialog" class="ret-top"> |
||||
|
<img src="../assets/return.jpg" alt="返回" class="ret"> |
||||
|
</div> |
||||
|
<h1>📈股票知识评测系统</h1> |
||||
|
<p>全方面评估您的股票投资知识水平，获取个性化学习建议</p> |
||||
|
</div> |
||||
|
<div class="popup-block" v-if="showDialog"> |
||||
|
<div class="popup-top" @click="closeDialog"></div> |
||||
|
<div class="popup-content"> |
||||
|
<h3>确认提示</h3> |
||||
|
<p>还未查看分析报告，确定要退出吗？</p> |
||||
|
<div class="popup-buttons"> |
||||
|
<button class="cancel-btn" @click="closeDialog">取消</button> |
||||
|
<button class="confirm-btn" @click="confirmExit">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="block"> |
||||
|
<div class="section"> |
||||
|
<p class="p1">恭喜您完成测评</p> |
||||
|
<img src="../assets/result.jpg" alt="完成测评" class="result"> |
||||
|
<div class="p2" @click="show"> |
||||
|
<p>查看分析报告</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default{ |
||||
|
name: 'ResultView', |
||||
|
data() { |
||||
|
return { |
||||
|
showDialog:false |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
show(){ |
||||
|
this.$router.push('/report'); |
||||
|
}, |
||||
|
// 显示确认弹框 |
||||
|
showConfirmDialog() { |
||||
|
this.showDialog = true; |
||||
|
}, |
||||
|
// 关闭弹框 |
||||
|
closeDialog() { |
||||
|
this.showDialog = false; |
||||
|
}, |
||||
|
|
||||
|
// 确认退出 |
||||
|
confirmExit() { |
||||
|
this.showDialog = false; |
||||
|
// 跳转到首页 |
||||
|
this.$router.push('/'); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.home { |
||||
|
min-height: 100vh; |
||||
|
width: 100%; |
||||
|
background-color: #24293c; |
||||
|
overflow: auto; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.top { |
||||
|
background: linear-gradient(135deg, #0c4a6e 100%); |
||||
|
color: white; |
||||
|
padding: 30px; |
||||
|
margin-bottom: 30px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.top h1 { |
||||
|
font-size: 2.2em; |
||||
|
margin-bottom: 10px; |
||||
|
background: none; |
||||
|
} |
||||
|
|
||||
|
.top p { |
||||
|
font-size: 1.1em; |
||||
|
opacity: 0.9; |
||||
|
background: none; |
||||
|
} |
||||
|
|
||||
|
.ret { |
||||
|
width: 30px; |
||||
|
height: 50px; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
height: 750px; |
||||
|
width: 100%; |
||||
|
min-height: 600px; |
||||
|
border: #274779 solid 2px; |
||||
|
border-radius: 10px; |
||||
|
color: #f1f5f9; |
||||
|
padding: 40px 20px; |
||||
|
background-color: #2a3147; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.block { |
||||
|
width: 100%; |
||||
|
max-width: 800px; |
||||
|
} |
||||
|
|
||||
|
.section { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.p1 { |
||||
|
font-size: clamp(2rem, 5vw, 3.5rem); |
||||
|
font-weight: bold; |
||||
|
color: #f1f5f9; |
||||
|
text-align: center; |
||||
|
margin: 0; |
||||
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); |
||||
|
} |
||||
|
|
||||
|
.result { |
||||
|
width: min(210px, 30vw); |
||||
|
height: auto; |
||||
|
max-width: 100%; |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.p2 { |
||||
|
width: min(280px, 80vw); |
||||
|
height: 60px; |
||||
|
background: linear-gradient(135deg, #22608b, #2c7cb0); |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
border-radius: 12px; |
||||
|
font-size: 1.2rem; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 0 auto; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
border: 2px solid rgba(255,255,255,0.1); |
||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
||||
|
} |
||||
|
|
||||
|
.p2:hover { |
||||
|
transform: translateY(-3px); |
||||
|
box-shadow: 0 6px 20px rgba(0,0,0,0.3); |
||||
|
background: linear-gradient(135deg, #2c7cb0, #3498db); |
||||
|
} |
||||
|
|
||||
|
.p2 p { |
||||
|
margin: 0; |
||||
|
font-weight: bold; |
||||
|
font-size: clamp(1rem, 3vw, 1.3rem); |
||||
|
} |
||||
|
.ret-top { |
||||
|
float: left; |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.ret-top:hover { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
.popup-block { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.popup-top { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(5px); |
||||
|
} |
||||
|
|
||||
|
.popup-content { |
||||
|
position: relative; |
||||
|
background: white; |
||||
|
padding: 30px; |
||||
|
border-radius: 15px; |
||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
||||
|
max-width: 400px; |
||||
|
width: 90%; |
||||
|
text-align: center; |
||||
|
z-index: 1001; |
||||
|
animation: dialogSlideIn 0.3s ease-out; |
||||
|
} |
||||
|
|
||||
|
.popup-content h3 { |
||||
|
color: #333; |
||||
|
margin-bottom: 15px; |
||||
|
font-size: 1.4em; |
||||
|
} |
||||
|
|
||||
|
.popup-content p { |
||||
|
color: #666; |
||||
|
margin-bottom: 25px; |
||||
|
font-size: 1.1em; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.popup-buttons { |
||||
|
display: flex; |
||||
|
gap: 15px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn, .confirm-btn { |
||||
|
padding: 12px 30px; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
font-size: 1em; |
||||
|
font-weight: bold; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
min-width: 100px; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn { |
||||
|
background: #f1f1f1; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn:hover { |
||||
|
background: #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.confirm-btn { |
||||
|
background: #ff4757; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.confirm-btn:hover { |
||||
|
background: #ff3742; |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
</style> |
||||
1032
src/views/TextView.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue