technology_web1/src/views/home/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="head">
          <el-col :span="5" class="left">
            <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
            <text>{{ siteInfo.zhTitle }}</text>
          </el-col>
          <el-col :span="10" class="center">
            <el-col :span="4" v-for="(item, index) in menuList" :key="index" @click="switchMenu(item)">
              <a>{{ item.title }}</a>
            </el-col>
          </el-col>
          <el-col :span="9" class="right">
            <el-col :span="12" class="right_2">
              <el-input v-model="searchInput" placeholder="请输入您想搜索的内容" class="input">
                <template #append>
                  <el-button @click="toSearch" :icon="Search" />
                </template>
              </el-input>
            </el-col>
            <el-col :span="12" class="right_3"><text @click="toLogin(0)">个人登录</text> | <text @click="toLogin(1)">法人登录</text> </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="logo">
          <video loop autoplay muted :src="siteInfo.videoUrl" class="video"></video>
        </el-col>
        <div class="w_1200">
          <el-col :span="24" class="one title" id="transaction">
            <span class="font_1">· 交易大厅</span>
            <div class="line"></div>
            <span class="font_2">Technology Trading</span>
            <component :is="transaction" :oneList="oneList" :twoList="twoList" :thrList="thrList" @toMore="tranMore" @toView="tranView"> </component>
          </el-col>
          <el-col :span="24" class="two title" id="achievement">
            <span class="font_1">· 成果大厅</span>
            <div class="line"></div>
            <span class="font_2">Technology Showcase</span>
            <component :is="achievement" :achieveList="achieveList" @toMore="achieveMore" @toView="achieveView"> </component>
          </el-col>
          <el-col :span="24" class="thr title" id="demand">
            <span class="font_1">· 需求大厅</span>
            <div class="line"></div>
            <span class="font_2">Cooperation Demand</span>
            <component :is="demand" :demandList="demandList" @toMore="demandMore" @toView="demandView"></component>
          </el-col>
          <el-col :span="24" class="four title" id="service">
            <span class="font_1">· 服务大厅</span>
            <div class="line"></div>
            <span class="font_2">Services</span>
            <component :is="service" :serviceList="serviceList" @toView="policyView" @toPolicy="toPolicy" @toService="toService"></component>
          </el-col>
          <el-col :span="24" class="five title" id="activity">
            <span class="font_1">· 活动大厅</span>
            <div class="line"></div>
            <span class="font_2">Activities</span>
            <component
              :is="activity"
              :activityList="activityList"
              :trendsList="trendsList"
              :videoList="videoList"
              @toMore="toActivityMore"
              @toNewsView="toNewsView"
              @toVideoView="toVideoView"
              @toView="policyView"
              @toPolicy="toPolicy"
            >
            </component>
          </el-col>
        </div>
        <el-col :span="24" class="foot">
          <div class="w_1200 footflex">
            <el-image class="image" src="/src/assets/unit.png" fit="fill" />
            <el-col :span="12" class="foot_1">
              <div class="footTitle"><span>业务洽谈：0431-81165166</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>企业邮箱：jlpstm@126.com</span></div>
              <div class="footTitle">地 址：长春朝阳区前进大街1244号（吉林省科技厅科研园）</div>
              <div class="footTitle">版权所有：Copyright©2007-2023 吉林省创新指导中心 │ 吉ICP备14005689号</div>
              <div class="footTitle">技术支持：长春市福瑞科技有限公司</div>
            </el-col>
            <el-col :span="3" class="foot_2">
              <div class="footTop">关于我们</div>
              <div class="footTitle footflex1">
                <span class="footSpan" @click="toHelp('1')">关于我们</span> <span class="footSpan" @click="toHelp('2')">意见反馈</span>
              </div>
              <div class="footTitle footflex1">
                <span class="footSpan" @click="toHelp('3')">联系我们</span> <span class="footSpan" @click="toHelp('4')">法律条款</span>
              </div>
            </el-col>
            <el-col :span="4" class="foot_3 footflex">
              <el-image class="image" src="../../../public/code.png" fit="fill" />
              <el-image class="image" src="../../../public/code.png" fit="fill" />
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <div class="tool tool1" v-if="isOpen" @mouseleave="toOpen">
      <el-col :span="24" class="tool_1" v-for="(item, index) in toolList" :key="index" @click="toCommon(item)">
        <el-image class="image" :src="item.url" fit="fill" />
        <span>{{ item.name }}</span>
      </el-col>
    </div>
    <div class="tool tool2" v-else @mouseover="toOpen">
      <el-image class="image" src="/src/assets/menu_1.png" fit="fill" />
    </div>
    <el-dialog v-model="dialog" title="智能客服">
      <el-col :span="24" class="dialog">
        <div class="content">
          <div class="title">智能客服为您服务</div>
          <div class="list">
            <el-image class="image" src="/src/assets/kf.png" fit="fill" />
            <div class="message">Hi，遇到问题随时找智能客服哟～ 有什么需要我帮忙的吗？</div>
          </div>
        </div>
        <div class="foot">
          <textarea class="input" placeholder="输入消息"></textarea>
          <div class="button">
            <div class="send">发 送</div>
          </div>
        </div>
      </el-col>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
