|
@@ -5,7 +5,7 @@
|
|
|
做题统计
|
|
|
<text>(不含简答和案例题)</text>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="circle-wrap">
|
|
|
<view class="circle-list">
|
|
|
<view class="item">
|
|
@@ -13,41 +13,47 @@
|
|
|
<view class="text">正确率</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
- <canvas canvas-id="Canvas2"></canvas>
|
|
|
+ <canvas canvas-id="Canvas2"></canvas>
|
|
|
<view class="text">做题进度</view>
|
|
|
</view>
|
|
|
<view class="numbers">
|
|
|
- <view class="blue">已答 {{goodsCount.doNum}}</view>
|
|
|
- <view>总数 {{goodsCount.totalNum}}</view>
|
|
|
+ <view class="blue">已答 {{ goodsCount.doNum }}</view>
|
|
|
+ <view>总数 {{ goodsCount.totalNum }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="title-list">
|
|
|
<view class="content">
|
|
|
- <view class="list" v-for="(item1,index1) in bankList" :key="index1">
|
|
|
- <template v-if="item1.type==1">
|
|
|
- <view class="moduleItem" @click="clickModule(item1.majorId,index1)">
|
|
|
- <view class="courseName">{{item1.name}}</view>
|
|
|
+ <view class="list" v-for="(item1, index1) in bankList" :key="index1">
|
|
|
+ <template v-if="item1.type == 1">
|
|
|
+ <view class="moduleItem" @click="clickModule(item1.majorId, index1)">
|
|
|
+ <view class="courseName">{{ item1.name }}</view>
|
|
|
<view>
|
|
|
<image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
|
|
|
<image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<template v-if="item1.showList">
|
|
|
- <view v-for="(item2,index2) in item1.list" :key="index2" >
|
|
|
- <view class="section" @click="changeItem(index1,item2.chapterExamId,item1.type)">
|
|
|
- <image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image>
|
|
|
- <image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
|
|
|
- {{item2.name}}
|
|
|
+ <view v-for="(item2, index2) in item1.list" :key="index2">
|
|
|
+ <view class="section" @click="changeItem(index1, item2.chapterExamId, item1.type)">
|
|
|
+ <!-- <image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image>
|
|
|
+ <image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image> -->
|
|
|
+ <u-icon name="arrow-up" color="#999" size="24" v-if="item2.showList"></u-icon>
|
|
|
+ <u-icon name="arrow-down" color="#999" size="24" v-if="!item2.showList"></u-icon>
|
|
|
+ <text
|
|
|
+ style="margin-left:34rpx;font-size: 24rpx;
|
|
|
+ color:#666;"
|
|
|
+ >
|
|
|
+ {{ item2.name }}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
- <view v-if="item2.showList">
|
|
|
- <view class="article" v-for="(article,index3) in item2.list" :key="index3">
|
|
|
+ <view v-if="item2.showList">
|
|
|
+ <view class="article" v-for="(article, index3) in item2.list" :key="index3">
|
|
|
<view class="flex-auto">
|
|
|
- <view class="tit">{{article.examName}}</view>
|
|
|
+ <view class="tit">{{ article.examName }}</view>
|
|
|
<view class="desc">
|
|
|
<view class="flex-auto">
|
|
|
正确率
|
|
@@ -59,28 +65,42 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <navigator :url="'/pages2/bank/questionBankExplain?continue=1&recordId='+article.recordId+'&id='+article.examId+'&goodsid='+article.goodsId+'&moduleId='+article.moduleExamId+'&chapterId='+article.chapterExamId+''">
|
|
|
- <view class="btn" v-if="article.recordStatus == 0">继续</view>
|
|
|
+ <navigator
|
|
|
+ :url="
|
|
|
+ '/pages2/bank/questionBankExplain?continue=1&recordId=' +
|
|
|
+ article.recordId +
|
|
|
+ '&id=' +
|
|
|
+ article.examId +
|
|
|
+ '&goodsid=' +
|
|
|
+ article.goodsId +
|
|
|
+ '&moduleId=' +
|
|
|
+ article.moduleExamId +
|
|
|
+ '&chapterId=' +
|
|
|
+ article.chapterExamId +
|
|
|
+ ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view class="btn" v-if="article.recordStatus == 0">继续</view>
|
|
|
</navigator>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-line></u-line>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
-
|
|
|
- <template v-if="item1.type ==2">
|
|
|
- <view class="section" @click="changeItem(index1,item1.majorId,item1.type)">
|
|
|
- <image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image>
|
|
|
- <image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
|
|
|
- {{item1.name}}
|
|
|
+
|
|
|
+ <template v-if="item1.type == 2">
|
|
|
+ <view class="section" @click="changeItem(index1, item1.majorId, item1.type)">
|
|
|
+ <!-- <image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image>
|
|
|
+ <image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image> -->
|
|
|
+ <u-icon name="arrow-up" color="#999" size="24" v-if="item1.showList"></u-icon>
|
|
|
+ <u-icon name="arrow-down" color="#999" size="24" v-if="!item1.showList"></u-icon>
|
|
|
+ <text style="margin-left:34rpx;font-size: 24rpx;color:#666;">{{ item1.name }}</text>
|
|
|
</view>
|
|
|
- <view v-if="item1.showList" >
|
|
|
- <view class="article" :key="index3" v-for="(article,index2) in item1.list">
|
|
|
+ <view v-if="item1.showList">
|
|
|
+ <view class="article" :key="index3" v-for="(article, index2) in item1.list">
|
|
|
<view class="flex-auto">
|
|
|
- <view class="tit">{{article.name}}</view>
|
|
|
+ <view class="tit">{{ article.name }}</view>
|
|
|
<view class="desc">
|
|
|
<view class="flex-auto">
|
|
|
正确率
|
|
@@ -92,18 +112,29 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <navigator :url="'/pages2/bank/questionBankExplain?continue=1&recordId='+article.recordId+'&id='+article.examId+'&goodsid='+article.goodsId+'&moduleId=0&chapterId='+article.chapterExamId+''">
|
|
|
+ <navigator
|
|
|
+ :url="
|
|
|
+ '/pages2/bank/questionBankExplain?continue=1&recordId=' +
|
|
|
+ article.recordId +
|
|
|
+ '&id=' +
|
|
|
+ article.examId +
|
|
|
+ '&goodsid=' +
|
|
|
+ article.goodsId +
|
|
|
+ '&moduleId=0&chapterId=' +
|
|
|
+ article.chapterExamId +
|
|
|
+ ''
|
|
|
+ "
|
|
|
+ >
|
|
|
<view class="btn" v-if="article.recordStatus == 0">继续</view>
|
|
|
</navigator>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
- <template v-if="item1.type ==3">
|
|
|
- <view class="article" >
|
|
|
+
|
|
|
+ <template v-if="item1.type == 3">
|
|
|
+ <view class="article">
|
|
|
<view class="flex-auto">
|
|
|
- <view class="tit">{{item1.name}}</view>
|
|
|
+ <view class="tit">{{ item1.name }}</view>
|
|
|
<view class="desc">
|
|
|
<view class="flex-auto">
|
|
|
正确率
|
|
@@ -115,16 +146,24 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <navigator :url="'/pages2/bank/questionBankExplain?continue=1&recordId='+item1.recordId+'&id='+item1.majorId+'&goodsid='+item1.goodsId+'&moduleId=0&chapterId=0'">
|
|
|
+ <navigator
|
|
|
+ :url="
|
|
|
+ '/pages2/bank/questionBankExplain?continue=1&recordId=' +
|
|
|
+ item1.recordId +
|
|
|
+ '&id=' +
|
|
|
+ item1.majorId +
|
|
|
+ '&goodsid=' +
|
|
|
+ item1.goodsId +
|
|
|
+ '&moduleId=0&chapterId=0'
|
|
|
+ "
|
|
|
+ >
|
|
|
<view class="btn" v-if="item1.recordStatus == 0">继续</view>
|
|
|
</navigator>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -133,350 +172,338 @@ import { mapGetters } from 'vuex';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- bankList:[],
|
|
|
- goodsCount:{},
|
|
|
- id:'',
|
|
|
- context1:null,
|
|
|
- context2:null,
|
|
|
- caculateX:0,
|
|
|
- caculateY:0,
|
|
|
+ bankList: [],
|
|
|
+ goodsCount: {},
|
|
|
+ id: '',
|
|
|
+ context1: null,
|
|
|
+ context2: null,
|
|
|
+ caculateX: 0,
|
|
|
+ caculateY: 0
|
|
|
};
|
|
|
},
|
|
|
- onUnload() {
|
|
|
-
|
|
|
- },
|
|
|
+ onUnload() {},
|
|
|
computed: { ...mapGetters(['userInfo']) },
|
|
|
onLoad(option) {
|
|
|
- this.id = option.id;
|
|
|
+ this.id = option.id;
|
|
|
uni.getSystemInfo({
|
|
|
- success:(res) => {
|
|
|
+ success: res => {
|
|
|
var winW = res.screenWidth;
|
|
|
var winH = res.screenHeight;
|
|
|
- uni.createSelectorQuery().in(this).select('.canvas').boundingClientRect().exec((newRes)=>{
|
|
|
-
|
|
|
- this.goodsBankQuestionNum();
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select('.canvas')
|
|
|
+ .boundingClientRect()
|
|
|
+ .exec(newRes => {
|
|
|
+ this.goodsBankQuestionNum();
|
|
|
this.goodsBankDolist();
|
|
|
- // this.goodsBankList();
|
|
|
-
|
|
|
- var width = newRes[0].width;
|
|
|
- var height = newRes[0].height;
|
|
|
- this.caculateX = winW/750;
|
|
|
- this.caculateY = winH/1334;
|
|
|
- var context1 = uni.createCanvasContext('Canvas1')
|
|
|
- this.context1 = context1;
|
|
|
- context1.setStrokeStyle("#EEEEEE")
|
|
|
- context1.setLineWidth(this.caculateX * 20)
|
|
|
- context1.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, 2 * Math.PI, true)
|
|
|
- context1.stroke()
|
|
|
- context1.draw()
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- var context2 = uni.createCanvasContext('Canvas2')
|
|
|
- this.context2 = context2;
|
|
|
- context2.setStrokeStyle("#EEEEEE")
|
|
|
- context2.setLineWidth(this.caculateX * 20)
|
|
|
- context2.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, 2 * Math.PI, false)
|
|
|
- context2.stroke()
|
|
|
- context2.draw()
|
|
|
- })
|
|
|
-
|
|
|
+ // this.goodsBankList();
|
|
|
+
|
|
|
+ var width = newRes[0].width;
|
|
|
+ var height = newRes[0].height;
|
|
|
+ this.caculateX = winW / 750;
|
|
|
+ this.caculateY = winH / 1334;
|
|
|
+ var context1 = uni.createCanvasContext('Canvas1');
|
|
|
+ this.context1 = context1;
|
|
|
+ context1.setStrokeStyle('#EEEEEE');
|
|
|
+ context1.setLineWidth(this.caculateX * 20);
|
|
|
+ context1.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, 2 * Math.PI, true);
|
|
|
+ context1.stroke();
|
|
|
+ context1.draw();
|
|
|
+
|
|
|
+ var context2 = uni.createCanvasContext('Canvas2');
|
|
|
+ this.context2 = context2;
|
|
|
+ context2.setStrokeStyle('#EEEEEE');
|
|
|
+ context2.setLineWidth(this.caculateX * 20);
|
|
|
+ context2.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, 2 * Math.PI, false);
|
|
|
+ context2.stroke();
|
|
|
+ context2.draw();
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- onShow() {
|
|
|
-
|
|
|
-
|
|
|
+ });
|
|
|
},
|
|
|
+ onShow() {},
|
|
|
methods: {
|
|
|
goodsBankDolist() {
|
|
|
- this.$api.goodsBankDolist({
|
|
|
- goodsId:this.id
|
|
|
- }).then(res => {
|
|
|
- console.log(res)
|
|
|
- this.bankList = res.data.data;
|
|
|
- })
|
|
|
+ this.$api
|
|
|
+ .goodsBankDolist({
|
|
|
+ goodsId: this.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.bankList = res.data.data;
|
|
|
+ });
|
|
|
},
|
|
|
goodsBankList() {
|
|
|
- this.$api.goodsBankList({
|
|
|
- goodsId:this.id
|
|
|
- }).then(res => {
|
|
|
- console.log(res)
|
|
|
- this.bankList = res.data.data;
|
|
|
- })
|
|
|
+ this.$api
|
|
|
+ .goodsBankList({
|
|
|
+ goodsId: this.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.bankList = res.data.data;
|
|
|
+ });
|
|
|
},
|
|
|
- goodsBankQuestionNum(){
|
|
|
+ goodsBankQuestionNum() {
|
|
|
this.$api.goodsBankQuestionNum(this.id).then(res => {
|
|
|
- this.goodsCount = res.data.data
|
|
|
-
|
|
|
- this.context1.beginPath()
|
|
|
- this.context1.setStrokeStyle("#32D74B")
|
|
|
- this.context1.setFillStyle('#32D74B')
|
|
|
- this.context1.setTextAlign('center')
|
|
|
- this.context1.setLineCap('round')
|
|
|
- this.context1.setFontSize(this.caculateX * 32)
|
|
|
- this.context1.fillText((this.goodsCount.rightNum / this.goodsCount.totalNum * 100).toFixed(2)+'%', this.caculateX * 90, this.caculateX * 90, this.caculateX * 180)
|
|
|
- this.context2.save()
|
|
|
- this.context2.translate(this.caculateX * 90, this.caculateX * 90)
|
|
|
- this.context2.rotate(-90 * Math.PI/180);
|
|
|
- this.context1.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, (this.goodsCount.rightNum / this.goodsCount.totalNum) * 2 * Math.PI, false)
|
|
|
- this.context2.restore()
|
|
|
- this.context1.stroke()
|
|
|
- this.context1.draw()
|
|
|
-
|
|
|
- this.context2.beginPath()
|
|
|
- this.context2.setStrokeStyle("#007AFF")
|
|
|
- this.context2.setFillStyle("#007AFF")
|
|
|
- this.context2.setTextAlign('center')
|
|
|
- this.context2.setLineCap('round')
|
|
|
- this.context2.setFontSize(this.caculateX * 32)
|
|
|
- this.context2.fillText((this.goodsCount.doNum / this.goodsCount.totalNum * 100).toFixed(2)+'%', this.caculateX * 90, this.caculateX * 90, this.caculateX * 180)
|
|
|
- this.context2.save()
|
|
|
- this.context2.translate(this.caculateX * 90, this.caculateX * 90)
|
|
|
- this.context2.rotate(-90 * Math.PI/180);
|
|
|
- this.context2.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, (this.goodsCount.doNum / this.goodsCount.totalNum) * 2 * Math.PI, false)
|
|
|
- this.context2.restore()
|
|
|
- this.context2.stroke()
|
|
|
- this.context2.draw()
|
|
|
- })
|
|
|
+ this.goodsCount = res.data.data;
|
|
|
+
|
|
|
+ this.context1.beginPath();
|
|
|
+ this.context1.setStrokeStyle('#32D74B');
|
|
|
+ this.context1.setFillStyle('#32D74B');
|
|
|
+ this.context1.setTextAlign('center');
|
|
|
+ this.context1.setLineCap('round');
|
|
|
+ this.context1.setFontSize(this.caculateX * 32);
|
|
|
+ this.context1.fillText(
|
|
|
+ ((this.goodsCount.rightNum / this.goodsCount.totalNum) * 100).toFixed(2) + '%',
|
|
|
+ this.caculateX * 90,
|
|
|
+ this.caculateX * 90,
|
|
|
+ this.caculateX * 180
|
|
|
+ );
|
|
|
+ this.context2.save();
|
|
|
+ this.context2.translate(this.caculateX * 90, this.caculateX * 90);
|
|
|
+ this.context2.rotate((-90 * Math.PI) / 180);
|
|
|
+ this.context1.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, (this.goodsCount.rightNum / this.goodsCount.totalNum) * 2 * Math.PI, false);
|
|
|
+ this.context2.restore();
|
|
|
+ this.context1.stroke();
|
|
|
+ this.context1.draw();
|
|
|
+
|
|
|
+ this.context2.beginPath();
|
|
|
+ this.context2.setStrokeStyle('#007AFF');
|
|
|
+ this.context2.setFillStyle('#007AFF');
|
|
|
+ this.context2.setTextAlign('center');
|
|
|
+ this.context2.setLineCap('round');
|
|
|
+ this.context2.setFontSize(this.caculateX * 32);
|
|
|
+ this.context2.fillText(((this.goodsCount.doNum / this.goodsCount.totalNum) * 100).toFixed(2) + '%', this.caculateX * 90, this.caculateX * 90, this.caculateX * 180);
|
|
|
+ this.context2.save();
|
|
|
+ this.context2.translate(this.caculateX * 90, this.caculateX * 90);
|
|
|
+ this.context2.rotate((-90 * Math.PI) / 180);
|
|
|
+ this.context2.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, (this.goodsCount.doNum / this.goodsCount.totalNum) * 2 * Math.PI, false);
|
|
|
+ this.context2.restore();
|
|
|
+ this.context2.stroke();
|
|
|
+ this.context2.draw();
|
|
|
+ });
|
|
|
},
|
|
|
- clickModule(id,index) {
|
|
|
-
|
|
|
-
|
|
|
- if(this.bankList[index].list) {
|
|
|
- this.$set(this.bankList[index],'showList',!this.bankList[index].showList)
|
|
|
+ clickModule(id, index) {
|
|
|
+ if (this.bankList[index].list) {
|
|
|
+ this.$set(this.bankList[index], 'showList', !this.bankList[index].showList);
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
- this.$api.goodsChapterDolist({
|
|
|
- moduleExamId:id
|
|
|
- }).then(res => {
|
|
|
- this.$set(this.bankList[index],'showList',true)
|
|
|
- this.$set(this.bankList[index],'list',res.data.data)
|
|
|
-
|
|
|
- })
|
|
|
+
|
|
|
+ this.$api
|
|
|
+ .goodsChapterDolist({
|
|
|
+ moduleExamId: id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$set(this.bankList[index], 'showList', true);
|
|
|
+ this.$set(this.bankList[index], 'list', res.data.data);
|
|
|
+ });
|
|
|
},
|
|
|
- changeItem(index1,id,type) {
|
|
|
-
|
|
|
- if(type == 1) {
|
|
|
- if(this.bankList[index1].list[index2].list) {
|
|
|
- this.$set(this.bankList[index1].list[index2],'showList',!this.bankList[index1].list[index2].showList)
|
|
|
+ changeItem(index1, id, type) {
|
|
|
+ if (type == 1) {
|
|
|
+ if (this.bankList[index1].list[index2].list) {
|
|
|
+ this.$set(this.bankList[index1].list[index2], 'showList', !this.bankList[index1].list[index2].showList);
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
- this.$api.goodsExamList({
|
|
|
- chapterExamId:id
|
|
|
- }).then(res => {
|
|
|
-
|
|
|
- this.$set(this.bankList[index1].list[index2],'showList',true)
|
|
|
- this.$set(this.bankList[index1].list[index2],'list',res.data.data)
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- } else if(type == 2) {
|
|
|
- if(this.bankList[index1].list) {
|
|
|
- this.$set(this.bankList[index1],'showList',!this.bankList[index1].showList)
|
|
|
+
|
|
|
+ this.$api
|
|
|
+ .goodsExamList({
|
|
|
+ chapterExamId: id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$set(this.bankList[index1].list[index2], 'showList', true);
|
|
|
+ this.$set(this.bankList[index1].list[index2], 'list', res.data.data);
|
|
|
+ });
|
|
|
+ } else if (type == 2) {
|
|
|
+ if (this.bankList[index1].list) {
|
|
|
+ this.$set(this.bankList[index1], 'showList', !this.bankList[index1].showList);
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
- this.$api.goodsExamDolist({
|
|
|
- chapterExamId:id
|
|
|
- }).then(res => {
|
|
|
-
|
|
|
- this.$set(this.bankList[index1],'showList',true)
|
|
|
- this.$set(this.bankList[index1],'list',res.data.data)
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
+
|
|
|
+ this.$api
|
|
|
+ .goodsExamDolist({
|
|
|
+ chapterExamId: id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$set(this.bankList[index1], 'showList', true);
|
|
|
+ this.$set(this.bankList[index1], 'list', res.data.data);
|
|
|
+ });
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style >
|
|
|
- page{
|
|
|
- background-color: #EAEEF1;
|
|
|
- }
|
|
|
+<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;
|
|
|
- }
|
|
|
+.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;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle-wrap {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .circle-list {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 30rpx;
|
|
|
+
|
|
|
+ canvas {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
}
|
|
|
- .numbers {
|
|
|
- display: flex;
|
|
|
- color:#999999;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
font-size: 24rpx;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .blue {
|
|
|
- margin-bottom:40rpx;
|
|
|
- color: #007AFF;
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .courseName{
|
|
|
- white-space:nowrap;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .moduleItem{
|
|
|
- height: 80rpx;
|
|
|
- color: #333333;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- font-weight: bold;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .icon_up{
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title-list {
|
|
|
- background: #EAEEF1;
|
|
|
- padding:16rpx 16rpx 124rpx;
|
|
|
- .content {
|
|
|
-
|
|
|
- .list {
|
|
|
- background:#fff;
|
|
|
- margin-bottom:30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.courseName {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.moduleItem {
|
|
|
+ height: 80rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.icon_up {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.title-list {
|
|
|
+ background: #eaeef1;
|
|
|
+ padding: 16rpx 16rpx 124rpx;
|
|
|
+ .content {
|
|
|
+ .list {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 10rpx 16rpx;
|
|
|
+
|
|
|
+ .module {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding:10rpx 16rpx;
|
|
|
-
|
|
|
- .module {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-right:10rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .article {
|
|
|
+ padding: 14rpx 0 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
+
|
|
|
+ .flex-auto {
|
|
|
+ font-size: 26rpx;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 30rpx;
|
|
|
+
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ border: 0;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .section {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- white-space:nowrap;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- margin: 20rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .article {
|
|
|
- padding:14rpx 0 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left:40rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666666;
|
|
|
- border-bottom: 1rpx solid #EEEEEE;
|
|
|
-
|
|
|
- .flex-auto {
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ width: 480rpx;
|
|
|
+ padding: 0 14rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-radius: 16rpx;
|
|
|
font-size: 26rpx;
|
|
|
- flex:1;
|
|
|
- margin-right:30rpx;
|
|
|
-
|
|
|
-
|
|
|
- &:nth-last-of-type(1) {
|
|
|
- border:0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #007aff;
|
|
|
}
|
|
|
-
|
|
|
- .desc {
|
|
|
- width: 480rpx;
|
|
|
- padding:0 14rpx;
|
|
|
- margin-top:20rpx;
|
|
|
- height: 40rpx;
|
|
|
- border: 1px solid #EEEEEE;
|
|
|
- border-radius: 16rpx;
|
|
|
+ .green {
|
|
|
font-size: 26rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .blue {
|
|
|
- font-size: 26rpx;
|
|
|
- color:#007AFF;
|
|
|
- }
|
|
|
- .green {
|
|
|
- font-size: 26rpx;
|
|
|
- color:#32D74B;
|
|
|
- }
|
|
|
+ color: #32d74b;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 96rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-size: 30rpx;
|
|
|
- border-radius:24rpx;
|
|
|
- background: #007AFF;
|
|
|
- // margin-left:36rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background: #007aff;
|
|
|
+ // margin-left:36rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+}
|
|
|
</style>
|