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

样式美化

h5_css
蟑螂恶霸 3 years ago
parent
06f678f4aa
commit
a33bb9acb7
6 changed files with 135 additions and 125 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. 58
      static/base_css.css
  2. 19
      subpkg/complete/complete.vue
  3. 73
      subpkg/list/list.vue
  4. 46
      subpkg/rechallenge/rechallenge.vue
  5. 43
      subpkg/review/review.vue
  6. 21
      subpkg/role/role.vue

58
static/base_css.css
View File

@ -60,12 +60,11 @@ img {
.mainwrap { .mainwrap {
margin-top: 90rpx; margin-top: 90rpx;
padding-bottom: 5%; padding-bottom: 5%;
height: calc(100% - 100rpx); height: calc(100% - 260rpx);
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;
overflow: hidden; overflow: hidden;
overflow-y: auto;
} }
.topcont { .topcont {
@ -216,38 +215,33 @@ h3.contit span {
.secbar { .secbar {
position: relative; position: relative;
top: 35px; z-index: 99;
height: 60px; top: 90rpx;
width: 100%; width: 100%;
height: 90rpx;
background-color: #bac6fc; background-color: #bac6fc;
} }
.secbar span { .secbar label.back {
position: relative;
top: 10px;
display: inline-block; display: inline-block;
width: 30px; position: relative;
height: 30px; top: 12rpx;
line-height: 20em;
white-space: nowrap;
overflow: hidden;
opacity: 0.9;
}
.secbar .pagetit {
margin-top: -18px;
}
.secbar span.back {
padding-left: 1.25rem;
left: 4%; left: 4%;
width: auto; padding-left: 1.25rem;
font-size: 1.15rem; width: 60rpx;
line-height: 30px; height: 60rpx;
background: url(/static/images/icon_arb.png) no-repeat left center; background: url(/static/images/icon_arb.png) no-repeat left center;
background-size: auto 60%; background-size: auto 60%;
} }
.title {
margin: -54rpx 0 50rpx;
color: #333;
font-size: 36rpx;
font-weight: bold;
text-align: center;
}
.banbox_sec { .banbox_sec {
position: relative; position: relative;
top: -10px; top: -10px;
@ -271,24 +265,24 @@ h3.contit span {
.mainwrap2, .mainwrap3, .tabwrap { .mainwrap2, .mainwrap3, .tabwrap {
position: relative; position: relative;
top: 35px; top: 90rpx;
padding: 10px 0;
width: 100%; width: 100%;
height: calc(100% - 100px); height: calc(100% - 200rpx);
background-image: linear-gradient(to bottom, #bac6fc, transparent 40%); background-image: linear-gradient(to bottom, #bac6fc, transparent 40%);
box-sizing: content-box; box-sizing: content-box;
overflow-x: hidden; overflow: hidden;
overflow-y: auto;
} }
.mainwrap2 { .mainwrap3 {
top: 0;
height: calc(100% - 90rpx);
overflow-y: hidden; overflow-y: hidden;
} }
.tabwrap { .tabwrap {
position: fixed; position: fixed;
top: 110px; top: 220rpx;
height: calc(100% - 140px); height: calc(100% - 300rpx);
} }
.subsearch { .subsearch {

19
subpkg/complete/complete.vue
View File

@ -6,7 +6,7 @@
<image class="animg" src="/static/images/joy.png"></image> <image class="animg" src="/static/images/joy.png"></image>
</view> </view>
<view class="mainwrap"> <view class="mainwrap3">
<view class="title">恭喜完成本次演练！</view> <view class="title">恭喜完成本次演练！</view>
<view class="question-wrap"> <view class="question-wrap">
<view class="question-list"> <view class="question-list">
@ -111,8 +111,8 @@
this.showLayer = false this.showLayer = false
clearTimeout(this.timer) clearTimeout(this.timer)
}, 1000) }, 1000)
this.roleId = options.roleId //this.roleId = options.roleId
this.questionFreId = options.questionFreId //this.questionFreId = options.questionFreId
this.getQuestionList() this.getQuestionList()
this.getRecordList() this.getRecordList()
}, },
@ -241,6 +241,11 @@
} }
} }
.mainwrap3 {
top: 56rpx;
overflow-y: auto;
}
.title { .title {
margin: 50rpx 0; margin: 50rpx 0;
color: #333; color: #333;
@ -283,7 +288,7 @@
margin: 2% 3%; margin: 2% 3%;
padding: 2%; padding: 2%;
width: 90%; width: 90%;
height: 400rpx; min-height: 400rpx;
background: #fff; background: #fff;
border: 1px solid #18c569; border: 1px solid #18c569;
border-radius: 10px; border-radius: 10px;
@ -318,14 +323,14 @@
} }
view { view {
color: #666; color: #666;
line-height: 1.75; line-height: 1.5;
} }
} }
.question-record { .question-record {
margin: 3% 3% 10%; margin: 3% 3% 5%;
width: 94%; width: 94%;
height: 35%; height: 25%;
overflow: hidden; overflow: hidden;
label { label {
font-size: 32rpx; font-size: 32rpx;

73
subpkg/list/list.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<view class="scene-container"> <view class="wrap">
<view class="secbar"> <span class="back" @click="back()"></span></view> <view class="stabar"></view>
<view class="secbar"> <span class="back" @click="back()"></span>
<view class="title">场景演练</view>
</view>
<view class="mainwrap3"> <view class="mainwrap3">
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
@ -24,6 +27,11 @@
<!-- 场景区域 --> <!-- 场景区域 -->
<view class="nav-list"> <view class="nav-list">
<view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)"> <view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
<view class="nav-marsk">
<view class="scename">消防演练</view>
<view class="scecount">演练题目：5</view>
<view class="scecount">演练人次：367</view>
</view>
<image :src="item.uploadPath" class="nav-img"></image> <image :src="item.uploadPath" class="nav-img"></image>
</view> </view>
</view> </view>
@ -120,21 +128,9 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.scene-container {
width: 100%;
height: 100%;
}
.secbar {
top: 0;
z-index: 1;
}
.secbar ._span.back {
top: 50px;
}
.mainwrap3 { .mainwrap3 {
top: 0; top: 50rpx;
height: calc(100% - 200rpx);
overflow: hidden;
} }
swiper { swiper {
@ -159,15 +155,38 @@
justify-content: space-around; justify-content: space-around;
margin: 4% 3%; margin: 4% 3%;
width: 94%; width: 94%;
height: 65%; height: 62%;
overflow-y: auto; overflow-y: auto;
.nav-item {
position: relative;
margin-bottom: 20rpx;
width: 100%;
height: 280rpx;
border-radius: 20rpx;
overflow: hidden;
}
.nav-marsk {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .45);
color: #fff;
line-height: 1.5;
.scename {
margin: 10% 0 2% 5%;
font-size: 42rpx;
}
.scecount {
margin: 1% 0 0 5%;
font-size: 28rpx;
}
}
.nav-img { .nav-img {
width: 100%; width: 100%;
height: 240rpx; height: 100%;
margin-bottom: 10rpx; }
border-radius: 10px;
}
} }
.search { .search {
@ -176,10 +195,12 @@
} }
.search-title{ .search-title{
font-family: 'Courier New', Courier, monospace;
color: #67676a; color: #67676a;
margin-left: 8px; margin: 3% 0 0 3%;
margin-top: 6px;
} }
.uni-searchbar__box {
border: 1px solid #ddd;
}
</style> </style>

46
subpkg/rechallenge/rechallenge.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <view class="stabar"></view>
<view class="mainwrap"> <view class="secbar"> <span class="back" @click="back()"></span>
<view class="title">重新挑战</view> <view class="title">重新挑战</view>
</view>
<view class="mainwrap2">
<view class="background-info"> <view class="background-info">
您上次挑战的场景是“<font style="color:#fd6d1f;">{{sceneName}}</font>”，挑战角色是 “<font style="color:#fd6d1f;">{{roleName}}</font>”，共计{{total}}道题目。您可从第1题开始重新挑战，或者任意选择其中一道题重新挑战。 您上次挑战的场景是“<font style="color:#fd6d1f;">{{sceneName}}</font>”，挑战角色是 “<font style="color:#fd6d1f;">{{roleName}}</font>”，共计{{total}}道题目。您可从第1题开始重新挑战，或者任意选择其中一道题重新挑战。
</view> </view>
@ -63,6 +64,11 @@
} }
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
back(){
uni.navigateBack({
delta:1,//返回层数，2则上上页
})
},
} }
} }
</script> </script>
@ -70,34 +76,22 @@
<style> <style>
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap {
overflow: hidden;
}
.title {
margin: 50rpx 0;
color: #333;
font-size: 40rpx;
font-weight: bold;
text-align: center;
}
.background-info, .question-info { .background-info, .question-info {
margin: 0 3%; margin: 0 3%;
padding: 2%; padding: 3%;
width: 90%; width: 88%;
height: 200rpx; height: 240rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
border: 1px solid rgba(151, 1, 188, .45); border: 1px solid rgba(151, 1, 188, .45);
box-shadow: 0 0 10rpx rgba(151, 1, 188, .35); box-shadow: 0 0 10rpx rgba(151, 1, 188, .35);
font-size: 32rpx; font-size: 32rpx;
line-height: 1.5; line-height: 1.5;
} }
.question-info{ .question-info{
margin-top: 20rpx; margin-top: 20rpx;
padding-top: 50rpx; padding-top: 50rpx;
height: calc(100% - 520rpx); height: calc(100% - 420rpx);
overflow: hidden; overflow: hidden;
} }

