|
|
@ -13,7 +13,7 @@
|
|
|
|
<a href=""><li><router-link to="">关于我们</router-link></li></a>
|
|
|
|
<a href=""><li><router-link to="">关于我们</router-link></li></a>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</nav>
|
|
|
|
<div @click="loginToRouter" class="auth">快速登录/注册</div>
|
|
|
|
<div @click="loginToRouter" class="auth">快速登录/注册</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="carousel">
|
|
|
|
<div class="carousel">
|
|
|
|
<div v-for="(item, index) in carouselItems" :key="index" class="carousel-item" :class="{ active: currentIndex === index }">
|
|
|
|
<div v-for="(item, index) in carouselItems" :key="index" class="carousel-item" :class="{ active: currentIndex === index }">
|
|
|
@ -27,15 +27,15 @@
|
|
|
|
<button @click="nextSlide" class="carousel-control next"><i class="fas fa-angle-right"></i></button>
|
|
|
|
<button @click="nextSlide" class="carousel-control next"><i class="fas fa-angle-right"></i></button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
|
|
<div class="main-content">
|
|
|
|
<div class="intro">
|
|
|
|
|
|
|
|
<h1>卓越城市服务</h1>
|
|
|
|
<h1 style="text-align: center;">卓越城市服务</h1>
|
|
|
|
<h2>「批发市场」寄递方案</h2>
|
|
|
|
<h2 style="text-align: center;">「批发市场」寄递方案</h2>
|
|
|
|
<p>满足多重寄递需求灵活高效价更优</p>
|
|
|
|
<p style="text-align: center;">满足多重寄递需求灵活高效价更优</p>
|
|
|
|
<div class="search-section">
|
|
|
|
<div class="search-section">
|
|
|
|
<input type="text" placeholder="您可以输运单号进行查询" class="search-input" />
|
|
|
|
<input type="text" placeholder="您可以输运单号进行查询" class="search-input" />
|
|
|
|
<button class="search-button">马上查单</button>
|
|
|
|
<button class="search-button">马上查单</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="services-grid">
|
|
|
|
<div class="services-grid">
|
|
|
|
<div class="service-item">
|
|
|
|
<div class="service-item">
|
|
|
|
<img src="/vite.svg" alt="服务图片" />
|
|
|
|
<img src="/vite.svg" alt="服务图片" />
|
|
|
@ -59,12 +59,12 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="additional-services">
|
|
|
|
<div class="additional-services">
|
|
|
|
<h3>卓越特快</h3>
|
|
|
|
<h3 style="text-align: center;" >卓越特快</h3>
|
|
|
|
<p>卓越致力于成为连接亚洲与世界的全球领先物流企业。未来,顺丰将继续稳固国内市场领导地位,持续扩大在亚洲和全球市场影响力,携手客户共同成长,共创价值</p>
|
|
|
|
<p>卓越致力于成为连接亚洲与世界的全球领先物流企业。未来,顺丰将继续稳固国内市场领导地位,持续扩大在亚洲和全球市场影响力,携手客户共同成长,共创价值</p>
|
|
|
|
<div class="customer-service">
|
|
|
|
<div class="customer-service">
|
|
|
|
<h4 class="contact-title">联系客服</h4>
|
|
|
|
<h4 class="contact-title" style="text-align: center;">联系客服</h4>
|
|
|
|
<p>整车直达</p>
|
|
|
|
<p style="text-align: center;">整车直达</p>
|
|
|
|
<p>满足客户一辆或多辆整车发货需求的定制的整车直达产品</p>
|
|
|
|
<p style="text-align: center;">满足客户一辆或多辆整车发货需求的定制的整车直达产品</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -80,7 +80,7 @@
|
|
|
|
<h4>联系我们</h4>
|
|
|
|
<h4>联系我们</h4>
|
|
|
|
<p>电话:123-456-7890</p>
|
|
|
|
<p>电话:123-456-7890</p>
|
|
|
|
<p>邮箱:info@sf-express.com</p>
|
|
|
|
<p>邮箱:info@sf-express.com</p>
|
|
|
|
<p>地址:中国广东省深圳市</p>
|
|
|
|
<p>地址:中国福建省福州市</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
|
|
<div class="footer-section">
|
|
|
|
<h4>关注我们</h4>
|
|
|
|
<h4>关注我们</h4>
|
|
|
@ -191,6 +191,9 @@ nav ul li a:hover {
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
height: 400px;
|
|
|
|
height: 400px;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.carousel-item {
|
|
|
|
.carousel-item {
|
|
|
@ -200,6 +203,7 @@ nav ul li a:hover {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: none;
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
transition: transform 0.5s ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.carousel-item.active {
|
|
|
|
.carousel-item.active {
|
|
|
@ -210,6 +214,7 @@ nav ul li a:hover {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.carousel-caption {
|
|
|
|
.carousel-caption {
|
|
|
|