cxyy-web/src/views/detail/achievementDetail.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <div class="w_1300">
        <div class="info_1">
          <h3 class="name">{{ info.name || '暂无' }}</h3>
          <div class="collect iscollect" @click="toCollect" v-if="info.is_collection">
            <el-icon :size="24" color="#1073ff"><StarFilled /></el-icon>
            <span>已收藏</span>
          </div>
          <div class="collect" v-else @click="toCollect">
            <el-icon :size="24"><Star /></el-icon>
            <span>收藏</span>
          </div>
          <div class="other_1">
            <div class="value">
              <el-image class="image" :src="icon1" fit="fill" />
              <span class="span">{{ info.time || '暂无' }}</span>
            </div>
            <div class="value">
              <el-image class="image" :src="icon2" fit="fill" />
              <span class="span">{{ info.num || '0' }}</span>
            </div>
          </div>
          <div class="other_2">
            <div class="value">
              <el-image class="image" :src="icon4" fit="fill" />
              <span class="span">技术领域：{{ info.field || '暂无' }}</span>
            </div>
            <div class="value">
              <el-image class="image" :src="icon5" fit="fill" />
              <span class="span">项目来源：{{ info.source || '暂无' }}</span>
            </div>
            <div class="value">
              <el-image class="image" :src="icon9" fit="fill" />
              <span class="span">负责人：{{ info.person || '暂无' }}</span>
            </div>
            <div class="value">
              <el-image class="image" :src="icon6" fit="fill" />
              <span class="span">联系电话：{{ info.tel || '暂无' }}</span>
            </div>
            <div class="value">
              <el-image class="image" :src="icon7" fit="fill" />
              <span class="span">专利情况：{{ info.patent || '暂无' }}</span>
            </div>
            <div class="value">
              <el-image class="image" :src="icon8" fit="fill" />
              <span class="span">技术标签：{{ info.label || '暂无' }}</span>
            </div>
          </div>
        </div>
        <div class="info_2">
          <div class="title">成果简介</div>
          <div class="content">
            <div class="tit">
              <el-image class="image" :src="icon3" fit="fill" />
              <span>成果简介</span>
            </div>
            <div class="brief">{{ info.brief || '暂无' }}</div>
          </div>
        </div>
        <div class="info_2" v-if="info.file && info.file.length > 0">
          <div class="title">成果附件</div>
          <div class="file">
            <el-link :href="info.file[0].url" target="_blank">{{ info.file[0].name }}</el-link>
          </div>
        </div>
        <div class="info_3">
          <div class="title">相关成果推荐</div>
          <div class="content">
            <div class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
              <div class="list_1">
                <el-image class="image" :src="file[index]" fit="fill" />
                <div class="box">
                  <p class="name textMore">{{ item.name || '暂无' }}</p>
                </div>
                <div class="list_2">
                  <div class="other">
                    <el-image class="image" :src="one" fit="fill" />
                    <div class="text">{{ item.field || '暂无' }}</div>
                  </div>
                  <div class="other">
                    <el-image class="image" :src="two" fit="fill" />
                    <div class="text">{{ item.person || '暂无' }}</div>
                  </div>
                  <div class="other">
                    <el-image class="image" :src="thr" fit="fill" />
                    <div class="text">{{ item.source || '暂无' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
import bg_1 from '/images/achievement/tec_bg_1.png'
import bg_2 from '/images/achievement/tec_bg_2.png'
import bg_3 from '/images/achievement/tec_bg_3.png'
import bg_4 from '/images/achievement/tec_bg_4.png'
import one from '/images/achievement/bg-cgyx-list-icon1.png'
import two from '/images/achievement/bg-cgyx-list-icon2.png'
import thr from '/images/achievement/bg-cgyx-list-icon3.png'
import icon1 from '/images/achievement/cg-detail-icon1.png'
import icon2 from '/images/achievement/cg-detail-icon2.png'
import icon3 from '/images/achievement/bg-cg_detail-cgjj1.png'
import icon4 from '/images/achievement/cg-detail-icon4.png'
import icon5 from '/images/achievement/cg-detail-icon5.png'
import icon6 from '/images/achievement/cg-detail-icon6.png'
import icon7 from '/images/achievement/cg-detail-icon7.png'
import icon8 from '/images/achievement/cg-detail-icon8.png'
import icon9 from '/images/achievement/cg-detail-icon9.png'
// 接口
import { AchievementStore } from '@/store/api/platform/achievement'
const store = AchievementStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const route = useRoute()
const router = useRouter()
const info = ref({})
const file = ref([bg_1, bg_2, bg_3, bg_4])
const list = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  await searchAchieve()
  loading.value = false
})
const search = async () => {
  let id = route.query.id
  if (id) {
    let res = await store.detail(id)
    if (res.errcode == '0') info.value = res.data
  }
}
const searchAchieve = async () => {
  const data = {
    skip: 0,
    limit: 4,
    is_use: '0',
    status: '1',
    field: info.value.field
  }
  const res = await store.list(data)
  if (res.errcode == '0') list.value = res.data
}
// 查看详情
const toView = async (item) => {
  router.push({ path: '/achievement/detail', query: { id: item.id || item._id } }).then(() => {
    // 重新刷新页面
    location.reload()
  })
}
const toCollect = async () => {
  if (user.value.id) {
    info.value.is_collection = !info.value.is_collection
  } else ElMessage({ message: '未登录！', type: 'error' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    background: url(/images/bg-cg_detail-infor.png) no-repeat top right;
    .info_1 {
      padding: 100px 80px 0 80px;

      .name {
        font-size: $global-font-size-36;
        width: 70%;
        font-weight: bold;
      }
      .collect {
        display: flex;
        align-items: center;
        width: 35%;
        font-size: $global-font-size-20;
        color: #929292;
        cursor: default;
        span {
          margin: 0 0 0 5px;
        }
      }
      .iscollect {
        color: #1073ff;
      }
      .other_1 {
        width: 430px;
        margin-top: 40px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .value {
          display: flex;
          align-items: center;
          .span {
            margin: 0 0 0 10px;
            font-size: 18px;
            line-height: 36px;
            color: #18284d;
          }
        }
      }
      .other_2 {
        width: 430px;
        .value {
          display: flex;
          align-items: center;
          margin: 5px 0 0 0;
          .span {
            margin: 0 0 0 10px;
            font-size: 18px;
            line-height: 36px;
            color: #18284d;
          }
        }
      }
    }
    .info_2 {
      padding: 0 80px;
      margin-top: 70px !important;
      .title {
        color: #000;
        display: inline-block;
        margin-right: 80px;
        padding-bottom: 20px;
        font-size: $global-font-size-30;
        color: #000000;
        border-bottom: 5px solid #378cff;
        cursor: pointer;
      }
      .file {
        margin: 20px 0 0 0;
        .el-link {
          font-size: $global-font-size-20;
        }
      }
      .content {
        padding: 20px;
        margin-top: 25px !important;
        width: 100%;
        background-image: linear-gradient(90deg, #3dbef2 0, #5b3bff 100%), linear-gradient(#5b3bff, #5b3bff);
        background-blend-mode: normal, normal;
        .tit {
          span {
            font-size: 20px !important;
            margin-left: 15px !important;
            color: #fff;
          }
        }
        .brief {
          line-height: 28px;
          color: #fff;
          font-size: 16px;
          margin-top: 20px !important;
        }
      }
    }
    .info_3 {
      padding: 80px !important;
      background: #fff;
      .title {
        color: #000;
        display: inline-block;
        margin-right: 80px;
        padding-bottom: 20px;
        font-size: $global-font-size-30;
        color: #000000;
        border-bottom: 5px solid #378cff;
        cursor: pointer;
      }
      .content {
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .list {
          margin-right: 10px;
          margin-bottom: 15px;
          padding-top: 3px;
          width: 277px;
          height: 325px;
          background-color: #fff;
          box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.3);
          .list_1 {
            position: relative;

            .image {
              height: 100%;
              width: 100%;
            }
            .box {
              display: flex !important;
              align-items: center;
              position: absolute;
              top: 40px;
              left: 0;
              padding: 15px 10px;
              width: 100%;
              height: 70px;
              background-color: rgba(0, 25, 79, 0.5);
              font-size: $global-font-size-18;
              line-height: 24px;
              color: #fff;
            }
          }
          .list_2 {
            margin: 10px 13px 0;
            .other {
              display: flex;
              align-items: center;
              margin: 0 0 5px 0;
              .image {
                width: 25px;
                height: 25px;
                margin: 0 5px 0 0;
              }
              .text {
                font-size: $global-font-size-16;
                line-height: 32px;
                color: #404040;
              }
            }
          }
        }
        .list:nth-child(4n) {
          margin-right: 0;
        }
        .list:hover {
          box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.8);
        }
      }
    }
  }
}
</style>