页面自适应

3 years ago · 0d87e9594b
19 changed files with 75 additions and 68 deletions
--- a/components/navigation/navigation.vue
+++ b/components/navigation/navigation.vue
@ -1,8 +1,11 @@
 <template>
-	<view class="header" :style="{top: height}">
-		<label v-if="isBack" class="back" @click="back()"></label>
-		<label v-else class="noback"></label>
-		<view class="title">{{title}}</view>
+	<view :style="{height: sumHeight}">
+		<view class="stabar" :style="{height: height}"></view>
+		<view class="header" :style="{top: height, height: navHeight}">
+			<label v-if="isBack" class="back" @click="back()"></label>
+			<label v-else class="noback"></label>
+			<view class="title">{{title}}</view>
+		</view>
 	</view>
 </template>

@ -12,6 +15,8 @@
 		data() {
 			return {
 				height: 0,
+				navHeight: 0,
+				sumHeight: 0,
 			};
 		},
 		props: {
@ -39,7 +44,9 @@
 				const headerHeight = statusBarHeight + navBarHeightWechat
 				//计算导航内容距离顶部高度= 状态栏高度/2
 				const topHeight = statusBarHeight / 2
-				this.height = headerHeight - (topHeight/2) +"rpx"
+				this.height = menu.top + "px"
+				this.navHeight = menu.height + "px"
+				this.sumHeight = (menu.top + menu.height) + "px"
 		   },
 			back(){
 				uni.navigateBack({
@ -51,6 +58,10 @@
 </script>

 <style>
+navigation {
+	background-color: #bac6fc;
+}
+	
 .header {
 	position: relative;
 	z-index: 99;
@ -63,7 +74,7 @@
 label.back {
 	display: inline-block;
 	position: relative;
-	top: 16rpx;
+	top: 0;
 	left: 4%;
 	padding-left: 1.25rem;
 	width: 60rpx;
@ -84,7 +95,7 @@ label.noback {
 }

 .title {
-	margin: -54rpx 0 50rpx;
+	margin: -64rpx 0 50rpx;
 	color: #333;
 	font-size: 36rpx;
 	font-weight: bold;
--- a/pages.json
+++ b/pages.json
@ -220,5 +220,15 @@
 				// "iconPath": "static/tab_icons/my.png"
 			}
 		]
+	},
+	"condition" : { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
 	}
 }
--- a/pages/knowledge/knowledge.vue
+++ b/pages/knowledge/knowledge.vue
@ -79,8 +79,8 @@
 	@import url("@/static/base_css.css");
 	
 	.mainwrap {
-		height: calc(100% - 330rpx);
-		top: 73rpx;
+		top: 0;
+		height: calc(100% - 260rpx);
 	}

 	// .title {
--- a/static/base_css.css
+++ b/static/base_css.css
@ -44,7 +44,7 @@ img {
 .stabar {
 	position: fixed;
 	top: 0;
-	z-index: 9999;
+	z-index: 99;
 	padding: 0 5%;
 	width: 100%;
 	height: 90rpx;
@ -59,8 +59,8 @@ img {

 .mainwrap {
 	position: relative;
-	top: 90rpx;
-	height: calc(100% - 250rpx);
+	top: 60rpx;
+	height: calc(100% - 220rpx);
 	width: 100%;
 	background-image: linear-gradient(to bottom, #bac6fc, transparent 50%);
 	box-sizing: content-box;
@ -225,7 +225,7 @@ h3.contit span {
 .secbar label.back {
 	display: inline-block;
 	position: relative;
-	top: 16rpx;
+	top: 0;
 	left: 4%;
 	padding-left: 1.25rem;
 	width: 60rpx;
@ -235,7 +235,7 @@ h3.contit span {
 }

 .title {
-	margin: -54rpx 0 50rpx;
+	margin: -64rpx 0 50rpx;
 	color: #333;
 	font-size: 36rpx;
 	font-weight: bold;
@ -265,16 +265,15 @@ h3.contit span {

 .mainwrap2, .mainwrap3, .tabwrap {
 	position: relative;
-	top: 90rpx;
+	top: 0;
 	width: 100%;
-	height: calc(100% - 90rpx);
+	height: calc(100% - 60rpx);
 	background-image: linear-gradient(to bottom, #bac6fc, transparent 40%);
 	box-sizing: content-box;
 	overflow: hidden;
 }

 .mainwrap3 {
-	top: 50rpx;
 	overflow-y: hidden;
 }

--- a/subpkg/about/about.vue
+++ b/subpkg/about/about.vue
@ -5,7 +5,7 @@
 	<view class="title">关于我们</view>
 	</view> -->
 	<navigation title="关于我们"></navigation>
-	<view class="mainwrap2" style="top: 73rpx;">
+	<view class="mainwrap2">
 		<view class="subwrap">
 		<view v-html="content"></view>
 		</view>
--- a/subpkg/address/address.vue
+++ b/subpkg/address/address.vue
@ -5,7 +5,7 @@
 			<view class="title">联系地址</view>
 		</view> -->
 		<navigation title="联系地址"></navigation>
-		<view class="mainwrap2" style="top: 73rpx;">
+		<view class="mainwrap2">
 			<view class="subwrap">

 				<!-- 循环渲染地址信息 -->
--- a/subpkg/agreement/agreement.vue
+++ b/subpkg/agreement/agreement.vue
@ -5,7 +5,7 @@
 	<view class="title">用户协议</view>
 	</view> -->
 	<navigation title="用户协议"></navigation>
-	<view class="mainwrap2" style="top: 73rpx;">
+	<view class="mainwrap2">
 		<view class="subwrap">
 		<view v-html="content"></view>
 		</view>
--- a/subpkg/complete/complete.vue
+++ b/subpkg/complete/complete.vue
@ -1,9 +1,10 @@
 <template>
 	<view class="wrap">
-		<view class="stabar"></view>
-		<view class="secbar">
+		<!-- <view class="stabar"></view> -->
+		<!-- <view class="secbar">
 			<view class="title">恭喜完成演练！</view>
-		</view>
+		</view> -->
+		<navigation :is-back="false" title="恭喜完成演练！"></navigation>
 		<view class="marsk" v-if="showLayer"></view>
 		<view class="popup-layer" v-if="showMedal">
 			<image class="animg" :src="achieveMedalImg"></image>
@ -419,16 +420,6 @@
 		}
 	}

-	.secbar {
-		height: 4vh;
-		text-align: center;
-
-		.title {
-			display: inline-block;
-			margin-top: 1.75vh;
-		}
-	}
-
 	.question-wrap {
 		position: relative;
 		margin: 2vh 0;
@ -600,9 +591,6 @@
 		background: #333;
 		border-radius: 50%;
 		transform: translate(-50%, -50%);
-	}
-
-	.close-button:before {
 		height: 24rpx;
 		width: 4rpx;
 	}
@ -639,7 +627,7 @@
 		display: flex;
 		justify-content: center;
 		position: absolute;
-		bottom: 10%;
+		bottom: 2%;
 		left: 10%;
 		width: 80%;
 		height: 90rpx;
--- a/subpkg/feedback/feedback.vue
+++ b/subpkg/feedback/feedback.vue
@ -1,11 +1,11 @@
 <template>
 <view class="wrap">
-	<view class="stabar"></view>
+	<!-- <view class="stabar"></view> -->
 	<!-- <view class="secbar"><label class="back" @click="back()"></label>
 	<view class="title">建议与意见反馈</view>
 	</view> -->
 	<navigation title="建议与意见反馈"></navigation>
-<view class="mainwrap2" style="top: 73rpx;">
+<view class="mainwrap2">

 	<view class="table_index">
 		<!-- <uni-section title="建议与反馈" type="line"></uni-section> -->
@ -16,7 +16,7 @@
 			<uni-forms-item required name="content" label="内容">
 				<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入您要反馈的内容" />
 			</uni-forms-item>
-			<button class="uni-button" size="mini" type="primary"  @click="toTable">提交</button>
+			<button class="uni-button" size="mini" type=""  @click="toTable">提交</button>
 		</uni-forms>
 	</view>

@ -71,8 +71,11 @@
 		}
 	}
 </script>
-<style scoped>
-	 @import url("@/static/base_css.css");
+
+<!--<style scoped>-->
+<style lang="scss">
+	@import url("@/static/base_css.css");
+
 	.table_index {
 		margin: 3% 3% 0;
 		padding: 50rpx 30rpx;
@ -83,7 +86,7 @@
 		box-sizing: border-box;
 	}
 	.uni-easyinput__content-textarea {
-		height: 500rpx;
+		min-height: 500rpx !important;
 	}
 	.uni-button {
 		font-size: 30rpx;
@ -94,5 +97,7 @@
 		justify-content: center;
 		background: #1367fe;
 		border-radius: 50rpx;
+		color: #fff;
+		line-height: 70rpx;
 	}
 </style>
--- a/subpkg/knowledgeInfo/knowledgeInfo.vue
+++ b/subpkg/knowledgeInfo/knowledgeInfo.vue
@ -3,7 +3,7 @@
 	<view class="stabar"></view>
 	<!-- <view class="secbar"><label class="back" @click="back()"></label></view> -->
 		<navigation></navigation>
-	<view class="mainwrap2" style="top: 73rpx;">
+	<view class="mainwrap2">
 		<view class="title">{{title}}</view>
 		<view class="timetop">{{createTime}}</view>
 		<view class="subwrap">
@ -54,7 +54,7 @@
 <style lang="scss">
 @import url("@/static/base_css.css");
 .mainwrap2 .title {
-	 margin: 0 3% 3%;
+	 margin: 3% 3%;
 	 text-align: left;
 }
 .timetop {
@ -63,6 +63,11 @@
     font-size: 0.9rem;
 }
 .subwrap {
-	 height: calc(100% - 200rpx);
+	 height: calc(100% - 300rpx);
+ }
+ 
+ .subwrap > view {
+	 width: 100%;
+	 overflow-x: hidden;
 }
 </style>
--- a/subpkg/medal/medal.vue
+++ b/subpkg/medal/medal.vue
@ -5,7 +5,7 @@
 			<view class="title">我的勋章</view>
 		</view> -->
 		<navigation title="我的勋章"></navigation>
-		<view class="mainwrap2" style="top: 73rpx;">
+		<view class="mainwrap2">
 			<view class="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span>
 				<view class="dycd"> <span class="myname">{{name}}</span>
 					的勋章墙
@ -148,7 +148,6 @@
 	@import url("@/static/base_css.css");

 	.mainwrap2 {
-		top: 0;
 		height: calc(100% - 90rpx);
 		background: #fff url("/static/images/bg_medal.jpg") no-repeat left top;
 		background-size: 110% auto;
--- a/subpkg/message/message.vue
+++ b/subpkg/message/message.vue
@ -5,7 +5,7 @@
 	<view class="title">消息</view>
 	</view> -->
 	<navigation title="消息"></navigation>
-	<view class="mainwrap2" style="top: 73rpx;">
+	<view class="mainwrap2">
 		<view class="subwrap">
 		 <view class="message-list">
 			<view class="artlist" v-for="(item, i) in messageList" :key="i" @click="navClickHandler(item)">
--- a/subpkg/messageInfo/messageInfo.vue
+++ b/subpkg/messageInfo/messageInfo.vue
@ -3,7 +3,7 @@
 	<view class="stabar"></view>
 	<!-- <view class="secbar"><label class="back" @click="back()"></label></view> -->
 	<navigation></navigation>
-	<view class="mainwrap2" style="top: 73rpx;">
+	<view class="mainwrap2">
 		<view class="subwrap">
 		<view v-html="content"></view>
 		</view>
--- a/subpkg/practice/practice.vue
+++ b/subpkg/practice/practice.vue
@ -57,6 +57,7 @@
 .secbar {
 	position: absolute;
 	z-index: 999999;
+	top: 100rpx;
 	background-color: transparent;
 }

--- a/subpkg/privacy/privacy.vue
+++ b/subpkg/privacy/privacy.vue
@ -5,7 +5,7 @@
 	<view class="title">隐私政策</view>
 	</view> -->
 	<navigation title="隐私政策"></navigation>
-	<view class="mainwrap2" style="top: 73rpx;">
+	<view class="mainwrap2">
 		<view class="subwrap">
 		<view v-html="content"></view>
 		</view>
--- a/subpkg/rechallenge/rechallenge.vue
+++ b/subpkg/rechallenge/rechallenge.vue
@ -5,7 +5,7 @@
 		<view class="title">重新挑战</view>
 		</view> -->
 		<navigation title="重新挑战"></navigation>
-		<view class="mainwrap2" style="top: 73rpx;">
+		<view class="mainwrap2">
 		<view class="background-info">
 		   您上次挑战的场景是“<font style="color:#fd6d1f;">{{sceneName}}</font>”，挑战角色是 “<font style="color:#fd6d1f;">{{roleName}}</font>”，共计{{total}}道题目。您可从第1题开始重新挑战，或者任意选择其中一道题重新挑战。	
 		</view>
@ -80,7 +80,7 @@
 	@import url("@/static/base_css.css");
 	
   .background-info, .question-info {
-		margin: 0 3%;
+		margin: 2% 3% 0;
 		padding: 3%;
 		width: 88%;
 		height: 240rpx;
--- a/subpkg/respractice/respractice.vue
+++ b/subpkg/respractice/respractice.vue
@ -45,6 +45,7 @@
 .secbar {
 	position: absolute;
 	z-index: 999999;
+	top: 100rpx;
 	background-color: transparent;
 }

--- a/subpkg/review/review.vue
+++ b/subpkg/review/review.vue
@ -5,7 +5,7 @@
 			<view class="title">演练回顾</view>
 		</view> -->
 		<navigation title="重新挑战"></navigation>
-		<view class="mainwrap2" style="top: 73rpx;">
+		<view class="mainwrap2">
 			<view class="background-info">
 				您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}
 				</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下：
@ -109,7 +109,7 @@

 	.background-info,
 	.question-info {
-		margin: 0 3%;
+		margin: 2% 3% 0;
 		padding: 3%;
 		width: 88%;
 		height: 13vh;
--- a/subpkg/role/role.vue
+++ b/subpkg/role/role.vue
@ -132,18 +132,6 @@
 	width: 100%;
 	height: 100%;	
 }
-.secbar {
-    top: 0;
-    z-index: 1;
-}
-.secbar ._span.back {
-    top: 50px;
-}
-.mainwrap3 {
-	top: 0;
-	height: 95vh;
-	overflow: hidden;
-}

 .mainwrap3 > img {
 	width: 100%;
@ -202,7 +190,7 @@
 .startbtn {
 	position: relative;
 	z-index: 1;
-	bottom: 33vh;
+	bottom: 36vh;
 	width: 100%;
 	height: 30%;
 	background:no-repeat 47.5% center;