1

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+	root: true,
+	parser: 'vue-eslint-parser',
+	parserOptions: {
+		parser: '@typescript-eslint/parser',
+	},
+	extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
+	rules: {
+		'vue/no-v-html': 'off',
+		'vue/v-on-event-hyphenation': 0,
+		'vue/no-template-shadow': 0,
+		'vue/no-setup-props-destructure': 'off',
+		'@intlify/vue-i18n/no-html-messages': 'off',
+		'vue/multi-word-component-names': 0,
+	},
+}

.gitignore

@@ -0,0 +1,25 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+.vscode

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.nvmrc

@@ -0,0 +1 @@
+v18

.prettierignore

@@ -0,0 +1,15 @@
+/dist
+/node_modules
+*.yml
+*.yaml
+tsconfig.json
+*.svg
+*.png
+*.jpg
+*.jpeg
+*.scss
+*.gif
+*.webp
+*.ttf
+index.html
+*.md

.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+	singleQuote: true, // 使用单引号代替双引号
+	printWidth: 200, // 超过最大值换行
+	semi: false, // 结尾不用分号
+	useTabs: true, // 缩进使用tab, 不使用空格
+	tabWidth: 4, // tab 样式宽度
+	bracketSpacing: true, // 对象数组, 文字间加空格 {a: 1} => { a: 1 }
+	arrowParens: 'avoid', // 如果可以, 自动去除括号 (x) => x 变为 x => x
+	proseWrap: 'preserve',
+	htmlWhitespaceSensitivity: 'ignore',
+	trailingComma: 'all',
+}

LICENSE

