technique_web3/src/views/main/one.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="home">
          <el-image class="image" :src="home" fit="fill" />
        </el-col>
        <div class="w_1200" v-loading="loading">
          <el-row :gutter="20">
            <el-col :span="18" class="oneLeft">
              <el-col :span="24" class="one">
                <el-col :span="24" class="one_1">
                  <el-col :span="12" class="left">政策信息</el-col>
                  <el-col :span="12" class="right" @click="selectMenu('brain')"
                    >查看政策信息</el-col
                  >
                </el-col>
                <el-col :span="24" class="one_2">
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in newsList"
                    :key="index"
                    @click="toView(item, '0')"
                  >
                    <el-col :span="2" 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="22" 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 :span="24" class="one">
                <el-col :span="24" class="one_1">
                  <el-col :span="12" class="left">新闻通知</el-col>
                  <el-col :span="12" class="right" @click="selectMenu('brain')"
                    >查看新闻通知</el-col
                  >
                </el-col>
                <el-col :span="24" class="one_2">
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in newsList"
                    :key="index"
                    @click="toView(item, '0')"
                  >
                    <el-col :span="2" 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="22" 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 :span="24" class="one">
                <el-col :span="24" class="one_1">
                  <el-col :span="12" class="left">工作动态</el-col>
                  <el-col :span="12" class="right" @click="selectMenu('brain')"
                    >查看工作动态</el-col
                  >
                </el-col>
                <el-col :span="24" class="one_2">
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in newsList"
                    :key="index"
                    @click="toView(item, '0')"
                  >
                    <el-col :span="2" 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="22" 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="6" class="oneRight">
              <el-col :span="24" class="carousel">
                <a-carousel autoplay>
                  <el-image
                    v-for="(item, index) in carouselList"
                    :key="index"
                    class="image"
                    :src="item.url"
                    fit="fill"
                  />
                </a-carousel>
              </el-col>
              <el-col :span="24" class="title">
                <el-col :span="16" class="left">赛事推广 </el-col>
                <el-col :span="8" class="right" @click="toMore"> 查看更多</el-col>
              </el-col>
              <el-col :span="24" class="content">
                <el-col
                  :span="24"
                  v-for="(item, index) in matchList"
                  :key="index"
                  @click="toView(item, '1')"
                  class="list"
                >
                  <el-image
                    v-if="item.file && item.file.length > 0"
                    class="image"
                    :src="item.file[0].url"
                    fit="cover"
                  />
                  <el-image v-else class="image" :src="match" fit="fill" />
                  <div class="name">
                    {{ item.name }}
                  </div>
                </el-col>
              </el-col>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="type">
            <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>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
const selectMenu = inject('selectMenu')
// 图片引入
import home from '/images/home.jpg'
import match from '/images/match.jpg'
import match1 from '/images/match_1.jpg'
import match2 from '/images/match_2.jpg'
import match3 from '/images/match_3.jpg'
import match4 from '/images/match_4.jpg'
// 接口
import { NewsStore } from '@/store/api/platform/news'
import { MatchStore } from '@/store/api/platform/match'
const newsStore = NewsStore()
const matchStore = MatchStore()
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
// 新闻
const newsList = ref([])
// 比赛
const matchList = ref([])
// 分类
const typeList = ref([
  {
    title: '热门高校',
    list: [
      { name: '吉林省人民政府', href: 'https://www.jl.gov.cn/' },
      { name: '长春市人民政府', href: 'http://www.changchun.gov.cn/' },
      { name: '吉林省工信厅', href: 'http://gxt.jl.gov.cn/' },
      { name: '吉林省国资委', href: 'http://gzw.jl.gov.cn/' },
      { name: '吉林省财政厅', href: 'http://czt.jl.gov.cn/' },
      { name: '吉林省金融监管局', href: 'http://jr.jl.gov.cn/' }
    ]
  },
  {
    title: '政府部门',
    list: [
      { name: '吉林省人民政府', href: 'https://www.jl.gov.cn/' },
      { name: '长春市人民政府', href: 'http://www.changchun.gov.cn/' },
      { name: '吉林省工信厅', href: 'http://gxt.jl.gov.cn/' },
      { name: '吉林省国资委', href: 'http://gzw.jl.gov.cn/' },
      { name: '吉林省财政厅', href: 'http://czt.jl.gov.cn/' },
      { name: '吉林省金融监管局', href: 'http://jr.jl.gov.cn/' }
    ]
  },
  {
    title: '科研机构',
    list: [
      { name: '吉林省人民政府', href: 'https://www.jl.gov.cn/' },
      { name: '长春市人民政府', href: 'http://www.changchun.gov.cn/' },
      { name: '吉林省工信厅', href: 'http://gxt.jl.gov.cn/' },
      { name: '吉林省国资委', href: 'http://gzw.jl.gov.cn/' },
      { name: '吉林省财政厅', href: 'http://czt.jl.gov.cn/' },
      { name: '吉林省金融监管局', href: 'http://jr.jl.gov.cn/' }
    ]
  }
])

