wo123/naweigete-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

333

Browse Source
This commit is contained in:
王创世 2025-03-13 17:37:54 +08:00
parent 59a68745ca
commit 7d0dc5a374
8 changed files with 512 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.vue
View File

@ -4,9 +4,6 @@
</template>
<script lang="ts" setup>
import { APIs } from './service/apiList'
import type AxiosRequestError from './service/error'
import $api from './service/webRequest'
useSeoMeta({
title: '我的神奇网站',
ogTitle: '我的神奇网站',

11
components/AppHeader.vue
View File

@ -25,27 +25,27 @@
</NuxtLink>
</li>
<li>
<NuxtLink to="index_about" :class="{ 'active': route.path === 'index_about' }">
<NuxtLink to="index_about" :class="{ 'active': route.path === '/index_about' }">
{{ $t('index_about') }}
</NuxtLink>
</li>
<li>
<NuxtLink to="index_services" :class="{ 'active': route.path === 'index_services/' }">
<NuxtLink to="index_service" :class="{ 'active': route.path === '/index_service' }">
{{ $t('index_services') }}
</NuxtLink>
</li>
<li>
<NuxtLink to="index_clients" :class="{ 'active': route.path === 'index_clients' }">
<NuxtLink to="index_clients" :class="{ 'active': route.path === '/index_clients' }">
{{ $t('index_clients') }}
</NuxtLink>
</li>
<li>
<NuxtLink to="index_news" :class="{ 'active': route.path === 'index_news' }">
<NuxtLink to="index_news" :class="{ 'active': route.path === '/index_news' }">
{{ $t('index_news') }}
</NuxtLink>
</li>
<li>
<NuxtLink to="index_contact" :class="{ 'active': route.path === 'index_contact' }">
<NuxtLink to="index_contact" :class="{ 'active': route.path === '/index_contact' }">
{{ $t('index_contact') }}
</NuxtLink>
</li>
@ -65,6 +65,7 @@ import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route)
</script>
<style lang="scss" scoped>

4
global/env.ts
View File

@ -2,13 +2,13 @@ import { isUndef } from './is'
// 正式环境
export const PROD_ENV = {
SERVER_URL: 'https://xxx.com/api', // 服务地址
SERVER_URL: '/api/', // 服务地址
IS_DEV: 'false', // 是否是测试环境
}
// 测试环境
export const DEV_ENV = {
SERVER_URL: 'https://xxx-test.com/api',
SERVER_URL: '/api/',
IS_DEV: 'true',
}

16
nuxt.config.ts
View File

@ -4,10 +4,6 @@ import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
ssr: false,
routeRules: {
'/**': { ssr: false }
},
css: [
'swiper/css',
'swiper/css/mousewheel',
@ -21,7 +17,17 @@ export default defineNuxtConfig({
tailwindcss: {},
},
},
modules: ['@pinia/nuxt', 'nuxt-icons'],
compatibilityDate: '2025-03-12',
vite: {
server: {
proxy: {
'/api': {
target: "http://naweigetetest2.hschool.com.cn/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
}
}
}
}
})

58
pages/index.vue
View File

