Skip to content

P
pica-professional-exam
提交 8ebfc0fd 编写于 作者: yi.li's avatar yi.li
浏览文件
操作

把学科详情页头部抽成组件

上级 e9bec694
隐藏空白字符变更
内嵌 并排
正在显示 包含 136 行增加 和 120 行删除
src/components/question/directory-info.vue 0 → 100644
浏览文件 @ 8ebfc0fd
<template>
<div class="fixed-qb-header">
<div class="header-info" :class="!isWeb ? 'top-set' : ''">
<div class="info-first">
<img v-if="directoryInfo.avatarImageUrl" :src="directoryInfo.avatarImageUrl">
<img v-if="!directoryInfo.avatarImageUrl" src="../../images/question/portrait.png">
<div class="infor">
<p class="name">{{directoryInfo.name}} 医生</p>
<p class="question-result">已做题<span>{{directoryInfo.finishedNum}}</span>错误题<span class="err">{{directoryInfo.wrongTitle}}</span>正确率<span class="suc">{{directoryInfo.correctRatio}}%</span></p>
</div>
</div>
<div class="info-second">
<div class="item" @click="wrongBook(1)"><img src="../../images/question/text.png">错题集<span v-if="directoryInfo.wrongTitleBook">({{directoryInfo.wrongTitleBook}})</span></div>
<div class="item" @click="wrongBook(2)"><img src="../../images/question/heart-h.png">收藏<span v-if="directoryInfo.collectTitleBook">({{directoryInfo.collectTitleBook}})</span></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isWeb: window.__isWeb,
}
},
props: {
directoryInfo: {
type: Object,
default: () => {}
},
},
methods: {
wrongBook(type) {
this.$emit('handlerBook',type)
},
},
}
</script>
<style lang="less" scoped>
.fixed-qb-header{
position: relative;
.header-info{
position: fixed;
z-index: 200;
background-color: #FFFFFF;
padding: 0 16px;
box-sizing: border-box;
width: 100%;
&.top-set{
top: 73px;
}
.info-first{
display: flex;
padding: 20px 0;
img{
width: 44px;
height: 44px;
border-radius: 50%;
}
.infor{
margin-left: 12px;
.name{
color: #373839;
font-size: 18px;
font-weight: 700;
line-height: 22px;
}
.question-result{
font-size: 14px;
color: #676869;
line-height: 16px;
margin-top: 9px;
span{
margin-left: 3px;
margin-right: 15px;
color: #373839;
&.err{
color: #ED3131;
}
&.suc{
color: #449284;
}
}
}
}
}
.info-second{
display: flex;
justify-content: space-between;
align-items: center;
.item{
width: 165.5px;
height: 40px;
/*line-height: 40px;*/
text-align: center;
border-radius: 6px;
background-color: #F8F9FA;
font-size: 14px;
font-weight: 700;
color: #373839;
display: flex;
align-items: center;
justify-content: center;
img{
width: 20px;
height: 20px;
margin-right: 8px;
}
span{
font-size: 12px;
margin-left: 2px;
height: 40px;
line-height: 40px;
}
}
}
}
}
</style>
src/views/question-bank.vue
浏览文件 @ 8ebfc0fd
......@@ -8,22 +8,7 @@
:isFixNavbar="isFixNavbar"
borderStyle="1px solid #fff"
></CommonNavbar>
<div class="fixed-qb-header">
<div class="header-info" :class="!isWeb ? 'top-set' : ''">
<div class="info-first">
<img v-if="directoryInfo.avatarImageUrl" :src="directoryInfo.avatarImageUrl">
<img v-if="!directoryInfo.avatarImageUrl" src="../images/question/portrait.png">
<div class="infor">
<p class="name">{{directoryInfo.name}} 医生</p>
<p class="question-result">已做题<span>{{directoryInfo.finishedNum}}</span>错误题<span class="err">{{directoryInfo.wrongTitle}}</span>正确率<span class="suc">{{directoryInfo.correctRatio}}%</span></p>
</div>
</div>
<div class="info-second">
<div class="item" @click="wrongBook"><img src="../images/question/text.png">错题集<span v-if="directoryInfo.wrongTitleBook">({{directoryInfo.wrongTitleBook}})</span></div>
<div class="item" @click="collectBook"><img src="../images/question/heart-h.png">收藏<span v-if="directoryInfo.collectTitleBook">({{directoryInfo.collectTitleBook}})</span></div>
</div>
</div>
</div>
<DirectoryInfo :directoryInfo="directoryInfo" @handlerBook="handlerBook"></DirectoryInfo>
<div class="question-bank-content" :class="!isWeb ? 'add-padding' : ''">
<div class="question-intro" v-if="directoryInfo.directoryImageUrl || directoryInfo.directoryIntro">
<img v-if="directoryInfo.directoryImageUrl" :src="directoryInfo.directoryImageUrl">
......@@ -77,6 +62,7 @@
import ChangeCard from "@/components/cme/change-card";
import CourseDialog from "@/components/course/course-dialog";
import Loading from "@/components/common/common-loading";
import DirectoryInfo from "@/components/question/directory-info";
import {Progress, Toast} from 'vant';
import { mapGetters, mapActions } from "vuex";
import { getWebPageUrl } from "@/utils/index";
......@@ -87,7 +73,8 @@ export default {
ChangeCard,
Progress,
CourseDialog,
Loading
Loading,
DirectoryInfo
},
data() {
return {
......@@ -298,25 +285,16 @@ export default {
this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
}
},
//错题集
wrongBook() {
this.checkTokenForNative(() => {
this.$router.push({
path: '/question-detail',
query: {
directoryId: 0,
secondSubjectId: this.secondSubjectId,
cardType: this.directoryInfo.cardType,
goodsType : this.directoryInfo.goodsType,
commitKind : 1,
freeFlag: 1,
currentTitle: '错题集'
}
})
});
},
//收藏
collectBook() {
//错题集或收藏夹
handlerBook(val) {
let commitKind = null,currentTitle = '';
if (val == 1) {
commitKind = 1;
currentTitle = '错题集';
}else if (val == 2) {
commitKind = 2;
currentTitle = '收藏';
}
this.checkTokenForNative(() => {
this.$router.push({
path: '/question-detail',
......@@ -325,9 +303,9 @@ export default {
secondSubjectId: this.secondSubjectId,
cardType: this.directoryInfo.cardType,
goodsType : this.directoryInfo.goodsType,
commitKind : 2,
commitKind : commitKind,
freeFlag: 1,
currentTitle: '收藏'
currentTitle: currentTitle
}
})
});
......@@ -468,92 +446,11 @@ export default {
width: 100%;
padding-bottom: 60px;
box-sizing: border-box;
.fixed-qb-header{
position: relative;
.header-info{
position: fixed;
z-index: 200;
background-color: #FFFFFF;
padding: 0 16px;
box-sizing: border-box;
width: 100%;
&.top-set{
top: 73px;
}
.info-first{
display: flex;
padding: 20px 0;
img{
width: 44px;
height: 44px;
border-radius: 50%;
}
.infor{
margin-left: 12px;
.name{
color: #373839;
font-size: 18px;
font-weight: 700;
line-height: 22px;
}
.question-result{
font-size: 14px;
color: #676869;
line-height: 16px;
margin-top: 9px;
span{
margin-left: 3px;
margin-right: 15px;
color: #373839;
&.err{
color: #ED3131;
}
&.suc{
color: #449284;
}
}
}
}
}
.info-second{
display: flex;
justify-content: space-between;
align-items: center;
.item{
width: 165.5px;
height: 40px;
/*line-height: 40px;*/
text-align: center;
border-radius: 6px;
background-color: #F8F9FA;
font-size: 14px;
font-weight: 700;
color: #373839;
display: flex;
align-items: center;
justify-content: center;
img{
width: 20px;
height: 20px;
margin-right: 8px;
}
span{
font-size: 12px;
margin-left: 2px;
height: 40px;
line-height: 40px;
}
}
}
}
}
.question-bank-content{
padding: 0 16px;
padding: 126px 16px 0;
box-sizing: border-box;
position: relative;
/*margin-top: 155px;*/
padding-top: 126px;
&.add-padding{
padding-top: 135px;
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或