Skip to content

S
study
Commit a0a25927 authored by Facius's avatar Facius
Browse files
Options

feat: 每日一练

parent 1cad2427
Hide whitespace changes
Inline Side-by-side
Showing with 408 additions and 0 deletions
src/components/record-cell/index.vue 0 → 100644
View file @ a0a25927
<template>
<view class="record-cell">
<view class="time-view">{{ timeText }}</view>
<view class="detail-view">
<view v-for="(value, key) in labels" :key="key" class="item-view">
<view>{{ value }}</view>
<view class="content-view">
<view
v-if="key == 'result'"
:class="['result-text', { passed: passed }]"
>{{ resultText }}</view
>
<view v-else class="content-text">{{ info[key] }}</view>
<view class="unit-text">{{ units[key] }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
info: {
type: Object,
default() {
return {}
},
},
},
data() {
return {}
},
computed: {
timeText() {
return this.$u.timeFormat(this.info.date, 'yyyy.mm.dd')
},
labels() {
return {
time: '模考用时',
score: '模考成绩',
result: '是否及格',
}
},
units() {
return {
time: '分钟',
score: '分',
result: '',
}
},
passed() {
// 及格、不及格
return this.info.score >= 60
},
resultText() {
return this.passed ? '及格' : '不及格'
},
},
methods: {},
}
</script>
<style lang="scss" scoped>
.record-cell {
height: 296rpx;
border-bottom: 2rpx solid #e8ebf3;
padding: 48rpx 0 40rpx 0;
.time-view {
color: #5a6073;
font-size: 28rpx;
}
.detail-view {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 34rpx;
.item-view {
color: #9ea5bb;
font-size: 28rpx;
text-align: center;
.content-view {
padding-top: 16rpx;
display: flex;
align-items: flex-end;
.result-text {
font-size: 44rpx;
color: #fa5a49;
font-weight: bold;
line-height: 80rpx;
height: 80rpx;
&.passed {
color: #2953ff;
}
}
.content-text {
color: #5a6073;
font-size: 56rpx;
font-weight: bold;
height: 80rpx;
line-height: 80rpx;
}
.unit-text {
padding-left: 14rpx;
font-weight: 400;
margin-bottom: 11rpx;
}
}
}
}
}
</style>
src/pages.json
View file @ a0a25927
...@@ -111,6 +111,16 @@ ...@@ -111,6 +111,16 @@
"disableScroll": true "disableScroll": true
} }
}, },
{
"path": "record",
"name": "learnRecord",
"style": {
"navigationBarTitleText": "学练记录",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{ {
"path": "addExam", "path": "addExam",
"name": "learnAddExam", "name": "learnAddExam",
......
src/pages/learn/examSetting.vue
View file @ a0a25927
...@@ -48,6 +48,9 @@ ...@@ -48,6 +48,9 @@
mode="region" mode="region"
v-model="show" v-model="show"
:params="params" :params="params"
safe-area-inset-bottom
cancel-color="#9EA5BB"
confirm-color="#2953FF"
:default-region="defaultRegion" :default-region="defaultRegion"
@confirm="handleConform" @confirm="handleConform"
></u-picker> ></u-picker>
......
src/pages/learn/record.vue 0 → 100644
View file @ a0a25927
<template>
<view class="record-view">
<u-navbar
back-icon-color="#FFFFFF"
background="transparent"
title="学练记录"
titleColor="#FFFFFF"
:border-bottom="false"
title-bold
></u-navbar>
<view class="head-view">
<view class="left-view">
<view class="head-tip">学练记录</view>
<view class="content-text">Learn of punch</view>
</view>
<image class="xunzhang-image" :src="xunzhangImage"></image>
</view>
<view class="body-view">
<view class="date-view">
<view class="content-title">每日一练</view>
<view class="date-content"></view>
</view>
<view class="charts-view">
<view class="content-title">练习分析</view>
<view class="range-view">
<view class="range-title">日期范围</view>
<view
v-for="(item, index) in items"
:key="index"
:class="['range-item', { selected: item.selected }]"
@click="handleClickRange(index)"
>{{ item.title }}</view
>
</view>
<view v-if="showSelect" class="days-select-view">
<picker
mode="date"
:value="rangeDay0"
:end="rangeDay1"
@change="handleConform($event, 0)"
>
<view class="date-picker-content" hover-class="hover-class">
<view class="input-view">{{ rangeDay0 }}</view>
<u-icon name="arrow-down"></u-icon>
</view>
</picker>
<view class="line-view">-</view>
<picker
mode="date"
:value="rangeDay1"
:start="rangeDay0"
:end="getDate()"
@change="handleConform($event, 1)"
>
<view class="date-picker-content" hover-class="hover-class">
<view class="input-view">{{ rangeDay1 }}</view>
<u-icon name="arrow-down"></u-icon>
</view>
</picker>
</view>
<view class="charts-content"> </view>
</view>
<view class="list-view">
<view class="content-title">模考成绩</view>
<view class="list-content">
<RecordCell
v-for="(item, index) in showedList"
:key="index"
:info="item"
></RecordCell>
<view class="show-more" @click="showAll = true" v-if="!showAll">
<u-icon name="arrow-down"></u-icon>
<text>查看更多</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import RecordCell from '@/components/record-cell'
export default {
components: { RecordCell },
data() {
return {
lists: [],
showSelect: false,
showAll: false,
items: [
{
title: '近7天',
selected: true,
},
{
title: '近30天',
selected: false,
},
{
title: '自定义',
selected: false,
},
],
rangeDay0: this.getDate(), // 自定义开始日期
rangeDay1: this.getDate(), // 自定义结束日期
}
},
computed: {
xunzhangImage() {
return process.uniEnv.qn_base_url + 'xuelianxunzhang.png'
},
params() {
return {
year: true,
month: true,
day: true,
}
},
showedList() {
return this.showAll ? this.lists : this.lists.slice(0, 2)
},
},
onLoad() {
this.lists = [
{ time: 36, score: 80, date: new Date().getTime },
{ time: 100, score: 40, date: new Date().getTime },
{ time: 40, score: 60, date: new Date().getTime },
]
},
methods: {
handleClick() {},
handleClickRange(index) {
for (var item of this.items) {
item.selected = false
}
this.items[index].selected = true
if (index == 2) {
this.showSelect = true
} else {
// 修改图表
// ...
}
},
handleConform(e, index) {
this['rangeDay' + index] = e.target.value
// 修改图表
// ...
},
getDate() {
return this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
},
},
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.record-view {
display: flex;
flex-direction: column;
height: 100vh;
position: relative;
background-color: #f7f9fc;
background-image: linear-gradient(to top, #2272ff 0%, #2953ff 50%);
background-size: 100% 400rpx;
background-repeat: no-repeat;
.head-view {
padding: 10rpx 60rpx 50rpx 60rpx;
display: flex;
justify-content: space-between;
overflow: visible;
align-items: flex-start;
height: 220rpx;
.left-view {
margin-top: 20rpx;
.head-tip {
color: #ffffff;
font-size: 48rpx;
font-weight: bold;
margin-bottom: 16rpx;
}
.content-text {
font-size: 40rpx;
font-weight: bold;
color: #ffffff;
}
}
.xunzhang-image {
width: 182rpx;
height: 272rpx;
z-index: 1;
}
}
.body-view {
border-radius: 24rpx 24rpx 0 0;
background-color: #ffffff;
height: 100%;
overflow: auto;
padding: 24rpx 30rpx 44rpx 30rpx;
.date-view {
.date-content {
min-height: 648rpx;
}
}
.content-title {
font-size: 32rpx;
color: #191c27;
font-weight: bold;
}
.charts-view {
.range-view {
display: flex;
margin-top: 40rpx;
margin-bottom: 40rpx;
.range-title {
font-size: 28rpx;
color: #9ea5bb;
margin-right: 8rpx;
}
.range-item {
margin-left: 30rpx;
font-size: 24rpx;
color: #9ea5bb;
background-color: #e8ebf3;
border-radius: 24rpx;
padding: 0 20rpx;
line-height: 48rpx;
height: 48rpx;
&.selected {
color: #ffffff;
background-color: #2953ff;
}
}
}
.days-select-view {
margin-left: 154rpx;
display: flex;
align-items: center;
color: #9ea5bb;
.line-view {
}
.hover-class {
background-color: #2953ff;
color: #ffffff;
}
.date-picker-content {
display: flex;
align-items: center;
padding-left: 10rpx;
padding-right: 10rpx;
border-radius: 12rpx;
.input-view {
margin-right: 8rpx;
}
}
}
.charts-content {
min-height: 570rpx;
}
}
.list-view {
.list-content {
.show-more {
display: flex;
justify-content: center;
align-items: center;
color: #2953ff;
height: 80rpx;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment