chelvc-custom/src/pages/client/clientUser/mine/setting/aboutMine.vue

<template>
  <view class="container">
    <view class="title">公司简介</view>
    <view class="item-box">
      <u--text size="13" :text="text"></u--text>
      <u--text style="margin-top: 15rpx" size="13" :text="text1"></u--text>
    </view>

    <view class="title">联系我们</view>
    <view class="item-box">
      <view class="item">
        <view class="item-r">
          <p>电话：028-1314520</p>
          <p class="item-p">13739464447</p>
        </view>
      </view>
      <view class="item">
        <view class="item-r">
          <p>邮箱：xiangpei@chelvc.com</p>
          <p class="item-p">2027758656@qq.com</p>
        </view>
      </view>
      <view class="item">
        <view class="item-r">地址：四川省成都市双流区商都路520号201室</view>
      </view>
    </view>

    <view class="title">公司历程</view>
    <view class="item-box">
      <view class="progress-box">
        <image class="img" src="@/static/logo.png" mode="aspectFill"></image>
        <view class="progress-text">
          <p>2023.1月 团队开始组建</p>
          <p>2023.3月 项目开始开发</p>
          <p>2024.1月 项目完成开发</p>
          <p>2024.2月 正式进入运营阶段</p>
          <p>2025.12月 开始准备IPO相关资料</p>
          <p>2026.1月 成功在纳斯达克上市</p>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: '车旅程科技有限公司成立于2023年1月，是一家从事汽车后市场服务的移动互联网公司。公司搭建的养车一站式养车用车服务平台，从B端市场入局，通过整合上下游服务及资源，重新构建汽车后市场服务生态链，为保险、银行及大型集团提供综合汽车生活服务及增值服务解决方案。',
        text1: '平台通过整合优质服务商，并对服务商实施严格的质量监控，现已在全国范围为合作方提供全面的服务。用户通过车旅程养车平台即可一站式享受方便快捷的各类汽车及生活服务。公司秉承“做有温度的汽车服务”的管理理念， 不断探索和创新与机构客户的合作模式。',
      };
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    padding: 40rpx;
    background-color: #f3f4f6;
    height: calc(100vh - 80rpx);

    .title {
      font-size: 42rpx;
      font-weight: bold;
      color: #000;
      margin: 20rpx 0;
    }

    .item-box {
      padding: 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
      line-height: 40rpx;

      .item {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #424c5b;

        .item-l {
          .img {
            width: 50rpx;
            height: auto;
          }
        }

        .item-r {
          margin-left: 20rpx;
        }
      }

      .progress-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;

        .img {
          width: 30%;
          height: 240rpx;
          margin-bottom: 20rpx;
          border-radius:20rpx;
        }

        .progress-text {
          font-size: 25rpx;
          color: #424c5b;
        }
      }
    }
  }

  .item-p {
    position: relative;
    left: 42px;
  }
</style>