@@ -0,0 +1,43 @@
+Academic Free License (“AFL”) v. 3.0
+
+This Academic Free License (the "License") applies to any original work of authorship (the "Original Work") whose owner (the "Licensor") has placed the following licensing notice adjacent to the copyright notice for the Original Work:
+
+Licensed under the Academic Free License version 3.0
+
+1) Grant of Copyright License. Licensor grants You a worldwide, royalty-free, non-exclusive, sublicensable license, for the duration of the copyright, to do the following:
+
+  a) to reproduce the Original Work in copies, either alone or as part of a collective work;
+  b) to translate, adapt, alter, transform, modify, or arrange the Original Work, thereby creating derivative works ("Derivative Works") based upon the Original Work;
+  c) to distribute or communicate copies of the Original Work and Derivative Works to the public, under any license of your choice that does not contradict the terms and conditions, including Licensor’s reserved rights and remedies, in this Academic Free License;
+  d) to perform the Original Work publicly; and
+  e) to display the Original Work publicly.
+
+2) Grant of Patent License. Licensor grants You a worldwide, royalty-free, non-exclusive, sublicensable license, under patent claims owned or controlled by the Licensor that are embodied in the Original Work as furnished by the Licensor, for the duration of the patents, to make, use, sell, offer for sale, have made, and import the Original Work and Derivative Works.
+
+3) Grant of Source Code License. The term "Source Code" means the preferred form of the Original Work for making modifications to it and all available documentation describing how to modify the Original Work. Licensor agrees to provide a machine-readable copy of the Source Code of the Original Work along with each copy of the Original Work that Licensor distributes. Licensor reserves the right to satisfy this obligation by placing a machine-readable copy of the Source Code in an information repository reasonably calculated to permit inexpensive and convenient access by You for as long as Licensor continues to distribute the Original Work.
+
+4) Exclusions From License Grant. Neither the names of Licensor, nor the names of any contributors to the Original Work, nor any of their trademarks or service marks, may be used to endorse or promote products derived from this Original Work without express prior permission of the Licensor. Except as expressly stated herein, nothing in this License grants any license to Licensor’s trademarks, copyrights, patents, trade secrets or any other intellectual property. No patent license is granted to make, use, sell, offer for sale, have made, or import embodiments of any patent claims other than the licensed claims defined in Section 2. No license is granted to the trademarks of Licensor even if such marks are included in the Original Work. Nothing in this License shall be interpreted to prohibit Licensor from licensing under terms different from this License any Original Work that Licensor otherwise would have a right to license.
+
+5) External Deployment. The term "External Deployment" means the use, distribution, or communication of the Original Work or Derivative Works in any way such that the Original Work or Derivative Works may be used by anyone other than You, whether those works are distributed or communicated to those persons or made available as an application intended for use over a network. As an express condition for the grants of license hereunder, You must treat any External Deployment by You of the Original Work or a Derivative Work as a distribution under section 1(c).
+
+6) Attribution Rights. You must retain, in the Source Code of any Derivative Works that You create, all copyright, patent, or trademark notices from the Source Code of the Original Work, as well as any notices of licensing and any descriptive text identified therein as an "Attribution Notice." You must cause the Source Code for any Derivative Works that You create to carry a prominent Attribution Notice reasonably calculated to inform recipients that You have modified the Original Work.
+
+7) Warranty of Provenance and Disclaimer of Warranty. Licensor warrants that the copyright in and to the Original Work and the patent rights granted herein by Licensor are owned by the Licensor or are sublicensed to You under the terms of this License with the permission of the contributor(s) of those copyrights and patent rights. Except as expressly stated in the immediately preceding sentence, the Original Work is provided under this License on an "AS IS" BASIS and WITHOUT WARRANTY, either express or implied, including, without limitation, the warranties of non-infringement, merchantability or fitness for a particular purpose. THE ENTIRE RISK AS TO THE QUALITY OF THE ORIGINAL WORK IS WITH YOU. This DISCLAIMER OF WARRANTY constitutes an essential part of this License. No license to the Original Work is granted by this License except under this disclaimer.
+
+8) Limitation of Liability. Under no circumstances and under no legal theory, whether in tort (including negligence), contract, or otherwise, shall the Licensor be liable to anyone for any indirect, special, incidental, or consequential damages of any character arising as a result of this License or the use of the Original Work including, without limitation, damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses. This limitation of liability shall not apply to the extent applicable law prohibits such limitation.
+
+9) Acceptance and Termination. If, at any time, You expressly assented to this License, that assent indicates your clear and irrevocable acceptance of this License and all of its terms and conditions. If You distribute or communicate copies of the Original Work or a Derivative Work, You must make a reasonable effort under the circumstances to obtain the express assent of recipients to the terms of this License. This License conditions your rights to undertake the activities listed in Section 1, including your right to create Derivative Works based upon the Original Work, and doing so without honoring these terms and conditions is prohibited by copyright law and international treaty. Nothing in this License is intended to affect copyright exceptions and limitations (including “fair use” or “fair dealing”). This License shall terminate immediately and You may no longer exercise any of the rights granted to You by this License upon your failure to honor the conditions in Section 1(c).
+
+10) Termination for Patent Action. This License shall terminate automatically and You may no longer exercise any of the rights granted to You by this License as of the date You commence an action, including a cross-claim or counterclaim, against Licensor or any licensee alleging that the Original Work infringes a patent. This termination provision shall not apply for an action alleging patent infringement by combinations of the Original Work with other software or hardware.
+
+11) Jurisdiction, Venue and Governing Law. Any action or suit relating to this License may be brought only in the courts of a jurisdiction wherein the Licensor resides or in which Licensor conducts its primary business, and under the laws of that jurisdiction excluding its conflict-of-law provisions. The application of the United Nations Convention on Contracts for the International Sale of Goods is expressly excluded. Any use of the Original Work outside the scope of this License or after its termination shall be subject to the requirements and penalties of copyright or patent law in the appropriate jurisdiction. This section shall survive the termination of this License.
+
+12) Attorneys’ Fees. In any action to enforce the terms of this License or seeking damages relating thereto, the prevailing party shall be entitled to recover its costs and expenses, including, without limitation, reasonable attorneys' fees and costs incurred in connection with such action, including any appeal of such action. This section shall survive the termination of this License.
+
+13) Miscellaneous. If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable.
+
+14) Definition of "You" in This License. "You" throughout this License, whether in upper or lower case, means an individual or a legal entity exercising rights under, and complying with all of the terms of, this License. For legal entities, "You" includes any entity that controls, is controlled by, or is under common control with you. For purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+15) Right to Use. You may use the Original Work in all ways not otherwise restricted or conditioned by this License or by law, and Licensor promises not to interfere with or be responsible for such uses by You.
+
+16) Modification of This License. This License is Copyright © 2005 Lawrence Rosen. Permission is granted to copy, distribute, or communicate this License without modification. Nothing in this License permits You to modify this License as applied to the Original Work or to Derivative Works. However, You may modify the text of this License and copy, distribute or communicate your modified version (the "Modified License") and apply it to other original works of authorship subject to the following conditions: (i) You may not indicate in any way that your Modified License is the "Academic Free License" or "AFL" and you may not use those names in the name of your Modified License; (ii) You must replace the notice specified in the first paragraph above with the notice "Licensed under <insert your license name here>" or with a notice of your own that is not confusingly similar to the notice in this License; and (iii) You may not claim that your original works are open source software unless your Modified License has been approved by Open Source Initiative (OSI) and You comply with its license review and certification process.

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,68 @@
+<template>
+  <AppHeader />
+  <NuxtPage />
+  <AppFooter/>
+</template>
+
+<script lang="ts" setup>
+import $api from '@/service/webRequest'
+import { useStore } from '~/store'
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+useSeoMeta({
+  title: '洛阳灵睿',
+  ogTitle: '洛阳灵睿',
+  description: '洛阳灵睿',
+  ogDescription: '洛阳灵睿',
+  ogImage: 'https://example.com/image.png',
+  twitterCard: 'summary_large_image',
+})
+const store = useStore()
+onMounted(() => {
+})
+
+</script>
+
+<style>
+
+#__nuxt {
+  height: 100%;
+  width: 100%;
+}
+
+html,
+body {
+  scroll-behavior: smooth;
+  position: relative;
+  height: 100%;
+}
+
+body {
+  background: #eee;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #000;
+  margin: 0;
+  padding: 0;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: linear-gradient(90deg, #434343, #434343 1px, #111 0, #111);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #434343, #111);
+  border-radius: 6px;
+  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
+    inset -2px -2px 2px rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #e52e71, #ff8a00);
+}
+</style>

assets/animate/animate.js

@@ -0,0 +1,44 @@
+export function swiperAnimateCache() {
+    const allBoxes = window.document.documentElement.querySelectorAll('.ani')
+    for (var i = 0; i < allBoxes.length; i++) {
+      allBoxes[i].attributes['style']
+        ? allBoxes[i].setAttribute('swiper-animate-style-cache', allBoxes[i].attributes['style'].value)
+        : allBoxes[i].setAttribute('swiper-animate-style-cache', ' ')
+      allBoxes[i].style.visibility = 'hidden'
+    }
+  }
+  
+  export function swiperAnimate(a) {
+    clearSwiperAnimate()
+    var b = a.slides[a.activeIndex].querySelectorAll('.ani')
+    for (var i = 0; i < b.length; i++) {
+      b[i].style.visibility = 'visible'
+      const effect = b[i].attributes['swiper-animate-effect']
+        ? b[i].attributes['swiper-animate-effect'].value
+        : ''
+      b[i].className = b[i].className + ' ' + effect + ' ' + 'animated'
+      const duration = b[i].attributes['swiper-animate-duration']
+        ? b[i].attributes['swiper-animate-duration'].value
+        : ''
+      // duration && style
+      const delay = b[i].attributes['swiper-animate-delay']
+        ? b[i].attributes['swiper-animate-delay'].value
+        : ''
+      const style = b[i].attributes['style'].value + 'animation-duration:' + duration + ';-webkit-animation-duration:' + duration + ';' + 'animation-delay:' + delay + ';-webkit-animation-delay:' + delay + ';'
+      // delay && (style = style )
+      b[i].setAttribute('style', style)
+    }
+  }
+  
+  export function clearSwiperAnimate() {
+    var allBoxes = window.document.documentElement.querySelectorAll('.ani')
+    for (var i = 0; i < allBoxes.length; i++) {
+      allBoxes[i].attributes['swiper-animate-style-cache'] && allBoxes[i].setAttribute('style', allBoxes[i].attributes['swiper-animate-style-cache'].value)
+      allBoxes[i].style.visibility = 'hidden'
+      allBoxes[i].className = allBoxes[i].className.replace('animated', ' ')
+      const effectValue = allBoxes[i].attributes['swiper-animate-effect'].value
+      /* eslint-disable-next-line */
+      allBoxes[i].attributes['swiper-animate-effect'] && (effectValue, allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '))
+    }
+  }
+  

assets/css/common.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/AppFooter.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="group_30 flex-col">
+    <div class="text-wrapper_13 flex-row">
+      <span class="text_67">企业首页</span>
+      <span class="text_68">产品&nbsp;&amp;服务</span>
+      <span class="text_69">灵睿&nbsp;&amp;我们</span>
+      <span class="text_70">客户&amp;评价</span>
+      <span class="text_71">社会&amp;责任</span>
+      <span class="text_72">联系我们</span>
+      <span class="text_73">联系电话：400-080-0379</span>
+    </div>
+    <div class="group_31 flex-col"></div>
+    <div class="group_32 flex-row">
+      <div class="text-wrapper_14 flex-col">
+        <span class="text_74">
+          洛阳灵睿网络技术有限公司|洛阳网络公司|洛阳网络推广|洛阳易站通总代理|洛阳微客红包|洛阳微信营销
+        </span>
+        <span class="text_75">法律顾问：河南森合律师事务机构</span>
+        <span class="text_76">
+          ©2021&nbsp;洛阳灵睿网络技术有限公司&nbsp;All&nbsp;rights&nbsp;reserved.豫ICP备15023627号-3
+        </span>
+        <span class="text_77">
+          洛阳公司地址：洛阳市&nbsp;洛龙区&nbsp;世贸中心D座1816室
+        </span>
+      </div>
+      <img class="image_29" referrerpolicy="no-referrer"
+        src="public/images/wb.png" />
+      <img class="image_30" referrerpolicy="no-referrer"
+        src="public/images/wx.png" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+<style lang="scss" scoped>
+@import '@/assets/index.css';
+</style>

components/AppHeader.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="page flex-col">
+    <div class="group_1 flex-col">
+      <div class="box_1 flex-row">
+        <img class="image_1" referrerpolicy="no-referrer" src="public/images/logo.png" />
+        <span class="text_1">企业首页</span>
+        <span class="text_2">产品&nbsp;&amp;服务</span>
+        <span class="text_3">灵睿&nbsp;&amp;我们</span>
+        <span class="text_4">客户&amp;评价</span>
+        <span class="text_5">社会&amp;责任</span>
+        <span class="text_6">联系我们</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+const store = useStore()
+const route = useRoute()
+const { locale } = useI18n()
+console.log(route)
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/index.css';
+</style>

global/cookie.ts

@@ -0,0 +1,6 @@
+import Cookies from 'js-cookie'
+
+export const setCookie = Cookies.set.bind(Cookies)
+export const removeCookie = Cookies.remove.bind(Cookies)
+
+export const getCookie = Cookies.get.bind(Cookies)

global/date.ts

@@ -0,0 +1,21 @@
+export function formatDate(fmt: string, dt?: Date | string): string {
+	let d = dt
+	if (typeof dt === 'string') {
+		d = new Date(dt as string)
+	} else if (dt === undefined) {
+		d = new Date()
+	}
+	const year = (d as Date).getFullYear()
+	const month = (d as Date).getMonth() + 1
+	const day = (d as Date).getDate()
+	const hours = (d as Date).getHours()
+	const minutes = (d as Date).getMinutes()
+	const seconds = (d as Date).getSeconds()
+	let result = fmt.replace(/Y/g, `${year}`)
+	result = result.replace(/m/g, month > 9 ? `${month}` : `0${month}`)
+	result = result.replace(/d/g, day > 9 ? `${day}` : `0${day}`)
+	result = result.replace(/H/g, hours > 9 ? `${hours}` : `0${hours}`)
+	result = result.replace(/i/g, minutes > 9 ? `${minutes}` : `0${minutes}`)
+	result = result.replace(/s/g, seconds > 9 ? `${seconds}` : `0${seconds}`)
+	return result
+}

global/device.ts

@@ -0,0 +1,166 @@
+import CallApp from 'callapp-lib'
+
+// ie 基本上已经不用了
+export function isIE(UA: string): number {
+	const isIE = UA.indexOf('compatible') > -1 && UA.indexOf('MSIE') > -1 //判断是否IE<11浏览器
+	const isIE11 = UA.indexOf('Trident') > -1 && UA.indexOf('rv:11.0') > -1
+	if (isIE) {
+		const reIE = new RegExp('MSIE (\\d+\\.\\d+);')
+		reIE.test(UA)
+		const fIEVersion = parseFloat(RegExp['$1'])
+		if (fIEVersion == 7) {
+			return 7
+		} else if (fIEVersion == 8) {
+			return 8
+		} else if (fIEVersion == 9) {
+			return 9
+		} else if (fIEVersion == 10) {
+			return 10
+		} else {
+			return 6 //IE版本<=7
+		}
+	} else if (isIE11) {
+		return 11
+	} else {
+		return -1 //不是ie浏览器
+	}
+}
+
+function isMac(UA: string): boolean {
+	return /macintosh|mac os x/i.test(UA) ? true : false
+}
+
+function isWin32(UA: string): boolean {
+	return /win32|wow32/i.test(UA) ? true : false
+}
+
+function isWechat(UA: string): boolean {
+	return /MicroMessenger/i.test(UA) ? true : false
+}
+
+function isQQ(UA: string): boolean {
+	return /QQ/i.test(UA) ? true : false
+}
+
+function isMoible(UA: string): boolean {
+	return /(Android|webOS|iPhone|iPod|BlackBerry|Mobile)/i.test(UA) ? true : false
+}
+
+export function isIOS(UA: string): boolean {
+	return /iPhone|iPad|iPod/i.test(UA) ? true : false
+}
+
+function isAndroid(UA: string): boolean {
+	return /Android/i.test(UA) ? true : false
+}
+// 返回类型按需设置
+export function deviceType(UA: string): { type: string; env?: string } {
+	if (isMoible(UA)) {
+		if (isIOS(UA)) {
+			if (isWechat(UA)) {
+				return {
+					type: 'ios',
+					env: 'wechat',
+				}
+			}
+			if (isQQ(UA)) {
+				return {
+					type: 'ios',
+					env: 'qq',
+				}
+			}
+			return {
+				type: 'ios',
+			}
+		}
+		if (isAndroid(UA)) {
+			if (isWechat(UA)) {
+				return {
+					type: 'android',
+					env: 'wechat',
+				}
+			}
+			if (isQQ(UA)) {
+				return {
+					type: 'android',
+					env: 'qq',
+				}
+			}
+			return {
+				type: 'android',
+			}
+		}
+
+		return {
+			type: 'mobile',
+		}
+	} else {
+		if (isMac(UA)) {
+			return {
+				type: 'mac',
+			}
+		}
+		let env = ''
+		if (isIE(UA) > 0) {
+			env = 'ie'
+		}
+		// 注意区分 window 的 32位/64位
+		if (isWin32(UA)) {
+			return {
+				type: 'win32',
+				env: env,
+			}
+		}
+		return {
+			type: 'win64',
+			env: env,
+		}
+	}
+}
+
+export function isPC(UA = window.navigator?.userAgent) {
+	const agent = deviceType(UA)
+	return ['pc', 'mac', 'win32', 'win64'].includes(agent.type)
+}
+
+// 移动端唤醒应用
+export function callApp(isIOS: boolean) {
+	let packageName = ''
+	// 一般来说 ios 和 android 的包名不一样
+	if (isIOS) {
+		packageName = 'com.mobile.android.vite.name' // ios 移动端提供
+	} else {
+		packageName = 'com.mobile.ios.vite.name' // android 移动端提供
+	}
+	const appStoreUrl = 'https://itunes.apple.com/cn/app/xxxx' // 填写appstore的下载地址
+	const androidUrl = 'https://yingyongbao' // 软件应用宝地址
+
+	const options = {
+		scheme: {
+			protocol: 'vite', // 移动端设置的
+		},
+		intent: {
+			package: packageName,
+			scheme: 'vite', // 移动端设置的
+		},
+		timeout: 2000,
+		appstore: appStoreUrl,
+		yingyongbao: androidUrl,
+		fallback: 'https://www.xxx.com/',
+	}
+	const callLib = new CallApp(options)
+	callLib.open({
+		path: 'xxx.app/openwith', // 移动端提供
+		callback: () => {
+			if (isIOS) {
+				window.location.href = appStoreUrl // ios 直接跳转到appStore 地址即可
+			} else {
+				// android 跳转
+				const link = document.createElement('a')
+				link.target = '_blank'
+				link.href = androidUrl
+				link.click()
+			}
+		},
+	})
+}

global/env.ts

@@ -0,0 +1,40 @@
+import { isUndef } from './is'
+
+// 正式环境
+export const PROD_ENV = {
+	SERVER_URL: 'http://naweigetetest2.hschool.com.cn/', // 服务地址
+	IS_DEV: 'false', // 是否是测试环境
+}
+
+// 测试环境
+export const DEV_ENV = {
+	SERVER_URL: '/api/',
+	IS_DEV: 'true',
+}
+
+// 假设测试环境的域名是 https://xxx-test.com
+let isDev = process.env.NODE_ENV === 'development'
+try {
+	if (!process.server) {
+		isDev = isDev || ['xxx-test.com'].includes(location.host) || false
+	} else {
+		isDev = isDev || process.env.IS_DEV === 'TRUE' || false
+	}
+} catch (err) {
+	console.log('err in env')
+}
+
+export type EnvKey = keyof typeof PROD_ENV
+
+// 调用这个函数获取当前的环境变量
+export function getProcessEnv(key: EnvKey): string | void {
+	if (isDev) {
+		if (!isUndef(DEV_ENV[key])) {
+			return DEV_ENV[key]
+		}
+		return ''
+	}
+	if (!isUndef(PROD_ENV[key])) {
+		return PROD_ENV[key]
+	}
+}

global/file.ts

@@ -0,0 +1,84 @@
+import { isNull } from '@/global/is'
+
+export function webChooseFile(cb: (file: File) => unknown, accept?: string): void {
+	const id = 'file-selector-99999999'
+	let input = document.getElementById(id) as HTMLInputElement
+	if (isNull(input)) {
+		input = document.createElement('input')
+		input.id = id
+		input.type = 'file'
+		input.style.position = 'fixed'
+		input.style.left = '-10000px'
+		document.body.appendChild(input)
+	} else {
+		input.value = ''
+	}
+	if (accept) {
+		input.accept = accept
+	} else {
+		input.removeAttribute('accept')
+	}
+	input.onchange = (): void => {
+		if (input.files?.length) {
+			cb(input.files[0])
+		}
+	}
+	input.classList.add('selectFile')
+	const e = document.createEvent('MouseEvent') as unknown as Event
+	e.initEvent('click', false, true)
+	input.dispatchEvent(e)
+}
+
+export function webMulChooseFile(cb: (file: FileList) => unknown, accept?: string): void {
+	const id = 'file-selector-88888'
+	let input = document.getElementById(id) as HTMLInputElement
+	if (isNull(input)) {
+		input = document.createElement('input')
+		input.id = id
+		input.type = 'file'
+		input.multiple = true
+		input.style.position = 'fixed'
+		input.style.left = '-100000px'
+		document.body.appendChild(input)
+	} else {
+		input.value = ''
+	}
+	if (accept) {
+		input.accept = accept
+	} else {
+		input.removeAttribute('accept')
+	}
+	input.onchange = (): void => {
+		if (input.files?.length) {
+			cb(input.files)
+		}
+	}
+	input.classList.add('selectFile')
+	const e = document.createEvent('MouseEvent') as unknown as Event
+	e.initEvent('click', false, true)
+	input.dispatchEvent(e)
+}
+
+export function webDownloadFileByUrl(url: string, name: string): void {
+	const xhr = new XMLHttpRequest()
+	xhr.open('GET', url, true)
+	xhr.responseType = 'blob'
+	xhr.onload = (): void => {
+		if (xhr.status === 200) {
+			const a = document.createElement('a')
+			a.download = name
+			a.href = URL.createObjectURL(xhr.response)
+			a.click()
+		}
+	}
+	xhr.send()
+}
+
+export function downloadToTxt(text: string, filename: string) {
+	const element = document.createElement('a')
+	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+	element.setAttribute('download', filename)
+	element.style.display = 'none'
+	document.body.appendChild(element)
+	element.click()
+}

global/is.ts

@@ -0,0 +1,56 @@
+const { isInteger } = Number
+const { toString } = Object.prototype
+
+export function isNumber(v: unknown): v is number {
+	return typeof v === 'number' && !Number.isNaN(v) && Number.isFinite(v)
+}
+
+export function isInt(v: unknown): boolean {
+	return isNumber(v) && isInteger(v)
+}
+
+export function isFloat(v: unknown): boolean {
+	return isNumber(v) && !isInteger(v)
+}
+
+export function isString(v: unknown): v is string {
+	return typeof v === 'string'
+}
+
+export function isBoolean(v: unknown): v is boolean {
+	return v === true || v === false
+}
+
+export function isFunction(v: unknown): v is (...args: unknown[]) => unknown {
+	return typeof v === 'function'
+}
+
+export const { isArray } = Array
+
+export function isPlainObject(v: unknown): v is Record<string, unknown> {
+	return toString.call(v) === '[object Object]'
+}
+
+export function isRegExp(v: unknown): v is RegExp {
+	return v instanceof RegExp
+}
+
+export function isDate(v: unknown): v is Date {
+	return v instanceof Date
+}
+
+export function isNull(v: unknown): v is null {
+	return v === null
+}
+
+export function isDef<T>(v: unknown): v is Exclude<T, null | undefined> {
+	return v !== undefined && v !== null
+}
+
+export function isUndef(v: unknown): v is undefined {
+	return v === undefined
+}
+
+export function isUndefOrNull(v: unknown): v is null | undefined {
+	return v === undefined || v === null
+}

global/storage.ts

@@ -0,0 +1,58 @@
+import { isNull, isPlainObject } from '@/global/is'
+
+// 所有 key 用常量存储起来
+export enum StorageKeys {
+	TOKEN = 'TOKEN',
+	NAME_LIST = 'NAME_LIST',
+}
+
+export function setStorage(key: string, val: string): void {
+	localStorage.setItem(key, val)
+}
+
+export function getStorage(key: string): string | null {
+	return localStorage.getItem(key) || ''
+}
+
+export function removeStorage(key: string): void {
+	localStorage.removeItem(key)
+}
+
+// 判断是否存在
+export function hasStorage(key: string): boolean {
+	return !isNull(getStorage(key))
+}
+// 取数组类型的，直接返回解析后的数组
+export function getStorageArray(key: string): Array<unknown> | null {
+	const data = localStorage.getItem(key)
+	if (isNull(data)) {
+		return data
+	}
+	try {
+		const arr = JSON.parse(data)
+		if (Array.isArray(arr)) {
+			return arr
+		}
+		localStorage.removeItem(key)
+	} catch (err) {
+		console.log('json parse error getStorageArray', err)
+	}
+	return null
+}
+// 取对象类型的，直接返回解析后的对象
+export function getStorageObject(key: string): Object | null {
+	const data = localStorage.getItem(key)
+	if (data === null) {
+		return data
+	}
+	try {
+		const obj = JSON.parse(data)
+		if (isPlainObject(obj)) {
+			return obj
+		}
+		localStorage.removeItem(key)
+	} catch (err) {
+		console.log('json parse error getStorageObject', err)
+	}
+	return null
+}

nuxt.config.ts

@@ -0,0 +1,49 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  app: {
+    baseURL:'/web/',
+  },
+  nitro: {
+    routeRules: {
+      '/**': { trailingSlash: false }
+    }
+  },
+  router: {
+    // extendRoutes(routes, resolve) {
+    //   routes.push({
+    //     name: 'index_info',
+    //     path: '/params/:param1', // * 表示可选的多个参数
+    //     component: resolve(__dirname, 'pages/index_info.vue')
+    //   });
+    // }
+  },
+  ssr: false,
+  css: [
+    'swiper/css',
+    'swiper/css/mousewheel',
+     '@/assets/css/common.scss'
+  ],
+  devtools: { enabled: true },
+
+  postcss: {
+    plugins: {
+      autoprefixer: {},
+      tailwindcss: {},
+    },
+  },
+  modules: ['@pinia/nuxt', 'nuxt-icons'],
+  compatibilityDate: '2025-03-12',
+  vite: {
+    server: {
+      proxy: {
+        '/api': {
+          target: "https://www.navigatortrades.com/",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        }
+      }
+    }
+  }
+})

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxtjs/i18n": "8.0.0-beta.10",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "naive-ui": "^2.41.0",
+    "nuxt": "^3.8.2",
+    "prettier": "^3.1.1",
+    "sass": "^1.69.5",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3",
+    "vue": "^3.3.12",
+    "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "@pinia/nuxt": "^0.5.1",
+    "ant-design-vue": "^4.0.8",
+    "axios": "^1.6.2",
+    "callapp-lib": "^3.5.3",
+    "js-cookie": "^3.0.5",
+    "nuxt-icons": "^3.2.1",
+    "pinia": "^2.1.7",
+    "swiper": "^11.2.5",
+    "vue-i18n": "^9.8.0",
+    "vue-swiper-animate": "^1.0.0"
+  },
+  "browserslist": [
+    "cover 99.5%"
+  ]
+}

