如图所示效果:
1.从全部选项中选择文字文字显示在上面(从左到右哪里为空往哪补),选择的文字消失
2.点击上面修改文字时上面文字消失,下面还原之前的位置
3.提示从后往前提示 如果前面有错误的文字同时清空
4.重置按钮直接清空选择的文字,底部还原
代码:
<!--pages/bounty/filmstar/filmstar.wxml-->
<view class='page-wrap'>
<view class='common'>
<view class='count' bindtap='addCoin'>{{integral}}</view>
<view class='subject'>
<image src='http://p5mf8oew1.bkt.clouddn.com/gs_1539402880343' mode='widthFix'></image>
</view>
<view class='btn_box flex-s-e'>
<button class='s_btn' bindtap='tip' >
<span class='tip-ico'></span>
<span>提示</span>
</button>
<button class='s_btn' open-type='share' data-id='1'>
<span class='onshare-ico'></span>
<span>求助</span>
</button>
</view>
</view>
<view class='difficult-wrap'>
<!-- 难度三 -->
<view class='difficult3'>
<view class='answer-qu'>
<view class='text-wrap'>
<!-- 回答部分 -->
<block wx:for='{{text}}' wx:key="{{index}}">
<view class="text {{color=='red'?'animated shake':''}}" bindtap='clear' data-index='{{index}}' data-concent='{{item}}' style='color:{{color}}'>{{item}}</view>
</block>
<view class='reset' bindtap='reset'>
<!-- <image src='../../../img/up.png'></image> -->
</view>
</view>
</view>
<!-- 选择部分 -->
<view class='select-wrap'>
<block wx:for="{{otherAnswers}}" wx:key="{{index}}">
<view class='select-fu' bindtap='select' data-index='{{index}}' data-concent='{{item}}'>
<view class='select' wx:if="{{item!=''?true:false}}">{{item}}</view>
</view>
</block>
</view>
</view>
</view>
<!-- 答对弹框 showmodel-->
<view class="modal-mask {{showmodel==true?'animated fadeInDownBig':''}}" wx:if="{{showmodel}}" bindtap='hidemodel'></view>
<view class="modal {{showmodel==true?'animated fadeInDownBig':''}}" wx:if="{{showmodel}}">
<view class='tittle'>答对啦</view>
<view class='concent'>
<image class='star-ico' src='http://p5mf8oew1.bkt.clouddn.com/gs_1539402880343'></image>
<view class='answer-qu'>
<view class='text-wrap'>
<block wx:for='{{answer}}' wx:key="{{index}}">
<view class='text'>{{item}}</view>
</block>
</view>
</view>
<block wx:if="{{share!=true}}">
<view class='addcount'>
</view>
<view class='btn-wrap'>
<button class='button' open-type='share' data-id='2'>考考好友</button>
<button class='button red' bindtap='next'>下一题</button>
</view>
</block>
<block wx:else>
<view class='btn-wrap'>
<button class='button backindex' bindtap='gohome'>回到首页</button>
</view>
</block>
</view>
</view>
</view>
wxss
image {
width: 100%;
height: 100%;
}
.return {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
position: fixed;
top: 120rpx;
left: 30rpx;
background: rgba(0, 0, 0, 0.3);
}
/* 是否选中图标大小 */
.YN {
width: 30rpx;
height: 30rpx;
display: block;
}
page {
background: -webkit-linear-gradient(#67078c, #5a67f4); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#67078c, #5a67f4); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#67078c, #5a67f4); /* Firefox 3.6 - 15 */
background: linear-gradient(#67078c, #5a67f4); /* 标准的语法 */
}
/* 题目图片 */
.subject {
width: 450rpx;
height: 450rpx;
border-radius: 20rpx;
margin: 0 auto;
border: 10rpx solid #fff;
margin-top: 110rpx;
box-sizing: content-box;
overflow: hidden;
}
/* 提示求助按钮 */
.btn_box {
width: 445rpx;
margin: 0 auto;
margin-top: 57rpx;
position: relative;
}
/* 减少积分 */
.reduce {
position: absolute;
top: -50rpx;
left: 67rpx;
color: #fbf45b;
font-size: 27rpx;
}
.reduce-ico {
width: 20rpx;
height: 20rpx;
background: #fbf45b;
border-radius: 50%;
}
.s_btn {
width: 182rpx;
height: 58rpx;
line-height: 58rpx;
text-align: center;
background: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 58rpx;
display: flex;
flex-wrap: nowrap;
padding: 0 40rpx;
align-items: center;
margin: 0;
}
/* 提示求助按钮小图标 */
.tip-ico, .onshare-ico {
display: block;
margin-right: 10rpx;
}
.tip-ico {
width: 22rpx;
height: 29rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAACuc5z4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNzlDRENDNUMxRjkxMUU4Qjc0NUZDNzk2QjkxMzM5OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNzlDRENDNkMxRjkxMUU4Qjc0NUZDNzk2QjkxMzM5OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI3OUNEQ0MzQzFGOTExRThCNzQ1RkM3OTZCOTEzMzk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI3OUNEQ0M0QzFGOTExRThCNzQ1RkM3OTZCOTEzMzk4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+989bPAAAAdtJREFUeNqclksoRGEUx2dGeeRVXkUeSTLFxsqgrKbIygJlYYO110aNlFjYWLKW/SwtTFYKSWpSnhshCRMyHguZrv+pe6fj9N3vPk796s55/Pue55ugYRgBGysCfWAYhEGZ6X8F5yAOtsGnspqEFSyDlOFslDOv0pCOBnBoeLcDUMe1gmwp6kGSTZnbFXimCYJy0KrISYE2M+/fiM8VI9kALYqpNoJVRf6ZXIopRdKEzfpzIuBR1E1bwnkgLYKDLkQtasAXq/0mTQr0CNEtD6IWI0JjiJxLwtnlQ5h4YBqbIexfhO3sL7gM+LME+64j4QrmuDNvlh97Y9/5JPzOHAUB/9bAvjMkfMwc1SLBi0X56El4RyRM+hAdBSXs9x7tZqF59rjVezgNTeIck9VawTkRuAbFLkSrwIuoXZfd7V4kXIBcjWgOuBU1dL1DUrhD0S9ONcL7ivywXT8eVyQvKkRnRE4G9OoaPdGvEG9n8Sj4YbE4aHZ6QSw6bZZF9uwnu6XS7fiaiycpZlcf1LzSldlnxt5KQVoV0AmTDYBu863L1pgkFLfWtbBvcxKmPyyzol9/mF3wBCzYVjpc2Zhm4250tSGHGR1pYivaSheNhm7jrvmSE0kw5lT3J8AAeNgq7NCWlbAAAAAASUVORK5CYII=') no-repeat;
background-size: 22rpx 29rpx;
}
.onshare-ico {
width: 30rpx;
height: 24rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYCAYAAADtaU2/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCOTg1OUM5QkMxRjkxMUU4QTJDNUYwQUQxQkMwOTUxQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCOTg1OUM5Q0MxRjkxMUU4QTJDNUYwQUQxQkMwOTUxQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI5ODU5Qzk5QzFGOTExRThBMkM1RjBBRDFCQzA5NTFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI5ODU5QzlBQzFGOTExRThBMkM1RjBBRDFCQzA5NTFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XWcLcAAAAgtJREFUeNq0lk0oRFEUx98wzcrHRDJZ2SALaYqIBaVMysJCKaJsR1JK7BBlISzsSGIlURYKK0XCTBQpUZOPfIQy+Saj53915XR6M++9eePUr5l7zzn3vPfuueceRVVVxQL14AQMmfW1EjQOPKt/sgKcRv3jlOhF+L6RcSU4BEVGnaMVfC/lQ/7/lL8usAXq/jPwFwjJ/wHQSnQzoC/yY0e/x25wJ/c3KOfywQvZ90WQZDW5XKAZTMhM5pIo7XLBDZkPgOxoAou3mAQfanjZBPHEJx3sE/07qDETeFgjyCdYBoOgF7SBBA1fO1hlvl16gTPBLnNaAg0gw2QuTLF1pkUN0DLMY4XhGHgsVrhOcE/W9HGDNPBKDBbY3llhh742V/pYUCVGLPBto8p2otiLUcAUsMGCjgid7SfDFMUJgqSuiPEDG5cAtyyLYpwMHLJs9gM/q01ZYB2kk7laME8rVw95oiY5Vwb6wTZ4UiPLEbCRNy0Ej0QvCkqJ1jm+lAanoFbj/OnJM1m0munWQKpW5SomRo9hFj4Hs/LC98qvUQCuyZETazUyv4FIjUB7mGBXYBRUsc9IOZO2ftDN/L16HcgccwiBDuDQyVhxvi80HvgWlBppfQ7YXuUYPCp2Vo1+L4s0oz0XvcLKTfZcNPCY2WaPJpDZAuGRl32LWV+RNKI/qgDjGkXg3+RbgAEAqV59S7nANmQAAAAASUVORK5CYII=') no-repeat;
background-size: 30rpx 24rpx;
}
/* 底部答题区域 底部答题区域 底部答题区域 底部答题区域*/
/* 难度包裹框 */
.difficult-wrap {
font-size: 30rpx;
}
/* 难度1,难度2共用选择按钮 */
.select {
width: 540rpx;
background: #fff;
text-align: center;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
}
.select .center {
position: relative;
/* width: 130rpx;
height: 100%;
text-align: center; */
}
/* 难度1 */
.difficult1 {
margin-top: 158rpx;
}
.difficult1 .select {
height: 88rpx;
line-height: 88rpx;
border-radius: 88rpx;
margin-bottom: 30rpx;
align-items: center;
justify-content: center;
}
/* 难度2 */
.difficult2 {
margin-top: 65rpx;
}
.difficult2 .select {
height: 80rpx;
line-height: 80rpx;
border-radius: 80rpx;
margin-bottom: 20rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
/* 难度3 */
.difficult3 {
}
/* 回答区域 */
.answer-qu {
display: flex;
flex-wrap: nowrap;
margin-top: 52rpx;
}
/* 文字包裹 */
.text-wrap {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0 auto;
position: relative;
}
/* 文字里的每个文字 */
.text-wrap .text {
width: 80rpx;
height: 80rpx;
background: #e4e1ff;
border-radius: 10rpx;
border-bottom: 10rpx solid #b9b6ef;
text-align: center;
line-height: 80rpx;
margin-right: 10rpx;
}
.reset {
position: absolute;
right: -40rpx;
top: 0;
bottom: 0;
margin: auto;
}
.answer-qu .reset {
width: 39rpx;
height: 33rpx;
background: #fff;
}
.select-wrap {
width: 650rpx;
display: flex;
flex-wrap: wrap;
align-content: space-around;
margin: 0 auto;
margin-top: 40rpx;
}
.select-fu {
width: 80rpx;
height: 80rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
border-radius: 15rpx;
overflow: hidden;
}
.select-wrap .select {
width: 80rpx;
height: 80rpx;
background: #e4e1ff;
border: 1px solid #b9b6ef;
border-radius: 15rpx;
text-align: center;
line-height: 80rpx;
display: flex;
justify-content: center;
}
.select-wrap .select-fu:nth-of-type(7n) {
margin-right: 0rpx;
}
/* 模态框 */
.modal {
width: 640rpx;
height: 680rpx;
border-radius: 30rpx;
background: #a19cf6;
position: absolute;
z-index: 100;
top: 230rpx;
left: 0;
right: 0;
margin: auto;
}
/* 标题 */
.tittle {
width: 370rpx;
height: 112rpx;
line-height: 90rpx;
font-weight: bold;
text-align: center;
font-size: 40rpx;
letter-spacing: 10rpx;
color: #fff;
position: absolute;
top: -55rpx;
left: 0;
right: 0;
margin: auto;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW0AAABuCAYAAADs4kI4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QjZGOENDQkMxRkExMUU4ODBENkRGOTRBQzU2NTQ5QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QjZGOENDQ0MxRkExMUU4ODBENkRGOTRBQzU2NTQ5QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhCNkY4Q0M5QzFGQTExRTg4MEQ2REY5NEFDNTY1NDlBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhCNkY4Q0NBQzFGQTExRTg4MEQ2REY5NEFDNTY1NDlBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Ob0d/AAACbhJREFUeNrs3XuopVUZ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') no-repeat;
background-size: 370rpx 112rpx;
}
/* 内容 */
.concent {
width: 640rpx;
height: 680rpx;
}
.star-ico {
width: 232rpx;
height: 232rpx;
display: block;
margin: 0 auto;
border-radius: 40rpx;
background: red;
margin-top: 95rpx;
margin-bottom: 40rpx;
}
.addcount {
width: 110rpx;
height: 50rpx;
margin: 35rpx auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.addcount .gold {
width: 40rpx;
height: 40rpx;
}
.addcount span {
display: block;
font-size: 35rpx;
color: #fff;
}
.btn-wrap {
width: 444rpx;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.button {
width: 195rpx;
height: 70rpx;
background: #fca025;
font-size: 30rpx;
border-radius: 70rpx;
border-bottom: 5rpx solid #ef8e0c;
}
.button.red {
background: #e65e5e;
border-bottom: 5rpx solid #e44041;
}
.error {
background: #ff4c4d;
color: #fff;
}
.correct {
background: #3ccc1f;
color: #fff;
}
.error .center::before {
position: absolute;
left: -45rpx;
top: 50%;
margin-top: -10.5rpx;
content: "";
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MENDMjlDMUMyM0IxMUU4QjQ4Qzk5RTgwNjcwMDgwRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MENDMjlDMkMyM0IxMUU4QjQ4Qzk5RTgwNjcwMDgwRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwQ0MyOUJGQzIzQjExRThCNDhDOTlFODA2NzAwODBGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwQ0MyOUMwQzIzQjExRThCNDhDOTlFODA2NzAwODBGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GM4KAAAAAU1JREFUeNpi+P//PwMQFwBxKpRNLSwGxD1AzAnilP1HAD8qWcAOxLegZt5gYmBg4GZAgI1AHMxAGWAH4gtArArl/4XZXPwfFZDrIzYgvohkzikgZkJWkINmUSiJFvAC8SUk/QeAmBEkh66wAM2iYCIt4EPzwUFkeWwa0C3yISKSryKpP4GuBpdGYuOIG80HR4CYmVhLsMWRHxYfXEeSP4TLLEJhnY1mURBUnAXNggP4zCEmUtGDLgmId6IlUwZKLcEWdDCwH5ZMqWEJCJejWXCZWL1MRBYVrEBsjSYmAsR2ROkmwiXoyfQOqUUQMaUptmQaRYpFpFhwAC2Ss4ktgkgpTckuGUgqTYlM3qGELMFbmuLBeEtvkkpTEi3yQbeEqNKUjCLID2aJLLGlKZlFUCgDtPwhqjQlAaMkb5CAARC/IqUsIqGs+wDEVQABBgDqhlMTD1nzYgAAAABJRU5ErkJggg==);
width: 25rpx;
height: 25rpx;
background-size: 100% 100%;
}
.correct .center::before {
position: absolute;
left: -45rpx;
top: 50%;
margin-top: -10rpx;
content: "";
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAWCAYAAAA8VJfMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjNCRjlGMUMyM0IxMUU4QjQwOUE2NTFDQjk5QjNERiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjNCRjlGMkMyM0IxMUU4QjQwOUE2NTFDQjk5QjNERiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyM0JGOUVGQzIzQjExRThCNDA5QTY1MUNCOTlCM0RGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQyM0JGOUYwQzIzQjExRThCNDA5QTY1MUNCOTlCM0RGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+X8QT1gAAARFJREFUeNpi/P//PwOdwDIgXgfEaxjpZOkWIPaGsoPoYelmIPZB4p9lAFlKQ7z1Pyq4AMQitLRwC5qFV4CYHRyyNLJwG5qFJ4GYEyZPCwt3YglSVmQ11LZwE5qFZ5B9SAtL0X14FoiZsKmlVRyeB2IWXOqROQZkWrgZzcLjsFRKyNI5UA2xJFq4G0uQEtQHIhagaQwlM+OfQ0+l+Cwt+I8Jokm08BQQMxIbQjBGIBaLw4lMpaBswUxKtCBzQrFYHEYglZ4i1UJsWcYHi8WeOHx4DFc+JNVSEA5AM/wPtOxET6XM5OZrXBJB/3GDo4TyIbmWgrAvFgtPUqMEI6TAHy3RMNHDUhBOAeJ91LIQhAECDACwNe5J8PBYbAAAAABJRU5ErkJggg==);
width: 29rpx;
height: 22rpx;
background-size: 100% 100%;
}
.tipmodel {
width: 490rpx;
height: 470rpx;
background: #fff;
position: absolute;
z-index: 100;
top: 250rpx;
left: 0;
right: 0;
margin: auto;
border-radius: 20rpx;
overflow: hidden;
}
.tipmodel .top {
height: 228rpx;
width: 100%;
background: url('https://bnlnimg.bnln100.com/tipbg.png') no-repeat;
background-size: 100% 228rpx;
}
.tipmodel .center {
height: 130rpx;
line-height: 130rpx;
width: 100%;
text-align: center;
}
/* 分享弹框样式 分享弹框样式 分享弹框样式 */
.gift-cover .close {
width: 100%;
height: 100%;
}
.gift-cover .get-gift {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 691rpx;
height: 600rpx;
background: url(http://pfp4iyx72.bkt.clouddn.com//index/getGift.png) 0 0 no-repeat;
background-size: cover;
padding: 125rpx 0 0 0;
text-align: center;
}
.gift-cover .get-gift .get-gift-title {
position: absolute;
font-size: 36rpx;
top: 50rpx;
left: 180rpx;
color: #fff;
}
.gift-cover .get-gift .tip {
font-size: 36rpx;
color: #3e7baa;
margin-top: 30rpx;
}
.gift-cover .get-gift .head-img {
width: 126rpx;
height: 126rpx;
border-radius: 20rpx;
margin: 30rpx auto;
}
.gift-cover .get-gift .head-img image {
width: 100%;
}
.gift-cover .get-gift .coin {
color: #e9ab38;
font-size: 40rpx;
}
.gift-share {
width: 268rpx;
height: 90rpx;
background: url(http://pfp4iyx72.bkt.clouddn.com//index/giftShare.png) 0 0 no-repeat;
background-size: cover;
margin: 0 auto;
color: #fff;
font-size: 36rpx;
line-height: 82rpx;
margin-top: 20rpx;
}
.gift-share::after {
border: none;
}
.upgrade {
width: 600rpx;
height: 648rpx;
background: #fff;
position: absolute;
top: 170rpx;
left: 0;
right: 0;
margin: auto;
z-index: 200;
border-radius: 20rpx;
}
.tittletext {
height: 55rpx;
line-height: 55rpx;
text-align: center;
font-size: 40rpx;
font-weight: bold;
margin-top: 45rpx;
position: relative;
margin-bottom: 38rpx;
letter-spacing: 5rpx;
}
.close {
width: 52rpx;
height: 52rpx;
border-radius: 50%;
position: absolute;
right: 20rpx;
top: 0;
}
.ico {
width: 167rpx;
height: 218rpx;
margin: 0 auto;
}
.text_wrap {
height: 180rpx;
overflow: hidden;
}
.uptext {
text-align: center;
font-size: 35rpx;
margin-top: 35rpx;
margin-bottom: 20rpx;
}
.uptext2 {
margin-top: 66rpx;
}
.lv {
color: #9739ff;
font-weight: bold;
}
.dif {
text-align: center;
font-size: 35rpx;
}
.yes_btn {
width: 355rpx;
height: 82rpx;
margin: 0 auto;
}
js
// pages/bounty/difficulty/difficulty.js
var select_index; //选择对应的数组 根据答案长度判断
Page({
data: {
tipclick: true, //提示是否可点
showmodel: false, //答对了弹框
color: '#333', //控制答案正确错误的字体颜色
integral: 0, //积分数字
topiclist: [], //所有题目信息
answer: '孙艺洲', //正确答案
text: '', //难度三答题框
otherAnswers: ["宇", "均", "春", "那", "杨", "威", "长", "王", "艺", "双", "刘", "孙", "斌", "洲", "绘", "耀", "力", "皓", "弘", "嘉", "立"], //可选文字21位数字
copy: ["宇", "均", "春", "那", "杨", "威", "长", "王", "艺", "双", "刘", "孙", "斌", "洲", "绘", "耀", "力", "皓", "弘", "嘉", "立"],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
var text = [];
for (var i = 0; i < that.data.answer.length; i++) {
text[i] = '';
}
select_index = text;
console.log(text);
console.log(select_index);
that.setData({
text: text,
})
},
// 难度三----------------------------------------------------------------------------
//难度三选择文字并在上面显示
select: function(e) {
var that = this;
let currNum = 0; //判断是否停止点击
var value = e.currentTarget.dataset.concent; //本次点击选择的值
var click = e.currentTarget.dataset.index; //点击的索引
//判断那几个空格为空 哪个个为空就插入哪一个
for (var i = 0; i < that.data.text.length; i++) {
if (that.data.text[i] == '') {
that.data.text[i] = value; //文字插入到text
select_index[i] = click; //记录对应的索引
break;
}
//判断text里的每一项是否都为空 全都不为空的时候不能点击选择文字
if (that.data.text[i] != '') {
currNum++;
}
if (currNum == that.data.answer.length) {
return;
}
}
console.log(select_index);
that.data.otherAnswers[click] = ''; //把文字对应隐藏
that.setData({
text: that.data.text,
otherAnswers: that.data.otherAnswers,
color: '#333',
})
//判断正误
that.dif3judge();
},
//难度三弹框下一题按钮事件
next: function() {
var that = this;
that.hidemodel(); //隐藏并重置
},
// 提示
tip: function(e) {
var that = this;
if (that.data.tipclick == false) {
console.log('不可点击');
return;
}
console.log('你点击了提示')
let currNum = 0;
//清空错误文字并补全其他答案里面的文字 从前往后看
for (var j = 0; j < that.data.text.length; j++) {
if (that.data.text[j] != '' && that.data.text[j] != that.data.answer[j]) {
var cur = select_index[j]; //要清除文字之前在其他答案里的下标
console.log(cur);
that.data.otherAnswers[cur] = that.data.text[j];
that.data.text[j] = '';
select_index[j] = '';
}
}
//从后往前提示
for (var i = that.data.text.length - 1; i >= 0; i--) {
if (that.data.text[i] == '') {
that.data.text[i] = that.data.answer[i]; //提示文字后放
var index = that.data.otherAnswers.indexOf(that.data.answer[i]); //提示文字在其他选项里的下标
select_index[i] = index; //更新下标的记录
that.data.otherAnswers[index] = '' //隐藏其他选项中的文字
break;
}
//判断text里的每一项是否都为空
if (that.data.text[i] != '') {
currNum++;
}
if (currNum == that.data.answer.length) {
return;
}
}
console.log(select_index);
that.setData({
text: that.data.text,
otherAnswers: that.data.otherAnswers,
color: '#333',
})
that.dif3judge();
},
//难度三移除单个
clear: function(e) {
var that = this;
var value = e.currentTarget.dataset.concent; //本次点击选择的值
var index = e.currentTarget.dataset.index;
console.log(value);
console.log(index);
that.data.text[index] = ''; //把选中的移除
that.data.otherAnswers[select_index[index]] = value; //其他选项里的文字还原
select_index[index] = ''; //然后把slect_index中的清为''
that.setData({
text: that.data.text,
otherAnswers: that.data.otherAnswers,
color: '#333',
})
console.log(select_index);
},
//隐藏答对模态框并进行下一题
hidemodel: function() {
var that = this;
that.setData({
showmodel: false,
})
that.reset();
},
//难度三重置文字
reset: function() {
var that = this;
for (var i = 0; i < that.data.answer.length; i++) {
that.data.text[i] = '';
select_index[i] = '';
}
console.log(select_index);
that.setData({
text: that.data.text,
otherAnswers: that.data.copy
})
},
//难度三判断正误正确显示弹框 错误减分动画
dif3judge: function() {
var that = this;
var shownum = 0
for (var i = 0; i < that.data.text.length; i++) {
//判断text里的每一项是否都为空
if (that.data.text[i] != '') {
shownum++;
}
}
if (shownum == that.data.answer.length) {
var huidastr = that.data.text.toString().replace(/,/g, "");
//如果答对了
if (that.data.answer.toString() == huidastr) {
that.setData({
showmodel: true,
})
} else {
wx.vibrateLong();
that.setData({
color: 'red',
})
console.log('答错了扣分');
}
}
},
})