|
|
@@ -0,0 +1,123 @@
|
|
|
+<template>
|
|
|
+ <view class="common_page" :style="{'height':h+'px', 'padding-top':mt+'px'}">
|
|
|
+ <cus-header title="义工时长" bgColor="#FFFFFF"></cus-header>
|
|
|
+ <div class="hours">义工时长：{{88}}<text>小时</text></div>
|
|
|
+ <div class="list">
|
|
|
+ <up-list @scrolltolower="scrolltolower" style="height: 100%;">
|
|
|
+ <up-list-item class="list-item" v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="time">{{'2025-07-30 14:00:32'}}</div>
|
|
|
+ <div class="content adfacjb">
|
|
|
+ <div class="left adfac">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/24/d5b79c0e-bcda-49ff-8cc5-5f6275b6bac1.png"></image>
|
|
|
+ <div class="texts">
|
|
|
+ <div class="p">{{'《环保知识知多少？让孩子成为大自然的守护者'}}</div>
|
|
|
+ <div class="p tip">{{'报名参与公益实践活动'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right adfac">
|
|
|
+ <text>+{{4}}</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </up-list-item>
|
|
|
+ </up-list>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="">
|
|
|
+ import CusHeader from '@/components/CusHeader/index.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+
|
|
|
+ const list = ref([1,1,1,1,1,1,1,1,1])
|
|
|
+
|
|
|
+ const scrolltolower = () => {
|
|
|
+ console.log(1);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .common_page{
|
|
|
+ .hours{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 120rpx;
|
|
|
+ text{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #989998;
|
|
|
+ line-height: 120rpx;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list{
|
|
|
+ height: calc(100% - 160rpx);
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0 21rpx;
|
|
|
+ &-item{
|
|
|
+ padding: 36rpx 0;
|
|
|
+ border-bottom: 1rpx solid #E7E7E7;
|
|
|
+ .time{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #989998;
|
|
|
+ line-height: 24rpx;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ margin-top: 36rpx;
|
|
|
+ .left{
|
|
|
+ width: calc(100% - 200rpx);
|
|
|
+ image{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ display: table;
|
|
|
+ }
|
|
|
+ .texts{
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .p{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 32rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &.tip{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #989998;
|
|
|
+ line-height: 24rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ width: 200rpx;
|
|
|
+ justify-content: flex-end;
|
|
|
+ text{
|
|
|
+ font-family: DINAlternate, DINAlternate;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
