修改首页导航修改

src/components/custom/custom-layout.vue

@@ -37,33 +37,21 @@
           </div>
         </div>
       </el-col>
+      <div class="header_3" v-if="is_carousel">
+        <el-carousel height="300px">
+          <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+            <el-image class="image" :src="getUrlFile(item)" fit="fill" />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
       <el-col :span="24" class="header_2">
-        <el-col :span="24" class="list">
-          <div
-            class="text"
-            v-for="(item, index) in data"
-            @click="selectMenu(item.route)"
-            :style="{
-              backgroundColor: item.hover ? '#1073ff' : 'transparent',
-              color: item.hover ? '#ffffff' : ''
-            }"
-            :key="index"
-            @mouseover="handleMouseOver(index)"
-            @mouseout="handleMousOut(index)"
-          >
-            <span>{{ item.title }}</span>
-          </div>
-        </el-col>
-        <el-col :span="24" class="info">
-          <div class="info_4" v-if="info.key == '10'">
-            <div class="w_1300 list4">
-              <div v-for="(tag, indexs) in info.children" :key="indexs" class="list_1" @click="selectMenu(tag.route)">
-                <el-image class="image" :src="tag.url" fit="fill" />
-                <span class="title"> {{ tag.title }}</span>
-              </div>
+        <div class="list_1300">
+          <el-col :span="24" class="list">
+            <div class="text" v-for="(item, index) in data" @click="selectMenu(item.route)" :class="[item.hover == '1' ? 'menuTrue' : '']" :style="{ padding: isIncubator ? '0 29px' : '0 37px' }" :key="index" @mouseover="handleMouseOver(index)" @mouseout="handleMousOut(index)">
+              {{ item.title }}
             </div>
-          </div>
-        </el-col>
+          </el-col>
+        </div>
       </el-col>
     </div>
     <div class="main">
@@ -94,7 +82,7 @@
 <script setup>
 import { ArrowDown } from '@element-plus/icons-vue'
 import { cloneDeep, get } from 'lodash-es'
-import { siteInfo, footInfo, menuList } from '@/layout/site'
+import { siteInfo, footInfo, menuList2 } from '@/layout/site'
 // 接口
 import { DesignStore } from '@/store/api/platform/design'
 const designStore = DesignStore()
@@ -106,7 +94,9 @@ const router = useRouter()
 const route = useRoute()
 const $checkRes = inject('$checkRes')
 const props = defineProps({
-  is_foot: { type: Boolean, default: () => true }
+  is_foot: { type: Boolean, default: () => true },
+  is_carousel: { type: Boolean, default: () => false },
+  carouselList: { type: Array, default: () => [] }
 })
 const configInfo = ref({})
 const footInfos = ref({})
