|
|
@@ -1,50 +1,70 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
-
|
|
|
+ <view :class="reportdata.reportStatus === 0 ? 'redBtn' : reportdata.reportStatus === 1 ? 'greenBtn' : 'disNone'" v-if="reportdata.reportStatus !== null">
|
|
|
+ {{ reportdata.reportStatus === 0 ? '测试未通过' : reportdata.reportStatus === 1 ? '测试通过' : '' }}
|
|
|
+ </view>
|
|
|
<view class="top">
|
|
|
- <view class="title">{{reportdata.examName}}</view>
|
|
|
- <view class="desc">交卷时间：{{$method.timestampToTime(reportdata.updateTime,false)}}</view>
|
|
|
-
|
|
|
+ <view class="title">{{ reportdata.examName }}</view>
|
|
|
+ <view class="desc">交卷时间：{{ $method.timestampToTime(reportdata.updateTime, false) }}</view>
|
|
|
+
|
|
|
<view class="box">
|
|
|
<view class="left">
|
|
|
- <view>{{(reportdata.rightQuestionNum / reportdata.totalQuestionNum * 100).toFixed(0)}}%</view>
|
|
|
+ <view>{{ ((reportdata.rightQuestionNum / reportdata.totalQuestionNum) * 100).toFixed(0) }}%</view>
|
|
|
<view>正确率</view>
|
|
|
<view>不含简答/案例题</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="flex up">
|
|
|
- <image src="/static/5-4_03.png" mode=""></image>
|
|
|
+ <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon>
|
|
|
+ <!-- <image src="/static/5-4_03.png" mode=""></image> -->
|
|
|
<view class="text">正确题数</view>
|
|
|
- <text class="red">{{reportdata.rightQuestionNum}}</text>
|
|
|
+ <text class="green">{{ reportdata.rightQuestionNum }}</text>
|
|
|
</view>
|
|
|
<view class="flex down">
|
|
|
- <image src="/static/5-4_03.png" mode=""></image>
|
|
|
+ <u-icon name="close" color="#FF3B30" size="38" style="margin-right: 26rpx;"></u-icon>
|
|
|
+ <!-- <image src="/static/5-4_03.png" mode=""></image> -->
|
|
|
<view class="text">错误题数</view>
|
|
|
- <text class="green">{{reportdata.totalQuestionNum - reportdata.rightQuestionNum}}</text>
|
|
|
+ <text class="red">{{ reportdata.totalQuestionNum - reportdata.rightQuestionNum }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="dis_fst">
|
|
|
+ <!-- <view class="btnACs">错题解析</view> -->
|
|
|
+ <navigator
|
|
|
+ :url="
|
|
|
+ '/pages2/bank/questionBankExplain?explain=1&id=' +
|
|
|
+ reportdata.examId +
|
|
|
+ '&goodsid=' +
|
|
|
+ reportdata.goodsId +
|
|
|
+ '&moduleId=' +
|
|
|
+ reportdata.moduleExamId +
|
|
|
+ '&chapterId=' +
|
|
|
+ reportdata.chapterExamId +
|
|
|
+ ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view class="btnACs">全部解析</view>
|
|
|
+ </navigator>
|
|
|
+ <view class="btnACs" @click="doRepeat(reportdata.examId, reportdata.goodsId, reportdata.moduleExamId, reportdata.chapterExamId)">重新做题</view>
|
|
|
+ <view class="btnACs" @click="backBank">继续做题</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="bottom">
|
|
|
-
|
|
|
<view class="circle-wrap">
|
|
|
<view class="circle-list">
|
|
|
- <view class="item">
|
|
|
+ <view class="item" v-show="reportdata.totalScore">
|
|
|
<view class="title">
|
|
|
试卷得分
|
|
|
<text>（不含简答和案例题）</text>
|
|
|
</view>
|
|
|
<canvas class="canvas" canvas-id="Canvas1"></canvas>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 答题时长
|
|
|
- </view>
|
|
|
- <canvas canvas-id="Canvas2"></canvas>
|
|
|
+ <view class="item" v-show="reportdata.examTime">
|
|
|
+ <view class="title">答题时长</view>
|
|
|
+ <canvas canvas-id="Canvas2"></canvas>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -54,15 +74,13 @@ import { mapGetters } from 'vuex';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- id:'',
|
|
|
- reportdata:{},
|
|
|
- context1:null,
|
|
|
- context2:null,
|
|
|
+ id: '',
|
|
|
+ reportdata: {},
|
|
|
+ context1: null,
|
|
|
+ context2: null
|
|
|
};
|
|
|
},
|
|
|
- onUnload() {
|
|
|
-
|
|
|
- },
|
|
|
+ onUnload() {},
|
|
|
computed: { ...mapGetters(['userInfo']) },
|
|
|
onLoad(option) {
|
|
|
this.id = option.id;
|
|
|
@@ -70,217 +88,311 @@ export default {
|
|
|
},
|
|
|
onShow() {
|
|
|
uni.getSystemInfo({
|
|
|
- success:(res) => {
|
|
|
+ success: res => {
|
|
|
var winW = res.screenWidth;
|
|
|
var winH = res.screenHeight;
|
|
|
- uni.createSelectorQuery().in(this).select('.canvas').boundingClientRect().exec((newRes)=>{
|
|
|
- var width = newRes[0].width;
|
|
|
- var height = newRes[0].height;
|
|
|
- var caculateX = winW/750;
|
|
|
- var caculateY = winH/1334;
|
|
|
- console.log(caculateX)
|
|
|
- var context1 = uni.createCanvasContext('Canvas1')
|
|
|
- this.context1 = context1;
|
|
|
- context1.setStrokeStyle("#EEEEEE")
|
|
|
- context1.setLineWidth(caculateX * 20)
|
|
|
- context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true)
|
|
|
- // context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, (this.reportdata.performance / this.reportdata.goodsId) * 2 * Math.PI, false);
|
|
|
- context1.stroke()
|
|
|
- context1.beginPath()
|
|
|
- context1.setStrokeStyle("#32D74B")
|
|
|
- context1.setFillStyle('#32D74B')
|
|
|
- context1.setTextAlign('center')
|
|
|
- context1.setTextBaseline('middle')
|
|
|
- context1.setLineCap('round')
|
|
|
- context1.setFontSize(caculateX * 64)
|
|
|
- context1.fillText(this.reportdata.performance, caculateX * 90, caculateX * 90, caculateX * 180)
|
|
|
- context1.setFillStyle('#999999')
|
|
|
- context1.setFontSize(caculateX * 20)
|
|
|
- context1.fillText('满分100', caculateX * 90, caculateX * 130, caculateX * 180)
|
|
|
- context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, (this.reportdata.performance / 100) * 2 * Math.PI, false)
|
|
|
- context1.stroke()
|
|
|
- context1.draw()
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- var context2 = uni.createCanvasContext('Canvas2')
|
|
|
- this.context2 = context2;
|
|
|
- context2.setStrokeStyle("#EEEEEE")
|
|
|
- context2.setLineWidth(caculateX * 20)
|
|
|
- context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true)
|
|
|
- context2.stroke()
|
|
|
- context2.beginPath()
|
|
|
- context2.setStrokeStyle("#007AFF")
|
|
|
- context2.setFillStyle("#007AFF")
|
|
|
- context2.setTextAlign('center')
|
|
|
- context1.setTextBaseline('middle')
|
|
|
- context2.setLineCap('round')
|
|
|
- context2.setFontSize(caculateX * 64)
|
|
|
- context2.fillText("12'", caculateX * 90, caculateX * 90, caculateX * 180)
|
|
|
- context2.setFillStyle('#999999')
|
|
|
- context2.setFontSize(caculateX * 20)
|
|
|
- context2.fillText("限时120'", caculateX * 90, caculateX * 130, caculateX * 180)
|
|
|
- context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, Math.PI, true)
|
|
|
- context2.stroke()
|
|
|
- context2.draw()
|
|
|
- })
|
|
|
-
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select('.canvas')
|
|
|
+ .boundingClientRect()
|
|
|
+ .exec(newRes => {
|
|
|
+ var width = newRes[0].width;
|
|
|
+ var height = newRes[0].height;
|
|
|
+ var caculateX = winW / 750;
|
|
|
+ var caculateY = winH / 1334;
|
|
|
+ console.log(caculateX);
|
|
|
+ var context1 = uni.createCanvasContext('Canvas1');
|
|
|
+ this.context1 = context1;
|
|
|
+ context1.setStrokeStyle('#EEEEEE');
|
|
|
+ context1.setLineWidth(caculateX * 20);
|
|
|
+ context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
|
|
|
+ // context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, (this.reportdata.performance / this.reportdata.goodsId) * 2 * Math.PI, false);
|
|
|
+ context1.stroke();
|
|
|
+ context1.beginPath();
|
|
|
+ context1.setStrokeStyle('#32D74B');
|
|
|
+ context1.setFillStyle('#32D74B');
|
|
|
+ context1.setTextAlign('center');
|
|
|
+ context1.setTextBaseline('middle');
|
|
|
+ context1.setLineCap('round');
|
|
|
+ context1.setFontSize(caculateX * 64);
|
|
|
+ context1.fillText(this.reportdata.performance, caculateX * 90, caculateX * 90, caculateX * 180);
|
|
|
+ context1.setFillStyle('#999999');
|
|
|
+ context1.setFontSize(caculateX * 20);
|
|
|
+ context1.fillText(`满分${this.reportdata.totalScore}`, caculateX * 90, caculateX * 130, caculateX * 180);
|
|
|
+ context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, (this.reportdata.performance / this.reportdata.totalScore) * 2 * Math.PI, false);
|
|
|
+ context1.stroke();
|
|
|
+ context1.draw();
|
|
|
+
|
|
|
+ var context2 = uni.createCanvasContext('Canvas2');
|
|
|
+ this.context2 = context2;
|
|
|
+ context2.setStrokeStyle('#EEEEEE');
|
|
|
+ context2.setLineWidth(caculateX * 20);
|
|
|
+ context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
|
|
|
+ context2.stroke();
|
|
|
+ context2.beginPath();
|
|
|
+ context2.setStrokeStyle('#007AFF');
|
|
|
+ context2.setFillStyle('#007AFF');
|
|
|
+ context2.setTextAlign('center');
|
|
|
+ context1.setTextBaseline('middle');
|
|
|
+ context2.setLineCap('round');
|
|
|
+ context2.setFontSize(caculateX * 64);
|
|
|
+ context2.fillText(`${this.reportdata.doTime}'`, caculateX * 90, caculateX * 90, caculateX * 180);
|
|
|
+ context2.setFillStyle('#999999');
|
|
|
+ context2.setFontSize(caculateX * 20);
|
|
|
+ context2.fillText(`限时${this.reportdata.examTime}'`, caculateX * 90, caculateX * 130, caculateX * 180);
|
|
|
+ context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, (this.reportdata.doTime / this.reportdata.examTime) * 2 * Math.PI, false);
|
|
|
+ context2.stroke();
|
|
|
+ context2.draw();
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
+ backBank() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages2/bank/my_question'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 去做题
|
|
|
+ */
|
|
|
+ async doRepeat(id, goodsId, moduleId = 0, chapterId = 0) {
|
|
|
+ await this.getDetail(goodsId);
|
|
|
+ let count = await this.examRecordCount(id, goodsId);
|
|
|
+ let answerNum = await this.getExamDetail(id);
|
|
|
+ //超过答题次数
|
|
|
+ if (answerNum > 0 && count >= answerNum) {
|
|
|
+ this.$u.toast('该试卷只能答题' + answerNum + '次!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages2/bank/questionBank?id=' + id + '&goodsid=' + goodsId + '&moduleId=' + moduleId + '&chapterId=' + chapterId + ''
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object} exam_id
|
|
|
+ * 获取试卷可以做的次数
|
|
|
+ */
|
|
|
+ getExamDetail(exam_id) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ this.$api.getExamDetail(exam_id).then(res => {
|
|
|
+ resolve(res.data.data.answerNum);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询试卷历史做题次数
|
|
|
+ */
|
|
|
+ examRecordCount(examId, goodsId) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ this.$api
|
|
|
+ .examRecordCount({
|
|
|
+ examId: examId,
|
|
|
+ goodsId: goodsId
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ resolve(res.data.data);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDetail(id) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ this.$api.goodsDetail(id).then(res => {
|
|
|
+ this.goodsData = res.data.data;
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
examReport() {
|
|
|
this.$api.examReport(this.id).then(res => {
|
|
|
this.reportdata = res.data.data;
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style >
|
|
|
- page{
|
|
|
- background-color: #EAEEF1;
|
|
|
- }
|
|
|
+<style>
|
|
|
+page {
|
|
|
+ background-color: #eaeef1;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss" scope>
|
|
|
-
|
|
|
- .top {
|
|
|
- margin:16rpx 16rpx 0;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding:40rpx 24rpx 16rpx;
|
|
|
- background:#fff;
|
|
|
- .title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- margin-top:20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
+.disNone {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.greenBtn {
|
|
|
+ margin: 16rpx 16rpx 0;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #f7fff8;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #34c759;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+.redBtn {
|
|
|
+ margin: 16rpx 16rpx 0;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #FFF3F2;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #FF3B30;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.dis_fst {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.btnACs {
|
|
|
+ height: 48rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border: 1rpx solid #007aff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #007aff;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ margin: 16rpx 16rpx 0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 40rpx 24rpx 16rpx;
|
|
|
+ background: #fff;
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 250rpx;
|
|
|
+ height: 176rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: 16rpx;
|
|
|
+
|
|
|
+ view {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ font-size: 60rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ &:nth-of-type(3) {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .box {
|
|
|
- margin-top:30rpx;
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
-
|
|
|
- .left {
|
|
|
- width: 250rpx;
|
|
|
- height: 176rpx;
|
|
|
- background: #F5F5F5;
|
|
|
- border-radius: 16rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ background: #f5f5f5;
|
|
|
display: flex;
|
|
|
+ height: 80rpx;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-right:16rpx;
|
|
|
-
|
|
|
- view {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &:nth-of-type(1) {
|
|
|
- font-size: 60rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #007AFF;
|
|
|
- }
|
|
|
- &:nth-of-type(2) {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- &:nth-of-type(3) {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ padding: 0 40rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-right: 28rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .right{
|
|
|
- flex:1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .flex {
|
|
|
- background:#F5F5F5;
|
|
|
- display: flex;
|
|
|
- height: 80rpx;
|
|
|
- align-items: center;
|
|
|
- padding:0 40rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-right:28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- flex:1;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #666666;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #e12626;
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ color: red;
|
|
|
}
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 48rpx;
|
|
|
- color: #E12626;
|
|
|
-
|
|
|
- &.red {
|
|
|
- color:red;
|
|
|
- }
|
|
|
-
|
|
|
- &.green {
|
|
|
- color:green;
|
|
|
- }
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ color: green;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .bottom {
|
|
|
- .circle-wrap {
|
|
|
-
|
|
|
- .circle-list {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .item {
|
|
|
- padding:20rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- background:#fff;
|
|
|
- margin:16rpx;
|
|
|
- flex:1;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30rpx;
|
|
|
- line-height: 24rpx;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- canvas {
|
|
|
- margin:36rpx auto 0;
|
|
|
- width:180rpx;
|
|
|
- height:180rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- text-align: center;
|
|
|
- margin-top:16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ .circle-wrap {
|
|
|
+ .circle-list {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin: 16rpx;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ canvas {
|
|
|
+ margin: 36rpx auto 0;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+}
|
|
|
</style>
|
