fix:公司官网新建

quanyawei

2024-01-02 9d7a259152195008e2ca84f9bc8bcbc96c7e17a9

fix:公司官网新建

 .eslintignore

New file
@@ -0,0 +1,17 @@
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html
src/assets

 .eslintrc.cjs

New file
@@ -0,0 +1,123 @@
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential'
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],

  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    // 参考 https://typescript-eslint.io/
    // 禁止// @ts-ignore
    'no-console': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    //要求函数和类方法有显式返回类型。
    '@typescript-eslint/explicit-function-return-type': 'off',
    //禁用any类型
    '@typescript-eslint/no-explicit-any': 'off',
    //除 import 语句外，不允许使用 require 语句。
    '@typescript-eslint/no-var-requires': 'off',
    //禁止空函数
    '@typescript-eslint/no-empty-function': 'off',
    //在定义变量之前禁止使用变量。
    '@typescript-eslint/no-use-before-define': 'off',
    //禁止 @ts-<directive> 注释或要求指令后有描述。
    '@typescript-eslint/ban-ts-comment': 'off',
    //禁止某些类型。
    '@typescript-eslint/ban-types': 'off',
    //禁止使用 ! 进行非空断言后缀运算符。
    '@typescript-eslint/no-non-null-assertion': 'off',
    //要求导出函数和类的公共类方法显式返回和参数类型。
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 参考 https://eslint.vuejs.org/rules/
    //强制执行自定义事件名称的特定大小写
    'vue/custom-event-name-casing': 'off',
    //强制执行属性顺序
    'vue/attributes-order': 'off',
    //强制每个组件都应位于自己的文件中
    'vue/one-component-per-file': 'off',
    //不允许在标签的右括号之前换行
    'vue/html-closing-bracket-newline': 'off',
    //强制每行的最大属性数
    'vue/max-attributes-per-line': 'off',
    //需要在多行元素的内容之前和之后换行
    'vue/multiline-html-element-content-newline': 'off',
    //需要在单行元素的内容之前和之后换行
    'vue/singleline-html-element-content-newline': 'off',
    //对模板中的自定义组件强制执行属性命名样式
    'vue/attribute-hyphenation': 'off',
    //强制执行自关闭风格
    'vue/html-self-closing': 'off',
    //禁止向模板添加多个根节点
    'vue/no-multiple-template-root': 'off',
    'vue/require-default-prop': 'off',
    //禁止向自定义组件中使用的 v-model 添加参数
    'vue/no-v-model-argument': 'off',
    //禁止使用箭头函数来定义观察者
    'vue/no-arrow-functions-in-watch': 'off',
    //禁止 <template> 上的key属性
    'vue/no-template-key': 'off',
    //禁止使用v-html以防止XSS攻击
    'vue/no-v-html': 'off',
    //支持 <template> 中的注释指令
    'vue/comment-directive': 'off',
    //禁止 <template> 中出现解析错误
    'vue/no-parsing-error': 'off',
    //禁止使用已弃用的 .native 修饰符（在 Vue.js 3.0.0+ 中）
    'vue/no-deprecated-v-on-native-modifier': 'off',
    //要求组件名称始终为多个单词
    'vue/multi-word-component-names': 'off',
    // 参考 http://eslint.cn/docs/rules/
    //禁止添加论据v-model 用于定制组件
    'no-v-model-argument': 'off',
    //禁止使用不必要的转义字符
    'no-useless-escape': 'off',
    //禁止稀疏数组
    'no-sparse-arrays': 'off',
    //禁止直接在对象上调用某些 Object.prototype 方法
    'no-prototype-builtins': 'off',
    //禁止条件中的常量表达式
    'no-constant-condition': 'off',
    //在定义变量之前禁止使用变量
    'no-use-before-define': 'off',
    //禁止指定的全局变量
    'no-restricted-globals': 'off',
    //不允许指定的语法
    'no-restricted-syntax': 'off',
    //在生成器函数中围绕*运算符强制执行一致的间距
    'generator-star-spacing': 'off',
    //不允许在return、throw、continue和break语句之后出现无法访问的代码
    'no-unreachable': 'off',
    //vue2只有一个节点但是vue3支持多个
    'no-multiple-template-root': 'off',
    //该规则旨在消除未使用的变量，函数和函数的参数。
    'no-unused-vars': 'error',
    //禁止case声明
    'no-case-declarations': 'off'
    //禁止console
  }
}

 .gitignore

New file
@@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
.DS_Store
dist
dist-ssr
coverage
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

*.tsbuildinfo

 .prettierignore

New file
@@ -0,0 +1,8 @@
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
npm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

 .prettierrc.cjs

New file
@@ -0,0 +1,39 @@
module.exports = {
  // 一行最多多少个字符
  printWidth: 150,
  // 指定每个缩进级别的空格数
  tabWidth: 2,
  // 使用制表符而不是空格缩进行
  useTabs: true,
  // 在语句末尾打印分号
  semi: true,
  // 使用单引号而不是双引号
  singleQuote: true,
  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
  quoteProps: 'as-needed',
  // 在JSX中使用单引号而不是双引号
  jsxSingleQuote: false,
  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
  trailingComma: 'es5',
  // 在对象文字中的括号之间打印空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
  arrowParens: 'always',
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
  rangeStart: 0,
  rangeEnd: Infinity,
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准 always\never\preserve
  proseWrap: 'preserve',
  // 指定HTML文件的全局空格敏感度 css\strict\ignore
  htmlWhitespaceSensitivity: 'css',
  // Vue文件脚本和样式标签缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
  endOfLine: 'lf'
}

 .prettierrc.json

New file
@@ -0,0 +1,8 @@
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

 .stylelintignore

New file
@@ -0,0 +1,4 @@
/node_modules/*
/dist/*
/html/*
/public/*

 .stylelintrc.cjs

New file
@@ -0,0 +1,45 @@
// @see https://stylelint.bootcss.com/

module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
    'stylelint-config-prettier' // 配置stylelint和prettier兼容
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ],
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', '**/*.md', '**/*.yaml'],
  /**
   * null  => 关闭该规则
   * always => 必须
   */
  rules: {
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'] // 忽略属性，修改element默认样式的时候能使用到
      }
    ]
  }
}

 .vscode/extensions.json

New file
@@ -0,0 +1,8 @@
{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

 README.md

@@ -1,4 +1,52 @@
## moral_vue_website
# vue-project

vue官网
This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
npm run test:unit
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

 env.d.ts

New file
@@ -0,0 +1 @@
/// <reference types="vite/client" />

 favicon.ico

 index.html

New file
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>七星瓢虫环境科技-大气污染解决方案 空气监测 臭氧与PM2.5协同管控</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,55 @@
{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
  "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
  "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@types/lodash": "^4.14.202",
    "element-plus": "^2.4.4",
    "pinia": "^2.1.7",
    "scrollreveal": "^4.0.9",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.23.3",
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/jsdom": "^21.1.6",
    "@types/node": "^18.19.3",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.4.3",
    "@vue/tsconfig": "^0.5.0",
    "eslint": "^8.49.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^5.1.2",
    "eslint-plugin-vue": "^9.19.2",
    "jsdom": "^23.0.1",
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",
    "sass": "^1.69.5",
    "typescript": "~5.3.0",
    "vite": "^5.0.10",
    "vitest": "^1.0.4",
    "vue-eslint-parser": "^9.3.2",
    "vue-tsc": "^1.8.25"
  }
}

 public/favicon.ico

 src/App.vue

New file
@@ -0,0 +1,29 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import headerNav from './components/headerNav.vue'
import footerInfor from './components/footerInfor.vue'
</script>

<template>
  <div>
    <headerNav />
    <RouterView />
    <footerInfor />
  </div>
  <!-- <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header> -->

  <!-- <RouterView /> -->
</template>

<style scoped></style>

 src/assets/base.css

New file
@@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 src/assets/image/1-1F12Q624570-L.jpg

 src/assets/image/1-210115110925X6.jpg

 src/assets/image/1-210115110FC91.jpg

 src/assets/image/1-210115110IHN.jpg

 src/assets/image/1-210115110S1491.png

 src/assets/image/1-210126144130309.jpg

 src/assets/image/1-21012614420RK.jpg

 src/assets/image/1-210126144304346.jpg

 src/assets/image/1-210126144344S3.jpg

 src/assets/image/1-210126144S1311.jpg

 src/assets/image/1-210126144T0917.jpg

 src/assets/image/1-210126144ZY93.jpg

 src/assets/image/1-210126145121156.jpg

 src/assets/image/1-210126145324G7.jpg

 src/assets/image/1-210126145343491.jpg

 src/assets/image/1-21012614555B94.jpg

 src/assets/image/1-210126145920433.jpg

 src/assets/image/1-210126145955414.jpg

 src/assets/image/1-210126145T2435.jpg

 src/assets/image/1-210126150151245.jpg

 src/assets/image/1-210126150355622.jpg

 src/assets/image/1-210126150I41W.png

 src/assets/image/1-210126150P31M.png

 src/assets/image/1-2109161410130-L.jpg

 src/assets/image/1-210916141233G9.png

 src/assets/image/1-21091614124QB.jpg

 src/assets/image/1-21091614130RW.jpg

 src/assets/image/1-21091614132U58.jpg

 src/assets/image/1.jpg

 src/assets/image/2.jpg

 src/assets/image/3.jpg

 src/assets/image/4.jpg

 src/assets/image/aboutbanner.png

 src/assets/image/banner.jpg

 src/assets/image/bannerCenter.png

 src/assets/image/bannerIcon1.png

 src/assets/image/bannerIcon1ck.png

 src/assets/image/bannerIcon2.png

 src/assets/image/bannerIcon2ck.png

 src/assets/image/bannerIcon3.png

 src/assets/image/bannerIcon3ck.png

 src/assets/image/bannerIcon4.png

 src/assets/image/bannerIcon4ck.png

 src/assets/image/bannerIcone1Childre1.png

 src/assets/image/bannerIcone1Childre2.png

 src/assets/image/bannerIcone1Childre3.jpg

 src/assets/image/bannerIcone1Childre4.png

 src/assets/image/bannerIcone2Childre1.png

 src/assets/image/bannerIcone2Childre2.png

 src/assets/image/bannerIcone2Childre3.png

 src/assets/image/bannerIcone2Childre4.png

 src/assets/image/bannerIcone3Childre1.png

 src/assets/image/bannerIcone3Childre2.jpg

 src/assets/image/bannerIcone3Childre3.png

 src/assets/image/bannerIcone3Childre4.png

 src/assets/image/bannerIcone4Childre1.png

 src/assets/image/bannerIcone4Childre2.png

 src/assets/image/bannerIcone4Childre3.png

 src/assets/image/bannerIcone4Childre4.png

 src/assets/image/bg_hinLine.png

 src/assets/image/con_icon1.png

 src/assets/image/contactbanner.png

 src/assets/image/foot_bg.jpg

 src/assets/image/header_logo.png

 src/assets/image/icon1.png

 src/assets/image/icon1children.png

 src/assets/image/icon2.png

 src/assets/image/icon2children.png

 src/assets/image/icon3.png

 src/assets/image/icon3children.png

 src/assets/image/icon4.png

 src/assets/image/icon4children.jpg

 src/assets/image/icon_down.png

 src/assets/image/icon_now.png

 src/assets/image/licheng_bg.jpg

 src/assets/image/location.jpg

 src/assets/image/nesIndex1-1.jpg

 src/assets/image/nesIndex1-2.jpg

 src/assets/image/newsbanner.png

 src/assets/image/parameter1.jpg

 src/assets/image/parameter2.jpg

 src/assets/image/parameter3.jpg

 src/assets/image/phone.png

 src/assets/image/phonemin.png

 src/assets/image/product1.jpg

 src/assets/image/product2.jpg

 src/assets/image/product3.jpg

 src/assets/image/product4.jpg

 src/assets/image/product5.jpg

 src/assets/image/product6.jpg

 src/assets/image/product7.jpg

 src/assets/image/productBanner.png

 src/assets/image/solutionmenu.jpg

 src/assets/image/solutionmenu1.jpg

 src/assets/image/solutionmenu2.png

 src/assets/image/weixinCode.jpg

 src/assets/image/wenhua_bg.jpg

 src/assets/logo.svg

New file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

 src/assets/main.css