@@ -118,11 +108,11 @@ onMounted(async () => {
   search()
 })
 const search = async () => {
-  for (const val of menuList) {
+  for (const val of menuList2) {
     if (route.name === val.route) val.hover = true
     else val.hover = false
   }
-  let menus = cloneDeep(menuList)
+  let menus = cloneDeep(menuList2)
   // 判断, 如果没有孵化器角色, 则不显示孵化器菜单
   if (user.value) {
     const hasIncubator = get(user.value, 'role', []).find((f) => f === 'Incubator')
@@ -183,6 +173,9 @@ const handleMousOut = (index) => {
 const getUrl = (item) => {
   if (item && item.length > 0) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
 }
+const getUrlFile = (item) => {
+  if (item) return `${import.meta.env.VITE_APP_HOST}${item.uri}`
+}
 // 退出登录
 const toOut = () => {
   userStore.logOut()
@@ -193,15 +186,13 @@ const toOut = () => {
 <style lang="scss" scoped>
 #c-layout {
   .header {
-    padding: 0;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    padding: 5px 0;
+    padding: 5px 0 0 0;
     background: $global-color-fff;
     .header_1 {
       display: flex;
       justify-content: space-between;
+      align-items: center;
+      height: 94px;
       .left {
         display: flex;
         .image {
@@ -246,114 +237,44 @@ const toOut = () => {
       }
     }
     .header_2 {
-      .list {
-        display: flex;
-        justify-content: space-around;
-        .text {
-          text-align: center;
-          padding: 0 10px;
-          height: 58px;
-          line-height: 58px;
-          font-family: Microsoft YaHei;
-          font-size: $global-font-size-24;
-          color: #333333;
-          cursor: pointer; /* 改变鼠标样式为手形 */
-        }
-      }
-
-      .info {
-        display: none;
-        .info_1 {
+      height: 74px;
+      background: linear-gradient(90deg, #1e79ef, #4585ed);
+      .list_1300 {
+        position: relative;
+        width: 1300px;
+        margin: 0 auto;
+        .list {
           position: absolute;
-          left: 0;
-          top: 128px;
-          display: flex;
-          padding: 10px 0;
-          background: $global-color-107;
-          width: 700px;
-          .list_1 {
-            margin: 0 10px 0 0;
-            .title {
-              margin: 5px 0;
-              font-size: $global-font-size-20;
-              font-weight: 600;
-              text-align: center;
-              color: #fff;
-              cursor: pointer; /* 改变鼠标样式为手形 */
-            }
-            .list_1_1 {
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: center;
-              margin: 5px 0;
-              .title1 {
-                width: 120px;
-                margin: 5px;
-                padding: 5px;
-                text-align: center;
-                color: #ffffff;
-                font-size: $global-font-size-18;
-                cursor: pointer; /* 改变鼠标样式为手形 */
-              }
-            }
-          }
-        }
-        .info_2 {
-          position: absolute;
-          left: 73.3%;
-          top: 128px;
+          width: 100%;
           display: flex;
-          padding: 10px 0;
-          background: $global-color-107;
-          width: 145px;
-          .list_2 {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin: 5px 0;
-            .title1 {
-              width: 110px;
-              margin: 5px;
-              padding: 5px;
-              text-align: center;
-              color: #ffffff;
-              font-size: $global-font-size-18;
-              cursor: pointer; /* 改变鼠标样式为手形 */
-            }
+          justify-content: center;
+          align-items: center;
+          height: 74px;
+          background: linear-gradient(90deg, #1e79ef, #4585ed);
+          .text {
+            text-align: center;
+            font-family: Microsoft YaHei;
+            font-size: $global-font-size-22;
+            color: #ffffff;
+            cursor: pointer; /* 改变鼠标样式为手形 */
           }
-        }
-        .info_3 {
-          left: 68.1%;
-        }
-        .info_4 {
-          position: absolute;
-          left: 0;
-          top: 128px;
-          width: 100%;
-          background: $global-color-fff;
-          background: -webkit-linear-gradient(top, white, #6ea6f5, #3b86ee);
-          cursor: pointer; /* 改变鼠标样式为手形 */
-          .list4 {
-            display: flex;
-            justify-content: center;
-            .list_1 {
-              padding: 20px 0;
-              position: relative;
-              margin: 0 10px;
-              span {
-                position: absolute;
-                top: 40px;
-                left: 0;
-                width: 100%;
-                text-align: center;
-                font-size: 20px;
-                color: #000;
-              }
-            }
+          .menuTrue {
+            background: #0165e7;
+            height: 80px;
+            line-height: 80px;
+            border-radius: 3px;
+            margin-top: -3px;
+            z-index: 100;
           }
         }
       }
     }
+    .header_3 {
+      .image {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
   .header:hover {
     .header_2 {

src/layout/site.js

@@ -126,3 +126,15 @@ export const menuList = [
     label: '行研产研'
   }
 ]
+// 目录设置
+export const menuList2 = [
+  { key: '1', title: '首页', route: 'one', English: 'Home', label: '首页' },
+  { key: '3', title: '创新中心', route: 'thr', English: 'News Information', label: '创新中心' },
+  { key: '5', title: '双创活动', route: 'five', English: 'Authorized Operator', label: '双创活动' },
+  { key: '6', title: '中试平台', route: 'six', English: 'Project Selection', label: '中试平台' },
+  { key: '7', title: '服务支撑', route: 'seven', English: 'Innovation Competition', label: '服务支撑' },
+  { key: '8', title: '产业集群', route: 'eight', English: 'Innovation Competition', label: '产业集群' },
+  { key: '11', title: '孵化器', route: 'eleven', English: 'Achievement Display', label: '孵化器' },
+  { key: '12', title: '产业孵化大脑', route: 'brain', English: 'Achievement Display', label: '产业孵化大脑' },
+  { key: '13', title: '行研产研', route: 'thirteen', English: 'Research Development', label: '行研产研' }
+]

src/views/detail/company.vue

@@ -389,6 +389,7 @@ const toDel = async (data, type) => {
     }
   }
   .two {
+    margin: 10px 0 0 0;
     .Seacher {
       display: flex;
       justify-content: center;

src/views/one/index copy.vue

@@ -0,0 +1,640 @@
+<template>
+  <custom-layout v-loading="loading">
+    <el-col :span="24" class="one">
+      <el-carousel height="300px">
+        <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+          <el-image class="image" :src="getUrl(item)" fit="fill" />
+        </el-carousel-item>
+      </el-carousel>
+    </el-col>
+    <el-col :span="24" class="two">
+      <div class="two_1">
+        <div class="title">新闻资讯</div>
+      </div>
+      <div class="two_2">
+        <div class="two_left">
+          <div class="two_2_1">
+            <div class="left">政策信息</div>
+            <div class="right" @click="toMore('0')">更多></div>
+          </div>
+          <div class="two_2_2">
+            <vue3-seamless-scroll :list="news1List" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
+              <el-col :span="24" class="list" v-for="(item, index) in news1List" :key="index" @click="toView(item, '0')">
+                <el-col :span="19" class="left">
+                  <el-image class="image" :src="liIcon" fit="fill" />
+                  <div class="content textOne">{{ item.title || '暂无标题' }}</div>
+                </el-col>
+                <el-col :span="5" class="right">
+                  <el-image class="image" :src="time" fit="fill" />
+                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
+                </el-col>
+              </el-col>
+            </vue3-seamless-scroll>
+          </div>
+        </div>
+        <div class="two_left">
+          <div class="two_2_1">
+            <div class="left">新闻通知</div>
+            <div class="right" @click="toMore('1')">更多></div>
+          </div>
+          <div class="two_2_2">
+            <vue3-seamless-scroll :list="news2List" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
+              <el-col :span="24" class="list" v-for="(item, index) in news2List" :key="index" @click="toView(item, '0')">
+                <el-col :span="19" class="left">
+                  <el-image class="image" :src="liIcon" fit="fill" />
+                  <div class="content textOne">{{ item.title || '暂无标题' }}</div>
+                </el-col>
+                <el-col :span="5" class="right">
+                  <el-image class="image" :src="time" fit="fill" />
+                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
+                </el-col>
+              </el-col>
+            </vue3-seamless-scroll>
+          </div>
+        </div>
+      </div>
+      <div class="two_2">
+        <div class="two_left">
+          <div class="two_2_1">
+            <div class="left">工作动态</div>
+            <div class="right" @click="toMore('2')">更多></div>
+          </div>
+          <div class="two_2_2">
+            <vue3-seamless-scroll :list="news3List" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
+              <el-col :span="24" class="list" v-for="(item, index) in news3List" :key="index" @click="toView(item, '0')">
+                <el-col :span="19" class="left">
+                  <el-image class="image" :src="liIcon" fit="fill" />
+                  <div class="content textOne">{{ item.title || '暂无标题' }}</div>
+                </el-col>
+                <el-col :span="5" class="right">
+                  <el-image class="image" :src="time" fit="fill" />
+                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
+                </el-col>
+              </el-col>
+            </vue3-seamless-scroll>
+          </div>
+        </div>
+        <div class="two_left">
+          <div class="two_2_1">
+            <div class="left">成果展示</div>
+            <div class="right" @click="toMore('-1')">更多></div>
+          </div>
+          <div class="two_2_2">
+            <vue3-seamless-scroll :list="achievementList" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
+              <el-col :span="24" class="list" v-for="(item, index) in achievementList" :key="index" @click="toView(item, '1')">
+                <el-col :span="19" class="left">
+                  <el-image class="image" :src="liIcon" fit="fill" />
+                  <div class="content textOne">{{ item.name || '暂无标题' }}-{{ item.field || '暂无' }}-{{ item.source || '暂无' }}</div>
+                </el-col>
+                <el-col :span="5" class="right">
+                  <el-image class="image" :src="time" fit="fill" />
+                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
+                </el-col>
+              </el-col>
+            </vue3-seamless-scroll>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" class="thr">
+      <div class="thr_1">
+        <div class="title">赛事推广</div>
+      </div>
+      <div class="thr_2">
+        <div class="left">
+          <el-image v-if="matchInfo.file && matchInfo.file.length > 0" class="image" :src="getUrl(matchInfo.file, 'array')" fit="cover">
+            <template v-slot:error>
+              <el-image class="image" :src="match_3" fit="fill" />
+            </template>
+          </el-image>
+          <el-image v-else class="image" :src="match_3" fit="fill" />
+          <div class="name textMore">{{ matchInfo.name || '暂无' }}</div>
+          <div class="brief">{{ removeHtmlStyle(matchInfo.brief) }}</div>
+          <div class="other">
+            <div class="time">
+              <el-image class="image" :src="time1" fit="fill" />
+              <div>{{ matchInfo.start_time || '暂无' }}~{{ matchInfo.end_time || '暂无' }}</div>
+            </div>
+            <div class="button" @click="toView(matchInfo, '2')">查看 ></div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="list" v-for="(item, index) in matchList" :key="index">
+            <el-image v-if="item.file && item.file.length > 0" class="image" :src="getUrl(item.file, 'array')" fit="cover">
+              <template v-slot:error>
+                <el-image class="image" :src="match_3" fit="fill" />
+              </template>
+            </el-image>
+            <el-image v-else class="image" :src="match_3" fit="fill" />
+            <div class="name textMore">{{ item.name }}</div>
+            <div class="other">
+              <div class="time">
+                <el-image class="image" :src="time1" fit="fill" />
+                <div>{{ item.start_time || '暂无' }}~{{ item.end_time || '暂无' }}</div>
+              </div>
+              <div class="button" @click="toView(item, '2')">查看 ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" class="four">
+      <div class="four_1">
+        <div class="title">合作伙伴</div>
+      </div>
+      <div class="four_2">
+        <div class="list" v-for="(item, index) in friendList" :key="index">
+          <el-image class="image" :src="getUrl(item.url, 'array')" fit="fill"></el-image>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" class="five">
+      <div class="five_1">
+        <div class="title">友情链接</div>
+      </div>
+      <div class="five_2">
+        <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>
+      </div>
+    </el-col>
+  </custom-layout>
+</template>
+
+<script setup>
+import moment from 'moment'
+// 图片引入
+import time from '/images/time.png'
+import time1 from '/images/time-dary.png'
+import liIcon from '/images/li-icon.png'
+import match_3 from '/images/match_3.jpg'
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+const $checkRes = inject('$checkRes')
+// 接口
+import { NewsStore } from '@/store/api/platform/news'
+import { MatchStore } from '@/store/api/platform/match'
+import { AchievementStore } from '@/store/api/platform/achievement'
+import { DesignStore } from '@/store/api/platform/design'
+const newsStore = NewsStore()
+const matchStore = MatchStore()
+const achievementStore = AchievementStore()
+const designStore = DesignStore()
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+const carouselList = ref([])
+const friendList = ref([])
+// 成果
+const achievementList = ref([])
+// 新闻
+const news1List = ref([])
+const news2List = ref([])
+const news3List = ref([])
+// 比赛
+const matchList = ref([])
+const matchInfo = ref({})
+// 分类
+const typeList = ref([
+  {
+    title: '热门高校',
+    list: []
+  },
+  {
+    title: '政府部门',
+    list: []
+  },
+  {
+    title: '科研机构',
+    list: []
+  }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+  await searchMatch()
+  loading.value = false
+})
+const searchOther = async () => {
+  const info = {
+    skip: 0,
+    limit: 6,
+    is_use: '0',
+    status: '1'
+  }
+  let res
+  // 政策新闻
+  res = await newsStore.query({ ...info, type: '0' })
+  if (res.errcode == '0') news1List.value = res.data
+  // 新闻通知
+  res = await newsStore.query({ ...info, type: '1' })
+  if (res.errcode == '0') news2List.value = res.data
+  // 行业动态
+  res = await newsStore.query({ ...info, type: '2' })
+  if (res.errcode == '0') news3List.value = res.data
+  // 成果
+  res = await achievementStore.query(info)
+  if (res.errcode == '0') achievementList.value = res.data
+  // 基础设置
+  res = await designStore.query({})
+  if ($checkRes(res)) {
+    carouselList.value = res.data[0].carouselUrl || []
+    friendList.value = res.data[0].friend || []
+    const friendship = res.data[0].friendship || []
+    for (const val of friendship) {
+      for (const tag of typeList.value) {
+        if (val.type == tag.title) {
+          tag.list.push(val)
+        }
+      }
+    }
+  }
+}
+const searchMatch = async () => {
+  const info = {
+    skip: 0,
+    limit: 7,
+    is_use: '0',
+    status: '1'
+  }
+  const res = await matchStore.query(info)
+  if (res.errcode == '0') {
+    matchList.value = res.data.slice(1, 7)
+    matchInfo.value = res.data[0]
+  }
+}
+
+// 查看详情
+const toView = (item, type) => {
+  if (type == '0') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
+  else if (type == '1') router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
+  else router.push({ path: '/match/detail', query: { id: item.id || item._id } })
+}
+// 查看更多
+const toMore = (type) => {
+  if (type == '-1') router.push({ path: '/nine' })
+  else router.push({ path: '/news', query: { type } })
+}
+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 getUrl = (item, type) => {
+  if (item) {
+    if (type == 'array') return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
+    else return `${import.meta.env.VITE_APP_HOST}${item.uri}`
+  }
+}
+</script>
+<style scoped lang="scss">
+.one {
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+}
+.two {
+  width: 1600px;
+  margin: 0 auto;
+  .two_1 {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    .title {
+      background-image: url(/images/sg-title.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      font-size: $global-font-size-36;
+      width: 500px;
+      line-height: 46px;
+      height: 46px;
+    }
+  }
+  .two_2 {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    .two_left {
+      width: 49%;
+      margin: 10px;
+      /* 加载背景图 */
+      background-image: url(/images/newsBg.png);
+      background-size: 100% 100%; /* 宽度和高度都会被拉伸或压缩以适应容器 */
+      background-repeat: no-repeat; /* 防止背景图片重复 */
+      background-position: center; /* 背景图片居中显示 */
+      height: 380px;
+      .two_2_1 {
+        display: flex;
+        justify-content: space-between;
+        padding: 25px 35px 10px 35px;
+        cursor: default;
+        color: $global-color-fff;
+        .left {
+          font-size: $global-font-size-26;
+        }
+        .right {
+          font-size: $global-font-size-24;
+        }
+      }
+      .two_2_2 {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 10px;
+        margin: 10px 30px 0 30px;
+        background-color: $global-color-fff;
+        border-radius: 20px;
+        max-height: 275px;
+        overflow: hidden;
+        div {
+          width: 100%;
+        }
+        .list {
+          width: 100%;
+          display: flex;
+          padding: 10px 0;
+          font-size: $global-font-size-20;
+          .left {
+            display: flex;
+            align-items: center;
+            .image {
+              width: 30px;
+              height: 16px;
+            }
+            .content {
+              margin: 0 5px;
+              max-width: 510px;
+            }
+          }
+          .right {
+            display: flex;
+            align-items: center;
+            .image {
+              width: 22px;
+              height: 20px;
+            }
+            .time {
+              margin: 0 0 0 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.thr {
+  width: 1600px;
+  margin: 20px auto;
+  .thr_1 {
+    display: flex;
+    justify-content: center;
+    margin: 0 0 20px 0;
+    .title {
+      background-image: url(/images/sg-title.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      font-size: $global-font-size-36;
+      width: 500px;
+      line-height: 46px;
+      height: 46px;
+    }
+  }
+  .thr_2 {
+    display: flex;
+    .left {
+      width: 598px;
+      padding: 10px;
+      transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影的出现更平滑 */
+      .image {
+        width: 558px;
+        height: 342px;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .name {
+        margin: 16px 0;
+        max-height: 52px;
+        font-size: $global-font-size-20;
+      }
+      .brief {
+        min-height: 60px;
+        margin-bottom: 20px !important;
+        font-size: $global-font-size-16;
+        color: #717794;
+        -webkit-line-clamp: 3;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      .other {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .time {
+          display: flex;
+          align-items: center;
+          color: #858585;
+          .image {
+            width: 18px;
+            height: 18px;
+            margin: 0 5px 0 0;
+          }
+        }
+        .button {
+          color: $global-color-107;
+          padding: 5px 15px;
+        }
+        .button:hover {
+          color: $global-color-fff;
+          background-color: $global-color-107;
+          border-radius: 20px;
+        }
+      }
+    }
+
+    .left:hover {
+      box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
+    }
+    .right {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      align-items: center;
+      .list {
+        width: 33%;
+        padding: 10px;
+        transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影的出现更平滑 */
+        .image {
+          border-radius: 4px;
+          overflow: hidden;
+        }
+        .name {
+          min-height: 40px;
+          margin: 5px 0;
+          font-size: $global-font-size-18;
+        }
+        .other {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .time {
+            display: flex;
+            align-items: center;
+            color: #858585;
+            .image {
+              width: 18px;
+              height: 18px;
+              margin: 0 5px 0 0;
+            }
+          }
+          .button {
+            color: $global-color-107;
+            padding: 5px 15px;
+          }
+          .button:hover {
+            color: $global-color-fff;
+            background-color: $global-color-107;
+            border-radius: 20px;
+          }
+        }
+      }
+
+      .list:hover {
+        box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
+      }
+    }
+  }
+}
+.four {
+  width: 1600px;
+  margin: 20px auto;
+  .four_1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0 20px 0;
+    .title {
+      background-image: url(/images/sg-title.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      font-size: $global-font-size-36;
+      width: 500px;
+      line-height: 46px;
+      height: 46px;
+    }
+  }
+  .four_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    .list {
+      margin: 10px;
+      .image {
+        width: 245px;
+        height: 140px;
+      }
+    }
+  }
+}
+.five {
+  width: 1600px;
+  margin: 20px auto;
+  .five_1 {
+    display: flex;
+    justify-content: center;
+    margin: 0 0 20px 0;
+    .title {
+      background-image: url(/images/sg-title.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      font-size: $global-font-size-36;
+      width: 500px;
+      line-height: 46px;
+      height: 46px;
+    }
+  }
+  .five_2 {
+    display: flex;
+    .list {
+      .list_1 {
+        background-image: url(/images/rczy-title.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        text-align: center;
+        font-size: $global-font-size-36;
+        line-height: 40px;
+        height: 40px;
+        margin: 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>

src/views/one/index.vue

@@ -1,98 +1,67 @@
 <template>
-  <custom-layout v-loading="loading">
-    <el-col :span="24" class="one">
-      <el-carousel height="300px">
-        <el-carousel-item v-for="(item, index) in carouselList" :key="index">
-          <el-image class="image" :src="getUrl(item)" fit="fill" />
-        </el-carousel-item>
-      </el-carousel>
-    </el-col>
+  <custom-layout v-loading="loading" :is_carousel="true" :carouselList="carouselList">
     <el-col :span="24" class="two">
-      <div class="two_1">
-        <div class="title">新闻资讯</div>
+      <div class="two_left">
+        <div class="left_more left_1" @click="toComon('/nine')">
+          <div class="name">成果中心</div>
+          <div class="english">ACHIEVEMENT CENTER</div>
+          <div class="remark">成果征集入口</div>
+        </div>
+        <div class="left_more left_2" @click="toComon('/thr')">
+          <div class="name">创新中心</div>
+          <div class="english">INNOVATION CENTER</div>
+          <div class="remark">需求供给查看入口</div>
+        </div>
+        <div class="left_more left_3" @click="toComon('/four')">
+          <div class="name">信息检索</div>
+          <div class="english">INFORMATION RETRIEVAL</div>
+          <div class="remark">信息检索入口</div>
+        </div>
       </div>
-      <div class="two_2">
-        <div class="two_left">
-          <div class="two_2_1">
-            <div class="left">政策信息</div>
-            <div class="right" @click="toMore('0')">更多></div>
-          </div>
-          <div class="two_2_2">
-            <vue3-seamless-scroll :list="news1List" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
-              <el-col :span="24" class="list" v-for="(item, index) in news1List" :key="index" @click="toView(item, '0')">
-                <el-col :span="19" class="left">
-                  <el-image class="image" :src="liIcon" fit="fill" />
-                  <div class="content textOne">{{ item.title || '暂无标题' }}</div>
-                </el-col>
-                <el-col :span="5" class="right">
-                  <el-image class="image" :src="time" fit="fill" />
-                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
-                </el-col>
-              </el-col>
-            </vue3-seamless-scroll>
-          </div>
+      <div class="two_center">
+        <div class="center_1">
+          <div class="center_left">新闻资讯</div>
+          <div class="center_right" @click="toMore">更多>></div>
         </div>
-        <div class="two_left">
-          <div class="two_2_1">
-            <div class="left">新闻通知</div>
-            <div class="right" @click="toMore('1')">更多></div>
-          </div>
-          <div class="two_2_2">
-            <vue3-seamless-scroll :list="news2List" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
-              <el-col :span="24" class="list" v-for="(item, index) in news2List" :key="index" @click="toView(item, '0')">
-                <el-col :span="19" class="left">
-                  <el-image class="image" :src="liIcon" fit="fill" />
-                  <div class="content textOne">{{ item.title || '暂无标题' }}</div>
-                </el-col>
-                <el-col :span="5" class="right">
-                  <el-image class="image" :src="time" fit="fill" />
-                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
-                </el-col>
-              </el-col>
-            </vue3-seamless-scroll>
-          </div>
+        <div class="center_2">
+          <vue3-seamless-scroll :list="newsList" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
+            <div class="center_list" v-for="(item, index) in newsList" :key="index">
+              <div class="center_left textOne">{{ item.title || '暂无' }}</div>
+              <div class="center_right">{{ moment(item.time).format('YYYY-MM-DD') || '暂无' }}</div>
+            </div>
+          </vue3-seamless-scroll>
         </div>
       </div>
-      <div class="two_2">
-        <div class="two_left">
-          <div class="two_2_1">
-            <div class="left">工作动态</div>
-            <div class="right" @click="toMore('2')">更多></div>
-          </div>
-          <div class="two_2_2">
-            <vue3-seamless-scroll :list="news3List" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
-              <el-col :span="24" class="list" v-for="(item, index) in news3List" :key="index" @click="toView(item, '0')">
-                <el-col :span="19" class="left">
-                  <el-image class="image" :src="liIcon" fit="fill" />
-                  <div class="content textOne">{{ item.title || '暂无标题' }}</div>
-                </el-col>
-                <el-col :span="5" class="right">
-                  <el-image class="image" :src="time" fit="fill" />
-                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
-                </el-col>
-              </el-col>
-            </vue3-seamless-scroll>
+      <div class="two_right">
+        <div class="right_more right_1" @click="toComon('/expert')">
+          <div class="right_left">
+            <el-image class="image" :src="home_1" fit="fill" />
+            <div class="right_name">
+              <div class="name">专家库</div>
+              <div class="english">EXPERT LIBRARY</div>
+            </div>
           </div>
+          <div class="right_right">点击进入>></div>
         </div>
-        <div class="two_left">
-          <div class="two_2_1">
-            <div class="left">成果展示</div>
-            <div class="right" @click="toMore('-1')">更多></div>
+        <div class="right_more right_2" @click="toComon('/company')">
+          <div class="right_left">
+            <el-image class="image" :src="home_2" fit="fill" />
+            <div class="right_name">
+              <div class="name">企业库</div>
+              <div class="english">ENTERPRISE LIBRARY</div>
+            </div>
           </div>
-          <div class="two_2_2">
-            <vue3-seamless-scroll :list="achievementList" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
-              <el-col :span="24" class="list" v-for="(item, index) in achievementList" :key="index" @click="toView(item, '1')">
-                <el-col :span="19" class="left">
-                  <el-image class="image" :src="liIcon" fit="fill" />
-                  <div class="content textOne">{{ item.name || '暂无标题' }}-{{ item.field || '暂无' }}-{{ item.source || '暂无' }}</div>
-                </el-col>
-                <el-col :span="5" class="right">
-                  <el-image class="image" :src="time" fit="fill" />
-                  <div class="time">{{ moment(item.time).format('YYYY-MM-DD') }}</div>
-                </el-col>
-              </el-col>
-            </vue3-seamless-scroll>
+          <div class="right_right">点击进入>></div>
+        </div>
+        <div class="right_more right_3" @click="toComon('/project')">
+          <div class="right_left">
+            <el-image class="image" :src="home_3" fit="fill" />
+            <div class="right_name">
+              <div class="name">项目库</div>
+              <div class="english">PROJECT LIBRARY</div>
+            </div>
           </div>
+          <div class="right_right">点击进入>></div>
         </div>
       </div>
     </el-col>
@@ -169,22 +138,18 @@
 <script setup>
 import moment from 'moment'
 // 图片引入
-import time from '/images/time.png'
+import home_1 from '/images/home_1.png'
+import home_2 from '/images/home_2.png'
+import home_3 from '/images/home_3.png'
 import time1 from '/images/time-dary.png'
-import liIcon from '/images/li-icon.png'
 import match_3 from '/images/match_3.jpg'
-import { UserStore } from '@/store/user'
-const userStore = UserStore()
-const user = computed(() => userStore.user)
 const $checkRes = inject('$checkRes')
 // 接口
 import { NewsStore } from '@/store/api/platform/news'
 import { MatchStore } from '@/store/api/platform/match'
-import { AchievementStore } from '@/store/api/platform/achievement'
 import { DesignStore } from '@/store/api/platform/design'
 const newsStore = NewsStore()
 const matchStore = MatchStore()
-const achievementStore = AchievementStore()
 const designStore = DesignStore()
 // 加载中
 const loading = ref(false)
@@ -192,12 +157,8 @@ const loading = ref(false)
 const router = useRouter()
 const carouselList = ref([])
 const friendList = ref([])
-// 成果
-const achievementList = ref([])
 // 新闻
-const news1List = ref([])
-const news2List = ref([])
-const news3List = ref([])
+const newsList = ref([])
 // 比赛
 const matchList = ref([])
 const matchInfo = ref({})
@@ -226,23 +187,14 @@ onMounted(async () => {
 const searchOther = async () => {
   const info = {
     skip: 0,
-    limit: 6,
+    limit: 10,
     is_use: '0',
     status: '1'
   }
   let res
   // 政策新闻
-  res = await newsStore.query({ ...info, type: '0' })
-  if (res.errcode == '0') news1List.value = res.data
-  // 新闻通知
-  res = await newsStore.query({ ...info, type: '1' })
-  if (res.errcode == '0') news2List.value = res.data
-  // 行业动态
-  res = await newsStore.query({ ...info, type: '2' })
-  if (res.errcode == '0') news3List.value = res.data
-  // 成果
-  res = await achievementStore.query(info)
-  if (res.errcode == '0') achievementList.value = res.data
+  res = await newsStore.query({ ...info })
+  if (res.errcode == '0') newsList.value = res.data
   // 基础设置
   res = await designStore.query({})
   if ($checkRes(res)) {
@@ -271,7 +223,6 @@ const searchMatch = async () => {
     matchInfo.value = res.data[0]
   }
 }
-
 // 查看详情
 const toView = (item, type) => {
   if (type == '0') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
@@ -279,9 +230,12 @@ const toView = (item, type) => {
   else router.push({ path: '/match/detail', query: { id: item.id || item._id } })
 }
 // 查看更多
-const toMore = (type) => {
-  if (type == '-1') router.push({ path: '/nine' })
-  else router.push({ path: '/news', query: { type } })
+const toMore = () => {
+  router.push({ path: '/news' })
+}
+// 查看
+const toComon = (route) => {
+  router.push({ path: route })
 }
 const removeHtmlStyle = (html) => {
   let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g //去除样式
@@ -313,98 +267,155 @@ const getUrl = (item, type) => {
   }
 }
 .two {
-  width: 1600px;
-  margin: 0 auto;
-  .two_1 {
-    display: flex;
-    justify-content: center;
-    margin: 20px 0;
-    .title {
-      background-image: url(/images/sg-title.png);
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      text-align: center;
-      font-size: $global-font-size-36;
-      width: 500px;
-      line-height: 46px;
-      height: 46px;
+  width: 1300px;
+  margin: 20px auto;
+  display: flex;
+  justify-content: space-between;
+  .two_left {
+    width: 327px;
+
+    .left_more {
+      width: 327px;
+      padding-left: 45px;
+      height: 127px;
+      border-radius: 2px;
+      color: #fff;
+      margin-bottom: 9px;
+      position: relative;
+      cursor: default;
+
+      .name {
+        font-size: $global-font-size-26;
+        font-weight: 700;
+        line-height: 30px;
+        padding-top: 20px;
+      }
+      .english {
+        font-size: $global-font-size-14;
+        padding: 7px 0;
+      }
+      .remark {
+        font-size: $global-font-size-14;
+        padding: 0 10px;
+        height: 30px;
+        display: block;
+        border: 1px solid hsla(0, 0%, 100%, 0.5);
+        text-align: center;
+        line-height: 30px;
+        float: left;
+      }
+    }
+    .left_1 {
+      background: linear-gradient(90deg, #6a8df3, #119eee);
+    }
+    .left_2 {
+      background: linear-gradient(90deg, #ef7d2b, #fcaa64);
+    }
+    .left_3 {
+      background: linear-gradient(90deg, #22b9c7, #32cfc6);
     }
   }
-  .two_2 {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    .two_left {
-      width: 49%;
-      margin: 10px;
-      /* 加载背景图 */
-      background-image: url(/images/newsBg.png);
-      background-size: 100% 100%; /* 宽度和高度都会被拉伸或压缩以适应容器 */
-      background-repeat: no-repeat; /* 防止背景图片重复 */
-      background-position: center; /* 背景图片居中显示 */
-      height: 380px;
-      .two_2_1 {
-        display: flex;
-        justify-content: space-between;
-        padding: 25px 35px 10px 35px;
+  .two_center {
+    margin: 0 10px;
+    width: 635px;
+
+    .center_1 {
+      display: flex;
+      justify-content: space-between;
+      height: 49px;
+      background: #d3e0fe;
+      font-size: 20px;
+      line-height: 49px;
+      padding: 0 10px 0 20px;
+      .center_right {
+        color: #ababab;
+        font-size: $global-font-size-14;
         cursor: default;
-        color: $global-color-fff;
-        .left {
-          font-size: $global-font-size-26;
+      }
+    }
+    .center_2 {
+      background: #f1f7ff;
+      height: 350px;
+      overflow: hidden;
+      .center_list {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        height: 47px;
+        border-bottom: 1px dashed #e5e5e5;
+        line-height: 47px;
+        padding-left: 20px;
+        .center_left {
+          width: 84%;
+          font-size: $global-font-size-16;
         }
-        .right {
-          font-size: $global-font-size-24;
+        .center_right {
+          color: #999;
+          font-size: $global-font-size-14;
         }
       }
-      .two_2_2 {
+    }
+  }
+  .two_right {
+    width: 307px;
+    .right_more {
+      width: 307px;
+      height: 124px;
+      margin-bottom: 13px;
+      border-radius: 8px;
+      cursor: default;
+      .right_left {
         display: flex;
         align-items: center;
-        flex-wrap: wrap;
-        padding: 10px;
-        margin: 10px 30px 0 30px;
-        background-color: $global-color-fff;
-        border-radius: 20px;
-        max-height: 275px;
-        overflow: hidden;
-        div {
-          width: 100%;
+        padding-top: 25px;
+        .image {
+          padding: 0 10px 0 15px;
         }
-        .list {
-          width: 100%;
-          display: flex;
-          padding: 10px 0;
-          font-size: $global-font-size-20;
-          .left {
-            display: flex;
-            align-items: center;
-            .image {
-              width: 30px;
-              height: 16px;
-            }
-            .content {
-              margin: 0 5px;
-              max-width: 510px;
-            }
-          }
-          .right {
-            display: flex;
-            align-items: center;
-            .image {
-              width: 22px;
-              height: 20px;
-            }
-            .time {
-              margin: 0 0 0 5px;
-            }
-          }
+        .name {
+          font-size: $global-font-size-28;
+          font-weight: 400;
+          line-height: 30px;
+          margin: 0 0 8px 0;
+        }
+        .english {
+          font-size: $global-font-size-14;
+          line-height: 14px;
         }
       }
+      .right_right {
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 16px;
+        padding-top: 5px;
+        font-size: $global-font-size-14;
+      }
+    }
+    .right_1 {
+      background: linear-gradient(90deg, #d1dcff, #d7e7fb);
+      color: #2073c7;
+      .right_right {
+        color: #89b9ee;
+      }
+    }
+    .right_2 {
+      background: linear-gradient(90deg, #f9e6d7, #fcf6f2);
+      color: #e48a27;
+      .right_right {
+        color: #f5c494;
+      }
+    }
+    .right_3 {
+      background: linear-gradient(90deg, #b4e7d0, #cdf2eb);
+      color: #11af84;
+      margin-bottom: 0;
+      .right_right {
+        color: #62c5aa;
+      }
     }
   }
 }
 .thr {
-  width: 1600px;
+  width: 1300px;
   margin: 20px auto;
   .thr_1 {
     display: flex;
@@ -440,7 +451,7 @@ const getUrl = (item, type) => {
         font-size: $global-font-size-20;
       }
       .brief {
-        min-height: 60px;
+        min-height: 115px;
         margin-bottom: 20px !important;
         font-size: $global-font-size-16;
         color: #717794;
@@ -484,7 +495,7 @@ const getUrl = (item, type) => {
       flex-wrap: wrap;
       align-items: center;
       .list {
-        width: 33%;
+        width: 50%;
         padding: 10px;
         transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影的出现更平滑 */
         .image {
@@ -529,7 +540,7 @@ const getUrl = (item, type) => {
   }
 }
 .four {
-  width: 1600px;
+  width: 1300px;
   margin: 20px auto;
   .four_1 {
     display: flex;
@@ -563,7 +574,7 @@ const getUrl = (item, type) => {
   }
 }
 .five {
-  width: 1600px;
+  width: 1300px;
   margin: 20px auto;
   .five_1 {
     display: flex;
@@ -591,8 +602,8 @@ const getUrl = (item, type) => {
         background-size: cover;
         text-align: center;
         font-size: $global-font-size-36;
-        line-height: 40px;
-        height: 40px;
+        line-height: 33px;
+        height: 33px;
         margin: 20px 0;
         .title {
           font-size: $global-font-size-20;
@@ -600,26 +611,6 @@ const getUrl = (item, type) => {
           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 {