You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.2 KiB
143 lines
3.2 KiB
<template>
|
|
<view class="volunteer-features">
|
|
<view class="features-container">
|
|
<!-- 左侧成为志愿者 -->
|
|
<view class="feature-block left-feature" @click="navigateTo('/subPages/index/volunteerApply')">
|
|
<image class="feature-bg" src="/static/成为志愿者.png" mode="aspectFill"></image>
|
|
<view class="feature-content">
|
|
<view class="feature-info">
|
|
<text class="feature-title">成为志愿者</text>
|
|
<text class="feature-desc">加入我们的行列</text>
|
|
<image class="arrow-icon" src="/static/志愿者箭头.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧两个功能 -->
|
|
<view class="right-features">
|
|
<!-- 组织介绍 -->
|
|
<view class="feature-block right-feature" @click="navigateTo('/subPages/index/organizationIntroduction')">
|
|
<image class="feature-bg" src="/static/组织介绍.png" mode="aspectFill"></image>
|
|
<view class="feature-content">
|
|
<view class="feature-info">
|
|
<text class="feature-title">组织介绍</text>
|
|
<text class="feature-desc">了解我们的组织</text>
|
|
<image class="arrow-icon" src="/static/组织箭头.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 活动日历 -->
|
|
<view class="feature-block right-feature" @click="navigateTo('/subPages/index/activityCalendar')">
|
|
<image class="feature-bg" src="/static/活动日历.png" mode="aspectFill"></image>
|
|
<view class="feature-content">
|
|
<view class="feature-info">
|
|
<text class="feature-title">活动日历</text>
|
|
<text class="feature-desc">查看近期活动安排</text>
|
|
<image class="arrow-icon" src="/static/活动箭头.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'VolunteerFeatures',
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
navigateTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.volunteer-features {
|
|
margin: 20rpx;
|
|
|
|
.features-container {
|
|
display: flex;
|
|
gap: 40rpx;
|
|
height: 400rpx;
|
|
|
|
.feature-block {
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left-feature {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.feature-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
.right-features {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
|
|
.right-feature {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.feature-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
// background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
|
|
z-index: 2;
|
|
|
|
.feature-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
.feature-title {
|
|
font-size: 32rpx;
|
|
// font-weight: bold;
|
|
color: #000000;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
.arrow-icon {
|
|
width: 54rpx;
|
|
height: 29rpx;
|
|
margin-left: 20rpx;
|
|
// position: absolute;
|
|
// right: 15rpx;
|
|
// bottom: 15rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|