|
@@ -0,0 +1,361 @@
|
|
|
+<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">跟紧政策指引方向 抓牢各地双高机遇</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 textOver">
|
|
|
+ {{ 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 textOver">{{ 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 textOver">{{ 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,
|
|
|
+ status: '1',
|
|
|
+ is_use: '0'
|
|
|
+ }
|
|
|
+ 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: 0, 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: 14px;
|
|
|
+ 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>
|