修改产研行研

src/layout/site.js

@@ -53,5 +53,12 @@ export const menuList = [
     href: 'twelve',
     English: 'Achievement Display',
     type: '1'
+  },
+  {
+    _id: '13',
+    title: '行研产研',
+    href: 'thirteen',
+    English: 'Research Development',
+    type: '1'
   }
 ]

src/router/index.js

@@ -92,6 +92,12 @@ const router = createRouter({
           meta: { title: '产学研用协同创新平台-产业孵化大脑' },
           component: () => import('@/views/main/twelve.vue')
         },
+        {
+          path: '/thirteen',
+          name: 'thirteen',
+          meta: { title: '产学研用协同创新平台-行研产研' },
+          component: () => import('@/views/main/thirteen.vue')
+        },
         {
           path: '/home',
           name: 'home',
@@ -152,6 +158,21 @@ const router = createRouter({
           meta: { title: '产学研用协同创新平台-项目' },
           component: () => import('@/views/project/index.vue')
         },
+        {
+          path: '/industry/detail',
+          meta: { title: '产学研用协同创新平台-详情' },
+          component: () => import('@/views/industry/detail.vue')
+        },
+        {
+          path: '/journal',
+          meta: { title: '产学研用协同创新平台-列表' },
+          component: () => import('@/views/journal/index.vue')
+        },
+        {
+          path: '/journal/detail',
+          meta: { title: '产学研用协同创新平台-详情' },
+          component: () => import('@/views/journal/detail.vue')
+        },
         {
           path: '/achievement/detail',
           meta: { title: '产学研用协同创新平台-详情' },

src/views/industry/parts/four.vue

@@ -0,0 +1,201 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col :span="24" class="one">
+          <el-col
+            :span="24"
+            class="list"
+            v-for="(item, index) in list"
+            :key="index"
+            @click="toView(item)"
+          >
+            <el-col :span="5" 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="18" 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>
+      <el-col :span="24" class="two">
+        <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-row>
+  </div>
+</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 brain from '/images/home.jpg'
+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 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 })
+}
+</script>
+<style lang="scss" scoped>
+.main {
+  .one {
+    padding: 10px;
+    .list {
+      display: flex;
+      align-items: center;
+      margin-bottom: 30px;
+      background: rgb(248, 248, 248);
+
+      .left {
+        .image {
+          width: 216px;
+          height: 144px;
+        }
+      }
+      .right {
+        margin: 0 0 0 10px;
+        .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 {
+          margin-bottom: 20px;
+          height: 48px;
+          overflow: hidden;
+          font-size: 14px;
+          font-family:
+            PingFangSC-Regular,
+            PingFang SC;
+          font-weight: 400;
+          color: #999;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .right_3 {
+          font-size: 12px;
+          font-family:
+            PingFangSC-Regular,
+            PingFang SC;
+          font-weight: 400;
+          color: #999;
+          line-height: 12px;
+          cursor: pointer;
+        }
+        .right_1:hover {
+          color: #2374ff;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .two {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px;
+  }
+}
+</style>

src/views/industry/parts/one.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="one">
+        <el-col :span="24" class="one_1">{{ info.name }} </el-col>
+        <el-col :span="24" class="one_2"> {{ info.brief }}</el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const info = inject('info')
+</script>
+<style scoped lang="scss">
+.one {
+  .one_1 {
+    margin: 10px 0;
+    font-size: 24px;
+    font-weight: 700;
+    text-align: center;
+  }
+}
+</style>

src/views/industry/parts/thr.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="thr">
+        <a-carousel autoplay class="carousel">
+          <el-image
+            v-for="(item, index) in carouselList"
+            :key="index"
+            class="image"
+            :src="item.url"
+            fit="fill"
+          />
+        </a-carousel>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import match1 from '/images/new_1.png'
+import match2 from '/images/new_2.png'
+import match3 from '/images/new_3.png'
+import match4 from '/images/new_4.png'
+const carouselList = ref([{ url: match1 }, { url: match2 }, { url: match3 }, { url: match4 }])
+</script>
+<style scoped lang="scss">
+.thr {
+  .carousel {
+    margin: 0 0 10px 0;
+    border-radius: 4px;
+    :deep(.slick-slide) {
+      text-align: center;
+      height: 600px;
+      background: #364d79;
+      overflow: hidden;
+      border-radius: 4px;
+    }
+    .image {
+      width: 100%;
+      height: 600px;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

src/views/industry/parts/two.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="two">
+        <el-col :span="24" class="two_1">合作伙伴 </el-col>
+        <el-col :span="24" class="two_2">
+          <el-row class="two_2_1" :gutter="20">
+            <el-col :span="8" v-for="(item, index) in info.partner" :key="index">
+              <el-row style="justify-content: center">
+                <div class="list">
+                  <el-image class="image" :src="item.url" fit="fill" />
+                  <div class="name">{{ item.name }}</div>
+                </div>
+              </el-row>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24" class="two_1">合作情况 </el-col>
+        <el-col :span="24" class="two_3">{{ info.situation }} </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const info = inject('info')
+</script>
+<style scoped lang="scss">
+.two {
+  .two_1 {
+    margin: 10px 0;
+    font-size: 24px;
+    font-weight: 700;
+    text-align: center;
+  }
+  .two_2 {
+    .two_2_1 {
+      justify-content: center;
+      .list {
+        background: #fafafb;
+        border-radius: 10px 10px 0 0;
+        .image {
+          width: 150px;
+          height: 100px;
+          border-radius: 10px 10px 0 0;
+        }
+        .name {
+          text-align: center;
+          background: #e8e8e8;
+          font-size: 14px;
+          line-height: 1.5em;
+          padding: 1em 0.5em;
+          border-radius: 0 0 10px 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/journal/detail.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <div class="span">{{ info.name || '暂无标题' }}</div>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col :span="8" class="two_1"
+              ><span>委托方：</span>{{ info.client || '暂无' }}</el-col
+            >
+            <el-col :span="8" class="two_1">
+              <span>合作方：</span>
+              {{ info.partner || '暂无' }}
+            </el-col>
+            <el-col :span="8" class="two_1">
+              <span>发布时间：</span>
+              {{ moment(info.time).format('YYYY-MM-DD') }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="thr">
+            <div v-html="info.brief"></div>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import moment from 'moment'
+// 图片引入
+import journal1 from '/images/journal_1.jpeg'
+// 接口
+// import { NewsStore } from '@/store/api/platform/news'
+// const store = NewsStore()
+// 路由
+const route = useRoute()
+// 加载中
+const loading = ref(false)
+const info = ref({
+  id: '1',
+  url: journal1,
+  name: '吉林省智能传感器产业链创新发展研究',
+  client: '省工信厅',
+  partner: '吉林大学',
+  time: '2024-06-05',
+  brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+})
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+  await search()
+  loading.value = false
+})
+const search = async () => {
+  let id = route.query.id
+  if (id) {
+    // let res = await store.fetch(id)
+    // if (res.errcode == '0') {
+    //   info.value = res.data
+    // }
+  }
+}
+// 查询其他信息
+const searchOther = async () => {
+  //   let res: IQueryResult;
+  //   // 性别
+  //   res = await dictAxios.query({ type: 'common_gender' });
+  //   if (res.errcode == '0') genderList.value = res.data;
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    font-size: 24px;
+    font-weight: 700;
+    border-bottom: 2px solid #2374ff;
+    text-align: center;
+    color: #2374ff;
+
+    .span {
+      padding: 10px 0;
+    }
+  }
+
+  .two {
+    display: flex;
+    font-size: 14px;
+    color: #7e8288;
+    margin: 20px 0;
+  }
+
+  .thr {
+    font-family: PingFangSC-Regular;
+    font-size: 20px;
+    color: #383b40;
+    line-height: 24px;
+  }
+}
+</style>

src/views/journal/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">
+          <el-image class="image" :src="news" fit="fill" />
+        </el-col>
+        <el-col :span="24" class="two">
+          <div class="w_1200">
+            <a-table :columns="columns" :data-source="list" bordered>
+              <template #bodyCell="{ column, text, record }">
+                <template v-if="column.dataIndex === 'operation'">
+                  <a @click="toView(record.id)">查看</a>
+                </template>
+              </template>
+            </a-table>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 图片引入
+import news from '/images/news.png'
+import journal1 from '/images/journal_1.jpeg'
+import journal2 from '/images/journal_2.jpeg'
+import journal3 from '/images/journal_3.jpeg'
+import journal4 from '/images/journal_4.jpeg'
+// 路由
+const router = useRouter()
+// 加载中
+const loading = ref(false)
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'id',
+    width: 80
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 300
+  },
+  {
+    title: '委托方',
+    dataIndex: 'client',
+    width: 90
+  },
+  {
+    title: '合作方',
+    dataIndex: 'partner',
+    width: 90
+  },
+  {
+    title: '研究主旨',
+    dataIndex: 'brief',
+    ellipsis: true
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 80
+  }
+]
+const list = ref([
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '2',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '3',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '4',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '5',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '6',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '7',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '8',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await search()
+  loading.value = false
+})
+const search = async () => {}
+// 查看详情
+const toView = async (item) => {
+  router.push({ path: '/journal/detail', query: { id: item.id || item._id } })
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    .image {
+      width: 100%;
+      height: 200px;
+    }
+  }
+
+  .two {
+    margin: 10px 0;
+  }
+}
+</style>

src/views/main/eight.vue

@@ -7,11 +7,31 @@
         </el-col>
         <el-col :span="24" class="two">
           <div class="w_1200">
-            <a-row :gutter="[16, 30]">
-              <a-col :span="6" v-for="(item, index) in list" :key="index" @click="onSearch">
-                <div class="list">{{ item.label }}</div>
-              </a-col>
-            </a-row>
+            <el-row class="two_1" :gutter="20">
+              <el-col :span="6" v-for="(item, index) in list" :key="index" @click="toView(item)">
+                <el-row class="list">
+                  <el-image class="image" :src="item.url" fit="fill" />
+                  <el-col :span="24" class="other">
+                    <el-col :span="24" class="title textOver">{{ item.label }}</el-col>
+                    <el-col :span="24" class="other_1" v-if="item.partner1">{{
+                      item.partner1
+                    }}</el-col>
+                    <el-col :span="24" class="other_1" v-if="item.partner2">{{
+                      item.partner2
+                    }}</el-col>
+                    <el-col :span="24" class="other_1" v-if="item.partner3">{{
+                      item.partner3
+                    }}</el-col>
+                    <el-col :span="24" class="other_1" v-if="item.partner4">{{
+                      item.partner4
+                    }}</el-col>
+                  </el-col>
+                  <el-col :span="24" class="bottom">
+                    <el-button type="primary" plain>了解详情</el-button>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
           </div>
         </el-col>
       </el-col>
@@ -24,21 +44,126 @@
 const router = useRouter()
 // 图片引入
 import news from '/images/news.png'
+import eight1 from '/images/eight_1.jpg'
+import eight2 from '/images/eight_2.png'
+import eight3 from '/images/eight_3.png'
+import eight4 from '/images/eight_4.jpeg'
 // 加载中
 const loading = ref(false)
 const list = ref([
-  { label: '汽车电子及新型汽车零部件', value: '0' },
-  { label: '精细化工及天然气化工', value: '1' },
-  { label: '农产品加工及绿色食品', value: '2' },
-  { label: '光电子及智能传感器', value: '3' },
-  { label: '车规级芯片及功率半导体器件', value: '4' },
-  { label: '新能源及动力电池', value: '5' },
-  { label: '生物基新材料', value: '6' },
-  { label: '人工智能及智能机器人', value: '7' },
-  { label: '碳纤维及复合材料', value: '8' },
-  { label: '遥感卫星及航天航空技术', value: '9' },
-  { label: '精密仪器及先进装备', value: '10' },
-  { label: '生物医药及先进医疗器械', value: '11' }
+  {
+    id: '1',
+    label: '人工智能及智能机器人',
+    value: '0',
+    url: eight1,
+    brief: '简介',
+    partner1: '博立',
+    partner2: '吉大',
+    partner3: '科大讯飞'
+  },
+  {
+    id: '1',
+    label: '精细化工及天然气化工',
+    value: '1',
+    url: eight2,
+    brief: '简介',
+    partner1: '吉化星云'
+  },
+  {
+    id: '1',
+    label: '新能源及动力电池',
+    value: '2',
+    url: eight3,
+    brief: '简介',
+    partner1: '东北师范大学'
+  },
+  {
+    id: '1',
+    label: '精密仪器及先进设备',
+    value: '3',
+    url: eight4,
+    brief: '简介'
+  },
+  {
+    id: '1',
+    label: '生物基新材料',
+    value: '4',
+    url: eight4,
+    brief: '简介'
+  },
+  {
+    id: '1',
+    label: '生物医药及先进医疗器械',
+    value: '5',
+    url: eight3,
+    brief: '简介',
+    partner1: '净月区苏州医工所'
+  },
+  {
+    id: '1',
+    label: '农产品加工及绿色食品',
+    value: '6',
+    url: eight2,
+    brief: '简介',
+    partner1: '标色食品哥光院'
+  },
+  {
+    id: '1',
+    label: '碳纤维及复合材料',
+    value: '7',
+    url: eight1,
+    brief: '简介',
+    partner1: '吉林化纤',
+    partner2: '国兴碳纤'
+  },
+  {
+    id: '1',
+    label: '车规级芯片及功率半导体器件',
+    value: '8',
+    url: eight2,
+    brief: '简介',
+    partner1: '华为',
+    partner2: '一汽'
+  },
+  {
+    id: '1',
+    label: '光电子及智能传感器',
+    value: '9',
+    url: eight3,
+    brief: '简介',
+    partner1: '长春光机所',
+    partner2: '光电信息产业园'
+  },
+  {
+    id: '1',
+    label: '遥感卫星及航天航空',
+    value: '10',
+    url: eight4,
+    brief: '简介',
+    partner1: '卫星研究院',
+    partner2: '星网',
+    partner3: '长春理工',
+    partner4: '长光卫星'
+  },
+  {
+    id: '1',
+    label: '氢能及储能',
+    value: '12',
+    url: eight3,
+    brief: '简介',
+    partner1: '氢能产研院',
+    partner2: '长春应化所'
+  },
+  {
+    id: '1',
+    label: '汽车电子及新型汽车零部件',
+    value: '13',
+    url: eight2,
+    brief: '简介',
+    partner1: '富赛',
+    partner2: '旗智',
+    partner3: '富奥'
+  }
 ])
 // 请求
 onMounted(async () => {
@@ -47,10 +172,9 @@ onMounted(async () => {
   loading.value = false
 })
 const search = async () => {}
-// 搜索
-const onSearch = () => {
-  const query = { type: 'search' }
-  router.push({ path: '/search', query })
+// 查看详情
+const toView = async (item) => {
+  router.push({ path: '/industry/detail', query: { id: item.id || item._id } })
 }
 </script>
 <style scoped lang="scss">
@@ -65,13 +189,47 @@ const onSearch = () => {
   .two {
     margin: 20px 0 0 0;
     .list {
-      text-align: center;
-      padding: 20px;
-      background: #337ab7;
-      color: #ffff;
-      font-size: 16px;
-      font-weight: bold;
-      border-radius: 7px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      min-height: 350px;
+      margin: 0 0 20px 0;
+      border-right: 1px solid #eeeeee;
+      border-top: 0px solid #eeeeee;
+      border-bottom: 1px solid #eeeeee;
+      border-left: 1px solid #eeeeee;
+      border-radius: 5px;
+      background-position: 0 0;
+
+      .image {
+        width: 100%;
+        height: 153px;
+        border-radius: 5px 5px 0 0;
+      }
+      .other {
+        padding: 0 10px;
+        text-align: center;
+        .title {
+          margin: 10px 0;
+          font-family: Tahoma, Geneva, sans-serif;
+          font-size: 18px;
+          line-height: 1.75;
+        }
+        .title:hover {
+          color: #2374ff;
+          cursor: pointer;
+        }
+        .other_1 {
+          font-size: 14px;
+          margin: 5px 0;
+        }
+      }
+      .bottom {
+        position: absolute;
+        bottom: 0;
+        left: 95px;
+        padding: 0 0 10px 0;
+      }
     }
   }
 }

src/views/main/thirteen.vue

@@ -6,7 +6,125 @@
           <el-image class="image" :src="news" fit="fill" />
         </el-col>
         <el-col :span="24" class="two">
-          <div class="w_1200">创新中心</div>
+          <div class="w_1200">
+            <el-col :span="24" class="two_1">
+              <el-row class="two_1_1" :gutter="20">
+                <el-col :span="6">
+                  <el-row class="two_1_1_1">
+                    <el-col :span="24" class="top1">
+                      <el-carousel :interval="4000" type="card" height="200px" @change="toChange">
+                        <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+                          <el-image class="image" :src="item.url" fit="fill" />
+                        </el-carousel-item>
+                      </el-carousel>
+                    </el-col>
+                    <el-col :span="24" class="center1">
+                      <el-col :span="24" class="title">{{ info.name }}</el-col>
+                      <el-col :span="24" class="other_1" v-if="info.client">
+                        委托方： {{ info.client }}
+                      </el-col>
+                      <el-col :span="24" class="other_1" v-if="info.partner">
+                        合作方： {{ info.partner }}
+                      </el-col>
+                      <el-col :span="24" class="other_2">{{ info.brief }}</el-col>
+                    </el-col>
+                    <el-col :span="24" class="bottom1">
+                      <el-button @click="toView(info)" type="primary" size="small"
+                        >查看详情</el-button
+                      >
+                    </el-col>
+                  </el-row>
+                </el-col>
+                <el-col :span="18">
+                  <el-row class="two_1_1_2" :gutter="20">
+                    <el-col
+                      :span="6"
+                      class="list"
+                      v-for="(item, index) in list"
+                      :key="index"
+                      @click="toView(item)"
+                    >
+                      <el-row>
+                        <el-image class="image" :src="item.url" fit="fill" />
+                        <el-col :span="24" class="other">
+                          <el-col :span="24" class="title textOver">{{ item.name }}</el-col>
+                          <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
+                        </el-col>
+                      </el-row>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+              <el-row class="two_1_2">
+                <el-image class="image" :src="journal5" fit="fill" />
+              </el-row>
+            </el-col>
+            <el-col :span="24" class="two_2">
+              <el-row :gutter="20">
+                <el-col :span="18" class="left">
+                  <el-row class="left_1" :gutter="20">
+                    <el-col
+                      :span="6"
+                      class="list"
+                      v-for="(item, index) in list"
+                      :key="index"
+                      @click="toView(item)"
+                    >
+                      <el-row>
+                        <el-image class="image" :src="item.url" fit="fill" />
+                        <el-col :span="24" class="other">
+                          <el-col :span="24" class="title textOver">{{ item.name }}</el-col>
+                          <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
+                        </el-col>
+                      </el-row>
+                    </el-col>
+                  </el-row>
+                </el-col>
+                <el-col :span="6" class="right">
+                  <el-row class="right">
+                    <el-col :span="24" class="right_1">
+                      <el-image class="image" :src="journal6" fit="fill" />
+                      <div class="text" style="height: 34px">
+                        <h5 class="title" style="padding-top: 0px">“他山之石”</h5>
+                      </div>
+                    </el-col>
+                    <el-col :span="24" class="right_2">
+                      <el-col :span="24" class="right_2_1">
+                        <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">
+                        <a-timeline>
+                          <a-timeline-item
+                            v-for="(item, index) in list.slice(0, 6)"
+                            :key="index"
+                            @click="toView(item)"
+                          >
+                            <div class="name textOver">{{ item.name }}</div>
+                          </a-timeline-item>
+                        </a-timeline>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24" class="page">
+                  <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-row>
+            </el-col>
+          </div>
         </el-col>
       </el-col>
     </el-row>
@@ -16,8 +134,124 @@
 <script setup>
 // 图片引入
 import news from '/images/news.png'
+import journal1 from '/images/journal_1.jpeg'
+import journal2 from '/images/journal_2.jpeg'
+import journal3 from '/images/journal_3.jpeg'
+import journal4 from '/images/journal_4.jpeg'
+import journal5 from '/images/journal_5.jpg'
+import journal6 from '/images/journal_6.jpg'
+const carouselList = ref([
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  }
+])
+const list = ref([
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  }
+])
+let skip = 0
+let limit = inject('limit')
+const total = ref(0)
+// 路由
+const router = useRouter()
 // 加载中
 const loading = ref(false)
+const info = ref({
+  id: '1',
+  url: journal1,
+  name: '吉林省智能传感器产业链创新发展研究',
+  client: '省工信厅',
+  partner: '吉林大学',
+  brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+})
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -25,6 +259,14 @@ onMounted(async () => {
   loading.value = false
 })
 const search = async () => {}
+// 轮播图改变
+const toChange = async (e) => {
+  info.value = carouselList.value[e]
+}
+// 查看详情
+const toView = async (item) => {
+  router.push({ path: '/journal', query: { id: item.id || item._id } })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -37,6 +279,222 @@ const search = async () => {}
 
   .two {
     margin: 10px 0;
+    .two_1 {
+      .two_1_1 {
+        margin: 0 0 10px 0;
+        .two_1_1_1 {
+          border-radius: 5px;
+          padding: 0 20px;
+          height: 495px;
+          background: rgb(248, 248, 248);
+          .top1 {
+            margin: 30px 0 0 0;
+          }
+          .center1 {
+            .title {
+              font-size: 16px;
+              margin-bottom: 10px;
+              color: #383838;
+              font-weight: 600;
+              text-align: left;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            .other_1 {
+              font-size: 14px;
+              color: #9b9994;
+              text-align: left;
+              margin-bottom: 5px;
+            }
+            .other_2 {
+              line-height: 24px;
+              font-size: 14px;
+              height: 66px;
+              overflow: hidden;
+              color: #1d1e20;
+              text-align: justify;
+              margin-bottom: 14px;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              -webkit-box-orient: vertical;
+            }
+          }
+          .bottom1 {
+            text-align: center;
+          }
+        }
+        .two_1_1_2 {
+          display: flex;
+          .list {
+            .image {
+              width: 100%;
+              height: 185px;
+              padding: 0 20px;
+            }
+            .other {
+              .title {
+                font-size: 16px;
+                margin: 10px 0;
+                color: #383838;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .other_2 {
+                font-size: 14px;
+                overflow: hidden;
+                color: #1d1e20;
+                text-align: justify;
+                margin-bottom: 14px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+      .two_1_2 {
+        .image {
+          width: 100%;
+        }
+      }
+    }
+    .two_2 {
+      margin: 10px 0 0 0;
+      .left {
+        .left_1 {
+          display: flex;
+          .list {
+            margin: 0 0 12px 0;
+
+            .image {
+              width: 100%;
+              height: 185px;
+              padding: 0 20px;
+            }
+            .other {
+              .title {
+                font-size: 16px;
+                margin: 10px 0;
+                color: #383838;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .other_2 {
+                font-size: 14px;
+                overflow: hidden;
+                color: #1d1e20;
+                text-align: justify;
+                margin-bottom: 14px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+      .right {
+        .right_1 {
+          position: relative;
+          .image {
+            width: 100%;
+            height: 200px;
+          }
+          .text {
+            position: absolute;
+            left: 0;
+            bottom: 5px;
+            width: 100%;
+            height: 34px;
+            line-height: 34px;
+            padding: 0 8px;
+            background-color: rgba(0, 0, 0, 0.6);
+            background-image: none;
+            background-repeat: repeat;
+            background-position: 0 0;
+            background: -moz-linear-gradient(top, none, none);
+            background: -o-linear-gradient(top, none, none);
+            background: linear-gradient(top, none, none);
+            background: -webkit-gradient(linear, left top, left bottom, from(none), to(none));
+            box-sizing: border-box;
+            .title {
+              margin: 0;
+              padding: 0;
+              font-size: 14px;
+              color: #fff;
+              text-align: center;
+              font-weight: normal;
+              font-style: normal;
+              text-decoration: none;
+              font-family: Tahoma;
+              line-height: 34px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              -webkit-text-overflow: ellipsis;
+              -moz-text-overflow: ellipsis;
+              overflow: hidden;
+            }
+          }
+        }
+        .right_2 {
+          .right_2_1 {
+            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: 24px;
+              font-family:
+                PingFangSC-Medium,
+                PingFang SC;
+              font-weight: 500;
+              color: #111;
+              line-height: 24px;
+            }
+            .right {
+              text-align: right;
+              font-size: 14px;
+              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: 14px;
+              font-family:
+                PingFangSC-Medium,
+                PingFang SC;
+              font-weight: 500;
+              color: #111;
+              line-height: 24px;
+              display: block;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      .page {
+        display: flex;
+        flex-direction: row-reverse;
+        padding: 20px;
+      }
+    }
   }
 }
 </style>