fix:公司官网新建

quanyawei

2024-01-03 6429d4b210fadb4face2ade0bbdc02926c444f72

fix:公司官网新建

 public/favicon.ico

 src/App.vue

@@ -7,23 +7,9 @@
<template>
  <div>
    <headerNav />
    <RouterView />
    <RouterView :key="$route.fullPath" />
    <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/image/parameter7.jpg

 src/components/footerInfor.vue

@@ -8,6 +8,7 @@
          </div>
          <div v-for="(val, index) in item.list" :key="index" class="valName">
            <span
              @click="goPage(val)"
              @mouseenter="val.show = !val.show"
              @mouseleave="val.show = !val.show"
              :class="{ hoverBorderBg: val.show }"
@@ -45,43 +46,58 @@

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
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 } })
  }
}
const footerinforList = reactive([
  {
    name: '解决方案',
    path: '/solution',
    id: '2',
    show: false,
    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: '臭氧&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: '/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: '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: '' },
      { name: '行业新闻', show: false, path: '' }
      { 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: '' },
      { name: '发展历程', show: false, path: '' },
      { name: '企业文化', show: false, path: '' }
      { 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' }
    ]
  },
  {

 src/components/headerNav.vue

@@ -105,7 +105,11 @@
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 } })
    router.push({
      path: item.path,
      hash: hash,
      query: { name: item.name, id: item.id, key: Math.random() }
    })
  }
}
</script>

 src/router/index.ts

