hywen
/
YNUtdPlatform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

考试-人脸间断识别

This commit is contained in:
binbin_pan 2024-08-15 17:47:52 +08:00
parent f07dd475b3
commit 8aec346652
9 changed files with 410 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages.json
View File

@ -77,13 +77,13 @@
{
"path": "pages/YNEduApp/learnProj/learnProj",
"style": {
"navigationBarTitleText": "学习项目"
"navigationStyle": "custom"
}
},
{
"path": "pages/YNEduApp/learnProj/learnProjDetail",
"style": {
"navigationBarTitleText": "学习项目"
"navigationStyle": "custom"
}
},
{
@ -113,7 +113,7 @@
{
"path": "pages/YNEduApp/exam/exam",
"style": {
"navigationBarTitleText": "考试"
"navigationStyle": "custom"
}
},
{

21
pages/YNEduApp/exam/beforeExam.vue
View File

@ -10,7 +10,7 @@
<div class="explain">考试时长</div>
</div>
<div class="count-wrapper">
<u-icon name="/static/images/infinite.png"></u-icon>
<u-icon name="/static/images/infinite.png" size="21"></u-icon>
<div class="count">{{ count }}</div>
<div class="explain">考试次数</div>
</div>
@ -31,7 +31,14 @@
</div>
<!-- 确认进入考试弹框 -->
<u-modal :show="showModal" title="提示" :content="content" showCancelButton @cancel="showModal = false" @confirm="handleEnterExam"></u-modal>
<u-modal
:show="showModal"
title="提示"
:content="content"
showCancelButton
@cancel="showModal = false"
@confirm="handleEnterExam"
/>
</div>
</view>
</template>
@ -51,17 +58,17 @@ export default {
count: '不限次',
// 切屏次数
switchCount: '不限次',
content: '是否确认进入考试？'
content: '是否确认进入考试？'
}
},
methods: {
openModal() {
this.showModal = true
},
openModal() {
this.showModal = true
},
// 进入考试
handleEnterExam() {
uni.navigateTo({
url: '/pages/YNEduApp/exam/examination'
url: '/pages/YNEduApp/exam/examination'
})
}
}

8
pages/YNEduApp/exam/exam.vue
View File

@ -1,5 +1,6 @@
<template>
<view>
<u-navbar title="考试" @leftClick="leftClick" placeholder />
<div class="tab-wrapper">
<div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="handleTab(item, index)">
<div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
@ -111,6 +112,13 @@ export default {
uni.navigateTo({
url: '/pages/YNEduApp/exam/beforeExam'
})
uni.removeStorageSync('from')
uni.setStorageSync('from', '/pages/YNEduApp/exam/exam')
},
leftClick() {
uni.navigateTo({
url: '/pages/YNEduApp/index/index'
})
}
}
}

80
pages/YNEduApp/exam/examination.vue
View File

