<template>
    <el-container>
        <el-header>
            <Header />
        </el-header>
        <el-main>
            <div class="service-list-container">
                <ul class="service-list">
                    <li>
                        <el-image src="src/assets/time.png"></el-image>
                        <div>
                            <p>运费时效</p>
                            <p>查预估费用和预计送达时间</p>
                        </div>
                    </li>
                    <li>
                        <el-image src="src/assets/serviceSpot.png"></el-image>
                        <div>
                            <p>服务网点</p>
                            <p>查各地网点、丰巢柜、合作点</p>
                        </div>
                    </li>
                    <li>
                        <el-image src="src/assets/require.png"></el-image>
                        <div>
                            <p>收寄标准</p>
                            <p>查物品能不能寄</p>
                        </div>
                    </li>
                    <li>
                        <el-image src="src/assets/serviceRange.png"></el-image>
                        <div>
                            <p>服务范围</p>
                            <p>查地址能不能收派</p>
                        </div>
                    </li>
				</ul>	
				<ul class="service-list">	
                    <li>
                        <el-icon><DataLine /></el-icon>
                        <div>
                            <p>汇率查询</p>
                        </div>
                    </li>
                    <li>
                        <el-icon><Document /></el-icon>
                        <div>
                            <p>常用表格</p>
                        </div>
                    </li>
                    <li>
                        <el-icon><SetUp /></el-icon>
                        <div>
                            <p>清关服务</p>
                        </div>
                    </li>
                    <li>
                        <el-icon><DataBoard /></el-icon>
                        <div>
                            <p>无着件公示</p>
                        </div>
                    </li>
                    <li>
                        <el-icon><HomeFilled /></el-icon>
                        <div>
                            <p>特殊入仓地址查询</p>
                        </div>
                    </li>
                    <li>
                        <el-icon><Download /></el-icon>
                        <div>
                            <p>电子回单下载</p>
                        </div>
                    </li>
                </ul>
            </div>
        </el-main>
        <el-footer>
            <Footer />
        </el-footer>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
</script>

<style scoped>
	.service-list-container {
		padding: 20px;
		margin-top: 30px;
	}

	.service-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.service-list {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.service-list li {
		flex: 1;
		min-width: 200px;
		border: 1px solid #eaeaea;
		border-radius: 8px;
		overflow: hidden;
		text-align: center;
	}

	.service-list img {
		width: 100%;
		height: auto;
	}

	.service-list div {
		padding: 10px;
	}

	.service-list p {
		margin: 5px 0;
	}
	.el-icon{
		font-size: 30px;
		margin-top: 10px;
	}
</style>