fix：网站首页开发

src/components/footer.vue

@@ -2,7 +2,7 @@
 <template>
   <a-layout-footer class="footer">
     <div class="footer-content">
-      <div class="footer-links">
+      <!-- <div class="footer-links">
         <a href="#">关于我们</a>
         <a href="#">联系我们</a>
         <a href="#">帮助中心</a>
@@ -10,27 +10,253 @@
       </div>
       <div class="copyright">
         <p>© 2025 我的网站. 保留所有权利.</p>
+      </div> -->
+      <div class="up">
+        <!-- 产品和服务 -->
+        <div class="product-services">
+          <h4>产品和服务</h4>
+          <div class="line-container">
+            <div class="blue-overlay"></div>
+          </div>
+          <ul>
+            <li v-for="item in proServiceItems" :key="item?.key">{{ item.label }}</li>
+          </ul>
+        </div>
+        <!-- 解决方案 -->
+        <div class="solution">
+          <h4>解决方案</h4>
+          <div class="line-container">
+            <div class="blue-overlay"></div>
+          </div>
+          <ul>
+            <li v-for="item in solutionItems" :key="item?.key">{{ item.label }}</li>
+          </ul>
+        </div>
+        <!-- 公司地址等 -->
+        <div class="companyInfo">
+          <img src="../assets/images/logo.png" alt="logo" class="logo" />
+          <div class="address">
+            <div class="lt">
+              <img src="../assets/images/ercode.png" alt="ercode" />
+              <span>山东东方低碳公众号</span>
+            </div>
+            <div class="rt">
+              <p>地址：山东省济南市历下区大东路9号T3塔楼科创金融中心9楼</p>
+              <p>电话：0531-88023101</p>
+              <p>市场合作：Marketing@eastloca.com</p>
+              <p>技术支持：Support@eastloca.com</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="down">
+        <p>© 2025 山东东方低碳的网站. 保留所有权利.</p>
       </div>
     </div>
   </a-layout-footer>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+// 产品和服务
+const proServiceItems = ref([
+  { key: '1', label: '智慧能碳平台' },
+  { key: '2', label: '城市级能碳平台' },
+  { key: '3', label: 'FMCS智能工业平台' },
+  { key: '4', label: '全生命周期产品碳足迹平台' },
+  { key: '5', label: '工业锅炉节能器' },
+  { key: '6', label: 'ESG绿色认证咨询' }
+])
+// 解决方案
+const solutionItems = ref([
+  { key: '1', label: '商业综合体' },
+  { key: '2', label: '交通枢纽' },
+  { key: '3', label: '绿色酒店' },
+  { key: '4', label: '源网荷储' },
+  { key: '5', label: '绿色工厂' },
+  { key: '6', label: '数据中心' },
+  { key: '7', label: '智慧学校' },
+  { key: '8', label: '区域能源站' },
+  { key: '9', label: '智慧医院' },
+  { key: '10', label: '冷链物流' }
+])
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .footer {
-  background: #f0f2f5;
   padding: 24px 0;
   margin-top: auto;
+  background: rgba(35, 54, 67, 1);
+  height: 450px;
 }
 
 .footer-content {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 24px;
-  text-align: center;
+  color: #ffffff;
 }
