Small_goose_Vue3/pages/mine/about.vue

<template>
  <view class="about-container">
    <view class="about-title">了解小鹅通</view>
    <view class="about-box">
      <image src="/static/logo.png" class="about-logo" />
      <view class="about-desc">小鹅通，专注知识付费与内容变现，助力每一位内容创作者。</view>
      <view class="feature-list">
        <view class="feature-item">· 课程直播与录播</view>
        <view class="feature-item">· 社群互动</view>
        <view class="feature-item">· 多端分发</view>
        <view class="feature-item">· 数据分析</view>
      </view>
      <button class="web-btn" @click="goWeb">访问官网</button>
    </view>
  </view>
</template>
<script>
export default {
  methods: {
    goWeb() {
      uni.setClipboardData({ data: 'https://www.xiaoe-tech.com', success:()=>{
        uni.showToast({ title: '官网地址已复制', icon: 'none' })
      } })
    }
  }
}
</script>
<style lang="scss">
.about-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}
.about-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  padding: 48rpx 0 32rpx 0;
}
.about-box {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 24rpx 48rpx 24rpx;
}
.about-logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
}
.about-desc {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 32rpx;
  text-align: center;
}
.feature-list {
  width: 100%;
  margin-bottom: 32rpx;
}
.feature-item {
  font-size: 26rpx;
  color: #409EFF;
  margin-bottom: 8rpx;
  text-align: left;
}
.web-btn {
  width: 80%;
  background: #409EFF;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
}
</style>