<script setup lang="ts">
let serviceList = [
  { id: 1, title: "同城零售", icon: "iconfont icon-icon-test" },
  { id: 2, title: "企业招聘", icon: "iconfont icon-qiyezhaopin" },
  { id: 3, title: "租赁服务", icon: "iconfont icon-zulinfuwuicon" },
  { id: 4, title: "二手交易", icon: "iconfont icon-ershoujiaoyi" },
  { id: 5, title: "安装维修", icon: "iconfont icon-anzhuangweixiu" },
  { id: 6, title: "家政保洁", icon: "iconfont icon-jiazhengbaojieanbao" },
];
</script>

<template>
  <div class="service-contain">
    <div class="index-title">
      <h3>我们的服务</h3>
      <p>
        我们拥有专业的团队和丰富的经验，为您解决生活中的各种问题，为您提供便捷、高效、优质的服务。
      </p>
    </div>
    <div class="service-list">
      <ul>
        <li v-for="s in serviceList" :key="s.id">
          <i :class="`${s.icon}`"></i>
          <h4>{{ s.title }}</h4>
        </li>
      </ul>
    </div>
  </div>

  <div></div>
</template>

<style lang="scss">
.service-contain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
}
.service-list {
  width: 100%;
}
.service-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.service-list ul li {
  list-style: none;
  width: 30%;
  height: 211.6px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.service-list ul li i::before {
  font-size: 70px;
  color: #353535;
  transition: 0.3s;
}
.service-list ul li h4 {
  font-size: 26px;
  font-weight: 500;
  margin-top: 10px;
  transition: 0.3s;
}
.service-list ul li:hover {
  background: linear-gradient(90.54deg, #ec4b2b 0.42%, #f85535 102.71%);
}
.service-list ul li:hover i::before {
  color: #fff;
}
.service-list ul li:hover h4 {
  color: #fff;
}
.service-list ul li:hover i::before p {
  color: #fff;
}

.service-list {
  width: 1200px;
  margin: 15px 0;
}

@media (max-width: 768px) {
  .service-list {
    width: auto;
  }
}
</style>
