update: 完成评测练习模块

common/global_scss/pages_style.scss

@@ -68,7 +68,7 @@ page{
 	align-items: center;
 	border-radius: 6rpx;
 	background-color: $color-blue;
-	padding: 5rpx 16rpx;
+	padding: 6rpx 12rpx;
 	.tag-text {
 		font-size: 24rpx;
 		color: #FFF;

components/th-autograph/th-autograph.vue

@@ -0,0 +1,421 @@
+<template>
+	<view class="autograph-box">
+		<canvas class="autograph" :canvas-id="canvasId" :id="canvasId" @touchstart="canvasStart($event)" @touchmove="canvasMove($event)">
+			<view v-if="history.length==0" :class="['default-text',horizontalScreen?'rote-text':'']">草稿区域</view>
+		</canvas>
+		<view :class="['action-box',horizontalScreen?'horizontalScreen':'']">
+			<view class="action-bar">
+				<view :class="[actionShow?'action-open':'action-close']">
+<!-- 					<image src="../../static/th-autograph/pencli.svg" @click="openAction('thLine')" v-if="judge('pencli')"></image> -->
+					<image src="../../static/th-autograph/color.svg" @click="openAction('thColor')" v-if="judge('color')"></image>
+					<image src="../../static/th-autograph/back.svg" @click="goBack" v-if="judge('back')"></image>
+					<image src="../../static/th-autograph/clear.svg" @click="clear" v-if="judge('clear')"></image>
+				</view>
+				<image src="../../static/th-autograph/checkRow.png" @click="checkAction"
+				v-if="actionBar.length!=0"
+				:class="[actionShow?'roteRight':'roteLeft']"></image>
+			</view>
+			<!-- <view class="th-submit" @click="saveCanvas">确定</view> -->
+		</view>
+		<th-color ref="thColor" @setColor="setColor"></th-color>
+		<th-line ref="thLine" @setLine="setLine"></th-line>
+	</view>
+</template>
+
+<script>
+	/**
+	 * @property {Array} actionBar 操作按钮配置 pencli(线条)  color(颜色)  back(返回)  clear(清空)
+	 * @property {String} canvasId CanvasId
+	 * @property {Boolean} isDownload 是否下载签名
+	 * @property {Boolean} horizontalScreen 是否横屏
+	 * @property {String} fileName 文件名称
+	 * @property {String} delineColor 线颜色
+	 * @property {Number} delineWidth 线宽度
+	 **/
+	import thColor from "./th-color.vue"
+	import thLine from "./th-line.vue"
+	export default {
+		props: {
+			//canvasId
+			canvasId: {
+				type: String,
+				default: `th-${Date.now()}`
+			},
+			//配置栏
+			actionBar:{
+				type:Array,
+				default:()=>{
+					return [
+						'pencli',
+						'color',
+						'back',
+						'clear'
+					]
+				}
+			},
+			//是否下载签名
+			isDownload: {
+				type: Boolean,
+				default: true
+			},
+			//是否横屏
+			horizontalScreen: {
+				type: Boolean,
+				default: false
+			},
+			//文件名称
+			fileName: {
+				type: String,
+				default: '签名'
+			},
+			//线颜色
+			delineColor: {
+				type: String,
+				default: '#000'
+			},
+			//线宽度
+			delineWidth: {
+				type: Number,
+				default: 4
+			}
+		},
+		data() {
+			return {
+				context:"",
+				actionShow:true,
+				history:[],
+				lineColor:"#000",
+				lineWidth:4
+			}
+		},
+		components:{
+			thColor,thLine
+		},
+		mounted () {
+			this.lineColor = this.delineColor
+			this.lineWidth = this.delineWidth
+			const ctx = uni.createCanvasContext(this.canvasId,this)
+			this.context = ctx;
+		},
+		methods: {
+			//操作栏显示控制
+			judge(key) {
+				if(this.actionBar.includes(key)){
+					return true
+				}else{
+					return false;
+				}
+			},
+			//打开选择器
+			openAction(ref) {
+				this.$refs[ref].checkModel()
+			},
+			//设置颜色
+			setColor(color) {
+				this.lineColor = color;
+			},
+			//设置线条
+			setLine(width) {
+				this.lineWidth = width;
+			},
+			//切换控制栏
+			checkAction() {
+				this.actionShow = !this.actionShow
+			},
+			//保存
+			async saveCanvas() {
+				const tempFilePath = await this.canvasToFilPath()
+				if(!this.isDownload) {
+					this.$emit('submit',tempFilePath)
+					return false;
+				}
+				return new Promise((resolve, reject) => {
+					// #ifdef H5
+					try {
+						const a = document.createElement('a')
+						a.href = tempFilePath
+						a.download = this.fileName
+						document.body.appendChild(a)
+						a.click()
+						a.remove()
+						resolve()
+					} catch (e) {
+						reject(e)
+					}
+					// #endif
+					// #ifndef H5
+					uni.saveImageToPhotosAlbum({
+						filePath: tempFilePath,
+						success(resObj) {
+							this.$emit('submit',tempFilePath)
+							resolve(resObj)
+						},
+						fail(err) {
+							this.$emit('dowmloadErr',err)
+							reject(err)
+						}
+					})
+					// #endif
+				})
+			},
+			// 保存临时路径
+			canvasToFilPath(conf = {}) {
+				return new Promise((resolve, reject) => {
+					uni.canvasToTempFilePath(
+						{
+							canvasId: this.canvasId,
+							success: res => {
+								resolve(res.tempFilePath)
+							},
+							fail: err => {
+								reject(err)
+							}
+						}
+					)
+				})
+			},
+			//撤回
+			goBack() {
+				this.context.draw()
+				this.history.pop();
+				this.history.forEach((item, index) => {
+					let {color,width} = item.style
+					this.context.beginPath()
+					this.context.setLineCap('round')
+					this.context.setStrokeStyle(color)
+					this.context.setLineWidth(width)
+					if (item.coordinates.length >= 2) {
+						item.coordinates.forEach(it => {
+							if (it.type == 'touchstart') {
+								this.context.moveTo(it.x, it.y)
+							} else {
+								this.context.lineTo(it.x, it.y)
+							}
+						})
+					} else {
+						const point = item.coordinates[0]
+						this.context.moveTo(point.x, point.y)
+						this.context.lineTo(point.x + 1, point.y)
+					}
+					this.context.stroke()
+				})
+				this.context.draw(true)
+			},
+			//清空画布
+			clear() {
+				this.history = [];
+				this.context.draw()
+			},
+			canvasStart(event) {
+				let {x,y} =  event.touches[0]
+				this.history.push({
+					style: {
+						color: this.lineColor,
+						width: this.lineWidth
+					},
+					coordinates: [
+						{
+							type: event.type,
+							x: x,
+							y: y
+						}
+					]
+				})
+				this.drawGraphics()
+			},
+			canvasMove(e) {
+				// e.preventDefault()
+				let {x,y} = e.touches[0]
+				this.history[this.history.length - 1].coordinates.push({
+					type: e.type,
+					x: x,
+					y: y
+				})
+				this.drawGraphics()
+			},
+			//绘制
+			drawGraphics() {
+				let historyLen = this.history.length
+				if (!historyLen) return
+				let currentData = this.history[historyLen - 1]
+				let coordinates = currentData.coordinates
+				if (!coordinates.length) return
+				let startPoint,endPoint;
+				if (coordinates.length < 2) {
+					startPoint = coordinates[coordinates.length - 1]
+					endPoint = {
+						x: startPoint.x + 1,
+						y: startPoint.y
+					}
+				} else {
+					startPoint = coordinates[coordinates.length - 2]
+					endPoint = coordinates[coordinates.length - 1]
+				}
+				let style = currentData.style
+				this.context.beginPath()
+				this.context.setLineCap('round')
+				this.context.setStrokeStyle(style.color)
+				this.context.setLineWidth(style.width)
+				this.context.moveTo(startPoint.x, startPoint.y)
+				this.context.lineTo(endPoint.x, endPoint.y)
+				this.context.stroke()
+				this.context.draw(true)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.autograph{
+		width: 100%;
+		height:100%;
+		box-sizing: border-box;
+		// border:1px dashed #ccc;
+	}
+	.horizontalScreen{
+		left: -150upx !important;
+		bottom: 0 !important;
+		right: auto !important;
+		transform: rotate(90deg);
+		transform-origin:bottom right;
+	}
+	.rote-text{
+		transform:rotate(90deg);
+	}
+	.action-box{
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+	}
+	.th-submit{
+		width: 150upx;
+		height: 100upx;
+		background-color: #4169E1;
+		border-radius: 70upx 0 0 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #FFFFFF;
+		font-size: 30upx;
+	}
+	.action-bar{
+		margin-bottom: 30upx;
+		margin-right: 35upx;
+		image{
+			width: 40upx;
+			height: 40upx;
+		}
+		>image{
+			transition: all 0.3s;
+		}
+		>view{
+			display: flex;
+			flex-direction: column;
+			image{
+				width: 40upx;
+				height: 40upx;
+				margin-bottom: 52upx;
+			}
+		}
+	}
+	.autograph-box{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		.default-text{
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			display: flex;
+			align-items: center;
+			z-index: -1;
+			justify-content: center;
+			font-size: 38upx;
+			color: #C0C0C0;
+			letter-spacing: 5upx;
+		}
+	}
+	.roteRight{
+		transform: rotate(136deg);
+	}
+	.roteLeft{
+		transform: rotate(0deg);
+	}
+	.action-open{
+		animation:bounceIn 1s;
+	}
+	.action-close{
+		animation:bounceOut 0.5s forwards;
+	}
+	@keyframes bounceIn {
+	
+		0%,
+		20%,
+		40%,
+		60%,
+		80%,
+		to {
+			-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+			animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+		}
+	
+		0% {
+			opacity: 0;
+			-webkit-transform: scale3d(.3, .3, .3);
+			transform: scale3d(.3, .3, .3)
+		}
+	
+		20% {
+			-webkit-transform: scale3d(1.1, 1.1, 1.1);
+			transform: scale3d(1.1, 1.1, 1.1)
+		}
+	
+		40% {
+			-webkit-transform: scale3d(.9, .9, .9);
+			transform: scale3d(.9, .9, .9)
+		}
+	
+		60% {
+			opacity: 1;
+			-webkit-transform: scale3d(1.03, 1.03, 1.03);
+			transform: scale3d(1.03, 1.03, 1.03)
+		}
+	
+		80% {
+			-webkit-transform: scale3d(.97, .97, .97);
+			transform: scale3d(.97, .97, .97)
+		}
+	
+		to {
+			opacity: 1;
+			-webkit-transform: scaleX(1);
+			transform: scaleX(1)
+		}
+	}
+	@keyframes bounceOut {
+		20% {
+			-webkit-transform: scale3d(.9, .9, .9);
+			transform: scale3d(.9, .9, .9)
+		}
+	
+		50%,
+		55% {
+			opacity: 1;
+			-webkit-transform: scale3d(1.1, 1.1, 1.1);
+			transform: scale3d(1.1, 1.1, 1.1)
+		}
+	
+		to {
+			opacity: 0;
+			-webkit-transform: scale3d(.3, .3, .3);
+			transform: scale3d(.3, .3, .3);
+			display: none;
+		}
+	}
+</style>

components/th-autograph/th-color.vue

@@ -0,0 +1,139 @@
+<template>
+	<view class="th-color" v-if="colorShow" @click="checkModel">
+		<view :class="[colorShow?'open-color':'close-color']" @click.stop="()=>{}">
+			<view class="color-head">颜色选择器</view>
+			<view class="color-box">
+				<view v-for="(item,index) in colorData" :key="item" 
+				 @click="checkColor(item)"
+				:class="{'checkItem':checkItem==item}">
+					<view>
+						<view :style="{'background':item}"></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				colorShow:false,
+				colorData:["red",'black','blue','yellow','green','#d925ff','#00b4ff','#ff00cc','#35ff81','#ff9c00','#ff7e00',
+				'#b4ff00','#28caa6','#490086','#deb7fe','#acacad','#525252','#a5896f','#bb3a30','#0058b2'
+				],
+				checkItem:""
+			}
+		},
+		methods:{
+			checkModel() {
+				this.colorShow = !this.colorShow;
+			},
+			//选择颜色
+			checkColor(item) {
+				this.checkItem = item;
+				this.colorShow = false;
+				this.$emit('setColor',item)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.checkItem{
+	border: 1px dashed #4169E1;
+	box-sizing: border-box;
+}
+.th-color{
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.5);
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 100;
+	display: flex;
+	align-items: flex-end;
+	>view{
+		width: 100%;
+		height: 470upx;
+		background: #FFFFFF;
+		box-shadow: 0 0 10upx #999999;
+		border-radius: 60upx 60upx 0 0;
+		box-sizing: border-box;
+		padding: 0 40upx;
+		overflow: hidden;
+		.color-head{
+			text-align: center;
+			font-size: 30upx;
+			height: 100upx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 20upx;
+		}
+		.color-box{
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			>view{
+				width: 20%;
+				height: 80upx;
+				border-radius: 10upx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				// margin-bottom: 30upx;
+				>view{
+					width: 50upx;
+					height: 50upx;
+					overflow: hidden;
+					border-radius: 50%;
+					box-sizing: border-box;
+					padding: 7upx;
+					border: 1px solid #C0C0C0;
+					>view{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+						background-color: red;
+					}
+				}
+			}
+		}
+	}
+}
+.open-color{
+	animation:fadeInUp 0.4s ;
+}
+.close-color{
+	animation:fadeInDown 0.5s ;
+}
+@keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0)
+	}
+}
+@keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0)
+	}
+}
+</style>