@ -278,7 +278,7 @@
<swiper-slide class="swiper-slide-a">
<div class="flex justify-center items-center w-full">
<div class="w-[40%] text-right">
<img id="img1" src="/images/Group157.png" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
<img id="img1" :src="leftImg" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
</div>
<div class="w-[44%] text-left pl-5">
<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
@ -297,14 +297,14 @@
<!-- 这里可以使用v-for循环渲染新闻列表 -->
<div class="swiper-slide">
<div class="text-center">
<h3 class="font-semibold text-2xl">
<h3 class="font-semibold text-2xl line-clamp-1">
<a :href="item.url" target="_blank" class="text-[#0c1923]">
{{ item.title }}
</a>
</h3>
<h5 class="text-[#606060] mt-[25px] leading-[25px]">
<h5 class="text-[#606060] mt-[25px] leading-[25px] line-clamp-2">
<a :href="item.url" target="_blank" class="text-[#0c1923]">
{{ item.description }}
{{ item.synopsis }}
</a>
</h5>
</div>
@ -313,7 +313,7 @@
</swiper>
<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
</div>
<div class="w-full h-[1px] bg-black mt-10"></div>
<div class="w-full h-[1px] bg-black mt-3"></div>
</div>
</div>
<div class="absolute right-[10px]">
@ -347,7 +347,25 @@ import { Mousewheel, Navigation } from 'swiper/modules'
import 'swiper/css/mousewheel'
import 'swiper/css/navigation'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
// 新闻数据
const leftImg = ref();
const newsList = ref([])
onMounted(() => {
getNewsList();
})
const getNewsList = () => {
$api.get("/api/article/new/list")
.then((res: any) => {
console.log(res)
newsList.value = res.data.data
leftImg.value = res.data.data[0].image_input[0]
})
.catch((err) => {
console.dir(err)
})
}
// 导入背景图片
const bgImage = 'images/Group157.png'
@ -360,34 +378,6 @@ let swiperInstance: any = null
// 新闻轮播实例
let newsSwiper: any = null
// 新闻数据
const newsList = ref([
{
title: '新闻标题1',
description: '新闻描述内容1，这里是新闻的简短描述。',
url: '/news/1'
},
{
title: '新闻标题2',
description: '新闻描述内容2，这里是新闻的简短描述。',
url: '/news/2'
},
{
title: '新闻标题3',
description: '新闻描述内容3，这里是新闻的简短描述。',
url: '/news/3'
},
{
title: '新闻标题4',
description: '新闻描述内容4，这里是新闻的简短描述。',
url: '/news/4'
},
{
title: '新闻标题5',
description: '新闻描述内容5，这里是新闻的简短描述。',
url: '/news/5'
}
])
// 新闻轮播控制
const nextNews = () => {
@ -639,6 +629,6 @@ const scrollToTop = () => {
.news_padd {
margin-top: 20px;
height: 80px;
height: 110px;
}
</style>

175
pages/index_about.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<div class="bg-white">
<!-- Banner section with background image -->
<div class="aboutimgBg" :style="{
backgroundColor: '#fff',
backgroundImage: `url(/images/group195.png)`,
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
height: '600px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}">
<div class="banDes">
<div class="aboutTit text-center">
<h2 class="font-semibold animated fadeInLeft" style="font-size: 40px;">{{ $t('index_name') }}</h2>
</div>
</div>
</div>
<!-- Main content section -->
<div class="mainBg py-12 z-10 relative" style="min-height: 110vh;">
<div class="oneBox1Bg">
<div class="container mx-auto px-4">
<div class="oneBox1 text-center" style="margin-top: -100px;">
<h3 class="text-2xl text-[#606060] h-[144px] animated fadeInUp">{{ $t('about_a1') }}</h3>
</div>
<div class="oneBox1Bg1 ">
<h2 class="text-3xl font-bold text-center text-[#E2E2E2] mb-6 animated fadeInUp">{{ $t('about_a2') }}</h2>
<div class="oneBox1Bg1xiah w-24 h-[2px] bg-[#E2E2E2] mx-auto mb-12"></div>
<!-- Three column section -->
<div class="oneBox1Bg1img flex justify-center items-center flex-wrap gap-8 mb-16 mt-10">
<div class="flex flex-col items-center animated fadeInUp">
<img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group53.png">
<div class="oneBox1Bg1imgt">
<h3 class="text-2xl font-medium text-[#333]">{{ $t('about_a3') }}</h3>
</div>
</div>
<span class="oneBox1Bg1img1span h-40 w-px bg-[#ddd] hidden md:block"></span>
<div class="flex flex-col items-center animated fadeInUp">
<img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group52.png">
<div class="oneBox1Bg1imgt">
<h3 class="text-2xl font-medium text-[#333]">{{ $t('about_a4') }}</h3>
</div>
</div>
<span class="oneBox1Bg1img1span h-40 w-px bg-[#ddd] hidden md:block"></span>
<div class="flex flex-col items-center animated fadeInUp">
<img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group51.png">
<div class="oneBox1Bg1imgt">
<h3 class="text-2xl font-medium text-[#333]">{{ $t('about_a5') }}</h3>
</div>
</div>
</div>
<div class="oneBox1Bg1h text-center mb-6 animated fadeInUp">
<h3 class="text-2xl text-[#606060]">{{ $t('about_a6') }}</h3>
</div>
<div class="oneBox1Bg1xiah1"></div>
</div>
</div>
</div>
</div>
<!-- Second banner section with background image -->
<div class="aboutimgBg1 text-center py-16" :style="{
backgroundImage: `url(/images/maskgroup1.png)`,
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
color: 'white',
height: '700px'
}">
<div class="aboutTit2 container mx-auto px-4">
<div class="text-[#000] text-3xl animated fadeInLeft">{{ $t('about_a7') }}</div>
<div class="oneBox1Bg1xiah2 w-100 h-[2px] bg-[#606060] mx-auto my-8 animated fadeInLeft"></div>
<div class="oneBox1Bg2h max-w-1xl mt-[100px]">
<h3 class="text-[#606060] text-[24px] leading-relaxed animated fadeInLeft">{{ $t('about_a8') }}</h3>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
onMounted(() => {
})
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
.aboutimgBg,
.aboutimgBg1 {
position: relative;
}
.container {
max-width: 1310px;
}
.aboutTit h2::after {
content: '';
margin-top: -30px;
width: 598px;
height: 34px;
background: #A8CBFF;
display: block;
}
.oneBox1Bg1 {
height: 500px;
width: 1240px;
margin-top: 150px;
}
.oneBox1Bg1 h2 {
font-weight: 500;
text-align: center;
height: 51px;
font-size: 34px;
color: #000000;
line-height: 40px;
}
.oneBox1Bg1xiah {
margin: 0 auto;
width: 100%;
}
.oneBox1Bg1img1span {
margin-left: 125px;
margin-right: 125px;
border-right: 2px solid #E2E2E2;
display: inline-block;
height: 240px;
margin-top: -5px;
}
.oneBox1Bg1imgt {
font-weight: 500;
font-size: 24px;
color: #1C1C1C;
line-height: 28px;
text-align: center;
margin-top: 31px;
}
.oneBox1Bg1imgt h3::after {
content: '';
margin-top: -11px;
width: 60px;
height: 16px;
background: #A8CBFF;
display: block;
}
.oneBox1Bg1h {
padding-top: 53px;
text-align: center;
}
.oneBox1Bg1xiah1 {
border-top: 2px solid #E2E2E2;
margin-left: -61px;
width: 1240px;
margin-top: 55px;
}
</style>

108
pages/index_clients.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div class="bg-white">
<!-- Banner section with background image -->
<div class="aboutimgBg" :style="{
backgroundImage: `url(/images/maskgroup2.png)`,
backgroundSize: 'cover',
height: '600px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}">
<div class="banDes">
<div class="clientTit text-center">
<h2 class="text-[50px] font-bold animated fadeInLeft">{{ $t('clients_b1') }}</h2>
</div>
</div>
</div>
<!-- Clients content section -->
<div class="mainBg pb-[100px]">
<div class="oneBox1Bg">
<div class="container mx-auto px-4">
<div class="clientBox1">
<h3 style="margin-top: -120px; line-height: 31px;" class="animated fadeInUp text-2xl font-medium text-center text-[#606060]">{{ $t('clients_b2') }}</h3>
</div>
<div class="clientBg1 mt-[100px]">
<div class="clientBg1img flex flex-row items-center justify-between">
<div class="clientBg1imgdx w-[300px]">
<img class="oneBox1Bg1img1 w-full h-auto object-contain" src="/images/image8.png" alt="Client">
</div>
<div class="clientBg1imgt text-left pl-[30px]" style="flex: 1;">
<h3 class="text-[40px] font-bold mb-2">{{ $t('clients_b3') }}</h3>
<h4 class="text-xl text-[#606060] mt-[30px]">{{ $t('clients_b4') }}</h4>
</div>
</div>
</div>
<div class="clientxiah1 w-full h-[1px] bg-gray-200 my-8"></div>
<div class="clientimg flex flex-wrap justify-center gap-6 mt-8">
<img src="/images/maskgroup3.png" class="w-[200px] h-auto" alt="Client">
<img src="/images/image8.png" class="w-[200px] h-auto" alt="Client">
<img src="/images/clients56.png" class="w-[200px] h-auto" alt="Client">
<img src="/images/clients11.png" class="w-[200px] h-auto" alt="Client">
<img src="/images/clients11.png" class="w-[200px] h-auto" alt="Client">
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
onMounted(() => {
// You can add any code that needs to run after component is mounted
})
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
.aboutimgBg {
position: relative;
}
.container {
max-width: 1310px;
}
.clientTit h2::after {
content: '';
margin: 0 auto;
width: 300px;
height: 28px;
background: #A8CBFF;
display: block;
margin-top: -30px;
}
.clientBox1 h3 {
font-weight: 500;
text-align: center;
font-size: 24px;
color: #606060;
line-height: 31px;
}
@media (max-width: 768px) {
.clientimg {
flex-direction: column;
align-items: center;
}
.clientimg img {
margin-bottom: 20px;
}
}
.clientBg1imgt h3::after {
content: '';
margin-top: -20px;
width: 250px;
height: 20px;
background: #A8CBFF;
display: block;
margin-left: -4px;
}
</style>

186
pages/index_service.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<div class="bg-white">
<!-- Banner section with background image -->
<div class="aboutimgBg" :style="{
backgroundImage: `url(/images/servicegroup.png)`,
backgroundSize: 'cover',
height: '600px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}">
<div class="banDes">
<div class="serveTit text-center">
<h2 class="text-[50px] font-bold animated fadeInLeft">{{ $t('servers_b1') }}</h2>
</div>
</div>
</div>
<!-- Service content section -->
<div class="servicesBg py-12 relative">
<div class="container mx-auto px-4">
<div class="serveBox1">
<h3 class="animated fadeInUp" style="margin-top: -120px; line-height: 31px;">{{ $t('servers_b2') }}</h3>
</div>
</div>
</div>
<!-- Service boxes section -->
<div class="servicesBg py-12 mt-[100px]">
<div class="container mx-auto px-4">
<!-- Service box 1 -->
<div class="serveBox2">
<img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service180.png">
<h3 class="animated fadeInUp text-3xl font-bold text-center">
{{ $t('servers_b3') }}
</h3>
<h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
{{ $t('servers_b4') }}
</h4>
</div>
<!-- Service box 2 -->
<div class="serveBox2">
<img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service181.png">
<h3 class="animated fadeInUp text-3xl font-bold text-center">
{{ $t('servers_b5') }}
</h3>
<h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
{{ $t('servers_b6') }}
</h4>
</div>
<!-- Service box 3 -->
<div class="serveBox2">
<img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service182.png">
<h3 class="animated fadeInUp text-3xl font-bold text-center">
{{ $t('servers_b7') }}
</h3>
<h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
{{ $t('servers_b8') }}
</h4>
</div>
<!-- Service box 4 -->
<div class="serveBox2">
<img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service187.png">
<h3 class="animated fadeInUp text-3xl font-bold text-center">
{{ $t('servers_b9') }}
</h3>
<h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
{{ $t('servers_b10') }}
</h4>
</div>
<!-- Service box 5 -->
<div class="serveBox2">
<img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service204.png">
<h3 class="animated fadeInUp text-3xl font-bold text-center">
{{ $t('servers_b11') }}
</h3>
<h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
{{ $t('servers_b12') }}
</h4>
</div>
<!-- Service box 6 -->
<div class="serveBox2">
<img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service188.png">
<h3 class="animated fadeInUp text-3xl font-bold text-center">
{{ $t('servers_b13') }}
</h3>
<h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
{{ $t('servers_b14') }}
</h4>
</div>
</div>
</div>
<!-- Contact section with background image -->
<div class="servicesBg2 py-16 text-center" :style="{
backgroundImage: `url(/images/serve4.png)`,
backgroundSize: 'cover',
backgroundPosition: 'center center',
height: '600px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}">
<div class="servicesTit text-center container mx-auto px-4">
<h2 class="animated fadeInLeft text-3xl font-bold mb-4">{{ $t('servers_b15') }}</h2>
<h3 class="animated fadeInLeft text-2xl mb-4">{{ $t('servers_b16') }}</h3>
<h4 class="animated fadeInLeft">
<NuxtLink to="/contact" class="text-[#0c1923]">{{ $t('index_contact') }}</NuxtLink>
</h4>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
onMounted(() => {
// 可以在这里添加任何需要在组件挂载后执行的代码
})
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
.aboutimgBg,
.servicesBg2 {
position: relative;
}
.container {
max-width: 1310px;
}
.serveTit h2::after {
content: '';
margin: 0 auto;
width: 300px;
height: 28px;
background: #A8CBFF;
display: block;
margin-top: -30px;
}
.serveBox1 h3 {
font-weight: 500;
text-align: center;
font-size: 24px;
color: #606060;
line-height: 31px;
}
.serveBox2 {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
}
.servicesTit h2::after {
content: '';
margin: 0 auto;
margin-top: -14px;
width: 236px;
height: 20px;
background: #A8CBFF;
display: block;
}
.servicesTit h4 {
font-weight: 500;
font-size: 24px;
color: #000000;
width: 209px;
height: 56px;
line-height: 56px;
margin: 0 auto;
display: block;
margin-top: 44px;
border: 1px solid #000000;
border-radius: 28px 28px 28px 28px;
}
</style>