cxyy-web/src/views/one/index.vue

<template>
  <custom-layout v-loading="loading" :is_carousel="true" :carouselList="carouselList">
    <el-col :span="24" class="two">
      <div class="two_left">
        <div class="left_more left_1" @click="toComon('/nine', '1')">
          <div class="name">成果中心</div>
          <div class="english">ACHIEVEMENT CENTER</div>
          <div class="remark">成果征集入口</div>
        </div>
        <div class="left_more left_2" @click="toComon('/center/basic', '0')">
          <div class="name">个人中心</div>
          <div class="english">PERSONAL CENTER</div>
          <div class="remark">个人信息入口</div>
        </div>
        <div class="left_more left_3" @click="toComon('/four', '1')">
          <div class="name">信息检索</div>
          <div class="english">INFORMATION RETRIEVAL</div>
          <div class="remark">信息检索入口</div>
        </div>
      </div>
      <div class="two_center">
        <div class="center_1">
          <div class="center_left">新闻资讯</div>
          <div class="center_right" @click="toMore">更多>></div>
        </div>
        <div class="center_2">
          <vue3-seamless-scroll :list="newsList" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
            <div class="center_list" v-for="(item, index) in newsList" :key="index">
              <div class="center_left textOne">{{ item.title || '暂无' }}</div>
              <div class="center_right">{{ moment(item.time).format('YYYY-MM-DD') || '暂无' }}</div>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
      <div class="two_right">
        <div class="right_more right_1" @click="toComon('/expert', '1')">
          <div class="right_left">
            <el-image class="image" :src="home_1" fit="fill" />
            <div class="right_name">
              <div class="name">专家库</div>
              <div class="english">EXPERT LIBRARY</div>
            </div>
          </div>
          <div class="right_right">点击进入>></div>
        </div>
        <div class="right_more right_2" @click="toComon('/company', '1')">
          <div class="right_left">
            <el-image class="image" :src="home_2" fit="fill" />
            <div class="right_name">
              <div class="name">企业库</div>
              <div class="english">ENTERPRISE LIBRARY</div>
            </div>
          </div>
          <div class="right_right">点击进入>></div>
        </div>
        <div class="right_more right_3" @click="toComon('/project', '1')">
          <div class="right_left">
            <el-image class="image" :src="home_3" fit="fill" />
            <div class="right_name">
              <div class="name">项目库</div>
              <div class="english">PROJECT LIBRARY</div>
            </div>
          </div>
          <div class="right_right">点击进入>></div>
        </div>
      </div>
    </el-col>
    <el-col :span="24" class="thr">
      <div class="thr_1">
        <div class="title">赛事推广</div>
      </div>
      <div class="thr_2">
        <div class="left">
          <el-image v-if="matchInfo.file && matchInfo.file.length > 0" class="image" :src="getUrl(matchInfo.file, 'array')" fit="cover">
            <template v-slot:error>
              <el-image class="image" :src="match_3" fit="fill" />
            </template>
          </el-image>
          <el-image v-else class="image" :src="match_3" fit="fill" />
          <div class="name textMore">{{ matchInfo.name || '暂无' }}</div>
          <div class="brief">{{ removeHtmlStyle(matchInfo.brief) }}</div>
          <div class="other">
            <div class="time">
              <el-image class="image" :src="time1" fit="fill" />
              <div>{{ matchInfo.start_time || '暂无' }}~{{ matchInfo.end_time || '暂无' }}</div>
            </div>
            <div class="button" @click="toView(matchInfo, '2')">查看 ></div>
          </div>
        </div>
        <div class="right">
          <div class="list" v-for="(item, index) in matchList" :key="index">
            <el-image v-if="item.file && item.file.length > 0" class="image" :src="getUrl(item.file, 'array')" fit="cover">
              <template v-slot:error>
                <el-image class="image" :src="match_3" fit="fill" />
              </template>
            </el-image>
            <el-image v-else class="image" :src="match_3" fit="fill" />
            <div class="name textMore">{{ item.name }}</div>
            <div class="other">
              <div class="time">
                <el-image class="image" :src="time1" fit="fill" />
                <div>{{ item.start_time || '暂无' }}~{{ item.end_time || '暂无' }}</div>
              </div>
              <div class="button" @click="toView(item, '2')">查看 ></div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="24" class="four">
      <div class="four_1">
        <div class="title">合作伙伴</div>
      </div>
      <div class="four_2">
        <div class="list" v-for="(item, index) in friendList" :key="index">
          <el-image class="image" :src="getUrl(item.url, 'array')" fit="fill"></el-image>
        </div>
      </div>
    </el-col>
    <el-col :span="24" class="five">
      <div class="five_1">
        <div class="title">友情链接</div>
      </div>
      <div class="five_2">
        <el-col :span="8" class="list" v-for="(item, index) in typeList" :key="index">
          <div class="list_1">
            <div class="title">{{ item.title }}</div>
          </div>
          <div class="list_2" v-for="(tag, indexx) in item.list" :key="indexx" @click="toLink(tag)">
            {{ tag.name }}
          </div>
        </el-col>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
