<template>
  <div>
    <div class="about_container">
      <h1>品牌介绍</h1>
      <p>
        小发同城是2024成立的创新型同城服务企业。自成立以来，秉持着
        “以用户需求为核心，用贴心服务点亮城市生活” 的使命，不断整合各类优质资源，
        搭建起一个涵盖配送、生活服务、商业服务等多元领域的综合性服务网络。
      </p>
      <p>
        随着城市生活节奏的不断加快和人们对生活品质要求的日益提高，
        同城服务市场有着广阔的发展前景。小发同城将继续秉承创新、高效、贴心的服务理念，
        不断拓展服务领域，提升服务质量，为用户创造更多价值。同时，小发同城也将积极与各类商家、合作
        伙伴携手共进，共同推动同城服务行业的发展，为打造更加便捷、美好的城市生活贡献自己的力量。
      </p>
      <div class="ppt">
        <img src="../../assets/image/ppt/ppt2.jpg">
        <img src="../../assets/image/ppt/ppt3.jpg">
        <img src="../../assets/image/ppt/ppt4.jpg">
        <img src="../../assets/image/ppt/ppt5.jpg">
      </div>
      <h1>品牌主张</h1>
      <div class="brandTarget">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="brandTarget_one">
              <img src="../../assets/image/about/target4.jpg">
              <p>服务到位</p>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="brandTarget_two">
              <img src="../../assets/image/about/target5.jpg">
              <p>快速解决</p>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="brandTarget_three">
              <img src="../../assets/image/about/target3.jpg">
              <p>客户放心</p>
            </div>
          </el-col>
        </el-row> 
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">

</script>
<style lang="scss" scoped>
.about_img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.about_container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  h1 {
    margin: 30px 0px;
  }
  .el-row{
    width: 100%;
  }
  p {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 20px;
    text-indent: 2em;
    padding: 0 15px;
  }

  .brandTarget {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;

    .brandTarget_one {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .brandTarget_two {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .brandTarget_three {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }
    p{
      text-align: center;
      padding: 20px;
    }
  }
}
.ppt{
  width: 100%;
  margin: auto;
  img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}
</style>