New file
@@ -0,0 +1,126 @@
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}
html {
  font-size: 100%;
}
body {
  font-size: 1em;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

 src/components/footerInfor.vue

New file
@@ -0,0 +1,151 @@
<template>
  <div class="footerBox">
    <div class="content">
      <ul class="inforlist">
        <li v-for="item in footerinforList" :key="item.id">
          <div class="itemName">
            {{ item.name }}
          </div>
          <div v-for="(val, index) in item.list" :key="index" class="valName">
            <span
              @mouseenter="val.show = !val.show"
              @mouseleave="val.show = !val.show"
              :class="{ hoverBorderBg: val.show }"
              >{{ val.name }}</span
            >
          </div>
          <div v-if="item.id === '7'" style="text-align: center">
            <img src="../assets/image/weixinCode.jpg" style="width: 45%" />
            <p style="margin-top: 10px; color: #919090">官网公众号</p>
          </div>
        </li>
      </ul>
      <div class="copyrightInfor">
        <div class="copyrightInfor_phone">
          <div>
            <span>版权所有 © 昆山市七星博士环境科技股份有限公司</span>
            <span
              ><a
                href="https://beian.miit.gov.cn"
                target="_blank"
                style="color: #919090; text-decoration: none; margin: 0 5px"
                >苏ICP备16043018号</a
              ></span
            >
            <span> 客服热线 0512--36871300</span>
          </div>
          <div>
            <span>技术支持：七星瓢虫环境科技</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const footerinforList = reactive([
  {
    name: '解决方案',
    id: '2',
    list: [
      { name: '臭氧&PM2.5协同管控', show: false, path: '/solution/o3-pm25' },
      { name: '涉气企业无组织排放断面管控', show: false, path: '/solution/o3-pm25' },
      { name: '环保管家服务', show: false, path: '/solution/o3-pm25' },
      { name: '更多详情', show: false, path: '/solution/o3-pm25' }
    ]
  },
  {
    name: '产品中心',
    id: '3',
    list: [
      { name: '23参数微型空气站', show: false, path: '/solution/o3-pm25' },
      { name: '大气环境智慧监测指挥平台', show: false, path: '/solution/o3-pm25' },
      { name: '无人机数据黑匣子监测系统', show: false, path: '/solution/o3-pm25' },
      { name: '一体化扬尘监测系统', show: false, path: '/solution/o3-pm25' },
      { name: '七星瓢虫温室气体监测系统', show: false, path: '/solution/o3-pm25' }
    ]
  },
  {
    name: '新闻中心',
    id: '4',
    list: [
      { name: '公司新闻', show: false, path: '' },
      { name: '行业新闻', show: false, path: '' }
    ]
  },
  {
    name: '关于我们',
    id: '5',
    list: [
      { name: '品牌故事', show: false, path: '' },
      { name: '发展历程', show: false, path: '' },
      { name: '企业文化', show: false, path: '' }
    ]
  },
  {
    name: '联系我们',
    path: '/contact',
    id: '6',
    show: false,
    list: [
      { name: '全国服务热线：0512--36871300', show: false, path: '' },
      { name: '公司邮箱：', show: false, path: '' }
    ]
  },
  { name: '关注我们', id: '7', list: [] }
])
</script>

<style scoped lang="scss">
.footerBox {
  // position: fixed;
  z-index: 100;
  width: 100%;
  bottom: 0;
}
.content {
  background: #242426 url(../assets/image/foot_bg.jpg) center top no-repeat;
}
.inforlist {
  padding: 1.8em 0 1em;
  width: 80%;
  display: flex;
  justify-content: space-around;
  color: #fff;
  margin: 0 auto;
  li {
    width: 25%;
    padding: 0 15px;
    font-size: 12px;
  }
}
.itemName {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #585858;
}
.valName {
  color: #919090;
  line-height: 2.5em;
  font-size: 12px;
  display: block;
  cursor: pointer;
}
.hoverBorderBg {
  border-bottom: 1px solid #919090;
}
.copyrightInfor {
  border-top: 1px solid #585858;
}
.copyrightInfor_phone {
  width: 80%;
  margin: 0 auto;
  padding: 10px 0 20px 0;
  color: #919090;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
</style>

 src/components/headerNav.vue

New file
@@ -0,0 +1,199 @@
<template>
  <div class="header" v-cloak>
    <div class="top_nav">
      <div class="container">
        <div class="logo">
          <img
            src="/src/assets/image/header_logo.png"
            title="七星瓢虫环境科技-大气污染解决方案 空气监测 臭氧与PM2.5协同管控"
          />
        </div>
        <div class="top-nav">
          <ul class="menuList">
            <li
              v-for="menu in menuList"
              :key="menu.id"
              @mouseenter="menu.show = !menu.show"
              @mouseleave="menu.show = !menu.show"
            >
              <div></div>

              <span class="navName" @click="goPage(menu)">
                <img v-if="menu.id === '7'" src="/src/assets/image/phone.png" class="phoneIcon" />
                {{ menu.name }}
              </span>
              <span v-if="menu.id !== '7'">|</span>
              <template v-if="menu.list.length > 0">
                <div class="overList" v-show="menu.show">
                  <div
                    @click="goPage(val)"
                    v-for="(val, index) in menu.list"
                    :key="index"
                    class="menuBox"
                    :class="{ hoverBg: val.show }"
                    @mouseenter="val.show = !val.show"
                    @mouseleave="val.show = !val.show"
                  >
                    <div>
                      {{ val.name }}
                    </div>
                  </div>
                </div>
              </template>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
let menuList = reactive([
  { name: '首页', path: '/', id: '1', show: false, list: [] },
  {
    name: '解决方案',
    path: '/solution',
    id: '2',
    show: false,
    list: [
      { name: '臭氧&PM2.5协同管控', show: false, path: '/solution', id: '2' },
      { name: '涉气企业无组织排放断面管控', show: false, path: '/solution', id: '21' },
      { name: '环保管家服务', show: false, path: '/solution', id: '22' },
      { name: '更多详情', show: false, path: '/solution', id: '23' }
    ]
  },
  {
    name: '产品中心',
    path: '/product',
    show: false,
    id: '3',
    list: [
      { name: '23参数微型空气站', show: false, path: '/product', id: '3' },
      { name: '大气环境智慧监测指挥平台', show: false, path: '/product', id: '31' },
      { name: '无人机数据黑匣子监测系统', show: false, path: '/product', id: '32' },
      { name: '一体化扬尘监测系统', show: false, path: '/product', id: '33' }
    ]
  },
  {
    name: '新闻中心',
    path: '/news',
    show: false,
    id: '4',
    list: [
      { name: '公司新闻', show: false, path: '/news', id: '4' },
      { name: '行业新闻', show: false, path: '/news', id: '41' }
    ]
  },
  {
    name: '关于我们',
    path: '/about',
    show: false,
    id: '5',
    list: [
      { name: '品牌故事', show: false, path: '/about', id: '5', hash: '#mian1' },
      { name: '发展历程', show: false, path: '/about', id: '51', hash: '#mian2' },
      { name: '企业文化', show: false, path: '/about', id: '52', hash: '#mian3' }
    ]
  },
  { name: '联系我们', path: '/contact', id: '6', show: false, list: [] },
  { name: '0512-36871300', path: '/contact', id: '7', show: false, list: [] }
])
const router = useRouter()
let goPage = (item: any) => {
  if (item.path !== '') {
    let hash = item.hash ? item.hash : ''
    router.push({ path: item.path, hash: hash, query: { name: item.name, id: item.id } })
  }
}
</script>

<style scoped lang="scss">
[v-cloak] {
  display: none;
}
body {
  margin: 0px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    /* width: 1170px; */
    width: 1270px;
  }
}
.header {
  position: fixed;
  z-index: 100;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding-top: 10px;

  .container {
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .top-nav {
      li {
        cursor: pointer;
        margin-right: 10px;
        color: #fff;
        font-weight: 900;
        font-size: 14px;
        position: relative;
        .navName {
          padding: 0.2em 1.5em;
          font-size: 0.875em;
          line-height: 57px;
          transition: 0.5s all;
          &:hover {
            color: #ff575a;
          }
        }
        .overList {
          position: absolute;
          width: 185px;
          left: 0;
          padding-bottom: 12px;
          transition: 0.5s all;
          background: rgba(0, 0, 0, 0.7);
          border-bottom-right-radius: 6px;
          border-bottom-left-radius: 6px;
          margin-left: -35px;
          overflow: hidden;
          padding-top: 6px;
          box-shadow: 0 0 2px #ccc inset;
          text-align: center;
          .menuBox {
            padding: 10px;
            font-size: 12px;
            border-bottom: 1px solid #f2f2f2;
          }
        }
      }
    }
  }
}
.menuList {
  display: flex;
}
.hoverBg {
  background: #ff575a;
}
.phoneIcon {
  vertical-align: middle;
}
</style>

 src/components/onlineContact.vue

New file
@@ -0,0 +1,77 @@
<template>
  <div class="content">
    <div>
      <h1 style="margin-left: 1%; font-size: 22px">在线留言</h1>
      <div style="width: 100%; background: #eee; padding: 15px; font-size: 14px">
        请在此留下您的问题，我们将及时与您取得联系，谢谢您的留言！
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-form :model="formInline" label-width="100px">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="联系人：">
              <el-input label="large" v-model="formInline.user" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话：">
              <el-input label="large" v-model="formInline.phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电子邮箱：">
              <el-input v-model="formInline.email" label="large" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <div>
          <el-form-item label="留言内容：">
            <el-input v-model="formInline.date" label="large" type="textarea" style="width: 100%" />
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 50px">
          <el-button type="info" @click="onSubmit">提交内容</el-button>
          <el-button type="info" @click="resetForm">重新填写</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
const formInline = reactive({
  user: '',
  phone: '',
  email: '',
  date: ''
})

const onSubmit = () => {
  ElMessage({
    message: '提交成功！',
    type: 'success'
  })
}
const resetForm = () => {
  formInline.user = ''
  formInline.email = ''
  formInline.phone = ''
  formInline.date = ''
}
</script>

<style scoped>
.content {
  margin-top: 50px;
  width: 1270px;
  margin: 0 auto;
}
h1 {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>

 src/index.d.ts

New file
@@ -0,0 +1 @@
declare module 'scrollreveal'

 src/main.ts

New file
@@ -0,0 +1,14 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/main.css'
const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

 src/router/index.ts

New file
@@ -0,0 +1,63 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { createRouter, createWebHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/homePage.vue')
    },
    // 解决方案
    {
      path: '/solution',
      name: 'solution',
      component: () => import('../views/solution.vue')
    },
    // 产品中心
    {
      path: '/product',
      name: 'product',
      component: () => import('../views/product.vue'),
      children: [
        {
          path: 'productDetail',
          name: 'productDetail',
          component: () => import('../views/productDetail.vue')
        }
      ]
    },
    // 新闻中心
    {
      path: '/news',
      name: 'news',
      component: () => import('../views/news.vue')
    },
    // 关于我们
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about.vue')
    },
    // 联系我们
    {
      path: '/contact',
      name: 'contact',
      component: () => import('../views/contact.vue')
    }
  ],
  // eslint-disable-next-line no-unused-vars
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
    return { top: 0 }
  }
})

export default router

 src/stores/counter.ts

New file
@@ -0,0 +1,12 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

 src/types/index.d.ts

New file
@@ -0,0 +1 @@
declare module 'scrollreveal'

 src/utils/newDetail.json

