technique_web3/src/views/home/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <div class="w_1200" v-loading="loadingOne">
          <el-col :span="24" class="one" v-loading="loadingTwo">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">汇聚各种行业政策法规</el-col>
              <el-col :span="12" class="right" @click="selectMenu('news')">查看更多新闻</el-col>
            </el-col>
            <el-col :span="24" class="one_5">
              <el-col :span="3" class="left">
                <el-image class="image" :src="news" fit="fill" />
              </el-col>
              <el-col :span="21" class="right">
                <el-col
                  :span="12"
                  class="list"
                  v-for="(item, index) in newsList"
                  :key="index"
                  @click="toView(item, '3')"
                >
                  <el-col :span="4" class="left">
                    <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
                    <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
                  </el-col>
                  <el-col :span="20" class="right">
                    <el-col :span="24" class="name textOver">
                      <el-tooltip effect="dark" :content="item.title" placement="top">
                        {{ item.title || '暂无标题' }}
                      </el-tooltip>
                    </el-col>
                    <el-col :span="24" class="content">
                      <div v-html="removeHtmlStyle(item.content)"></div>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one" v-loading="loadingThr">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">汇聚科技创新的创新赛道</el-col>
              <el-col :span="12" class="right" @click="selectMenu('project')">查看全部项目</el-col>
            </el-col>
            <el-col :span="24" class="one_2">
              <el-col :span="4" class="left">
                <el-col
                  :span="24"
                  class="list"
                  v-for="(item, index) in typeList"
                  :key="index"
                  @mouseover="mouseOver(item)"
                  :class="[active == item.type ? 'active' : '']"
                >
                  <el-col :span="6" class="image">
                    <el-image
                      v-show="active == item.type"
                      class="image"
                      :src="item.icon"
                      fit="fill"
                    />
                    <el-image
                      v-show="active != item.type"
                      class="image"
                      :src="item.url"
                      fit="fill"
                    />
                  </el-col>
                  <el-col :span="18" class="title textOver">{{ item.title }}</el-col>
                </el-col>
              </el-col>
              <el-col :span="20" class="right">
                <el-col
                  :span="7"
                  class="list"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="toView(item, '0')"
                >
                  <el-col :span="24" class="name textOver">{{
                    item.name || '暂无项目名称'
                  }}</el-col>
                  <el-col :span="24" class="brief textMore">
                    项目介绍：{{ item.brief || '暂无项目介绍' }}
                  </el-col>
                  <el-col :span="24" class="info">
                    <div>技术成熟度：{{ getDict(item.maturity, 'maturity') }}</div>
                    <div>合作类型：{{ getDict(item.cooperate, 'cooperate') }}</div>
                  </el-col>
                  <span class="key">{{ getDict(item.type, 'type') }}</span>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one" v-loading="loadingFour">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">汇聚各种行业的专家</el-col>
              <el-col :span="12" class="right" @click="selectMenu('expert')">查看更多专家</el-col>
            </el-col>
            <el-col :span="24" class="one_3">
              <el-col :span="24" class="table_1">
                <el-col :span="2" class="title">姓名</el-col>
                <el-col :span="3" class="title">所在地</el-col>
                <el-col :span="3" class="title">学历/职称</el-col>
                <el-col :span="3" class="title">技术领域</el-col>
                <el-col :span="3" class="title">工作单位</el-col>
                <el-col :span="6" class="title">研究方向</el-col>
                <el-col :span="4" class="title">操作</el-col>
              </el-col>
              <el-col :span="24" class="table_2">
                <vue3-seamless-scroll
                  :list="exportList"
                  :hover="true"
                  :step="0.5"
                  :wheel="true"
                  :isWatch="true"
                >
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in exportList"
                    :key="index"
                    @click="toView(item, '1')"
                  >
                    <el-col :span="2" class="content textOver">
                      <el-tooltip effect="dark" :content="item.name" placement="top">
                        {{ item.name || '暂无名称' }}
                      </el-tooltip>
                    </el-col>
                    <el-col :span="3" class="content textOver">
                      {{ getArea(item.area) || '暂无地区' }}
                    </el-col>
                    <el-col :span="3" class="content textOver">
                      {{ getDict(item.education, 'education') || '暂无学历/职称' }}
                    </el-col>
                    <el-col :span="3" class="content textOver">
                      {{ getDict(item.field, 'field') || '暂无技术领域' }}
                    </el-col>
                    <el-col :span="3" class="content textOver">
                      {{ item.work || '暂无工作单位' }}
                    </el-col>
                    <el-col :span="6" class="content textOver">
                      {{ item.direction || '暂无研究方向' }}
                    </el-col>
                    <el-col :span="4" class="content textOver">
                      <el-button @click.stop="toChat(item)" type="primary"> 联络专家 </el-button>
                    </el-col>
                  </el-col>
                </vue3-seamless-scroll>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one" v-loading="loadingFive">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">汇聚各类优质的企业</el-col>
              <el-col :span="12" class="right" @click="selectMenu('company')">查看更多企业</el-col>
            </el-col>
            <el-col :span="24" class="one_4">
              <el-col
                :span="24"
                class="list"
                v-for="(item, index) in companyList"
                :key="index"
                @click="toView(item, '2')"
              >
                <el-col :span="4" class="left">
                  <el-image class="image" :src="getUrl(item.logo)" fit="fill" />
                </el-col>
                <el-col :span="20" class="right">
                  <el-col :span="24" class="right_1">
                    <el-tooltip effect="dark" :content="item.name" placement="top">
                      <span class="name">{{ item.name || '暂无名称' }}</span>
                    </el-tooltip>
                    <el-tag :type="[item.companyStatus == '0' ? 'success' : 'info']">{{
                      getDict(item.companyStatus, 'status')
                    }}</el-tag>
                  </el-col>
                  <el-col :span="24" class="right_2">
                    <el-tag type="primary">{{ getDict(item.pattern, 'pattern') }}</el-tag>
                    <el-tag type="primary">{{ getDict(item.scale, 'scale') }}</el-tag>
                  </el-col>
                  <el-col :span="24" class="right_3">
                    <el-col :span="6" class="info">
                      法定代表人：<span>{{ item.representative || '暂无' }}</span>
                    </el-col>
                    <el-col :span="6" class="info">
                      成立日期： {{ moment(item.create_time).format('YYYY-MM-DD') }}
                    </el-col>
                    <el-col :span="8" class="info">
                      统一社会信用代码：{{ item.code || '暂无' }}
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="right_3">
                    <el-col :span="6" class="info">电话：{{ item.phone || '暂无' }}</el-col>
                    <el-col :span="8" class="info">邮箱：{{ item.email || '暂无' }}</el-col>
                  </el-col>
                  <el-col :span="24" class="right_3"> 地址：{{ item.address || '暂无' }} </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one" v-loading="loadingSix">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">汇聚各类优质的成果</el-col>
              <el-col :span="12" class="right" @click="selectMenu('achievement')"
                >查看更多成果</el-col
              >
            </el-col>
            <el-col :span="24" class="one_6">
              <el-col :span="10" class="left">
                <vue3-seamless-scroll
                  :list="achievementList"
                  :hover="true"
                  :step="0.5"
                  :wheel="true"
                  :isWatch="true"
                >
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in achievementList"
                    :key="index"
                    @click="toView(item, '4')"
                  >
                    <el-col :span="1">
                      <div class="i"></div>
                    </el-col>
                    <el-col :span="16" class="content textOver">
                      <el-tooltip effect="dark" :content="item.name" placement="top">
                        {{ item.name || '暂无名称' }}
                      </el-tooltip>
                    </el-col>
                    <el-col :span="7" class="other textOver">
                      {{ getDict(item.field || '暂无技术领域', 'field') }}
                    </el-col>
                  </el-col>
                </vue3-seamless-scroll>
              </el-col>
              <el-col :span="14" class="right">
                <el-col :span="24" class="right_1">
                  <BuildTwoTone /> <span>热门技术领域</span>
                </el-col>
                <div class="right_2">
                  <div
                    class="list"
                    v-for="(item, index) in fieldList"
                    :key="index"
                    @click="toAchive(item)"
                  >
                    <RocketTwoTone />
                    <span class="textOver">{{ item.label }}</span>
                  </div>
                </div>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
