You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
< uni -popup type = "center" ref = "popup" :maskClick ="false" >
< div class = "popup" >
< div class = "title" > 温馨提示 < / div >
< div class = "score" > { { markedWords . words } } < / div >
<!-- 二十分钟 ， 是否继续学习 -- >
< div class = "btn-warp flex-between" v-if ="markedWords.type === 0">
<button class="flex-center" @click="closePopup">否</button>
<button class="flex-center" @click="closePopup">继续学习</button>
</div>
<!--不能快进-->
<div class="btn-warp flex-center" v-if="markedWords.type === 1">
<button class="flex-center" @click="closePopup">确定</button>
</div>
<!--学习完是否考试-->
<div class="btn-warp flex-between" v-if="markedWords.type === 2">
<button class="flex-center" @click="closePopup">暂不考试</button>
<button class="flex-center" @click="takeTest">参加考试</button>
</div>
</div>
</uni-popup>
</template>
<script>
export default {
data() {
return {
}
},
props: {
markedWords: {
type: Object,
default() {
return {
words: '',
type: 0 // type=0:20分钟是否继续学习， ： ， ：
};
}
}
},
mounted() {
this.openPopup()
},
methods: {
openPopup () {
this.$refs.popup.open()
},
closePopup () {
this.$emit('close', '')
this.$refs.popup.close()
},
// 参加考试
takeTest () {
this.$emit('takeTest', '')
this.$refs.popup.close()
}
}
}
</script>
<style lang="scss" >
.popup {
width : 572rpx ;
height : 308rpx ;
background : rgba ( 255 , 255 , 255 , 0.99 ) ;
text -align : left ;
padding -top : 40rpx ;
box -sizing : border -box ;
border -radius : 20rpx ;
z -index : 300 ;
.title {
margin -left : 48rpx ;
color : $ uni -text -color ;
font -size : 30rpx ;
width : 120rpx ;
height : 42rpx ;
font -family : PingFangSC -Medium , PingFang SC ;
font -weight : 500 ;
line -height : 42rpx ;
}
.score {
font -size : 30rpx ;
margin : 36rpx 0 60rpx 48rpx ;
height : 42rpx ;
font -family : PingFangSC -Regular , PingFang SC ;
font -weight : 400 ;
color : # 1C2F54 ;
line -height : 42rpx ;
}
.btn -warp {
margin : 0 auto ;
width : calc ( 100 % - 148rpx ) ;
button {
flex -shrink : 0 ;
width : 192rpx ;
height : 60rpx ;
border -radius : 40rpx ;
font -size : 28rpx ;
padding : 0 ;
margin : 0 ;
& : first -of -type {
color : $ uni -text -color -grey ;
background -color : $ uni -bg -color -grey ;
}
& : last -of -type {
color : # fff ;
background -color : $ uni -border -color ;
}
}
}
}
< / style >