像上层提取icon

main.js

@@ -3,13 +3,13 @@ import App from './App'
 import store from './store' // store
 import { install } from './plugins' // plugins
 import './permission.js' // permission
-
+import iconConfig from './utils/icon/icon.js'
 // main.js
 import uviewPlus from 'uview-plus'
 
 export function createApp() {
   const app = createSSRApp(App)
-
+  app.config.globalProperties.iconConfig = iconConfig
   app.use(uviewPlus)
   app.use(store)
   // app.use(uView)

pages/activity/index.vue

@@ -1,5 +1,6 @@
 <template class="content">
-    <view>
+    <view  class="fixed-header"> 
+        
         <!-- 顶部导航栏 -->
         <up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
             <template class="img1BOX" #left>
@@ -37,8 +38,9 @@
         }" itemStyle="  width: 200rpx; padding-bottom:18rpx;">
             </up-tabs>
         </view>
+    </view>
         <!-- 列表信息 -->
-        <view>
+        <view class="scrollable-list">
             <up-list @scrolltolower="scrolltolower" :showScrollbar="false" :pagingEnabled="true">
                 <up-list-item v-for="(item, index) in actiInfoList" :key="index">
                     <view class="listInfo">
@@ -60,7 +62,7 @@
             </up-list>
         </view>
 
-    </view>
+    
     <view>
     </view>
 </template>
@@ -72,7 +74,9 @@ import {getDicts} from "@/api/system/dict/data"
 import { ref, reactive, getCurrentInstance } from 'vue'
 import { useStore } from 'vuex';
 const { proxy } = getCurrentInstance();
-
+const iconConfig =  proxy.iconConfig;
+const tu21 = iconConfig.tu21;
+const tu22 = iconConfig.tu22;
 const activityState = ref([])//字典
 const imgInfo = ref("")
 // 创建响应式数据  ref('#001f3f')
@@ -85,12 +89,6 @@ const list4 = reactive([
     { name: '进行中' },  
     { name: '已结束' } 
 ]); 
-const QNDomain = store.state.user.QNDomain
-const tu21 = ref("")
-const tu22 = ref("")
-tu22.value = QNDomain + "home/icon/image/png/tu2-2_20240531163115818.png"
-tu21.value = QNDomain + "home/icon/image/png/tu2-1_20240531153239639.png"
-imgInfo.value = QNDomain + "home/test/image/jpeg/test1_20240531151817921.jpg"
 const actiInfoList = ref([
    {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
    startTime:'2023-05-01 15:00',
@@ -147,6 +145,18 @@ const getDictLabelByValue = (state) => {
 
 </script>
 <style lang="scss">
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1; /* 足够高以确保它在上层 */
+  }
+  .scrollable-list {
+    margin-top:22vh; /* fixed-header 的高度 */
+    height:78vh ;/* 根据屏幕高度和fixed-header的高度计算 */
+    overflow: auto; /* 允许这个容器内部滚动 */
+  }
 
     .leftinfo{
         display: flex;

utils/icon/icon.js

@@ -0,0 +1,11 @@
+// useIconConfig.js
+import { ref } from 'vue'
+
+import store from '@/store'
+const QNDomain = store.state.user.QNDomain
+const tu21 = ref(QNDomain + "home/icon/image/png/tu2-1_20240531153239639.png")
+const tu22 = ref(QNDomain + "home/icon/image/png/tu2-2_20240531163115818.png")
+
+export default {
+  tu21,tu22
+}