43
subpkg/review/review.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <view class="stabar"></view>
<view class="mainwrap"> <view class="secbar"> <span class="back" @click="back()"></span>
<view class="title">演练回顾</view> <view class="title">演练回顾</view>
</view>
<view class="mainwrap2">
<view class="background-info"> <view class="background-info">
您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下： 您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下：
</view> </view>
@ -59,6 +61,11 @@
} }
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
back(){
uni.navigateBack({
delta:1,//返回层数，2则上上页
})
},
} }
} }
</script> </script>
@ -66,34 +73,22 @@
<style> <style>
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap {
overflow: hidden;
}
.title {
margin: 50rpx 0;
color: #333;
font-size: 40rpx;
font-weight: bold;
text-align: center;
}
.background-info, .question-info { .background-info, .question-info {
margin: 0 3%; margin: 0 3%;
padding: 2%; padding: 3%;
width: 90%; width: 88%;
height: 200rpx; height: 240rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
border: 1px solid rgba(151, 1, 188, .45); border: 1px solid rgba(151, 1, 188, .45);
box-shadow: 0 0 10rpx rgba(151, 1, 188, .35); box-shadow: 0 0 10rpx rgba(151, 1, 188, .35);
font-size: 32rpx; font-size: 32rpx;
line-height: 1.5; line-height: 1.5;
} }
.question-info{ .question-info{
margin-top: 20rpx; margin-top: 20rpx;
padding-top: 50rpx; padding-top: 50rpx;
height: calc(100% - 520rpx); height: calc(100% - 420rpx);
overflow: hidden; overflow: hidden;
} }