const carouselList = ref([{ url: match1 }, { url: match2 }, { url: match3 }, { url: match4 }])
// 请求
onMounted(async () => {
  loading.value = true
  await searchNews()
  await searchMatch()
  loading.value = false
})
const searchNews = async () => {
  const info = {
    skip: 0,
    limit: 4,
    is_use: '0',
    status: '1'
  }
  const res = await newsStore.query(info)
  if (res.errcode == '0') newsList.value = res.data
}
const searchMatch = async () => {
  const info = {
    skip: 0,
    limit: 6,
    is_use: '0',
    status: '1'
  }
  const res = await matchStore.query(info)
  if (res.errcode == '0') matchList.value = res.data
}

// 查看详情
const toView = (item, type) => {
  if (type == '0') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
  else router.push({ path: '/innovation/detail', query: { id: item.id || item._id } })
}
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 toMore = () => {
  router.push({ path: `/five` })
}
</script>
<style scoped lang="scss">
.main {
  .home {
    position: relative;

    .image {
      width: 100%;
      height: 200px;
    }
  }
  .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;
      justify-content: space-between;
      flex-wrap: wrap;

      .list {
        display: flex;
        align-items: center;
        padding: 15px;
        transition: all 0.3s;
        border-bottom: #9d9898 1px dashed;

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

          .year {
            margin-bottom: 2px;
          }

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

        .right {
          padding: 0 !important;
          .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;
      }
    }
  }
  .oneRight {
    padding: 25px 0 0 0 !important;
    .carousel {
      padding: 0 !important;
      margin: 0 0 10px 0;
      border-radius: 4px;
      :deep(.slick-slide) {
        text-align: center;
        height: 220px;
        background: #364d79;
        overflow: hidden;
        border-radius: 4px;
      }
      .image {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }

    .title {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(90deg, #d7e8ff, #fff);
      width: 300px;
      height: 64px;
      padding-left: 21px;
      box-sizing: border-box;
      margin-bottom: 7px;
      .left {
        font-size: $global-font-size-22;
        font-family:
          PingFangSC-Medium,
          PingFang SC;
        font-weight: 500;
        color: #111;
        line-height: $global-font-size-20;
      }
      .right {
        text-align: right;
        font-size: $global-font-size-16;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #666;
        cursor: pointer;
      }
    }
    .content {
      padding: 0 !important;
      margin: 10px 0 0 0;
      .list {
        padding: 0 !important;
        background: #eff4f9;
        width: 100%;
        margin: 0 0 10px 0;
        border-radius: 4px;
        .image {
          width: 100%;
          height: 150px;
          border-radius: 4px 4px 0 0;
        }
        .name {
          padding: 10px;
          font-size: $global-font-size-18;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #111;
        }
      }
    }
  }
  .type {
    margin: 10px 0;
    .list {
      .list_1 {
        margin: 0 0 20px 0;
        .title {
          font-size: $global-font-size-20;
          font-weight: 600;
          text-align: center;
          color: #252f49;
        }
        .title::before {
          content: '';
          position: absolute;
          transform: translateY(-50%);
          top: 12px;
          margin-left: -100px;
          width: 80px;
          height: 1px;
          border-bottom: 1px #252f49 solid;
        }
        .title::after {
          content: '';
          position: absolute;
          transform: translateY(-50%);
          top: 12px;
          margin-left: 30px;
          width: 80px;
          height: 1px;
          border-bottom: 1px #252f49 solid;
        }
      }

      .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;
      }
    }
  }
}
</style>