group_lawyer_app/pages/mine/about/index.vue

<template>
  <view class="container" :style="{paddingTop: navbarHeight + 'rpx'}">
    <!-- 顶部渐变背景 -->
    <view class="top-gradient"></view>

    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
      <view class="navbar-content">
        <view class="navbar-back" @click="handleBack">
          <view class="iconfont icon-right back-icon"></view>
        </view>
        <text class="navbar-title">关于我们</text>
        <view class="navbar-placeholder"></view>
      </view>
    </view>

    <!-- 应用信息区域 -->
    <view class="app-info-section">
      <!-- 应用图标 -->
      <view class="app-icon-wrapper">
        <view class="app-icon-placeholder">
          <!-- 这里可以替换为实际的图标 -->
        </view>
      </view>
      
      <!-- 应用名称 -->
      <view class="app-name">{{ appName }}</view>

      <!-- 版本信息框 -->
      <view class="version-box">
        <text class="version-label">当前版本</text>
        <text class="version-number">{{ version }}</text>
      </view>
    </view>

    <!-- 法律协议区域 -->
    <view class="legal-section">
      <view class="legal-links">
        <text class="legal-link" @click="handleUserAgreement">《用户协议》</text>
        <text class="legal-separator">与</text>
        <text class="legal-link" @click="handlePrivacyPolicy">《隐私协议》</text>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright-section">
      <view class="copyright-text">{{ copyright }}</view>
      <view class="icp-text">{{ icpNumber }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0,
        appName: '占位软件名',
        version: '1.0',
        copyright: '爱丽恩严(大连)商务科技有限公司版权所有',
        icpNumber: '辽ICP备2023008619号-4A'
      }
    },
    onLoad() {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
      
      // 从配置中获取应用信息
      const app = getApp()
      if (app && app.globalData && app.globalData.config && app.globalData.config.appInfo) {
        const appInfo = app.globalData.config.appInfo
        if (appInfo.name) {
          this.appName = appInfo.name
        }
        if (appInfo.version) {
          this.version = appInfo.version
        }
      }
    },
    computed: {
      navbarHeight() {
        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
        return (this.statusBarHeight * 2) + 88 + 20
      }
    },
    methods: {
      handleBack() {
        uni.navigateBack()
      },
      handleUserAgreement() {
        // 跳转到用户协议页面
        const app = getApp()
        if (app && app.globalData && app.globalData.config && app.globalData.config.appInfo) {
          const agreements = app.globalData.config.appInfo.agreements
          if (agreements && agreements.length > 1) {
            const agreement = agreements[1] // 用户协议通常是第二个
            this.$tab.navigateTo(`/pages/common/webview/index?title=${encodeURIComponent(agreement.title)}&url=${encodeURIComponent(agreement.url)}`)
          }
        }
      },
      handlePrivacyPolicy() {
        // 跳转到隐私协议页面
        const app = getApp()
        if (app && app.globalData && app.globalData.config && app.globalData.config.appInfo) {
          const agreements = app.globalData.config.appInfo.agreements
          if (agreements && agreements.length > 0) {
            const agreement = agreements[0] // 隐私协议通常是第一个
            this.$tab.navigateTo(`/pages/common/webview/index?title=${encodeURIComponent(agreement.title)}&url=${encodeURIComponent(agreement.url)}`)
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .container {
    min-height: 100vh;
    padding: 0 30rpx 20rpx 30rpx;
    background-color: #ffffff;
    position: relative;

    // 顶部渐变背景
    .top-gradient {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 800rpx;
      background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
      z-index: 0;
      pointer-events: none;
    }

    // 自定义导航栏
    .custom-navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background-color: transparent;
      pointer-events: none;

      .navbar-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88rpx;
        pointer-events: auto;
        position: relative;

        .navbar-back {
          position: absolute;
          left: 30rpx;
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .back-icon {
            font-size: 36rpx;
            color: #000000;
            transform: rotate(180deg);
          }
        }

        .navbar-title {
          font-size: 36rpx;
          font-weight: 500;
          color: #000000;
        }

        .navbar-placeholder {
          position: absolute;
          right: 30rpx;
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }

  // 应用信息区域
  .app-info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80rpx;
    padding-bottom: 60rpx;

    .app-icon-wrapper {
      margin-bottom: 40rpx;

      .app-icon-placeholder {
        width: 160rpx;
        height: 160rpx;
        border-radius: 32rpx;
        background-color: #007AFF;
        // 如果需要显示实际图标，可以这样：
        // background-image: url('/static/logo.png');
        // background-size: cover;
        // background-position: center;
      }
    }

    .app-name {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      margin-bottom: 60rpx;
    }

    .version-box {
      width: 100%;
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
      border: 1rpx solid #f0f0f0;

      .version-label {
        font-size: 32rpx;
        color: #000000;
        font-weight: 400;
      }

      .version-number {
        font-size: 32rpx;
        color: #999999;
        font-weight: 400;
      }
    }
  }

  // 法律协议区域
  .legal-section {
    padding: 40rpx 0;
    display: flex;
    justify-content: center;

    .legal-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;

      .legal-link {
        font-size: 28rpx;
        color: #007AFF;
        text-decoration: none;
      }

      .legal-separator {
        font-size: 28rpx;
        color: #666666;
        margin: 0 10rpx;
      }
    }
  }

  // 版权信息
  .copyright-section {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30rpx;

    .copyright-text {
      font-size: 24rpx;
      color: #999999;
      line-height: 1.6;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .icp-text {
      font-size: 24rpx;
      color: #999999;
      line-height: 1.6;
      text-align: center;
    }
  }
</style>