@@ -48,6 +48,7 @@
      component: () => import('../views/contact.vue')
    }
  ],

  // eslint-disable-next-line no-unused-vars
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {

 src/utils/newDetail.json

@@ -208,7 +208,7 @@
      "index": 6,
      "name": "2020IEexp，七星瓢虫智构未来，策马扬帆",
      "abstract": "摘要：<span class='numFont'>2020</span>年第二十一届中国环博会日益临近。作为亚洲最具影响力、最高品质的环境技术交流盛会，本次展会荟集全球顶级污水处理、给水排水、固体废弃物处理、资源回收利用、大气污染治理、室...",
      "time": "2021-09-16 14:22",
      "time": "2021-02-19 14:22",
      "content": [
        {
          "type": "text",
@@ -244,7 +244,7 @@
      "index": 7,
      "name": "十五万平米展出的中国环境现状，七载刻画的七",
      "abstract": "摘要：为期三天的第21届中国环博会在上海新国际博览中心落下帷幕。15万平米的全景展览空间，24个国家与地区，近8万名专业观众全面呈现了大气、水、固废、土壤、噪声污染治理等全产业链，凝聚...",
      "time": "2021-09-16 14:22",
      "time": "2021-02-19 14:22",
      "content": [
        {
          "type": "text",

 src/utils/require.ts

@@ -1,8 +1,8 @@
/* eslint-disable no-console */
const require = (imgPath: string) => {
  try {
    const handlePath = imgPath.replace('@', '..')
    return new URL(handlePath, import.meta.url).href
    const handlePath = imgPath.replace('@/assets/image/', '')
    return new URL(`../assets/image/${handlePath}`, import.meta.url).href
  } catch (error) {
    console.log(error)
  }

 src/views/about.vue

@@ -48,7 +48,7 @@
            </el-row>
          </el-col>
          <el-col :span="12">
            <div class="overview">
            <el-scrollbar height="375px" class="overview" always>
              <p>
                七星瓢虫环境科技（苏州）有限公司始创于2013年，坐落于江苏省苏州市。是一家具备研发、生产、销售、服务于一体的综合性大气污染解决方案提供商。
              </p>
@@ -64,7 +64,8 @@
              <p>
                七星瓢虫环境科技致力于大气环境防控领域，多年来秉承“敬天爱人，乐业安道”的核心价值观，已与多个省份、城市的环保主管部门等重要客户达成长期合作。策马扬帆，七星瓢虫扎根于大气环境领域，不断为政企客户提供更优质的系统级解决方案服务。勇往直前，七星瓢虫不忘初心，誓为“天更蓝、水更清、山更绿、河更净、呼吸更顺”这一企业伟大目标不断奋进。
              </p>
            </div>
            </el-scrollbar>
            <!-- <div class="overview"></div> -->
          </el-col>
        </el-row>
      </div>
@@ -132,18 +133,9 @@
  console.log('router', route)
})
const menuList = reactive([
  {
    id: 0,
    name: '品牌故事'
  },
  {
    id: 1,
    name: '发展历程'
  },
  {
    id: 2,
    name: '企业文化'
  }
  { 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' }
])
const historyList = reactive([
  {
@@ -169,15 +161,19 @@
  },
  {
    id: 3,
    time: '2021未来可期',
    name: '2021未来可期',
    content: '2021未来可期'
    time: '2024未来可期',
    name: '2024未来可期',
    content: '2024未来可期'
  }
])
const clickIndex = ref(menuList[0])
let changeCarouselIndex = ref(0)
let changeClickIndex = (item: any) => {
  clickIndex.value = item
  if (item.path !== '') {
    let hash = item.hash ? item.hash : ''
    router.push({ path: item.path, hash: hash, query: { name: item.name, id: item.id } })
  }
}
let remarkCaruselUp = ref()
let changeCarouselItem = (index: any) => {
@@ -280,7 +276,6 @@
.overview {
  width: 100%;
  height: 337px;
  overflow: auto;
  p {
    color: #555555;
    line-height: 30px;

 src/views/news.vue

@@ -104,9 +104,11 @@
import _ from 'lodash'
const route = useRoute()
const router = useRouter()
const isShowCar = ref(true)
let configData = reactive(newDetail.data)
onMounted(() => {
  console.log('router', route)
  isShowCar.value = true
})
const menuList = reactive([
  {
@@ -118,7 +120,7 @@
        title: '总决赛，我们来了',
        scr: require('@/assets/image/1-2109161410130-L.jpg'),
        time: '2021-09',
        day: '19',
        day: '16',
        content:
          '近期，第九届创业江苏科技创业大赛暨第十届中国创新创业大赛江苏赛区节能环保行业赛，在江苏宜兴成功举办。 本届大赛呈现 三个聚焦的特点：一是聚焦关键核心技术遴选优质项目；...'
      },
@@ -126,7 +128,7 @@
        index: 1,
        title: '七星瓢虫环境科技助力中国疾控中心',
        scr: require('@/assets/image/1-210126150151245.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '七星瓢虫环境科技脱颖而出，凭借七星博士室内空气在线连续监测设备FEI-S1及专业团队，成为了中国疾病预防控制中心近日发出的“室内空气在线连续监测设备采购”招标通知书的最终成交服务...'
@@ -135,7 +137,7 @@
        index: 2,
        title: '势如破竹，七星瓢虫环境科技总部规划签约仪式',
        scr: require('@/assets/image/1-210126145T2435.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '七星瓢虫环境科技与苏州越城建筑设计院在苏州举行七星瓢虫总部规划的战略签约仪式，双方就总部规划设计等多维度达成深度合作。未来基于双方的友好合作，积极推进七星瓢虫环境科技总部...'
@@ -144,7 +146,7 @@
        index: 3,
        title: '脱颖而出，七星瓢虫代表江苏省出征全国大赛',
        scr: require('@/assets/image/1-1F12Q624570-L.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '第九届中国创新创业大赛地方赛暨第八届"创业江苏"科技创业大赛已经落下帷幕，经过全省共5480个企业和团队的激烈角逐，七星瓢虫环境科技（苏州）有限公司凭借“臭氧与PM2.5协同管控”“环...'
@@ -153,7 +155,7 @@
        index: 4,
        title: '守护绿水青山，七星剑指科创',
        scr: require('@/assets/image/1-210126145324G7.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '第八届“创业江苏”科技创业大赛节能环保行业赛暨中国第九届创新创业大赛江苏赛区比赛在宜兴环科园完美落幕。七星瓢虫环境科技本次受邀参加，并在全省共5480个企业和团队中脱颖而出，...'
@@ -162,7 +164,7 @@
        index: 5,
        title: '对话央视：立足当下 创新未来',
        scr: require('@/assets/image/1-210126144ZY93.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '应央视邀请，在第二十一届环博会现场，七星瓢虫环境科技董事长王雨池博士接受了央视《品质》栏目的专访。双方就本次环博会上出现的新产品、新技术，以及当下环境中企业要如何破局等相...'
@@ -173,7 +175,7 @@
        title: '2020IEexp，七星瓢虫智构未来，策马扬帆',
        name: 'menuChilderFirst3',
        scr: require('@/assets/image/1-210115110925X6.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '2020年第二十一届中国环博会日益临近。作为亚洲最具影响力、最高品质的环境技术交流盛会，本次展会荟集全球顶级污水处理、给水排水、固体废弃物处理、资源回收利用、大气污染治理、室...'
@@ -183,7 +185,7 @@
        title: '十五万平米展出的中国环境现状，七载刻画的七星',
        name: 'menuChilderFirst3',
        scr: require('@/assets/image/1-210126144130309.jpg'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '为期三天的第21届中国环博会在上海新国际博览中心落下帷幕。15万平米的全景展览空间，24个国家与地区，近8万名专业观众全面呈现了大气、水、固废、土壤、噪声污染治理等全产业链，凝聚...'
@@ -199,7 +201,7 @@
        title: '生态环境部孙金龙发表《持续改善环境质量》',
        name: 'menuChilderFirst1',
        scr: require('@/assets/image/1-210126150I41W.png'),
        time: '2021-09',
        time: '2021-02',
        day: '19',
        content:
          '党的十九届五中全会通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》（以下简称《建议》）提出，持续改善环境质量。这是党中央深刻把握我国...'
@@ -208,7 +210,7 @@
  }
])
const clickIndex = ref(menuList[0])
const isShowCar = ref(true)

let clickNews: any = ref({})
let changeClickIndex = (item: any) => {
  clickIndex.value = item
@@ -223,6 +225,8 @@
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    isShowCar.value = true
    console.log(newValue)
    if (newValue.query.id === '41') {
      clickIndex.value = menuList[1]
    } else {

 src/views/product.vue

@@ -37,7 +37,7 @@
        >
      </div>
    </div>
    <router-view></router-view>
    <router-view v-if="!isShowCar"></router-view>
  </div>
</template>