intc-vue-h5/src/pages_mine/pages/about/index.vue

<template>
  <view class="about-container">
    <view class="header-section">
      <view class="logo-wrapper">
        <image class="logo-image" src="/static/logo1.png" mode="aspectFit"></image>
        <view class="logo-shine"></view>
      </view>
      <text class="app-name">智聪网络科技</text>
      <text class="app-slogan">专业的健康管理工具</text>
    </view>

    <view class="info-card">
      <view class="info-item" v-for="(item, index) in infoList" :key="index">
        <view class="item-left">
          <view class="info-icon" :style="{ background: item.gradient }">
            <uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
          </view>
          <text class="item-label">{{ item.label }}</text>
        </view>
        <view class="item-right">
          <uni-link v-if="item.isLink" :href="item.value" :text="item.displayText" showUnderLine="false" color="#E8841A"></uni-link>
          <text v-else class="item-value">{{ item.value }}</text>
        </view>
      </view>
    </view>

    <view class="copyright">
      <text class="copyright-text">Copyright &copy; {{ currentYear }} qdintc</text>
      <text class="copyright-text">All Rights Reserved.</text>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import config from '@/config.js'

const url = config.appInfo.site_url
// 动态获取版本号
// - 微信小程序：优先读取小程序后台提交发布时填写的版本号，为空时回退到 config
//   注：在微信开发者工具中调用时 miniProgram.version 通常为空字符串，
//       只有体验版/正式版发布后才有真实值
// - 其他端（H5/APP）：使用 config 中的版本号
let version = config.appInfo.version
// #ifdef MP-WEIXIN
try {
  const accountInfo = uni.getAccountInfoSync()
  const mpVersion = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.version
  if (mpVersion) {
    version = mpVersion
  }
} catch (e) {
  console.warn('getAccountInfoSync 调用失败，使用 config 中的版本号:', e)
}
// #endif
// 动态显示当前年份
const currentYear = new Date().getFullYear()

const infoList = computed(() => [
  {
    icon: 'flag',
    label: '版本信息',
    value: `v${version}`,
    displayText: `v${version}`,
    gradient: 'linear-gradient(135deg, #E8841A 0%, #F5A623 100%)',
    isLink: false
  },
  {
    icon: 'email',
    label: '官方邮箱',
    value: 'qdintc@126.com',
    displayText: 'qdintc@126.com',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    isLink: false
  },
  {
    icon: 'phone',
    label: '服务热线',
    value: '17753252359',
    displayText: '17753252359',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    isLink: false
  },
  {
    icon: 'home',
    label: '公司网站',
    value: url,
    displayText: url,
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    isLink: true
  }
])
  
</script>

<style lang="scss" scoped>
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f7fa;
  min-height: 100%;
  height: auto;
}

.about-container {
  display: flex;
  flex-direction: column;
}

.header-section {
  padding: 60rpx 0 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #FFF3D6 0%, #FFCC6E 100%);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 15s infinite;
  }
  
  .logo-wrapper {
    position: relative;
    margin-bottom: 24rpx;
    
    .logo-image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 80rpx;
      box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2);
      background: #ffffff;
      padding: 16rpx;
    }
    
    .logo-shine {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      width: 40rpx;
      height: 40rpx;
      background: linear-gradient(135deg, #E8841A 0%, #F5A623 100%);
      border-radius: 20rpx;
      border: 4rpx solid #F5A623;
    }
  }
  
  .app-name {
    color: #8B4500;
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 8rpx;
  }
  
  .app-slogan {
    color: rgba(139, 69, 0, 0.8);
    font-size: 26rpx;
  }
}

.info-card {
  margin: 10rpx 24rpx 24rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  border-radius: 20rpx;
  padding: 4rpx 0;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  flex: 1;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 20rpx;
  
  &:not(:last-child) {
    border-bottom: 1rpx solid #e8edf3;
  }
  
  .item-left {
    display: flex;
    align-items: center;
    
    .info-icon {
      width: 56rpx;
      height: 56rpx;
      border-radius: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }
    
    .item-label {
      color: #606266;
      font-size: 26rpx;
      font-weight: 500;
    }
  }
  
  .item-right {
    flex: 1;
    text-align: right;
    
    .item-value {
      color: #303133;
      font-size: 26rpx;
    }
  }
}

.copyright {
  padding: 32rpx 24rpx 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  
  .copyright-text {
    color: #909399;
    font-size: 24rpx;
    line-height: 36rpx;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
  }
}
</style>