cxyy-web/src/views/detail/news.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <div class="w_1300">
        <el-col :span="24" class="one_1">
          <h2 class="name">双高新闻资讯</h2>
          <h5 class="remark">跟紧政策指引方向 &nbsp;&nbsp;&nbsp; 抓牢各地双高机遇</h5>
          <div class="search">
            <el-input v-model="input1" size="large" placeholder="请输入关键字" :suffix-icon="Search">
              <template #append>
                <el-button type="primary" size="large">搜索</el-button>
              </template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="24" class="one_2">
          <el-col :span="24" class="two">
            <el-col :span="18" class="left">
              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
                <el-col :span="6" class="left">
                  <el-image class="image" v-if="item.logo && item.logo.length > 0" :src="getUrl(item.logo)" fit="fill">
                    <template v-slot:error>
                      <el-image class="image" :src="new_4" fit="fill" />
                    </template>
                  </el-image>
                  <el-image class="image" v-else :src="new_4" fit="fill" />
                </el-col>
                <el-col :span="17" class="right">
                  <el-col :span="24" class="right_1 textOne">
                    {{ item.title || '暂无标题' }}
                  </el-col>
                  <el-col :span="24" class="right_2 textMore">
                    <div v-html="removeHtmlStyle(item.content)"></div>
                  </el-col>
                  <el-col :span="24" class="right_3">
                    {{ item.time || '暂无' }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="6" class="right">
              <el-col :span="24" class="title">
                <el-col :span="18" class="left">成果展示 </el-col>
                <el-col :span="6" class="right" @click="toMore(0)"> 查看更多</el-col>
              </el-col>
              <el-col :span="24" class="content">
                <a-timeline>
                  <a-timeline-item v-for="(item, index) in achievementList" :key="index" @click="toCommon(item, '/achievement/detail')">
                    <div class="name textOne">{{ item.name }}</div>
                    <div class="time">{{ item.time }}</div>
                  </a-timeline-item>
                </a-timeline>
              </el-col>
              <el-col :span="24" class="title">
                <el-col :span="18" class="left">项目精选 </el-col>
                <el-col :span="6" class="right" @click="toMore(1)"> 查看更多</el-col>
              </el-col>
              <el-col :span="24" class="content">
                <a-timeline>
                  <a-timeline-item v-for="(item, index) in projectList" :key="index" @click="toCommon(item, '/project/detail')">
                    <div class="name textOne">{{ item.name }}</div>
                    <div class="time">{{ item.time }}</div>
                  </a-timeline-item>
                </a-timeline>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="thr">
            <el-pagination background layout="total, prev, pager, next" :page-sizes="[10, 20, 50, 100, 200]" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange"> </el-pagination>
          </el-col>
        </el-col>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
// 接口
import { NewsStore } from '@/store/api/platform/news'
import { AchievementStore } from '@/store/api/platform/achievement'
import { ProjectStore } from '@/store/api/platform/project'
const store = NewsStore()
const projectStore = ProjectStore()
const achievementStore = AchievementStore()
// 路由
const router = useRouter()
// 图片引入
import new_4 from '/images/new_4.png'
// 加载中
const loading = ref(false)
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const achievementList = ref([])
const projectList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  const info = {
    skip: 0,
    limit: 6
  }
  let res
  res = await achievementStore.query(info)
  if (res.errcode == '0') achievementList.value = res.data
  res = await projectStore.query(info)
  if (res.errcode == '0') projectList.value = res.data
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    status: '1',
    is_use: '0'
  }
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 查看
const toView = (item) => {
  router.push({ path: `/news/detail`, query: { id: item.id || item._id } })
}
// 查看更多
const toMore = (type) => {
  if (type == '0') router.push({ path: `/nine` })
  else router.push({ path: `/project` })
}
// 详情
const toCommon = (item, route) => {
  router.push({ path: route, 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 currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
const getUrl = (item) => {
  if (item) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
}
</script>
<style scoped lang="scss">
.main {
  .one {
    background: url(/images/bg-list_detail.jpg) no-repeat;
    .one_1 {
      padding: 85px 0 0;
      .name {
        font-size: 33px !important;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
      }
      .remark {
        margin: 27px 0 80px;
        font-size: $global-font-size-14;
        color: #ffffff;
        text-align: center;
      }
      .search {
        margin: 0 auto;
        width: 810px;
        :deep(.el-input--large .el-input__inner) {
          height: 60px !important;
        }
      }
    }
    .one_2 {
      margin-top: 100px !important;
      padding: 30px !important;
      background-color: $global-color-fff;
      .two {
        display: flex;
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        .left {
          .list {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            .left {
              .image {
                width: 216px;
                height: 144px;
              }
            }
            .right {
              margin: 0 0 0 10px;
              .right_1 {
                height: 24px;
                font-size: $global-font-size-20;
                font-family:
                  PingFangSC-Medium,
                  PingFang SC;
                font-weight: 500;
                color: #111;
                display: block;
                line-height: 24px;
                margin-bottom: 20px;
              }
              .right_2 {
                margin-bottom: 20px;
                height: 48px;
                overflow: hidden;
                font-size: $global-font-size-18;
                font-family:
                  PingFangSC-Regular,
                  PingFang SC;
                font-weight: 400;
                color: #999;
                line-height: 24px;
                cursor: pointer;
              }
              .right_3 {
                font-size: $global-font-size-14;
                font-family:
                  PingFangSC-Regular,
                  PingFang SC;
                font-weight: 400;
                color: #999;
                line-height: $global-font-size-14;
                cursor: pointer;
              }
              .right_1:hover {
                color: #2374ff;
                cursor: pointer;
              }
            }
          }
        }
        .right {
          .title {
            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-26;
              font-family:
                PingFangSC-Medium,
                PingFang SC;
              font-weight: 500;
              color: #111;
              line-height: 24px;
            }
            .right {
              text-align: right;
              font-size: $global-font-size-16;
              font-family:
                PingFangSC-Regular,
                PingFang SC;
              font-weight: 400;
              color: #666;
              cursor: pointer;
            }
          }
          .content {
            margin: 10px 0 0 0;
            .name {
              max-height: 48px;
              font-size: $global-font-size-18;
              font-family:
                PingFangSC-Medium,
                PingFang SC;
              font-weight: 500;
              color: #111;
              line-height: 24px;
              display: block;
              cursor: pointer;
            }
            .time {
              margin-top: 8px;
              font-size: $global-font-size-14;
              font-family:
                PingFangSC-Medium,
                PingFang SC;
              font-weight: 500;
              color: #999;
              line-height: 17px;
              cursor: pointer;
            }
          }
        }
      }
      .thr {
        display: flex;
        flex-direction: row-reverse;
        padding: 20px;
      }
    }
  }
}
</style>