import { menuList, siteInfo } from '@/layout/site';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
// 组件
import transaction from './components/transaction.vue';
import achievement from './components/achievement.vue';
import demand from './components/demand.vue';
import service from './components/service.vue';
import activity from './components/activity.vue';
// 接口
// import { ToolsStore } from '@/stores/tool';
// import type { IQueryResult } from '@/util/types.util'
// const toolsAxios = ToolsStore();
// 路由
const router = useRouter();
// 加载中
const loading: Ref<any> = ref(false);
// 查询
const searchInput: Ref<any> = ref('');
// 交易大厅列表
const oneList: Ref<any> = ref([
  {
    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
    no: 'XY20231215012',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '0'
  },
  {
    name: '数字矫形肢体骨骼康复机器辅助系统',
    no: 'XY20231215012',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '0'
  },
  {
    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
    no: 'XY20231215012',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '0'
  },
  {
    name: '常规早稻新品种“浙早33”的相关培育技术',
    no: 'XY20231215012',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '0'
  }
]);
const twoList: Ref<any> = ref([
  {
    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
    no: 'XY20231215012',
    number: '1',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '1'
  },
  {
    name: '数字矫形肢体骨骼康复机器辅助系统',
    no: 'XY20231215012',
    number: '2',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '1'
  },
  {
    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
    no: 'XY20231215012',
    number: '5',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '1'
  },
  {
    name: '常规早稻新品种“浙早33”的相关培育技术',
    no: 'XY20231215012',
    number: '8',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '1'
  }
]);
const thrList: Ref<any> = ref([
  {
    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
    no: 'XY20231215012',
    number: '1',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '2'
  },
  {
    name: '数字矫形肢体骨骼康复机器辅助系统',
    no: 'XY20231215012',
    number: '2',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '2'
  },
  {
    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
    no: 'XY20231215012',
    number: '5',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '2'
  },
  {
    name: '常规早稻新品种“浙早33”的相关培育技术',
    no: 'XY20231215012',
    number: '8',
    service: '浙江省人民医院',
    unit: '浙江工业大学',
    notice_time: '2023-12-15 17:47:19',
    end_time: '2023-12-25 17:47:19',
    status: '2'
  }
]);
// 成果大厅列表
const achieveList: Ref<any> = ref([
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  }
]);
// 需求大厅列表
const demandList: Ref<any> = ref([
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  }
]);
// 服务大厅列表
const serviceList: Ref<any> = ref([
  {
    title: '争当创新驱动发展先行军',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  },
  {
    title: '“八八战略”引领浙江闯出创新改革开放新路',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  },
  {
    title: '《吉林省科学技术普及条例》将施行',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  },
  {
    title: '吉林启动“吉里好成果”平台建设',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  }
]);
// 活动大厅列表
const activityList: Ref<any> = ref([
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '0'
  },
  {
    title: '浙江省科学技术厅 关于第七届中国创新挑战赛（浙江）暨 2022年浙江省技术需求“揭榜挂帅”大赛技术需求公告',
    time: '2023-07-31',
    status: '1'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '0'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '0'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '0'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '1'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '1'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '1'
  },
  {
    title: '关于浙江大学衢州研究院1件技术秘密转让的公示',
    time: '2023-07-31',
    status: '0'
  }
]);
// 活动大厅行业动态
const trendsList: Ref<any> = ref([
  {
    title: '争当创新驱动发展先行军',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  },
  {
    title: '“八八战略”引领浙江闯出创新改革开放新路',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  },
  {
    title: '《吉林省科学技术普及条例》将施行',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  },
  {
    title: '吉林启动“吉里好成果”平台建设',
    time: '2023-07-31',
    content:
      '“八八战略”实施的20年，是之江大地的科技园区沿着习近平同志擘画的蓝图踔厉奋发、勇毅前行的20年。20年来，从“风景天堂”“西湖天堂”蝶变为“硅谷天堂”“高科技天堂”的杭州高新区；从南湖畔的科创种子成长为G60科创走廊上璀璨明珠的嘉兴科技城；从开启“鲲鹏展翅搏长天”新征程到谱写“勇立潮头敢为先”新篇章的宁波高新区……钱塘两岸的科技园区凭借体制机制灵活、科教资源集聚、产业基础扎实等优势，深入贯彻“八八战略”，在创新驱动、改革攻坚、开放合作等方面率先垂范，以高质量发展的生动实践展现了“八八战略”引领浙江现代化建设的丰硕成果。'
  }
]);
// 活动大厅视频点播
const videoList: Ref<any> = ref([
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '“哪吒计划”先进电子专场路演——杭州专场', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' }
]);
// 菜单
const toolList: Ref<any> = ref([
  { name: '我要交易', url: '/src/assets/menu_3.png', route: '/' },
  { name: '找项目', url: '/src/assets/menu_2.png', route: '/demand' },
  { name: '找成果', url: '/src/assets/menu_4.png', route: '/achieve' },
  { name: '找服务', url: '/src/assets/menu_6.png', route: '/service' },
  { name: '智能客服', url: '/src/assets/menu_7.png', type: '0' },
  { name: '返回顶部', url: '/src/assets/menu_5.png', type: '1' }
]);
// 是否展开
const isOpen: Ref<any> = ref(false);
// 是否弹框客服
const dialog: Ref<any> = ref(false);
// 请求
onMounted(async () => {
  loading.value = true;
  search();
  loading.value = false;
});
const search = async () => {
  // let res: IQueryResult = await toolsAxios.dataCount();
  // if (res.errcode == '0') {
  //   info.value = res.data;
  // }
};
// 查询
const toSearch = () => {
  console.log(searchInput.value);
};
// 登录
const toLogin = (status) => {
  router.push({ path: '/login', query: { status } });
};
// 滚动到指定位置
const switchMenu = async (item) => {
  document.getElementById(item.href).scrollIntoView({ behavior: 'smooth' });
};
// 交易大厅查看更多
const tranMore = (item) => {
  router.push({ path: `/trade/${item.type}`, query: { type: item.type } });
};
// 交易大厅详情
const tranView = (item) => {
  router.push({ path: '/trade/detail', query: { id: item.id || item._id } });
};
// 成果大厅查看更多
const achieveMore = () => {
  router.push({ path: `/achieve` });
};
// 成果大厅详情
const achieveView = (item) => {
  router.push({ path: '/achieve/detail', query: { id: item.id || item._id } });
};
// 需求大厅查看更多
const demandMore = () => {
  router.push({ path: `/demand` });
};
// 需求大厅详情
const demandView = (item) => {
  router.push({ path: '/demand/detail', query: { id: item.id || item._id } });
};
// 服务大厅政策法规查看更多
const toPolicy = (type) => {
  router.push({ path: `/policy`, query: { type } });
};
// 服务大厅政策法规详情
const policyView = (item) => {
  router.push({ path: '/policy/detail', query: { id: item.id || item._id } });
};
// 服务大厅服务内容
const toService = (item) => {
  router.push({ path: `/service`, query: { type: item.type } });
};
// 活动大厅通知公告查看更多
const toActivityMore = () => {
  router.push({ path: `/activity` });
};
// 活动大厅通知公告详情
const toNewsView = (item) => {
  router.push({ path: '/activity/new', query: { id: item.id || item._id } });
};
// 活动大厅视频点播详情
const toVideoView = (item) => {
  router.push({ path: '/activity/video', query: { id: item.id || item._id } });
};