pages/index.vue

@@ -0,0 +1,364 @@
+<template>
+	<div style="width: 100%;">
+		<!-- Swiper 容器 -->
+		<div style="position: relative;">
+			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews"
+				@slideChange="onSlideChangeNews">
+				<swiper-slide>
+					<img src="public/images/banner.png" style="width: 100%;">
+				</swiper-slide>
+			</swiper>
+			<div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
+				<div class="flex-row justify-center align-center">
+					<div>
+						<img src="public/images/left.png" alt="">
+					</div>
+					<div style="margin: 0px 20px;">
+						<img src="public/images/morse.png" alt="">
+					</div>
+					<div>
+						<img src="public/images/right.png" alt="">
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="group_2 flex-col">
+			<div class="box_2 flex-col">
+				<div class="group_3 flex-row justify-center align-center">
+					<div class="group_4 flex-col">
+						<div class="text-group_1 flex-col justify-between">
+							<span class="text_7">灵睿的互联网之道</span>
+							<span class="text_8">
+								The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
+							</span>
+						</div>
+						<div class="text-wrapper_1 flex-row">
+							<span class="text_9">公司简介</span>
+							<span class="text_10">运营方法论</span>
+							<span class="text_11">互联网营销</span>
+						</div>
+						<div class="box_3 flex-col">
+							<div class="box_4 flex-col"></div>
+						</div>
+						<span class="text_12">
+							灵睿是一家专业提供互联网技术及应用化服务的科技企业。公司成立于2006年，总部位于十三朝古都洛阳，在郑州、洛阳、许昌三地设立四家公司，是洛阳及河南建立较早、实力较强、规模较大的互联网骨干技术服务企业。公司致力于互联网+工业、互联网+医疗、互联网+教育、互联网+旅游、互联网+农业五个方面的发展。目前为近三千家企业提供互联网服务，并为上百家国有大型企业以及党政部门、事业机关单位提供互联网应用化服务。
+						</span>
+						<div class="text-wrapper_2 flex-col">
+							<span class="text_13">查看全部</span>
+						</div>
+					</div>
+					<div class="group_5 flex-col justify-center align-center">
+						<div class="section_1 flex-col">
+							<div class="image-wrapper_2 flex-col">
+								<img class="image_5" referrerpolicy="no-referrer" src="public/images/bf.png" />
+							</div>
+						</div>
+						<div
+							style="background-color: rgba(252, 116, 40, 1);width: 549px;height: 508px;z-index: 1;position: absolute;right: -30px;bottom: -30px;;">
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="group_2 flex-col">
+			<div class="box_5 flex-col">
+				<span class="text_14">我们的业务</span>
+				<span class="text_15">
+					The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
+				</span>
+				<div class="flex-row justify-center align-center">
+					<div>
+						<img class="image_6" referrerpolicy="no-referrer" src="public/images/t3.png" />
+					</div>
+					<div class="section_2 flex-col">
+						<div class="group_6 flex-col">
+							<div class="box_6 flex-row justify-between">
+								<div class="image-wrapper_3 flex-col align-center">
+									<img class="label_1" referrerpolicy="no-referrer" src="public/images/u1.png" />
+								</div>
+								<div class="text-group_2 flex-col justify-between">
+									<span class="text_17">
+										专业网站建设与企业官网设计定制服务
+									</span>
+									<span class="text_16">
+										助力企业数字化转型升级，PC端/移动端/H5提供一站式网站开发、搭建
+									</span>
+								</div>
+							</div>
+						</div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer" src="public/images/r4.png" />
+							</div>
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">企业数字化自媒体托管专家</span>
+								<span class="text_19">
+									业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer" src="public/images/r3.png" />
+							</div>
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">全流程抖音短视频制作服务</span>
+								<span class="text_19">
+									助您快速打造高播放量、高互动率的爆款短视频
+								</span>
+							</div>
+						</div>
+						<div class="group_12 flex-col"></div>
+						<div class="group_13 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer" src="public/images/r2.png" />
+							</div>
+							<div class="text-group_5 flex-col justify-between">
+								<span class="text_22">全栈H5开发解决方案</span>
+								<span class="text_23">
+									基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
+								</span>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</div>
+		<div class="box_7 flex-col">
+			<span class="text_24">行业案例</span>
+			<div class="group_14 flex-row justify-between align-center" style="    flex-wrap: wrap;">
+				<div class="flex-row">
+					<div class="text_25">
+						<span>医疗</span>
+						<div
+							style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
+						</div>
+					</div>
+					<div class="text_25">党政</div>
+					<div class="text_25">建筑</div>
+					<div class="text_25">物流</div>
+					<div class="text_25">教育</div>
+					<div class="text_25">文旅</div>
+					<div class="text_25">餐饮</div>
+				</div>
+				<div class="flex-row justify-center align-center">
+					<div style="margin-right: 10px;">
+						<span class="text_32">更多案例</span>
+					</div>
+					<div>
+						<img src="public/images/anli.png" />
+					</div>
+				</div>
+				<div class="group_15" style="flex: 0 0 100%;"></div>
+			</div>
+
+			<div class="dswper">
+				<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
+					:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
+					<swiper-slide>
+						<img src="public/images/op1.png" style="width: 100%;">
+					</swiper-slide>
+					<swiper-slide>
+						<img src="public/images/op1.png" style="width: 100%;">
+					</swiper-slide>
+					<swiper-slide>
+						<img src="public/images/op1.png" style="width: 100%;">
+					</swiper-slide>
+					<swiper-slide>
+						<img src="public/images/op1.png" style="width: 100%;">
+					</swiper-slide>
+					<swiper-slide>
+						<img src="public/images/op1.png" style="width: 100%;">
+					</swiper-slide>
+				</swiper>
+				<div class="dswper_left">
+					<img src="public/images/opl.png">
+				</div>
+				<div class="dswper_right">
+					<img src="public/images/opr.png">
+				</div>
+				<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
+					<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
+					<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
+					<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
+				</div>
+			</div>
+		</div>
+		<div class="box_11 flex-col">
+			<div class="text-wrapper_10">
+				<span class="text_41">新闻动态</span>
+			</div>
+			<div class="text-wrapper_11">
+				<span class="text_42">Our&nbsp;Business&nbsp;</span>
+			</div>
+			<div class="box_12 flex-row justify-center">
+				<img class="image_7" referrerpolicy="no-referrer" src="public/images/news1.png" />
+				<div class="box_13 flex-col">
+					<div class="text-group_6 flex-col justify-between">
+						<span class="text_43">
+							洛阳市郑州商会在洛阳灵睿网络技术有限...
+						</span>
+						<span class="paragraph_1">
+							为深入学习贯彻党的二十大精神，落实省、市委决策，
+							<br />
+							充分发挥民营企业的凝聚力、向心力和创造力，赴..
+						</span>
+					</div>
+					<div class="group_22 flex-row">
+						<div class="section_6 flex-col"></div>
+						<span class="text_44">行业动态</span>
+						<span class="text_45">2025-06-24</span>
+					</div>
+				</div>
+				<img class="image_8" referrerpolicy="no-referrer" src="public/images/news2.png" />
+			</div>
+			<div class="box_14 flex-row justify-center">
+				<div class="group_23 flex-col">
+					<div class="text-group_7 flex-col justify-between">
+						<span class="text_46">
+							洛阳市郑州商会在洛阳灵睿网络技术有限...
+						</span>
+						<span class="paragraph_2">
+							为深入学习贯彻党的二十大精神，落实省、市委决策，
+							<br />
+							充分发挥民营企业的凝聚力、向心力和创造力，赴..
+						</span>
+					</div>
+					<div class="group_24 flex-row">
+						<div class="group_25 flex-col"></div>
+						<span class="text_47">行业动态</span>
+						<span class="text_48">2025-06-24</span>
+					</div>
+				</div>
+				<img class="image_9" referrerpolicy="no-referrer" src="public/images/news3.png" />
+				<div class="group_26 flex-col">
+					<div class="text-group_8 flex-col justify-between">
+						<span class="text_49">
+							洛阳市郑州商会在洛阳灵睿网络技术有限...
+						</span>
+						<span class="paragraph_3">
+							为深入学习贯彻党的二十大精神，落实省、市委决策，
+							<br />
+							充分发挥民营企业的凝聚力、向心力和创造力，赴..
+						</span>
+					</div>
+					<div class="box_15 flex-row">
+						<div class="group_27 flex-col"></div>
+						<span class="text_50">行业动态</span>
+						<span class="text_51">2025-06-24</span>
+					</div>
+				</div>
+			</div>
+			<div class="box_16 flex-row">
+				<div class="text-wrapper_12 flex-col">
+					<span class="text_52">查看更多</span>
+				</div>
+			</div>
+		</div>
+		<div class="box_17 flex-col">
+			<span class="text_53">合作伙伴</span>
+			<span class="text_54">Our&nbsp;Business&nbsp;</span>
+			<div class="group_28 flex-row justify-center">
+				<div class="text-group_9 flex-col justify-between">
+					<span class="text_55">5000+</span>
+					<span class="text_56">
+						19年技术沉淀，只为提供更在专业的服务，行业解决方案
+					</span>
+				</div>
+				<span class="text_57">服务客户</span>
+				<div class="section_7 flex-col"></div>
+				<div class="text-group_10 flex-col justify-between">
+					<span class="text_58">19+</span>
+					<span class="text_59">
+						19年技术沉淀，只为提供更在专业的服务，行业解决方案
+					</span>
+				</div>
+				<span class="text_60">技术沉淀</span>
+				<div class="section_8 flex-col"></div>
+				<div class="text-group_11 flex-col justify-between">
+					<span class="text_61">100+</span>
+					<span class="text_62">
+						19年技术沉淀，只为提供更在专业的服务，行业解决方案
+					</span>
+				</div>
+				<span class="text_63">覆盖行业</span>
+				<div class="section_9 flex-col"></div>
+				<div class="text-group_12 flex-col justify-between">
+					<span class="text_64">30+</span>
+					<span class="text_65">
+						19年技术沉淀，只为提供更在专业的服务，行业解决方案
+					</span>
+				</div>
+				<span class="text_66">技术团队</span>
+			</div>
+			<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
+				<div v-for="item in 18">
+					<img class="image_11" referrerpolicy="no-referrer" src="public/images/q1.png"/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { nextTick, ref } from 'vue'
+import 'swiper/css'
+import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow } from "swiper/modules";
+
+let modules = [Autoplay, A11y, EffectCoverflow];
+
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import 'swiper/css/effect-coverflow';
+import * as swiperAni from '@/assets/animate/animate.js'
+import $api from '@/service/webRequest'
+import { useI18n } from 'vue-i18n'
+import { useStore } from '~/store'
+const { locale } = useI18n()
+
+
+let newsSwiper: any = null
+const onSwiperNews = (swiper: any) => {
+	newsSwiper = swiper
+}
+const swiperOptionsNews = {
+	direction: 'horizontal',
+	slidesPerView: 1,
+	speed: 700,
+	loop: false,
+	modules: [Navigation],
+	navigation: {
+		nextEl: '#swipen_prev',
+		prevEl: '#swipen_next',
+	},
+}
+
+let vesSwiper: any = null
+const onSwiperExp = (swiper: any) => {
+	vesSwiper = swiper
+}
+const swiper_exp = ref();
+
+// 新闻数据
+onMounted(() => {
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/index.css";
+
+:deep(.dswper .swiper-slide-next) {
+	transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
+}
+
+:deep(.dswper .swiper-slide-prev) {
+	transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
+}
+</style>

plugins/i18n.ts

@@ -0,0 +1,19 @@
+import { createI18n } from 'vue-i18n'
+import zh from './locales/zh'
+import en from './locales/en'
+
+export const i18n: any = createI18n({
+	legacy: false,
+	globalInjection: true,
+	warnHtmlMessage: false,
+	locale: 'zh',
+	messages: {
+		en,
+		zh,
+	},
+})
+export default defineNuxtPlugin(({ vueApp }) => {
+	vueApp.use(i18n)
+})
+
+export const $i18n = i18n.global.t.bind(i18n.global)

plugins/locales/en.ts

@@ -0,0 +1,96 @@
+export default {
+	home: 'Home',
+	
+	// Index page
+	index_name: 'Henan Navigate Trading Co., Ltd',
+	index_main: 'Main Specialized, Refined, Special and New areas',
+	index_get_to: 'Get To Know US',
+	index_about: 'About US',
+	index_services: 'SERVICES',
+	index_clients: 'CLIENTS',
+	index_news: 'News',
+	index_contact: 'Contact US',
+	index_share: 'Share Wed',
+
+	// Index section 2
+	index_m1: 'Main business areas',
+	index_m2: 'Our main products include steel, pigiron furnace materials, coal, chemical materials, non-ferrous metals, natural gas, agricultural products, etc…',
+	index_m3: 'Learn More',
+	index_m4: 'Industry',
+	index_m4_1: 'Import and export of second-hand mining equipment, accessories, and components.',
+	index_m5: 'Agriculture',
+	index_m5_1: 'Import and export of grain, oil, and upstream raw materials.',
+	index_m6: 'Raw materials',
+	index_m6_1: 'Import and export of chemical, papermaking, grinding tools and other raw materials.',
+	index_m7: 'Navigation',
+
+	// Index section 3
+	index_s1: 'Factory Direct Supply, Excellent Quality',
+	index_s2: 'Market research and analysis: Based on big data analysis, provide in-depth insights into the target market to help you accurately position product needs and seize business opportunities. Supply Chain Management: From supplier screening to logistics distribution, we provide efficient and transparent supply chain solutions to ensure the safe and fast delivery of your goods to their destination. Import and export agency services: Familiar with laws, regulations, and customs policies of various countries, simplify cumbersome procedures, and ensure smooth customs clearance of your goods. Quality control and inspection: Cooperate with third-party testing institutions to strictly control product quality, making your products stand out in the fiercely competitive market. Business consulting services: A professional team provides customized business solutions to help enterprises steadily move forward in the international market.',
+	index_s3: 'Excellent Quality',
+	index_s4: 'Customized Services',
+	index_s5: 'Fast Logistics',
+
+	// Index section 4
+	index_a1: 'About Us',
+	index_a2: "Henan Navigate Trading Co., Ltd. is a professional import and export trading enterprise, mainly engaged in industrial fields such as second-hand mining equipment, accessories and parts, agricultural fields such as grain and oil and upstream raw materials, as well as raw materials such as chemical, papermaking, and grinding tools. The company's headquarters is located in Zhengzhou, Henan Province. As a state-owned enterprise with a background, we have won wide acclaim in the mining and engineering industries with our rich industry experience and professional team.",
+
+	// Index section 5
+	index_n1: 'News Consultation',
+	index_n2: 'OUR LATEST STORIES IN FOCUS',
+
+	// About page
+	about_a1: 'Established in the vibrant year of 2024,Henan Navigate Trading Co Ltd. has emerged as a beacon of innovation and reliability in the global machinery trade landscape. With our roots deeply embedded in the industrious province of Henan, China, we are committed to delivering the highest standards of quality and service to our esteemed clientele across the globe.',
+	about_a2: 'Our Core Philosophy Revolves Around Three Fundamental Principles',
+	about_a3: 'Integrity',
+	about_a4: 'Innovation',
+	about_a5: 'Excellence',
+	about_a6: 'These principles guide our every action, from the procurement of raw materials to the final delivery of our products. We believe that by adhering to these values, we can forge lasting partnerships with our clients and contribute to their success.',
+	about_a7: 'Comprehensive Solutions',
+	about_a8: "We understand that every business has unique requirements, and that's why we offer a wide array of services tailored to the specific needs of our clients. From the import and export of machinery to after-sales support, we provide a seamless experience that ensures the smooth operation of our clients' businesses.",
+
+	// Services page
+	servers_b1: 'Our Services',
+	servers_b2: 'Market research and analysis: Based on big data analysis, provide in-depth insights into the target market to help you accurately position product needs and seize business opportunities. Supply Chain Management: From supplier screening to logistics distribution, we provide efficient and transparent supply chain solutions to ensure the safe and fast delivery of your goods to their destination. Import and export agency services: Familiar with laws, regulations, and customs policies of various countries, simplify cumbersome procedures, and ensure smooth customs clearance of your goods. Quality control and inspection: Cooperate with third-party testing institutions to strictly control product quality, making your products stand out in the fiercely competitive market. Business consulting services: A professional team provides customized business solutions to help enterprises steadily move forward in the international market.',
+	servers_b3: 'Market Analysis and Research',
+	servers_b4: 'We offer in-depth market analysis and research services to help clients understand consumer behavior, market trends, and competitive environments in their target markets, thereby formulating effective market entry strategies.',
+	servers_b5: 'Product Procurement and Supply Management',
+	servers_b6: 'We search and select high-quality suppliers globally to ensure product quality and the stability of the supply chain. At the same time, we provide flexible procurement plans to meet the diverse needs of our clients.',
+	servers_b7: 'Logistics and Warehousing',
+	servers_b8: 'We collaborate with several renowned logistics companies to provide efficient and reliable logistics solutions. Whether by sea, air, or land transport, we can ensure that goods arrive safely and on time at their destinations. Additionally, we offer warehousing management services to help clients optimize their inventory.',
+	servers_b9: 'Trade Financing and Settlement',
+	servers_b10: 'We provide trade financing services to our clients, including the establishment of letters of credit, guarantees, and export tax rebates, to help clients solve cash flow issues. At the same time, we offer various settlement methods to ensure the convenience and security of transactions.',
+	servers_b11: 'Compliance and Risk Management',
+	servers_b12: 'We strictly adhere to international trade regulations and provide clients with compliance consulting and risk assessment services to help clients avoid trade risks and protect their interests.',
+	servers_b13: 'Customer Relationship Management',
+	servers_b14: 'We strictly adhere to international trade regulations and provide clients with compliance consulting and risk assessment services to help clients avoid trade risks and protect their interests.',
+	servers_b15: 'Our Commitment',
+	servers_b16: 'We commit to providing the most professional and considerate service to our clients, no matter where they are. Our goal is to become the most trusted trade partner for our clients and to help them achieve success in the global market.',
+
+	// Clients page
+	clients_b1: 'Cooperative Partner',
+	clients_b2: 'We are committed to establishing mutually beneficial partnerships with customers worldwide. By deeply understanding market demands and customer expectations, we offer customized foreign trade solutions that encompass procurement, logistics, and financial support. Our goal is to help our clients achieve business growth and market expansion through efficient supply chain management and professional market insights.',
+	clients_b3: 'SinopecGroup',
+	clients_b4: 'Cooperating with XX Foreign Trade Company has been a delightful experience. Their professional team and efficient service have left a deep impression on us, not only excelling in project management but also demonstrating exceptional capabilities in ensuring the stability and responsiveness of the supply chain. Moreover, the customized software solutions provided by XX Foreign Trade Company have greatly improved our business efficiency, enabling us to adapt quickly to market changes, optimize our workflow, enhance customer satisfaction.',
+
+	// List page
+	list_b1: 'Latest News',
+	list_b2: 'Latest Industry Trends',
+	list_b3: 'View details',
+
+	// Contact page
+	contact_b1: 'Contact US',
+	contact_b2: 'Your name',
+	contact_b3: 'Your contact information',
+	contact_b4: 'Leave what you want to say',
+	contact_b5: 'Send Out',
+	contact_b6: 'Follow us',
+
+	contact_name_required: 'Name is required',
+	contact_phone_required: 'Phone number is required',
+	contact_message_required: 'Message is required',
+	//提交成功
+	contact_success_title: 'Thank you for your submission',
+	//提交失败
+	contact_fail_title: 'Submission failed',
+}

plugins/locales/zh.ts

@@ -0,0 +1,95 @@
+export default {
+	home: '首页',
+	// 静态页多语言
+	index_name: '河南纳威格特商贸有限公司',
+	index_main: '主要专业、精细、特色、新领域',
+	index_get_to: '了解我们',
+	index_about: '关于我们',
+	index_services: '客户服务',
+	index_clients: '我的客户',
+	index_news: '最新新闻',
+	index_contact: '联系我们',
+	index_share: '分享',
+
+	// 首页2
+	index_m1: '主营业务领域',
+	index_m2: '我们的主要产品包括钢铁、生铁炉料、煤炭、化工材料、有色金属、天然气、农产品等……',
+	index_m3: '了解更多',
+	index_m4: '工业',
+	index_m4_1: '二手采矿设备、配件和组件的进出口。',
+	index_m5: '农业',
+	index_m5_1: '粮食、油料和上游原材料的进出口。',
+	index_m6: '原材料',
+	index_m6_1: '化工、造纸、磨具等原材料的进出口。',
+	index_m7: '导航',
+
+	// 首页3
+	index_s1: '工厂直供，优质产品',
+	index_s2: '市场研究与分析：基于大数据分析，提供深入的目标市场洞察，帮助您精准定位产品需求，抓住商业机会。供应链管理：从供应商筛选到物流配送，我们提供高效透明的供应链解决方案，确保您的货物安全快速地送达目的地。进出口代理服务：熟悉各国法律法规和海关政策，简化繁琐程序，确保您的货物顺利通关。质量控制与检验：与第三方检测机构合作，严格控制产品质量，使您的产品在激烈的市场竞争中脱颖而出。商务咨询服务：专业团队提供定制化的商务解决方案，帮助企业稳步进军国际市场。',
+	index_s3: '优质产品',
+	index_s4: '定制服务',
+	index_s5: '快速物流',
+
+	// 首页4
+	index_a1: '关于我们',
+	index_a2: '河南导航贸易有限公司是一家专业的进出口贸易企业，主要从事二手采矿设备、配件和部件、粮食和油料及上游原材料、以及化工、造纸和磨具等原材料的进出口业务。公司总部位于河南省郑州市。作为一家具有国资背景的企业，我们凭借丰富的行业经验和专业的团队，在矿业和工程行业赢得了广泛赞誉。',
+
+	// 首页5
+	index_n1: '新闻资讯',
+	index_n2: '我们的最新焦点故事',
+
+	// about
+	about_a1: '成立于充满活力的2024年，河南纳威格特商贸有限公司在全球机械贸易领域崭露头角，成为创新和可靠的典范。我们根植于中国勤劳的河南省，致力于向全球尊贵的客户提供最高标准的质量和服务。',
+	about_a2: '我们的核心理念围绕三个基本原则',
+	about_a3: '诚信',
+	about_a4: '创新',
+	about_a5: '卓越',
+	about_a6: '这些原则指导着我们的每一个行动，从原材料的采购到最终产品的交付。我们相信，通过遵循这些价值观，我们可以与客户建立持久的合作关系，并为他们的成功做出贡献。',
+	about_a7: '全面解决方案',
+	about_a8: '我们理解每个企业都有独特的需求，因此我们提供一系列针对客户需求量身定制的服务。从机械设备的进出口到售后服务，我们提供无缝体验，确保客户的业务顺畅运营。',
+
+	// servers
+	servers_b1: '我们的服务',
+	servers_b2: '市场研究与分析：基于大数据分析，提供深入的目标市场洞察，帮助您精准定位产品需求，抓住商业机会。供应链管理：从供应商筛选到物流配送，我们提供高效透明的供应链解决方案，确保您的货物安全快速地送达目的地。进出口代理服务：熟悉各国法律法规和海关政策，简化繁琐程序，确保您的货物顺利通关。质量控制与检验：与第三方检测机构合作，严格控制产品质量，使您的产品在激烈的市场竞争中脱颖而出。商务咨询服务：专业团队提供定制化的商务解决方案，帮助企业稳步进军国际市场。',
+	servers_b3: '市场分析与研究',
+	servers_b4: '我们提供深入的市场分析和研究服务，帮助客户了解目标市场的消费者行为、市场趋势和竞争环境，从而制定有效的市场进入策略。',
+	servers_b5: '产品采购与供应管理',
+	servers_b6: '我们全球范围内搜索和选择高质量供应商，确保产品质量和供应链的稳定性。同时，我们提供灵活的采购计划，满足客户的多样化需求。',
+	servers_b7: '物流与仓储',
+	servers_b8: '我们与多家知名物流公司合作，提供高效可靠的物流解决方案。无论是海运、空运还是陆运，我们都能确保货物安全准时到达目的地。此外，我们还提供仓储管理服务，帮助客户优化库存。',
+	servers_b9: '贸易融资与结算',
+	servers_b10: '我们为客户提供贸易融资服务，包括信用证开立、担保和出口退税等，帮助客户解决现金流问题。同时，我们提供多种结算方式，确保交易的便捷和安全。',
+	servers_b11: '合规与风险管理',
+	servers_b12: '我们严格遵守国际贸易法规，为客户提供合规咨询和风险评估服务，帮助客户避免贸易风险，保护其利益。',
+	servers_b13: '客户关系管理',
+	servers_b14: '我们严格遵守国际贸易法规，为客户提供合规咨询和风险评估服务，帮助客户避免贸易风险，保护其利益。',
+	servers_b15: '我们的承诺',
+	servers_b16: '我们承诺为客户提供最专业和周到的服务，无论他们身处何地。我们的目标是成为客户最值得信赖的贸易伙伴，帮助他们在全球市场上取得成功。',
+
+	// clients
+	clients_b1: '合作伙伴',
+	clients_b2: '我们致力于与全球客户建立互利共赢的伙伴关系。通过深入了解市场需求和客户期望，我们提供涵盖采购、物流和金融支持的定制化外贸解决方案。我们的目标是通过高效的供应链管理和专业的市场洞察，帮助客户实现业务增长和市场扩展。',
+	clients_b3: '中国石化集团',
+	clients_b4: '与XX外贸公司合作是一次愉快的体验。他们的专业团队和高效服务给我们留下了深刻的印象，不仅在项目管理方面表现出色，还在确保供应链的稳定性和响应能力方面展示了卓越的能力。此外，XX外贸公司提供的定制化软件解决方案极大地提高了我们的业务效率，使我们能够迅速适应市场变化，优化工作流程，提升客户满意度。',
+
+	// list
+	list_b1: '最新新闻',
+	list_b2: '最新行业趋势',
+	list_b3: '查看详情',
+
+	// contact
+	contact_b1: '联系我们',
+	contact_b2: '您的姓名',
+	contact_b3: '您的联系方式',
+	contact_b4: '留言',
+	contact_b5: '发送',
+	contact_b6: '关注我们',
+
+	contact_name_required: '请输入您的姓名',
+	contact_phone_required: '请输入您的联系方式',
+	contact_message_required: '请输入留言内容',
+	//提交成功
+	contact_success: '提交成功',
+	//提交失败
+	contact_error:'提交失败',
+}

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

service/apiList.ts

@@ -0,0 +1,8 @@
+// 系统中所有请求的接口
+export const APIs = {
+	login: '/login',
+	// 还可以这样分成功能模块
+	user: {
+		Info: '/userinfo',
+	},
+}

service/error.ts

@@ -0,0 +1,29 @@
+import { AxiosError } from 'axios'
+
+// 服务器报错返回 Error 的时候的数据结构，可以和后端商量定义，但是所有接口的格式要统一
+export type ErrorResponse = {
+	status: number // http 状态码，这个是必须的
+	// 其他自定义类型类型
+}
+
+class AxiosRequestError extends Error {
+	data: ErrorResponse | undefined
+
+	raw: AxiosError
+
+	isUnAuthorized = false // 权限错误 401
+
+	isServerError = false // 服务器错误 500 等
+
+	constructor(status: number, message: string, raw: AxiosError, data?: ErrorResponse) {
+		// 调用父类「Error」的构造函数
+		super(message)
+		this.data = data // 后端返回的 data
+		this.raw = raw // axios 返回的原始数据
+		this.isUnAuthorized = status === 401
+		this.isServerError = status >= 500
+		this.message = this.message || '' //给用户展示的错误消息，后续可以自定义
+	}
+}
+
+export default AxiosRequestError

service/handleError.ts

@@ -0,0 +1,8 @@
+import { AxiosError } from 'axios'
+import AxiosRequestError, { type ErrorResponse } from './error'
+
+// 把 axios 的 错误 转成 我们已经封装的 AxiosRequestError 类，统一处理
+export function handleError(error: AxiosError | AxiosRequestError): AxiosRequestError {
+	const err = error instanceof AxiosRequestError ? error : new AxiosRequestError(error.response?.status || 1, error.message, error, error.response?.data as ErrorResponse)
+	return err
+}

service/request.ts

@@ -0,0 +1,26 @@
+import axios, { type AxiosInstance } from 'axios'
+import { handleError } from './handleError'
+
+function createRequestInstance(getServerUrl: () => string): AxiosInstance {
+	//获取域名
+	const serverUrl = window.location.origin;
+	//console.log(serverUrl);
+	const instance = axios.create({
+		timeout: 1000 * 60 * 5, // 超时时间
+		withCredentials: true, // 允许跨域携带cookie
+		baseURL: serverUrl, // 请求地址
+	})
+
+	instance.interceptors.response.use(
+		async res => {
+			return res
+		},
+		async err => {
+			err = await handleError(err)
+			return Promise.reject(err)
+		},
+	)
+	return instance
+}
+
+export default createRequestInstance

service/requestList.ts

@@ -0,0 +1,41 @@
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
+import createRequestInstance from './request'
+import { APIs } from './apiList'
+
+class API {
+	request!: ReturnType<typeof createRequestInstance>
+
+	get!: <T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig) => Promise<R>
+
+	delete!: <T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig) => Promise<R>
+
+	head!: <T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig) => Promise<R>
+
+	options!: <T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig) => Promise<R>
+
+	post!: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<R>
+
+	put!: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<R>
+
+	patch!: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<R>
+
+	constructor(options: { getServerUrl: () => string }) {
+		const request = createRequestInstance(options.getServerUrl)
+		this.request = request
+		this.post = request.post.bind(this)
+		this.put = request.put.bind(this)
+		this.get = request.get.bind(this)
+		this.delete = request.delete.bind(this)
+		this.head = request.head.bind(this)
+		this.options = request.options.bind(this)
+		this.patch = request.patch.bind(this)
+	}
+
+	// 这是 API 类的静态函数
+	async getUserInfo() {
+		const res = await this.get(APIs.user.Info)
+		return res
+	}
+}
+
+export default API

