talk_appAmin/pages/activity/info.vue

<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">
            <up-modal :show="open" :title="title"  width="600rpx"
            :content='content' confirmText="签到"
            cancelText="取消"
            confirmColor="#3477FC"
            showCancelButton
			closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            ></up-modal>
    </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;
const open = ref(false)
const title = ref('确认签到');  
const content = ref('请您确认活动签到，祝您玩的愉快！');  
// 创建响应式数据  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)
}
const btnClick = () => {
    open.value = !open.value
}
//模态框确认按钮
function confirm () {
    open.value = !open.value
}
//模态框取消按钮
function cancel () {
    open.value = !open.value
}


</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: 400rpx;
    .state1 {
        width: 686rpx;
        height: 80rpx;
        margin: 0 auto;

        .btnText {
            font-weight: 400;
            width: 120rpx;

            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: 10; 
}
.infox2{
    position: fixed; /* 固定位置 */
    left: 0; /* 左对齐 */
    right: 0; /* 右对齐 */
    bottom: 0; /* 底部对齐 */
    height: 68rpx;
    width: 100%;
    background-color: #f6f6f6;
    z-index: 10002; /* 确保在最上层 */
}
</style>