<template>
  <div class="index-title">
    <h3>公司简介</h3>
  </div>
  <div class="company-detail">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <img src="../../assets/image/index/company.jpg"
      /></el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <div class="company-introduce">
          <p>
            小发同城专注于打造本地生活服务平台，我们聚焦同城零售、企业招聘、租赁服务以及二手交易等核心业务，旨在全方位满足您的生活与工作需求。
          </p>
          <p>
            在同城零售领域，小发同城凭借先进的技术手段，成功打通超市数据库，给超市提供实现线上线下商品、价格、库存等信息的实时同步。独特价值在于为消费者提供无缝购物体验，让消费者无论是在线上商城浏览下单，还是在实体超市选购商品，都能享受一致的商品选择、价格体系与库存保障市场定位为本地生活服务的创新引领者，致力于解决传统零售线上线下脱节的痛点。
          </p>
          <p>
            对于企业招聘，我们搭建了高效的人才对接桥梁，精准匹配企业与求职者需求，助力本地企业广纳贤才，推动地方经济发展。
          </p>
          <p>
            在租赁服务方面，涵盖住房、办公场地、设备等多元租赁选项，为您解决生活与经营中的租赁难题。
          </p>
          <p>
            在二手交易板块，则为闲置物品提供了流通渠道，让资源得以循环利用，为环保助力。
          </p>
          <router-link :to="{ name: 'about' }" class="router-link-button"
            >了解更多</router-link
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts"></script>
<style lang="scss">
.router-link-button {
  padding: 3px 5px;
  border: none;
  border-radius: 4px;
  background-color: #ec4b2b;
  color: white;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 25px;
  float: right;
}

.router-link-button:hover {
  background-color: #f85535;
}

.company-introduce p {
  font-size: 20px;
  text-indent: 2em;
}

.index-title {
  width: 1200px;
  text-align: center;
  margin: auto;

  h3 {
    font-size: 40px;
  }

  p {
    font-size: 20px;
  }
}

.company-detail {
  display: flex;
  width: 1200px;
  margin: 15px auto 0;
}
.company-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding-right: 20px;
}
.company-introduce {
  padding: 20px;
  letter-spacing: 2px;
  line-height: 34px;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .index-title {
    width: auto;
  }

  .company-detail {
    width: auto;
  }
}
</style>