import moment from 'moment'
// 图片引入
import home_1 from '/images/home_1.png'
import home_2 from '/images/home_2.png'
import home_3 from '/images/home_3.png'
import time1 from '/images/time-dary.png'
import match_3 from '/images/match_3.jpg'
const $checkRes = inject('$checkRes')

import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)

// 接口
import { NewsStore } from '@/store/api/platform/news'
import { MatchStore } from '@/store/api/platform/match'
import { DesignStore } from '@/store/api/platform/design'
const newsStore = NewsStore()
const matchStore = MatchStore()
const designStore = DesignStore()
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
const carouselList = ref([])
const friendList = ref([])
// 新闻
const newsList = ref([])
// 比赛
const matchList = ref([])
const matchInfo = ref({})
// 分类
const typeList = ref([
  { title: '热门高校', list: [] },
  { title: '政府部门', list: [] },
  { title: '科研机构', list: [] }
])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await searchMatch()
  loading.value = false
})
const searchOther = async () => {
  const info = { skip: 0, limit: 10, is_use: '0', status: '1' }
  let res
  // 政策新闻
  res = await newsStore.query({ ...info })
  if (res.errcode == '0') newsList.value = res.data
  // 基础设置
  res = await designStore.query({})
  if ($checkRes(res)) {
    carouselList.value = res.data[0].carouselUrl || []
    friendList.value = res.data[0].friend || []
    const friendship = res.data[0].friendship || []
    for (const val of friendship) {
      for (const tag of typeList.value) {
        if (val.type == tag.title) {
          tag.list.push(val)
        }
      }
    }
  }
}
const searchMatch = async () => {
  const info = { skip: 0, limit: 5, is_use: '0', status: '1' }
  const res = await matchStore.query(info)
  if (res.errcode == '0') {
    matchList.value = res.data.slice(1, 5)
    matchInfo.value = res.data[0]
  }
}
// 查看详情
const toView = (item, type) => {
  if (type == '0') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
  else if (type == '1') router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
  else router.push({ path: '/match/detail', query: { id: item.id || item._id } })
}
// 查看更多
const toMore = () => {
  router.push({ path: '/news' })
}
// 查看
const toComon = (route, type) => {
  if (user.value.id || type == '1') {
    router.push({ path: route })
  } else {
    router.push({ path: '/login', query: { status: '1' } })
  }
}
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 toLink = (item) => {
  window.open(item.href, '_blank') // 在新标签页中打开URL
}
const getUrl = (item, type) => {
  if (item) {
    if (type == 'array') return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
    else return `${import.meta.env.VITE_APP_HOST}${item.uri}`
  }
}
</script>
<style scoped lang="scss">
.one {
  .image {
    width: 100%;
    height: 100%;
  }
}
.two {
  width: 1300px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .two_left {
    width: 327px;

    .left_more {
      width: 327px;
      padding-left: 45px;
      height: 127px;
      border-radius: 2px;
      color: #fff;
      margin-bottom: 9px;
      position: relative;
      cursor: default;

      .name {
        font-size: $global-font-size-26;
        font-weight: 700;
        line-height: 30px;
        padding-top: 20px;
      }
      .english {
        font-size: $global-font-size-14;
        padding: 7px 0;
      }
      .remark {
        font-size: $global-font-size-14;
        padding: 0 10px;
        height: 30px;
        display: block;
        border: 1px solid hsla(0, 0%, 100%, 0.5);
        text-align: center;
        line-height: 30px;
        float: left;
      }
    }
    .left_1 {
      background: linear-gradient(90deg, #6a8df3, #119eee);
    }
    .left_2 {
      background: linear-gradient(90deg, #ef7d2b, #fcaa64);
    }
    .left_3 {
      background: linear-gradient(90deg, #22b9c7, #32cfc6);
    }
  }
  .two_center {
    margin: 0 10px;
    width: 635px;

    .center_1 {
      display: flex;
      justify-content: space-between;
      height: 49px;
      background: #d3e0fe;
      font-size: 20px;
      line-height: 49px;
      padding: 0 10px 0 20px;
      .center_right {
        color: #ababab;
        font-size: $global-font-size-14;
        cursor: default;
      }
    }
    .center_2 {
      background: #f1f7ff;
      height: 350px;
      overflow: hidden;
      .center_list {
        width: 100%;
        display: flex;
        align-items: center;
        height: 47px;
        border-bottom: 1px dashed #e5e5e5;
        line-height: 47px;
        padding-left: 20px;
        .center_left {
          width: 84%;
          font-size: $global-font-size-16;
        }
        .center_right {
          color: #999;
          font-size: $global-font-size-14;
        }
      }
    }
  }
  .two_right {
    width: 307px;
    .right_more {
      width: 307px;
      height: 124px;
      margin-bottom: 13px;
      border-radius: 8px;
      cursor: default;
      .right_left {
        display: flex;
        align-items: center;
        padding-top: 25px;
        .image {
          padding: 0 10px 0 15px;
        }
        .name {
          font-size: $global-font-size-28;
          font-weight: 400;
          line-height: 30px;
          margin: 0 0 8px 0;
        }
        .english {
          font-size: $global-font-size-14;
          line-height: 14px;
        }
      }
      .right_right {
        display: flex;
        justify-content: flex-end;
        padding-right: 16px;
        padding-top: 5px;
        font-size: $global-font-size-14;
      }
    }
    .right_1 {
      background: linear-gradient(90deg, #d1dcff, #d7e7fb);
      color: #2073c7;
      .right_right {
        color: #89b9ee;
      }
    }
    .right_2 {
      background: linear-gradient(90deg, #f9e6d7, #fcf6f2);
      color: #e48a27;
      .right_right {
        color: #f5c494;
      }
    }
    .right_3 {
      background: linear-gradient(90deg, #b4e7d0, #cdf2eb);
      color: #11af84;
      margin-bottom: 0;
      .right_right {
        color: #62c5aa;
      }
    }
  }
}
.thr {
  width: 1300px;
  margin: 20px auto;
  .thr_1 {
    display: flex;
    justify-content: center;
    margin: 0 0 20px 0;
    .title {
      background-image: url(/images/sg-title.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      font-size: $global-font-size-36;
      width: 500px;
      line-height: 46px;
      height: 46px;
    }
  }
  .thr_2 {
    display: flex;
    .left {
      width: 598px;
      padding: 10px;
      transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影的出现更平滑 */
      .image {
        width: 558px;
        height: 342px;
        border-radius: 4px;
        overflow: hidden;
      }
      .name {
        margin: 16px 0;
        max-height: 52px;
        font-size: $global-font-size-20;
      }
      .brief {
        min-height: 115px;
        margin-bottom: 20px !important;
        font-size: $global-font-size-16;
        color: #717794;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .other {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          display: flex;
          align-items: center;
          color: #858585;
          .image {
            width: 18px;
            height: 18px;
            margin: 0 5px 0 0;
          }
        }
        .button {
          color: $global-color-107;
          padding: 5px 15px;
          cursor: default;
        }
        .button:hover {
          color: $global-color-fff;
          background-color: $global-color-107;
          border-radius: 20px;
          cursor: default;
        }
      }
    }

    .left:hover {
      box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
    }
    .right {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: flex-start;
      .list {
        width: 50%;
        padding: 10px;
        transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影的出现更平滑 */
        .image {
          border-radius: 4px;
          overflow: hidden;
        }
        .name {
          min-height: 40px;
          margin: 5px 0;
          font-size: $global-font-size-18;
        }
        .other {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .time {
            display: flex;
            align-items: center;
            color: #858585;
            .image {
              width: 18px;
              height: 18px;
              margin: 0 5px 0 0;
            }
          }
          .button {
            color: $global-color-107;
            padding: 5px 15px;
            cursor: default;
          }
          .button:hover {
            color: $global-color-fff;
            background-color: $global-color-107;
            border-radius: 20px;
            cursor: default;
          }
        }
      }

      .list:hover {
        box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
      }
    }
  }
}
.four {
  width: 1300px;
  margin: 20px auto;
  .four_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px 0;
    .title {
      background-image: url(/images/sg-title.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      font-size: $global-font-size-36;
      width: 500px;
      line-height: 46px;
      height: 46px;
    }
  }
  .four_2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .list {
      margin: 10px;
      .image {
        width: 245px;
        height: 140px;
      }
    }
  }
}
.five {
  width: 1300px;
  margin: 20px auto;
  .five_1 {
    display: flex;
    justify-content: center;
    margin: 0 0 20px 0;
    .title {
      background-image: url(/images/sg-title.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      font-size: $global-font-size-36;
      width: 500px;
      line-height: 46px;
      height: 46px;
    }
  }
  .five_2 {
    display: flex;
    .list {
      .list_1 {
        background-image: url(/images/rczy-title.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        font-size: $global-font-size-36;
        line-height: 33px;
        height: 33px;
        margin: 20px 0;
        .title {
          font-size: $global-font-size-20;
          font-weight: 600;
          text-align: center;
          color: #252f49;
        }
      }

      .list_2 {
        font-size: $global-font-size-18;
        margin: 8px;
        padding: 5px;
        text-align: center;
        border: 1px #ebe2e2 solid;
        border-radius: 4px;
      }
      .list_2:hover {
        background: #2280ff;
        color: #ffffff;
        cursor: default;
      }
    }
  }
}
</style>