214 lines
7.4 KiB
Vue
214 lines
7.4 KiB
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> |