components/th-autograph/th-line.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="th-line" v-if="lineShow" @click="checkModel">
+		<view :class="[lineShow?'open-line':'close-line']" @click.stop="()=>{}">
+			<view class="line-head">线条选择器</view>
+			<view class="line-box">
+				<view v-for="(item,index) in lineData" :key="item"
+				 @click="checkline(item)"
+				 :style="{'height':item+'px'}"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				lineShow:false,
+				lineData:[4,8,12,16,18]
+			}
+		},
+		methods:{
+			checkModel() {
+				this.lineShow = !this.lineShow;
+			},
+			checkline(item) {
+				this.lineShow = false;
+				this.$emit('setLine',item)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.th-line{
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.5);
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 100;
+	display: flex;
+	align-items: flex-end;
+	>view{
+		width: 100%;
+		height: 500upx;
+		background: #FFFFFF;
+		box-shadow: 0 0 10upx #999999;
+		border-radius: 60upx 60upx 0 0;
+		.line-head{
+			text-align: center;
+			font-size: 30upx;
+			height: 100upx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 20upx;
+		}
+		.line-box{
+			box-sizing: border-box;
+			padding: 0 70upx;
+			>view{
+				margin-bottom:56upx;
+				width: 100%;
+				background-color: #000;
+			}
+		}
+	}
+}
+.open-line{
+	animation:fadeInUp 0.4s ;
+}
+.close-line{
+	animation:fadeInDown 0.5s ;
+}
+@keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0)
+	}
+}
+@keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0)
+	}
+}
+</style>

