首页

.cursorrules

@@ -0,0 +1,28 @@
+# Role
+你是个具有优秀编程习惯的AI，但你也知道自己作为AI的所有缺陷，所以你总是遵守以下规则：
+
+## 架构选择
+1. 你的用户是没有学习过编程的初中生，在他未表明技术栈要求的情况下，总是选择最简单、易操作、易理解的方式帮助他实现需求，比如可以选择html/css/js就做到的，就不使用react或next.js的方式；
+2. 总是遵守最新的最佳实践，比如撰写Next.js 项目时，你将总是遵守Next.js 14版本的规范（比如使用app router而不是pages router），而不是老的逻辑；
+3. 你善于为用户着想，总是期望帮他完成最省力操作，尽量让他不需要安装新的环境或组件。
+
+# 本规则由 AI进化论-花生 创建，版权所有，引用请注明出处
+
+## 开发习惯
+1. 开始一个项目前先读取根目录下的readme文档，理解项目的进展和目标，如果没有，则自己创建一个；
+2. 在写代码时总是有良好的注释习惯，写清楚每个代码块的规则；
+3. 你倾向于保持代码文件清晰的结构和简洁的文件，尽量每个功能，每个代码组都独立用不同的文件呈现；
+4. 当遇到一个bug经过两次调整仍未解决时，你将启动系统二思考模式：
+   - 首先系统性分析导致bug的可能原因
+   - 提出具体的假设和验证思路
+   - 提供三种不同的解决方案，并详细说明每种方案的优缺点
+   - 让用户根据实际情况选择最适合的方案
+
+## 设计要求
+1. 你具有出色的审美，是apple inc. 工作20年的设计师，具有出色的设计审美，会为用户做出符合苹果审美的视觉设计；
+2. 你是出色的svg设计师，当设计的网站工具需要图像、icon时，你可以自己用svg设计一个。
+
+## 对话风格
+1. 总是为用户想得更多，你可以理解他的命令并询问他想要实现的效果；
+2. 当用户的需求未表达明确，容易造成误解时，你将作为资深产品经理的角色一步步询问以了解需求；
+3. 在完成用户要求的前提下，总是在后面提出你的进一步优化与迭代方向建议。

.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,42 @@
+<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',
+})
+</script>
+
+<style>
+#__nuxt{
+	height: 100%;
+	width: 100%;
+}
+  html,
+    body {
+        position: relative;
+        height: 100%;
+    }
+
+    body {
+        background: #eee;
+        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        color: #000;
+        margin: 0;
+        padding: 0;
+    }
+
+</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,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.box {
+    color: blue;
+}
+// 添加新的样式
+.Adelay-02 {
+	animation-delay: 0.2s;
+    animation-duration: 0.1s;
+}
+.Adelay-03 {
+	animation-delay: 0.3s;
+    animation-duration: 0.1s;
+}
+.Adelay-04 {
+	animation-delay: 0.4s;
+    animation-duration: 0.1s;
+}
+.Adelay-05 {
+	animation-delay: 0.5s;
+    animation-duration: 0.1s;
+}
+.Adelay-1 {
+	animation-delay: 1s;
+    animation-duration: 0.1s;
+}
+.Adelay-15 {
+	animation-delay: 1.5s;
+    animation-duration: 0.1s;
+}
+.Adelay-2 {
+	animation-delay: 2s;
+    animation-duration: 0.1s;
+}
+.Adelay-25 {
+	animation-delay: 2.5s;
+    animation-duration: 0.1s;
+}

assets/icons/arrow-right.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>图标/箭头右蓝</title>
+    <desc>Created with Sketch.</desc>
+    <g id="图标/箭头右蓝" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="路径" fill="#007AFF" fill-rule="nonzero" transform="translate(8.001801, 8.000000) scale(-1, 1) translate(-8.001801, -8.000000) " points="10.0036024 3.28929077 10.7107092 3.99639755 6.70675698 8.00016264 10.7107092 12.0036024 10.0036024 12.7107092 5.29289322 8"></polygon>
+    </g>
+</svg>