New file
@@ -0,0 +1,376 @@
{
  "data": [
    {
      "index": 0,
      "name": "总决赛，我们来了",
      "abstract": "摘要：近期，第九届创业江苏科技创业大赛暨第十届中国创新创业大赛江苏赛区节能环保行业赛，在江苏宜兴成功举办。 本届大赛呈现 三个聚焦的特点：一是聚焦关键核心技术遴选优质项目；...",
      "time": "2021-09-16 14:22",
      "content": [
        {
          "type": "text",
          "content": "近期，第九届“创业江苏”科技创业大赛暨第十届中国创新创业大赛江苏赛区节能环保行业赛，在江苏宜兴成功举办。"
        },
        {
          "type": "image",
          "content": "@/assets/image/nesIndex1-1.jpg"
        },
        {
          "type": "text",
          "content": "本届大赛呈现 “三个聚焦”的特点：一是聚焦关键核心技术遴选优质项目；二是集成创新创业资源服务企业；三是聚焦企业家精神讲好江苏科技创业故事，展现新时代企业家精神，积极营造鼓励创新、支持创业的良好氛围。"
        },
        {
          "type": "image",
          "content": "@/assets/image/nesIndex1-2.jpg"
        },
        {
          "type": "text",
          "content": "本次大赛共有<span class='numFont'>6000</span>多个报名项目，经历过地方赛及各区市有关部门初审严选后，共有来自全省各地的<span class='numFont'>569</span>个创业创新项目及团队同场竞技，其中节能环保行业共有近100家企业、项目参赛。<br>七星瓢虫环境科技（苏州）有限公司携<strong>PM2.5&臭氧协同管控服务项目</strong>参与了角逐。大会现场，我司代表从行业背景、产品应用以研发，以及公司发展战略等方面对PM2.5&臭氧协同管控服务项目进行了阐述，获得来自大赛评委、专家老师的一致认可，取得了“优秀企业“的荣誉，并荣获江苏赛区节能环保行业第五名的佳绩，成功晋级总决赛。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210916141233G9.png"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-21091614124QB.jpg"
        },
        {
          "type": "text",
          "content": "七星瓢虫环境科技（苏州）有限公司精研于<strong>PM2.5&</strong>臭氧协同管控的客制化服务。近年来在大气污染防治领域，依托公司创新性提出的“截控防治”的治理理念，与全国多地政府达成了深度合作。以河北沧州举例，在七星瓢虫团队服务一年后，沧州的京津冀及周边地区<span class='numFont'>“2+26”</span>城市排名从<span class='numFont'>13</span>名上升至第二名，仅次于北京，<span class='numFont'>168</span>”城市综合指数排名从倒数<span class='numFont'>19</span>名上升至倒数<span class='numFont'>51</span>名，上升<span class='numFont'>32</span>位，成绩远超预期，并与沧州政府续签了服务合作。 "
        },
        {
          "type": "image",
          "content": "@/assets/image/1-21091614130RW.jpg"
        },
        {
          "type": "text",
          "content": " 七星瓢虫环境科技（苏州）有限公司从<span class='numFont'>17</span>年成立开始，深耕大气监测、污染防治领域。经多年的研究成果积淀，谋定而后动。公司从研发生产到业务销售面，从执行发展到战略规划都不断夯实自身，谋划全局，展望未来。"
        },
        {
          "type": "text",
          "content": " 七星瓢虫环境科技将始终秉持“敬天爱人，乐业安道”的核心价值观，从研发、生产、销售、服务等全维度精益求精，继续深耕大气污染防治领域，实现“蓝天绿水中国梦”。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-21091614132U58.jpg"
        }
      ]
    },
    {
      "index": 1,
      "name": "七星瓢虫环境科技助力中国疾控中心",
      "abstract": "摘要：七星瓢虫环境科技脱颖而出，凭借七星博士室内空气在线连续监测设备FEI-S1及专业团队，成为了中国疾病预防控制中心近日发出的“室内空气在线连续监测设备采购”招标通知书的最终成交服务...",
      "time": "2021-02-19 16:09",
      "content": [
        {
          "type": "text",
          "content": "近期中国疾病预防控制中心近日发出<strong>“室内空气在线连续监测设备采购”</strong>的询价通知书，邀请各大行业龙头厂商参与项目投标报价。经过疾控中心专家评审小组的严格选拔，从设备功能、产品质量、品牌可靠度、市场认可度、合同报价等多个维度出发，最终七星瓢虫环境科技脱颖而出，凭借七星博士室内空气在线连续监测设备<strong>FEI-S1</strong>及专业团队，成为了本次项目的最终成交服务供应商。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126150355622.jpg"
        },
        {
          "type": "text",
          "content": "前些年来我们的生态环境问题遇到了如下几个现象"
        },
        {
          "type": "text",
          "content": "1、问题越来越严重"
        },
        {
          "type": "text",
          "content": " 2、人民需求越来越好"
        },
        {
          "type": "text",
          "content": "3、国家越来越重视"
        },
        {
          "type": "text",
          "content": "随着近年来国家政策的不断升华、人民环保意识的持续提升、环境治理手段的创新升级，人民对优美生态环境的需求正不断得到满足。"
        },
        {
          "type": "text",
          "content": "七星瓢虫环境科技专注于环保领域十余年，扎根空气质量改善领域颇有建树，现已建成室内&户外、民用&工业级、有组织&无组织排放监测、臭氧&PM2.5协同管控等多维度环境污染解决方案提供商。本次与中国疾控中心的合作，不仅凸显了这些年来七星瓢虫环境科技扎根在环境改善领域得到的市场认可，也反应了七星瓢虫致力于为祖国的绿水青山贡献自己一份力量的决心和成果。"
        },
        {
          "type": "text",
          "content": "任重道远，早日实现七星瓢虫的主张“天更蓝、水更清、山更绿、河更净、呼吸更顺，人民幸福指数更高；是我们七星瓢虫团队不断努力的目标。”"
        }
      ]
    },
    {
      "index": 2,
      "name": "势如破竹，七星瓢虫环境科技总部规划签约仪式",
      "abstract": "摘要：七星瓢虫环境科技与苏州越城建筑设计院在苏州举行七星瓢虫总部规划的战略签约仪式，双方就总部规划设计等多维度达成深度合作。未来基于双方的友好合作，积极推进七星瓢虫环境科技总部...",
      "time": "2021-02-19 16:08",
      "content": [
        {
          "type": "text",
          "content": " 近日，七星瓢虫环境科技与苏州越城建筑设计院在苏州举行七星瓢虫总部规划的战略签约仪式，双方就总部规划设计等多维度达成深度合作。未来基于双方的友好合作，积极推进七星瓢虫环境科技总部规划建设的顺利开展，实现优势互补，打造行业典范。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126145920433.jpg"
        },
        {
          "type": "text",
          "content": "七星瓢虫环境科技计划于2020年底前完成新总部大楼的施工图纸、方案及各所需报告的送审工作，并与2020年12月举行奠基仪式，破土动工。届时将建成集总部行政大楼、环境监测研究室、数据智慧中心、生产中心等多职能于一体的七星瓢虫环境科技总部。七星瓢虫环境科技董事长王雨池博士携总经理室、运行管理部等同事一行出席签约仪式。苏州越城建筑设计院吴建荣院长、刘德佐总经理及蒋秀珍副总等一并出席。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126145955414.jpg"
        },
        {
          "type": "text",
          "content": " 在本次的签约仪式中，双方畅谈起这次合作的机缘与未来的美好蓝图。七星瓢虫环境科技董事长王雨池博士表示，七星瓢虫环境科技是2013年开始孵化的科技型企业，这一路创业走来，包括七星瓢虫目前取得的成绩，不单单是自身的努力奋斗所得，也得到了社会各界的大力支持。"
        },
        {
          "type": "text",
          "content": "七星瓢虫环境科技作为目前国内环境监测领域的奔跑者，七年来始终坚持以创新驱动，技术引领，秉承“敬天爱人、乐业安道”的核心价值观大旗，联合中国环境科学院大气环境研究所、天津大学环境工程与工程学院合作成立“中国环境安监数据实验室”、“中国环境监测认证中心”，专注于研发环境监测设备、系统平台、环境数据的储存和分析，目前已输出包括七星博士VOC智慧监测系统、大气六参数设备、环境检测车、环境监测无人机、智能机器人、室内空气监测仪等在内的各系列产品，以实现设备、企业以及利益相关者之间的和谐共存。公司最先推出的FEI（环境评价系统）、“七星博士VOC智慧检测系统（含硬件采集设备和软件平台可视化分析系统）”，实现了实时对室内、工业、矿业、人口密集区及高危行业、地区的环境监测，并能准确判断具体污染物超标因子，为环保、安监及消防救援部门提供了准确的数据，做到事故提前预防，从而更大程度减少环境污染，减小伤亡及保护国家、人民财产安全。"
        },
        {
          "type": "text",
          "content": " 未来七星瓢虫环境科技在环境保护领域将继续秉承，一方面坚持提供给客户优异的产品和服务，另一方面坚持研发不断革新优化技术，为“全球更领先的环境数据服务商”这一伟大愿景努力奋斗，创新发展，努力推动。正在实现属于七星瓢虫环境科技自己的“绿水青山梦”"
        }
      ]
    },
    {
      "index": 3,
      "name": "脱颖而出，七星瓢虫代表江苏省出征全国大赛",
      "abstract": "摘要：第九届中国创新创业大赛地方赛暨第八届“创业江苏”科技创业大赛已经落下帷幕，经过全省共5480个企业和团队的激烈角逐，七星瓢虫环境科技（苏州）有限公司凭借“臭氧与PM2.5协同管控”“环...",
      "time": "2021-02-19 16:08",
      "content": [
        {
          "type": "text",
          "content": "第九届中国创新创业大赛地方赛暨第八届“创业江苏”科技创业大赛已经落下帷幕，经过全省共5480个企业和团队的激烈角逐，七星瓢虫环境科技（苏州）有限公司凭借“臭氧与PM2.5协同管控”“环保管家服务”等项目及董事长王雨池博士在大赛中的出色表现荣获佳绩，并获得代表江苏省“节能环保”行业出征全国大赛的荣誉。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-21012614555B94.jpg"
        },
        {
          "type": "text",
          "content": "七星瓢虫环境科技（苏州）有限公司作为孵化于2013年的企业，七年来始终坚持以创新驱动，技术引领，秉承“敬天爱人、乐业安道”的核心价值观大旗，在环境保护领域，一方面坚持提供给客户优异的产品和服务，另一方面坚持研发不断革新优化技术，为“全球更领先的环境数据服务商”这一伟大愿景努力奋斗，创新发展，努力推动。“科技创新 成就大业”，七星瓢虫环境科技将祖国的绿水青山梦当做自身企业的使命，为推动绿水青山成为民生福祉不懈奋斗。"
        }
      ]
    },
    {
      "index": 4,
      "name": "守护绿水青山，七星剑指科创",
      "abstract": "摘要：第八届“创业江苏”科技创业大赛节能环保行业赛暨中国第九届创新创业大赛江苏赛区比赛在宜兴环科园完美落幕。七星瓢虫环境科技本次受邀参加，并在全省共5480个企业和团队中脱颖而出，...",
      "time": "2021-02-19 16:07",
      "content": [
        {
          "type": "text",
          "content": "近日，第八届“创业江苏”科技创业大赛节能环保行业赛暨中国第九届创新创业大赛江苏赛区比赛在宜兴环科园完美落幕。七星瓢虫环境科技本次受邀参加，并在全省共5480个企业和团队中脱颖而出，凭借“臭氧与PM2.5协同管控”“环保管家服务”等项目，荣获并列第七名的成绩。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126145121156.jpg"
        },
        {
          "type": "text",
          "content": "本次大赛由七星瓢虫环境科技董事长王雨池博士作为答辩人，对项目进行了整体的分享。本次七星瓢虫分享的“臭氧与PM2.5协同管控”等项目，是基于团队自主研发的23参数微型空气站等硬件设备结合拥有全部知识产权的大气环境智慧监测指挥系统平台再加上我们专业的运维服务团队，贯彻“截、控、防、治”的治理理念，根据不同的区域环境属性定制化的环境监测系统级解决方案。比赛现场王雨池博士精彩的分享赢得了评委与观众的一致好评。现场王雨池博士就项目的市场环境、技术壁垒、前景分析以及项目目前的实际落地情况等多维度信息与各位评委及观众进行的分享探讨，得到了本次评委团队中专家代表及政府代表的一致认可与赞扬，并在赛后接受了新华日报记者的专访。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126145343491.jpg"
        },
        {
          "type": "text",
          "content": "作为此次行业赛的承办方中国宜兴的环保行业，经过40年的发展和沉淀，宜兴环保形成了其独特的魅力。不仅成为培养“独角兽”的沃土，也为中国环保产业的发展积蓄了众多新锐力量。今年在疫情防控常态化、经济发展面临诸多挑战的形势下，全省科技系统出台了一系列便利化的服务措施,努力帮助科技企业渡过难关，为进一步营造创新创业氛围，本次“创业江苏”科技创业大赛的开展也是为了引导更广大的社会力量投向科技创新创业，以最大力度地支撑科技成果转化、助力科技企业发展、培育和扶持经济发展新动能。"
        }
      ]
    },
    {
      "index": 5,
      "name": "对话央视：立足当下 创新未来",
      "abstract": "摘要：应央视邀请，在第二十一届环博会现场，七星瓢虫环境科技董事长王雨池博士接受了央视《品质》栏目的专访。双方就本次环博会上出现的新产品、新技术，以及当下环境中企业要如何破局等相...",
      "time": "2021-02-19 16:06",
      "content": [
        {
          "type": "text",
          "content": "应央视邀请，在第二十一届环博会现场，七星瓢虫环境科技董事长王雨池博士接受了央视《品质》栏目的专访。双方就本次环博会上出现的新产品、新技术，以及当下环境中企业要如何破局等相关话题进行深入的沟通探讨。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126144S1311.jpg"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126144T0917.jpg"
        }
      ]
    },
    {
      "index": 6,
      "name": "2020IEexp，七星瓢虫智构未来，策马扬帆",
      "abstract": "摘要：<span class='numFont'>2020</span>年第二十一届中国环博会日益临近。作为亚洲最具影响力、最高品质的环境技术交流盛会，本次展会荟集全球顶级污水处理、给水排水、固体废弃物处理、资源回收利用、大气污染治理、室...",
      "time": "2021-09-16 14:22",
      "content": [
        {
          "type": "text",
          "content": "2020年第二十一届中国环博会日益临近。作为亚洲最具影响力、最高品质的环境技术交流盛会，本次展会荟集全球顶级污水处理、给水排水、固体废弃物处理、资源回收利用、大气污染治理、室内空气污染治理、场地修复、环境监测、环境服务业等多个环境污染治理领域的前沿技术与最新解决方案。本次盛会展示的行业间的技术革新以及产业发展新的增长动能发酵也将成为业内持续热议的焦点。七星瓢虫环境科技作为行业奔跑者也将出席本次盛会。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210115110FC91.jpg"
        },
        {
          "type": "text",
          "content": "本次七星瓢虫环境科技将在新国际博览中心E5馆的C78&D79展位和各位行业同仁、各界领导围炉江湖。从七星瓢虫展馆图来看，颇具“未来科幻主义风格”。展位采用大面积的红黑撞色的设计元素，不仅贴合七星瓢虫品牌形象，更是充满未来科技感元素的标志色彩，而随意打破空间的几何形通透设计，让这一感觉更加强烈。除去大面积实墙外，一整面由LCD屏组成的液晶背板，形态新颖、标识化。七星瓢虫会在这儿进行硬件设备和软件平台等的实操演示。期待与各位在这里的相遇 。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210115110IHN.jpg"
        },
        {
          "type": "text",
          "content": "此次展会上七星瓢虫作为PM2.5&臭氧协同管控方案（AIPM）及涉气企业无组织排放企业断面管理方案提供商，将展出包括网格化空气质量监测系统（23参数微型空气站）、一体化扬尘监测系统、无人机环境数据黑匣子监测系统及中国大气环境智慧监测指挥平台等多样自主创新研发的软硬件设备。七星瓢虫从软硬件出发，结合客户实际需求，利用七星瓢虫本身强大的技术、研发能力及项目服务经验，由点及面，一站式提供各类环境监测、环保管控等解决方案。七星瓢虫真诚的欢迎广大行业同仁，各界领导等莅临参观，我们共同拓宽视野、开启思路、学习先进、交流合作。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210115110S1491.png"
        },
        {
          "type": "text",
          "content": "2020年是十三五收官之年，各项政策的深化，鼓励各主管单位、企业等扩大对环保领域的重视及投入，这也就影响着环境监测需求相应增加，市场增长空间较大。环境保护任务逐步向生态状况保护和环境风险预警领域拓展;从常规理化指标向有毒有害、生物、生态指标拓展，将促进细分技术领域专业化发展。同时环保领域是一个长期性，系统性，集约化的多维度共同作用的行业，这也就意味着环保事业绝不是一时之需，更不是面子工程。国家对生态环境的重点保护，人民对生存环境的强烈要求。也激励着我们这些环保人为自己所热爱的事业而孜孜不倦。让我们共同为中国环保事业的明天，为世界环境领域的未来，为人类美好生存家园的希冀策马扬帆。"
        }
      ]
    },
    {
      "index": 7,
      "name": "十五万平米展出的中国环境现状，七载刻画的七",
      "abstract": "摘要：为期三天的第21届中国环博会在上海新国际博览中心落下帷幕。15万平米的全景展览空间，24个国家与地区，近8万名专业观众全面呈现了大气、水、固废、土壤、噪声污染治理等全产业链，凝聚...",
      "time": "2021-09-16 14:22",
      "content": [
        {
          "type": "text",
          "content": "为期三天的第21届中国环博会在上海新国际博览中心落下帷幕。15万平米的全景展览空间，24个国家与地区，近8万名专业观众全面呈现了大气、水、固废、土壤、噪声污染治理等全产业链，凝聚了环保产业的协力，为环境产业复苏注入新的活力和动能。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-21012614420RK.jpg"
        },
        {
          "type": "text",
          "content": "基于全球疫情及近年来中美贸易战的影响，2020年对于全社会来说都是极具挑战性的一年，而且我们需要做好持久面对挑战的准备，环境产业亦是。从前几年金融去杠杆的影响中慢慢恢复中的行业，在遭遇到如此繁杂的不确定因素，很多企业面临前所未有的压力。七星瓢虫环境科技作为环境监测领域的奔跑者，在疫情当下不忘初心，始终坚持初心使命。在今年全球率先举办的环保行业大展中粉墨亮相。七星瓢虫在本届环博会展示新产品、新技术和新战略。用户端从全局考虑，为客户度身定制解决方案，推出“PM2.5&臭氧协同管控方案、涉气企业无组织排放企业断面管理方案等”；产业链端上下游互通有无，达成产业协同合作共赢，为在非常时期下的环保监测领域注入了新活力、新动能。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126144304346.jpg"
        },
        {
          "type": "text",
          "content": "此次展会上全方位的展示了七星瓢虫作为精耕在环境监测领域的奔跑者地位，吸引了众多业内朋友的广泛好评，不仅有老朋友的相互交流，探讨行业发展方向。也有新客户在主动了解七星的产品技术，理念及整体解决方案后与七星达成了初步的合作意向。对于本次展会而言，七星瓢虫以拓宽视野、开启思路、学习先进、交流合作为主,充分利用本次参展机会，与前来的参观的客户进行交流沟通洽谈，同时也进一步了解行业内不同的产品理念，以便更好地完善产品结构，发挥自身优势，服务更多的客户，为中国环境领域的发展，为绿水青山的未来贡献自己的一份能力。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126144344S3.jpg"
        },
        {
          "type": "text",
          "content": "七星瓢虫环境科技作为孵化于2013年的企业。七年来始终坚持以创新驱动，技术引领，秉承“敬天爱人、乐业安道”的核心价值观大旗，在环境保护领域，一方面坚持提供给客户优异的产品和服务，另一方面坚持研发不断革新优化技术，为“全球更领先的环境数据服务商”这一伟大愿景努力奋斗，创新发展，努力推动。正在实现属于七星瓢虫环境科技自己的“绿水青山梦”。"
        }
      ]
    },
    {
      "index": 8,
      "name": "生态环境部孙金龙发表《持续改善环境质量》",
      "abstract": "摘要：党的十九届五中全会通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》（以下简称《建议》）提出，持续改善环境质量。这是党中央深刻把握我国...",
      "time": "2021-02-19 16:10",
      "content": [
        {
          "type": "text",
          "content": "党的十九届五中全会通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》（以下简称《建议》）提出，持续改善环境质量。这是党中央深刻把握我国生态文明建设及生态环境保护形势，着眼美丽中国建设目标，立足满足人民日益增长的美好生活需要作出的重大战略部署。我们要深入学习领会习近平生态文明思想，准确把握持续改善环境质量的重要意义、重点任务和主要措施，坚决抓好贯彻落实。"
        },
        {
          "type": "image",
          "content": "@/assets/image/1-210126150P31M.png"
        },
        {
          "type": "text",
          "content": "充分认识持续改善环境质量的重要意义"
        },
        {
          "type": "text",
          "content": " “十三五”时期，在以习近平同志为核心的党中央坚强领导下，各地区各部门深入学习贯彻习近平生态文明思想，污染防治力度加大，生态环境明显改善，美丽中国建设迈出坚实步伐。截至目前，“十三五”规划纲要确定的生态环境9项约束性指标和污染防治攻坚战阶段性目标任务圆满完成。同时要看到，我国生态环境保护结构性、根源性、趋势性压力总体上尚未根本缓解，生态环保任重道远。“十四五”时期，必须毫不放松推进环境治理，持续改善环境质量，为人民群众提供更多优质生态产品。"
        },
        {
          "type": "text",
          "content": "持续改善环境质量是建设美丽中国的重要任务。《建议》提出，到2035年，广泛形成绿色生产生活方式，碳排放达峰后稳中有降，生态环境根本好转，美丽中国建设目标基本实现。建设美丽中国，良好的环境质量是重要标志。我们要锚定目标，对标对表，保持加强生态文明建设的战略定力，在改善环境质量上持续发力、久久为功，建设青山常在、绿水长流、空气常新的美丽中国。"
        },
        {
          "type": "text",
          "content": "持续改善环境质量是不断满足人民对美好生活新期待的必然要求。良好生态环境是最公平的公共产品，是最普惠的民生福祉。人民群众日益增长的优美生态环境需要已成为我国社会主要矛盾的重要内容，广大人民群众热切期盼良好生产生活环境。人民对美好生活的向往，就是我们的奋斗目标。我们要坚持以人民为中心，加快改善环境质量，让人民群众进一步享受到蓝天白云、繁星闪烁，清水绿岸、鱼翔浅底，鸟语花香、田园风光，不断提高对优美生态环境的获得感、幸福感、安全感。"
        },
        {
          "type": "text",
          "content": "持续改善环境质量是推动高质量发展的有力抓手。高质量发展是体现新发展理念的发展，生态环境高水平保护是重要方面。生态环境问题归根结底是发展方式和生活方式问题。改善环境质量，需要改变传统生产方式和消费方式，推动质量变革、效率变革、动力变革。在推动高质量发展过程中，污染防治和环境治理是需要跨越的一道重要关口。我们要充分发挥生态环境保护的引导和倒逼作用，以持续改善环境质量促进经济社会发展全面绿色转型，让绿色成为高质量发展的鲜明底色。"
        },
        {
          "type": "text",
          "content": "持续改善环境质量是解决生态环境领域突出问题的集中体现。当前，我国区域性、结构性污染问题依然突出，主要污染物排放量仍处于高位，环境质量特别是大气环境质量受自然条件变化影响较大，一些流域和地区水环境质量改善程度不高，土壤污染、危险废物、化学品等环境风险管控压力大。我们要坚持以改善环境质量为核心，聚焦突出问题，抓重点、补短板、强弱项，全面推进、加快解决。"
        },
        {
          "type": "text",
          "content": "准确把握持续改善环境质量的主要任务"
        },
        {
          "type": "text",
          "content": "《建议》坚持目标导向和问题导向相结合，提出持续改善环境质量的重点任务和主要举措。"
        },
        {
          "type": "text",
          "content": "深入打好污染防治攻坚战，继续开展污染防治行动。党的十八大以来，我们党和国家坚决向污染宣战，制定实施大气、水、土壤污染防治行动计划。各地区各部门聚焦打赢蓝天保卫战等标志性战役，坚决打赢打好污染防治攻坚战，预计可以实现阶段性目标任务。与2015年相比，2019年全国地表水优良水质断面比例上升8.9个百分点，劣五类断面比例下降6.3个百分点；细颗粒物未达标地级及以上城市年均浓度下降23.1%，全国337个地级及以上城市年均优良天数比例达到82%。同时，我国生态环境保护仍处于压力叠加、负重前行的关键期，生态环境质量改善成效并不稳固，稍有松懈就有可能出现反复，犹如逆水行舟，不进则退。要坚持方向不变、力度不减，突出精准治污、科学治污、依法治污，继续开展污染防治行动，深入打好蓝天、碧水、净土保卫战。"
        },
        {
          "type": "text",
          "content": "加强细颗粒物和臭氧协同控制，基本消除重污染天气。近年来大气污染治理成效显著，环境空气质量明显改善，细颗粒物浓度明显下降，重污染天气明显减少。但臭氧污染问题逐步显现，浓度呈逐年上升态势，成为影响环境空气质量的又一重要污染物，加强细颗粒物和臭氧协同控制成为改善环境空气质量的关键。要强化多污染物协同控制和区域协同治理，以细颗粒物和臭氧协同控制为主线，把产业结构、能源结构、运输结构、用地结构、农业投入结构调整摆到更加突出位置，突出抓好挥发性有机物和氮氧化物协同治理。加强重点区域、重点时段、重点领域治理。健全京津冀及周边地区、长三角地区、汾渭平原大气污染联防联控常态化机制，推动苏皖鲁豫交界等地区解决突出的区域性大气污染问题。夏季重点治理臭氧污染，秋冬季重点治理细颗粒物污染。以钢铁等行业为重点，大力推进工业炉窑综合治理；以石化等行业为重点，全面推进挥发性有机物综合治理。"
        },
        {
          "type": "text",
          "content": "治理城乡生活环境，基本消除城市黑臭水体。近年来，我国水污染防治工作全面推进。截至2019年底，累计完成2804个饮用水水源地10363个问题整改，地级及以上城市建成区黑臭水体消除比例达86.7%。但水环境质量改善地区间不平衡，不少城市和园区环境基础设施欠账较多，城乡面源污染防治亟待突破。要统筹水资源、水生态、水环境、水灾害，保好水、治差水、增生态用水。以河湖、海湾为抓手，推进美丽河湖、美丽海湾建设。以补齐城乡污水收集和处理设施短板为关键，推进城镇污水管网全覆盖，加强生活源污染治理。以企业和工业集聚区为重点，推进工业园区污水处理设施分类管理、分期升级改造。以降低氮磷负荷为着力点，加强农业源污染控制，推进化肥、农药减量化。因地制宜推进农村改厕、生活垃圾处理和污水治理，实施河湖水系综合整治，改善农村人居环境。"
        },
        {
          "type": "text",
          "content": "加强危险废物医疗废物收集处理，重视新污染物治理。作为全球化学品生产和消费大国，我国环境风险企业数量庞大、近水靠城，布局性、结构性风险突出。危险废物、医疗废物处置能力存在短板。随着新技术新材料新化学物质的广泛应用，新污染物日益引起关注。要着力提升危险废物环境监管、利用处置和环境风险防范能力。大力推进化学品环境风险管控，完成重点地区危险化学品生产企业搬迁改造。持续开展化学物质环境风险评估，加强风险控制和管理技术研究，加大对新污染物环境风险管控力度。加强海洋垃圾和微塑料治理，强化源头控制、及时清理和全生命周期管理。推进土壤污染治理，防控土壤污染风险，保障土壤环境安全。"
        },
        {
          "type": "text",
          "content": "积极参与和引领应对气候变化等生态环保国际合作。建设美丽家园是人类的共同梦想。面对生态环境挑战，人类是一荣俱荣、一损俱损的命运共同体。要秉承人类命运共同体理念，深度参与全球环境治理。积极履行应对气候变化承诺，提高国家自主贡献力度，推动构建公平合理、合作共赢的全球气候治理体系。扎实推进绿色“一带一路”建设，推动落实2030年可持续发展议程。以举办《生物多样性公约》第十五次缔约方大会为契机，推动达成2020年后全球生物多样性框架。"
        },
        {
          "type": "text",
          "content": "推进生态环境治理体系和治理能力现代化"
        },
        {
          "type": "text",
          "content": "《建议》以改革创新为动力，就强化体制机制保障提出明确要求，完善生态文明领域统筹协调机制，推动健全环境治理体系，形成全社会共同推进环境治理的良好格局。"
        },
        {
          "type": "text",
          "content": "增强全社会生态环保意识。良好的生态环境关系每个地区、每个行业、每个家庭，每个人都是生态环境的保护者、建设者、受益者。要加强生态环境保护宣传教育，大力弘扬生态文化。充分发挥各类媒体作用，大力宣传环保工作先进典型，及时曝光突出环境问题和整改情况。加大环境信息公开力度，健全环境决策公众参与机制。完善监督举报、环境公益诉讼等机制，鼓励和引导环保社会组织和公众参与环境污染监督治理。"
        },
        {
          "type": "text",
          "content": "建立地上地下、陆海统筹的生态环境治理制度。山水林田湖草是相互依存、紧密联系的生命共同体。一些污染问题表现在地下、在水里，根子却在地上、在岸上。要用系统论的思想方法看问题，从系统工程和全局寻求治理之道，按照生态系统的整体性、系统性及其内在规律，建立地下水、地表水、土壤污染协同防治制度，建立陆海统筹的海洋生态环境保护修复制度，进行整体保护、系统修复、综合治理。"
        },
        {
          "type": "text",
          "content": "全面实行排污许可制。排污许可制是落实企事业单位治污主体责任的有力举措，要全面实施，强化企业持证排污和按证排污，强化固定污染源全过程管理、多污染物协同控制。排污权、用能权、用水权、碳排放权市场化交易是用市场化机制激励节能减排减碳的一项基础性制度，要深入推进资源要素市场化改革，进一步完善各类产权交易机制，通过市场化的产权交易，优化资源配置，激发地区、企业保护环境的内生动力。"
        },
        {
          "type": "text",
          "content": "完善环境保护、节能减排约束性指标管理。环境质量、节能减排等指标作为国民经济和社会发展约束性指标，已成为推进生态环境保护的有力抓手。“十四五”时期要继续将相关指标作为约束性指标，分解落实到各地方，建立科学合理的考核评价体系，考核结果作为各级领导班子、领导干部综合考核评价和奖惩任免的重要依据，促进环境质量改善和相关工作落实。"
        },
        {
          "type": "text",
          "content": "完善中央生态环境保护督察制度。中央生态环境保护督察，是习近平总书记亲自倡导、亲自部署的重大改革举措和重大制度安排，推动解决了一大批长期想解决而没有解决的生态环境“老大难”问题，已成为推动落实生态环境保护“党政同责”“一岗双责”的硬招实招。要坚持以解决突出生态环境问题、改善生态环境质量、推动经济高质量发展为重点，完善中央和省级生态环境保护督察体系，不断健全工作程序、工作机制和工作方法，推动生态环境保护督察向纵深发展。"
        }
      ]
    }
  ]
}

 src/utils/productDetailData.json

