<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-list{
    width: 1200px;
    margin: 15px 0;
  }
  @media (max-width: 768px) {
    .service-list{
    width: auto;
  }
  
}
</style>
  