kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

重新挑战演练回顾样式更改

h5_css
蟑螂恶霸 3 years ago
parent
c64812d038
commit
06f678f4aa
7 changed files with 283 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      pages.json
  2. 42
      static/base_css.css
  3. BIN
      static/images/bg_qnum.png
  4. BIN
      static/images/tack.png
  5. 18
      subpkg/complete/complete.vue
  6. 138
      subpkg/rechallenge/rechallenge.vue
  7. 144
      subpkg/review/review.vue

6
pages.json
View File

@ -145,7 +145,8 @@
"style" : "style" :
{ {
"navigationBarTitleText" : "", "navigationBarTitleText" : "",
"enablePullDownRefresh" : false "enablePullDownRefresh" : false,
"navigationStyle": "custom"
} }
}, },
{ {
@ -153,7 +154,8 @@
"style" : "style" :
{ {
"navigationBarTitleText" : "", "navigationBarTitleText" : "",
"enablePullDownRefresh" : false "enablePullDownRefresh" : false,
"navigationStyle": "custom"
} }
}] }]
}], }],

42
static/base_css.css
View File

@ -47,7 +47,7 @@ img {
z-index: 9999; z-index: 9999;
padding: 0 5%; padding: 0 5%;
width: 100%; width: 100%;
height: 45px; height: 90rpx;
color: #fff; color: #fff;
line-height: 30px; line-height: 30px;
background-color: #bac6fc; background-color: #bac6fc;
@ -58,9 +58,9 @@ img {
.mainwrap { .mainwrap {
margin-top: 40px; margin-top: 90rpx;
padding-bottom: 5%; padding-bottom: 5%;
height: calc(100% - 100px); height: calc(100% - 100rpx);
width: 100%; width: 100%;
background-image: linear-gradient(to bottom, #bac6fc, transparent 50%); background-image: linear-gradient(to bottom, #bac6fc, transparent 50%);
box-sizing: content-box; box-sizing: content-box;
@ -89,7 +89,7 @@ img {
height: 65%; height: 65%;
width: 94%; width: 94%;
box-sizing: content-box; box-sizing: content-box;
border-radius: 10px; border-radius: 20rpx;
} }
.itembox { .itembox {
@ -116,11 +116,11 @@ img {
top: 35px; top: 35px;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
height: 50px; height: 100rpx;
} }
.subtop { .subtop {
height: 110px; height: 200rpx;
background: #fff none; background: #fff none;
} }
@ -130,7 +130,7 @@ img {
} }
.subtop .pagetit, .sectop .pagetit { .subtop .pagetit, .sectop .pagetit {
margin-top: -20px; margin-top: -40rpx;
} }
h3.contit { h3.contit {
@ -670,4 +670,30 @@ span.rigadd {
margin: 3% 2%; margin: 3% 2%;
line-height: 3.0; line-height: 3.0;
letter-spacing: 2px; letter-spacing: 2px;
} }
/* 关闭按钮 */
.closesty {
position: absolute;
top: -50rpx;
right: -30rpx;
width: 50rpx;
height: 50rpx;
background-color: #e4eafe;
border-radius: 50%;
}
.closesty:before, .closesty:after {
position: absolute;
top: 10rpx;
left: 25rpx;
content: "";
width: 3rpx;
height: 30rpx;
background: #000;
transform: rotate(45deg);
}
.closesty:after {
transform: rotate(-45deg);
}
/* ** */

BIN
static/images/bg_qnum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/images/tack.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

18
subpkg/complete/complete.vue
View File

@ -52,7 +52,7 @@
</view> </view>
</view> </view>
<view class="popup-share" v-if="showShare"> <view class="popup-share" v-if="showShare">
<view @click="closeShare()" style="margin-left: 250px;">关闭</view> <label class="closesty" @click="closeShare()"></label>
<label class="medimg"><image src="/static/images/medal_1.png"></image></label> <label class="medimg"><image src="/static/images/medal_1.png"></image></label>
<view class="congrat">恭喜你获得1枚成就勋章！</view> <view class="congrat">恭喜你获得1枚成就勋章！</view>
<view class="perinfo"> <view class="perinfo">
@ -110,7 +110,7 @@
this.showMedal = false this.showMedal = false
this.showLayer = false this.showLayer = false
clearTimeout(this.timer) clearTimeout(this.timer)
}, 5000) }, 1000)
this.roleId = options.roleId this.roleId = options.roleId
this.questionFreId = options.questionFreId this.questionFreId = options.questionFreId
this.getQuestionList() this.getQuestionList()
@ -193,7 +193,7 @@
z-index: 999; z-index: 999;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .35);
} }
.popup-layer, .popup-share { .popup-layer, .popup-share {
//display: none; //display: none;
@ -278,7 +278,7 @@
} }
.answer-content { .answer-content {
//display: none; //display: none;
position: absolute; position: relative;
z-index: 100; z-index: 100;
margin: 2% 3%; margin: 2% 3%;
padding: 2%; padding: 2%;
@ -323,14 +323,14 @@
} }
.question-record { .question-record {
margin: 6% 3% 10%; margin: 3% 3% 10%;
width: 94%; width: 94%;
height: 45%; height: 35%;
overflow: hidden; overflow: hidden;
label { label {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
line-height: 2; line-height: 2;
} }
.list { .list {
width: 100%; width: 100%;

138
subpkg/rechallenge/rechallenge.vue
View File

@ -1,18 +1,27 @@
<template> <template>
<view> <view class="wrap">
<span class="title">重新挑战</span> <view class="stabar"></view>
<view class="mainwrap">
<view class="title">重新挑战</view>
<view class="background-info"> <view class="background-info">
您上次挑战的场景是“{{sceneName}}”，挑战角色是 “{{roleName}}”，共计{{total}}道题目。您可从第1题开始重新挑战，或者任意选择其中一道题重新挑战。 您上次挑战的场景是“<font style="color:#fd6d1f;">{{sceneName}}</font>”，挑战角色是 “<font style="color:#fd6d1f;">{{roleName}}</font>”，共计{{total}}道题目。您可从第1题开始重新挑战，或者任意选择其中一道题重新挑战。
</view> </view>
<view class="thumbtack">
<label class="left"><image src="/static/images/tack.png"></image></label>
<label class="right"><image src="/static/images/tack.png"></image></label>
</view>
<scroll-view class="question-info" scroll-y> <scroll-view class="question-info" scroll-y>
<view class="question-list"> <view class="question-list">
<view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
<view class="question-num">{{i+1}}:{{item.ask}}</view> <view class="question-num"><view class="question-txt"><label class="imgbox"><image src="/static/images/bg_qnum.png"></image></label><label class="ordnum">{{i+1}}</label>{{item.ask}}</view></view>
<image :src="backgroundImg"></image> <image :src="backgroundImg"></image>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</view>
</template> </template>
<script> <script>
@ -59,27 +68,114 @@
</script> </script>
<style> <style>
.title{ @import url("@/static/base_css.css");
margin-left: 40%;
font-size: 20px; .mainwrap {
overflow: hidden;
}
.title {
margin: 50rpx 0;
color: #333;
font-size: 40rpx;
font-weight: bold;
text-align: center;
} }
.background-info{
border: 1px solid lightgreen; .background-info, .question-info {
width: 96%; margin: 0 3%;
margin-left: 2%; padding: 2%;
width: 90%;
height: 200rpx; height: 200rpx;
border-radius: 10px; background-color: #fff;
border-radius: 20rpx;
border: 1px solid rgba(151, 1, 188, .45);
box-shadow: 0 0 10rpx rgba(151, 1, 188, .35);
font-size: 32rpx;
line-height: 1.5;
} }
.question-info{ .question-info{
border: 1px solid lightgreen; margin-top: 20rpx;
width: 96%; padding-top: 50rpx;
margin-top: 5%; height: calc(100% - 520rpx);
margin-left: 2%; overflow: hidden;
height: 880rpx; }
border-radius: 10px;
.question-list {
width: 100%;
height: 100%;
}
.question-item {
position: relative;
margin: 2% 0 3%;
width: 100%;
height: 320rpx;
border-radius: 20rpx;
overflow: hidden;
}
.question-item image {
width: 100%;
height: 100%;
}
.question-num {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .45);
}
.question-txt {
position: absolute;
z-index: 100;
top: 3%;
left: 2%;
width: 96%;
color:#fff;
}
.question-txt .imgbox {
display: inline-block;
position: relative;
top: 20rpx;
margin: 0 12rpx;
width: 66rpx;
height: 66rpx;
}
.question-txt .ordnum {
position: absolute;
left: 48rpx;
top: 22rpx;
font-size: 38rpx;
}
.thumbtack {
position: relative;
left: 5%;
width: 90%;
}
.thumbtack .left, .thumbtack .right {
display: inline-block;
position: absolute;
z-index: 100;
bottom: -50rpx;
left: 5%;
width: 30rpx;
height: 80rpx;
}
.thumbtack .right {
left: auto;
right: 5%;
} }
.question-num{
width: 96%; .thumbtack .left image, .thumbtack .right image, .question-txt image {
height: 60rpx; width: 100%;
height: 100%;
} }
</style> </style>

144
subpkg/review/review.vue
View File

@ -1,9 +1,15 @@
<template> <template>
<view> <view class="wrap">
<span class="title">演练回顾</span> <view class="stabar"></view>
<view class="mainwrap">
<view class="title">演练回顾</view>
<view class="background-info"> <view class="background-info">
您已完成“{{sceneName}}”场景中 “{{roleName}}”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下： 您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下：
</view> </view>
<view class="thumbtack">
<label class="left"><image src="/static/images/tack.png"></image></label>
<label class="right"><image src="/static/images/tack.png"></image></label>
</view>
<scroll-view class="question-info" scroll-y> <scroll-view class="question-info" scroll-y>
<view class="question-list"> <view class="question-list">
<view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
@ -12,6 +18,7 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</view>
</template> </template>
<script> <script>
@ -57,27 +64,114 @@
</script> </script>
<style> <style>
.title{ @import url("@/static/base_css.css");
margin-left: 40%;
font-size: 20px; .mainwrap {
overflow: hidden;
}
.title {
margin: 50rpx 0;
color: #333;
font-size: 40rpx;
font-weight: bold;
text-align: center;
}
.background-info, .question-info {
margin: 0 3%;
padding: 2%;
width: 90%;
height: 200rpx;
background-color: #fff;
border-radius: 20rpx;
border: 1px solid rgba(151, 1, 188, .45);
box-shadow: 0 0 10rpx rgba(151, 1, 188, .35);
font-size: 32rpx;
line-height: 1.5;
}
.question-info{
margin-top: 20rpx;
padding-top: 50rpx;
height: calc(100% - 520rpx);
overflow: hidden;
}
.question-list {
width: 100%;
height: 100%;
}
.question-item {
position: relative;
margin: 2% 0 3%;
width: 100%;
height: 320rpx;
border-radius: 20rpx;
overflow: hidden;
}
.question-item image {
width: 100%;
height: 100%;
}
.question-num {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .45);
}
.question-txt {
position: absolute;
z-index: 100;
top: 3%;
left: 2%;
width: 96%;
color:#fff;
}
.question-txt .imgbox {
display: inline-block;
position: relative;
top: 20rpx;
margin: 0 12rpx;
width: 66rpx;
height: 66rpx;
}
.question-txt .ordnum {
position: absolute;
left: 48rpx;
top: 22rpx;
font-size: 38rpx;
}
.thumbtack {
position: relative;
left: 5%;
width: 90%;
}
.thumbtack .left, .thumbtack .right {
display: inline-block;
position: absolute;
z-index: 100;
bottom: -50rpx;
left: 5%;
width: 30rpx;
height: 80rpx;
}
.thumbtack .right {
left: auto;
right: 5%;
}
.thumbtack .left image, .thumbtack .right image, .question-txt image {
width: 100%;
height: 100%;
} }
.background-info{
border: 1px solid lightgreen;
width: 96%;
margin-left: 2%;
height: 200rpx;
border-radius: 10px;
}
.question-info{
border: 1px solid lightgreen;
width: 96%;
margin-top: 5%;
margin-left: 2%;
height: 880rpx;
border-radius: 10px;
}
.question-num{
width: 96%;
height: 60rpx;
}
</style> </style>

Write Preview
Loading…
Cancel
Save