xukou-ticket-wx/pages/my/about.vue

<template>
  <view class="about-page" :class="{ 'wechat-browser': isWeixinBrowser }">
    <view class="fixed-nav" v-if="!isWeixinBrowser">
      <NavBar title="关于我们" />
    </view>
    <view class="about-content">
      <view class="about-logo-box">
        <image class="about-logo" src="/static/icon_logo.png" mode="aspectFit" />
        <view class="about-version">版本 1.0.0</view>
      </view>
      <view class="about-card">
        <view class="about-card-title">闸站简介</view>
        <view class="about-card-desc">
          胥口枢纽闸站位于江苏省苏州市，是太湖流域重要的水利枢纽工程。闸站主要承担防洪、航运、灌溉等功能，年通航量超过1000万吨。
        </view>
      </view>
      <view class="about-card">
        <view class="about-card-title">联系方式</view>
        <view class="about-info-row"><text class="about-info-label">地址</text><text class="about-info-value">江苏省苏州市吴中区胥口镇</text></view>
        <view class="about-info-row"><text class="about-info-label">电话</text><text class="about-info-value">0512-66668888</text></view>
        <view class="about-info-row"><text class="about-info-label">邮箱</text><text class="about-info-value">service@xukouzha.com</text></view>
      </view>
    </view>
    <view class="about-footer">© 2025 胥口船闸 版权所有</view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  name: 'AboutPage',
  components: { NavBar },
  data() {
    return {
      isWeixinBrowser: false,
    }
  },
  onLoad() {
    // #ifdef H5
    this.isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent)
    // #endif
  },
  methods: {
  }
}
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  position: relative;
}

.wechat-browser {
  padding-top: 0px;
}

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  height: 90px;
}
.about-content {
  padding-top: 120px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}
.about-logo {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  /* background: linear-gradient(180deg, #217aff 0%, #4fc3ff 100%); */
  margin-bottom: 16rpx;
  /* box-shadow: 0 4rpx 16rpx rgba(33,122,255,0.08); */
}
.about-app-name {
  font-size: 32rpx;
  color: #fff;
  background: linear-gradient(180deg, #217aff 0%, #4fc3ff 100%);
  border-radius: 8rpx;
  padding: 8rpx 32rpx;
  margin-bottom: 8rpx;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(33,122,255,0.08);
}
.about-version {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 16rpx;
}
.about-card {
  width: 92vw;
  max-width: 700rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(59,124,255,0.08);
  padding: 32rpx 28rpx 24rpx 28rpx;
  margin-bottom: 32rpx;
}
.about-card-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  color: #222;
}
.about-card-desc {
  font-size: 28rpx;
  color: #173766;
  line-height: 1.7;
}
.about-info-row {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #222;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f2f4f8;
}
.about-info-row:last-child {
  border-bottom: none;
}
.about-info-label {
  min-width: 100rpx;
  color: #3b4a6b;
}
.about-info-value {
  flex: 1;
  text-align: right;
  color: #222;
}
.about-footer {
  width: 100vw;
  text-align: center;
  color: #888;
  font-size: 24rpx;
  position: absolute;
  left: 0;
  bottom: 24rpx;
}
</style>