21
subpkg/role/role.vue
View File

@ -15,7 +15,7 @@
<view class="more_role" @click="showMoreRole()"><a>更多角色</a></view> <view class="more_role" @click="showMoreRole()"><a>更多角色</a></view>
</view> </view>
<view class="startbtn"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view> <view :class="practice"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view>
</view> </view>
<view class="cnote">题目来源：深圳市******有限公司</view> <view class="cnote">题目来源：深圳市******有限公司</view>
@ -68,7 +68,9 @@
sceneId:"", sceneId:"",
sceneName:"", sceneName:"",
roleId:"", roleId:"",
roleList:[] roleList:[],
practice:"startbtn"
}; };
}, },
onLoad(options) { onLoad(options) {
@ -97,10 +99,12 @@
if (item.choose === "true") { if (item.choose === "true") {
this.$set(item, 'choose', 'false') this.$set(item, 'choose', 'false')
this.roleId = '' this.roleId = ''
this.practice = 'startbtn'
} else if(item.choose === "false"){ } else if(item.choose === "false"){
this.roleList.forEach(item=>{this.$set(item, 'choose', 'false')}) this.roleList.forEach(item=>{this.$set(item, 'choose', 'false')})
this.$set(item, 'choose', 'true') this.$set(item, 'choose', 'true')
this.roleId = item.guid this.roleId = item.guid
this.practice = 'startbtn.active'
} }
}, },
startPractice(item) { startPractice(item) {
@ -131,14 +135,10 @@
z-index: 1; z-index: 1;
} }
.secbar ._span.back { .secbar ._span.back {
top: 50px; top: 100rpx;
}
.mainwrap3 {
top: 0;
height: calc(100% - 70px);
overflow: hidden;
} }
.mainwrap3 > img { .mainwrap3 > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -305,8 +305,9 @@
line-height: 3.0; line-height: 3.0;
letter-spacing: 2px; letter-spacing: 2px;
} }
.change_color{ .change_color {
background:rgba(138, 162, 254, 1.0); background: #1367fe;
color: #fff !important;
} }

Write Preview
Loading…
Cancel
Save