delivery/frontend/src/View/Home.vue

<template>
  <div class="sf-city-services">
    <div class="header">
      <div class="logo">Z-Y</div>
      <nav>
        <ul>
          <a href=""><li><router-link to="">首页</router-link></li></a>
          <a href=""><li><router-link to="">物流服务</router-link></li></a>
          <a href=""><li><router-link to="">智慧科技</router-link></li></a>
          <a href=""><li><router-link to="">服务支持</router-link></li></a>
          <a href=""><li><router-link to="">可持续发展</router-link></li></a>
          <a href=""><li><router-link to="">投资者关系</router-link></li></a>
          <a href=""><li><router-link to="">关于我们</router-link></li></a>
        </ul>
      </nav>
      <div @click="loginToRouter" class="auth">快速登录/注册</div>
    </div>
    <div class="carousel">
      <div v-for="(item, index) in carouselItems" :key="index" class="carousel-item" :class="{ active: currentIndex === index }">
        <img :src="item.image" alt="轮播图" />
        <div class="carousel-caption">
          <h2>{{ item.title }}</h2>
          <p>{{ item.description }}</p>
        </div>
      </div>
      <button @click="prevSlide" class="carousel-control prev"><i class="fas fa-angle-left"></i></button>
      <button @click="nextSlide" class="carousel-control next"><i class="fas fa-angle-right"></i></button>
    </div>
    <div class="main-content">

        <h1  style="text-align: center;">卓越城市服务</h1>
        <h2  style="text-align: center;">「批发市场」寄递方案</h2>
        <p  style="text-align: center;">满足多重寄递需求灵活高效价更优</p>
      <el-form class="search-section"  ref="form">
          <input type="text" placeholder="您可以输运单号进行查询" v-model="expressForm.expressid" class="search-input" />
          <button class="search-button" @click="findExpress">马上查单</button>
      </el-form>

      <div class="services-grid">
        <div class="service-item">
          <img src="/vite.svg" alt="服务图片" />
          <h3>快递服务</h3>
          <p>快速、安全、可靠</p>
        </div>
        <div class="service-item">
          <img src="/vite.svg" alt="服务图片" />
          <h3>快运服务</h3>
          <p>大件物品运输专家</p>
        </div>
        <div class="service-item">
          <img src="/vite.svg" alt="服务图片" />
          <h3>冷运服务</h3>
          <p>全程冷链，新鲜保障</p>
        </div>
        <div class="service-item">
          <img src="/vite.svg" alt="服务图片" />
          <h3>医药服务</h3>
          <p>专业医药物流解决方案</p>
        </div>
      </div>
      <div class="additional-services">
        <h3 style="text-align: center;" >卓越特快</h3>
        <p>卓越致力于成为连接亚洲与世界的全球领先物流企业。未来，顺丰将继续稳固国内市场领导地位，持续扩大在亚洲和全球市场影响力，携手客户共同成长，共创价值</p>
        <div class="customer-service">
          <h4 class="contact-title" style="text-align: center;">联系客服</h4>
          <p style="text-align: center;">整车直达</p>
          <p style="text-align: center;">满足客户一辆或多辆整车发货需求的定制的整车直达产品</p>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h4>关于卓越</h4>
          <a href=""><p>公司简介</p></a>
          <a href=""><p>企业文化</p></a>
          <a href=""><p>发展历程</p></a>
        </div>
        <div class="footer-section">
          <h4>联系我们</h4>
          <p>电话：123-456-7890</p>
          <p>邮箱：info@sf-express.com</p>
          <p>地址：中国福建省福州市</p>
        </div>
        <div class="footer-section">
          <h4>关注我们</h4>
          <p>QQ：2399742113</p>
          <p>微博：卓越集团</p>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 卓越速运有限公司. 版权所有。</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {ElMessage} from "element-plus";
const router = useRouter();
const form = ref(null)

const currentIndex = ref(0);
const carouselItems = ref([
  { image: 'lun1.png', title: '卓越速运，值得信赖', description: '快速、安全、专业的物流服务' },
  { image: 'lun2.png', title: '智慧科技，创新未来', description: '领先的物流技术和解决方案' }
]);
const expressForm = ref({
  expressid: "",
});
const findExpress = async () => {
  const valid = await form.value.validate();
  if (valid) {
    const result = await expressFindService(expressForm.value);
    ElMessage.success(result.message ? result.message : "查询成功");
  }
};
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % carouselItems.value.length;
};

const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + carouselItems.value.length) % carouselItems.value.length;
};

const loginToRouter = () => {
  router.push({ name: "Login" });
};

onMounted(() => {
  setInterval(() => {
    nextSlide();
  }, 5000); // 每5秒自动切换一次
});
</script>

<style scoped>
.sf-city-services {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: cyan;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-left: 20px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin-right: auto;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #fff;
  opacity: 0.8;
}

.auth {
  font-size: 14px;
  color: #fff;
  margin-right: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.auth:hover {
  color: #fff;
  opacity: 0.8;
}

.carousel {
  position: relative;
  overflow: hidden;
  height: 400px;
  width: 100%;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transition: transform 0.5s ease;
}

.carousel-item.active {
  display: block;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 4px;
}

.carousel-caption h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.carousel-caption p {
  font-size: 18px;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.carousel-control:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-control i {
  font-size: 24px;
}

.main-content {
  max-width: 1200px;
  margin: 40px auto;
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
}

.intro h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
}

.intro h2 {
  font-size: 24px;
  color: #555;
  margin-bottom: 20px;
}

.intro p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 40px;
}

.search-section {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
  align-items: center;
}

.search-input {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex-grow: 1;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #0073e5;
  outline: none;
}

.search-button {
  padding: 15px 20px;
  background-color: #0073e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #0056b3;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.service-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.service-item img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 20px;
}

.service-item h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.service-item p {
  color: #666;
  line-height: 1.6;
}

.additional-services {
  background-color: #e5e5e5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.customer-service h4.contact-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.customer-service h4.contact-title:hover {
  color: #0073e5;
  text-decoration: underline;
  cursor: pointer;
}

.customer-service p {
  color: #666;
  line-height: 1.6;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 40px 0;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.footer-section {
  flex: 1;
  margin: 10px;
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-section p {
  color: #ccc;
  margin-bottom: 5px;
}

.social-icon {
  font-size: 24px;
  color: #fff;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: #0073e5;
}

.footer-bottom {
  margin-top: 20px;
  font-size: 14px;
}
</style>