绿满眶商城微信小程序-uniapp
peng
2025-07-02 be80b22a4a0fcd33e1b17ebdb86eba91cc7de4d2
pages/mine/activity/reportActivity.vue
@@ -1,8 +1,8 @@
<template>
   <view class="wrapper">
      <view style="height: 100rpx"></view>
      <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
      <view style="height: 100rpx;margin-top: 50px"></view>
      <!-- 内容区域 -->
      <scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
         <view class="waterfall">
@@ -47,9 +47,11 @@
</template>
<script>
   import TopBar from "@/components/TopBar.vue";
   import '@/components/uview-components/uview-ui';
   import {getActivityReportList} from '@/api/activity.js';
   export default {
      components: {TopBar},
      data() {
         return {
            columns: [
@@ -75,6 +77,17 @@
         this.getActivityList();
      },
      methods: {
         topBarChange(titleObj) {
            if (titleObj.index === 'home') {
               uni.switchTab({
                  url: titleObj.pagePath
               });
            } else {
               uni.redirectTo({
                  url: titleObj.pagePath
               });
            }
         },
         /**
          * 下拉刷新时
          */
@@ -95,7 +108,10 @@
            }, 300);
         },
         async getActivityList() {
            if (this.noMore) {
               this.loading = false;
               return
            }
            try {
               const res = await getActivityReportList(this.query);
@@ -205,7 +221,7 @@
      text-align: center;
      color: #999;
      font-size: 26rpx;
      background-color: #f7f8fa;
      background-color: #f8f9fa;
   }
   .btn-container {
@@ -221,7 +237,7 @@
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f7f8fa;
      background-color: #f8f9fa;
   }
   /* 导航栏优化 */
@@ -253,17 +269,19 @@
      gap: 20rpx;
   }
   /* 卡片项优化 */
   /* 卡片项优化 - 使用绿色主题 */
   .item {
      background: #fff;
      background: #ffffff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      border: 1px solid #e0f2e9;
      &:active {
         transform: scale(0.98);
         box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
         background-color: #f0faf5;
      }
   }
@@ -272,7 +290,7 @@
      width: 100%;
      display: block;
      border-radius: 16rpx 16rpx 0 0;
      background-color: #f5f5f5;
      background-color: #f0faf5;
      &[mode="widthFix"] {
         height: auto;
@@ -284,17 +302,16 @@
      object-fit: cover;
   }
   /* 文字内容样式 */
   /* 文字内容样式 - 使用绿色渐变 */
   .text-content {
      padding: 24rpx;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      // background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
      min-height: 160rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .title {
         color: #fff;
         font-size: 32rpx;
         font-weight: 500;
         line-height: 1.4;
@@ -306,11 +323,11 @@
      }
   }
   /* 标题样式优化 */
   /* 标题样式优化 - 使用深绿色 */
   .title {
      padding: 20rpx 24rpx;
      font-size: 28rpx;
      color: #333;
      color: #2c7a7b;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
@@ -319,7 +336,7 @@
      font-weight: 500;
      &:not(.text-content .title) {
         border-top: 1rpx solid #f0f0f0;
         border-top: 1rpx solid #e0f2e9;
      }
   }
@@ -367,4 +384,12 @@
         font-size: 28rpx;
      }
   }
</style>
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000;
      background-color: #ffffff;
   }
</style>