修改全部页面吸顶效果

src/components/CpmdFooter.vue

@@ -20,7 +20,8 @@ onMounted(() => {
 </script>
 <template>
     <!-- 此处最大宽度是1200px -->
-    <div class="home_footer_inner" :style="{ scrollSnapAlign: 'start' }">
+    <div class="home_footer_inner" :style="{ scrollSnapAlign: activeIndex == '1' ? 'start' : 'none' }">
+        <!-- <div class="home_footer_inner"> -->
         <!-- <img src="../assets/home/group_five.png" width="100%" alt=""> -->
         <!-- <div class="home_footer_icon">
             <div class="home_footer_company">

src/views/Cognize.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
-
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import pdf3 from '../assets/cognize/goNogo.pdf'
@@ -343,8 +343,16 @@ onUnmounted(() => {
 
         我是认知任务
     </div> -->
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 .cognize_yanshi_out {
     margin-top: 50px;
     box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
@@ -428,7 +436,7 @@ onUnmounted(() => {
 }
 
 .home_header_out {
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     padding-bottom: 60px;
     width: 100%;
     min-width: 1200px;

src/views/Community.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import { userInfoStore } from '@/stores'
@@ -518,10 +519,17 @@ onUnmounted(() => {
         </template>
 
     </el-dialog>
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style></style>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 :deep(.el-divider--horizontal) {
     margin: 16px 0 !important;
     opacity: 0.4;
@@ -640,7 +648,7 @@ label {
 
 .home_header_out {
     /* 启用滚动捕捉对齐 */
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     // position: relative;
     padding-bottom: 60px;
     width: 100%;

src/views/Home.vue

@@ -36,9 +36,9 @@ onUnmounted(() => {
         <RouterView />
         <!-- 此处是底部部分最长宽度是100% -->
 
-        <div class="home_footer_out">
+        <!-- <div class="home_footer_out">
             <CpmdFooter />
-        </div>
+        </div> -->
 
     </div>
 </template>

src/views/HomeView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import CpmdQuestionnaire from '@/components/CpmdQuestionnaire.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { menuStatusStore, userInfoStore } from '@/stores'
@@ -254,7 +255,9 @@ const brightStatusLevel = () => {
     </div>
     <CpmdQuestionnaire ref="question" @fatherFun=father />
   </div>
-
+  <div class="home_footer_out">
+    <CpmdFooter />
+  </div>
 </template>
 <style lang="scss" scoped>
 html,
@@ -611,6 +614,8 @@ video {
 }
 
 .home_footer_out {
+  // scroll-snap-align: 'start';
+
   width: 100%;
   background-color: #000000;
 }

src/views/Login.vue

@@ -3,6 +3,7 @@
 
 import { md5 } from 'js-md5'
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { ElMessage } from 'element-plus';
 
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
@@ -188,9 +189,16 @@ const loginFun = async () => {
 
     </div>
 
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 :deep(.el-input__wrapper) {
     align-items: center;
     border-radius: 0px !important;
@@ -210,7 +218,7 @@ const loginFun = async () => {
 
 
 .home_header_out {
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     // position: relative;
     padding-bottom: 60px;
     width: 100%;

src/views/Plan.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import CpmdQuestionnaire from '@/components/CpmdQuestionnaire.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -370,8 +371,16 @@ onUnmounted(() => {
         </div>
         <CpmdQuestionnaire ref="question" @continueFun="continueFun" />
     </div>
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 // .test_record{
 //     background-image: url('../assets/zs/plan_line.png');
 //        background-repeat: no-repeat;
@@ -387,7 +396,7 @@ onUnmounted(() => {
 
 .home_header_out {
     /* 启用滚动捕捉对齐 */
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     // position: relative;
     padding-bottom: 60px;
     width: 100%;

src/views/PopularizationScience.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { format } from 'date-fns/format';
 import { menuStatusStore, userInfoStore } from '@/stores'
@@ -265,7 +266,9 @@ onUnmounted(() => {
         </el-dialog>
 
     </div>
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style>
 .code_dig>>>.el-dialog {
@@ -273,12 +276,17 @@ onUnmounted(() => {
 }
 </style>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 :deep(.el-dialog) {
     border-radius: 5px !important;
 }
 
 .home_header_out {
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     flex: 1;
     // position: relative;
     padding-bottom: 60px;

src/views/Register.vue

@@ -5,6 +5,7 @@ import { md5 } from 'js-md5'
 
 import { getPositionApi, userGroupApi, userRegisterApi } from '@/api/login';
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { ElMessage } from 'element-plus';
 
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
@@ -442,10 +443,17 @@ const roleTypeChange = (val: string) => {
 
     </div>
 
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style></style>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 :deep(.el-input__wrapper) {
     align-items: center;
     border-radius: 0px !important;
@@ -560,7 +568,7 @@ const roleTypeChange = (val: string) => {
     background-repeat: no-repeat;
     background-size: contain;
     // background-color: #B3F1DA; //估计是需要动态
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
     .home_header_inner {

src/views/Report.vue

@@ -4,6 +4,7 @@ import * as echarts from 'echarts'
 
 
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { userInfoStore } from '@/stores'
 const userInfo = userInfoStore()
@@ -339,12 +340,19 @@ onUnmounted(() => {
 
     </div>
 
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 .home_header_out {
     // position: relative;
-    scroll-snap-align: center;
+    // scroll-snap-align: center;
     padding-bottom: 60px;
     width: 100%;
     min-width: 1200px;

src/views/Scale.vue

@@ -5,7 +5,7 @@
 import { format } from "date-fns";
 
 import CpmdHeader from '@/components/CpmdHeader.vue';
-
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { Check } from '@element-plus/icons-vue'
 import { number } from 'echarts';
@@ -582,7 +582,7 @@ onUnmounted(() => {
             <div class="report_top">
                 <div class="report_jt">
                     <span v-if="!(flag == '20210713155333' && isComplate == '2')" style="color:#00DE7E ;">{{ flagName
-                        }}</span>
+                    }}</span>
                     <span v-if="flag == '20210713155333' && isComplate == '2'" style="color:#00DE7E ;">
                         抑郁-焦虑-压力量表（附加题）</span>
                     <span v-show="!isCompleted" class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
@@ -607,12 +607,12 @@ onUnmounted(() => {
                     </el-progress>
                     <div v-if="scaleList.length > 0">
                         <div class="scale_title" v-if="!(flag == '20210713155333' && isComplate == '2')">{{ topicIndex
-                            }}：{{ scaleList[topicIndex - 1].content }}</div>
+                        }}：{{ scaleList[topicIndex - 1].content }}</div>
                         <div class="scale_title" v-if="flag == '20210713155333' && isComplate == '2'">{{ topicIndex +
                             planIsComplateNum }}：{{ scaleList[topicIndex - 1].content }}</div>
                         <el-radio-group v-model="scaleList[topicIndex - 1].isCheck" class="scale_radio_group">
                             <el-radio-button
-                                v-for="item in scaleList[topicIndex - 1].checkItems.split('；').sort(() => { return Math.random() - 0.5 })  "
+                                v-for="item in scaleList[topicIndex - 1].checkItems.split('；').sort(() => { return Math.random() - 0.5 })"
                                 @change="radioFun" :label="item" :value="item" />
                         </el-radio-group>
                         <div class="scale_button">
@@ -640,10 +640,17 @@ onUnmounted(() => {
         </div>
         <CpdmTip ref="cpdmTip" />
     </div>
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 
 </template>
 <style scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 :deep(.dig_kg> .el-dialog__header) {
     padding-right: 0px !important;
 }
@@ -719,7 +726,7 @@ onUnmounted(() => {
 
 .home_header_out {
     // position: relative;
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     padding-bottom: 60px;
     width: 100%;
     min-width: 1200px;

src/views/ScaleDetail.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { queryScaleDetailApi } from '@/api/plan'
 import { ref, onMounted } from 'vue'
 import { userInfoStore } from '@/stores'
@@ -254,9 +255,17 @@ const startText = () => {
             </div>
         </div>
     </div>
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 .cognize_js {
     background-color: #F6F6F6;
     padding: 20px;
@@ -275,7 +284,7 @@ const startText = () => {
 }
 
 .home_header_out {
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     padding-bottom: 60px;
     width: 100%;
     min-width: 1200px;

src/views/TestRecord.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { getUnread } from '../utils/test'
 //持久化设置 菜单状态
@@ -303,11 +304,18 @@ onUnmounted(() => {
 
     </div>
 
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 .home_header_out {
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     // position: relative;
     padding-bottom: 60px;
     width: 100%;

src/views/UpdatePas.vue

@@ -3,6 +3,7 @@
 
 import { md5 } from 'js-md5'
 import CpmdHeader from '@/components/CpmdHeader.vue';
+import CpmdFooter from '@/components/CpmdFooter.vue'
 import { ElMessage } from 'element-plus';
 
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
@@ -197,9 +198,16 @@ const loginFun = async () => {
 
     </div>
 
-
+    <div class="home_footer_out">
+        <CpmdFooter />
+    </div>
 </template>
 <style lang="scss" scoped>
+.home_footer_out {
+    width: 100%;
+    background-color: #000000;
+}
+
 :deep(.kply_inner .el-input__wrapper) {
     align-items: center;
     border-radius: 0px !important;
@@ -219,7 +227,7 @@ const loginFun = async () => {
 
 
 .home_header_out {
-    scroll-snap-align: start;
+    // scroll-snap-align: start;
     // position: relative;
     padding-bottom: 60px;
     width: 100%;