New file
@@ -0,0 +1,197 @@
{
  "data": [
    {
      "id": 1,
      "name": "menuChilderFirst1",
      "describe": "七星瓢虫网格化空气质量监测系统（23参数微型空气站），主要由探头、供电组件、风速风向传感器以及安装支架等组成。其中探头主要由气体测量模块、光散射颗粒物测量模块、无线",
      "characteristic": "23参数微型空气中可全天候、连续、自动地监测环境空气中的AQI六参数（PM2.5、PM10、O3、CO、SO2、NO2），可扩展温度、湿度、风速、风向、气压、光照强度、噪声污染、非甲烷总烃、苯、甲苯、二甲苯、CO2、H2S、甲醛、TVOC、PM0.3个数、PM2.5个数等监测因子。快速、准确地收集、处理监测数据，能及时、准确地反映区域环境空气质量状况及变化规律。",
      "overview": [
        "七星瓢虫网格化空气质量监测系统（23参数微型空气站），主要由探头、供电组件、风速风向传感器以及安装支架等组成。"
      ],
      "parameter": {
        "type": "image",
        "src": "@/assets/image/parameter1.jpg"
      },
      "useInfor": [
        {
          "name": "1、全天候连续不间断",
          "content": "23参数微型空气站可全天候、连续、自动地监测环境空气中的监测因子",
          "type": "title"
        },
        {
          "name": "2、监测因子类型多样，支持定制",
          "content": "AQI六参数（PM2.5、PM10、O3、CO、SO2、NO2），可扩展温度、湿度、风速、风向、气压、光照强度、噪声污染、非甲烷总烃、苯、甲苯、二甲苯、CO2、H2S、甲醛、TVOC、PM0.3个数、PM2.5个数等监测因子",
          "type": "title"
        },
        {
          "name": "3、时效性高，精准度优秀",
          "content": "快速、准确地收集、处理监测数据，能及时、准确地反映区域环境空气质量状况及变化规律",
          "type": "title"
        }
      ]
    },
    {
      "id": 2,
      "name": "menuChilderFirst2",
      "describe": "七星瓢虫VOCs智慧在线监测系统FEI-F19是一种使用方便，用以快速检验空气中的非甲烷总烃、苯、甲苯、二甲苯、VOCs总量、温度、湿度、PM2.5、PM10含量的监测系统。",
      "characteristic": "1.精度高 2.对监测因子无破坏 3.响应时间段，寿命长 4.应用范围广",
      "overview": [
        "七星瓢虫VOCs智慧在线监测系统FEI-F19是一种使用方便，用以快速检验空气中的非甲烷总烃、苯、甲苯、二甲苯、VOCs总量、温度、湿度、PM2.5、PM10含量的监测系统。",
        "本系统设备关键部件是PID传感器VOC总量、苯、甲苯、二甲苯、非甲烷总烃；当空气通过仪器采样泵被吸入传感器时，检测器捕捉到离子化了的气体的正负电荷幵将其转化为电流信号实现气体浓度的测量；PM2.5和PM10传感器为光散射原理进行监测，电路加上通讯模块从而显示在屏幕上。经过标定后以ppm和mg/m3为单位显示出各因子的浓度。"
      ],
      "parameter": { "type": "image", "src": "@/assets/image/parameter2.jpg" },
      "useInfor": [
        {
          "name": "1. 精度高：",
          "content": "本仪器采用高精度的光离子化传感器，可以检测级别到ppb级别（十亿分之一）的有机气体，一般的光离子化气体传感器可以检测到ppm级别(百万分之一)的有机气体，精度超过红外传感器等常用的传感器。"
        },
        {
          "name": "2. 对检测气体无破坏性",
          "content": "光离子传感器在将气体吸入后将其电离，而气体分子形成的离子在放电后又形成了原先的气体分子，对原气体分子无破坏性。"
        },
        {
          "name": "3. 响应速度快，寿命长",
          "content": "除了在气体检测泵开机后预热的一段时间，在正常工作状态下，光离子气体传感器几乎可以实时做出反应，可以连续测试，在检测危险气体时对保障检测人员健康有重要意义，一般一支紫外灯的寿命数千小时，光离子传感器在此期间均可正常工作，有很长的使用寿命。"
        },
        {
          "name": "4. 应用范围广",
          "content": "光离子传感器对大多数有机和无机气体均可检测，可以广泛应用于化工、运输、军事、航天等领域。由于光离子化气体传感器对于检测物的浓度变化特别敏感，在初始个人防护确认、泄露区域确认、清除污染等方面有重要作用。"
        }
      ]
    },
    {
      "id": 3,
      "name": "menuChilderFirst3",
      "describe": "七星瓢虫 VOCs智慧监测系统FEI-F19是一种使用方便，用以快速监测大气环境多类因子参数的监测系统。",
      "characteristic": "1.精度高 2.对检测气体无破坏性 3.响应速度快，寿命长 4.应用范围广 5.灵敏度高（Sensitivity） 6.选择性（Selectivity） 7.稳定性好(Stability) 8.分辨率高(Resolution)",
      "overview": [
        "七星瓢虫 VOCs智慧监测系统FEI-F19是一种使用方便，用以快速监测空气:温度、湿度、风速、风向、气压、PM2.5、PM10、臭氧、一氧化碳、二氧化硫、二氧化氮、PM0.3个数，PM2.5个数、非甲烷总烃、苯、甲苯、二甲苯、二氧化碳、硫化氢、甲醛、VOCs总量、光照污染，噪声污染含量的监测系统。",
        "本设备关键部件是电化学SO2、CO、O2、H2S、O3、NO2、HCHO、ETO传感器，PID传感器VOCs总量、苯、甲苯、二甲苯、非甲烷总烃;电化学传感器当空气通过仪器采样泵被吸入传感器时，通过氧化还原反应，产生一个大小的和采样气中各监测因子的气体浓度成正比或反比的电流信号，PID传感器当空气通过仪器采样泵被吸入传感器时，检测器捕捉到离子化了的气体的正负电荷幵将其转化为电流信号实现气体浓度的测量；PM2.5和PM10传感器为光散射原理进行监测，电路加上通讯模块从而显示在屏幕上。经过标定后以ppm和mg/m3为单位显示出各因子的浓度。"
      ],
      "parameter": {
        "type": "image",
        "src": "@/assets/image/parameter3.jpg"
      },
      "useInfor": [
        {
          "name": "1.精度高",
          "content": "本仪器采用高精度的光离子化传感器，可以检测级别到ppb级别（十亿分之一）的有机气体，一般的光离子化气体传感器可以检测到ppm级别(百万分之一)的有机气体，精度超过红外传感器等常用的传感器。"
        },
        {
          "name": "2.对检测气体无破坏性",
          "content": "光离子传感器在将气体吸入后将其电离，而气体分子形成的离子在放电后又形成了原先的气体分子，对原气体分子无破坏性。"
        },
        {
          "name": "3.响应速度快，寿命长",
          "content": "除了在气体检测泵开机后预热的一段时间，在正常工作状态下，光离子气体传感器几乎可以实时做出反应，可以连续测试，在检测危险气体时对保障检测人员健康有重要意义，一般一支紫外灯的寿命数千小时，光离子传感器在此期间均可正常工作，有很长的使用寿命。"
        },
        {
          "name": "4.应用范围广",
          "content": "光离子传感器对大多数有机和无机气体均可检测，可以广泛应用于化工、运输、军事、航天等领域。由于光离子化气体传感器对于检测物的浓度变化特别敏感，在初始个人防护确认、泄露区域确认、清除污染等方面有重要作用。"
        },
        {
          "name": "5.灵敏度高（Sensitivity）",
          "content": "气体传感器的灵敏度通常是指其输出变化量(电信号)与被测输入变化量（气体浓度）的比值。对毒气传感器来说，最常见的单位为nA/ppm或者uA/ppm。"
        },
        {
          "name": "6.选择性（Selectivity）",
          "content": "选择性也被称为交叉灵敏度。可以通过测量由某一种浓度的干扰气体所产生的传感器响应来确定这个响应等价于一定浓度的目标气体所产生的传感器响应。选择性可以通过以下几种措施来改进：<br>(1) 对不同的目标气体，采用不同的催化剂配方制备相应的电极；<br>(2) 由于不同气体的最佳反应电位不一样，调整偏置电压也可以改进传感器的选择性；<br>(3) 选择合适的过滤材料也可以消除或者减小干扰气体的影响。"
        },
        {
          "name": "7.稳定性好(Stability) ",
          "content": "气体传感器的稳定性是在规定的工作条件下和一定的工作周期内，传感器的输出变化不超过允许误差的能力，它表示气体传感器对于气体浓度以外因素的抵抗能力。"
        },
        {
          "name": "8.分辨率高(Resolution)",
          "content": "传感器在规定测量范围内可能检测出的被测量的最小变化量。"
        }
      ]
    },
    {
      "id": 4,
      "name": "menuChilderSecone",
      "describe": "七星瓢虫大气环境智慧监测指挥平台，可将检测仪采集到的数据，通过大屏、PC端和手机APP等媒介将数据展示和一系列交互活动，可达到对环境质量安全的实时监控，主要可实现：客户端",
      "characteristic": "1.数据智能汇总，分析 2.响应精准迅速 3.定制化界面 4.多终端显示",
      "overview": [
        "七星瓢虫大气环境智慧监测指挥平台，可将检测仪采集到的数据，通过大屏、PC端和手机APP等媒介将数据展示和一系列交互活动，可达到对环境质量安全的实时监控，主要可实现：客户端登录、区域选择、实时监测数据、统计报表等，大数据可视化，日、月、年度各指数报表，不同对象、区域、时段、超标物等多维度对比。"
      ],
      "parameter": {
        "type": "title",
        "content": "响应时间0.1s<br>支持包括：PC、Mob、Pad、大屏等多终端显示<br>定制化交互页面，随项目调整等"
      },
      "useInfor": [
        {
          "name": "1、数据智能分析和汇总",
          "content": "同时可支持几十项监测数据的存储、搜索、分析和汇总"
        },
        {
          "name": "2.响应精准快速",
          "content": "具有实时、准确、快速的特点。平均每项数据响应时间约为0.1s（市面同类型产品的响应时间以分计，甚至以小时计，实时性欠佳）"
        },
        {
          "name": "3.界面可定制",
          "content": "管理员权限分区、分级别管理，责任权限明晰，更利于管理"
        },
        {
          "name": "4.三级警报",
          "content": "三级警报多种形式醒目展现，采取多种形式发送警报，报告警报等级、污染物等，并判断可能的险情及应对措施等。"
        }
      ]
    },
    {
      "id": 4,
      "name": "menuChilderThree",
      "describe": "无人机环境数据黑匣子监测系统是由FEI-F19气体监测模块+ H920无人机+ E90超清云台相机组成",
      "characteristic": "1.多监测因子，可定制化 2.实时传输，数据可查 3.机动性高，满足不同空间监测需求",
      "overview": [
        "无人机环境数据黑匣子监测系统是由FEI-F19气体监测模块+ H920无人机+ E90超清云台相机组成。是一种使用方便，用以快速监测空气中各项环境指数的监测系统。系统会对空气中各项环境指数进行监测，并实时将采集到的数据发送至云端服务器计算并存储。监测仪采集到的数据经后台分析，通过大屏、PC端和手机APP等媒介将数据进行展示和一系列交互活动。主要作用于检测大气空气质量AQI与应急检测有毒有害气体及核辐射和电磁辐射监测，其精度可以达到1ppb。改变了传统固定点的检测，使得气体检测、核辐射和电磁辐射监测变得灵活、快速、准确、方便。"
      ],
      "parameter": {
        "type": "title",
        "content": "<strong>无人机气体检测参数：</strong><br>适用：多旋翼无人机、固定翼<br>重量：820克<br>供电：12-24V<br>设备尺寸：200*100*52mm<br>数据传输方式：4G<br>通信协议：HJ212<br>工作环境温度：（-10~+40）℃<br>工作环境湿度：（15~95）%RH无凝露<br>设备寿命：气体器件寿命2年<br>产品规格：泵吸式<br>测量精度：ppb级<br>时间分辨率：2S"
      },
      "useInfor": [
        {
          "name": "数据储存功能：",
          "content": "实时记录当前数据，并对历史数据可查。"
        },
        {
          "name": "监测原理：",
          "content": "固体污染物为光散射、气态污染物为电化学和PID（光离子化气体检测器）、核辐射为碘化铯晶体等。"
        },
        {
          "name": "监测因子：",
          "content": " 经度、纬度、高度、速度、气压、温度、湿度、PM2.5、PM10、SO2、NO2、O3、CO、TVOC。"
        },
        {
          "name": "可扩展监测因子：",
          "content": "核辐射、H2S、HCL、HF、NH3、CL2、苯、甲苯、二甲苯、有机和无机气体等。"
        },
        {
          "name": "工作温度：",
          "content": " -10~+40℃"
        }
      ]
    },
    {
      "id": 5,
      "name": "menuChilderFour",
      "describe": "本仪器采用光散射原理工作。空气中的粉尘颗粒物在高能激光束照射下产生光散射效应，散射光强跟粉尘颗粒物浓度成正比，高灵敏的光电二极管接收到散射光，由光信号转换成电信号",
      "characteristic": "1.测量周期短 2.产品性能稳定可靠，功耗小",
      "overview": [
        "本仪器采用光散射原理工作。空气中的粉尘颗粒物在高能激光束照射下产生光散射效应，散射光强跟粉尘颗粒物浓度成正比，高灵敏的光电二极管接收到散射光，由光信号转换成电信号，电信号经过放大电路放大、单片机电路数字化处理、再按特定的数学模型计算，从而得出被检测污染源的粉尘浓度数，粉尘浓度的数据通过4G通讯传输到服务器，也可在显示屏上读取所检测到的粉尘浓度数。可实现全天候无人值守的粉尘浓度在线监测。",
        "主要应用于建筑扬尘、沙石场、堆煤场、秸秆焚烧、工业粉尘、燃煤、机动车尾气、道路扬尘、施工扬尘、堆场扬尘等无组织烟尘污染源排放及居民区、商业区、道路交通、施工区域等的环境空气质量的在线实时的自动监控。"
      ],
      "parameter": {
        "type": "image",
        "src": "@/assets/image/parameter7.jpg"
      },
      "useInfor": [
        {
          "name": "",
          "content": "一体化扬尘监测系统由颗粒物在线监测仪、传输系统、视频监控系统、后台数据处理系统及信息监控管理平台共四部分组成。系统集成了物联网、大数据和云计算技术，通过光散射在线监测仪、360球形摄像头、气象五参数采集设备和采集传输等设备，实现了实时、远程、自动监控颗粒物浓度；数据通过采用4G网络传输，可以在智能移动平台、桌面PC机等多终端访问；监控平台还具有多种统计和高浓度报警功能，可广泛应用在散货堆场和码头、混凝土搅拌站以及工厂企业无组织排放的实时监控。"
        }
      ]
    }
  ]
}

 src/utils/require.ts