const $checkRes = inject('$checkRes')
import { get } from 'lodash-es'
const selectMenu = inject('selectMenu')
import { SearchOutlined, RocketTwoTone, BuildTwoTone } from '@ant-design/icons-vue'
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
import { ProjectStore } from '@/store/api/platform/project'
import { AchievementStore } from '@/store/api/platform/achievement'
import { ExpertStore } from '@/store/api/user/expert'
import { NewsStore } from '@/store/api/platform/news'
import { CompanyStore } from '@/store/api/user/company'
const companyStore = CompanyStore()
const newsStore = NewsStore()
const store = ProjectStore()
const dictDataStore = DictDataStore()
const achievementStore = AchievementStore()
const expertStore = ExpertStore()
// 路由
const router = useRouter()
// 图片引入
import science from '/images/home.jpg'
import science_1 from '/images/science_1.png'
import science_2 from '/images/science_2.png'
import science_3 from '/images/science_3.png'
import science_4 from '/images/science_4.png'
import science_5 from '/images/science_5.png'
import science_6 from '/images/science_6.png'
import science_7 from '/images/science_7.png'
import science_8 from '/images/science_8.png'
import science_9 from '/images/science_9.png'
import science1 from '/images/science1.png'
import science2 from '/images/science2.png'
import science3 from '/images/science3.png'
import science4 from '/images/science4.png'
import science5 from '/images/science5.png'
import science6 from '/images/science6.png'
import science7 from '/images/science7.png'
import science8 from '/images/science8.png'
import science9 from '/images/science9.png'
import news from '/images/news.jpg'
// 加载中
const loadingOne = ref(false)
const loadingTwo = ref(false)
const loadingThr = ref(false)
const loadingFour = ref(false)
const loadingFive = ref(false)
const loadingSix = ref(false)
// 搜索
const searchValue = ref('')
const active = ref('0')
const typeList = ref([
  { url: science_1, icon: science1, title: '生物技术', type: '0' },
  { url: science_2, icon: science2, title: '信息技术', type: '1' },
  { url: science_3, icon: science3, title: '新材料', type: '2' },
  { url: science_4, icon: science4, title: '新能源', type: '3' },
  { url: science_5, icon: science5, title: '智能制造', type: '4' },
  { url: science_6, icon: science6, title: '光电芯片', type: '5' },
  { url: science_7, icon: science7, title: '人工智能', type: '6' },
  { url: science_8, icon: science8, title: '航空航天', type: '7' },
  { url: science_9, icon: science9, title: '其他', type: '8' }
])
const list = ref([])
// 字典表
const projectList = ref([])
const maturityList = ref([])
const industryList = ref([])
const statusList = ref([])
const fieldList = ref([])
const patternList = ref([])
const scaleList = ref([])
const educationList = ref([])
// 成果
const achievementList = ref([])
// 专家
const exportList = ref([])
// 企业
const companyList = ref([])
// 新闻
const newsList = ref([])
// 项目
const list0 = ref([])
const list1 = ref([])
const list2 = ref([])
const list3 = ref([])
const list4 = ref([])
const list5 = ref([])
const list6 = ref([])
const list7 = ref([])
const list8 = ref([])
// 请求
onMounted(async () => {
  loadingOne.value = true
  await searchOther()
  loadingOne.value = false
  loadingTwo.value = true
  await searchNews()
  loadingTwo.value = false
  loadingThr.value = true
  await search(active.value)
  loadingThr.value = false
  loadingFour.value = true
  await searchExport()
  loadingFour.value = false
  loadingFive.value = true
  await searchCompany()
  loadingFive.value = false
  loadingSix.value = true
  await searchAchieve()
  loadingSix.value = false
})
const searchOther = async () => {
  let result
  // 学历
  result = await dictDataStore.query({ code: 'education', is_use: '0' })
  if ($checkRes(result)) educationList.value = result.data
  // 合作类型
  result = await dictDataStore.query({ code: 'projectType', is_use: '0' })
  if ($checkRes(result)) projectList.value = result.data
  // 成熟度
  result = await dictDataStore.query({ code: 'projectMaturity', is_use: '0' })
  if ($checkRes(result)) maturityList.value = result.data
  // 行业分类
  result = await dictDataStore.query({ code: 'industry', is_use: '0' })
  if ($checkRes(result)) industryList.value = result.data
  // 企业状态
  result = await dictDataStore.query({ code: 'companyStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 企业类型
  result = await dictDataStore.query({ code: 'companyType', is_use: '0' })
  if ($checkRes(result)) patternList.value = result.data
  // 企业规模
  result = await dictDataStore.query({ code: 'companyScale', is_use: '0' })
  if ($checkRes(result)) scaleList.value = result.data
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
}
const search = async (active) => {
  if (active == '0') {
    if (list0.value.length > 0) list.value = list0.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list0.value = res.data
      }
    }
  }
  if (active == '1') {
    if (list1.value.length > 0) list.value = list1.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list1.value = res.data
      }
    }
  }
  if (active == '2') {
    if (list2.value.length > 0) list.value = list2.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list2.value = res.data
      }
    }
  }
  if (active == '3') {
    if (list3.value.length > 0) list.value = list3.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list3.value = res.data
      }
    }
  }
  if (active == '4') {
    if (list4.value.length > 0) list.value = list4.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list4.value = res.data
      }
    }
  }
  if (active == '5') {
    if (list5.value.length > 0) list.value = list5.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list5.value = res.data
      }
    }
  }
  if (active == '6') {
    if (list6.value.length > 0) list.value = list6.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list6.value = res.data
      }
    }
  }
  if (active == '7') {
    if (list7.value.length > 0) list.value = list7.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list7.value = res.data
      }
    }
  }
  if (active == '8') {
    if (list0.value.length > 0) list.value = list8.value
    else {
      const info = {
        skip: 0,
        limit: 9,
        is_use: '0',
        status: '1'
      }
      if (active) info.type = active
      const res = await store.query(info)
      if (res.errcode == '0') {
        list.value = res.data
        list8.value = res.data
      }
    }
  }
}
const searchNews = async () => {
  const info = {
    skip: 0,
    limit: 6,
    is_use: '0',
    status: '1'
  }
  const res = await newsStore.query(info)
  if (res.errcode == '0') newsList.value = res.data
}
const searchExport = async () => {
  const info = {
    skip: 0,
    limit: 10,
    is_show: '0',
    status: '1'
  }
  const res = await expertStore.query(info)
  if (res.errcode == '0') exportList.value = res.data
}
const searchCompany = async () => {
  const info = {
    skip: 0,
    limit: 10,
    is_show: '0',
    status: '1'
  }
  const res = await companyStore.query(info)
  if (res.errcode == '0') companyList.value = res.data
}
const searchAchieve = async () => {
  const info = {
    skip: 0,
    limit: 10,
    is_use: '0',
    status: '1'
  }
  const res = await achievementStore.list(info)
  if (res.errcode == '0') achievementList.value = res.data
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'cooperate') res = projectList.value.find((f) => f.value == data)
  else if (model == 'education') res = educationList.value.find((f) => f.value == data)
  else if (model == 'maturity') res = maturityList.value.find((f) => f.value == data)
  else if (model == 'type') res = industryList.value.find((f) => f.value == data)
  else if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'field') res = fieldList.value.find((f) => f.value == data)
  else if (model == 'pattern') res = patternList.value.find((f) => f.value == data)
  else if (model == 'scale') res = scaleList.value.find((f) => f.value == data)
  return get(res, 'label')
}
const getUrl = (item) => {
  if (item) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
}
// 地区显示
const getArea = (data) => {
  if (data) return data.join(',')
  else return '暂无地区'
}
// 查看详情
const toView = (item, type) => {
  if (type == '0') router.push({ path: '/project/detail', query: { id: item.id || item._id } })
  else if (type == '1') router.push({ path: '/expert/detail', query: { id: item.id || item._id } })
  else if (type == '2') router.push({ path: '/company/detail', query: { id: item.id || item._id } })
  else if (type == '3') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
  else if (type == '4')
    router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
}
// 类型
const mouseOver = async (item) => {
  active.value = item.type
  await search(item.type)
}
// 联络专家
const toChat = (item) => {
  router.push({ path: '/chat', query: { id: item.user } })
}
// 查看成果
const toAchive = (item) => {
  router.push({ path: '/achievement', query: { type: item.value } })
}
const removeHtmlStyle = (html) => {
  let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g //去除样式
  let relTag = /<.+?>/g //去除标签
  let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g // 清除类名
  let newHtml = ''
  if (html) {
    newHtml = html.replace(relStyle, '')
    newHtml = newHtml.replace(relTag, '')
    newHtml = newHtml.replace(relClass, '')
  }
  return newHtml
}
// 搜索
const onSearch = (data) => {
  const query = { type: 'search' }
  if (data) query.searchValue = data
  router.push({ path: '/search', query })
}
</script>
<style scoped lang="scss">
.main {
  .home {
    position: relative;

    .image {
      width: 100%;
      height: 200px;
    }

    .input {
      width: 800px;
      position: absolute;
      left: 30%;
      bottom: 40%;

      :deep(.ant-input-affix-wrapper) {
        background-color: transparent;
        border: 3px solid #fff !important;
      }

      :deep(.ant-input) {
        height: 45px;
        line-height: 45px;
        font-family: PingFangSC-Regular;
        font-size: $global-font-size-18;
        padding-right: 24px;
        color: #fff;
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0 !important;
        text-shadow: 0 0 0 0 !important;
        background-color: transparent !important;

        &::placeholder {
          color: #ffffff !important;
        }
      }
    }
  }
  .one {
    padding: 25px 0;
    .one_1 {
      display: flex;
      justify-content: space-between;
      margin: 0 0 10px 0;
      .left {
        font-size: $global-font-size-26;
        font-family:
          PingFangSC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: #111;
        line-height: 33px;
      }
      .right {
        text-align: right;
        font-size: $global-font-size-18;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #2280ff;
        line-height: $global-font-size-16;
        display: block;
        margin-top: 13px;
        margin-right: 34px;
      }
      .right:hover {
        cursor: pointer;
      }
    }
    .one_2 {
      display: flex;
      .left {
        padding: 10px;
        .list {
          display: flex;
          padding: 15px;
          border-radius: 8px;
          .image {
            text-align: center;
            width: 20px;
            height: 20px;
          }
          .title {
            font-size: $global-font-size-18;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #111;
            line-height: $global-font-size-24;
          }
        }
        .list:hover {
          border-radius: 8px;
          background-color: #2280ff;
          cursor: pointer;
          .title {
            color: #ffffff;
          }
        }
        .active {
          border-radius: 8px;
          background-color: #2280ff;
          .title {
            color: #ffffff;
          }
        }
      }
      .right {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
        .list {
          padding: 20px;
          border-radius: 10px;
          margin: 0 0 10px 0;

          .name {
            display: flex;
            align-items: center;
            font-size: $global-font-size-18;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #111;
            line-height: $global-font-size-18;
            display: block;
            margin: 5px 0 12px 0;
          }
          .name:hover {
            color: #2374ff;
            cursor: pointer;
          }
          .brief {
            font-size: $global-font-size-18;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #333;
            line-height: 24px;
            margin-bottom: 12px;
            cursor: pointer;
          }
          .info {
            display: flex;
            justify-content: space-between;
            font-size: $global-font-size-12;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #666;
            line-height: $global-font-size-12;
            margin-bottom: 15px;
            cursor: pointer;
          }
          .key {
            font-size: $global-font-size-14;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #999990;
            line-height: $global-font-size-14;
            height: 22px;
            border-radius: 2px;
            border: 1px solid #dbdbdb;
            box-sizing: border-box;
            padding: 0 6px;
            cursor: pointer;
          }
        }
        .list:nth-child(1n) {
          background: linear-gradient(180deg, #d5e5ff, #fff);
        }
        .list:nth-child(2n) {
          background: linear-gradient(180deg, #cbeff8, #fff);
        }
      }
    }
    .one_3 {
      margin: 10px;

      .table_1 {
        display: flex;
        justify-content: center;
        height: 50px;
        background-image: linear-gradient(90deg, #2171f6 0, #619bf5 100%);
        line-height: 50px;
        color: #ffffff;
        font-size: $global-font-size-18;

        .title {
          text-align: center;
        }
        .title:hover {
          cursor: pointer;
        }
      }

      .table_2 {
        max-height: 400px;
        overflow: hidden;

        .list {
          display: flex;
          justify-content: center;
          height: 50px;
          line-height: 50px;
          font-size: $global-font-size-18;
          color: #666;
          background: #fff;

          .content {
            text-align: center;
            padding: 0 10px;
          }

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

        .list:nth-child(2n) {
          background: #f4f4f4;
        }
      }
    }
    .one_4 {
      .list {
        display: flex;
        margin: 5px 0 0 0;
        padding: 5px;
        border-radius: 8px;
        border: 1px solid #f4f4f4;
        .left {
          text-align: center;
          .image {
            width: 150px;
            height: 150px;
            border-radius: 10px;
          }
        }
        .right {
          padding: 5px;
          .right_1 {
            display: flex;
            align-content: center;
            .name {
              margin: 0 10px 0 0;
              word-break: break-all;
              font-size: $global-font-size-20;
              font-family:
                PingFangSC-Regular,
                PingFang SC;
              font-weight: 500;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .right_2 {
            grid-gap: 0.5rem;
            gap: 0.5rem;
            display: flex;
            margin: 10px 0;
          }
          .right_3 {
            display: flex;
            margin: 10px 0;
            font-size: $global-font-size-18;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            color: #666;
            .info {
              span {
                color: #2171f6;
              }
            }
          }
        }
      }
      .list:hover {
        box-shadow:
          0 4px 5px -3px rgba(0, 0, 0, 0.06),
          0 4px 12px 4px rgba(0, 0, 0, 0.06);
      }
    }
    .one_5 {
      display: flex;

      .left {
        .image {
          width: 150px;
          height: 320px;
        }
      }

      .right {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          transition: all 0.3s;

          .left {
            font-family: PingFangSC-Regular;
            font-size: $global-font-size-14;
            color: #2374ff;
            line-height: $global-font-size-14;

            .year {
              margin-bottom: 2px;
            }

            .date {
              font-size: $global-font-size-24;
              line-height: $global-font-size-24;
              margin-bottom: 10px;
            }
          }

          .right {
            .name {
              font-family: PingFangSC-Medium;
              font-size: $global-font-size-18;
              color: #121834;
              line-height: $global-font-size-18;
              font-weight: 700;
              margin-bottom: 8px;
            }

            .content {
              font-size: $global-font-size-14;
              color: #525a68;
              line-height: 19px;
              font-weight: 400;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-top: 8px;
            }
          }
        }

        .list:hover {
          background: #f0f7ff;
          box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
          cursor: pointer;
        }
      }
    }
    .one_6 {
      display: flex;
      padding: 20px 22px;
      background-color: #fbfcfd;
      .left {
        max-height: 300px;
        overflow: hidden;
        .list {
          display: flex;
          align-items: center;
          height: 34px;
          font-size: $global-font-size-18;
          .i {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            width: 6px;
            height: 6px;
            background-color: #8ab7f1;
            border-radius: 50%;
          }
          .other {
            color: #145ca4;
            text-align: center;
          }
        }
      }
      .right {
        font-size: $global-font-size-18;
        .right_1 {
          padding: 10px 30px;
          span {
            margin: 0 5px 0 0;
          }
        }
        .right_2 {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin: 10px 0 0 0;
          .list {
            display: flex;
            align-items: center;
            margin: 0 0 10px 10px;
            padding-left: 15px;
            width: 200px;
            height: 50px;
            line-height: 53px;
            background-color: #eaeff7;
            span {
              margin: 0 5px 0 0;
            }
          }
          .list:hover {
            cursor: pointer;
            color: #2e70f1;
            box-shadow: 0 0 10px 0 rgba(0, 69, 183, 0.3);
          }
        }
      }
    }
  }
}
</style>