初始化代码
This commit is contained in:
yiqiuyang
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>
|
||||
Reference in New Issue
Block a user