|
|
@@ -18,9 +18,20 @@
|
|
|
</up-grid>
|
|
|
<up-toast ref="uToastRef" />
|
|
|
|
|
|
- <view @click="DataInit" class="paiban-sty" v-if="userType == 2">
|
|
|
- <image src="/static/serverImg/home/icon/icon8.png" class="service-img" mode="aspectFit" />
|
|
|
- 排班管理
|
|
|
+ <view class="paiBanSty" v-if="userType == 2">
|
|
|
+ <!-- <image src="/static/serverImg/home/icon/icon8.png" class="service-img" mode="aspectFit" /> -->
|
|
|
+ <image src="/static/img/14147@2x.png" class="images" mode="aspectFit" />
|
|
|
+ <view class="paiBanTitle">我的排班</view>
|
|
|
+ <view class="paiBanDesc">管理排班时间，合理分配服务订单</view>
|
|
|
+ <button class="paiBanBtn" @click="DataInit">去管理排版</button>
|
|
|
+ <swiper class="zhiYuanZheSwiper" vertical circular autoplay :interval="4000" :duration="800"
|
|
|
+ :previous-margin="'20rpx'" :next-margin="'20rpx'" @change="onSwiperChange">
|
|
|
+ <swiper-item v-for="(imgUrl, index) in volunteerImages" :key="index">
|
|
|
+ <view class="swiper-item-container" :class="{ 'active-swiper': currentSwiperIndex === index }">
|
|
|
+ <image :src="imgUrl" class="zhiYuanZhe" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -47,7 +58,7 @@ import {
|
|
|
} from '@/api/volunteer.js'
|
|
|
import {
|
|
|
volunteerSeachgetTreeList,
|
|
|
- volunteerDataList
|
|
|
+ volunteerVolunteerPicture
|
|
|
} from "@/api/volunteerDetailsApi/details.js"
|
|
|
import { getTreeList } from '@/api/volunteer'
|
|
|
import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
|
|
|
@@ -70,7 +81,26 @@ const selected = ref([])
|
|
|
|
|
|
const serveiceList = ref([]);
|
|
|
|
|
|
+// 志愿者图片
|
|
|
+const volunteerImages = ref([]);
|
|
|
+
|
|
|
+const getVolunteerImages = () => {
|
|
|
+ volunteerVolunteerPicture({}).then(res => {
|
|
|
+ console.log('res', res);
|
|
|
+ if (Array.isArray(res)) {
|
|
|
+ volunteerImages.value = res;
|
|
|
+ } else if (res.code === 200 && res.data) {
|
|
|
+ volunteerImages.value = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 当前显示的轮播图索引
|
|
|
+const currentSwiperIndex = ref(0);
|
|
|
|
|
|
+// 轮播图切换事件
|
|
|
+const onSwiperChange = (e) => {
|
|
|
+ currentSwiperIndex.value = e.detail.current;
|
|
|
+};
|
|
|
|
|
|
// 宫格点击事件
|
|
|
const handleGridClick = async (service) => {
|
|
|
@@ -213,13 +243,14 @@ const DataInit = () => {
|
|
|
|
|
|
onMounted(() => {
|
|
|
init();
|
|
|
+ getVolunteerImages();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.grid-box {
|
|
|
width: 226rpx;
|
|
|
- height: 116rpx;
|
|
|
+ height: 116rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
@@ -247,6 +278,7 @@ onMounted(() => {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
.grid-text {
|
|
|
width: 112rpx;
|
|
|
height: 36rpx;
|
|
|
@@ -271,4 +303,119 @@ onMounted(() => {
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.paiBanSty {
|
|
|
+ .paiBanTitle {
|
|
|
+ width: 136rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ position: absolute;
|
|
|
+ top: 1072rpx;
|
|
|
+ left: 278rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paiBanDesc {
|
|
|
+ width: 390rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ position: absolute;
|
|
|
+ top: 1136rpx;
|
|
|
+ left: 278rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paiBanBtn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ background: #D94342;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 30rpx;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #FFF9F3;
|
|
|
+ position: absolute;
|
|
|
+ top: 1035rpx;
|
|
|
+ left: 472rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .images {
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zhiYuanZheSwiper {
|
|
|
+ width: 205rpx;
|
|
|
+ height: 298rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 876rpx;
|
|
|
+ left: 43rpx;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-item-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: all 0.5s ease;
|
|
|
+ opacity: 0.8;
|
|
|
+ transform: scale(0.95);
|
|
|
+
|
|
|
+ &.active-swiper {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ animation: fadeIn 0.8s ease forwards;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zhiYuanZhe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ transition: all 0.5s ease;
|
|
|
+ box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
+ display: block; /* 确保没有额外的空间 */
|
|
|
+ }
|
|
|
+}
|
|
|
+.home-ranking{
|
|
|
+
|
|
|
+}
|
|
|
+@keyframes fadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.9) translateY(10rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1) translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeOut {
|
|
|
+ from {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1) translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0.8;
|
|
|
+ transform: scale(0.95) translateY(-10rpx);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
jiayubo
