初始化代码

2025-09-03 18:05:48 +08:00
parent e5712b2e97
commit 4414fe517b
70 changed files with 2404 additions and 9 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,11 +1,23 @@
-# ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
+.DS_Store
+node_modules
+/dist
+/situation

-# TODO: where does this rule come from?
-docs/_book
-
-# TODO: where does this rule come from?
-test/
+# local env files
+.env.local
+.env.*.local

+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+package-lock.json
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": false,
+  "htmlWhitespaceSensitivity": "ignore"
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/rangu.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>燃谷科技（南京）有限公司</title>
+    <script src="/nav/index.js"></script>
+    <script src="/config.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "_c/*": ["src/components/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist", "protal"]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,32 @@
+{
+  "name": "portal",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vueuse/core": "^13.8.0",
+    "axios": "^1.11.0",
+    "element-plus": "^2.11.1",
+    "js-cookie": "^3.0.5",
+    "mitt": "^3.0.1",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.5.0",
+    "terser": "^5.43.1",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "fast-glob": "^3.3.3",
+    "postcss-pxtorem": "^6.1.0",
+    "sass": "^1.91.0",
+    "sass-loader": "^16.0.5",
+    "vite": "^7.1.2",
+    "vite-plugin-svg-icons": "^2.0.1"
+  }
+}
--- a/public/config.js
+++ b/public/config.js
@ -0,0 +1,5 @@
+window.GD_KEYS = [
+  '348d477ba83826e46b32d3ff10fffe82',
+  'ed2ea36f8564541569c370254845d93d',
+  'c1da03827f956a215311c0f5229bddc3',
+]
--- a/public/nav/index.js
+++ b/public/nav/index.js
@ -0,0 +1,51 @@
+window.nav = {
+  header: [
+    {id: 1, label: '首页', url: '/', hasChildren: false},
+    {id: 2, label: '产品中心', url: '/product', hasChildren: false},
+    {id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
+    {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
+    {id: 5, label: '关于我们', url: '/about', hasChildren: false},
+    {id: 6, label: '联系我们', url: '/link', hasChildren: false},
+  ],
+  footer: [
+    {
+      id: 1,
+      headerId: 2,
+      label: '产品中心',
+      url: '',
+      hasChildren: true,
+      children: [
+        {id: 1.1, headerId: 2, label: '智能加载服务', url: '/product'},
+        {id: 1.2, headerId: 2, label: '智能加载服务', url: '/product'},
+        {id: 1.3, headerId: 2, label: '智能加载服务', url: '/product'},
+        {id: 1.4, headerId: 2, label: '智能加载服务', url: '/product'},
+      ],
+    },
+    {
+      id: 2,
+      headerId: 3,
+      label: '服务与支撑',
+      url: '/services',
+      hasChildren: false,
+    },
+    {
+      id: 3,
+      headerId: 0,
+      label: '软件下载',
+      url: '/download',
+      hasChildren: false,
+    },
+    {id: 4, headerId: 4, label: '新闻中心', url: '/news', hasChildren: false},
+    {
+      id: 5,
+      headerId: 0,
+      label: '关于燃谷',
+      url: '',
+      hasChildren: true,
+      children: [
+        {id: 5.1, headerId: 5, label: '公司简介', url: '/about'},
+        {id: 5.2, headerId: 6, label: '联系我们', url: '/link'},
+      ],
+    },
+  ],
+}
--- a/public/rangu.svg
+++ b/public/rangu.svg
@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">  <image id="image0" width="72" height="72" x="0" y="0"
+    xlink:href="data:image/png;base64,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" />
+</svg>
--- a/public/static/images/footer/QR_code.png
+++ b/public/static/images/footer/QR_code.png
--- a/public/static/images/footer/logo.png
+++ b/public/static/images/footer/logo.png
--- a/public/static/images/footer/logo_label_CN.png
+++ b/public/static/images/footer/logo_label_CN.png
--- a/public/static/images/footer/logo_lable_EN.png
+++ b/public/static/images/footer/logo_lable_EN.png
--- a/public/static/images/footer/mark.png
+++ b/public/static/images/footer/mark.png
--- a/public/static/images/header/logo.png
+++ b/public/static/images/header/logo.png
--- a/public/static/images/main/1.png
+++ b/public/static/images/main/1.png
--- a/public/static/images/main/10.png
+++ b/public/static/images/main/10.png
--- a/public/static/images/main/11.png
+++ b/public/static/images/main/11.png
--- a/public/static/images/main/12.png
+++ b/public/static/images/main/12.png
--- a/public/static/images/main/13.png
+++ b/public/static/images/main/13.png
--- a/public/static/images/main/14.png
+++ b/public/static/images/main/14.png
--- a/public/static/images/main/15.png
+++ b/public/static/images/main/15.png
--- a/public/static/images/main/16.png
+++ b/public/static/images/main/16.png
--- a/public/static/images/main/17.png
+++ b/public/static/images/main/17.png
--- a/public/static/images/main/18.png
+++ b/public/static/images/main/18.png
--- a/public/static/images/main/19.png
+++ b/public/static/images/main/19.png
--- a/public/static/images/main/2.png
+++ b/public/static/images/main/2.png
--- a/public/static/images/main/20.png
+++ b/public/static/images/main/20.png
--- a/public/static/images/main/21.png
+++ b/public/static/images/main/21.png
--- a/public/static/images/main/3.png
+++ b/public/static/images/main/3.png
--- a/public/static/images/main/4.png
+++ b/public/static/images/main/4.png
--- a/public/static/images/main/5.png
+++ b/public/static/images/main/5.png
--- a/public/static/images/main/6.png
+++ b/public/static/images/main/6.png
--- a/public/static/images/main/7.png
+++ b/public/static/images/main/7.png
--- a/public/static/images/main/8.png
+++ b/public/static/images/main/8.png
--- a/public/static/images/main/9.png
+++ b/public/static/images/main/9.png
--- a/public/static/images/main/banner.png
+++ b/public/static/images/main/banner.png
--- a/src/api/device.js
+++ b/src/api/device.js
@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 设备设置
+export function deviceSet(data) {
+  return request({
+    url: '/rangu/rid/setting',
+    method: 'post',
+    data,
+  })
+}
+
+// 设备设置
+export function deviceGet(params) {
+  return request({
+    url: '/rangu/rid/getting',
+    method: 'get',
+    params,
+  })
+}
--- a/src/assets/font/HanYiDaHeiJian.ttf
+++ b/src/assets/font/HanYiDaHeiJian.ttf
--- a/src/assets/font/HanYiZhongHeiJian.ttf
+++ b/src/assets/font/HanYiZhongHeiJian.ttf
--- a/src/assets/font/PingFang
+++ b/src/assets/font/PingFang
--- a/src/assets/styles/font.scss
+++ b/src/assets/styles/font.scss
@ -0,0 +1,14 @@
+@font-face {
+  font-family: 'PingFang SC';
+  src: url('../font/PingFang SC.ttf');
+}
+
+@font-face {
+  font-family: 'HYDaHeiJ';
+  src: url('../font/HanYiDaHeiJian.ttf');
+}
+
+@font-face {
+  font-family: 'HYZhongHeiJ';
+  src: url('../font/HanYiZhongHeiJian.ttf');
+}
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -0,0 +1,49 @@
+@use './variable.scss';
+@use './font.scss';
+
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  user-select: none;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+body {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.placeholder {
+  width: 100%;
+  height: 600px;
+  background-color: #d9d9d9;
+  font-size: 40px;
+}
+.page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.flex {
+  display: flex;
+}
+.j-s {
+  justify-content: space-between;
+}
+.j-a {
+  justify-content: space-around;
+}
+.j-c {
+  justify-content: center;
+}
+.a-c {
+  align-items: center;
+}
+.column {
+  flex-direction: column;
+}
+.wrap {
+  flex-wrap: wrap;
+}
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@ -0,0 +1,7 @@
+//项目提供scss全局变量
+$bg_color: #081314;
+
+$white: #ffffff;
+$black: #000000;
+
+$border: 2px solid red;
--- a/src/components/icon/svgIcon.vue
+++ b/src/components/icon/svgIcon.vue
@ -0,0 +1,32 @@
+<!-- 
+    使用：<icon-svg name="icon-微信" class="icon" /> 
+-->
+
+<script setup >
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  className: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <svg :class="className" aria-hidden="true">
+    <use :xlink:href="`#${name}`" />
+  </svg>
+</template>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  vertical-align: middle;
+  overflow: hidden;
+}
+</style>
--- a/src/components/swiper/index.vue
+++ b/src/components/swiper/index.vue
@ -0,0 +1,342 @@
+<script setup>
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  getCurrentInstance,
+  onUnmounted,
+} from 'vue'
+
+/* -------------------- 组件接口定义 -------------------- */
+const currentPage = defineModel({type: [Number, String], default: 1})
+
+const props = defineProps({
+  id: {type: String, required: true},
+  title: {type: String, default: ''},
+  data: {type: Array, default: () => [1]},
+  pageSize: {type: [Number, String], default: 1},
+  showDot: {type: Boolean, default: true},
+  showPagination: {type: Boolean, default: true},
+  showHover: {type: Boolean, default: true},
+  autoPlay: {type: Boolean, default: false},
+  transitionDuration: {type: Number, default: 300},
+  sourceWidth: {type: Number, default: 276},
+  sourceHeight: {type: Number, default: 355},
+  sourceGap: {type: Number, default: 20},
+})
+
+const emit = defineEmits(['page-change', 'item-click', 'item-hover'])
+
+/* -------------------- 响应式变量 -------------------- */
+const instance = getCurrentInstance()
+const $fontSize = instance.appContext.config.globalProperties.$fontSize
+const trackRef = ref(null)
+let autoPlayTimer = null
+
+/* -------------------- 计算属性 -------------------- */
+const itemWidth = computed(() => $fontSize(props.sourceWidth))
+const itemHeight = computed(() => $fontSize(props.sourceHeight))
+const itemGap = computed(() => $fontSize(props.sourceGap))
+const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
+const viewPortWidth = computed(
+  () =>
+    props.pageSize * itemWidth.value +
+    (props.pageSize - 1) * itemGap.value +
+    'px'
+)
+const trackWidth = computed(
+  () => props.data.length * itemTotalWidth.value - itemGap.value + 'px'
+)
+const totalPages = computed(() => props.data.length - props.pageSize + 1)
+
+/* -------------------- 方法 -------------------- */
+/**
+ * 执行平移动画
+ * @param {number} page - 目标页码
+ */
+const translate = (page) => {
+  if (!trackRef.value) return
+  trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
+  trackRef.value.style.transform = `translateX(-${
+    itemTotalWidth.value * (page - 1)
+  }px)`
+}
+
+/**
+ * 切换到指定页码
+ * @param {number} page - 目标页码
+ */
+const goToPage = (page) => {
+  console.log('page===>', page)
+  currentPage.value = Number(page)
+  console.log('currentPage.value===>', currentPage.value, page)
+}
+
+/**
+ * 切换到下一页，循环播放
+ */
+const nextPage = () => {
+  const nextPage =
+    currentPage.value < totalPages.value ? currentPage.value + 1 : 1
+  goToPage(nextPage)
+}
+
+/**
+ * 切换到上一页，循环播放
+ */
+const prevPage = () => {
+  const prevPage =
+    currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
+  goToPage(prevPage)
+}
+
+/**
+ * 处理项目点击事件
+ * @param {Object} item - 项目数据
+ * @param {number} index - 项目索引
+ */
+const handleItemClick = (item, index) => {
+  emit('item-click', item, index)
+}
+
+/**
+ * 处理项目悬停事件
+ * @param {Object} item - 项目数据
+ * @param {number} index - 项目索引
+ */
+const handleItemHover = (item, index) => {
+  clearInterval(autoPlayTimer)
+  autoPlayTimer = null
+  emit('item-hover', item, index)
+}
+
+/**
+ * 处理项目鼠标移出事件
+ * @param {Object} item - 项目数据
+ * @param {number} index - 项目索引
+ */
+const handleItemHoverLeave = () => {
+  startAutoPlay()
+}
+
+/**
+ * 启动自动播放
+ */
+const startAutoPlay = () => {
+  if (!props.autoPlay) return
+  stopAutoPlay()
+  autoPlayTimer = setInterval(nextPage, 3000)
+}
+
+/**
+ * 停止自动播放
+ */
+const stopAutoPlay = () => {
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer)
+    autoPlayTimer = null
+  }
+}
+
+/* -------------------- 监听器 -------------------- */
+// 监听页码变化，执行平移动画
+watch(
+  currentPage,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      nextTick(() => translate(newVal))
+    }
+  },
+  {immediate: true}
+)
+
+// 监听自动播放设置变化
+watch(
+  () => props.autoPlay,
+  (autoPlay) => {
+    autoPlay ? startAutoPlay() : stopAutoPlay()
+  },
+  {immediate: true}
+)
+
+// 监听数据变化，重置到第一页
+watch(
+  () => props.data.length,
+  (newLen, oldLen) => {
+    if (newLen !== oldLen && currentPage.value !== 1) {
+      currentPage.value = 1
+    }
+  }
+)
+
+// 组件卸载时清理定时器
+onUnmounted(stopAutoPlay)
+</script>
+
+<template>
+  <section :id="id" class="generic-carousel">
+    <!-- 标题 -->
+    <h2 v-if="title" class="carousel-title">{{ title }}</h2>
+
+    <!-- 分页指示器 -->
+    <div v-if="showDot" class="carousel-pagination">
+      <button
+        v-for="page in totalPages"
+        :key="page"
+        :class="['pagination-dot', {'is-active': page === currentPage}]"
+        @click="goToPage(page)"
+        :aria-label="`切换到第${page}页`"
+      />
+    </div>
+
+    <!-- 导航按钮 -->
+    <div
+      v-if="showPagination && totalPages > 1"
+      class="carousel-navigation flex j-s"
+    >
+      <button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">
+        &lt;
+      </button>
+      <button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">
+        &gt;
+      </button>
+    </div>
+
+    <!-- 轮播内容区域 -->
+    <div class="carousel-content">
+      <div class="carousel-viewport" :style="{width: viewPortWidth}">
+        <div
+          ref="trackRef"
+          class="carousel-track"
+          :class="{'carousel-track-hover': showHover}"
+          :style="{width: trackWidth}"
+        >
+          <div
+            v-for="(item, index) in data"
+            :key="index"
+            class="carousel-item"
+            :class="{'carousel-item-hover': showHover}"
+            :style="{
+              width: itemWidth + 'px',
+              height: itemHeight + 'px',
+              marginRight: index < data.length - 1 ? itemGap + 'px' : '0',
+            }"
+            @click="handleItemClick(item, index)"
+            @mouseenter="handleItemHover(item, index)"
+            @mouseleave="handleItemHoverLeave(item, index)"
+          >
+            <slot
+              :item="item"
+              :index="index"
+              :isActive="currentPage === Math.ceil((index + 1) / pageSize)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.generic-carousel {
+  padding: 32px 0;
+  text-align: center;
+  position: relative;
+
+  .carousel-title {
+    font-family: 'PingFang SC';
+    font-weight: 600;
+    font-size: 38px;
+    color: #333;
+  }
+
+  .carousel-pagination {
+    width: 90px;
+    height: 5px;
+    margin: 20px auto 30px;
+    display: flex;
+
+    .pagination-dot {
+      flex: 1;
+      height: 100%;
+      background: #d9d9d9;
+      border: none;
+      cursor: pointer;
+      transition: background 0.3s ease;
+
+      &.is-active {
+        background: #0389ff;
+      }
+    }
+  }
+
+  .carousel-navigation {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    padding: 0 50px;
+    z-index: 10;
+    pointer-events: none;
+
+    .nav-btn {
+      pointer-events: auto;
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
+      color: #333;
+      font-size: 20px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+      &:hover {
+        background: #0389ff;
+        color: white;
+      }
+    }
+  }
+}
+
+.carousel-content {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-viewport {
+  overflow: hidden;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.3s ease;
+  will-change: transform;
+  padding-top: 20px;
+
+  &-hover {
+    padding-top: 50px;
+  }
+}
+
+.carousel-item {
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &-hover {
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-50px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+</style>
--- a/src/home.vue
+++ b/src/home.vue
@ -0,0 +1,37 @@
+<script setup>
+import Header from './views/layout/pc/header/index.vue'
+import Footer from './views/layout/pc/footer/index.vue'
+</script>
+
+<template>
+  <div id="app">
+    <Header id="header" />
+    <router-view id="main" />
+    <Footer id="footer" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  #header {
+    width: 100%;
+    height: 100px;
+    position: fixed;
+    z-index: 99;
+  }
+  #main {
+    margin-top: 100px;
+    width: 100%;
+    flex: 1;
+    background-color: $white;
+  }
+  #footer {
+    width: 100%;
+    height: 681px;
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,43 @@
+import {createApp} from 'vue'
+import App from './home.vue'
+import router from './router/index'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import mitt from 'mitt'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+import {createPinia} from 'pinia'
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+// ======================  样式  ======================
+import 'element-plus/dist/index.css'
+import '@/assets/styles/index.scss'
+
+// ======================  工具和组件  ======================
+import {initRem, fontSize} from '@/utils/rem'
+import IconSvg from '_c/icon/svgIcon.vue'
+
+// SVG图标注册
+import 'virtual:svg-icons-register'
+
+// 初始化rem适配
+initRem()
+
+// 创建事件总线
+const bus = mitt()
+
+// 创建应用实例
+const app = createApp(App)
+
+// 全局属性注册
+app.config.globalProperties.$fontSize = fontSize
+app.config.globalProperties.$bus = bus
+
+// 全局组件注册
+app.component('icon-svg', IconSvg)
+// 插件使用
+app.use(router).use(pinia).use(ElementPlus, {locale: zhCn})
+
+// 挂载应用
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,71 @@
+import {createWebHashHistory, createRouter} from 'vue-router'
+
+import HomeView from '@/views/homepage/index.vue'
+
+const routes = [
+  {path: '/', component: HomeView},
+  {
+    path: '/product',
+    component: () => import('@/views/product/index.vue'),
+    meta: {
+      title: '产品中心',
+    },
+  },
+  {
+    path: '/services',
+    component: () => import('@/views/services/index.vue'),
+    meta: {
+      title: '服务与支撑',
+    },
+  },
+  {
+    path: '/news',
+    component: () => import('@/views/news/index.vue'),
+    meta: {
+      title: '新闻中心',
+    },
+  },
+  {
+    path: '/news/detail',
+    name: 'Detail',
+    component: () => import('@/views/news/detail.vue'),
+  },
+  {
+    path: '/about',
+    component: () => import('@/views/about/index.vue'),
+    meta: {
+      title: '关于我们',
+    },
+  },
+
+  {
+    path: '/link',
+    component: () => import('@/views/link/index.vue'),
+    meta: {
+      title: '联系我们',
+    },
+  },
+  {
+    path: '/download',
+    component: () => import('@/views/download/index.vue'),
+    meta: {
+      title: '下载中心',
+    },
+  },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+router.afterEach((to, from) => {
+  // 只有路径变化时才滚动到顶部
+  if (to.path !== from.path) {
+    requestAnimationFrame(() => {
+      window.scrollTo({top: 0, behavior: 'instant'})
+    })
+  }
+})
+
+export default router
--- a/src/store/nav.js
+++ b/src/store/nav.js
@ -0,0 +1,26 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+
+export const useNavStore = defineStore(
+  'nav',
+  () => {
+    const navIndex = ref('/')
+
+    const changeNavIndex = (id) => {
+      if (!id) {
+        return
+      } else {
+        navIndex.value = id
+        console.log(localStorage.getItem('nav'))
+      }
+    }
+
+    return {
+      navIndex,
+      changeNavIndex,
+    }
+  },
+  {
+    persist: true,
+  }
+)
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@ -0,0 +1,152 @@
+import Cookies from 'js-cookie'
+
+const SystemType = 'protal'
+
+// Cookie键名常量
+const COOKIE_KEYS = {
+  TOKEN: `${SystemType}-Server-Token`,
+  USER_TENANT_INFO: `${SystemType}-User-TenantInfo`,
+  USER_ID: `${SystemType}-UserId`,
+  LOGIN_TOKEN: `${SystemType}-Login-Token`,
+  USERNAME: `${SystemType}-Username`,
+  PASSWORD: `${SystemType}-Password`,
+  REMEMBER_ME: `${SystemType}-RememberMe`,
+}
+
+// 默认Cookie选项
+const DEFAULT_COOKIE_OPTIONS = {
+  expires: 30, // 30天过期
+}
+
+// 请求接口token
+export function getToken() {
+  return Cookies.get(COOKIE_KEYS.TOKEN)
+}
+
+export function setToken(token) {
+  return Cookies.set(COOKIE_KEYS.TOKEN, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(COOKIE_KEYS.TOKEN)
+}
+
+// 用户扩展数据
+export function getUserTenantInfo() {
+  return Cookies.get(COOKIE_KEYS.USER_TENANT_INFO)
+}
+
+export function setUserTenantInfo(tenantInfo) {
+  return Cookies.set(COOKIE_KEYS.USER_TENANT_INFO, tenantInfo)
+}
+
+export function removeUserTenantInfo() {
+  return Cookies.remove(COOKIE_KEYS.USER_TENANT_INFO)
+}
+
+// userId缓存
+export function setUserId(userId) {
+  return Cookies.set(COOKIE_KEYS.USER_ID, userId)
+}
+
+export function removeUserId() {
+  return Cookies.remove(COOKIE_KEYS.USER_ID)
+}
+
+// 登陆token缓存
+export function getLoginToken() {
+  return Cookies.get(COOKIE_KEYS.LOGIN_TOKEN)
+}
+
+export function setLoginToken(token) {
+  return Cookies.set(COOKIE_KEYS.LOGIN_TOKEN, token)
+}
+
+export function removeLoginToken() {
+  return Cookies.remove(COOKIE_KEYS.LOGIN_TOKEN)
+}
+
+// 用户账号密码缓存
+export function getUsernameToken() {
+  return Cookies.get(COOKIE_KEYS.USERNAME)
+}
+
+export function setUsernameToken(token) {
+  return Cookies.set(COOKIE_KEYS.USERNAME, token, DEFAULT_COOKIE_OPTIONS)
+}
+
+export function removeUsernameToken() {
+  return Cookies.remove(COOKIE_KEYS.USERNAME)
+}
+
+export function getPasswordToken() {
+  return Cookies.get(COOKIE_KEYS.PASSWORD)
+}
+
+export function setPasswordToken(token) {
+  return Cookies.set(COOKIE_KEYS.PASSWORD, token, DEFAULT_COOKIE_OPTIONS)
+}
+
+export function removePasswordToken() {
+  return Cookies.remove(COOKIE_KEYS.PASSWORD)
+}
+
+export function getRememberMeToken() {
+  return Cookies.get(COOKIE_KEYS.REMEMBER_ME)
+}
+
+export function setRememberMeToken(token) {
+  return Cookies.set(COOKIE_KEYS.REMEMBER_ME, token, DEFAULT_COOKIE_OPTIONS)
+}
+
+export function removeRememberMeToken() {
+  return Cookies.remove(COOKIE_KEYS.REMEMBER_ME)
+}
+
+// 清空所有用户相关缓存
+export function clearAllUserData() {
+  removeToken()
+  removeUserTenantInfo()
+  removeUserId()
+  removeLoginToken()
+  removeUsernameToken()
+  removePasswordToken()
+  removeRememberMeToken()
+}
+
+// 获取所有用户信息
+export function getAllUserInfo() {
+  return {
+    token: getToken(),
+    userTenantInfo: getUserTenantInfo(),
+    userId: Cookies.get(COOKIE_KEYS.USER_ID),
+    loginToken: getLoginToken(),
+    username: getUsernameToken(),
+    rememberMe: getRememberMeToken(),
+  }
+}
+
+export default {
+  getToken,
+  setToken,
+  removeToken,
+  getUserTenantInfo,
+  setUserTenantInfo,
+  removeUserTenantInfo,
+  setUserId,
+  removeUserId,
+  getLoginToken,
+  setLoginToken,
+  removeLoginToken,
+  getUsernameToken,
+  setUsernameToken,
+  removeUsernameToken,
+  getPasswordToken,
+  setPasswordToken,
+  removePasswordToken,
+  getRememberMeToken,
+  setRememberMeToken,
+  removeRememberMeToken,
+  clearAllUserData,
+  getAllUserInfo,
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -0,0 +1,36 @@
+/**
+ * 根据屏幕宽度自适应计算字体大小（基于1920设计稿）
+ * @param {number} res - 设计稿上的原始尺寸
+ * @returns {number} 自适应后的尺寸
+ */
+export function fontSize(res) {
+  let clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth
+  if (!clientWidth) return
+  let fontSize = clientWidth / 1920
+  return res * fontSize
+}
+
+/**
+ * 生成随机背景色
+ * @param {String} type  'hex' | 'rgb'  输出格式，默认 hex
+ * @returns {String}     '#RRGGBB' 或 'rgb(r,g,b)'
+ * @example randomBgColor()
+ */
+export function randomBgColor(type = 'hex') {
+  if (type === 'rgb') {
+    const r = Math.floor(Math.random() * 256)
+    const g = Math.floor(Math.random() * 256)
+    const b = Math.floor(Math.random() * 256)
+    return `rgb(${r},${g},${b})`
+  }
+  // 默认 hex
+  return (
+    '#' +
+    Math.floor(Math.random() * 0xffffff)
+      .toString(16)
+      .padStart(6, '0')
+  )
+}
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@ -0,0 +1,42 @@
+// rem等比适配配置
+// 基准大小
+const baseSize = 16
+// 设计稿宽度
+const designWidth = 1920
+// 最大缩放比例
+const maxScale = 2
+
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于设计稿宽度的缩放比例
+  const scale = document.documentElement.clientWidth / designWidth
+  // 设置页面根节点字体大小（最高放大比例为maxScale）
+  document.documentElement.style.fontSize =
+    baseSize * Math.min(scale, maxScale) + 'px'
+}
+
+// 根据设计稿尺寸计算实际尺寸
+export function fontSize(res) {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth
+  if (!clientWidth) return res
+  const scale = clientWidth / designWidth
+  return res * Math.min(scale, maxScale)
+}
+
+// 初始化rem配置
+export function initRem() {
+  setRem()
+  // 改变窗口大小时重新设置 rem
+  window.addEventListener('resize', setRem)
+}
+
+// 移除rem监听（可选，用于清理）
+export function removeRemListener() {
+  window.removeEventListener('resize', setRem)
+}
+
+// 自动初始化（如果需要在导入时自动初始化）
+// initRem()
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,134 @@
+/**
+ * axios 封装
+ */
+import axios from 'axios'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import {tansParams} from '@/utils/index'
+import {getToken, removeToken, removeUserTenantInfo} from '@/utils/auth'
+
+// 配置基础URL
+const baseURL = window.config?.baseUrl || 'http://work.rangutech.cn:9131'
+
+// 设置默认请求头
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL,
+  timeout: 10000, // 添加合理的超时时间
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false
+
+    // 添加token到请求头
+    if (getToken() && !isToken) {
+      config.headers.Authorization = `Bearer ${getToken()}`
+    }
+
+    // GET请求参数处理
+    if (config.method?.toLowerCase() === 'get' && config.params) {
+      const urlParams = tansParams(config.params)
+      config.url = `${config.url}?${urlParams}`
+      config.params = {}
+    }
+
+    return config
+  },
+  (error) => {
+    console.error('Request error:', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    const {data, config} = response
+
+    // 处理二进制数据响应
+    if (
+      config.responseType === 'blob' ||
+      config.responseType === 'arraybuffer'
+    ) {
+      return data
+    }
+
+    // 正常响应处理
+    if (response.status === 200) {
+      return data
+    }
+
+    // 异常响应处理
+    return Promise.reject(response)
+  },
+  (error) => {
+    const {config, response, message} = error
+
+    console.error('Response error:', {config, response, message})
+
+    // 处理认证错误
+    if (response && [401, 471, 472].includes(response.status)) {
+      handleAuthError(config, response)
+      return Promise.reject(error)
+    }
+
+    // 处理网络错误
+    handleNetworkError(message)
+
+    return Promise.reject(error)
+  }
+)
+
+/**
+ * 处理认证错误
+ */
+function handleAuthError(config, response) {
+  const excludeUrls = ['/Token/Logout', '/Token/Access']
+
+  if (!excludeUrls.includes(config.url)) {
+    ElMessageBox.confirm(
+      '登录状态已过期，您可以继续留在该页面，或者重新登录',
+      '系统提示',
+      {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        removeToken()
+        removeUserTenantInfo()
+        // 这里需要导入store
+        // store.dispatch('LogOut').then(() => {});
+        window.location.reload() // 简单重载页面
+      })
+      .catch(() => {
+        // 用户取消操作
+      })
+  }
+}
+
+/**
+ * 处理网络错误
+ */
+function handleNetworkError(message) {
+  let errorMsg = message
+
+  if (message === 'Network Error') {
+    errorMsg = '网络连接异常，请检查网络设置'
+  } else if (message.includes('timeout')) {
+    errorMsg = '请求超时，请稍后重试'
+  }
+
+  ElMessage({
+    message: errorMsg,
+    type: 'error',
+    duration: 5 * 1000,
+  })
+}
+
+export default service
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@ -0,0 +1,150 @@
+<script setup>
+import {ref, onMounted, getCurrentInstance} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+const instance = getCurrentInstance()
+const $fontSize = instance.appContext.config.globalProperties.$fontSize
+
+const containerWidth = ref(1300)
+const containerHeight = ref(1500)
+
+const currentPage = ref(1)
+const list = [
+  {id: 1, label: 11, value: 22},
+  {id: 2, label: 33, value: 44},
+  {id: 3, label: 55, value: 66},
+  {id: 4, label: 77, value: 88},
+]
+
+const imgList = [
+  {
+    id: 1,
+    width: 290,
+    height: 188,
+    list: ['main/1.png', 'main/2.png', 'main/3.png', 'main/4.png'],
+  },
+  {
+    id: 2,
+    width: 210,
+    height: 300,
+    list: [
+      'main/5.png',
+      'main/6.png',
+      'main/7.png',
+      'main/8.png',
+      'main/9.png',
+    ],
+  },
+  {
+    id: 3,
+    width: 210,
+    height: 300,
+    list: [
+      'main/10.png',
+      'main/11.png',
+      'main/12.png',
+      'main/13.png',
+      'main/14.png',
+    ],
+  },
+  {
+    id: 4,
+    width: 210,
+    height: 300,
+    list: [
+      'main/15.png',
+      'main/16.png',
+      'main/17.png',
+      'main/18.png',
+      'main/19.png',
+    ],
+  },
+  {
+    id: 5,
+    width: 210,
+    height: 300,
+    list: ['main/20.png', 'main/21.png'],
+  },
+]
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="关于燃谷"
+      v-model="currentPage"
+      :data="list"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item.label }}</h2>
+        </div>
+      </template>
+    </Swiper>
+
+    <Swiper
+      id="one"
+      title="资质证书"
+      v-model="currentPage"
+      :source-width="containerWidth"
+      :source-height="containerHeight"
+      :show-pagination="false"
+      :auto-play="false"
+      :showHover="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="certificate" :class="{active: isActive}">
+          <div
+            v-for="(list, listIdx) in imgList"
+            :index="list.id"
+            :class="[
+              'flex',
+              'j-s',
+              'a-c',
+              'wrap',
+              {'last-row': listIdx === imgList.length - 1},
+            ]"
+          >
+            <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
+              <img
+                :style="{
+                  width: $fontSize(list.width) + 'px',
+                  height: $fontSize(list.height) + 'px',
+                  margin: `5px ${$fontSize(10)}px`,
+                  cursor: 'pointer',
+                }"
+                :src="`./static/images/${img}`"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  --card-width: v-bind(cardWidth) * 1px;
+}
+
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+
+.certificate {
+  width: 100%;
+  height: 100%;
+}
+
+.last-row {
+  justify-content: center !important;
+}
+</style>
--- a/src/views/download/index.vue
+++ b/src/views/download/index.vue
@ -0,0 +1,96 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+
+const list = ref([
+  {id: 1, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
+  {id: 2, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
+  {id: 3, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
+  {id: 4, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
+  {id: 5, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
+  {id: 6, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
+])
+
+const downloadFile = (id) => {
+  console.log('id===>', id)
+}
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="download"
+      title="软件下载"
+      v-model="currentPage"
+      :sourceWidth="1600"
+      :sourceHeight="800"
+      :show-pagination="false"
+      :auto-play="false"
+      :showHover="false"
+    >
+      <template #default>
+        <div class="my-card flex j-s wrap">
+          <div class="card flex j-s" v-for="item in list" :key="item.id">
+            <div class="img">
+              <img :src="`./static/main/${item.imgUrl}`" alt="" />
+            </div>
+            <div class="content">
+              <div class="label">{{ item.label }}</div>
+              <div class="sub-label">{{ item.subLabel }}</div>
+              <div class="download" @click="downloadFile(item.id)">
+                点击下载
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  width: 100%;
+  height: 100%;
+  .card {
+    width: 48%;
+    height: 170px;
+    box-sizing: border-box;
+    .img {
+      width: 550px;
+      height: 100%;
+      background: #d9d9d9;
+    }
+    .content {
+      margin-top: 20px;
+      text-align: left;
+      .label {
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 26px;
+        color: $black;
+        margin-bottom: 20px;
+      }
+      .sub-label {
+        font-family: 'PingFang SC';
+        font-weight: 400;
+        font-size: 16px;
+        color: #999999;
+        margin-bottom: 30px;
+      }
+      .download {
+        font-family: 'PingFang SC';
+        font-weight: 400;
+        font-size: 18px;
+        color: #0389ff;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/homepage/index.vue
+++ b/src/views/homepage/index.vue
@ -0,0 +1,78 @@
+<script setup>
+import Swiper from '@/components/swiper/index.vue'
+
+import {ref, onMounted} from 'vue'
+const currentPage = ref(1)
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="banner">
+      <div class="banner-link"><span>进入演示系统</span></div>
+    </div>
+    <div class="swiper">
+      <Swiper
+        id="home_swiper"
+        title="产品体系"
+        v-model="currentPage"
+        :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+        :page-size="4"
+        :show-pagination="true"
+        :auto-play="true"
+      >
+        <template #default="{item, index, isActive}">
+          <div class="my-card" :class="{active: isActive}">
+            <h2>{{ item }}</h2>
+          </div>
+        </template>
+      </Swiper>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  .banner {
+    width: 100%;
+    height: 800px;
+    position: relative;
+    background-image: url('/static/images/main/banner.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    &-link {
+      width: 174px;
+      height: 48px;
+      line-height: 48px;
+      text-align: center;
+      position: absolute;
+      top: 721px;
+      left: 873px;
+      border: 1px solid #1fe1ff;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      &:hover {
+        transform: scale(1.05);
+      }
+      span {
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 20px;
+        letter-spacing: 0.06em;
+        color: $white;
+      }
+    }
+  }
+
+  .swiper {
+    width: 100%;
+    height: 800px;
+    .my-card {
+      background: #d9d9d9;
+      height: 100%;
+    }
+  }
+}
+</style>
--- a/src/views/layout/pc/footer/components/QRCode.vue
+++ b/src/views/layout/pc/footer/components/QRCode.vue
@ -0,0 +1,33 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="QR-code">
+    <img class="QR-img" :src="`./static/images/footer/QR_code.png`" />
+    <div class="label">企业微信</div>
+    <img class="QR-img item" :src="`./static/images/footer/mark.png`" alt="" />
+    <div class="label">熊雨翔</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.QR-code {
+  width: 100%;
+  height: 100%;
+  background-color: $white;
+  .QR-img {
+    width: 150px;
+    height: 150px;
+  }
+  .label {
+    margin-top: 10px;
+    text-align: center;
+    color: $white;
+  }
+  .item {
+    margin-top: 20px;
+  }
+}
+</style>
--- a/src/views/layout/pc/footer/components/logo.vue
+++ b/src/views/layout/pc/footer/components/logo.vue
@ -0,0 +1,40 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="logo flex column j-s">
+    <img class="logo-img" src="/static/images/footer/logo.png" />
+    <div class="logo-CN">燃谷科技</div>
+    <div class="logo-EN">RANGUTECH</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.logo {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: $white;
+
+  .logo-img {
+    width: 204px;
+    height: 204px;
+  }
+  .logo-CN {
+    font-family: 'HYDaHeiJ';
+    font-weight: 400;
+    font-style: 'normal';
+    font-size: 38px;
+    letter-spacing: 0.1em;
+  }
+  .logo-EN {
+    font-family: 'HYZhongHeiJ';
+    font-weight: 400;
+    font-style: 'normal';
+    font-size: 24px;
+    letter-spacing: 0.23em;
+  }
+}
+</style>
--- a/src/views/layout/pc/footer/components/nav.vue
+++ b/src/views/layout/pc/footer/components/nav.vue
@ -0,0 +1,37 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import NavNode from './navNode.vue'
+import {useNavStore} from '@/store/nav'
+import {useRouter} from 'vue-router'
+const navStore = useNavStore()
+const router = useRouter()
+const footerNav = ref([])
+
+onMounted(() => {
+  footerNav.value = window.nav.footer
+})
+
+const navClick = (url) => {
+  navStore.changeNavIndex(url)
+  router.push(url)
+}
+</script>
+
+<template>
+  <ul class="footer-nav flex j-s">
+    <NavNode
+      v-for="node in footerNav"
+      :key="node.id"
+      :node="node"
+      @nav-click="navClick"
+    />
+  </ul>
+</template>
+
+<style scoped>
+.footer-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+</style>
--- a/src/views/layout/pc/footer/components/navNode.vue
+++ b/src/views/layout/pc/footer/components/navNode.vue
@ -0,0 +1,63 @@
+<script setup>
+defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emits = defineEmits(['navClick'])
+
+const onClick = (url) => emits('navClick', url)
+</script>
+
+<template>
+  <li class="footer-nav__item">
+    <div class="item-label" @click="onClick(node.url)">
+      {{ node.label }}
+    </div>
+
+    <!-- 递归渲染子节点 -->
+    <ul v-if="node.children?.length" class="footer-nav__sub">
+      <NavNode
+        class="sub-item"
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        @nav-click="onClick"
+      />
+    </ul>
+  </li>
+</template>
+
+<style lang="scss" scoped>
+.footer-nav__item {
+  .item-label {
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 24px;
+    color: $white;
+    user-select: auto;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+      -webkit-transform: translateY(-8px);
+      transform: translateY(-8px);
+    }
+  }
+}
+.footer-nav__sub {
+  list-style: none;
+  padding: 0;
+  margin-top: 40px;
+  .sub-item {
+    margin-bottom: 24px;
+    .item-label {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 20px;
+      color: #999999;
+    }
+  }
+}
+</style>
--- a/src/views/layout/pc/footer/index.vue
+++ b/src/views/layout/pc/footer/index.vue
@ -0,0 +1,75 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Logo from './components/logo.vue'
+import Nav from './components/nav.vue'
+import QRCode from './components/QRCode.vue'
+onMounted(() => {})
+
+const toMIIF = () => {
+  window.open('https://beian.miit.gov.cn')
+}
+</script>
+
+<template>
+  <div class="page flex a-c">
+    <!-- logo -->
+    <Logo id="logo" />
+
+    <!-- 内容 -->
+    <Nav id="nav" />
+
+    <!-- 二维码 -->
+    <QRCode id="QR" />
+
+    <div id="MIIT-Filing">
+      <span class="company">
+        Copyright © 2023.Rangu Technology Co.,Ltd. All rights reserved.
+        燃谷科技（南京）有限公司
+      </span>
+      <span class="url" @click="toMIIF">苏ICP备2023030548号</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  background-color: $bg_color;
+  position: relative;
+  #logo {
+    width: 220px;
+    height: 300px;
+    position: absolute;
+    top: 58px;
+    left: 190px;
+  }
+  #nav {
+    width: calc(100% - 410px - 380px);
+    position: absolute;
+    left: 410px;
+    top: 87px;
+    padding: 0 90px 0 55px;
+    box-sizing: border-box;
+  }
+  #QR {
+    width: 150px;
+    height: 150px;
+    position: absolute;
+    top: 87px;
+    right: 180px;
+  }
+  #MIIT-Filing {
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    text-align: center;
+    .company {
+      color: $white;
+    }
+    .url {
+      margin-left: 50px;
+      color: #0056b3;
+      cursor: pointer;
+    }
+  }
+}
+</style>
--- a/src/views/layout/pc/header/index.vue
+++ b/src/views/layout/pc/header/index.vue
@ -0,0 +1,35 @@
+<script setup>
+import Nav from './nav.vue'
+import {ref, onMounted} from 'vue'
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page flex a-c">
+    <div class="logo"></div>
+    <Nav class="nav"></Nav>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  background-color: $bg_color;
+  .logo {
+    background-image: url('/static/images/header/logo.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 173px;
+    height: 72px;
+    position: absolute;
+    left: 160px;
+  }
+
+  .nav {
+    width: 1000px;
+    height: 100px;
+    position: absolute;
+    right: 160px;
+    overflow-y: hidden;
+  }
+}
+</style>
--- a/src/views/layout/pc/header/nav.vue
+++ b/src/views/layout/pc/header/nav.vue
@ -0,0 +1,91 @@
+<script setup>
+import {ref, onMounted, watch, onUnmounted} from 'vue'
+import {useNavStore} from '@/store/nav'
+import {storeToRefs} from 'pinia'
+
+// Store 相关
+const navStore = useNavStore()
+const {navIndex} = storeToRefs(navStore)
+
+// 响应式数据
+const navList = ref([])
+const activeIndex = ref(null)
+
+// 处理导航选择
+const handleSelect = (key) => {
+  navStore.changeNavIndex(key)
+}
+
+// 监听 store 中的 navIndex 变化
+const stopWatch = watch(
+  navIndex,
+  (newValue) => {
+    activeIndex.value = newValue
+  },
+  {
+    immediate: true,
+  }
+)
+
+// 生命周期
+onMounted(() => {
+  navList.value = window.nav.header || []
+})
+
+onUnmounted(() => {
+  stopWatch()
+})
+</script>
+
+<template>
+  <div class="page">
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+      active-text-color="#FFFFFF"
+      text-color="#999999"
+      background-color="$bg_color"
+      router
+    >
+      <el-menu-item
+        v-for="item in navList"
+        :key="item.id"
+        :index="item.url"
+        :class="{'is-active': activeIndex === item.url}"
+      >
+        {{ item.label }}
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 菜单容器样式 */
+.el-menu--horizontal {
+  --el-menu-horizontal-height: 101px;
+}
+
+/* 菜单项基础样式 */
+.el-menu-item {
+  font-family: 'PingFang SC';
+  padding: 0 25px;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0.06em;
+  border-bottom: none !important;
+  transition: border-bottom 0.3s ease;
+
+  /* 激活状态样式 */
+  &.is-active {
+    border-bottom: 6px solid #ffffff !important;
+  }
+
+  /* 悬停效果 */
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+}
+</style>
--- a/src/views/link/index.vue
+++ b/src/views/link/index.vue
@ -0,0 +1,65 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+import Map from './map.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="联系我们"
+      v-model="currentPage"
+      :sourceWidth="1200"
+      :sourceHeight="400"
+      :show-pagination="false"
+      :auto-play="false"
+      :showHover="false"
+    >
+      <template #default>
+        <div class="my-card flex j-s">
+          <div class="title">
+            <div class="label">燃谷科技（南京）有限公司</div>
+            <div class="label">电话：13222013393</div>
+            <div class="label">邮箱：company@rangutech.com</div>
+            <div class="label">地址：江苏省南京市鼓楼区万谷硅巷9F</div>
+          </div>
+          <div class="img">
+            <Map />
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  width: 100%;
+  height: 100%;
+  padding-top: 20px;
+  .title {
+    text-align: left;
+    .label {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 24px;
+      margin-bottom: 20px;
+    }
+    .label:nth-child(1) {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 32px;
+    }
+  }
+  .img {
+    width: 500px;
+    height: 300px;
+  }
+}
+</style>
--- a/src/views/link/map.vue
+++ b/src/views/link/map.vue
@ -0,0 +1,63 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+
+const map = ref(null)
+
+const center = [118.762616, 32.068811]
+
+/* 检测单个 key 能否真正初始化地图 */
+const tryKey = (key) =>
+  new Promise((AMapResolve, AMapReject) => {
+    // 如果之前已经加载过，先清掉
+    if (window.AMap) delete window.AMap
+    const script = document.createElement('script')
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=${key}`
+    script.async = true
+    script.onload = () => {
+      try {
+        const mapInstance = new window.AMap.Map('map', {
+          viewMode: '2D',
+          zoom: 19,
+          center: [118.762616, 32.068811],
+        })
+        AMapResolve({AMap: window.AMap, mapInstance, key})
+      } catch (e) {
+        AMapReject(e)
+      }
+    }
+    script.onerror = AMapReject
+    document.head.appendChild(script)
+  })
+
+/* 顺序尝试，直到成功或全部失败 */
+const initMap = async () => {
+  for (const key of window.GD_KEYS) {
+    try {
+      const {mapInstance} = await tryKey(key)
+      map.value = mapInstance
+      console.log('✅ 成功使用 key:', key)
+      return
+    } catch {
+      console.warn('❌ key 无效:', key)
+    }
+  }
+  console.error('所有 key 均无法加载地图')
+}
+
+const mark = () => {
+  let marker = new AMap.Marker({
+    position: center,
+  })
+
+  map.value.add(marker)
+}
+
+onMounted(async () => {
+  await initMap()
+  mark()
+})
+</script>
+
+<template>
+  <div id="map" class="page"></div>
+</template>
--- a/src/views/news/detail.vue
+++ b/src/views/news/detail.vue
@ -0,0 +1,23 @@
+<script setup>
+import {onMounted} from 'vue'
+import {useRoute} from 'vue-router'
+
+const route = useRoute()
+const id = route.query.id // 就是 /news/123 里的 123
+
+console.log('id===>', id)
+
+onMounted(() => {
+  console.log('id===>', id)
+})
+</script>
+
+<template>
+  <div>
+    <div class="placeholder">
+      {{ id }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@ -0,0 +1,159 @@
+<script setup>
+import {ref, onMounted, getCurrentInstance} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+import {useRouter} from 'vue-router'
+
+const currentPage = ref(1)
+
+const instance = getCurrentInstance()
+const $fontSize = instance.appContext.config.globalProperties.$fontSize
+
+const containerWidth = ref(1700)
+const containerHeight = ref(1400)
+
+const list = [
+  {
+    id: 1,
+    imgUrl: 'main/1.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 2,
+    imgUrl: 'main/2.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 3,
+    imgUrl: 'main/3.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 4,
+    imgUrl: 'main/4.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+]
+
+onMounted(() => {})
+
+let router = useRouter()
+const toDetail = (url) => {
+  router.push({
+    path: '/news/detail',
+    query: {
+      id: url,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="新闻中心"
+      v-model="currentPage"
+      :source-width="containerWidth"
+      :source-height="containerHeight"
+      :show-pagination="false"
+      :auto-play="false"
+      :showHover="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card">
+          <div
+            class="news flex j-s"
+            :class="{active: isActive}"
+            v-for="item in list"
+            :key="item.id"
+            @click="toDetail(item.id)"
+          >
+            <div class="img">
+              <!-- <img :src="`./static/images/${item.imgUrl}`" /> -->
+            </div>
+
+            <div class="content">
+              <div class="label">{{ item.label }}</div>
+              <div class="time">{{ item.time }}</div>
+              <div class="sub-label">{{ item.subLabel }}</div>
+              <div class="text">{{ item.content }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  width: 100%;
+  height: 100%;
+  .news {
+    width: calc(100% - 100px);
+    margin: 20px 50px;
+    overflow-y: hidden;
+    transition: all 0.3s;
+    cursor: pointer;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    &:not(:last-of-type) {
+      margin-bottom: 40px;
+    }
+    &:hover {
+      scale: (1.05);
+    }
+  }
+  .img {
+    width: 428px;
+    height: 278px;
+    background-color: #d9d9d9;
+  }
+  .content {
+    flex: 1;
+    text-align: left;
+    margin-left: 58px;
+    margin-top: 30px;
+    padding-right: 20px;
+    .label {
+      font-family: 'PingFang SC';
+      font-weight: 500;
+      font-size: 20px;
+      color: $black;
+    }
+    .time {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 18px;
+      margin-top: 16px;
+    }
+    .sub-label {
+      margin-top: 16px;
+    }
+    .sub-label,
+    .text {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+    }
+  }
+}
+</style>
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@ -0,0 +1,66 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="产品体系"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="two"
+      title="软件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="three"
+      title="硬件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>
--- a/src/views/services/index.vue
+++ b/src/views/services/index.vue
@ -0,0 +1,66 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="智能加载服务"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="two"
+      title="智能加载服务"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="three"
+      title="智能加载服务"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,59 @@
+import {defineConfig} from 'vite'
+import vue from '@vitejs/plugin-vue'
+// 导入 path
+import path from 'path'
+// pxToRem
+import postCssPxToRem from 'postcss-pxtorem'
+// svg
+import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
+
+export default defineConfig({
+  base: './',
+  build: {
+    outDir: 'protal_dist',
+    // 打包时使用 terser 压缩代码
+    // minify: 'terser',
+    // 是否生成源映射文件，方便调试生产环境代码
+    sourcemap: 'inline',
+  },
+  plugins: [
+    vue(),
+    createSvgIconsPlugin({
+      // 指定 SVG 图标目录（绝对路径）
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
+      // 指定 symbolId 格式
+      symbolId: 'icon-[dir]-[name]',
+      // 自定义插入位置（可选）
+      inject: 'body-last',
+    }),
+  ],
+  resolve: {
+    // 配置别名
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      _c: path.resolve(__dirname, './src/components'),
+    },
+    // 省略扩展名导入
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+  },
+  css: {
+    // scss 全局变量的配置
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/assets/styles/variable.scss" as *;`,
+        api: 'modern-compiler',
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
+    // pxToRem
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          // 1rem = 16px
+          rootValue: 16,
+          propList: ['*'], // 如果想要某些不适用rem，使用!名字即可
+        }),
+      ],
+    },
+  },
+})