|
|
@@ -0,0 +1,313 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="top">
|
|
|
+ <view class="title">
|
|
|
+ 做题统计
|
|
|
+ <text>（不含简答和案例题）</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="circle-wrap">
|
|
|
+ <view class="circle-list">
|
|
|
+ <view class="item">
|
|
|
+ <canvas class="canvas" canvas-id="Canvas1"></canvas>
|
|
|
+ <view class="text">正确率</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <canvas canvas-id="Canvas2"></canvas>
|
|
|
+ <view class="text">做题进度</view>
|
|
|
+ </view>
|
|
|
+ <view class="numbers">
|
|
|
+ <view class="blue">已答 65</view>
|
|
|
+ <view>总数 650</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="title-list">
|
|
|
+ <view class="content">
|
|
|
+ <view class="list" v-for="(item1,index) in outline">
|
|
|
+ <view class="section" :data-index="index" @click="changeItem" :class="{up:!item1.showList}">
|
|
|
+ 2Z106010 施工承发包的模式-2Z106020 施工合同...
|
|
|
+ </view>
|
|
|
+ <view class="article" v-if="item1.showList" v-for="(article,index1) in item1.list">
|
|
|
+ <view class="flex-auto">
|
|
|
+ <view class="tit">施工承发包模式-施工合同与物资采购合同二</view>
|
|
|
+ <view class="desc">
|
|
|
+ <view class="flex-auto">
|
|
|
+ 正确率
|
|
|
+ <text class="green">65%</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex-auto">
|
|
|
+ 已完成
|
|
|
+ <text class="blue">65%</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <navigator url="/pages2/bank/questionBankTest">
|
|
|
+ <view v-if="index1 == 0" class="btn">
|
|
|
+ 做题
|
|
|
+ </view>
|
|
|
+ <view v-if="index1 == 1" class="btn">
|
|
|
+ 继续
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ outline:[{
|
|
|
+ list:[1,2,3],
|
|
|
+ showList:false,
|
|
|
+ },{
|
|
|
+ list:[1,2,3],
|
|
|
+ showList:false,
|
|
|
+ },{
|
|
|
+ list:[1,2,3],
|
|
|
+ showList:false,
|
|
|
+ },{
|
|
|
+ list:[1,2,3],
|
|
|
+ showList:false,
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: { ...mapGetters(['userInfo']) },
|
|
|
+ onLoad(option) {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ 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')
|
|
|
+ context1.setStrokeStyle("#EEEEEE")
|
|
|
+ context1.setLineWidth(caculateX * 20)
|
|
|
+ context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true)
|
|
|
+ context1.stroke()
|
|
|
+ context1.beginPath()
|
|
|
+ context1.setStrokeStyle("#32D74B")
|
|
|
+ context1.setFillStyle('#32D74B')
|
|
|
+ context1.setTextAlign('center')
|
|
|
+ context1.setLineCap('round')
|
|
|
+ context1.setFontSize(caculateX * 32)
|
|
|
+ context1.fillText('10%', caculateX * 90, caculateX * 90, caculateX * 180)
|
|
|
+ context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, Math.PI, true)
|
|
|
+ context1.stroke()
|
|
|
+ context1.draw()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var context2 = uni.createCanvasContext('Canvas2')
|
|
|
+ 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')
|
|
|
+ context2.setLineCap('round')
|
|
|
+ context2.setFontSize(caculateX * 32)
|
|
|
+ context2.fillText('10%', caculateX * 90, caculateX * 90, caculateX * 180)
|
|
|
+ context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, Math.PI, true)
|
|
|
+ context2.stroke()
|
|
|
+ context2.draw()
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeItem(e) {
|
|
|
+ let index = e.currentTarget.dataset.index
|
|
|
+ this.outline.forEach((arrItem,i) => {
|
|
|
+ if(i == index) {
|
|
|
+ arrItem.showList = !arrItem.showList
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style >
|
|
|
+ page{
|
|
|
+ background-color: #EAEEF1;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scope>
|
|
|
+
|
|
|
+ .top {
|
|
|
+ margin:16rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background:#fff;
|
|
|
+ padding:24rpx;
|
|
|
+ .title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle-wrap {
|
|
|
+ margin-top:20rpx;
|
|
|
+
|
|
|
+ .circle-list {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ flex:1;
|
|
|
+ padding-left:30rpx;
|
|
|
+
|
|
|
+ canvas {
|
|
|
+ margin:0 auto;
|
|
|
+ width:180rpx;
|
|
|
+ height:180rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ text-align: center;
|
|
|
+ margin-top:16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .numbers {
|
|
|
+ display: flex;
|
|
|
+ color:#999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ margin-bottom:40rpx;
|
|
|
+ color: #007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-list {
|
|
|
+ background: #EAEEF1;
|
|
|
+ padding:16rpx 16rpx 124rpx;
|
|
|
+ .content {
|
|
|
+
|
|
|
+ .list {
|
|
|
+ background:#fff;
|
|
|
+ margin-bottom:30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding:10rpx 16rpx;
|
|
|
+
|
|
|
+ .section {
|
|
|
+ padding:30rpx 0;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content:'^';
|
|
|
+ display: inline-block;
|
|
|
+ margin-right:20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.up {
|
|
|
+ border:0;
|
|
|
+ &::before {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .article {
|
|
|
+ padding:24rpx 0 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left:88rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+
|
|
|
+ .flex-auto {
|
|
|
+ flex:1;
|
|
|
+ margin-right:30rpx;
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ width: 480rpx;
|
|
|
+ padding:0 14rpx;
|
|
|
+ margin-top:20rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color:#007AFF;
|
|
|
+
|
|
|
+ }
|
|
|
+ .green {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color:#32D74B;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius:24rpx;
|
|
|
+ background: #007AFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ border:0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color:#007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
chen