Ver Fonte

修改页面滚动样式

lm há 2 semanas atrás
pai
commit
1e8a701701

+ 1 - 1
src/layout/components/AppHeader.vue

@@ -26,7 +26,7 @@ const props = defineProps({
     align-items: center;
     width: 100%;
     height: calc(44 * var(--app-rpx));
-    border-bottom:1px solid #F3F3F3;;
+    border-bottom:calc(1 * var(--app-rpx)) solid #F3F3F3;;
     background-color: white;
     font-weight: 600;
     font-size: calc(16 * var(--app-rpx));

+ 9 - 0
src/styles/page.scss

@@ -46,3 +46,12 @@
   white-space: nowrap;
 }
 
+
+// 隐藏滚动条
+.hide_scrollbar{
+  -ms-overflow-style: none;       // IE & Edge
+  scrollbar-width: none;          // Firefox
+  &::-webkit-scrollbar {
+      display: none;              // Chrome, Safari, Opera
+  }
+}

+ 2 - 1
src/views/appView/QuestionnaireCommit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main_container">
+    <div class="main_container hide_scrollbar">
         <!-- 问卷头部 -->
         <div class="questionnaire_head">
             <h1 class="head_title">{{ questionaireMsg?.assessmentTitle }}</h1>
@@ -498,6 +498,7 @@ const HandleFinishReview = ()=>{
             height: calc(44 * var(--app-rpx));
             font-size: calc(16 * var(--app-rpx));
             font-weight: 600;
+            border-radius: calc(4 * var(--app-rpx));
         }
     }
 }

+ 5 - 5
src/views/appView/QuestionnaireElectiveSubject.vue

@@ -1,5 +1,5 @@
 <template>
-     <div class="main_container">
+     <div class="main_container hide_scrollbar">
         <!-- 顶部科目选择区域 -->
         <div class="section" v-if="electiveFormItm?.label">
             <div class="section_title">{{electiveFormItm?.label}}:</div>
@@ -325,8 +325,8 @@ onMounted( async()=>{
             display: flex;
             justify-content: center;
             align-items: center;
-            border-radius: 4px;
-            border:solid #dcdfe6 1px;
+            border-radius:calc(4 * var(--app-rpx));
+            border:solid #dcdfe6 calc(1 * var(--app-rpx));
             width: calc(72 * var(--app-rpx));
             height: calc( 40 * var(--app-rpx));
             font-size:calc( 16 * var(--app-rpx));
@@ -336,13 +336,13 @@ onMounted( async()=>{
         }
         &.is-focus{
         .el-checkbox-button__inner{
-            border:solid #dcdfe6 1px;
+            border:solid #dcdfe6 calc(1 * var(--app-rpx));
         }
         }
         &.is-checked{
         .el-checkbox-button__inner{
             background: #2E64FA;
-            border: 1px solid  #2E64FA;
+            border: calc(1 * var(--app-rpx)) solid  #2E64FA;
             color: #fff;
             &:hover {
             background: #2E64FA;

+ 10 - 6
src/views/appView/QuestionnaireTaskListPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main_container">
+    <div class="main_container hide_scrollbar">
         <div class="questionnaire_card">
             <div class="title">{{ questionnaire.evaluationName }}</div>
             <div class="time_group">
@@ -54,6 +54,7 @@ onMounted(()=>{
     background-color: #ffffff !important;
 
     .questionnaire_card{
+        border-radius: calc(10 * var(--app-rpx));
         margin-top: calc(92 * var(--app-rpx));
         display: flex;
         flex-direction: column;
@@ -88,16 +89,19 @@ onMounted(()=>{
             flex-direction: column;
             justify-content: flex-end;
             .button_border{ 
-                :deep(>span){
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
                 width: 100%;
                 height: calc(52 * var(--app-rpx));
+                border-radius: calc(4 * var(--app-rpx));
                 font-weight: 600;
                 font-size:  calc(18 * var(--app-rpx)); 
                 color: #2E64FA;
+                margin-top: calc(114 * var(--app-rpx));
+                :deep(>span){
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
             }
         }
     }

+ 4 - 2
src/views/appView/SelfQuestionnaireProcess.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main_container">
+    <div class="main_container hide_scrollbar">
         <!-- 顶部筛选与统计区域 -->
         <div class="page_search">
             <div class="search_content">
@@ -119,7 +119,7 @@ onMounted( async()=>{
     flex-direction: column;
     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;
@@ -127,6 +127,7 @@ onMounted( async()=>{
                 width: calc(88 * var(--app-rpx));
                 height: calc(36 * var(--app-rpx)) !important;
                 font-size: calc(12 * var(--app-rpx));
+                border-radius: calc(4 * var(--app-rpx));
             }
         }
     }
@@ -240,6 +241,7 @@ onMounted( async()=>{
             width:calc(100% - 16 * var(--app-rpx));
             height: calc(44 * var(--app-rpx));
             font-size:  calc(16 * var(--app-rpx));
+            border-radius: calc(4 * var(--app-rpx));
             font-weight: 600;
         }
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="main_container">
+  <div class="main_container hide_scrollbar">
     <img  class="banner-card" :src="studentEntryIcon" alt="评价系统图标" />
     <!-- 底部操作区域 -->
     <div class="action-area">
@@ -90,6 +90,7 @@ const handleEnter = async() => {
             }
             .code-input {
                 :deep(.el-input__wrapper) {
+                    border-radius:calc(8 * var(--app-rpx));
                     height: calc(48 * var(--app-rpx));
                     font-size: calc(16 * var(--app-rpx));
                 }
@@ -103,6 +104,7 @@ const handleEnter = async() => {
                 width: 100%;
                 height: calc(48 * var(--app-rpx));
                 font-size: calc(16 * var(--app-rpx));
+                border-radius:calc(8 * var(--app-rpx));
             }
         }
     }