components/AppFooter.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="group_29 flex-col">
+    <div class="text-wrapper_57 flex-row">
+      <span class="text_69">联系我们</span>
+      <span class="text_70">就医指南</span>
+      <span class="text_71">科室导航</span>
+      <span class="text_72">联系我们</span>
+      <span class="text_73">就医指南</span>
+      <span class="text_74">科室导航</span>
+    </div>
+    <div class="block_4 flex-col"></div>
+    <div class="block_9 flex-row">
+      <div class="text-wrapper_58 flex-col justify-between">
+        <span class="text_75">地址：河南省信阳市XXXXXXXXXXX</span>
+        <span class="text_76">电话：0376-12345678</span>
+        <span class="text_77">邮箱：xys&#64;diwuyifuyuan.com</span>
+        <span class="text_78">地址：河南省信阳市XXXXXXXXXXX</span>
+        <span class="text_79">电话：0376-12345678</span>
+        <span class="text_80">邮箱：xys&#64;diwuyifuyuan.com</span>
+      </div>
+      <div class="text-wrapper_59 flex-col justify-between">
+        <span class="text_81">门诊就医流程</span>
+        <span class="text_82">住院就医流程</span>
+        <span class="text_83">医院位置</span>
+        <span class="text_84">门诊就医流程</span>
+        <span class="text_85">住院就医流程</span>
+        <span class="text_86">医院位置</span>
+      </div>
+      <div class="text-wrapper_60 flex-col justify-between">
+        <span class="text_87">内科五病区</span>
+        <span class="text_88">消化内科病区</span>
+        <span class="text_89">内科病区</span>
+        <span class="text_90">内科五病区</span>
+        <span class="text_91">消化内科病区</span>
+        <span class="text_92">内科病区</span>
+      </div>
+      <div class="text-wrapper_61 flex-col">
+        <span class="text_93">健康体检科</span>
+        <span class="text_94">中医科门诊</span>
+        <span class="text_95">妇产科门诊</span>
+        <span class="text_96">健康体检科</span>
+        <span class="text_97">中医科门诊</span>
+        <span class="text_98">妇产科门诊</span>
+      </div>
+      <div class="text-wrapper_62 flex-col">
+        <span class="text_99">健康体检科</span>
+        <span class="text_100">中医科门诊</span>
+        <span class="text_101">妇产科门诊</span>
+        <span class="text_102">健康体检科</span>
+        <span class="text_103">中医科门诊</span>
+        <span class="text_104">妇产科门诊</span>
+      </div>
+      <div class="section_5 flex-col"></div>
+      <div class="section_6 flex-col"></div>
+    </div>
+    <div class="text-wrapper_63 flex-row">
+      <span class="text_105">来院路线</span>
+      <span class="text_106">内科病区</span>
+      <span class="text_107">妇产科门诊</span>
+      <span class="text_108">妇产科门诊</span>
+      <span class="text_109">服务号</span>
+      <span class="text_110">订阅号</span>
+      <span class="text_111">来院路线</span>
+      <span class="text_112">内科病区</span>
+      <span class="text_113">妇产科门诊</span>
+      <span class="text_114">妇产科门诊</span>
+      <span class="text_115">服务号</span>
+      <span class="text_116">订阅号</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/css/index.css";
+</style>

components/AppHeader.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="box_32 flex-col">
+    <div class="section_1 flex-row justify-center" style="padding-top: 25px;">
+      <div class="box_1 flex-col"></div>
+      <div class="text_1">信阳第五人民医院LOGO</div>
+    </div>
+    <div class="section_2 flex-row">
+      
+      <div :class="isLinl==0?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=0">
+        <span class="text_2">首页</span>
+        <div v-if="isLinl==0" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==1?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=1">
+        <span class="text_3">医院概况</span>
+        <div v-if="isLinl==1" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==2?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=2">
+        <span class="text_3">党建工作</span>
+        <div v-if="isLinl==2" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==3?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=3">
+        <span class="text_3">医生团队</span>
+        <div v-if="isLinl==3" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==4?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=4">
+        <span class="text_3">科室介绍</span>
+        <div v-if="isLinl==4" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==5?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=5">
+        <span class="text_3">招聘信息</span>
+        <div v-if="isLinl==5" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==6?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=6">
+        <span class="text_3">健康科普</span>
+        <div v-if="isLinl==6" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==7?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=7">
+        <span class="text_3">院务公开</span>
+        <div v-if="isLinl==7" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==8?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=8">
+        <span class="text_3">患者服务</span>
+        <div v-if="isLinl==8" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==9?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=9">
+        <span class="text_3">紧急服务</span>
+        <div v-if="isLinl==9" class="group_3 flex-col"></div>
+      </div>
+      <div :class="isLinl==10?'group_2 flex-col':'group_4 flex-col'" @click="isLinl=10">
+        <span class="text_3">科研成果</span>
+        <div v-if="isLinl==10" class="group_3 flex-col"></div>
+      </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 isMenuOpen = ref(false)
+const { locale } = useI18n()
+const isLinl=ref(0)
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/index.css";
+</style>

