ct/app/pages/yuxi/index.vue

<template>
  <div class="yuxi-homepage">
    <!-- 导航栏 -->
    <YuxiNavbar/>

    <!-- 轮播图 -->
    <YuxiCarousel/>

    <!-- 物联网解决方案 -->
    <YuxiSolutions/>

    <!-- 多场景应用 -->
    <YuxiApplications/>

    <!-- 软件应用开发 -->
    <YuxiSoftwareDevelopment/>

    <!-- 联网智能硬件 -->
    <YuxiHardware/>

    <!-- 开发资讯 -->
    <YuxiNews/>

    <!-- 页脚 -->
    <YuxiFooter/>
  </div>
</template>

<script lang="ts" setup>
// 页面元数据
// 引入组件
import YuxiNavbar from '~/components/yuxi/Navbar.vue'
import YuxiCarousel from '~/components/index/Carousel.vue'
import YuxiSolutions from '~/components/yuxi/Solutions.vue'
import YuxiApplications from '~/components/yuxi/Applications.vue'
import YuxiSoftwareDevelopment from '~/components/yuxi/SoftwareDevelopment.vue'
import YuxiHardware from '~/components/yuxi/Hardware.vue'
import YuxiNews from '~/components/yuxi/News.vue'
import YuxiFooter from '~/components/yuxi/Footer.vue'

useHead({
  title: '共享APP开发，共享电动车，共享软件系统开发，智能硬件_创特科技',
  meta: [
    {
      name: 'keywords',
      content: '共享app开发，共享电动车，共享软件开发，共享陪护床，共享系统平台开发，共享电单车，共享小程序等共享方案开发'
    },
    {
      name: 'description',
      content: '共享APP开发-创特科技专注于共享陪护床，共享电动车，共享家居电器，共享滑板车，共享电单车等共享软件开发及物联网解决方案'
    },
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1'
    }
  ],
  link: [
    {
      rel: 'shortcut icon',
      href: '/www.yuxiit.com/img/logoIco.ico'
    }
  ]
})
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 页面容器 */
.yuxi-homepage {
  min-height: 100vh;
  background-color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .yuxi-homepage {
    font-size: 14px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out;
}

/* 滚动平滑 */
html {
  scroll-behavior: smooth;
}

/* 链接样式 */
a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 按钮样式 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 网格布局 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-xs-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
}

.col-lg-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
  padding: 0 15px;
}

.col-lg-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 15px;
}

.col-lg-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
  padding: 0 15px;
}

.col-lg-offset-1 {
  margin-left: 8.333333%;
}

.col-lg-offset-2 {
  margin-left: 16.666667%;
}

/* 响应式断点 */
@media (max-width: 1200px) {
  .col-lg-2,
  .col-lg-3,
  .col-lg-8 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-offset-1,
  .col-lg-offset-2 {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .col-lg-2,
  .col-lg-3,
  .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row {
    margin: 0 -10px;
  }

  .col-xs-12,
  .col-lg-2,
  .col-lg-3,
  .col-lg-8 {
    padding: 0 10px;
  }
}

/* 文本对齐 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* 显示/隐藏 */
.hidden-xs {
  display: block;
}

.hidden-sm {
  display: block;
}

.hidden-md {
  display: block;
}

.hidden-lg {
  display: none;
}

@media (max-width: 768px) {
  .hidden-xs {
    display: none;
  }
}

@media (max-width: 992px) {
  .hidden-sm {
    display: none;
  }
}

@media (max-width: 1200px) {
  .hidden-md {
    display: none;
  }
}

@media (min-width: 1200px) {
  .hidden-lg {
    display: block;
  }
}

/* 容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.container-fluid {
  width: 100%;
  padding: 0 15px;
}

/* 工具类 */
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 列表样式 */
.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 图片响应式 */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 间距 */
.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-50 {
  margin-top: 50px;
}

.p-20 {
  padding: 20px;
}

.p-30 {
  padding: 30px;
}

.p-50 {
  padding: 50px;
}
</style>