wz-uniapp/pages/about/about.vue

<template>
  <view class="about-page">
    <view class="top-bar">
      <view class="back" @click="handleBack">
        <uni-icons type="left" :size="20" color="#ec5b13" />
      </view>
      <text class="bar-title">关于我们</text>
      <view class="bar-placeholder"></view>
    </view>

    <view class="brand-card">
      <view class="logo-wrap">
        <image class="logo" :src="logoUrl" mode="aspectFill" />
      </view>
      <text class="app-name">{{ appName }}</text>
      <text class="version-pill">Version {{ version }}</text>
    </view>

    <view class="section">
      <text class="section-title">开发者信息</text>
      <view class="info-card">
        <view class="info-row">
          <text class="info-label">主体名称</text>
          <text class="info-value">{{ developerName }}</text>
        </view>
        <view class="info-row info-row-last">
          <text class="info-label">联系邮箱</text>
          <text class="info-value info-link">{{ supportEmail }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <text class="section-title">法律条款</text>
      <view class="info-card">
        <view class="link-row" @click="openService">
          <text class="link-text">服务协议</text>
          <uni-icons type="arrow-right" :size="16" color="#c0c6cf" />
        </view>
        <view class="link-row" @click="openPrivacy">
          <text class="link-text">隐私政策</text>
          <uni-icons type="arrow-right" :size="16" color="#c0c6cf" />
        </view>
        <view class="link-row link-row-last" @click="openOpenSource">
          <text class="link-text">开源声明</text>
          <uni-icons type="arrow-right" :size="16" color="#c0c6cf" />
        </view>
      </view>
    </view>

    <view class="footer">
      <text class="copyright">Copyright © 2024 Tech Co., Ltd.</text>
      <text class="copyright-sub">All Rights Reserved.</text>
    </view>
  </view>
</template>

<script>
import { ENV } from '@/common/env';

export default {
  data() {
    return {
      appName: ENV.APP_NAME || '悦享生活',
      version: '2.4.5',
      developerName: '某某网络科技有限公司',
      supportEmail: 'support@example.com',
      logoUrl: '/static/60x60.png'
    };
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
    openService() {
      uni.navigateTo({ url: '/pages/protocol/service' });
    },
    openPrivacy() {
      uni.navigateTo({ url: '/pages/protocol/privacy' });
    },
    openOpenSource() {
      uni.showToast({
        title: '开源声明准备中',
        icon: 'none'
      });
    }
  }
};
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: #f8f6f6;
  padding-bottom: 40rpx;
  color: #1f2d3d;
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--status-bar-height) + 18rpx) 24rpx 16rpx;
  background: #f8f6f6;
  border-bottom: 1px solid rgba(236, 91, 19, 0.08);
}

.back {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(236, 91, 19, 0.08);
}

.bar-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1f2d3d;
}

.bar-placeholder {
  width: 64rpx;
  height: 64rpx;
}

.brand-card {
  margin: 32rpx 24rpx 0;
  background: #ffffff;
  border-radius: 28rpx;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 18rpx 40rpx rgba(36, 30, 24, 0.08);
}

.logo-wrap {
  width: 120rpx;
  height: 120rpx;
  border-radius: 28rpx;
  background: #fff5ef;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid #ffffff;
  box-shadow: 0 10rpx 26rpx rgba(236, 91, 19, 0.2);
}

.logo {
  width: 80rpx;
  height: 80rpx;
}

.app-name {
  margin-top: 20rpx;
  font-size: 34rpx;
  font-weight: 700;
}

.version-pill {
  margin-top: 10rpx;
  padding: 6rpx 18rpx;
  font-size: 20rpx;
  font-weight: 600;
  color: #ec5b13;
  background: rgba(236, 91, 19, 0.12);
  border-radius: 999rpx;
}

.section {
  margin-top: 30rpx;
  padding: 0 24rpx;
}

.section-title {
  display: block;
  font-size: 22rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
  color: rgba(31, 45, 61, 0.6);
  margin-bottom: 14rpx;
}

.info-card {
  background: #ffffff;
  border-radius: 22rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 26rpx rgba(36, 30, 24, 0.06);
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22rpx 20rpx;
  border-bottom: 1px solid #f1f1f1;
}

.info-row-last {
  border-bottom: none;
}

.info-label {
  font-size: 26rpx;
  font-weight: 600;
  color: #1f2d3d;
}

.info-value {
  font-size: 22rpx;
  color: #7b8794;
}

.info-link {
  color: #ec5b13;
}

.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 20rpx;
  border-bottom: 1px solid #f1f1f1;
}

.link-row-last {
  border-bottom: none;
}

.link-text {
  font-size: 26rpx;
  color: #1f2d3d;
}

.footer {
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(31, 45, 61, 0.45);
}

.copyright {
  font-size: 20rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.copyright-sub {
  margin-top: 6rpx;
  font-size: 18rpx;
}
</style>