components/icons/SearchIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" 
+          stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template> 

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,468 @@
+<template>
+	<div class="section_3 flex-col">
+		<div class="group_6 flex-col relative">
+			<swiper class="swiper-container w-full" :slides-per-view="1" @swiper="onSwiperNews"
+				v-bind="swiperOptionsNews" @slideChange="onSlideChangeNews">
+				<swiper-slide>
+					<img src="public/images/sw1.png" class="w-full"/>
+				</swiper-slide>
+			</swiper>
+			<div class="flex items-center justify-center gap-5 absolute w-full z-10 bottom-[80px]">
+				<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 0 ? '' : 'opacity-50'"></div>
+				<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 1 ? '' : 'opacity-50'"></div>
+				<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 2 ? '' : 'opacity-50'"></div>
+				<div class="w-[30px] bg-white h-[5px]" :class="activeIndex == 3 ? '' : 'opacity-50'"></div>
+			</div>
+		</div>
+		<!--第二块-->
+		<div class="flex-col er_back">
+			<div class="group_17 flex-col z-10">
+				<div class="box_35 flex-row justify-start" style="height: 167px;">
+					<div class="box_22 flex-col">
+						<span class="text_59">医院信息查询</span>
+						<span class="text_60">Hospital&nbsp;information&nbsp;inquiry</span>
+						<div class="group_26 flex-col">
+							<span class="text_61">请输入您要查询的内容</span>
+							<div class="group_27 flex-col">
+								<div class="group_28 flex-col">
+									<img src="public/images/ser.png" />
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="box_23 flex-col">
+						<div class="image-wrapper_7 flex-col i2">
+							<img class="image_16" referrerpolicy="no-referrer" src="public/images/k5.png" />
+						</div>
+						<span class="text_62">医院概况</span>
+						<span class="text_63">Hospital&nbsp;Overview</span>
+					</div>
+					<div class="box_24 flex-col">
+						<div class="image-wrapper_8 flex-col">
+							<img class="image_16" referrerpolicy="no-referrer" src="public/images/k1.png" />
+						</div>
+						<span class="text_64">患者服务</span>
+						<span class="paragraph_3">
+							Patient&nbsp;Services
+							<br />
+						</span>
+					</div>
+					<div class="box_25 flex-col">
+						<div class="image-wrapper_9 flex-col">
+							<img class="label_5" referrerpolicy="no-referrer" src="public/images/k4.png" />
+						</div>
+						<span class="text_65">医院位置</span>
+						<span class="text_66">Hospital&nbsp;location</span>
+					</div>
+				</div>
+				<div class="box_35 flex-row justify-start">
+					<div class="group_18 flex-col">
+						<div class="group_19 flex-col"></div>
+					</div>
+					<div class="group_36 flex-col justify-between">
+						<div class="box_14 flex-col">
+							<div class="image-text_20 flex-col justify-between">
+								<div class="image-wrapper_2 flex-col">
+									<img class="label_1" referrerpolicy="no-referrer" src="public/images/k6.png" />
+								</div>
+								<span class="text-group_6">紧急服务</span>
+							</div>
+							<span class="text_34">Emergency&nbsp;services</span>
+						</div>
+						<div class="box_15 flex-col">
+							<div class="section_4 flex-col">
+								<div class="block_2 flex-col align-center">
+									<div class="image-wrapper_3 flex-col">
+										<img class="label_2" referrerpolicy="no-referrer" src="public/images/k2.png" />
+									</div>
+								</div>
+								<span class="text_35">医生团队</span>
+								<span class="paragraph_2">
+									Doctor&nbsp;team
+									<br />
+									<br />
+								</span>
+							</div>
+						</div>
+					</div>
+					<div class="group_37 flex-col justify-between">
+						<div class="box_16 flex-col">
+							<div class="image-wrapper_4 flex-col">
+								<img class="image_10" referrerpolicy="no-referrer" src="public/images/k3.png" />
+							</div>
+							<span class="text_36">科室介绍</span>
+							<span class="text_37">Department&nbsp;Introduction</span>
+						</div>
+						<img class="image_11" referrerpolicy="no-referrer" src="public/images/ks1.png" />
+					</div>
+				</div>
+			</div>
+			<div class="flex-col z-10" style="flex-direction: row; margin: 0 auto;margin-top: 30px;">
+				<img class="image_12" referrerpolicy="no-referrer" src="public/images/ks4.png" />
+				<div class="box_26 flex-col">
+					<div class="group_38 flex-row justify-between">
+						<div class="image-wrapper_10 flex-col">
+							<img class="label_6" referrerpolicy="no-referrer" src="public/images/k7.png" />
+						</div>
+						<span class="text_67">医院简介</span>
+					</div>
+					<span class="text_68">
+						医院内设科室15个，现有专业技术人员109人，其中高级职称7人，中级职称25人，医院设有120张床位，拥有先进的医疗设备，如飞利浦螺旋CT、德国CE公司800mAX线机、意大利移动式床边X光机、日本心电监护仪、日本肺功能测量系统、人工肝、全自动肝病治疗仪、中心监护系统、纤维内窥镜系统、有创和无创呼吸系统、重症监护系统、心脏除颤系统、中心负压和供氧系统、自动心电分析系统、全自动生化分析系统、全自动血液和尿检测系统、全自动酶标仪、荷兰彩色B超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
+					</span>
+				</div>
+			</div>
+
+			<div class="z-10 justify-around align-center gap-10 san_count">
+				<!--左侧-->
+				<div class="w-[50%]">
+					<div class="align-center justify-between ">
+						<div class="align-center">
+							<img class="label_3" referrerpolicy="no-referrer" src="public/images/c2.png" />
+							<span class="text_38">通知公告</span>
+						</div>
+						<div class="flex-row align-center"
+							style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;">
+							<span class="text_39">查看更多</span>
+							<div class="group_22 flex-col">
+								<img src="public/images/right.png" />
+							</div>
+						</div>
+					</div>
+					<div class="mt-[20px]">
+						<div v-for="(item, index) in 3">
+							<div v-if="index == 0">
+								<img class="image_13" referrerpolicy="no-referrer" src="public/images/new.png" />
+							</div>
+							<div class="mt-[20px]">
+								<span class="text_41">国际交流添新篇发，合作共筑医疗梦&nbsp;意大利锡耶纳大学教</span>
+							</div>
+							<div class="mt-[10px]">
+								<span class="text_43">
+									与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
+								</span>
+							</div>
+							<div class="mt-[10px]">
+								<span class="text_45">2025-04-15</span>
+							</div>
+							<div class="mt-[10px]" v-if="index < 2">
+								<div class="box_19 flex-col"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w-[50%]">
+					<div class="align-center justify-between ">
+						<div class="align-center">
+							<img class="label_3" referrerpolicy="no-referrer" src="public/images/c1.png" />
+							<span class="text_38">医院动态</span>
+						</div>
+						<div class="flex-row align-center"
+							style="border: 1px solid #000;padding: 10px 20px;border-radius: 50px;">
+							<span class="text_39">查看更多</span>
+							<div class="group_22 flex-col">
+								<img src="public/images/right.png" />
+							</div>
+						</div>
+					</div>
+					<div class="mt-[20px]">
+						<div v-for="(item, index) in 3">
+							<div v-if="index == 0">
+								<img class="image_13" referrerpolicy="no-referrer" src="public/images/new1.png" />
+							</div>
+							<div class="mt-[20px]">
+								<span class="text_41">国际交流添新篇发，合作共筑医疗梦&nbsp;意大利锡耶纳大学教</span>
+							</div>
+							<div class="mt-[10px]">
+								<span class="text_43">
+									与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
+								</span>
+							</div>
+							<div class="mt-[10px]">
+								<span class="text_45">2025-04-15</span>
+							</div>
+							<div class="mt-[10px]" v-if="index < 2">
+								<div class="box_19 flex-col"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="box_33 flex-col">
+			<div class="box_2 flex-col">
+				<div class="text-wrapper_47 flex-row"><span class="text_13">医生团队</span></div>
+				<div class="box_34 flex-row">
+					<div class="group_9 flex-col">
+						<div id="swipen_next" style="cursor: pointer;">
+							<img class="w-[50px]" src="public/images/left.png" />
+						</div>
+					</div>
+					<swiper class="swiper-container h-full w-full" :slides-per-view="1" @swiper="onSwiperDoctor"
+						v-bind="swiperOptionsDoctor" @slideChange="onSlideChangeDoctor">
+						<swiper-slide v-for="item in 20">
+							<div class="group_10 flex-col">
+								<div class="image-text_15 flex-col justify-between">
+									<img class="image_3" referrerpolicy="no-referrer" src="public/images/y1.png" />
+									<div class="text-group_13 flex-row justify-between">
+										<span class="text_14">李商隐</span>
+										<span class="text_15">副主任医师</span>
+									</div>
+								</div>
+								<span class="text_16">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
+							</div>
+						</swiper-slide>
+					</swiper>
+
+					<div class="group_15 flex-col">
+						<div id="swipen_prev" style="cursor: pointer;">
+							<img class="w-[50px]" src="public/images/right2.png" />
+						</div>
+					</div>
+				</div>
+				<div class="flex-row mt-[20px]">
+					<div class="flex items-center justify-center gap-5 w-full z-10">
+						<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 0 ? '' : 'opacity-50'"></div>
+						<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 1 ? '' : 'opacity-50'"></div>
+						<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 2 ? '' : 'opacity-50'"></div>
+						<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedIndex == 3 ? '' : 'opacity-50'"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="bg-white pb-[50px]">
+			<div class="block_6 flex-row justify-center">
+				<div @click="card = 1" :class="['text-wrapper_12', card == 1 ? 'text-wrapper_12-is' : '', 'flex-col']">
+					<span class="text_29">先进设备</span>
+					<div v-if="card == 1" class="box_7 flex-col"></div>
+				</div>
+				<div @click="card = 2" :class="['text-wrapper_12', card == 2 ? 'text-wrapper_12-is' : '', 'flex-col']">
+					<span class="text_29">医院环境</span>
+					<div v-if="card == 2" class="box_7 flex-col"></div>
+				</div>
+				<div @click="card = 3" :class="['text-wrapper_12', card == 3 ? 'text-wrapper_12-is' : '', 'flex-col']">
+					<span class="text_29">荣誉资质</span>
+					<div v-if="card == 3" class="box_7 flex-col"></div>
+				</div>
+				<div @click="card = 4" :class="['text-wrapper_12', card == 4 ? 'text-wrapper_12-is' : '', 'flex-col']">
+					<span class="text_29">公益行动</span>
+					<div v-if="card == 4" class="box_7 flex-col"></div>
+				</div>
+			</div>
+
+			<div class="block_8 flex-row">
+				<div class="box_10 flex-col">
+					<div id="kkswipen_next" style="cursor: pointer;">
+						<img class="w-[50px]" src="public/images/left.png" />
+					</div>
+				</div>
+
+				<swiper class="swiper-container h-full w-full" :slides-per-view="4" @swiper="onSwiperKK"
+					v-bind="swiperOptionsKK" @slideChange="onSlideChangeKK">
+					<swiper-slide v-for="(item, index) in 32">
+						<div class="list-items_1 flex-col" :key="index">
+							<img src="public/images/t1.png">
+							<div class="text-wrapper_13 flex-col">
+								<span class="text_33">26人高压氧舱</span>
+							</div>
+						</div>
+					</swiper-slide>
+				</swiper>
+
+
+				<div class="box_11 flex-col">
+					<div id="kkswipen_prev" style="cursor: pointer;">
+						<img class="w-[50px]" src="public/images/right2.png" />
+					</div>
+				</div>
+			</div>
+			<div class="flex-row mt-[40px]">
+				<div class="flex items-center justify-center gap-5 w-full z-10">
+					<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 0 ? '' : 'opacity-50'"></div>
+					<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 1 ? '' : 'opacity-50'"></div>
+					<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 2 ? '' : 'opacity-50'"></div>
+					<div class="w-[20px] bg-[#57D1C8] h-[5px]" :class="activedKKIndex == 3 ? '' : 'opacity-50'"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { nextTick, ref } from 'vue'
+import 'swiper/css'
+import { Mousewheel, Navigation, Grid, EffectFade, Autoplay } from 'swiper/modules'
+import 'swiper/css/mousewheel'
+import 'swiper/css/navigation'
+import 'swiper/css/grid'
+import 'swiper/css/effect-fade'
+import 'swiper/css/autoplay'
+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()
+
+const card = ref(1);
+
+const activeIndex = ref(0);
+
+
+const onSlideChangeNews = (s) => {
+	activeIndex.value = s.realIndex;
+}
+
+// Swiper配置
+const swiperOptionsNews = {
+	autoplay: {
+		delay: 6000,
+		disableOnInteraction: false,
+	},
+	direction: 'horizontal',
+	slidesPerView: 1,
+	speed: 500,
+	effect: 'fade',
+	loop: true,
+	modules: [Navigation, EffectFade, Autoplay],
+	navigation: {
+		nextEl: '#swipen_prev',
+		prevEl: '#swipen_next',
+	},
+}
+// banner
+let newsSwiper: any = null
+const onSwiperNews = (swiper: any) => {
+	newsSwiper = swiper
+}
+// Swiper配置
+const swiperOptionsDoctor = {
+	direction: 'horizontal',
+	slidesPerView: 5,
+	slidesPerGroup: 5,
+	speed: 700,
+	loop: false,
+	modules: [Navigation],
+	navigation: {
+		nextEl: '#swipen_prev',
+		prevEl: '#swipen_next',
+	},
+}
+//医生团队
+const activedIndex = ref(0);
+let doctorSwiper: any = null
+const onSwiperDoctor = (swiper: any) => {
+	doctorSwiper = swiper
+}
+const onSlideChangeDoctor = (s) => {
+	activedIndex.value = s.snapIndex;
+}
+
+
+const swiperOptionsKK = {
+	direction: 'horizontal',
+	slidesPerView: 4,
+	slidesPerGroup: 4,
+	speed: 700,
+	loop: false,
+	modules: [Navigation, Grid],
+	grid: {
+		fill: 'column',
+		rows: 2,
+	},
+	navigation: {
+		nextEl: '#kkswipen_prev',
+		prevEl: '#kkswipen_next',
+	},
+}
+
+let kkSwiper = null;
+const activedKKIndex = ref(0);
+const onSwiperKK = (swiper: any) => {
+	kkSwiper = swiper
+}
+const onSlideChangeKK = (s) => {
+	activedKKIndex.value = s.snapIndex;
+}
+onMounted(() => {
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/css/index.css";
+
+@keyframes stroke {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes hover-stroke {
+	from {
+		stroke-dashoffset: 320;
+	}
+
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+.st0 {
+	fill: none;
+	stroke: #FFFFFF;
+	stroke-width: 3;
+	stroke-miterlimit: 3;
+}
+
+.st1 {
+	fill: none;
+	stroke: #FFFFFF;
+	stroke-width: 3;
+	stroke-miterlimit: 3;
+}
+
+.st2 {
+	fill: none;
+	stroke: #FFFFFF;
+	stroke-width: 3;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-miterlimit: 10;
+}
+
+/* 初始状态 - 全局设置 */
+.st0,
+.st1,
+.st2 {
+	stroke-dasharray: 320;
+	stroke-dashoffset: 0;
+}
+
+/* 页面加载时的动画 */
+.st0 {
+	animation: stroke 1.5s ease-in-out 0.5s forwards;
+}
+
+.st1 {
+	animation: stroke 1.5s ease-in-out 0.7s forwards;
+}
+
+.st2 {
+	animation: stroke 1.5s ease-in-out 0.9s forwards;
+}
+
+/* 然后应用新的悬停动画 */
+.box_23:hover .st0 {
+	animation: hover-stroke 1.5s ease-in-out 0.9 forwards;
+}
+
+.box_23:hover .st1 {
+	animation: hover-stroke 1.5s ease-in-out 0.1s forwards;
+}
+
+.box_23:hover .st2 {
+	animation: hover-stroke 1.2s ease-in-out 0.8s forwards;
+}
+</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"
+}