+
+.up {
+  display: flex;
+  padding: 64px 0 57px;
+  justify-content: space-between;
+
+  .product-services,
+  .solution {
+    h4 {
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .line-container {
+      width: 130px;
+      height: 1px;
+      background-color: rgba(255, 255, 255, 0.4);
+      /* 灰色 */
+      position: relative;
+      margin-bottom: 13px;
+    }
+
+    .blue-overlay {
+      position: absolute;
+      left: 0;
+      top: -1px;
+      width: 50px;
+      height: 2px;
+      background-color: rgba(39, 120, 255, 1);
+      /* 蓝色 */
+    }
+
+    ul {
+      display: flex;
+      padding-left: 0;
+      margin-top: 13px;
+
+      li {
+        font-size: 14px;
+        font-weight: 400;
+        padding-bottom: 19px;
+      }
+    }
+  }
+
+  //产品与服务
+  .product-services {
+    ul {
+      flex-direction: column;
+    }
+  }
+
+  //解决方案
+  .solution {
+    width: 249px;
+
+    .line-container {
+      width: 219px;
+    }
+
+    ul {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr)); // 两列等宽
+      gap: 2px 15px; // 行间距8px，列间距15px
+      width: 100%;
+
+      li {
+        font-size: 14px;
+        font-weight: 400;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  // 公司地址等
+  .companyInfo {
+    .logo {
+      width: 110px;
+      height: 44px;
+    }
+
+    .address {
+      display: flex;
+      margin-top: 22px;
+
+      .lt {
+        span {
+          display: block;
+          font-size: 15px;
+          font-weight: 400;
+          line-height: 20px;
+          padding-top: 13px;
+        }
+      }
+
+      .rt {
+        padding-left: 20px;
+
+        p {
+          font-size: 17px;
+          font-weight: 400;
+          line-height: 22px;
+        }
+      }
+    }
+  }
+
+}
+
+//版权
+.down {
+  font-size: 14px;
+  font-weight: 400;
+  padding: 27px 0 24px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+ul,
+li {
+  list-style: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 .footer-links a {
   margin: 0 12px;

src/components/header.vue

@@ -3,41 +3,38 @@
   <a-layout-header class="header">
     <div class="header-content">
       <div class="logo">
-        <h2>东方低碳</h2>
+        <img src="../assets/images/logo.png" alt="logo" />
       </div>
       <div class="nav-menu">
-        <a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" @click="handleMenuClick">
-          <a-menu-item v-for="item in menuItems" :key="item.key">
+        <a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" @click="handleMenuClick"
+          :class="['main-menu', { 'home-page': isHomePage }]">
+          <template v-for="item in menuItems" :key="item.key">
+            <!-- 普通菜单项 -->
+            <a-menu-item v-if="!item.children || item.children.length === 0" :key="item.key">
               {{ item.title }}
             </a-menu-item>
-        </a-menu>
-      </div>
-      <!-- <div class="user-info">
-        <a-dropdown>
-          <a class="ant-dropdown-link" @click.prevent>
-            <UserOutlined />
-            用户中心
-          </a>
-          <template #overlay>
-            <a-menu>
-              <a-menu-item>
-                <router-link to="/profile">个人中心</router-link>
-              </a-menu-item>
-              <a-menu-item @click="handleLogout">
-                退出登录
-              </a-menu-item>
-            </a-menu>
+
+            <!-- 带下拉菜单的菜单项 -->
+            <a-sub-menu v-else :key="item.key" class="subMenu">
+              <template #title>
+                {{ item.title }}
               </template>
-</a-dropdown>
-</div> -->
+              <a-menu-item v-for="child in item.children" :key="child.key" class="subMenuList">
+                {{ child.title }}
+              </a-menu-item>
+            </a-sub-menu>
+          </template>
+        </a-menu>
+        <div class="demo">体验demo</div>
+        <img src="../assets/images/enlog.png" alt="enlog" class="enlogImg" />
+      </div>
     </div>
   </a-layout-header>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { UserOutlined } from '@ant-design/icons-vue'
 import { useUserStore } from '@/stores/user'
 
 const router = useRouter()
@@ -45,39 +42,111 @@ const route = useRoute()
 const userStore = useUserStore()
 
 const selectedKeys = ref<string[]>([])
+const isHomePage = ref(false)
+
 const menuItems = ref([
-  { key: 'index', title: '首页', path: '/' },
-  { key: 'news', title: '新闻消息', path: '/news' },
-  { key: 'about', title: '关于我们', path: '/about' },
-  { key: 'profile', title: '个人中心', path: '/profile' }
+  { key: 'index', title: '首页', path: '/index' },
+  { key: 'product', title: '产品', path: '/product' },
+  { key: 'solution', title: '解决方案', path: '/solution' },
+  { key: 'technical', title: '技术支持', path: '/technicalSupport' },
+  {
+    key: 'news',
+    title: '新闻中心',
+    path: '/news',
+    children: [
+      { key: 'news-list', title: '新闻列表', path: '/news/list' },
+      { key: 'news-detail', title: '新闻详情', path: '/news/detail' }
+    ]
+  },
+  {
+    key: 'about',
+    title: '关于我们',
+    path: '/about',
+    children: [
+      { key: 'company', title: '公司简介', path: '/about/company' },
+      { key: 'team', title: '团队介绍', path: '/about/team' },
+      { key: 'history', title: '发展历程', path: '/about/history' }
+    ]
+  },
 ])
 
 const handleMenuClick = ({ key }: { key: string }) => {
-  const menuItem = menuItems.value.find(item => item.key === key)
+  // 查找点击的菜单项（包括子菜单）
+  let menuItem = null
+
+  for (const item of menuItems.value) {
+    if (item.key === key) {
+      menuItem = item
+      break
+    }
+
+    if (item.children) {
+      const child = item.children.find(child => child.key === key)
+      if (child) {
+        menuItem = child
+        break
+      }
+    }
+  }
+
   if (menuItem) {
     router.push(menuItem.path)
   }
 }
 
-const handleLogout = () => {
-  userStore.logout()
-  router.push('/login')
+// 根据当前路由设置选中菜单项
+const updateSelectedMenu = () => {
+  const currentPath = route.path
+  let selectedKey = ''
+
+  // 判断是否为首页
+  isHomePage.value = currentPath === '/index' || currentPath === '/'
+
+  for (const item of menuItems.value) {
+    if (item.path === currentPath) {
+      selectedKey = item.key
+      break
+    }
+
+    if (item.children) {
+      const child = item.children.find(child => child.path === currentPath)
+      if (child) {
+        selectedKey = child.key
+        break
+      }
+    }
+  }
+
+  if (selectedKey) {
+    selectedKeys.value = [selectedKey]
+  }
 }
 
+// 监听路由变化
+watch(() => route.path, () => {
+  updateSelectedMenu()
+})
+
 onMounted(() => {
   // 根据当前路由设置选中菜单项
-  const currentMenu = menuItems.value.find(item => item.path === route.path)
-  if (currentMenu) {
-    selectedKeys.value = [currentMenu.key]
-  }
+  updateSelectedMenu()
 })
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .header {
-  background: #fff;
   padding: 0;
-  box-shadow: 0 2px 8px #f0f1f2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.2);
+  height: 70px;
+
+  &.transparent {
+    background: transparent;
+  }
 }
 
 .header-content {
@@ -86,21 +155,132 @@ onMounted(() => {
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 24px;
-}
+  padding: 0;
 
-.logo h2 {
+  .logo {
+    img {
+      width: 110px;
+      height: 44px;
+    }
+  }
+
+  .nav-menu {
     margin: 0;
-  color: #1890ff;
-}
-
-.nav-menu {
-  flex: 1;
-  margin: 0 24px;
-}
-
-.user-info {
+    background-color: transparent;
     display: flex;
+    justify-content: flex-end;
     align-items: center;
+    flex: 1;
+
+    .main-menu {
+      background-color: transparent;
+      border-bottom: none;
+      font-size: 18px;
+      flex: 1;
+      justify-content: flex-end;
+
+      :deep(.ant-menu-item),
+      :deep(.ant-menu-submenu) {
+        flex: none;
+        margin: 0 10px;
+      }
+
+      // 首页样式 - 白色字体
+      &.home-page {
+        color: #ffffff;
+
+        :deep(.ant-menu-item) {
+          color: #ffffff;
+        }
+
+        :deep(.ant-menu-submenu-title) {
+          color: #ffffff;
+        }
+
+        :deep(.ant-menu-item:hover),
+        :deep(.ant-menu-submenu-title:hover) {
+          color: #ffffff !important;
+        }
+
+        :deep(.ant-menu-item-selected) {
+          color: #ffffff;
+        }
+
+        :deep(.ant-menu-item-selected::after) {
+          border-bottom-color: #ffffff;
+        }
+      }
+
+      // 非首页样式 - 黑色字体，蓝色悬停
+      &:not(.home-page) {
+        color: #000000;
+
+        :deep(.ant-menu-item) {
+          color: #000000;
+        }
+
+        :deep(.ant-menu-submenu-title) {
+          color: #000000;
+        }
+
+        :deep(.ant-menu-item:hover),
+        :deep(.ant-menu-submenu-title:hover) {
+          color: #1890ff !important;
+        }
+
+        :deep(.ant-menu-item-selected) {
+          color: #000000;
+        }
+
+        :deep(.ant-menu-item-selected::after) {
+          border-bottom-color: #000000;
+        }
+      }
+    }
+
+    // :global(.ant-menu-submenu-popup) {
+    //   min-width: 120px !important;
+    // }
+
+    // :global(.ant-menu-submenu-popup .ant-menu) {
+    //   min-width: 120px !important;
+    // }
+
+    :global(.ant-menu-submenu-popup .ant-menu-vertical) {
+      min-width: 100px !important;
+      border-radius: 0;
+    }
+
+    // :global(.ant-menu-submenu-popup .ant-menu-vertical .ant-menu-item) {
+    //   margin: 0 !important;
+    //   padding: 0 20px !important;
+    //   text-align: center !important;
+    //   width: 100% !important;
+    // }
+
+    // :global(.ant-menu-submenu-placement-bottomCenter) {
+    //   top: 100% !important;
+    //   left: 50% !important;
+    //   transform: translateX(-50%) !important;
+    // }
+
+    .demo {
+      border-radius: 4px;
+      background: rgba(5, 89, 233, 1);
+      color: #ffffff;
+      padding: 4px 9px 3px 11px;
+      line-height: 32px;
+      cursor: pointer;
+      margin-left: 20px;
+      font-size: 18px;
+    }
+
+    .enlogImg {
+      width: 23px;
+      height: 23px;
+      margin-left: 13px;
+      cursor: pointer;
+    }
+  }
 }
 </style>

src/views/pc/style/index.less

@@ -0,0 +1,434 @@
+.pc-home {
+  width: 100%;
+  overflow-x: hidden;
+}
+ul,
+li {
+  list-style: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0px;
+}
+
+// banner
+.first-screen {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+
+  .navbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 50px;
+    background: rgba(1, 50, 73, 0.7);
+    backdrop-filter: blur(10px);
+
+    .logo {
+      color: white;
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    .nav-menu {
+      display: flex;
+      list-style: none;
+
+      li {
+        margin-left: 30px;
+
+        a {
+          color: white;
+          text-decoration: none;
+          font-size: 16px;
+          transition: color 0.3s;
+
+          &:hover {
+            color: #40a9ff;
+          }
+        }
+      }
+    }
+  }
+
+  .carousel-wrapper {
+    height: 100%;
+
+    :deep(.ant-carousel) {
+      height: 100%;
+
+      .slick-slider {
+        height: 100%;
+      }
+
+      .slick-list,
+      .slick-track,
+      .slick-slide,
+      .slick-slide>div {
+        height: 100%;
+      }
+    }
+
+    .carousel-item {
+      position: relative;
+      height: 100%;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .carousel-content {
+        position: absolute;
+        top: 40%;
+        left: 10%;
+        transform: translateY(-50%);
+        color: white;
+        z-index: 10;
+        max-width: 900px;
+        text-align: left;
+
+        h1 {
+          font-size: 48px;
+          margin-bottom: 15px;
+          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        }
+
+        p {
+          font-size: 20px;
+          margin-bottom: 20px;
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        .ant-btn {
+          height: 50px;
+          padding: 0 30px;
+          font-size: 18px;
+        }
+        // 第一屏图片标题字体
+        .slideTitle{
+          font-size: 36px;
+        }
+        .slideintro{
+          font-size: 60px!important;
+          line-height: 1.3;
+        }
+        .englishFont{
+          font-family: '思源黑体',Arial, sans-serif;
+          color: rgba(255, 255, 255, 0.6);
+        }
+      }
+    }
+  }
+
+  .scroll-indicator {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    animation: bounce 2s infinite;
+    z-index: 10;
+
+    .anticon {
+      font-size: 20px;
+      color: white;
+    }
+  }
+}
+// 核心产品
+.second-screen {
+  // min-height: 100vh;
+  padding: 93px 0 94px;
+  background: #f8f9fa;
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ //标题 描述样式
+  .content-section {
+    text-align: center;
+    margin-bottom: 60px;
+
+    h2 {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span{
+        font-size: 40px;
+        color: rgba(31, 92, 172, 1);
+        padding-left:16px;
+      }
+    }
+
+    p {
+      font-size: 18px;
+      color: #666;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .core-products{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      li{
+        border-right:1px solid rgba(153, 153, 153, 1);
+        padding:0 15px;
+        color: rgba(153, 153, 153, 1);
+        font-size: 20px;
+        // 动画样式
+      
+      }
+      li:last-child{
+        border-right:none;
+      }
+    }
+  }
+
+  .services-section {
+    // 核心产品上图
+    .serviceList{
+      margin-bottom:16px;
+      .ant-col-12{
+        .service-card{
+          height:224px;
+        }
+      }
+      .ant-col-12:first-child{
+        .service-card{
+          background: url("../../../assets/images/index-pro1.png") no-repeat center;
+        }
+      }
+      .ant-col-12:last-child{
+        .service-card{
+          background: url("../../../assets/images/index-pro2.png") no-repeat center;
+        }
+      }
+    }
+    // 核心产品下图
+    .serviceList2{
+       .ant-col-6{
+        .service-card{
+          height:224px;
+        }
+        &:nth-child(1){
+          .service-card{
+            background: url("../../../assets/images/index-pro3.png") 100% 100% no-repeat;
+            background-size: cover;
+          }
+        }
+        &:nth-child(2){
+          .service-card{
+            background: url("../../../assets/images/index-pro4.png") 100% 100% no-repeat;
+            background-size: cover;
+          }
+        }
+        &:nth-child(3){
+          .service-card{
+            background: url("../../../assets/images/index-pro5.png") 100% 100% no-repeat;
+            background-size: cover;
+          }
+        }
+         &:nth-child(4){
+          .service-card{
+            background: url("../../../assets/images/index-pro6.png") 100% 100% no-repeat;
+            background-size: cover;
+          }
+        }
+
+      }
+    }
+
+    .service-card {
+      background: white;
+      // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s, box-shadow 0.3s;
+
+      &:hover {
+        transform: translateY(-10px);
+        // box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+      }
+
+      h3 {
+        font-size: 22px;
+        color:#ffffff;
+        padding:20px 0 0 20px;
+        margin-block-start:0;
+        margin-block-end:0;
+        cursor: pointer;
+        font-weight: 400;
+      }
+    }
+  }
+}
+// 第三屏：AI+智能节能技术
+.three-screen{
+  min-height: 100vh;
+  margin-bottom:109px;
+  background:url("../../../assets/images/threeSceenbg.png") no-repeat center center;
+  position: relative;
+  background-size: cover;
+  z-index: 1;
+  background-attachment: fixed;//背景图片相对于浏览器窗口固定，不随页面滚动而移动
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+.other-screens {
+  min-height: 100vh;
+  padding: 80px 0;
+  background: white;
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  .news-section {
+    h2 {
+      font-size: 36px;
+      text-align: center;
+      margin-bottom: 40px;
+      color: #013249;
+    }
+
+    .news-list {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+  }
+}
+
+// 动画相关样式
+.animate-fade-in-up {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+
+  &.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &.delay-1 {
+    transition-delay: 0.3s;
+  }
+
+  &.delay-2 {
+    transition-delay: 0.5s;
+  }
+
+  &.delay-3 {
+    transition-delay: 0.8s;
+  }
+  &.delay-4 {
+    transition-delay: 1s;
+  }
+  &.delay-5 {
+    transition-delay: 1.3s;
+  }
+  &.delay-6 {
+    transition-delay: 1.5s;
+  }
+}
+
+.animate-slide-in {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+
+  &.visible {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &.delay-1 {
+    transition-delay: 0.3s;
+  }
+
+  &.delay-2 {
+    transition-delay: 0.6s;
+  }
+}
+
+@keyframes bounce {
+
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0) translateX(-50%);
+  }
+
+  40% {
+    transform: translateY(-20px) translateX(-50%);
+  }
+
+  60% {
+    transform: translateY(-10px) translateX(-50%);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .first-screen {
+    .navbar {
+      padding: 15px 20px;
+
+      .nav-menu {
+        li {
+          margin-left: 15px;
+
+          a {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    .carousel-content {
+      left: 5%;
+      max-width: 90%;
+      text-align: center;
+
+      h1 {
+        font-size: 32px;
+      }
+
+      p {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .second-screen {
+    padding: 50px 0;
+
+    .content-section {
+      h2 {
+        font-size: 28px;
+      }
+
+      p {
+        font-size: 16px;
+      }
+    }
+  }
+}