|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px', 'padding-bottom':pb+'rpx'}">
|
|
|
+ <cus-header title="申领社会实践记录" bgColor="#FFFFFF"></cus-header>
|
|
|
+ <div class="tab adf">
|
|
|
+ <div class="tab-pre adfacjc" :class="{'active':tidx===1}" @tap="changeTab(1)">可申领</div>
|
|
|
+ <div class="tab-pre adfacjc" :class="{'active':tidx===2}" @tap="changeTab(2)">已申领</div>
|
|
|
+ </div>
|
|
|
+ <div class="member">
|
|
|
+ <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
|
|
|
+ <view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in memberList" :key="index" @tap="changeMember(item,index)">
|
|
|
+ <view class="cl_item" :class="{'active':midx===index}">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ <template v-if="tidx===1">
|
|
|
+ <div class="list">
|
|
|
+ <up-list @scrolltolower="scrolltolower" style="height: 100%;">
|
|
|
+ <up-list-item v-for="(item, index) in list" :key="index">
|
|
|
+ <practice-box></practice-box>
|
|
|
+ </up-list-item>
|
|
|
+ </up-list>
|
|
|
+ </div>
|
|
|
+ <div class="btn">申领社会实践记录</div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="tidx===2">
|
|
|
+ <div class="list">
|
|
|
+ <up-list @scrolltolower="scrolltolower2" style="height: 100%;">
|
|
|
+ <up-list-item v-for="(item, index) in yslList" :key="index">
|
|
|
+ <div class="ysl-box">
|
|
|
+ <div class="ysl-box-title">{{'感恩有你 温暖前行'}}</div>
|
|
|
+ <div class="ysl-box-tip">申领时间：{{'2025-06-01 ～ 2025-07-01'}}</div>
|
|
|
+ <div class="ysl-box-tip">申 领 人：{{'张琳琳'}}</div>
|
|
|
+ <div class="ysl-box-btn">查看</div>
|
|
|
+ </div>
|
|
|
+ </up-list-item>
|
|
|
+ </up-list>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="">
|
|
|
+ import CusHeader from '@/components/CusHeader/index.vue'
|
|
|
+ import PracticeBox from '@/components/pages/practiceBox/index.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+
|
|
|
+ const pb = ref(184)
|
|
|
+ const tidx = ref(1)
|
|
|
+ const midx = ref(0)
|
|
|
+ const scrollLeft = ref(0)
|
|
|
+ const memberList = ref([
|
|
|
+ {id:1,name:'张三'},
|
|
|
+ {id:2,name:'李四'},
|
|
|
+ {id:3,name:'龙傲天'}
|
|
|
+ ])
|
|
|
+ const list = ref([1,1,1,1,1])
|
|
|
+ const yslList = ref([1,1,1])
|
|
|
+
|
|
|
+ const changeTab = index => {
|
|
|
+ tidx.value = index;
|
|
|
+ pb.value = index===1?184:40;
|
|
|
+ }
|
|
|
+
|
|
|
+ const changeMember = (item,index) => {
|
|
|
+ midx.value = index;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .scroll-view_H {
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view-item_H {
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ &:first-child{
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .common_page{
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .tab{
|
|
|
+ width: 100%;
|
|
|
+ height: 102rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ &-pre{
|
|
|
+ width: 50%;
|
|
|
+ height: 102rpx;
|
|
|
+ position: relative;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #676775;
|
|
|
+ line-height: 48rpx;
|
|
|
+ &.active{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #252525;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ width: 42rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: #B7F358;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -21rpx;
|
|
|
+ bottom: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .member{
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .cl_item{
|
|
|
+ padding: 0 26rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.active{
|
|
|
+ background: #B7F358;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 4rpx;
|
|
|
+
|
|
|
+ .ysl-box{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 36rpx 24rpx;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(45deg, #FFFFFF 80%, #F2FFE8 100%);
|
|
|
+ &-title{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ &-tip{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #676775;
|
|
|
+ line-height: 24rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ &-btn{
|
|
|
+ width: 118rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #B7F358;
|
|
|
+ border-radius: 45rpx;
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn{
|
|
|
+ width: calc(100% - 210rpx);
|
|
|
+ height: 90rpx;
|
|
|
+ background: #B7F358;
|
|
|
+ border-radius: 45rpx;
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 105rpx;
|
|
|
+ bottom: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