package.json

@@ -0,0 +1,19 @@
+{
+    "id": "th-autograph",
+    "name": "签名画板组件(兼容多端，支持横竖屏切换)",
+    "version": "0.1.2",
+    "description": "手写画板，支持颜色、线条、撤回、清空、横竖屏切换、操作栏控制等，简约风",
+    "keywords": [
+        "签名",
+        "横竖屏",
+        "canvas",
+        "画板",
+        "电子签名"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}

subpkg/exam/examPractice.vue

@@ -1,36 +1,103 @@
 <template>
-	<view>
+	<view class="page-view">
 		<top-return text="评测练习"></top-return>
-		<view class="view-box">
-			<view class="trade">
-				<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">
-					第一个页面
-				</view>
-				<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">
-					第二个页面
+
+		<view class="icon-view">
+			<view class="icon-card">
+				<view class="t-icon t-icon-naozhong1" style="margin-right: 10rpx;"></view>
+				<view class="time-title">练习时间</view>
+				<u-count-down :time="60 * 60 * 1000" format="mm:ss"></u-count-down>
+			</view>
+			<view class="icon-card" style="margin-left: auto;">
+				<view :class="signList.includes(curr)?'t-icon t-icon-ding-copy':'t-icon t-icon-ding'"
+					@click="addToSignList"></view>
+				<view :class="showNoteBox? 't-icon t-icon-bianji1-copy':'t-icon t-icon-bianji1'"
+					@click="showNoteBox = !showNoteBox"></view>
+				<view :class="answerSheet? 't-icon t-icon-cengji-copy':'t-icon t-icon-cengji'"
+					@click="answerSheet = !answerSheet" style="margin-right: 0;"></view>
+			</view>
+		</view>
+
+		<view class="note-view" catchtouchmove="true" v-if="showNoteBox">
+			<view class="note-box">
+				<th-autograph :is-download="false" canvas-id="autograph">
+				</th-autograph>
+			</view>
+		</view>
+
+		<swiper class="swiper-box" :style="{height: clientHeight?clientHeight+'px':'auto'}" :current="curr"
+			@change="setCurr">
+			<swiper-item v-for="(item,i) in practiceData" :key="i">
+				<scroll-view :style="{height: clientHeight?clientHeight+'px':'auto'}">
+					<view class="item-card" :id="'card' + i">
+						<view class="flex-baseline">
+							<view class="YS-title">{{examPractice[index].title}}{{examPractice[index].modality}}
+							</view>
+							<view class="title" style="color: #4169E1;margin-left: 10rpx;">{{i+1}}</view>
+							<view class="subtitle" style="margin: 0 10rpx;">/</view>
+							<view class="subtitle">{{examPractice[index].amount}}</view>
+							<view class="YS-title" style="margin-left: 10rpx;">题</view>
+						</view>
+
+						<view class="tag-fill" style="margin-top: 40rpx;">
+							<view class="tag-text">{{item.type}}</view>
+						</view>
+
+						<view class="content">{{item.content}}</view>
+
+						<view class="answer-container">
+							<view class="answer-box" v-for="(x,y) in item.options" :key="y">
+								<view :class="answerList[i].answer == x.option?'answer-tag-select':'answer-tag'"
+									@click="selectOption(i,y)">
+									<view class="tag-text">{{x.option}}</view>
+								</view>
+								<view class="answer-content" @click="selectOption(i,y)">{{x.answer}}</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<!-- 答题卡 -->
+			<swiper-item>
+				<scroll-view :style="{height: clientHeight?clientHeight+'px':'auto'}">
+					<view class="item-card">
+						<view class="tag-list">
+							<view :class="item.answer != ''?'answer-tag-select':'answer-tag'"
+								v-for="(item,index) in answerList" :key="index" @click="navTopic(index)"
+								style="margin: 40rpx 20rpx;">
+
+								<view class="sign-icon" v-if="signList.includes(index)">
+									<view class="t-icon t-icon-ding-copy"></view>
+								</view>
+
+								<view class="tag-text">{{item.index + 1}}</view>
+							</view>
+						</view>
+						<view class="btn">
+							<view class="btn-text">交卷</view>
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+		<u-action-sheet :show="answerSheet" @close="answerSheet = false" title="答题卡" :round="6">
+			<view style="margin: 20rpx 50rpx;">
+				<view class="tag-list">
+					<view :class="item.answer != ''?'answer-tag-select':'answer-tag'" v-for="(item,index) in answerList"
+						:key="index" @click="navTopic(index)" style="margin: 40rpx 20rpx;">
+
+						<view class="sign-icon" v-if="signList.includes(index)">
+							<view class="t-icon t-icon-ding-copy"></view>
+						</view>
+
+						<view class="tag-text">{{item.index + 1}}</view>
+					</view>
 				</view>
-				<view class="texts" :class="curr==2?'active':''" data-index="2" @tap="setCurr">
-					第三个页面
+				<view class="btn">
+					<view class="btn-text">交卷</view>
 				</view>
 			</view>
-			<swiper style="height: 80vh;" :current="curr" @change="setCurr">
-				<swiper-item>
-					<scroll-view>
-						aaa
-					</scroll-view>
-				</swiper-item>
-				<swiper-item>
-					<scroll-view>
-						bbb
-					</scroll-view>
-				</swiper-item>
-				<swiper-item>
-					<scroll-view>
-						ccc
-					</scroll-view>
-				</swiper-item>
-			</swiper>
-		</view>
+		</u-action-sheet>
 	</view>
 </template>
 
@@ -38,45 +105,571 @@
 	import {
 		mapState
 	} from 'vuex'
+	import thAutograph from "../../components/th-autograph/th-autograph.vue"
 	export default {
+		components: {
+			thAutograph
+		},
 		computed: {
 			...mapState('m_children', ['examPractice'])
 		},
+		watch: {
+			curr: {
+				handler(newValue) {
+					if (this.curr <= (this.practiceData.length - 1))
+						this.getSwiperHeight()
+				},
+				immediate: true
+			},
+		},
 		data() {
 			return {
 				index: '',
-				curr: 0
+				clientHeight: '',
+				curr: 0,
+				showNoteBox: false,
+				answerSheet: false,
+				signList: [],
+				answerList: '',
+				practiceData: [{
+						content: '题目内容一的外号对哦奥委会的卡号大家看上课进度吧，阿玛尼的卡乌诺迪克兰的三大我看啦到哪里扣篮代码是你',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					},
+					{
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。3192087jhcuyastgdjahkgsduyagwd',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					},
+					{
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。h217893y1jahsdbyugcjhzxbcytfu1231',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					},
+					{
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快32189371298hjahdsu。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一dkajghcjxzncuktwiajkjbsuydgi2uyhqjkn'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三312897319hjkabcjhxz'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					},
+					{
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。2318209uasiohsdjkaxnczuiywa',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一123i7auhcjkzxgczx'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三31289dyasjkdhciuxcz'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。adnauiychkajnwyiujagdhjabyuczxg2',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					}, {
+						content: '打完就都i阿娇的罗马里克电脑i经常兄长，达瓦ui带坏我很单纯进行只能催啊挖好的快回家，没齿难忘i垃圾我i的急啊离开你们死定了埃及低洼降低AMD扩散低洼会加大科技那么快。',
+						type: '单选题',
+						options: [{
+								option: 'A',
+								answer: '模拟答案一'
+							},
+							{
+								option: 'B',
+								answer: '模拟答案二'
+							},
+							{
+								option: 'C',
+								answer: '模拟答案三'
+							},
+							{
+								option: 'D',
+								answer: '模拟答案四'
+							}
+						]
+					},
+				],
 			}
 		},
 		onLoad(param) {
 			this.index = param.index
+			this.getAnswerList()
 		},
 		methods: {
+			//生成自适应高度swiper
+			getSwiperHeight() {
+				let query = uni.createSelectorQuery().in(this)
+				query.select('#card' + this.curr).boundingClientRect(data => {
+					this.clientHeight = data.height + 40
+					console.log('swiper高度', this.clientHeight);
+				}).exec();
+			},
 			setCurr(e) {
-				let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
+				let thisCurr = e.detail.current || 0;
 				this.curr = thisCurr;
+			},
+			//生成答题卡
+			getAnswerList() {
+				if (this.answerList === '') {
+					this.answerList = []
+					this.practiceData.forEach((item, index) => {
+						let answer = {
+							index: index,
+							answer: ''
+						}
+						this.answerList.push(answer)
+					})
+					console.log(this.answerList);
+				}
+			},
+			//选择选项
+			selectOption(i, y) {
+				this.answerList[i].answer = this.practiceData[i].options[y].option
+				if (this.curr <= (this.practiceData.length - 1)) {
+					setTimeout(() => {
+						this.curr = i + 1
+					}, 300);
+				}
+			},
+			//导航到题目
+			navTopic(index) {
+				this.curr = index
+				this.answerSheet = false
+			},
+			//标记题目
+			addToSignList() {
+				if(this.curr <= (this.practiceData.length - 1)){
+					if (this.signList.includes(this.curr)) {
+						this.signList = this.signList.filter(x => x != this.curr)
+					} else {
+						this.signList.push(this.curr)
+					}
+				}
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.view-box{
-		margin-top: 10vh;
-		.trade{
-			width: 100%;
+	.page-view {
+		height: 100%;
+		width: 100%;
+	}
+
+	.icon-view {
+		margin: 120rpx 20rpx 0 20rpx;
+		display: flex;
+		align-items: center;
+
+		.icon-card {
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+			height: 50rpx;
+			border-radius: $border-radius;
+			background-color: #FFF;
+
+			.t-icon {
+				margin-right: 40rpx;
+				width: 50rpx;
+				height: 50rpx;
+			}
+
+			.time-title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				margin-right: 10rpx;
+			}
+
+			.u-count-down__text.data-v-463368ae {
+				line-height: 30rpx !important;
+			}
+		}
+	}
+
+	.item-card {
+		margin: 20rpx;
+		padding: 40rpx 40rpx 80rpx 40rpx;
+		border-radius: $border-radius;
+		background-color: #FFF;
+
+		.content {
+			margin-top: 20rpx;
+			line-height: 60rpx;
+			font-size: 35rpx;
 			color: $title;
-			overflow: auto;
-			height: 5vh;
+			word-break: break-all;
 		}
-		.trade view{
-			text-align: center;
-			padding-left: 25upx;
-			width: 30%;
-			float: left;
+
+		.YS-title {
+			line-height: 38rpx;
+			font-size: 38rpx;
+		}
+
+		.tag-fill {
+			background-color: #d8deff;
+			width: fit-content;
+			margin-left: 0;
+			padding: 6rpx 12rpx;
+
+			.tag-text {
+				font-size: 28rpx;
+				color: #4169E1;
+			}
+		}
+
+		.answer-container {
+			display: flex;
+			flex-direction: column;
+
+			.answer-box {
+				margin-top: 40rpx;
+				display: flex;
+				align-items: center;
+
+				.answer-content {
+					margin-left: 40rpx;
+					font-size: 35rpx;
+					line-height: 60rpx;
+					color: $title;
+					word-break: break-all;
+				}
+			}
+		}
+	}
+
+	.answer-tag {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		height: 66rpx;
+		width: 66rpx;
+		border-radius: 50%;
+		border: 2rpx solid $subtitle;
+
+		.tag-text {
+			font-size: 35rpx;
+			line-height: 35rpx;
+			color: $subtitle;
 		}
-		.trade .texts.active{
-			border-bottom: 8upx solid $color-blue;
+	}
+
+	.answer-tag-select {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		height: 70rpx;
+		width: 70rpx;
+		border-radius: 50%;
+		background-color: #4169E1;
+
+		.tag-text {
+			font-size: 35rpx;
+			line-height: 35rpx;
+			color: #FFF;
+		}
+	}
+
+	.tag-list {
+		display: flex;
+		align-items: center;
+		align-content: flex-start;
+		justify-content: space-between;
+		flex-wrap: wrap;
+
+		.sign-icon {
+			position: relative;
+			left: 20rpx;
+			top: -60rpx;
+			width: 0rpx;
+			height: 0rpx;
+
+			.t-icon {
+				height: 50rpx;
+				width: 50rpx;
+			}
+		}
+	}
+
+	.btn {
+		margin: 40rpx 20rpx 0 20rpx;
+		height: 80rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #4169E1;
+		border-radius: 40rpx;
+
+		.btn-text {
+			color: #FFF;
+			line-height: 36rpx;
+			font-size: 36rpx;
+			font-family: YSfont;
+		}
+	}
+
+	.note-view {
+		width: 100%;
+		height: 550rpx;
+		margin: 20rpx 0 5rpx 0;
+
+		.note-box {
+			width: 710rpx;
+			height: 100%;
+			margin: 0 20rpx;
+			border-radius: $border-radius;
+			overflow: hidden;
+			background-color: #FFF;
 		}
 	}
 </style>

subpkg/home/classlist.vue

@@ -122,7 +122,7 @@
 		},
 		onLoad(parameter) {
 			this.getPageData()
-			this.current = parameter.index
+			this.current = parameter.index - 1
 		},
 		methods: {
 			getPageData() {

unpackage/dist/dev/mp-weixin/components/th-autograph/th-autograph.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "th-color": "/components/th-autograph/th-color",
+    "th-line": "/components/th-autograph/th-line"
+  }
+}

unpackage/dist/dev/mp-weixin/components/th-autograph/th-autograph.wxss

@@ -0,0 +1,206 @@
+.autograph.data-v-47289344 {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.horizontalScreen.data-v-47289344 {
+  left: -150rpx !important;
+  bottom: 0 !important;
+  right: auto !important;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transform-origin: bottom right;
+          transform-origin: bottom right;
+}
+.rote-text.data-v-47289344 {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.action-box.data-v-47289344 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.th-submit.data-v-47289344 {
+  width: 150rpx;
+  height: 100rpx;
+  background-color: #4169E1;
+  border-radius: 70rpx 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #FFFFFF;
+  font-size: 30rpx;
+}
+.action-bar.data-v-47289344 {
+  margin-bottom: 30rpx;
+  margin-right: 35rpx;
+}
+.action-bar image.data-v-47289344 {
+  width: 40rpx;
+  height: 40rpx;
+}
+.action-bar > image.data-v-47289344 {
+  transition: all 0.3s;
+}
+.action-bar > view.data-v-47289344 {
+  display: flex;
+  flex-direction: column;
+}
+.action-bar > view image.data-v-47289344 {
+  width: 40rpx;
+  height: 40rpx;
+  margin-bottom: 52rpx;
+}
+.autograph-box.data-v-47289344 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.autograph-box .default-text.data-v-47289344 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  z-index: -1;
+  justify-content: center;
+  font-size: 38rpx;
+  color: #C0C0C0;
+  letter-spacing: 5rpx;
+}
+.roteRight.data-v-47289344 {
+  -webkit-transform: rotate(136deg);
+          transform: rotate(136deg);
+}
+.roteLeft.data-v-47289344 {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+}
+.action-open.data-v-47289344 {
+  -webkit-animation: bounceIn-data-v-47289344 1s;
+          animation: bounceIn-data-v-47289344 1s;
+}
+.action-close.data-v-47289344 {
+  -webkit-animation: bounceOut-data-v-47289344 0.5s forwards;
+          animation: bounceOut-data-v-47289344 0.5s forwards;
+}
+@-webkit-keyframes bounceIn-data-v-47289344 {
+0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+0% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+}
+20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+}
+40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+}
+60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+}
+80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+}
+to {
+    opacity: 1;
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+}
+}
+@keyframes bounceIn-data-v-47289344 {
+0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+0% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+}
+20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+}
+40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+}
+60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+}
+80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+}
+to {
+    opacity: 1;
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+}
+}
+@-webkit-keyframes bounceOut-data-v-47289344 {
+20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+}
+50%,
+  55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+}
+to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+    display: none;
+}
+}
+@keyframes bounceOut-data-v-47289344 {
+20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+}
+50%,
+  55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+}
+to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+    display: none;
+}
+}
+