New file
@@ -0,0 +1,10 @@
/* eslint-disable no-console */
const require = (imgPath: string) => {
  try {
    const handlePath = imgPath.replace('@', '..')
    return new URL(handlePath, import.meta.url).href
  } catch (error) {
    console.log(error)
  }
}
export default require

 src/utils/scroll.js

New file
@@ -0,0 +1,29 @@
// 导出配置的scrollReveal 如果这个方法需要传参 记得要给他传参哦
export default function retScroll(data) {
  data.scrollReveal.reveal('.scrollRevealDiv', {
    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'left',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '100px',
    // 其他可用的动画效果
    opacity: 0.01,
    // 执行速度 线性函数啥的
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: function (ele) {
      console.log(ele)
    }
  })
}

 src/views/about.vue

New file
@@ -0,0 +1,389 @@
<template>
  <div>
    <div class="bannerin">
      <img src="../assets/image/aboutbanner.png" alt="" />
    </div>
    <div class="menu_sild">
      <div class="container">
        <ul class="clearfix">
          <li @click="changeClickIndex(item)" v-for="item in menuList" :key="item.id">
            <span class="current" :class="{ clickCurrent: clickIndex.id === item.id }">{{
              item.name
            }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="contentBox">
      <!-- 品牌故事 -->
      <div class="brandStory" id="mian1">
        <div style="text-align: center">
          <p class="brandStory_title">品牌故事</p>
          <p class="brandStory_abstract">
            一家具备研发、生产、销售、服务于一体的综合性大气污染解决方案提供商
          </p>
        </div>
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="10" class="imgHover">
                <img src="../assets/image/1.jpg" style="width: 258px; height: 358px" />
              </el-col>
              <el-col :span="14">
                <div class="imgHover">
                  <img src="../assets/image/2.jpg" style="width: 359px; height: 176px" />
                </div>
                <div>
                  <el-row>
                    <el-col :span="12" class="imgHover">
                      <img src="../assets/image/3.jpg" style="width: 175px; height: 174px" />
                    </el-col>
                    <el-col :span="12" class="imgHover">
                      <img src="../assets/image/4.jpg" style="width: 175px; height: 174px"
                    /></el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div class="overview">
              <p>
                七星瓢虫环境科技（苏州）有限公司始创于2013年，坐落于江苏省苏州市。是一家具备研发、生产、销售、服务于一体的综合性大气污染解决方案提供商。
              </p>
              <p>
                经数年的突破性发展，业务广泛覆盖于大气污染防治的多领域，囊括大气环境诊断、大气监测、大气污染管控、大气数据信息服务等，形成了多维度、全链路、系统化的大气管控服务。
              </p>
              <p>
                近年来在七星瓢虫团队领头人王雨池博士的带领下创造性提出“截控防治”的大气环境改善理论体系，为行业升级提供了方法论支撑。从监测、治理、预防等环节将问题拆解、逐一攻破。并以此为指导，自主研发产品涵盖了“23参数微型空气站、大气环境智慧监测指挥平台、颗粒物激光雷达、无人机监测系统、走航监测车、一体化扬尘监测等在线监测设备，在大气污染治理领域实现了“天地人车”的立体维度管控。
              </p>
              <p>
                2021年公司位于张家港市总投资超5亿、占地四十亩的总部基地开工建设，落成后将建成设备生产基地、大气指挥中心、行业标准实验室等于一体的企业科技园。就此打开七星瓢虫环境科技发展的新篇章。
              </p>
              <p>
                七星瓢虫环境科技致力于大气环境防控领域，多年来秉承“敬天爱人，乐业安道”的核心价值观，已与多个省份、城市的环保主管部门等重要客户达成长期合作。策马扬帆，七星瓢虫扎根于大气环境领域，不断为政企客户提供更优质的系统级解决方案服务。勇往直前，七星瓢虫不忘初心，誓为“天更蓝、水更清、山更绿、河更净、呼吸更顺”这一企业伟大目标不断奋进。
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="history">
      <div class="history_wrap">
        <div class="contentBox" id="mian2">
          <div class="case_t1"><p>发展历程</p></div>
          <div class="history_list">
            <el-carousel
              ref="remarkCaruselUp"
              :interval="3000"
              arrow="always"
              indicator-position="none"
              @change="changeCarouselItem"
            >
              <el-carousel-item v-for="item in historyList" :key="item.id">
                <div class="history_list_item">
                  <div class="pull-left">{{ item.name }}</div>
                  <div class="pull-right" v-html="item.content"></div>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="hidden-xs">
              <ul>
                <li
                  v-for="item in historyList"
                  :key="item.id"
                  @click="changeCarouselItem(item.id)"
                  :class="{ liActive: changeCarouselIndex === item.id }"
                >
                  <span>{{ item.time }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="corporateCulture">
      <div class="contentBox" id="mian3">
        <div style="text-align: center"><p class="brandStory_title">企业文化</p></div>
        <div class="corporateCulture_title culture_con">
          <p class="culture_contit">【企业文化】</p>
          <p class="culture_contex">敬天爱人 乐业安道</p>
          <p class="culture_contit">【企业愿景】</p>
          <p class="culture_contex">全球更领先的环境数据信息服务商</p>
          <p class="culture_contit">【企业使命】</p>
          <p class="culture_contex">环境数据记录生存细节</p>
          <p class="culture_contex">环境数字改善民生品质</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
// import require from '@/utils/require'
const route = useRoute()
const router = useRouter()
onMounted(() => {
  console.log('router', route)
})
const menuList = reactive([
  {
    id: 0,
    name: '品牌故事'
  },
  {
    id: 1,
    name: '发展历程'
  },
  {
    id: 2,
    name: '企业文化'
  }
])
const historyList = reactive([
  {
    id: 0,
    time: '2013-2015',
    name: '立项期',
    content:
      '无人机监测项目立项<br>室内环境监测系统(商用)项目立项<br>智慧监测系统（VOCs）项目立项<br>FEI评价系统立项<br>减排大数据测评分析系统立项'
  },
  {
    id: 1,
    time: '2015-2017',
    name: '发展期',
    content:
      '工业采集终端装配安装成功<br>VOCs七大组成系统完成构建<br>VOCs智慧监测系统研发成功<br>知识产权储备达811项<br>大数据分析中心建立'
  },
  {
    id: 2,
    time: '2015-2017',
    name: '成熟期',
    content:
      '智慧监测系统指挥中心成立<br>获得高新技术企业证书<br>七星瓢虫高科技产业园立项建设<br>知识产权储备总数超1500项<br>大气污染解决方案提供商战略提出及实施'
  },
  {
    id: 3,
    time: '2021未来可期',
    name: '2021未来可期',
    content: '2021未来可期'
  }
])
const clickIndex = ref(menuList[0])
let changeCarouselIndex = ref(0)
let changeClickIndex = (item: any) => {
  clickIndex.value = item
}
let remarkCaruselUp = ref()
let changeCarouselItem = (index: any) => {
  changeCarouselIndex.value = index
  remarkCaruselUp.value.setActiveItem(index)
}
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    if (newValue.query.id === '51') {
      clickIndex.value = menuList[1]
    } else if (newValue.query.id === '52') {
      clickIndex.value = menuList[2]
    } else {
      clickIndex.value = menuList[0]
    }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.bannerin {
  position: relative;
  overflow: hidden;
  img {
    height: 588px;
    object-fit: cover;
    width: 100%;
  }
}
.menu_sild {
  border-bottom: 1px solid #ebebeb;
  .container {
    width: 1270px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .clearfix {
      li {
        cursor: pointer;
        display: inline-block;
        .current {
          display: block;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #555;
          &:hover {
            color: #ff575a;
            border-bottom: 2px solid #ff575a;
          }
        }
        .clickCurrent {
          color: #ff575a;
          border-bottom: 2px solid #ff575a;
        }
      }
    }
  }
}

.contentBox {
  width: 1270px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.brandStory {
  margin-bottom: 50px;
}
.brandStory_title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  display: inline-block;
  border-bottom: 1px solid #cccccc;
  margin: 0 auto 10px;
  padding: 1rem 0 20px;
}
.brandStory_abstract {
  text-align: center;
  color: #666;

  margin: 0 0 10px;
  margin-bottom: 40px;
}
.imgHover {
  overflow: hidden;
  img {
    transition: 1s all;
    &:hover {
      transform: scale(1.3);
    }
  }
}
.overview {
  width: 100%;
  height: 337px;
  overflow: auto;
  p {
    color: #555555;
    line-height: 30px;
    text-indent: 2em;
  }
}
.history_wrap {
  background: url('../assets/image/licheng_bg.jpg') center top no-repeat;
  height: 576px;
}
.case_t1 {
  text-align: center;
  p {
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-top: 90px;
    font-size: 32px;
    font-weight: bold;
    display: inline-block;
    margin: 0 auto 10px;
    padding: 1rem 0 20px;
  }
}
::v-deep .el-carousel__arrow--left,
::v-deep .el-carousel__arrow--right {
  height: 60px;
  width: 60px;
  border: 1px solid;
}
.hidden-xs {
  cursor: pointer;
  width: 1400px;
  height: 110px;
  bottom: 0;
  text-align: center;
  background: url('../assets/image/bg_hinLine.png') left 40px no-repeat;
  ul {
    display: flex;
    justify-content: center;
  }
  li {
    width: 170px;
    height: 110px;
    border: none;
    display: flex;
    color: #a4b9d8;
    font-size: 16px;
    text-align: center;
    &:nth-child(even) {
      align-items: end;
    }
  }

  .liActive {
    background: url('../assets/image/icon_now.png') center 25px no-repeat;
    background-position: 20% 0%;
    color: #fff;
    text-indent: 0;
    text-align: center;
  }
}

.history_list_item {
  padding-top: 50px;
  padding-left: 150px;
  display: flex;
}
.pull-left {
  display: inline-block;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  line-height: 41px;
  border-right: 2px solid #fff;
  padding-right: 20px;
  margin-right: 60px;
}
.pull-right {
  display: inline-block;
  width: 630px;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
}
.corporateCulture {
  background: url('../assets/image/wenhua_bg.jpg') center bottom no-repeat;
  min-height: 380px;
}
.culture_contit {
  font-size: 17px;
  color: #333;
  margin-left: 15px px;
  margin-right: 25px;
  margin-left: 10px;
}
.culture_contex {
  color: #777777;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 28px;
}
.culture_con p {
  writing-mode: tb-rl;
  float: right;
}
</style>

 src/views/contact.vue

New file
@@ -0,0 +1,161 @@
<template>
  <div>
    <div class="bannerin">
      <img src="../assets/image/contactbanner.png" alt="" />
    </div>
    <div class="menu_sild">
      <div class="container">
        <ul class="clearfix">
          <li @click="changeClickIndex(item)" v-for="item in menuList" :key="item.id">
            <span class="current" :class="{ clickCurrent: clickIndex.id === item.id }">{{
              item.name
            }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div style="text-align: center">
      <p class="brandStory_title">联系方式</p>
      <p class="case_t1">CONTACT US</p>
    </div>
    <div class="addresslist">
      <el-card class="box-card">
        <p class="con_tit con_tit1">昆山公司地址</p>
        <p class="con_tit3">址址：江苏省昆山市东辉路105号</p>
        <p class="con_tit3">电话：0512--36871300</p>
      </el-card>
      <el-card class="box-card">
        <p class="con_tit con_tit1">苏州公司地址</p>
        <p class="con_tit3">址址：江苏省苏州市相城区聚金路38号</p>
        <p class="con_tit3">电话：0512--36871300</p>
      </el-card>
      <el-card class="box-card">
        <p class="con_tit con_tit1">张家港总部地址（在建）</p>
        <p class="con_tit3">址址：江苏省张家港市塘桥镇妙桥商城路</p>
        <p class="con_tit3">电话：0512--36871300</p>
      </el-card>
    </div>
    <onlineContact></onlineContact>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import onlineContact from '@/components/onlineContact.vue'
// import require from '@/utils/require'
const route = useRoute()
const router = useRouter()
onMounted(() => {
  console.log('router', route)
})
const menuList = reactive([
  {
    id: 0,
    name: '联系方式'
  }
])
const clickIndex = ref(menuList[0])

let changeClickIndex = (item: any) => {
  clickIndex.value = item
}
watch(
  () => router.currentRoute.value.name,
  (newValue: any) => {
    console.log('newValue', newValue)
    // if (newValue === 'product') {
    // }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.bannerin {
  position: relative;
  overflow: hidden;
  img {
    height: 588px;
    object-fit: cover;
    width: 100%;
  }
}
.menu_sild {
  border-bottom: 1px solid #ebebeb;
  .container {
    width: 1270px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .clearfix {
      li {
        cursor: pointer;
        display: inline-block;
        .current {
          display: block;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #555;
          &:hover {
            color: #ff575a;
            border-bottom: 2px solid #ff575a;
          }
        }
        .clickCurrent {
          color: #ff575a;
          border-bottom: 2px solid #ff575a;
        }
      }
    }
  }
}

.brandStory_title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  display: inline-block;
  border-bottom: 1px solid #cccccc;
  margin: 0 auto 10px;
  padding: 1rem 0 20px;
}

.case_t1 {
  text-align: center;
  color: #666;
  margin-bottom: 40px;
}
.con_tit {
  padding-top: 28px;
  font-size: 20px;
  color: #333;
  line-height: 30px;
  padding-left: 40px;
  margin-left: 50px;
}
.con_tit1 {
  background: url('../assets/image/con_icon1.png') left bottom no-repeat;
}
.con_tit3 {
  font-size: 12px;
  line-height: 24px;
  margin-bottom: 0;
  padding: 0 50px;
}
.addresslist {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 50px;
}
.box-card {
  width: 375px;
  height: 271px;
}
</style>

 src/views/homePage.vue

New file
@@ -0,0 +1,361 @@
<template>
  <div class="content">
    <div class="banner_section">
      <img src="../assets/image/banner.jpg" alt="" />
    </div>
    <div class="myTab_menu">
      <ul class="bgbox">
        <li v-for="(item, index) in bgImageList" :key="index" class="imgList">
          <div
            class="itemBg"
            @click="changeBg(item)"
            :class="{ borRght: index === 3, clickBg: item.show === true }"
            :style="{
              background: 'url(' + item.src + ')'
            }"
          >
            <p>{{ item.name }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="tabBox">
      <div class="tab-pane">
        <el-row>
          <el-col :span="12">
            <img :src="handleSelectItem.childrenSrc" alt="" />
          </el-col>
          <el-col :span="12">
            <p class="tab-pane-title">{{ handleSelectItem.name }}</p>
            <p class="tab-pane-content">{{ handleSelectItem.content }}</p>
            <p class="tab-pane-button" @click="toDetail(handleSelectItem)">了解更多</p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="menuCenter">
      <ul class="nav-tabs">
        <li v-for="(item, index) in navTabsList" :key="index">
          <a
            :class="{ navClickBg: item.show === true }"
            @click="changeNavTab(item)"
            :style="{
              color: item.show === true ? '#e96769' : '#fff',
              background:
                item.show === false
                  ? 'url(' + item.src + ') 55px top no-repeat'
                  : '#fff url(' + item.srcck + ') 55px top no-repeat'
            }"
            >{{ item.name }}</a
          >
        </li>
      </ul>
    </div>
    <div class="navContent">
      <div>
        <p class="tab_con_tex1">
          {{ handleSelectNavTab.name }}
        </p>
        <p class="tab_con_tex2">
          {{ handleSelectNavTab.content }}
        </p>
      </div>
      <el-row>
        <el-col
          class="works-grid"
          :span="6"
          v-for="(item, index) in handleSelectNavTab.childrenSrcList"
          :key="index"
        >
          <img :src="item" alt="" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import require from '@/utils/require'
let bgImageList = reactive([
  {
    id: '2',
    name: '臭氧&PM2.5协同管控',
    show: false,
    src: require('@/assets/image/icon1.png'),
    childrenSrc: require('@/assets/image/icon1children.png'),
    content:
      '七星瓢虫领头人王雨池博士创造性的提出截控防治环境污染改善理论体系。以此理论为指导，将针对管控区域进行硬件设备的环形布点，形成网格化、全覆盖监测体系。并依据天地人 车的理念，通过不同高度层放置空气微型站、激光雷达、无人机巡航监控，同时地面利用走航车的机动监测，配合服务团队的无死角管控，做到维度全覆盖、污染不放过，实现管控区域的臭氧PM2.5协同管控。'
  },
  {
    id: '21',
    name: '涉气企业无组织排放断面管控',
    show: false,
    src: require('@/assets/image/icon2.png'),
    childrenSrc: require('@/assets/image/icon2children.png'),
    content:
      '七星瓢虫环境科技对监测设备安装位置的各项环境指数进行监测，并实时将采集到的数据发送至云端服务器计算并存储。监测设备将采集的数据经后台分析，通过大屏PC端或手机APP等媒介将数据进行展示和一系列交互活动。实现对涉气企业无组织排放企业断面、有组织排放收集率、末端治理效能管理方案。'
  },
  {
    id: '22',
    name: '环保管家服务',
    show: false,
    src: require('@/assets/image/icon3.png'),
    childrenSrc: require('@/assets/image/icon3children.png'),
    content:
      '七星瓢虫环境科技团队结合自主研发的包括23参数微型空气站、无人机环境数据黑匣子监测系统等硬件设备及软件服务平台-中国大气环境智慧监测指挥平台，同步配合专业化、定制化的本地服务团队，实现针对环境管控区域的环保管家服务。'
  },
  {
    id: '23',
    name: '更多详情',
    show: false,
    src: require('@/assets/image/icon4.png'),
    childrenSrc: require('@/assets/image/icon4children.jpg'),
    content: '更多大气污染领域解决方案请联系我们。竭诚为您提供更专业，更可靠的服务'
  }
])

let handleSelectItem = ref({ ...bgImageList[0] })
import { useRouter } from 'vue-router'
const router = useRouter()
const toDetail = (item: any) => {
  console.log('handleSelectItem', handleSelectItem)
  router.push({ path: '/solution', query: { name: item.name, id: item.id } })
}
const changeBg = (item: any) => {
  bgImageList.forEach((val: any) => {
    val.show = false
  })
  item.show = true
  handleSelectItem.value = item
}
let navTabsList = reactive([
  {
    name: '23参数网格化空气质量监测微型站',
    show: false,
    src: require('@/assets/image/bannerIcon1.png'),
    srcck: require('@/assets/image/bannerIcon1ck.png'),
    childrenSrcList: [
      require('@/assets/image/bannerIcone1Childre1.png'),
      require('@/assets/image/bannerIcone1Childre2.png'),
      require('@/assets/image/bannerIcone1Childre3.jpg'),
      require('@/assets/image/bannerIcone1Childre4.png')
    ],
    content:
      '主要由探头、供电模组及安装支架等模块组成。可7*24连续不间断、实时监测环境空气中的AQI六参数（PM2.5、PM10、O3、CO、SO2、NO2），同时支持温度、湿度、风速、风向、气压、光照强度、噪声污染、非甲烷总烃、苯、甲苯、二甲苯、NH3、H2S、甲醛、TVOC、PM0.3个数、PM2.5个数等监测因子的扩展。能及时、准确反映区域环境空气质量状况及变化规律。'
  },
  {
    name: '大气环境智慧监测指挥平台',
    show: false,
    src: require('@/assets/image/bannerIcon2.png'),
    srcck: require('@/assets/image/bannerIcon2ck.png'),
    childrenSrcList: [
      require('@/assets/image/bannerIcone2Childre1.png'),
      require('@/assets/image/bannerIcone2Childre2.png'),
      require('@/assets/image/bannerIcone2Childre3.png'),
      require('@/assets/image/bannerIcone2Childre4.png')
    ],
    content:
      '通过PC端和手机APP等终端将监测设备采集到的环境数据进行展示及交互活动，达到对环境数据的实时监控，并结合自主研发的AI算法，实现可视化风场图、72h的环境数据预测、污染物溯源等功能。'
  },
  {
    name: '无人机环境数据黑匣子监测系统',
    show: false,
    src: require('@/assets/image/bannerIcon3.png'),
    srcck: require('@/assets/image/bannerIcon3ck.png'),
    childrenSrcList: [
      require('@/assets/image/bannerIcone3Childre1.png'),
      require('@/assets/image/bannerIcone3Childre2.jpg'),
      require('@/assets/image/bannerIcone3Childre3.png'),
      require('@/assets/image/bannerIcone3Childre4.png')
    ],
    content:
      '由FEI-F19气体监测模块+ H920无人机+ E90超清云台相机组成。用以监测环境空气中各参数，并将采集到的数据实时传送至云端服务器计算并存储分析，通过终端设备将数据进行展示及交互活动。主要作用于监测大气空气质量AQI、应急检测有毒有害气体及核辐射和电磁辐射监测等，其精度可以达到1ppb。该系统实现了超高机动化巡航，弥补了监测点位的空间限制，使监测变得更加灵活、准确。'
  },
  {
    name: '一体化扬尘监测系统',
    show: false,
    src: require('@/assets/image/bannerIcon4.png'),
    srcck: require('@/assets/image/bannerIcon4ck.png'),
    childrenSrcList: [
      require('@/assets/image/bannerIcone4Childre1.png'),
      require('@/assets/image/bannerIcone4Childre2.png'),
      require('@/assets/image/bannerIcone4Childre3.png'),
      require('@/assets/image/bannerIcone4Childre4.png')
    ],
    content:
      '该系统采用光散射原理，将采集检测污染源的粉尘浓度数，并通过4G通讯传输至服务器将数据显示在各类终端设备，也可在机体显示屏上读取所检测到的粉尘浓度数。实现了全天候无人值守的粉尘浓度在线监测。主要应用于建筑扬尘、沙石场、堆煤场、秸秆焚烧、工业粉尘、燃煤、机动车尾气、道路扬尘、施工扬尘、堆场扬尘等无组织烟尘污染源排放及居民区、商业区、道路交通、施工区域等的环境空气质量的在线实时的自动监控'
  }
])
let handleSelectNavTab = ref({ ...navTabsList[0] })
const changeNavTab = (item: any) => {
  navTabsList.forEach((val: any) => {
    val.show = false
  })
  item.show = true
  handleSelectNavTab.value = item
}
</script>

<style scoped lang="scss">
.content {
  overflow: hidden;
}
.banner_section {
  img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.myTab_menu {
  display: flex;
  justify-content: center;
}
.bgbox {
  width: 1200px;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.imgList {
  display: inline-block;
  width: 25%;
  background-color: #f5f5f5;
  cursor: pointer;
}
.itemBg {
  border-left: 1px solid #e5e5e5;
  border-radius: 4px 4px 0 0;
  background-repeat: no-repeat !important;
  background-position: center !important;
  height: 240px;
  transition: 0.5s all;
  display: flex;
  align-items: self-end;
  justify-content: center;
  p {
    margin-bottom: 30px;
    color: #1b242f;
    &:hover {
      color: #888;
    }
  }
}
.borRght {
  border-right: 1px solid #e5e5e5;
}
.clickBg {
  background-color: #ff575a !important;
  p {
    color: #fff;
  }
}
.tabBox {
  padding: 146px 0 130px;
}
.tab-pane {
  width: 1200px;
  margin: 0 auto;
}
.tab-pane-title {
  display: inline-block;
  color: #333333;
  font-size: 24px;
  font-weight: 700;
  border-top: 3px solid #ff575a;
  border-bottom: 3px solid #ff575a;
  padding: 10px 0;
}
.tab-pane-content {
  margin-top: 30px;
  color: #666666;
  line-height: 38px;
  font-size: 12px;
  margin-bottom: 20px;
}
.tab-pane-button {
  cursor: pointer;
  width: 155px;
  height: 47px;
  background: #ff575a;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  line-height: 47px;
  color: #fff;
  &:hover {
    text-decoration: underline;
  }
}
.menuCenter {
  background: url(../assets/image/bannerCenter.png) center top no-repeat;
}
.nav-tabs {
  width: 1200px;
  margin: 0 auto;
  li {
    cursor: pointer;
    display: inline-block;
    width: 25%;
    height: 150px;
    text-align: center;
    color: #fff;
    a {
      background-position-x: 50% !important;
      background-position-y: 25px !important;
      display: block;
      border: none;
      line-height: 160px;
      font-size: 18px;
      padding: 0;
      margin: 0;
      border-radius: 0;
      transition: 0.5s all;
      &::after {
        content: '';
        display: inline-block;
        width: 13px;
        height: 7px;
        background: url(../assets/image/icon_down.png) center no-repeat;
        margin-left: 6px;
      }
    }
  }
}
.tab_con_tex1 {
  color: #333;
  font-size: 28px;
  padding: 1rem 0;
  text-align: center;
  margin: 0;
}
.tab_con_tex2 {
  color: #888;
  font-size: 14px;
  margin: 0 auto 10px;
  line-height: 34px;
  text-align: center;
  width: 60%;
}
.works-grid {
  overflow: hidden;
  padding: 0;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    vertical-align: middle;
    transition: 1s all;
    &:hover {
      transform: scale(1.3);
    }
  }
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
</style>

 src/views/news.vue

New file
@@ -0,0 +1,425 @@
<template>
  <div>
    <div class="bannerin">
      <img src="../assets/image/newsbanner.png" alt="" />
    </div>
    <div class="menu_sild">
      <div class="container">
        <ul class="clearfix">
          <li @click="changeClickIndex(item)" v-for="item in menuList" :key="item.id">
            <span class="current" :class="{ clickCurrent: clickIndex.id === item.id }">{{
              item.name
            }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="contentBox" v-if="isShowCar">
      <div class="carsList">
        <el-card
          v-for="item in clickIndex.list"
          :key="item.index"
          class="box-card"
          @click="toDetail(item)"
        >
          <div class="pro_img">
            <img class="leftConetenImg" :src="item.scr" alt="" />
          </div>
          <div class="pro_des">
            <div class="pull-left">
              <p class="day">{{ item.day }}</p>
              <p class="year">{{ item.time }}</p>
            </div>
            <div>
              <p class="pro_tit">{{ item.title }}</p>
              <p class="pro_tex">{{ item.content }}</p>
            </div>
          </div>
        </el-card>
      </div>
      <div style="text-align: center; margin-bottom: 4em">
        <el-button type="info" plain
          >共 <strong>1</strong>页<strong>{{ clickIndex.list.length }}</strong
          >条记录</el-button
        >
      </div>
    </div>
    <div class="newSdetail contentBox" v-if="!isShowCar">
      <div class="newSdetail_box">
        <div class="newSdetail_box_left">
          <h1>{{ itemConfig.name }}</h1>
          <p class="blog-description">{{ itemConfig.abstract }}</p>
          <div class="blog-main">
            <p class="time" style="margin: 10px 0">{{ itemConfig.time }}</p>
            <div>
              <div
                v-for="(item, index) in itemConfig.content"
                :key="index"
                :class="{ imgCter: item.type !== 'text' }"
              >
                <p v-html="item.content" v-if="item.type === 'text'" class="blog-text"></p>
                <img v-else :src="require(`${item.content}`)" class="blog-img" />
              </div>
            </div>
          </div>
        </div>
        <div class="newSdetail_box_right">
          <h3 style="font-size: 24px; padding-left: 12px; color: #555;margin: 20px;0 10px 0">
            热点新闻<span style="font-size: 18px; color: #aaa; padding-left: 10px">NEWS</span>
          </h3>
          <div>
            <el-row
              class="hoverList"
              v-for="(item, index) in clickIndex.list"
              :key="index"
              style="margin-bottom: 10px"
              @click="toDetail(item)"
            >
              <el-col :span="6">
                <img style="width: 100%" :src="item.scr" alt="" />
              </el-col>
              <el-col :span="18">
                <div style="margin-left: 20px; margin-top: 10px">
                  <p>{{ item.time }}-{{ item.day }}</p>
                  <p style="margin-top: 10px" class="tetxOver">
                    {{ item.title }}
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import newDetail from '@/utils/newDetail.json'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import require from '@/utils/require'
import _ from 'lodash'
const route = useRoute()
const router = useRouter()
let configData = reactive(newDetail.data)
onMounted(() => {
  console.log('router', route)
})
const menuList = reactive([
  {
    id: 0,
    name: '公司新闻',
    list: [
      {
        index: 0,
        title: '总决赛，我们来了',
        scr: require('@/assets/image/1-2109161410130-L.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '近期，第九届创业江苏科技创业大赛暨第十届中国创新创业大赛江苏赛区节能环保行业赛，在江苏宜兴成功举办。 本届大赛呈现 三个聚焦的特点：一是聚焦关键核心技术遴选优质项目；...'
      },
      {
        index: 1,
        title: '七星瓢虫环境科技助力中国疾控中心',
        scr: require('@/assets/image/1-210126150151245.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '七星瓢虫环境科技脱颖而出，凭借七星博士室内空气在线连续监测设备FEI-S1及专业团队，成为了中国疾病预防控制中心近日发出的“室内空气在线连续监测设备采购”招标通知书的最终成交服务...'
      },
      {
        index: 2,
        title: '势如破竹，七星瓢虫环境科技总部规划签约仪式',
        scr: require('@/assets/image/1-210126145T2435.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '七星瓢虫环境科技与苏州越城建筑设计院在苏州举行七星瓢虫总部规划的战略签约仪式，双方就总部规划设计等多维度达成深度合作。未来基于双方的友好合作，积极推进七星瓢虫环境科技总部...'
      },
      {
        index: 3,
        title: '脱颖而出，七星瓢虫代表江苏省出征全国大赛',
        scr: require('@/assets/image/1-1F12Q624570-L.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '第九届中国创新创业大赛地方赛暨第八届"创业江苏"科技创业大赛已经落下帷幕，经过全省共5480个企业和团队的激烈角逐，七星瓢虫环境科技（苏州）有限公司凭借“臭氧与PM2.5协同管控”“环...'
      },
      {
        index: 4,
        title: '守护绿水青山，七星剑指科创',
        scr: require('@/assets/image/1-210126145324G7.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '第八届“创业江苏”科技创业大赛节能环保行业赛暨中国第九届创新创业大赛江苏赛区比赛在宜兴环科园完美落幕。七星瓢虫环境科技本次受邀参加，并在全省共5480个企业和团队中脱颖而出，...'
      },
      {
        index: 5,
        title: '对话央视：立足当下 创新未来',
        scr: require('@/assets/image/1-210126144ZY93.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '应央视邀请，在第二十一届环博会现场，七星瓢虫环境科技董事长王雨池博士接受了央视《品质》栏目的专访。双方就本次环博会上出现的新产品、新技术，以及当下环境中企业要如何破局等相...'
      },

      {
        index: 6,
        title: '2020IEexp，七星瓢虫智构未来，策马扬帆',
        name: 'menuChilderFirst3',
        scr: require('@/assets/image/1-210115110925X6.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '2020年第二十一届中国环博会日益临近。作为亚洲最具影响力、最高品质的环境技术交流盛会，本次展会荟集全球顶级污水处理、给水排水、固体废弃物处理、资源回收利用、大气污染治理、室...'
      },
      {
        index: 7,
        title: '十五万平米展出的中国环境现状，七载刻画的七星',
        name: 'menuChilderFirst3',
        scr: require('@/assets/image/1-210126144130309.jpg'),
        time: '2021-09',
        day: '19',
        content:
          '为期三天的第21届中国环博会在上海新国际博览中心落下帷幕。15万平米的全景展览空间，24个国家与地区，近8万名专业观众全面呈现了大气、水、固废、土壤、噪声污染治理等全产业链，凝聚...'
      }
    ]
  },
  {
    id: 1,
    name: '行业新闻',
    list: [
      {
        index: 8,
        title: '生态环境部孙金龙发表《持续改善环境质量》',
        name: 'menuChilderFirst1',
        scr: require('@/assets/image/1-210126150I41W.png'),
        time: '2021-09',
        day: '19',
        content:
          '党的十九届五中全会通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》（以下简称《建议》）提出，持续改善环境质量。这是党中央深刻把握我国...'
      }
    ]
  }
])
const clickIndex = ref(menuList[0])
const isShowCar = ref(true)
let clickNews: any = ref({})
let changeClickIndex = (item: any) => {
  clickIndex.value = item
  isShowCar.value = true
}
let itemConfig: any = ref({})
let toDetail = (item: any) => {
  isShowCar.value = false
  clickNews.value = item
  itemConfig.value = _.find(configData, { index: clickNews.value.index }) as Object
}
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    if (newValue.query.id === '41') {
      clickIndex.value = menuList[1]
    } else {
      clickIndex.value = menuList[0]
    }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.bannerin {
  position: relative;
  overflow: hidden;
  img {
    height: 588px;
    object-fit: cover;
    width: 100%;
  }
}
.menu_sild {
  border-bottom: 1px solid #ebebeb;
  .container {
    width: 1270px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .clearfix {
      li {
        cursor: pointer;
        display: inline-block;
        .current {
          display: block;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #555;
          &:hover {
            color: #ff575a;
            border-bottom: 2px solid #ff575a;
          }
        }
        .clickCurrent {
          color: #ff575a;
          border-bottom: 2px solid #ff575a;
        }
      }
    }
  }
}
.carsList {
  padding: 50px 0;
  .box-card {
    cursor: pointer;
    margin-bottom: 20px;
    padding: 30px 20px;
    margin-right: 20px;
    .pro_img {
      float: left;
      width: 25%;
      overflow: hidden;
      img {
        max-width: 100%;
        vertical-align: middle;
        transition: 1s all;
        &:hover {
          transform: scale(1.3);
        }
      }
    }
    .pro_des {
      float: left;
      width: calc(75% - 40px);
      display: flex;
      padding-left: 20px;
      margin-top: 20px;

      .pro_tit {
        font-size: 18px;
        line-height: 25px;
        color: #555;
        border-bottom: 1px solid #e5e6e8;
        padding: 6px 0;
        margin-bottom: 20px;
      }
      .pro_tex {
        line-height: 24px;
        color: #666;
        font-size: 12px;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.pull-left {
  margin-right: 20px;
  .day {
    width: 80px;
    height: 68px;
    background: #acacac;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 68px;
    margin: 0;
    color: #fff;
  }
  .year {
    width: 80px;
    height: 36px;
    background: #818181;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 36px;
    margin: 0;
  }
}
.showDetail {
  color: #ff575a;
  margin-top: 20px;
  border: 1px solid #ff575a;
  padding: 6px 20px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  &:hover {
    background: #ff575a;
    color: #fff;
    text-decoration: none;
  }
}
.hoverList {
  cursor: pointer;
  overflow: hidden;
  &:hover {
    color: #ff575a !important;
  }
  div {
    overflow: hidden;
  }
  img {
    transition: 1s all;
    &:hover {
      transform: scale(1.3);
    }
  }
}
.tetxOver {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
  width: 200px;
}
.contentBox {
  width: 1270px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.newSdetail_box {
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: flex;
  .newSdetail_box_left {
    flex: 1;
  }
  .newSdetail_box_right {
    width: 30%;
  }
}
.blog-description {
  font-size: 1.2rem;
  color: #999;
}
.blog-main {
  margin-bottom: 50px;
  font-size: 18px;
  line-height: 1.5;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #555;
}
.blog-text {
  text-indent: 2em;
}
.blog-img {
  width: 600px;
}
.imgCter {
  text-align: center;
}
</style>

 src/views/product.vue

New file
@@ -0,0 +1,295 @@
<template>
  <div>
    <div class="bannerin">
      <img src="../assets/image/productBanner.png" alt="" />
    </div>
    <div class="menu_sild" v-if="isShowCar">
      <div class="container">
        <ul class="clearfix">
          <li @click="changeClickIndex(item)" v-for="item in menuList" :key="item.id">
            <span class="current" :class="{ clickCurrent: clickIndex.id === item.id }">{{
              item.name
            }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="contentBox" v-if="isShowCar">
      <div class="carsList">
        <el-card v-for="item in clickIndex.list" :key="item.id" class="box-card">
          <div class="pro_img">
            <img class="leftConetenImg" :src="item.scr" alt="" />
          </div>
          <div class="pro_des">
            <p class="pro_tit">{{ item.title }}</p>
            <p class="pro_tex">{{ item.content }}</p>
            <p>
              <a class="showDetail" @click="toDetail(item)"> 查看详情</a>
            </p>
          </div>
        </el-card>
      </div>
      <div style="text-align: center; margin-bottom: 4em">
        <el-button type="info" plain
          >共 <strong>1</strong>页<strong>{{ clickIndex.list.length }}</strong
          >条记录</el-button
        >
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import require from '@/utils/require'
const route = useRoute()
const router = useRouter()
onMounted(() => {
  console.log('router', route)
})
const menuList = reactive([
  {
    id: 0,
    name: '23参数微型空气站',
    list: [
      {
        id: 0,
        title: '七星瓢虫网格化空气质量监测系统微型空气站',
        name: 'menuChilderFirst1',
        scr: require('@/assets/image/product1.jpg'),
        content:
          '七星瓢虫网格化空气质量监测系统（23参数微型空气站），主要由探头、供电组件、风速风向传感器以及安装支架等组成。其中探头主要由气体测量模块、光散射颗粒物测量模块、无线...'
      },
      {
        id: 1,
        title: '七星瓢虫VOCs智慧监测系统（固定污染源）',
        name: 'menuChilderFirst2',
        scr: require('@/assets/image/product2.jpg'),
        content:
          '七星瓢虫VOCs智慧在线监测系统FEI-F19是一种使用方便，用以快速检验空气中的非甲烷总烃、苯、甲苯、二甲苯、VOCs总量、温度、湿度、PM2.5、PM10含量的监测系统。...'
      },
      {
        id: 2,
        title: '七星瓢虫VOCs智慧监测系统（厂界）',
        name: 'menuChilderFirst3',
        scr: require('@/assets/image/product3.jpg'),
        content:
          '七星瓢虫 VOCs智慧监测系统FEI-F19是一种使用方便，用以快速监测大气环境多类因子参数的监测系统。...'
      }
    ]
  },
  {
    id: 1,
    name: '大气环境智慧监测指挥平台',
    list: [
      {
        id: 0,
        name: 'menuChilderSecone',
        title: '七星瓢虫网格化空气质量监测系统微型空气站',
        scr: require('@/assets/image/product4.jpg'),
        content:
          '七星瓢虫大气环境智慧监测指挥平台，可将检测仪采集到的数据，通过大屏、PC端和手机APP等媒介将数据展示和一系列交互活动，可达到对环境质量安全的实时监控，主要可实现：客户端...'
      }
    ]
  },
  {
    id: 2,
    name: '无人机数据黑匣子监测系统',
    list: [
      {
        id: 0,
        title: '无人机数据黑匣子监测系统',
        name: 'menuChilderThree',
        scr: require('@/assets/image/product5.jpg'),
        content:
          '无人机环境数据黑匣子监测系统是由FEI-F19气体监测模块+ H920无人机+ E90超清云台相机组成...'
      }
    ]
  },
  {
    id: 3,
    name: '一体化扬尘监测系统',
    list: [
      {
        id: 0,
        title: '一体化扬尘监测系统',
        name: 'menuChilderFour',
        scr: require('@/assets/image/product6.jpg'),
        content:
          '本仪器采用光散射原理工作。空气中的粉尘颗粒物在高能激光束照射下产生光散射效应，散射光强跟粉尘颗粒物浓度成正比，高灵敏的光电二极管接收到散射光，由光信号转换成电信号...'
      }
    ]
  },
  {
    id: 4,
    name: '七星瓢虫温室气体监测系统',
    list: [
      {
        id: 0,
        name: 'menuChilderFirst1',
        title: '七星瓢虫网格化空气质量监测系统微型空气站',
        scr: require('@/assets/image/product1.jpg'),
        content:
          '七星瓢虫网格化空气质量监测系统（23参数微型空气站），主要由探头、供电组件、风速风向传感器以及安装支架等组成。其中探头主要由气体测量模块、光散射颗粒物测量模块、无线...'
      },
      {
        id: 1,
        name: 'menuChilderFirst2',
        title: '七星瓢虫VOCs智慧监测系统（固定污染源）',
        scr: require('@/assets/image/product2.jpg'),
        content:
          '七星瓢虫VOCs智慧在线监测系统FEI-F19是一种使用方便，用以快速检验空气中的非甲烷总烃、苯、甲苯、二甲苯、VOCs总量、温度、湿度、PM2.5、PM10含量的监测系统。...'
      },
      {
        id: 2,
        name: 'menuChilderFirst3',
        title: '七星瓢虫VOCs智慧监测系统（厂界）',
        scr: require('@/assets/image/product3.jpg'),
        content:
          '七星瓢虫 VOCs智慧监测系统FEI-F19是一种使用方便，用以快速监测大气环境多类因子参数的监测系统。...'
      }
    ]
  }
])
const clickIndex = ref(menuList[0])
const isShowCar = ref(true)
let changeClickIndex = (item: any) => {
  clickIndex.value = item
}
let toDetail = (item: any) => {
  isShowCar.value = false
  router.push({ name: 'productDetail', query: { name: item.name, id: item.id, title: item.title } })
}
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    if (newValue.name === 'product') {
      isShowCar.value = true
    }
    if (newValue.query.id === '31') {
      clickIndex.value = menuList[1]
    } else if (newValue.query.id === '32') {
      clickIndex.value = menuList[2]
    } else if (newValue.query.id === '33') {
      clickIndex.value = menuList[3]
    } else {
      clickIndex.value = menuList[0]
    }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.bannerin {
  position: relative;
  overflow: hidden;
  img {
    height: 588px;
    object-fit: cover;
    width: 100%;
  }
}
.menu_sild {
  border-bottom: 1px solid #ebebeb;
  .container {
    width: 1270px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .clearfix {
      li {
        cursor: pointer;
        display: inline-block;
        .current {
          display: block;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #555;
          &:hover {
            color: #ff575a;
            border-bottom: 2px solid #ff575a;
          }
        }
        .clickCurrent {
          color: #ff575a;
          border-bottom: 2px solid #ff575a;
        }
      }
    }
  }
}
.carsList {
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box-card {
    margin-bottom: 20px;
    padding: 30px 20px;
    width: 45%;
    margin-right: 20px;
    &:hover {
      transition: 1s all;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    }
    .pro_img,
    .pro_des {
      float: left;
      width: 50%;
      img {
        max-width: 100%;
        vertical-align: middle;
      }
      .pro_tit {
        font-size: 18px;
        line-height: 25px;
        color: #555;
        border-bottom: 1px solid #e5e6e8;
        padding: 6px 0;
        margin-bottom: 20px;
      }
      .pro_tex {
        line-height: 24px;
        color: #666;
        font-size: 12px;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.showDetail {
  color: #ff575a;
  margin-top: 20px;
  border: 1px solid #ff575a;
  padding: 6px 20px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  &:hover {
    background: #ff575a;
    color: #fff;
    text-decoration: none;
  }
}
.contentBox {
  width: 1270px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
</style>

 src/views/productDetail.vue

New file
@@ -0,0 +1,206 @@
<template>
  <div>
    <div class="content">
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>
            <span class="location">当前位置：</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/product' }">产品中心</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-card class="box-card">
          <p class="pro_t1">{{ title }}</p>
          <p class="pro_t2">产品型号：</p>
          <p class="pro_t3">{{ title }}</p>
          <p class="pro_t2">产品描述：</p>
          <p class="pro_t3">{{ itemConfig.describe }}</p>
          <p class="pro_t2">产品特点：</p>
          <p class="pro_t3">{{ itemConfig.characteristic }}</p>
          <p class="pro_t4">
            <span class="icon_p"></span>
            <span class="tel_t">咨询热线：</span>
            <span class="tel_n">0512--36871300</span>
          </p>
        </el-card>
      </div>
      <div class="productInfor">
        <div class="productInforBox">
          <el-tabs type="border-card">
            <el-tab-pane label="产品概述">
              <p v-for="(val, index) in itemConfig.overview" :key="index" style="line-height: 1.5">
                {{ val }}
              </p>
            </el-tab-pane>
            <el-tab-pane label="技术参数">
              <img
                v-if="parameterConfig.type === 'image'"
                :src="require(`${parameterConfig.src}`)"
                alt=""
              />
              <p v-else v-html="parameterConfig.content"></p>
            </el-tab-pane>
            <el-tab-pane label="功能特点">
              <div
                v-for="(val, index) in itemConfig.useInfor"
                :key="index"
                class="productInfor_useInfor"
              >
                <p>{{ val.name }}</p>
                <p v-html="val.content" style="line-height: 1.5"></p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import require from '@/utils/require'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElTabs, ElTabPane } from 'element-plus'
import productDetailData from '@/utils/productDetailData.json'
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import _ from 'lodash'
const route = useRoute()
let title = ref('')
let name = ref('')
let itemConfig: any = ref({})
let parameterConfig: any = ref({})
let configData = reactive(productDetailData.data)

onMounted(() => {
  title.value = route.query.title as string
  name.value = route.query.name as string
  itemConfig.value = _.find(configData, { name: name.value }) as Object
  parameterConfig.value = itemConfig.value.parameter
  console.log('111', itemConfig.value.parameter.src)
})
</script>

<style scoped lang="scss">
.content {
  width: 1270px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.breadcrumb {
  margin: 30px 0;
}
.location {
  color: #666;
  /* /* line-height: 60px; */
  padding-left: 25px;
  background: url(../assets//image/location.jpg) left center no-repeat;
}
.box-card {
  padding: 30px;
}
.pro_t1 {
  color: #333;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e6e6e6;
  margin: 0 0 10px;
}
.pro_t2 {
  margin: 0 0 10px;
  color: #333;
  font-size: 12px;
  margin-top: 15px;
}
.pro_t3 {
  margin: 0 0 10px;
  line-height: 20px;
  color: #555;
  font-size: 12px;
  margin-bottom: 0;
}
.pro_t4 {
  margin-top: 15px;
}
.icon_p {
  vertical-align: middle;
  display: inline-block;
  background: url(../assets/image/phonemin.png) center no-repeat;
  width: 30px;
  height: 30px;
  margin: 0 10px;
}
.tel_t {
  font-size: 12px;
  color: #333;
}
.tel_n {
  color: #ff575a;
  font-style: italic;
  font-size: 18px;
  font-weight: bold;
}
.productInfor {
  margin: 30px 0 50px 0;
}
.productInforBox {
  img {
    width: 100%;
  }
  .productInfor_useInfor {
    p {
      margin-bottom: 10px;
      &:first-child {
        font-weight: bold;
      }
      &:last-child {
        line-height: 1.5;
      }
    }
  }
}
.productInfor_nav {
  li {
    display: inline-block;
    padding: 10px 15px;
    border-right: 1px dashed #ddd;
    line-height: 1.42857143;
    cursor: pointer;
    &:hover {
      color: #ff575a;
    }
  }
}
.productInfor_content {
  margin-top: 10px;
}

::v-deep.el-tabs--border-card > .el-tabs__header {
  background-color: #fff !important;
}
::v-deep .el-tabs__item {
  color: #1b242f !important;
  font-size: 16px;
  border-right: 1px dashed #ddd !important;
}

/**悬浮 */
::v-deep .el-tabs__item:hover {
  color: #ff575a !important;
  cursor: pointer;
  opacity: 1;
}

/**选中 */
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-top: 3px solid #ff575a !important;
  color: #ff575a !important;
  opacity: 1;
}
</style>

 src/views/solution.vue

New file
@@ -0,0 +1,256 @@
<template>
  <div>
    <div class="bannerin">
      <img src="../assets/image/banner.jpg" alt="" />
    </div>
    <div class="menu_sild">
      <div class="container">
        <ul class="clearfix">
          <li @click="changeClickIndex(item)" v-for="item in menuList" :key="item.id">
            <span class="current" :class="{ clickCurrent: clickIndex.id === item.id }">{{
              item.name
            }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="business_con container">
      <p class="business_tit">
        {{ clickIndex.item.name }}
      </p>
      <div class="business_tex">
        <el-row :gutter="60">
          <el-col :span="14">
            <div>
              <strong>{{ clickIndex.item.conetnt }}</strong>
              <div style="text-align: center">
                <img class="leftConetenImg" :src="clickIndex.item.src" alt="" />
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="works-grid">
              <div class="scrollRevealDiv" data-scroll-reveal="enter left and move 100px over 1s">
                <img
                  src="../assets/image/icon1children.png"
                  alt=""
                  @mouseenter="mouseEnter(1)"
                  @mouseleave="mouseLeave(10)"
                />
                <p v-if="mouseEnterIndex === 1" class="imgTitle">臭氧&PM2.5协同管控</p>
              </div>
            </div>
            <div class="works-grid">
              <div class="scrollRevealDiv" data-scroll-reveal="enter left and move 100px over 1s">
                <img
                  src="../assets/image/icon2children.png"
                  alt=""
                  @mouseenter="mouseEnter(2)"
                  @mouseleave="mouseLeave(10)"
                />
                <p v-if="mouseEnterIndex === 2" class="imgTitle">涉气企业无组织排放断面管控</p>
              </div>
            </div>
            <div class="works-grid">
              <div class="scrollRevealDiv" data-scroll-reveal="enter left and move 100px over 1s">
                <img
                  src="../assets/image/icon3children.png"
                  alt=""
                  @mouseenter="mouseEnter(3)"
                  @mouseleave="mouseLeave(10)"
                />
                <p v-if="mouseEnterIndex === 3" class="imgTitle">环保管家服务</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <onlineContact></onlineContact>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch } from 'vue'
import scrollReveal from 'scrollreveal'
import onlineContact from '@/components/onlineContact.vue'
// @ts-ignore
import retScroll from '@/utils/scroll.js'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import require from '@/utils/require'
const route = useRoute()
const router = useRouter()
const data = reactive({
  scrollReveal: scrollReveal()
})
const clickIndex = ref({
  id: 0,
  item: {
    id: 0,
    name: '臭氧&PM2.5协同管控',
    src: require('@/assets/image/solutionmenu.jpg'),
    conetnt:
      '七星瓢虫领头人王雨池博士创造性的提出“截控防治”环境污染改善理论体系。以此理论为指导，将针对管控区域进行硬件设备的环形布点，形成网格化、全覆盖监测体系。并依据“天地人  车”的理念，通过不同高度层放置空气微型站、激光雷达、无人机巡航监控，同时地面利用走航车的机动监测，配合服务团队的无死角管控，做到“维度全覆盖、污染不放过”，实现管控区域的臭氧&PM2.5协同管控。'
  }
})
const menuList = reactive([
  {
    id: 0,
    name: '臭氧&PM2.5协同管控',
    src: require('@/assets/image/solutionmenu.jpg'),
    conetnt:
      '七星瓢虫领头人王雨池博士创造性的提出“截控防治”环境污染改善理论体系。以此理论为指导，将针对管控区域进行硬件设备的环形布点，形成网格化、全覆盖监测体系。并依据“天地人  车”的理念，通过不同高度层放置空气微型站、激光雷达、无人机巡航监控，同时地面利用走航车的机动监测，配合服务团队的无死角管控，做到“维度全覆盖、污染不放过”，实现管控区域的臭氧&PM2.5协同管控。'
  },
  {
    id: 1,
    name: '涉气企业无组织排放断面管控',
    src: require('@/assets/image/solutionmenu1.jpg'),
    conetnt:
      '七星瓢虫环境科技对监测设备安装位置的各项环境指数进行监测，并实时将采集到的数据发送至云端服务器计算并存储。监测设备将采集的数据经后台分析，通过大屏PC端或手机APP等媒介将数据进行展示和一系列交互活动。实现对涉气企业无组织排放企业断面、有组织排放收集率、末端治理效能管理方案。'
  },
  {
    id: 2,
    name: '环保管家服务',
    src: require('@/assets/image/solutionmenu2.png'),
    conetnt:
      '七星瓢虫环境科技团队结合自主研发的包括23参数微型空气站、无人机环境数据黑匣子监测系统等硬件设备及软件服务平台-中国大气环境智慧监测指挥平台，同步配合专业化、定制化的本地服务团队，实现针对环境管控区域的环保管家服务。'
  },
  {
    id: 3,
    name: '更多详情',
    src: '',
    conetnt: '更多大气污染领域解决方案请联系我们。竭诚为您提供更专业，更可靠的服务'
  }
])
onMounted(() => {
  console.log('router', route.query)
  retScroll(data)
})
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    if (newValue.query.id === '21') {
      clickIndex.value.id = menuList[1].id
      clickIndex.value.item = { ...menuList[1] }
    } else if (newValue.query.id === '22') {
      clickIndex.value.id = menuList[2].id
      clickIndex.value.item = { ...menuList[2] }
    } else if (newValue.query.id === '23') {
      clickIndex.value.id = menuList[3].id
      clickIndex.value.item = { ...menuList[3] }
    } else {
      clickIndex.value.id = menuList[0].id
      clickIndex.value.item = { ...menuList[0] }
    }
  },
  { immediate: true }
)

let mouseEnterIndex = ref(0)
let changeClickIndex = (item: any) => {
  clickIndex.value.id = item.id
  clickIndex.value.item = item
}
let mouseEnter = (item: any) => {
  mouseEnterIndex.value = item
}
let mouseLeave = (item: any) => {
  mouseEnterIndex.value = item
}
</script>

<style scoped lang="scss">
.bannerin {
  position: relative;
  overflow: hidden;
  img {
    height: 588px;
    object-fit: cover;
    width: 100%;
  }
}
.menu_sild {
  border-bottom: 1px solid #ebebeb;
  .container {
    width: 1270px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .clearfix {
      li {
        cursor: pointer;
        display: inline-block;
        .current {
          display: block;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #555;
          &:hover {
            color: #ff575a;
            border-bottom: 2px solid #ff575a;
          }
        }
        .clickCurrent {
          color: #ff575a;
          border-bottom: 2px solid #ff575a;
        }
      }
    }
  }
}
.business_con {
  margin-right: auto;
  margin-left: auto;
  padding: 50px 0;
  width: 1270px;
  .business_tit {
    color: #333;
    font-size: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid #cccccc;
    margin: 0;
  }
  .business_tex {
    padding: 25px 0 50px;
    .leftConetenImg {
      width: 100%;
    }
  }
  strong {
    line-height: 2;
    display: block;
    color: #444;
    font-weight: bold;
    text-indent: 2em;
  }
}
.works-grid {
  div {
    cursor: pointer;
    margin-top: 20px;
    overflow: hidden;
  }
  img {
    width: 100%;
    transition: 1s all;
    &:hover {
      transform: scale(1.3);
    }
  }
  .imgTitle {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    background: rgba(0, 0, 0, 0.4);
    font-size: 1em;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
}
</style>

 tsconfig.app.json

New file
@@ -0,0 +1,22 @@
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "src/**/*.ts",
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "src/**/*.json",
    "src/**/*.js",
    "index.d.ts"
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "moduleResolution": "node"
}

 tsconfig.json

New file
@@ -0,0 +1,32 @@
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ],
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "esnext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      //TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
      "DOM",
      "ESNext"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

    // ...
    "types": ["element-plus/global", "vite/client"]
  }
}

 tsconfig.node.json

New file
@@ -0,0 +1,18 @@
{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*",
    "src/**/*.ts"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

 tsconfig.vitest.json

New file
@@ -0,0 +1,9 @@
{
  "extends": "./tsconfig.app.json",
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "lib": [],
    "types": ["node", "jsdom"]
  }
}

 vite.config.ts

New file
@@ -0,0 +1,17 @@
// import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '*': resolve('')
    }
  }
})

 vitest.config.ts

New file
@@ -0,0 +1,14 @@
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      environment: 'jsdom',
      exclude: [...configDefaults.exclude, 'e2e/*'],
      root: fileURLToPath(new URL('./', import.meta.url))
    }
  })
)