// 展开菜单
const toOpen = () => {
  isOpen.value = !isOpen.value;
};
// 菜单按钮
const toCommon = (item) => {
  if (item.route) {
    router.push({ path: item.route });
  } else {
    if (item.type == '0') dialog.value = true;
    else window.scrollTo(0, 0);
  }
};
// 帮助中心
const toHelp = (type) => {
  router.push({ path: '/help', query: { type } });
};
</script>
<style scoped lang="scss">
.main {
  .head {
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 40px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    color: #ffffff;
    font-family: Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', STHeiti, '华文细黑', sans-serif;

    .left {
      display: flex;
      align-items: center;
      font-size: 18px;

      .image {
        width: 40px;
        height: 40px;
      }

      text {
        padding: 0 0 0 10px;
      }
    }

    .center {
      display: flex;
      justify-content: center;
      font-size: 18px;

      a:hover {
        color: #2374ff;
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 16px;

      text {
        padding: 0 5px;
      }

      .right_1:hover {
        color: #2374ff;
      }

      .right_3 {
        text-align: center;

        text:hover {
          color: #2374ff;
        }
      }
    }
  }

  .logo {
    .video {
      width: 100%;
      height: 630px;
      object-fit: cover;
    }
  }

  .title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 55px 0 0 0;

    .font_1 {
      font-size: 30px;
      font-family: Microsoft YaHei;
      line-height: 36px;
      color: #000;
    }

    .font_2 {
      font-size: 16px;
      font-family: Microsoft YaHei;
      letter-spacing: 4px;
      line-height: 19px;
      color: #535353;
    }

    .line {
      margin: 15px 0;
      background-color: #000;
      width: 37px;
      height: 2px;
    }
  }

  .foot {
    padding: 10px 0;
    background-color: #2e3546;
    color: rgba(0, 0, 0, 0.85);
    font-size: 13px;
    color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol', 'Noto Color Emoji';
    font-variant: tabular-nums;
    line-height: 1.5715;
    font-feature-settings: 'tnum', 'tnum';

    .image {
      width: 78px;
      height: 78px;
    }

    .footTitle {
      margin: 5px 0 0 0;

      .footSpan {
        margin-bottom: 3px;
      }
    }

    .footTop {
      font-size: 18px;
      margin-bottom: 12px;
    }
  }

  .footflex {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .footflex1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.tool {
  position: fixed;
  right: 10px;
  bottom: 150px;
  z-index: 999;
}

.tool1 {
  width: 80px;
  font-size: 12px;
  font-weight: bold;
  background: linear-gradient(135deg, #4d8cf1, #ade0f8);
  border-radius: 40px;
  padding: 20px 0;
  color: #ffffff;
  text-align: center;

  .tool_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;

    .image {
      width: 40px;
      height: 40px;
      animation: bounce-down 1.6s linear infinite;
    }

    @keyframes bounce-down {
      25% {
        -webkit-transform: translateY(-4px);
      }

      50%,
      100% {
        -webkit-transform: translateY(0);
      }

      75% {
        -webkit-transform: translateY(4px);
      }
    }

    span {
      margin: 5px 0 0 0;
    }
  }
}

.tool2 {
  width: 60px;
  height: 60px;

  .image {
    animation: bounce-down 1.6s linear infinite;
  }

  @keyframes bounce-down {
    25% {
      -webkit-transform: translateY(-4px);
    }

    50%,
    100% {
      -webkit-transform: translateY(0);
    }

    75% {
      -webkit-transform: translateY(4px);
    }
  }
}

:deep(.el-dialog__body) {
  padding: 0 !important;
}

.dialog {
  .content {
    padding: 20px;

    .title {
      padding-top: 23px;
      padding-bottom: 26px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }

    .list {
      display: flex;
      align-items: center;

      .image {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        margin: 0 10px 0 0;
      }

      .message {
        position: relative;
        max-width: 330px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 22px;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.65);
        padding: 16px 11px 16px 16px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.12);
      }
    }
  }

  .foot {
    height: 140px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 13px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .input {
      flex: 1;
      height: 0;
      resize: none;
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      line-height: 22px;
    }

    .button {
      margin-top: 8px;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      .send {
        cursor: pointer;
        color: #fff;
        background: #2f54eb;
        border-radius: 4px;
        width: 64px;
        height: 32px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}</style>