unpackage/dist/dev/mp-weixin/components/th-autograph/th-color.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/components/th-autograph/th-color.wxss

@@ -0,0 +1,119 @@
+.checkItem.data-v-2ca17628 {
+  border: 1px dashed #4169E1;
+  box-sizing: border-box;
+}
+.th-color.data-v-2ca17628 {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+}
+.th-color > view.data-v-2ca17628 {
+  width: 100%;
+  height: 470rpx;
+  background: #FFFFFF;
+  box-shadow: 0 0 10rpx #999999;
+  border-radius: 60rpx 60rpx 0 0;
+  box-sizing: border-box;
+  padding: 0 40rpx;
+  overflow: hidden;
+}
+.th-color > view .color-head.data-v-2ca17628 {
+  text-align: center;
+  font-size: 30rpx;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+.th-color > view .color-box.data-v-2ca17628 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.th-color > view .color-box > view.data-v-2ca17628 {
+  width: 20%;
+  height: 80rpx;
+  border-radius: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.th-color > view .color-box > view > view.data-v-2ca17628 {
+  width: 50rpx;
+  height: 50rpx;
+  overflow: hidden;
+  border-radius: 50%;
+  box-sizing: border-box;
+  padding: 7rpx;
+  border: 1px solid #C0C0C0;
+}
+.th-color > view .color-box > view > view > view.data-v-2ca17628 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: red;
+}
+.open-color.data-v-2ca17628 {
+  -webkit-animation: fadeInUp-data-v-2ca17628 0.4s;
+          animation: fadeInUp-data-v-2ca17628 0.4s;
+}
+.close-color.data-v-2ca17628 {
+  -webkit-animation: fadeInDown-data-v-2ca17628 0.5s;
+          animation: fadeInDown-data-v-2ca17628 0.5s;
+}
+@-webkit-keyframes fadeInUp-data-v-2ca17628 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+@keyframes fadeInUp-data-v-2ca17628 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+@-webkit-keyframes fadeInDown-data-v-2ca17628 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+@keyframes fadeInDown-data-v-2ca17628 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+

unpackage/dist/dev/mp-weixin/components/th-autograph/th-line.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/components/th-autograph/th-line.wxss

@@ -0,0 +1,93 @@
+.th-line.data-v-6ee93d82 {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+}
+.th-line > view.data-v-6ee93d82 {
+  width: 100%;
+  height: 500rpx;
+  background: #FFFFFF;
+  box-shadow: 0 0 10rpx #999999;
+  border-radius: 60rpx 60rpx 0 0;
+}
+.th-line > view .line-head.data-v-6ee93d82 {
+  text-align: center;
+  font-size: 30rpx;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+.th-line > view .line-box.data-v-6ee93d82 {
+  box-sizing: border-box;
+  padding: 0 70rpx;
+}
+.th-line > view .line-box > view.data-v-6ee93d82 {
+  margin-bottom: 56rpx;
+  width: 100%;
+  background-color: #000;
+}
+.open-line.data-v-6ee93d82 {
+  -webkit-animation: fadeInUp-data-v-6ee93d82 0.4s;
+          animation: fadeInUp-data-v-6ee93d82 0.4s;
+}
+.close-line.data-v-6ee93d82 {
+  -webkit-animation: fadeInDown-data-v-6ee93d82 0.5s;
+          animation: fadeInDown-data-v-6ee93d82 0.5s;
+}
+@-webkit-keyframes fadeInUp-data-v-6ee93d82 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+@keyframes fadeInUp-data-v-6ee93d82 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+@-webkit-keyframes fadeInDown-data-v-6ee93d82 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+@keyframes fadeInDown-data-v-6ee93d82 {
+0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+}
+to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+}
+

unpackage/dist/dev/mp-weixin/subpkg/exam/examPractice.json

@@ -2,6 +2,9 @@
   "enablePullDownRefresh": false,
   "navigationStyle": "custom",
   "usingComponents": {
-    "top-return": "/components/top-return/top-return"
+    "top-return": "/components/top-return/top-return",
+    "u-count-down": "/uni_modules/uview-ui/components/u-count-down/u-count-down",
+    "th-autograph": "/components/th-autograph/th-autograph",
+    "u-action-sheet": "/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet"
   }
 }

