|
|
@@ -7,36 +7,75 @@
|
|
|
</el-col>
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="two">
|
|
|
- <el-col :span="24" class="two_1">
|
|
|
- <el-col :span="20" class="title">标题</el-col>
|
|
|
- <el-col :span="4" class="title">时间</el-col>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="two_2">
|
|
|
- <vue3-seamless-scroll
|
|
|
- :list="list"
|
|
|
- :hover="true"
|
|
|
- :step="0.5"
|
|
|
- :wheel="true"
|
|
|
- :isWatch="true"
|
|
|
+ <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="24"
|
|
|
- class="list"
|
|
|
- v-for="(item, index) in list"
|
|
|
- :key="index"
|
|
|
- @click="toView(item)"
|
|
|
- >
|
|
|
- <el-col :span="20" class="content textOver">
|
|
|
- <el-tooltip effect="dark" :content="item.title" placement="top">
|
|
|
- {{ item.title || '暂无标题' }}
|
|
|
- </el-tooltip>
|
|
|
+ <el-col :span="6" class="left">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ v-if="item.logo && item.logo.length > 0"
|
|
|
+ :src="item.logo[0].url"
|
|
|
+ fit="fill"
|
|
|
+ />
|
|
|
+ <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="item.content"></div>
|
|
|
</el-col>
|
|
|
- <el-col :span="4" class="content textOver">
|
|
|
- {{ item.time || '暂无时间' }}
|
|
|
+ <el-col :span="24" class="right_3">
|
|
|
+ {{ item.time || '暂无' }}
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- </vue3-seamless-scroll>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
+ <el-col :span="5" class="right">
|
|
|
+ <el-col :span="24" class="title">
|
|
|
+ <el-col :span="24" class="left">成果展示 </el-col>
|
|
|
+ <el-col :span="24" 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">
|
|
|
+ <div class="name">{{ 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="24" class="left">项目精选 </el-col>
|
|
|
+ <el-col :span="24" 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">
|
|
|
+ <div class="name">{{ 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>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -47,30 +86,77 @@
|
|
|
<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 brain from '@/assets/home.jpg'
|
|
|
+import new_4 from '@/assets/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
|
|
|
- search()
|
|
|
+ await searchOther()
|
|
|
+ await search({ skip, limit })
|
|
|
loading.value = false
|
|
|
})
|
|
|
-const search = async () => {
|
|
|
- const info = { type: '1', status: '1', is_use: '0' }
|
|
|
+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
|
|
|
+ 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 = () => {
|
|
|
+ router.push({ path: `/achievement` })
|
|
|
+}
|
|
|
+
|
|
|
+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 })
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.main {
|
|
|
@@ -116,50 +202,113 @@ const toView = (item) => {
|
|
|
}
|
|
|
|
|
|
.two {
|
|
|
+ display: flex;
|
|
|
width: 100%;
|
|
|
margin: 10px;
|
|
|
-
|
|
|
- .two_1 {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- height: 50px;
|
|
|
- background: #2374ff;
|
|
|
- line-height: 50px;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 16px;
|
|
|
-
|
|
|
- .title {
|
|
|
- text-align: center;
|
|
|
+ .left {
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .left {
|
|
|
+ .image {
|
|
|
+ width: 216px;
|
|
|
+ height: 144px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .right_1 {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111;
|
|
|
+ display: block;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .right_2 {
|
|
|
+ height: 48px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .right_3 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999;
|
|
|
+ line-height: 12px;
|
|
|
+ }
|
|
|
+ .right_1:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .two_2 {
|
|
|
- max-height: 400px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .list {
|
|
|
+ .right {
|
|
|
+ .title {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- background: #fff;
|
|
|
-
|
|
|
- .content {
|
|
|
- text-align: center;
|
|
|
- padding: 0 10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: linear-gradient(90deg, #d7e8ff, #fff);
|
|
|
+ width: 300px;
|
|
|
+ height: 64px;
|
|
|
+ padding-left: 21px;
|
|
|
+ padding-right: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ .left {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
-
|
|
|
- .content:hover {
|
|
|
- color: #2374ff;
|
|
|
+ .right {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .list:nth-child(2n) {
|
|
|
- background: #f4f4f4;
|
|
|
+ .content {
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ .name {
|
|
|
+ max-height: 48px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111;
|
|
|
+ line-height: 24px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .thr {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
