Parcourir la source

修改app-h5样式

lm il y a 2 semaines
Parent
commit
34deae593b

+ 7 - 15
src/views/appView/QuestionnaireCommit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app_container">
+    <div class="main_container">
         <!-- 问卷头部 -->
         <div class="questionnaire_head">
             <h1 class="head_title">{{ questionaireMsg?.assessmentTitle }}</h1>
@@ -23,7 +23,6 @@
 
 <script setup lang="ts">
 import { ref, computed,watch } from 'vue';
-import QuestionnaireQuestionList from '@/components/QuestionnaireQuestionList.vue';
 import AppQuestionnaireQuestionList from '@/components/AppQuestionnaireQuestionList.vue';
 /**
  * 2. 问卷整体数据
@@ -461,22 +460,15 @@ const HandleFinishReview = ()=>{
 
 
 <style lang="scss" scoped>
-.app_container {
+.main_container {
     display: flex;
     flex-direction: column;
-    overflow: auto;
-    width: 100%;
-    min-height: 100vh;
-    background-color: #ffffff;
-    padding:calc(20 * var(--app-rpx));
-    // 底部的工具栏会占用 44 * var(--app-rpx)
-    // 浏览器访问 底部多占  80 * var(--app-rpx) —— 待完善
-    padding-bottom: calc((64) * var(--app-rpx));
-
-    > * {
-        flex-shrink: 0;
-    }
+    background-color: #ffffff !important;
+    padding:calc(20 * var(--app-rpx)) !important;
 
+    // 浏览器访问 底部多占  90 * var(--app-rpx) —— 待完善
+    padding-bottom: calc((90 + 20) * var(--app-rpx)) !important;
+    
     /* --- 头部样式 --- */
     .questionnaire_head {
         text-align: center;

+ 6 - 7
src/views/appView/QuestionnaireElectiveSubject.vue

@@ -287,7 +287,8 @@ onMounted( async()=>{
     // 手机微信 工具栏高度  不影响 __ 待完善
     padding:calc(30 * var(--app-rpx)) 
             calc(19 * var(--app-rpx)) 
-            calc((84 + 90 + 20) * var(--app-rpx)) !important; /* 为底部按钮留出空间 */
+            // calc((84 + 90 + 20) * var(--app-rpx)) !important; /* 为底部按钮留出空间 */
+            calc((90) * var(--app-rpx)) !important; /* 为底部按钮留出空间 */
     > * {
         flex-shrink: 0;
     }
@@ -364,14 +365,12 @@ onMounted( async()=>{
 
 /* --- 底部按钮 --- */
 .bottom_action_bar {
-    position: fixed;
-    // position: sticky;
-    bottom: 0;
-    left: 0;
+    flex: 1 1;
+    display: flex;
+    align-items: flex-end;
     width: 100%;
     background-color: #fff;
-    padding: calc(20 * var(--app-rpx));
-    z-index: 100;
+    padding: calc(8 * var(--app-rpx)) 0 calc(20 * var(--app-rpx));
     box-sizing: border-box;
         
     .button_background {

+ 1 - 0
src/views/appView/QuestionnaireTaskListPage.vue

@@ -49,6 +49,7 @@ onMounted(()=>{
 
 <style lang="scss" scoped>
 .main_container{
+    padding-bottom: calc(90 * var(--app-rpx)) !important;
     align-items: center;
     background-color: #ffffff !important;
 

+ 15 - 16
src/views/appView/SelfQuestionnaireProcess.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app_container">
+    <div class="main_container">
         <!-- 顶部筛选与统计区域 -->
         <div class="page_search">
             <div class="search_content">
@@ -114,17 +114,21 @@ onMounted( async()=>{
 
 <style lang="scss" scoped>
 
-.app_container {
+.main_container {
     display: flex;
     flex-direction: column;
-    overflow: auto;
-    width: 100%;
-    min-height: 100vh;
-    background-color: #ffffff;
-    padding:calc(16 * var(--app-rpx)) calc(12 * var(--app-rpx));
-
-    > * {
-        flex-shrink: 0;
+    background-color: #ffffff !important;
+    padding:calc(16 * var(--app-rpx)) calc(12 * var(--app-rpx))  calc(90 * var(--app-rpx)) !important;
+
+    .search_content{
+        .content_right{
+            height: auto;
+            :deep(.button_border){
+                width: calc(88 * var(--app-rpx));
+                height: calc(36 * var(--app-rpx)) !important;
+                font-size: calc(12 * var(--app-rpx));
+            }
+        }
     }
 
     /* 覆盖外部样式的一些特定调整 */
@@ -156,11 +160,6 @@ onMounted( async()=>{
         }
     }
 
-    .button_border{
-        width: calc(88 * var(--app-rpx));
-        height: calc(36 * var(--app-rpx));
-        font-size: calc(12 * var(--app-rpx));
-    }
         
     /* 教师列表网格布局 */
     .teacher_list {
@@ -232,7 +231,7 @@ onMounted( async()=>{
     /* 底部区域 */
     .bottom_action {
         margin-top: calc(84 * var(--app-rpx)) ;
-        margin-bottom:  calc(44 * var(--app-rpx)) ;
+        margin-bottom:  calc(10 * var(--app-rpx)) ;
         flex: 1 1;
         display: flex;
         align-items: flex-end;

+ 1 - 1
src/views/appView/StudentEntry.vue

@@ -48,7 +48,7 @@ const handleEnter = async() => {
 
 <style lang="scss" scoped>
 .main_container {
-    padding:0 !important;
+    padding:0 0 calc(10 * var(--app-rpx)) !important;  //窄屏幕浏览器访问-添加10rpx底部,防止按钮被浏览器工具栏遮盖(button距底部共90rpx) 
     background-color: #ffffff !important;
     > *{
         flex-shrink: 0;