unpackage/dist/dev/mp-weixin/subpkg/exam/examPractice.wxss

@@ -1,19 +1,151 @@
-.view-box {
-  margin-top: 10vh;
-}
-.view-box .trade {
+.page-view {
+  height: 100%;
   width: 100%;
+}
+.icon-view {
+  margin: 120rpx 20rpx 0 20rpx;
+  display: flex;
+  align-items: center;
+}
+.icon-view .icon-card {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  height: 50rpx;
+  border-radius: 12rpx;
+  background-color: #FFF;
+}
+.icon-view .icon-card .t-icon {
+  margin-right: 40rpx;
+  width: 50rpx;
+  height: 50rpx;
+}
+.icon-view .icon-card .time-title {
+  font-size: 30rpx;
+  line-height: 30rpx;
+  margin-right: 10rpx;
+}
+.icon-view .icon-card .u-count-down__text.data-v-463368ae {
+  line-height: 30rpx !important;
+}
+.item-card {
+  margin: 20rpx;
+  padding: 40rpx 40rpx 80rpx 40rpx;
+  border-radius: 12rpx;
+  background-color: #FFF;
+}
+.item-card .content {
+  margin-top: 20rpx;
+  line-height: 60rpx;
+  font-size: 35rpx;
   color: #303133;
-  overflow: auto;
-  height: 5vh;
+  word-break: break-all;
+}
+.item-card .YS-title {
+  line-height: 38rpx;
+  font-size: 38rpx;
+}
+.item-card .tag-fill {
+  background-color: #d8deff;
+  width: -webkit-fit-content;
+  width: fit-content;
+  margin-left: 0;
+  padding: 6rpx 12rpx;
+}
+.item-card .tag-fill .tag-text {
+  font-size: 28rpx;
+  color: #4169E1;
+}
+.item-card .answer-container {
+  display: flex;
+  flex-direction: column;
+}
+.item-card .answer-container .answer-box {
+  margin-top: 40rpx;
+  display: flex;
+  align-items: center;
 }
-.view-box .trade view {
-  text-align: center;
-  padding-left: 25rpx;
-  width: 30%;
-  float: left;
+.item-card .answer-container .answer-box .answer-content {
+  margin-left: 40rpx;
+  font-size: 35rpx;
+  line-height: 60rpx;
+  color: #303133;
+  word-break: break-all;
+}
+.answer-tag {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: 66rpx;
+  width: 66rpx;
+  border-radius: 50%;
+  border: 2rpx solid #909399;
+}
+.answer-tag .tag-text {
+  font-size: 35rpx;
+  line-height: 35rpx;
+  color: #909399;
+}
+.answer-tag-select {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: 70rpx;
+  width: 70rpx;
+  border-radius: 50%;
+  background-color: #4169E1;
+}
+.answer-tag-select .tag-text {
+  font-size: 35rpx;
+  line-height: 35rpx;
+  color: #FFF;
+}
+.tag-list {
+  display: flex;
+  align-items: center;
+  align-content: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.tag-list .sign-icon {
+  position: relative;
+  left: 20rpx;
+  top: -60rpx;
+  width: 0rpx;
+  height: 0rpx;
+}
+.tag-list .sign-icon .t-icon {
+  height: 50rpx;
+  width: 50rpx;
+}
+.btn {
+  margin: 40rpx 20rpx 0 20rpx;
+  height: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #4169E1;
+  border-radius: 40rpx;
+}
+.btn .btn-text {
+  color: #FFF;
+  line-height: 36rpx;
+  font-size: 36rpx;
+  font-family: YSfont;
+}
+.note-view {
+  width: 100%;
+  height: 550rpx;
+  margin: 20rpx 0 5rpx 0;
 }
-.view-box .trade .texts.active {
-  border-bottom: 8rpx solid #4169E1;
+.note-view .note-box {
+  width: 710rpx;
+  height: 100%;
+  margin: 0 20rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background-color: #FFF;
 }
 

unpackage/dist/dev/mp-weixin/uni_modules/uview-ui/components/u-count-down/u-count-down.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/uni_modules/uview-ui/components/u-count-down/u-count-down.wxml

@@ -0,0 +1 @@
+<view class="u-count-down data-v-463368ae"><block wx:if="{{$slots.default}}"><slot></slot></block><block wx:else><text class="u-count-down__text data-v-463368ae">{{formattedTime}}</text></block></view>

unpackage/dist/dev/mp-weixin/uni_modules/uview-ui/components/u-count-down/u-count-down.wxss

@@ -0,0 +1,15 @@
+view.data-v-463368ae, scroll-view.data-v-463368ae, swiper-item.data-v-463368ae {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.u-count-down__text.data-v-463368ae {
+  color: #606266;
+  font-size: 15px;
+  line-height: 22px;
+}
+