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

页面自适应

h5_css
蟑螂恶霸 3 years ago
parent
0cdab583f0
commit
0d87e9594b
19 changed files with 75 additions and 68 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. 25
      components/navigation/navigation.vue
  2. 10
      pages.json
  3. 4
      pages/knowledge/knowledge.vue
  4. 15
      static/base_css.css
  5. 2
      subpkg/about/about.vue
  6. 2
      subpkg/address/address.vue
  7. 2
      subpkg/agreement/agreement.vue
  8. 22
      subpkg/complete/complete.vue
  9. 17
      subpkg/feedback/feedback.vue
  10. 11
      subpkg/knowledgeInfo/knowledgeInfo.vue
  11. 3
      subpkg/medal/medal.vue
  12. 2
      subpkg/message/message.vue
  13. 2
      subpkg/messageInfo/messageInfo.vue
  14. 1
      subpkg/practice/practice.vue
  15. 2
      subpkg/privacy/privacy.vue
  16. 4
      subpkg/rechallenge/rechallenge.vue
  17. 1
      subpkg/respractice/respractice.vue
  18. 4
      subpkg/review/review.vue
  19. 14
      subpkg/role/role.vue

25
components/navigation/navigation.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<view class="header" :style="{top: height}"> <view :style="{height: sumHeight}">
<label v-if="isBack" class="back" @click="back()"></label> <view class="stabar" :style="{height: height}"></view>
<label v-else class="noback"></label> <view class="header" :style="{top: height, height: navHeight}">
<view class="title">{{title}}</view> <label v-if="isBack" class="back" @click="back()"></label>
<label v-else class="noback"></label>
<view class="title">{{title}}</view>
</view>
</view> </view>
</template> </template>
@ -12,6 +15,8 @@
data() { data() {
return { return {
height: 0, height: 0,
navHeight: 0,
sumHeight: 0,
}; };
}, },
props: { props: {
@ -39,7 +44,9 @@
const headerHeight = statusBarHeight + navBarHeightWechat const headerHeight = statusBarHeight + navBarHeightWechat
//计算导航内容距离顶部高度= 状态栏高度/2 //计算导航内容距离顶部高度= 状态栏高度/2
const topHeight = statusBarHeight / 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(){ back(){
uni.navigateBack({ uni.navigateBack({
@ -51,6 +58,10 @@
</script> </script>
<style> <style>
navigation {
background-color: #bac6fc;
}
.header { .header {
position: relative; position: relative;
z-index: 99; z-index: 99;
@ -63,7 +74,7 @@
label.back { label.back {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 16rpx; top: 0;
left: 4%; left: 4%;
padding-left: 1.25rem; padding-left: 1.25rem;
width: 60rpx; width: 60rpx;
@ -84,7 +95,7 @@ label.noback {
} }
.title { .title {
margin: -54rpx 0 50rpx; margin: -64rpx 0 50rpx;
color: #333; color: #333;
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;

10
pages.json
View File

@ -220,5 +220,15 @@
// "iconPath": "static/tab_icons/my.png" // "iconPath": "static/tab_icons/my.png"
} }
] ]
},
"condition" : { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}
]
} }
} }

4
pages/knowledge/knowledge.vue
View File

@ -79,8 +79,8 @@
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap { .mainwrap {
height: calc(100% - 330rpx); top: 0;
top: 73rpx; height: calc(100% - 260rpx);
} }
// .title { // .title {

15
static/base_css.css
View File

@ -44,7 +44,7 @@ img {
.stabar { .stabar {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 9999; z-index: 99;
padding: 0 5%; padding: 0 5%;
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
@ -59,8 +59,8 @@ img {
.mainwrap { .mainwrap {
position: relative; position: relative;
top: 90rpx; top: 60rpx;
height: calc(100% - 250rpx); height: calc(100% - 220rpx);
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;
@ -225,7 +225,7 @@ h3.contit span {
.secbar label.back { .secbar label.back {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 16rpx; top: 0;
left: 4%; left: 4%;
padding-left: 1.25rem; padding-left: 1.25rem;
width: 60rpx; width: 60rpx;
@ -235,7 +235,7 @@ h3.contit span {
} }
.title { .title {
margin: -54rpx 0 50rpx; margin: -64rpx 0 50rpx;
color: #333; color: #333;
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
@ -265,16 +265,15 @@ h3.contit span {
.mainwrap2, .mainwrap3, .tabwrap { .mainwrap2, .mainwrap3, .tabwrap {
position: relative; position: relative;
top: 90rpx; top: 0;
width: 100%; width: 100%;
height: calc(100% - 90rpx); height: calc(100% - 60rpx);
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: hidden; overflow: hidden;
} }
.mainwrap3 { .mainwrap3 {
top: 50rpx;
overflow-y: hidden; overflow-y: hidden;
} }

2
subpkg/about/about.vue
View File

@ -5,7 +5,7 @@
<view class="title">关于我们</view> <view class="title">关于我们</view>
</view> --> </view> -->
<navigation title="关于我们"></navigation> <navigation title="关于我们"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<view v-html="content"></view> <view v-html="content"></view>
</view> </view>

2
subpkg/address/address.vue
View File

@ -5,7 +5,7 @@
<view class="title">联系地址</view> <view class="title">联系地址</view>
</view> --> </view> -->
<navigation title="联系地址"></navigation> <navigation title="联系地址"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<!-- 循环渲染地址信息 --> <!-- 循环渲染地址信息 -->

2
subpkg/agreement/agreement.vue
View File

@ -5,7 +5,7 @@
<view class="title">用户协议</view> <view class="title">用户协议</view>
</view> --> </view> -->
<navigation title="用户协议"></navigation> <navigation title="用户协议"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<view v-html="content"></view> <view v-html="content"></view>
</view> </view>

22
subpkg/complete/complete.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="secbar"> <!-- <view class="secbar">
<view class="title">恭喜完成演练！</view> <view class="title">恭喜完成演练！</view>
</view> </view> -->
<navigation :is-back="false" title="恭喜完成演练！"></navigation>
<view class="marsk" v-if="showLayer"></view> <view class="marsk" v-if="showLayer"></view>
<view class="popup-layer" v-if="showMedal"> <view class="popup-layer" v-if="showMedal">
<image class="animg" :src="achieveMedalImg"></image> <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 { .question-wrap {
position: relative; position: relative;
margin: 2vh 0; margin: 2vh 0;
@ -600,9 +591,6 @@
background: #333; background: #333;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.close-button:before {
height: 24rpx; height: 24rpx;
width: 4rpx; width: 4rpx;
} }
@ -639,7 +627,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
bottom: 10%; bottom: 2%;
left: 10%; left: 10%;
width: 80%; width: 80%;
height: 90rpx; height: 90rpx;

17
subpkg/feedback/feedback.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <!-- <view class="stabar"></view> -->
<!-- <view class="secbar"><label class="back" @click="back()"></label> <!-- <view class="secbar"><label class="back" @click="back()"></label>
<view class="title">建议与意见反馈</view> <view class="title">建议与意见反馈</view>
</view> --> </view> -->
<navigation title="建议与意见反馈"></navigation> <navigation title="建议与意见反馈"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="table_index"> <view class="table_index">
<!-- <uni-section title="建议与反馈" type="line"></uni-section> --> <!-- <uni-section title="建议与反馈" type="line"></uni-section> -->
@ -16,7 +16,7 @@
<uni-forms-item required name="content" label="内容"> <uni-forms-item required name="content" label="内容">
<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入您要反馈的内容" /> <uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入您要反馈的内容" />
</uni-forms-item> </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> </uni-forms>
</view> </view>
@ -71,8 +71,11 @@
} }
} }
</script> </script>
<style scoped>
@import url("@/static/base_css.css"); <!--<style scoped>-->
<style lang="scss">
@import url("@/static/base_css.css");
.table_index { .table_index {
margin: 3% 3% 0; margin: 3% 3% 0;
padding: 50rpx 30rpx; padding: 50rpx 30rpx;
@ -83,7 +86,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.uni-easyinput__content-textarea { .uni-easyinput__content-textarea {
height: 500rpx; min-height: 500rpx !important;
} }
.uni-button { .uni-button {
font-size: 30rpx; font-size: 30rpx;
@ -94,5 +97,7 @@
justify-content: center; justify-content: center;
background: #1367fe; background: #1367fe;
border-radius: 50rpx; border-radius: 50rpx;
color: #fff;
line-height: 70rpx;
} }
</style> </style>

11
subpkg/knowledgeInfo/knowledgeInfo.vue
View File

@ -3,7 +3,7 @@
<view class="stabar"></view> <view class="stabar"></view>
<!-- <view class="secbar"><label class="back" @click="back()"></label></view> --> <!-- <view class="secbar"><label class="back" @click="back()"></label></view> -->
<navigation></navigation> <navigation></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="title">{{title}}</view> <view class="title">{{title}}</view>
<view class="timetop">{{createTime}}</view> <view class="timetop">{{createTime}}</view>
<view class="subwrap"> <view class="subwrap">
@ -54,7 +54,7 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap2 .title { .mainwrap2 .title {
margin: 0 3% 3%; margin: 3% 3%;
text-align: left; text-align: left;
} }
.timetop { .timetop {
@ -63,6 +63,11 @@
font-size: 0.9rem; font-size: 0.9rem;
} }
.subwrap { .subwrap {
height: calc(100% - 200rpx); height: calc(100% - 300rpx);
}
.subwrap > view {
width: 100%;
overflow-x: hidden;
} }
</style> </style>

3
subpkg/medal/medal.vue
View File

@ -5,7 +5,7 @@
<view class="title">我的勋章</view> <view class="title">我的勋章</view>
</view> --> </view> -->
<navigation title="我的勋章"></navigation> <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="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span>
<view class="dycd"> <span class="myname">{{name}}</span> <view class="dycd"> <span class="myname">{{name}}</span>
的勋章墙 的勋章墙
@ -148,7 +148,6 @@
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap2 { .mainwrap2 {
top: 0;
height: calc(100% - 90rpx); height: calc(100% - 90rpx);
background: #fff url("/static/images/bg_medal.jpg") no-repeat left top; background: #fff url("/static/images/bg_medal.jpg") no-repeat left top;
background-size: 110% auto; background-size: 110% auto;

2
subpkg/message/message.vue
View File

@ -5,7 +5,7 @@
<view class="title">消息</view> <view class="title">消息</view>
</view> --> </view> -->
<navigation title="消息"></navigation> <navigation title="消息"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<view class="message-list"> <view class="message-list">
<view class="artlist" v-for="(item, i) in messageList" :key="i" @click="navClickHandler(item)"> <view class="artlist" v-for="(item, i) in messageList" :key="i" @click="navClickHandler(item)">

2
subpkg/messageInfo/messageInfo.vue
View File

@ -3,7 +3,7 @@
<view class="stabar"></view> <view class="stabar"></view>
<!-- <view class="secbar"><label class="back" @click="back()"></label></view> --> <!-- <view class="secbar"><label class="back" @click="back()"></label></view> -->
<navigation></navigation> <navigation></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<view v-html="content"></view> <view v-html="content"></view>
</view> </view>

1
subpkg/practice/practice.vue
View File

@ -57,6 +57,7 @@
.secbar { .secbar {
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
top: 100rpx;
background-color: transparent; background-color: transparent;
} }

2
subpkg/privacy/privacy.vue
View File

@ -5,7 +5,7 @@
<view class="title">隐私政策</view> <view class="title">隐私政策</view>
</view> --> </view> -->
<navigation title="隐私政策"></navigation> <navigation title="隐私政策"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<view v-html="content"></view> <view v-html="content"></view>
</view> </view>

4
subpkg/rechallenge/rechallenge.vue
View File

@ -5,7 +5,7 @@
<view class="title">重新挑战</view> <view class="title">重新挑战</view>
</view> --> </view> -->
<navigation title="重新挑战"></navigation> <navigation title="重新挑战"></navigation>
<view class="mainwrap2" style="top: 73rpx;"> <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>
@ -80,7 +80,7 @@
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.background-info, .question-info { .background-info, .question-info {
margin: 0 3%; margin: 2% 3% 0;
padding: 3%; padding: 3%;
width: 88%; width: 88%;
height: 240rpx; height: 240rpx;

1
subpkg/respractice/respractice.vue
View File

@ -45,6 +45,7 @@
.secbar { .secbar {
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
top: 100rpx;
background-color: transparent; background-color: transparent;
} }

4
subpkg/review/review.vue
View File

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

14
subpkg/role/role.vue
View File

@ -132,18 +132,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.secbar {
top: 0;
z-index: 1;
}
.secbar ._span.back {
top: 50px;
}
.mainwrap3 {
top: 0;
height: 95vh;
overflow: hidden;
}
.mainwrap3 > img { .mainwrap3 > img {
width: 100%; width: 100%;
@ -202,7 +190,7 @@
.startbtn { .startbtn {
position: relative; position: relative;
z-index: 1; z-index: 1;
bottom: 33vh; bottom: 36vh;
width: 100%; width: 100%;
height: 30%; height: 30%;
background:no-repeat 47.5% center; background:no-repeat 47.5% center;

Write Preview
Loading…
Cancel
Save