93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<view class="point-item mb-30" v-for="(item, index) in modelValue?.pgrphData || []" :key="item.index"
|
|
@click="toDetail(item)" :class="item.pgrphStdyStateName == '已学习' ? 'learn' : 'unlearn'">
|
|
<view class="top mb-30">
|
|
<view class="blue-ball">
|
|
<view class="ball"></view>
|
|
</view>
|
|
<view class="fz-30 font_pf title">知识点{{ item.pgrphNm }}</view>
|
|
<view class="fl1">
|
|
|
|
</view>
|
|
<view class="font_pf fz-24 study-status" >
|
|
{{ item.pgrphStdyStateName }}
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="fz-30 font_pf text ellipsis-text">{{ item.pgrphContent }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from "vue"
|
|
import common from '@/common/common';
|
|
const emit = defineEmits(['toStudyPrgh'])
|
|
const props = defineProps({
|
|
modelValue: Object
|
|
})
|
|
const min_no_success_id = computed(() => {
|
|
const find_item = props.modelValue?.pgrphData.find(res => (res.pgrphStdyStateName == '未学习' || res.pgrphStdyStateName == '学习中'))
|
|
return find_item?.pgrphId || ''
|
|
})
|
|
|
|
const toDetail = (item) => {
|
|
if (item.pgrphStdyStateName == '已学习' || item.pgrphStdyStateName == '学习中' || min_no_success_id.value == item.pgrphId) {
|
|
emit('toStudyPrgh', item)
|
|
} else {
|
|
common.msg('请按顺序学习知识点')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.learn{
|
|
.study-status{
|
|
color: #1DD17A;
|
|
}
|
|
.title,.text{
|
|
color: #000;
|
|
font-weight: 600;
|
|
}
|
|
|
|
}
|
|
.unlearn{
|
|
.study-status{
|
|
color: #666666;
|
|
}
|
|
color: #666;
|
|
}
|
|
.point-item {
|
|
background-color: #fff;
|
|
// display: flex;
|
|
padding-top: 24rpx;
|
|
padding-left: 36rpx;
|
|
padding-right: 52rpx;
|
|
padding-bottom: 36rpx;
|
|
border-radius: 22rpx;
|
|
|
|
// justify-content: space-between;
|
|
// margin-left: 16rpx;
|
|
// margin-right: 16rpx;
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.bottom {
|
|
padding-left: 12rpx;
|
|
}
|
|
|
|
.blue-ball {
|
|
padding-top: 16rpx;
|
|
margin-right: 12rpx;
|
|
|
|
.ball {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background-color: #0066ff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
</style> |