service/webRequest.ts

@@ -0,0 +1,35 @@
+import API from './requestList'
+import AxiosRequestError from './error'
+import { handleError } from './handleError'
+import { getProcessEnv } from '@/global/env'
+
+const $api = new API({
+	getServerUrl: () => {
+		return `${getProcessEnv('SERVER_URL') || ''}`
+	},
+})
+
+// 请求的拦截器
+$api.request.interceptors.request.use((config: any) => {
+	const headers = config.headers || {}
+	// 这个地方可以自定义请求头
+	config.headers = {
+		...headers,
+		language: 'en', // 这个是自定义的请求头，还可以加 token 等
+	}
+	return config
+})
+
+// 响应的拦截器
+$api.request.interceptors.response.use(undefined, async (err: AxiosRequestError) => {
+	err = handleError(err) // 调用我们自定义的 错误处理方法
+	if (err.isUnAuthorized) {
+		// 未授权的情况的处理
+	}
+	// 还可以自定义其他的情况的处理
+
+	return Promise.reject(err)
+})
+
+// 在 page 页面就可以直接调用这个 $api 请求接口
+export default $api

store/index.ts

@@ -0,0 +1,36 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+export const useStore = defineStore({
+	id: 'index',
+	state: () => ({
+		// 添加临时数据存储字段
+		tempApiData: {}, // 存储API返回的临时数据
+		serApiData: {}, // 存储API返回的临时数据
+		isEnglish: 'zh', // 判断是否是英文
+	}),
+	getters: {
+		// 获取临时API数据的getter
+		getTempApiData: state => state.tempApiData,
+	},
+	actions: {
+		// 保存API返回的临时数据
+		saveTempApiData(data: any) {
+			this.tempApiData = data
+		},
+		saveSerApiData(data: any) {
+			this.serApiData = data
+		},
+		// 判断是否是英文
+		setIsEnglish(value: string) {
+			this.isEnglish = value
+		},
+		// 清除临时数据
+		clearTempApiData() {
+			this.tempApiData = {}
+		},
+	},
+})
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
+}

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue'],
+	theme: {
+		extend: {
+			colors: {
+				dark: '#000',
+			},
+			screens: {
+			},
+			transitionDelay: {
+				'5000': '5000ms',
+			}
+		},
+	},
+	plugins: [],
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}