HuiSuo-QhdAnErRan/xiaochengxu/pages/about.vue

<template>
  <view class="container">
    <view class="header">
      <text class="page-title">关于我们</text>
    </view>
    <view class="content">
      <text class="paragraph fadeInUp">
        秦皇岛安尔然营销策划有限公司成立于2020年，是一家专注于提供全方位营销解决方案的专业服务机构。我们致力于为客户提供包括但不限于营销策划、会议服务、商务咨询、庆典服务及礼仪服务。
      </text>
      <text class="paragraph fadeInUp">
        在过去的几年里，我们成功地为众多客户提供了量身定制的营销策略和服务方案，帮助他们提升了品牌形象，扩大了市场份额。我们的专业团队由一群经验丰富、富有创意的年轻人组成，他们不仅拥有深厚的行业知识，还具备敏锐的市场洞察力。
      </text>
      <text class="paragraph fadeInUp">
        我们坚信，通过精心策划和执行每一个项目，能够为客户创造真正的价值。无论是大型国际会议还是小型企业庆典，我们都将全力以赴，确保每一场活动都成为难忘的成功案例。
      </text>
      <image src="/static/about.png" class="team-img fadeInUp" mode="widthFix" />
    </view>
    <view class="footer fadeInUp">
      <text>秦皇岛安尔然营销策划有限公司 - 您值得信赖的合作伙伴。</text>
    </view>
  </view>
</template>

<script setup>
// 动画相关的逻辑可以在这里处理，比如使用第三方库或者自定义动画类
</script>

<style scoped>
.container {
  box-sizing: border-box; /* 关键！ */
  padding: 20rpx;
  background: linear-gradient(to bottom, #1a365d, #2c5282);
  height: 100vh;
  overflow: hidden;
}

.header {
  text-align: center;
  margin: 40rpx 0;
}

.page-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #fff;
}

.paragraph {
  font-size: 30rpx;
  line-height: 1.6;
  color: #fff;
  display: block;
  margin-bottom: 30rpx;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.team-img {
  width: 100%;
  border-radius: 16rpx;
  margin-top: 20rpx;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.footer {
  text-align: center;
  margin-top: 60rpx;
  color: #94a3b8;
  font-size: 24rpx;
  position: absolute;
  bottom: 30rpx;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

/* 添加动画类 */
.fadeInUp {
  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>