diff --git a/pages.json b/pages.json
index ec4ef33..aa77fb1 100644
--- a/pages.json
+++ b/pages.json
@@ -48,6 +48,14 @@
 				"navigationBarTextStyle": "white"
 			}
 		}
+		, {
+			"path": "pages/activity/info",
+			"style": {
+				"navigationBarTitleText": "活动详情",
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
+		}
 		, {
 			"path": "pages/work/index",
 			"style": {
diff --git a/pages/activity/index.vue b/pages/activity/index.vue
index 583708c..79748ff 100644
--- a/pages/activity/index.vue
+++ b/pages/activity/index.vue
@@ -43,17 +43,26 @@
         <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">
+                    <view class="listInfo" @click="toInfo(item)">
                         <span class="titile">
                             {{ item.title }}
                         </span>
-                        <view class="startTime">开始时间：{{ item.startTime }}</view>
-                        <view class="endTime">结束时间：{{ item.endTime }}</view>
-                        <view class="addrs">活动地点：{{ item.addrs }}</view>
+                        <view class="startTime flex  alignCenter">
+                        <image :src="tu52" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
+                        开始时间：{{ item.startTime }}</view>
+                        <view class="endTime flex  alignCenter">
+                            <image :src="tu53" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
+                            结束时间：{{ item.endTime }}</view>
+                        <view class="addrs flex  alignCenter">
+                            <image :src="tu51" style="width: 20rpx; height: 26rpx; margin-right: 12rpx;"></image>
+                            活动地点：{{ item.addrs }}</view>
                         <view class="statsInfo">
-                            <view :class="getDictLabelByValue(item.state).cssClass"  >
-                            <span class="text">{{ getDictLabelByValue(item.state).dictLabel }}</span>
-                        </view>
+                            <!-- 动态数据 -->
+                            <!-- <view :class="getDictLabelByValue(item.state).cssClass"  >
+                            <span class="text">{{ getDictLabelByValue(item.state).dictLabel }}</span></view> -->
+                            <!-- 静态数据 -->
+                            <view class="state1"  >
+                            <span class="text">报名中</span></view>
                         </view>
 
                     </view>
@@ -77,6 +86,9 @@ const { proxy } = getCurrentInstance();
 const iconConfig =  proxy.iconConfig;
 const tu21 = iconConfig.tu21;
 const tu22 = iconConfig.tu22;
+const tu51 = iconConfig.tu51;
+const tu52 = iconConfig.tu52;
+const tu53 = iconConfig.tu53;
 const activityState = ref([])//字典
 const imgInfo = ref("")
 // 创建响应式数据  ref('#001f3f')
@@ -90,26 +102,32 @@ const list4 = reactive([
     { name: '已结束' } 
 ]); 
 const actiInfoList = ref([
-   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   {
+    id:1,
+    title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
    startTime:'2023-05-01 15:00',
    endTime:'2023-05-01 16:00',
    state:'1',
    addrs:'天津电子信息职业技术学院操场东面'
    },
-   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   {
+    id:2,
+    title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
    startTime:'2023-05-01 15:00',
    endTime:'2023-05-01 16:00',
    state:'2',
    addrs:'天津电子信息职业技术学院操场东面'
    },
-   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   {id:3,
+    title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
    startTime:'2023-05-01 15:00',
    endTime:'2023-05-01 16:00',
    state:'0',
    addrs:'天津电子信息职业技术学院操场东面'
    }
    ,
-   {title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+   {id:4,
+    title:'怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
    startTime:'2023-05-01 15:00',
    endTime:'2023-05-01 16:00',
    state:'0',
@@ -143,6 +161,10 @@ const getDictLabelByValue = (state) => {
   return dict ? dict : '未知状态';
 };
 
+const toInfo = (item) => {
+    proxy.$tab.navigateTo(`/pages/activity/info?id=${item.id}`);
+}
+
 </script>
 <style lang="scss">
   .fixed-header {
@@ -223,11 +245,10 @@ align-items: center;
     margin-left: 32rpx;
 }
 .sousuoBox .souBOx .shuruText {
+    margin-left: 20rpx;
     font-weight: 400;
     font-size: 28rpx;
-    text-align: center;
-    color: #999999 100%;
-    margin-left: 20rpx;
+    color: #999999  !important;
 }
 .img3 {
     width: 38rpx;
@@ -251,7 +272,7 @@ align-items: center;
     padding-left: 24rpx;
     .titile {
             font-weight: 400;
-            width: 614rpx;
+           
             height: 80rpx;
             font-size: 32rpx;
             color: #000000 100%;
@@ -259,7 +280,7 @@ align-items: center;
         .startTime {
             margin-top: 34rpx;
             font-weight: 400;
-            width: 350rpx;
+            
             height: 24rpx;
             font-size: 24rpx;
             color: #000000 100%;
@@ -267,15 +288,14 @@ align-items: center;
         .endTime {
             margin-top: 12rpx;
             font-weight: 400;
-            width: 350rpx;
+            
             height: 24rpx;
             font-size: 24rpx;
             color: #000000 100%;
         }
         .addrs {
-            margin-top: 24rpx;
+            margin-top: 22rpx;
             font-weight: 400;
-            width: 504rpx;
             height: 24rpx;
             font-size: 24rpx;
             color: #000000 100%;
diff --git a/pages/activity/info.vue b/pages/activity/info.vue
new file mode 100644
index 0000000..1892b56
--- /dev/null
+++ b/pages/activity/info.vue
@@ -0,0 +1,190 @@
+<template class="content">
+    <view class="fixed-header">
+        <!-- 顶部导航栏 -->
+        <up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick">
+
+            <template #center>
+                <div class="navbarcenter"><span>活动详情</span></div>
+            </template>
+        </up-navbar>
+    </view>
+    <view style="height: 100vh; overflow: auto;">
+        <view class="avtivityInfo">
+            <view>
+                <view class="cards">
+                    <view class="title"> {{ actiInfoList.title }}</view>
+                    <view class="time">活动时间：{{ actiInfoList.startTime }} - {{ actiInfoList.endTime }}</view>
+                    <view class="addrs">活动地点：{{ actiInfoList.addrs }}</view>
+                </view>
+                <view class="cardz">{{ actiInfoList.activityInfo }}</view>
+                <view class="cardx">
+                    <image :src="QNDomain + actiInfoList.url" class="image"></image>
+                </view>
+            </view>
+        </view>
+        <view class="dictAuto">
+
+            <view class="state1">
+                <up-button color="#c0f0ec" size="large" shape="circle" @click="btnClick"><span
+                        class="btnText">立即报名</span></up-button>
+            </view>
+        </view>
+    </view>
+    <view class="infox">
+        <view class="infoavatar"><up-avatar size="60rpx" :src="QNDomain + actiInfoList.launchAvatarsurl"></up-avatar></view>
+        <view>
+            <view class="launchName">{{ actiInfoList.launchName }}</view>
+            <view class="launchAddres">{{ actiInfoList.launchAddres }}</view>
+        </view>
+        <view class="elroll">已报名：{{ actiInfoList.elroll }}人</view>
+    </view>
+    <view class="infox2">
+
+    </view>
+
+</template>
+<script setup>
+import { onShow, onLoad } from '@dcloudio/uni-app'
+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 tu51 = iconConfig.tu51;
+const tu52 = iconConfig.tu52;
+const tu53 = iconConfig.tu53;
+
+// 创建响应式数据  ref('#001f3f')
+const bgColor = ref('');
+
+const store = useStore()
+const QNDomain = store.state.user.QNDomain
+const actiInfoList = ref(
+    {
+        title: '社团招新|广纳新人（文学社）',
+        startTime: '2024.06.01  12:00',
+        endTime: '2024.06.01  14:00',
+        state: '1',
+        addrs: '天津电子信息职业技术学院操场东面',
+        activityInfo: '社团招新是各大高校、社区或其他组织为了吸引新成员、注入新鲜血液而举办的活动。以下是社团招新的一些关键要点和通常的步骤1.确骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，以及这些新成员能为社团带来什么。这有助于社团更有针对性地制定招新计划和策略。2.制定招新计划:包括招新时间、地点、方式等。例如，可以在新生入学时举办招新活动，卖或者在校园内的显眼位置设立招新摊位。3.宣传和推广:社团需要通过各种渠道进行宣传，如校园广播、海报、社交媒体等以吸引潜在的新成员。宣传内容应突出社团的特色和优势，让更多人了解和关注。4.举办招新活动:在招招新是各大高校、社区或其他组织为了吸引新成员、注入新鲜血液而举办的活动。以下是社团招新的一些关键要点和通常的步骤1.确定招新目标和需求:社团需要明确自己想要吸引什么样的新成员，新期间，社团可以组织各种有趣的活动，如现场表演、游戏互动、展览展示等，以展示社团的风采和实力，同时吸引更多人参与。',
+        url: 'home/test/image/png/45feb5093f71dbdbec7329ca1822da0_20240601133007403.png',
+        launchAvatarsurl: 'home/test/image/jpeg/test1_20240531151817921.jpg',
+        launchName: '爱吃饭的小张',
+        launchAddres: '天津电子信息职业技术学院',
+        elroll: '123'
+    }
+
+);
+onLoad((options) => {
+    console.log("页面参数：", options.id);
+})
+const leftClick = () => {
+    proxy.$tab.navigateBack(1)
+}
+
+</script>
+<style lang="scss">
+.navbarcenter {
+    font-weight: 400;
+    width: 148rpx;
+    height: 37rpx;
+    font-size: 36rpx;
+    text-align: left;
+    color: #000000;
+}
+
+.avtivityInfo {
+    width: 686rpx;
+    margin: 44rpx auto;
+
+    .cards {
+        .title {
+            font-weight: 400 !important;
+            font-size: 32rpx;
+            text-align: left;
+            color: #000000 !important;
+        }
+
+        .time {
+            margin-top: 28rpx;
+            font-weight: 400;
+            font-size: 24rpx;
+            text-align: left;
+            color: #999999 !important;
+        }
+
+        .addrs {
+            margin-top: 12rpx;
+            font-weight: 400;
+            font-size: 24rpx;
+            text-align: left;
+            color: #999999 !important;
+        }
+    }
+
+    .cardz {
+        margin-top: 48rpx;
+        font-weight: 400;
+        width: 674rpx;
+        font-size: 24rpx;
+        text-align: left;
+        color: #000000 !important;
+    }
+
+    .cardx {
+
+        .image {
+            width: 686rpx;
+            height: 720rpx;
+        }
+    }
+
+
+}
+
+.dictAuto {
+    margin: 4rpx auto;
+    margin-bottom: 200rpx;
+    .state1 {
+        width: 686rpx;
+        height: 80rpx;
+        margin: 0 auto;
+
+        .btnText {
+            font-weight: 400;
+            width: 120rpx;
+            height: 32rpx;
+            font-size: 30rpx;
+
+            color: #00CCBE !important;
+        }
+    }
+}
+
+.infox {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 88rpx;
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+    position: fixed; /* 固定位置 */
+    left: 0; /* 左对齐 */
+    right: 0; /* 右对齐 */
+    bottom: 68rpx; /* 底部对齐 */
+    border-top: 1px solid #ccc; /* 上边框 */
+
+    background-color: white; /* 背景色设置为白色，防止透明背景导致内容重叠可见 */
+    z-index: 1000; /* 确保在最上层 */
+}
+.infox2{
+    position: fixed; /* 固定位置 */
+    left: 0; /* 左对齐 */
+    right: 0; /* 右对齐 */
+    bottom: 0; /* 底部对齐 */
+    height: 68rpx;
+    width: 100%;
+    background-color: #f6f6f6;
+}
+</style>
\ No newline at end of file
diff --git a/utils/icon/icon.js b/utils/icon/icon.js
index f6accd2..95003d0 100644
--- a/utils/icon/icon.js
+++ b/utils/icon/icon.js
@@ -1,11 +1,15 @@
-// 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")
+const tu51 = ref(QNDomain + "home/icon/image/png/tu5-1_20240601124004353.png")
+const tu52 = ref(QNDomain + "home/icon/image/png/tu5-2_20240601124010403.png")
+const tu53 = ref(QNDomain + "home/icon/image/png/tu5-3_20240601124016641.png")
 
 export default {
-  tu21,tu22
+  tu21,tu22,
+  tu51,tu52,tu53
 }
\ No newline at end of file