30 lines
3.1 KiB
Plaintext
30 lines
3.1 KiB
Plaintext
<template>
|
|
<view class="activity-chart"><view class="activity-scale"><text class="activity-scale-text">时长(分)</text><text class="activity-scale-text">200</text><text class="activity-scale-text">100</text><text class="activity-scale-text">0</text></view><view class="activity-columns"><view v-for="point in points" :key="point.label" class="activity-column"><view class="activity-bar-wrap"><view class="activity-grid-line activity-grid-line-top"></view><view class="activity-grid-line activity-grid-line-middle"></view><view class="activity-grid-line activity-grid-line-bottom"></view><view class="activity-planned-bar" :style="{ height: point.plannedHeight + 'px' }"></view><view class="activity-study-bar" :style="{ height: point.studyHeight + 'px' }"></view><view v-if="point.newMasteredCount > 0" class="activity-mastery-point" :style="{ bottom: point.newMasteredHeight + 'px' }"><text class="activity-mastery-count">{{ point.newMasteredCount }}</text></view></view><text class="activity-day">{{ point.label }}</text></view></view><view class="activity-mastery-scale"><text class="activity-mastery-scale-text">未攻克(分)</text><text class="activity-mastery-scale-text">90</text><text class="activity-mastery-scale-text">60</text><text class="activity-mastery-scale-text">30</text><text class="activity-mastery-scale-text">0</text></view></view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { StudyReportActivityPoint } from '../api/student'
|
|
|
|
defineProps<{ points: StudyReportActivityPoint[] }>()
|
|
</script>
|
|
|
|
<style>
|
|
.activity-chart { display: flex; flex-direction: row; height: 150px; margin-top: 10px; }
|
|
.activity-scale { display: flex; flex-direction: column; justify-content: space-between; width: 38px; padding-bottom: 20px; }
|
|
.activity-scale-text { font-size: 9px; color: #8992a5; }
|
|
.activity-columns { display: flex; flex-direction: row; justify-content: space-between; flex: 1; padding-bottom: 20px; }
|
|
.activity-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 130px; }
|
|
.activity-bar-wrap { position: relative; display: flex; flex-direction: row; align-items: flex-end; height: 108px; }
|
|
.activity-grid-line { position: absolute; left: 0; right: 0; width: 34px; height: 1px; background-color: #edf0f5; }
|
|
.activity-grid-line-top { top: 0; }
|
|
.activity-grid-line-middle { top: 53px; }
|
|
.activity-grid-line-bottom { bottom: 0; }
|
|
.activity-planned-bar { width: 9px; margin-right: 4px; border-radius: 4px 4px 0 0; background-color: #d3dce8; }
|
|
.activity-study-bar { width: 9px; border-radius: 4px 4px 0 0; background-color: #6558e9; }
|
|
.activity-mastery-point { position: absolute; right: -4px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 10px; height: 10px; border-radius: 5px; background-color: #ffab26; }
|
|
.activity-mastery-count { position: absolute; bottom: 11px; font-size: 9px; color: #f08b00; }
|
|
.activity-day { margin-top: 6px; font-size: 10px; color: #8992a5; }
|
|
.activity-mastery-scale { display: flex; flex-direction: column; justify-content: space-between; width: 42px; padding-bottom: 20px; }
|
|
.activity-mastery-scale-text { font-size: 9px; color: #8992a5; }
|
|
</style>
|