technique_web2/src/views/brain/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="brain">
          <el-image class="image" :src="brain" fit="fill" />
        </el-col>
        <div class="w_1200">
          <el-col :span="24" class="two">
            <el-col :span="18" class="left">
              <el-col
                :span="24"
                class="list"
                v-for="(item, index) in list"
                :key="index"
                @click="toView(item)"
              >
                <el-col :span="6" class="left">
                  <el-image
                    class="image"
                    v-if="item.logo && item.logo.length > 0"
                    :src="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="24" class="right_3">
                    {{ item.time || '暂无' }}
                  </el-col>
                </el-col>
              </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>
    </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 '@/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
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  const info = {
    skip: 0,
    limit: 6,
    status: '1',
    is_use: '0'
  }
  let res
  res = await achievementStore.query(info)
  if (res.errcode == '0') achievementList.value = res.data
  res = await projectStore.query(info)
  if (res.errcode == '0') projectList.value = res.data
}
const search = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    status: '1',
    is_use: '0'
  }
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 查看
const toView = (item) => {
  router.push({ path: `/news/detail`, query: { id: item.id || item._id } })
}
// 查看更多
const toMore = () => {
  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 {
  .brain {
    .image {
      width: 100%;
      height: 200px;
    }
  }
  .one {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 0 10px;

    .left {
      display: flex;
      align-items: center;

      span {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        margin: 0 0 0 5px;
      }

      .image {
        width: 40px;
        height: 40px;
      }
    }

    .right {
      text-align: right;
      font-size: 12px;
    }

    .right:hover {
      color: #2374ff;
    }
  }

  .two {
    display: flex;
    width: 100%;
    margin: 10px;
    .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;
          }
        }
      }
    }
    .right {
      .title {
        display: flex;
        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;
        }
        .right {
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #666;
        }
      }
      .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>