@ -97,18 +97,26 @@
<span style="color: #1989fa; margin: 0 5px">{{ unDoCount }}</span>
题尚未完成
</view>
<view style="text-align: center;">确定交卷</view>
<view style="text-align: center">确定交卷？</view>
</view>
</u-modal>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import face from '@/uni_modules/mcc-face/index.js'
export default {
data() {
return {
// 切屏次数
screenCount: 0,
showConfirmModal: false,
time: 30 * 60 * 1000,
random1: 0,
random2: 0,
// 答题时间
answerTime: 0,
currentIndex: 0,
@ -235,12 +243,35 @@ export default {
{ label: '对', value: 'A' },
{ label: '错', value: 'B' }
]
},
}
]
}
},
onShow: function () {
if (this.screenCount > 0) {
// 提示切屏次数
this.$refs.uToast.show({
message: '切屏次数: ' + this.screenCount,
duration: 1000
})
}
},
onHide: function () {
this.screenCount++
},
mounted() {
this.getList()
this.random1 = Math.floor(Math.random() * 100000) + 420000 // random1 在 7-13分钟之间
this.random2 = Math.floor(Math.random() * 100000) + 900000 // random2 在 15-19分钟之间
console.log('🚀 ~ mounted ~ this.random1:', this.random1, this.random2)
setTimeout(() => {
this.openFaceScan()
}, this.random1)
setTimeout(() => {
this.openFaceScan()
}, this.random2)
},
methods: {
// 获取列表
@ -297,7 +328,6 @@ export default {
// 如果是单选题与判断题 则只能选中一个 多选题可以选中多个
if (item.type == 1 || item.type == 3) {
this.$set(option, 'isActive', true)
// 单选题与判断题只能有一个是选中的, 如果当前是选中状态, 再次点击不做处理, 如果当前是未选中状态, 设置当前项为选中状态, 其他项为未选中状态
item.options.forEach((option, optIndex) => {
// 除了当前选中的其他都设置为未选中
if (optIndex != optionIndex) {
@ -352,6 +382,50 @@ export default {
uni.navigateTo({
url: '/pages/YNEduApp/exam/examinationDetails'
})
},
// 人脸识别
openFaceScan() {
face.open(['a', 'c'], e => {
console.log('🚀 ~ e-人脸识别:', e)
face.close()
uni.showToast({
title: '人脸识别成功',
icon: 'none'
})
// uni.request({
// url: publicPath + '/backstage/app/uploadPersonPhoto',
// method: 'POST',
// header: {
// 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
// Authorization: 'Bearer ' + uni.getStorageSync('token')
// },
// data: {
// base: e,
// idCard: uni.getStorageSync('idCard'),
// type: 1
// },
// success: res => {
// console.log(JSON.stringify(res))
// if (res.data.resMsg == '上传成功') {
// uni.showToast({
// icon: 'none',
// title: '上传成功'
// })
// } else if (res.data.resMsg == '不符合特征值') {
// uni.showToast({
// icon: 'none',
// title: '不符合人脸特征,请重新录入!'
// })
// } else {
// uni.showToast({
// icon: 'none',
// title: '操作失败,请重试!'
// })
// }
// },
// fail() {}
// })
})
}
}
}

71
pages/YNEduApp/exam/examinationDetails.vue
View File

@ -1,5 +1,8 @@
<template>
<view class="wrapper">
<div class="arrow-left">
<u-icon name="arrow-left" size="20" color="#fff" @click="handleArrow" />
</div>
<div class="result">
<div class="result-item">{{ result }}</div>
<div class="result-tip">最新记录</div>
@ -43,12 +46,10 @@
<div v-for="(item, index) in rankList" :key="index" class="rank-list">
<div class="icon">
<u-icon :name="item.icon" size="30"/>
<u-icon :name="iconLit[index]" size="30" />
<u-avatar :src="item.url" size="40" />
</div>
<div>
<div>{{ item.name }}</div>
</div>
<div>{{ item.name }}</div>
<div>{{ item.score }}</div>
<div>{{ item.scoreRate }}</div>
</div>
@ -57,7 +58,13 @@
<!-- 底部按钮 -->
<div class="bottom-btn">
<div class="btn">
<u-button size="small" shape="circle" text="考试记录" style="color: #1989fa; border-color: #1989fa;" @click="handleExamination"/>
<u-button
size="small"
shape="circle"
text="考试记录"
style="color: #1989fa; border-color: #1989fa"
@click="handleExamination"
/>
</div>
<div class="btn">
<u-button type="primary" size="small" shape="circle" text="重新考试" />
@ -87,6 +94,7 @@ export default {
duration: 120,
// 试题
questionCount: 100,
iconLit: ['/static/images/top-one.png', '/static/images/top-two.png', '/static/images/top-three.png'],
// 榜上有名 - 列表
rankList: [
{
@ -94,39 +102,40 @@ export default {
name: '张三',
url: 'https://cdn.uviewui.com/uview/album/1.jpg',
score: 80,
scoreRate: '80%',
icon: '/static/images/top-one.png'
scoreRate: '80%'
},
{
id: 2,
name: '李四',
url: 'https://cdn.uviewui.com/uview/album/1.jpg',
score: 70,
scoreRate: '70%',
icon: '/static/images/top-two.png'
scoreRate: '70%'
},
{
id: 3,
name: '王五',
url: 'https://cdn.uviewui.com/uview/album/1.jpg',
score: 60,
scoreRate: '60%',
icon: '/static/images/top-three.png'
scoreRate: '60%'
}
]
}
},
methods: {
handleExamination() {
uni.navigateTo({
url: '/pages/YNEduApp/exam/examinationList'
})
},
// 重新考试
handleResetExamination() {
}
}
methods: {
handleExamination() {
uni.navigateTo({
url: '/pages/YNEduApp/exam/examinationList'
})
},
// 重新考试
handleResetExamination() {},
handleArrow() {
const from = uni.getStorageSync('from')
uni.navigateTo({
url: from
})
}
}
}
</script>
@ -139,6 +148,12 @@ export default {
flex-direction: column;
justify-content: flex-start;
align-items: center;
.arrow-left {
position: fixed;
top: 50px;
left: 20px;
z-index: 99;
}
.result {
overflow: hidden;
@ -250,17 +265,17 @@ export default {
align-items: center;
font-size: 13px;
color: #333;
margin: 20px 10px;
margin: 20px 10px;
> div {
width: 25%;
text-align: center;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
}
}

9
pages/YNEduApp/exam/examinationResultDetails.vue
View File

@ -88,7 +88,7 @@
</div>
</div>
<div class="analysis">解析</div>
<div class="analysis"><u-icon name="/static/images/解析.png" style="margin-right: 5px;" />解析</div>
<div class="analysis-item">{{ item.analysis }}</div>
</div>
</div>
@ -199,7 +199,7 @@ export default {
}
],
rightAnswer: 'A',
userAnswer: 'B',
userAnswer: 'A',
analysis: '解析'
},
{
@ -466,6 +466,9 @@ export default {
item.isWrong = true
item.options.forEach(option => {
option.isError = option.value === item.userAnswer
if (option.value === item.rightAnswer) {
option.isRight = true
}
})
}
}
@ -712,6 +715,8 @@ export default {
font-size: 14px;
color: #333333;
font-weight: 800;
display: flex;
justify-content: flex-start;
}
.analysis-item {
height: 100px;

6
pages/YNEduApp/learnProj/learnProj.vue
View File

@ -1,5 +1,6 @@
<template>
<view class="page">
<u-navbar title="学习项目" @leftClick="leftClick" placeholder />
<view class="status-secs">
<view
v-for="(item, index) in statusList"
@ -207,6 +208,11 @@
uni.navigateTo({
url: `/pages/YNEduApp/learnProj/learnProjDetail?id=${id}`
})
},
leftClick() {
uni.navigateTo({
url: '/pages/YNEduApp/index/index'
})
}
}
}

521
pages/YNEduApp/learnProj/learnProjDetail.vue
View File

@ -1,8 +1,9 @@
<template>
<view class="page">
<view class="page">
<u-navbar title="学习项目" @leftClick="leftClick" placeholder />
<view class="proj-cont">
<h2 style="margin-bottom: 15rpx">这是标题</h2>
<span style="font-size: 12px; color: #B0B0B0">合格标准：学习进度完成100%，考试及格一场，练习通过一场</span>
<span style="font-size: 12px; color: #b0b0b0">合格标准：学习进度完成100%，考试及格一场，练习通过一场</span>
<view class="user-info">
<view class="info-lef">
<view class="avatar">
@ -32,24 +33,22 @@
</view>
</view>
</view>
<view class="tip">
已开启进度同步，其他途径的学习进度已自动同步
</view>
<view class="tip">已开启进度同步，其他途径的学习进度已自动同步</view>
<uni-collapse>
<uni-collapse-item title="理论学习">
<uni-list>
<uni-list-item
v-for="(item, index) in theoryLearnList"
:key="item.id"
title="课程"
:note="item.title"
clickable
:show-extra-icon="true"
:extra-icon="learnIconObj"
:rightText="item.percent + '%'"
@click="toggleTheoryLearn(item.id)"
v-for="(item, index) in theoryLearnList"
:key="item.id"
title="课程"
:note="item.title"
clickable
:show-extra-icon="true"
:extra-icon="learnIconObj"
:rightText="item.percent + '%'"
@click="toggleTheoryLearn(item.id)"
>
<!-- <template v-slot:footer>
<!-- <template v-slot:footer>
<liu-progressbar
:progress="item.percent"
color="#000"
@ -64,28 +63,36 @@
<uni-collapse-item title="理论练习">
<uni-list>
<uni-list-item
v-for="(item, index) in theoryPracList"
:key="item.id"
title="练习"
:note="item.title"
:rightText="item.ifPrac ? '已练习' : '未练习'"
clickable
:show-extra-icon="true"
:extra-icon="pracIconObj"
@click="toggleTheoryPrac(item.id)"
v-for="(item, index) in theoryPracList"
:key="item.id"
title="练习"
:note="item.title"
:rightText="item.ifPrac ? '已练习' : '未练习'"
clickable
:show-extra-icon="true"
:extra-icon="pracIconObj"
@click="toggleTheoryPrac(item.id)"
></uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="理论模拟考试">
<uni-list>
<uni-list-item title="练习" note="高压电取证理论学习"
showArrow></uni-list-item>
<uni-list-item
v-for="(item, index) in theoryExamList"
:key="item.id"
title="考试"
:note="item.title"
:rightText="item.ifExam ? '已考试' : '未考试'"
clickable
:show-extra-icon="true"
:extra-icon="pracIconObj"
@click="toggleTheoryExam(item.id)"
></uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="实操题目练习">
<uni-list>
<uni-list-item title="练习" note="高压电取证理论学习"
showArrow></uni-list-item>
<uni-list-item title="练习" note="高压电取证理论学习" showArrow></uni-list-item>
</uni-list>
</uni-collapse-item>
</uni-collapse>
@ -93,14 +100,10 @@
<view class="comment-area">
<h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
<view class="write-cmt">
<uni-icons style="color: #9B9B9B; margin-right: 1vw" type="compose" size="12"></uni-icons>
<uni-icons style="color: #9b9b9b; margin-right: 1vw" type="compose" size="12"></uni-icons>
写评论
</view>
<view
class="cmts"
v-for="(item, index) in commentList"
:key="index"
>
<view class="cmts" v-for="(item, index) in commentList" :key="index">
<view class="cmt-up">
<image :src="item.avatar"></image>
<span>{{ item.username }}</span>
@ -113,285 +116,265 @@
<view class="btm-sticky">
<view class="icons">
<view>
<uni-icons style="color: #1989FA; margin-right: 1vw" type="chat-filled" size="24"></uni-icons>
<uni-icons style="color: #1989fa; margin-right: 1vw" type="chat-filled" size="24"></uni-icons>
<span>23</span>
</view>
<view>
<uni-icons style="color: #1989FA; margin-right: 1vw" type="hand-up-filled" size="24"></uni-icons>
<uni-icons style="color: #1989fa; margin-right: 1vw" type="hand-up-filled" size="24"></uni-icons>
<span>12</span>
</view>
</view>
<view class="learn-btn">继续学习</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
projId: '',
starRate: 4,
learnIconObj: { color: '#1A63AC',size: '18', type: 'calendar' },
pracIconObj: { color: '#38B022',size: '18', type: 'compose' },
theoryLearnList: [
{ title: '高压电', id: 121, percent: 86 },
{ title: '氨基酸', id: 122, percent: 42 },
{ title: '维他命', id: 123, percent: 66 },
{ title: '电功率', id: 124, percent: 13 },
],
theoryPracList: [
{ title: '物理练习', id: 141, ifPrac: false },
{ title: '魔法练习', id: 142, ifPrac: true },
{ title: '近战练习', id: 143, ifPrac: true },
{ title: '远程练习', id: 144, ifPrac: false },
],
commentList: [
{ username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
{ username: '张三', avatar: '/static/eduImg/avatar.jpg', cont: '我感觉写得挺好' },
{ username: '李四', avatar: '/static/eduImg/avatar.jpg', cont: '+3' },
{ username: '孙笑川', avatar: '/static/eduImg/avatar.jpg', cont: '我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了' },
]
}
},
methods: {
toggleTheoryLearn(id) {
console.log(id)
uni.navigateTo({
url: '/pages/YNEduApp/learn/learn?id=' + id
})
},
toggleTheoryPrac(id) {
console.log(id)
uni.navigateTo({
url: '/pages/YNEduApp/prac/prac?id=' + id
})
},
},
onLoad(params) {
this.projId = params.id
console.log(this.projId)
export default {
data() {
return {
projId: '',
starRate: 4,
learnIconObj: { color: '#1A63AC', size: '18', type: 'calendar' },
pracIconObj: { color: '#38B022', size: '18', type: 'compose' },
theoryLearnList: [
{ title: '高压电', id: 121, percent: 86 },
{ title: '氨基酸', id: 122, percent: 42 },
{ title: '维他命', id: 123, percent: 66 },
{ title: '电功率', id: 124, percent: 13 }
],
theoryPracList: [
{ title: '物理练习', id: 141, ifPrac: false },
{ title: '魔法练习', id: 142, ifPrac: true },
{ title: '近战练习', id: 143, ifPrac: true },
{ title: '远程练习', id: 144, ifPrac: false }
],
theoryExamList: [
{ title: '物理考试', id: 161, ifExam: false },
{ title: '魔法考试', id: 162, ifExam: true },
{ title: '近战考试', id: 163, ifExam: true },
{ title: '远程考试', id: 164, ifExam: false }
],
commentList: [
{ username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
{ username: '张三', avatar: '/static/eduImg/avatar.jpg', cont: '我感觉写得挺好' },
{ username: '李四', avatar: '/static/eduImg/avatar.jpg', cont: '+3' },
{
username: '孙笑川',
avatar: '/static/eduImg/avatar.jpg',
cont: '我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了'
}
]
}
},
methods: {
toggleTheoryLearn(id) {
console.log(id)
uni.navigateTo({
url: '/pages/YNEduApp/learn/learn?id=' + id
})
},
}
toggleTheoryPrac(id) {
console.log(id)
uni.navigateTo({
url: '/pages/YNEduApp/prac/prac?id=' + id
})
},
toggleTheoryExam(id) {
console.log(id)
uni.navigateTo({
url: '/pages/YNEduApp/exam/beforeExam?id=' + id
})
// uni.setStorageSync('form', '/pages/YNEduApp/learnProj/learnProjDetail')
// 先清空之前设置的 form 路径 在重新设置
uni.removeStorageSync('from')
uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
},
leftClick() {
uni.navigateTo({
url: '/pages/YNEduApp/learnProj/learnProj'
})
}
},
onLoad(params) {
this.projId = params.id
console.log(this.projId)
}
}
</script>
<style lang="scss">
.page {
width: 100vw;
background-color: #f8f8f8;
box-sizing: border-box;
padding: 5vw;
position: relative;
.page{
width: 100vw;
background-color: #f8f8f8;
.proj-cont {
width: 100%;
box-sizing: border-box;
padding: 5vw;
position: relative;
.proj-cont{
padding: 30rpx 20rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
box-shadow: #f4f4f4 2px 2px;
.user-info {
width: 100%;
box-sizing: border-box;
padding: 30rpx 20rpx;
background-color: #fff;
border-radius: 20rpx;
height: 8vh;
display: flex;
flex-direction: column;
box-shadow: #F4F4F4 2px 2px;
margin-top: 2vh;
.user-info{
width: 100%;
height: 8vh;
display: flex;
margin-top: 2vh;
.info-lef{
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
.avatar{
width: 100%;
display: flex;
align-items: center;
image{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 1.5vw;
}
}
}
.info-rig{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
box-sizing: border-box;
color: #b0b0b0;
.rig-up{
display: flex;
align-items: center;
view{
span{
padding: 0 1vw;
}
}
}
}
}
.tip{
width: 100%;
margin: 2vh auto;
background-color: #F7F7F7;
font-size: 12px;
color: #9B9B9B;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 25rpx 15rpx;
}
}
.comment-area{
width: 100%;
box-sizing: border-box;
margin: 1vh auto;
padding: 30rpx 20rpx 5vh 20rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
box-shadow: #F4F4F4 2px 2px;
.write-cmt{
width: 100%;
margin: 2vh auto;
background-color: #F7F7F7;
font-size: 12px;
color: #9B9B9B;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 15rpx;
}
.cmts{
width: 100%;
.info-lef {
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
margin-bottom: 2vh;
.cmt-up{
justify-content: space-around;
.avatar {
width: 100%;
display: flex;
align-items: center;
font-weight: bold;
image{
image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 2vw;
margin-right: 1.5vw;
}
}
.cmt-dn{
box-sizing: border-box;
padding-left: calc(60rpx + 2vw);
}
}
}
.btm-sticky{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 8vh;
background-color: #fff;
border-top: 1px solid #D8D8D8;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 5vw;
.icons{
width: 40%;
.info-rig {
flex: 1;
display: flex;
justify-content: space-between;
view{
flex-direction: column;
justify-content: space-around;
box-sizing: border-box;
color: #b0b0b0;
.rig-up {
display: flex;
align-items: center;
span{
font-size: 16px;
color: #1A89FA;
font-weight: bold;
view {
span {
padding: 0 1vw;
}
}
}
}
.learn-btn{
width: 30%;
height: 60%;
background-color: #1A89FA;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 50rpx;
}
}
.tip {
width: 100%;
margin: 2vh auto;
background-color: #f7f7f7;
font-size: 12px;
color: #9b9b9b;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 25rpx 15rpx;
}
}
.comment-area {
width: 100%;
box-sizing: border-box;
margin: 1vh auto;
padding: 30rpx 20rpx 5vh 20rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
box-shadow: #f4f4f4 2px 2px;
.write-cmt {
width: 100%;
margin: 2vh auto;
background-color: #f7f7f7;
font-size: 12px;
color: #9b9b9b;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 15rpx;
}
.cmts {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 2vh;
.cmt-up {
display: flex;
align-items: center;
font-weight: bold;
image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 2vw;
}
}
.cmt-dn {
box-sizing: border-box;
padding-left: calc(60rpx + 2vw);
}
}
}
.btm-sticky {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 8vh;
background-color: #fff;
border-top: 1px solid #d8d8d8;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 5vw;
.icons {
width: 40%;
display: flex;
justify-content: space-between;
view {
display: flex;
align-items: center;
span {
font-size: 16px;
color: #1a89fa;
font-weight: bold;
}
}
}
.learn-btn {
width: 30%;
height: 60%;
background-color: #1a89fa;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 50rpx;
}
}
}
</style>

BIN
static/images/解析.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB