初始化代码
This commit is contained in:
yiqiuyang
30
.gitignore
vendored
30
.gitignore
vendored
@ -1,11 +1,23 @@
|
|||||||
# ---> Vue
|
.DS_Store
|
||||||
# gitignore template for Vue.js projects
|
node_modules
|
||||||
#
|
/dist
|
||||||
# Recommended template: Node.gitignore
|
/situation
|
||||||
|
|
||||||
# TODO: where does this rule come from?
|
# local env files
|
||||||
docs/_book
|
.env.local
|
||||||
|
.env.*.local
|
||||||
# TODO: where does this rule come from?
|
|
||||||
test/
|
|
||||||
|
|
||||||
|
# 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?
|
||||||
|
|||||||
9
.prettierrc
Normal file
9
.prettierrc
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"bracketSpacing": false,
|
||||||
|
"htmlWhitespaceSensitivity": "ignore"
|
||||||
|
}
|
||||||
15
index.html
Normal file
15
index.html
Normal file
@ -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>
|
||||||
13
jsconfig.json
Normal file
13
jsconfig.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES6",
|
||||||
|
"module": "commonjs",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
"_c/*": ["src/components/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist", "protal"]
|
||||||
|
}
|
||||||
32
package.json
Normal file
32
package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
public/config.js
Normal file
5
public/config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
window.GD_KEYS = [
|
||||||
|
'348d477ba83826e46b32d3ff10fffe82',
|
||||||
|
'ed2ea36f8564541569c370254845d93d',
|
||||||
|
'c1da03827f956a215311c0f5229bddc3',
|
||||||
|
]
|
||||||
51
public/nav/index.js
Normal file
51
public/nav/index.js
Normal file
@ -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'},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
55
public/rangu.svg
Normal file
55
public/rangu.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 4.3 KiB |
BIN
public/static/images/footer/QR_code.png
Normal file
BIN
public/static/images/footer/QR_code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/static/images/footer/logo.png
Normal file
BIN
public/static/images/footer/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
public/static/images/footer/logo_label_CN.png
Normal file
BIN
public/static/images/footer/logo_label_CN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/static/images/footer/logo_lable_EN.png
Normal file
BIN
public/static/images/footer/logo_lable_EN.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/static/images/footer/mark.png
Normal file
BIN
public/static/images/footer/mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/static/images/header/logo.png
Normal file
BIN
public/static/images/header/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
public/static/images/main/1.png
Normal file
BIN
public/static/images/main/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
public/static/images/main/10.png
Normal file
BIN
public/static/images/main/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
public/static/images/main/11.png
Normal file
BIN
public/static/images/main/11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
public/static/images/main/12.png
Normal file
BIN
public/static/images/main/12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
public/static/images/main/13.png
Normal file
BIN
public/static/images/main/13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
public/static/images/main/14.png
Normal file
BIN
public/static/images/main/14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
public/static/images/main/15.png
Normal file
BIN
public/static/images/main/15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
public/static/images/main/16.png
Normal file
BIN
public/static/images/main/16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
public/static/images/main/17.png
Normal file
BIN
public/static/images/main/17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
public/static/images/main/18.png
Normal file
BIN
public/static/images/main/18.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
public/static/images/main/19.png
Normal file
BIN
public/static/images/main/19.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
public/static/images/main/2.png
Normal file
BIN
public/static/images/main/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/static/images/main/20.png
Normal file
BIN
public/static/images/main/20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
public/static/images/main/21.png
Normal file
BIN
public/static/images/main/21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
public/static/images/main/3.png
Normal file
BIN
public/static/images/main/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/static/images/main/4.png
Normal file
BIN
public/static/images/main/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
public/static/images/main/5.png
Normal file
BIN
public/static/images/main/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
public/static/images/main/6.png
Normal file
BIN
public/static/images/main/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
public/static/images/main/7.png
Normal file
BIN
public/static/images/main/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/static/images/main/8.png
Normal file
BIN
public/static/images/main/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/static/images/main/9.png
Normal file
BIN
public/static/images/main/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
public/static/images/main/banner.png
Normal file
BIN
public/static/images/main/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
19
src/api/device.js
Normal file
19
src/api/device.js
Normal file
@ -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,
|
||||||
|
})
|
||||||
|
}
|
||||||
BIN
src/assets/font/HanYiDaHeiJian.ttf
Normal file
BIN
src/assets/font/HanYiDaHeiJian.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/HanYiZhongHeiJian.ttf
Normal file
BIN
src/assets/font/HanYiZhongHeiJian.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/PingFang SC.ttf
Normal file
BIN
src/assets/font/PingFang SC.ttf
Normal file
Binary file not shown.
14
src/assets/styles/font.scss
Normal file
14
src/assets/styles/font.scss
Normal file
@ -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');
|
||||||
|
}
|
||||||
49
src/assets/styles/index.scss
Normal file
49
src/assets/styles/index.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
7
src/assets/styles/variable.scss
Normal file
7
src/assets/styles/variable.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
//项目提供scss全局变量
|
||||||
|
$bg_color: #081314;
|
||||||
|
|
||||||
|
$white: #ffffff;
|
||||||
|
$black: #000000;
|
||||||
|
|
||||||
|
$border: 2px solid red;
|
||||||
32
src/components/icon/svgIcon.vue
Normal file
32
src/components/icon/svgIcon.vue
Normal file
@ -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>
|
||||||
342
src/components/swiper/index.vue
Normal file
342
src/components/swiper/index.vue
Normal file
@ -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="上一页">
|
||||||
|
<
|
||||||
|
</button>
|
||||||
|
<button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">
|
||||||
|
>
|
||||||
|
</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>
|
||||||
37
src/home.vue
Normal file
37
src/home.vue
Normal file
@ -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>
|
||||||
43
src/main.js
Normal file
43
src/main.js
Normal file
@ -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')
|
||||||
71
src/router/index.js
Normal file
71
src/router/index.js
Normal file
@ -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
|
||||||
26
src/store/nav.js
Normal file
26
src/store/nav.js
Normal file
@ -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,
|
||||||
|
}
|
||||||
|
)
|
||||||
152
src/utils/auth.js
Normal file
152
src/utils/auth.js
Normal file
@ -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,
|
||||||
|
}
|
||||||
36
src/utils/index.js
Normal file
36
src/utils/index.js
Normal file
@ -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')
|
||||||
|
)
|
||||||
|
}
|
||||||
42
src/utils/rem.js
Normal file
42
src/utils/rem.js
Normal file
@ -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()
|
||||||
134
src/utils/request.js
Normal file
134
src/utils/request.js
Normal file
@ -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
|
||||||
150
src/views/about/index.vue
Normal file
150
src/views/about/index.vue
Normal file
@ -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>
|
||||||
96
src/views/download/index.vue
Normal file
96
src/views/download/index.vue
Normal file
@ -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>
|
||||||
78
src/views/homepage/index.vue
Normal file
78
src/views/homepage/index.vue
Normal file
@ -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>
|
||||||
33
src/views/layout/pc/footer/components/QRCode.vue
Normal file
33
src/views/layout/pc/footer/components/QRCode.vue
Normal file
@ -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>
|
||||||
40
src/views/layout/pc/footer/components/logo.vue
Normal file
40
src/views/layout/pc/footer/components/logo.vue
Normal file
@ -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>
|
||||||
37
src/views/layout/pc/footer/components/nav.vue
Normal file
37
src/views/layout/pc/footer/components/nav.vue
Normal file
@ -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>
|
||||||
63
src/views/layout/pc/footer/components/navNode.vue
Normal file
63
src/views/layout/pc/footer/components/navNode.vue
Normal file
@ -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>
|
||||||
75
src/views/layout/pc/footer/index.vue
Normal file
75
src/views/layout/pc/footer/index.vue
Normal file
@ -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>
|
||||||
35
src/views/layout/pc/header/index.vue
Normal file
35
src/views/layout/pc/header/index.vue
Normal file
@ -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>
|
||||||
91
src/views/layout/pc/header/nav.vue
Normal file
91
src/views/layout/pc/header/nav.vue
Normal file
@ -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>
|
||||||
65
src/views/link/index.vue
Normal file
65
src/views/link/index.vue
Normal file
@ -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>
|
||||||
63
src/views/link/map.vue
Normal file
63
src/views/link/map.vue
Normal file
@ -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>
|
||||||
23
src/views/news/detail.vue
Normal file
23
src/views/news/detail.vue
Normal file
@ -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>
|
||||||
159
src/views/news/index.vue
Normal file
159
src/views/news/index.vue
Normal file
@ -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>
|
||||||
66
src/views/product/index.vue
Normal file
66
src/views/product/index.vue
Normal file
@ -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>
|
||||||
66
src/views/services/index.vue
Normal file
66
src/views/services/index.vue
Normal file
@ -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>
|
||||||
59
vite.config.js
Normal file
59
vite.config.js
Normal file
@ -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，使用!名字即可
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user