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

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <div class="w_1300">
        <div class="info_1"></div>
        <div class="info_2">
          <div class="info_left">
            <div class="inose_top">
              <div class="img">
                <el-image class="image" :src="biao_1" fit="fill"></el-image>
              </div>
              <div class="ba_tile">
                项目来源：
                <span class="hui_text textMore">{{ info.source || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                所属产业：
                <span class="hui_text textMore">{{ info.industry || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                跟踪支持单位：
                <span class="hui_text textMore">{{ info.track_unit || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                项目主体：
                <span class="hui_text textMore">{{ info.main || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                项目进展：
                <span class="hui_text textMore">{{ info.progress || '暂无' }}</span>
              </div>
            </div>
            <div class="inose_top">
              <div class="img">
                <el-image class="image" :src="biao_2" fit="fill"></el-image>
              </div>
              <div class="other_1">
                <div class="name">{{ info.person || '暂无' }}</div>
                <div class="button">预约对接</div>
              </div>
            </div>
            <div class="inose_top">
              <div class="img">
                <el-image class="image" :src="biao_3" fit="fill"></el-image>
              </div>
              <div class="wenbe_text">
                <span v-if="is_show">{{ info.brief || '暂无' }}</span>
                <span v-else>{{ truncateString(info.brief, 100) }}</span>
                <span v-if="info.brief && info.brief.length > 100">
                  <span v-if="!is_show" class="anniu_btn" @click="is_show = true">《点击查看更多》</span>
                  <span v-else class="anniu_btn" @click="is_show = false">《点击收起更多》</span>
                </span>
              </div>
            </div>
          </div>
          <div class="info_right">
            <div class="right_title">
              <div class="type">{{ info.progress || '暂无' }}</div>
              <div class="title textOne">项目商业计划书</div>
            </div>
            <div class="pdf_item" :class="['image' + num]">
              <div class="pdf_type textOne">{{ info.industry || '暂无' }}</div>
              <div class="title">
                <p class="ellipsis-3">{{ info.name || '暂无' }}</p>
              </div>
              <div class="address">
                <el-icon color="#595959"><Location /></el-icon>
                <span class="textOne">{{ info.main || '暂无' }}</span>
              </div>
              <div class="biaoqian textOne">
                <span v-if="info.technology">{{ info.technology }}</span>
                <span v-if="info.sell">{{ info.sell }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="info_3">
          <div class="right_1">
            <div class="title">
              <div class="title_1">专家推荐</div>
              <div class="title_2" @click="toMore('0')">更多></div>
            </div>
            <div class="content_2">
              <div class="list" v-for="(item, index) in expertList" :key="index" @click="toView(item, '0')">
                <div class="name">
                  <el-image class="image" :src="liIcon" fit="fill"></el-image>
                  <span>{{ item.name || '暂无' }}</span>
                </div>
                <span>{{ item.title || '暂无' }}</span>
                <span>{{ item.industry || '暂无' }}</span>
              </div>
            </div>
          </div>
          <div class="right_1">
            <div class="title">
              <div class="title_1">项目推荐</div>
              <div class="title_2" @click="toMore('1')">更多></div>
            </div>
            <div class="content_2">
              <div class="list" v-for="(item, index) in projectList" :key="index" @click="toView(item, '1')">
                <div class="name">
                  <el-image class="image" :src="liIcon" fit="fill"></el-image>
                  <span>{{ item.name || '暂无' }}</span>
                </div>
                <span>{{ item.source || '暂无' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
import liIcon from '/images/li-icon.png'
import biao_1 from '/images/biao_1.png'
import biao_2 from '/images/biao_2.png'
import biao_3 from '/images/biao_3.png'
// 接口
import { ProjectStore } from '@/store/api/platform/project'
import { ExpertStore } from '@/store/api/user/expert'
const store = ProjectStore()
const expertStore = ExpertStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
const is_show = ref(false)
const num = ref(Math.floor(Math.random() * 8))
// 路由
const route = useRoute()
const router = useRouter()
const info = ref({})
const expertList = ref([])
const projectList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  await searchExpert()
  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: 3,
    is_use: '0',
    status: '1',
    industry: info.value.industry
  }
  const res = await store.list(data)
  if (res.errcode == '0') projectList.value = res.data
}
const searchExpert = async () => {
  const data = {
    skip: 0,
    limit: 3,
    is_use: '0',
    status: '1'
  }
  const res = await expertStore.query(data)
  if (res.errcode == '0') expertList.value = res.data
}
// 查看
const truncateString = (str, length) => {
  if (!str) return '暂无'
  if (str.length <= length) {
    return str // 如果字符串长度小于等于所需长度，直接返回
  } else {
    return str.substring(0, length) + '...' // 否则返回前length个字符并加上省略号
  }
}
// 查看详情
const toView = (item, type) => {
  if (type == '0') router.push({ path: '/expert/detail', query: { id: item.id || item._id } })
  else if (type == '1')
    router.push({ path: '/project/detail', query: { id: item.id || item._id } }).then(() => {
      // 重新刷新页面
      location.reload()
    })
}
// 查看更多
const toMore = (type) => {
  if (type == '0') router.push({ path: '/expert' })
  else if (type == '1') router.push({ path: '/project' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    padding-bottom: 40px;
    background: #f9faff url(/images/bg-gjsxm.jpg) center top no-repeat;
    .info_1 {
      padding: 30px 0;
    }
    .info_2 {
      display: flex;
      border-radius: 5px;
      padding-right: 30px;
      padding: 50px;
      background: #fff;
      .info_left {
        width: 390px;
        .inose_top {
          font-size: $global-font-size-16;
          line-height: 30px;
          color: #3e3e3e;
          margin-bottom: 35px;
          .img {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .ba_tile {
            display: flex;
            .hui_text {
              color: #8a91b0;
              width: 268px;
              margin-left: 10px;
            }
          }
          .anniu_btn {
            font-size: $global-font-size-16;
            color: #2171f6;
            cursor: pointer;
          }
          .other_1 {
            display: flex;
            align-items: center;
            flex-direction: column;
            .name {
              font-size: $global-font-size-18;
            }
            .button {
              margin-top: 20px;
              justify-content: center;
              display: flex;
              align-items: center;
              width: 136px;
              height: 44px;
              color: #fff;
              font-size: $global-font-size-16;
              background-image: linear-gradient(90deg, #0455da 0%, #378cff 100%), linear-gradient(#0455da, #0455da);
              background-blend-mode: normal, normal;
              border-radius: 4px;
            }
          }
          .wenbe_text {
            font-size: $global-font-size-16;
            line-height: 26px;
            color: #8a91b0;
          }
        }
      }
      .info_right {
        text-align: center;
        min-width: 770px;
        margin-left: 35px;
        min-height: 417px;
        position: relative;
        .right_title {
          font-size: 20px;
          line-height: 45px;
          color: #303030;
          max-width: 530px;
          margin: 0 auto;
          .type {
            position: absolute;
            left: 0;
            top: 9px;
            width: 83px;
            height: 30px;
            background-image: linear-gradient(#fff 0%, #fff9e7 100%), linear-gradient(#fff 0%, #fff9e7 100%);
            border: 1px solid #ff6600;
            font-size: 16px;
            line-height: 30px;
            color: #ff6600;
            text-align: center;
          }
        }
        .pdf_item {
          position: relative;
          width: 770px;
          height: 464px;
          margin: 10px 0 0 0;
          .pdf_type {
            text-align: left;
            font-size: 23px;
            line-height: 44px;
            color: #414141;
            padding-left: 78px;
            padding-top: 34px;
          }
          .title {
            padding: 0px 66px 0 88px;
            height: 74px;
            font-size: 30px;
            font-weight: bold;
            line-height: 38px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 68px;
            .ellipsis-3 {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              -webkit-line-clamp: 3;
            }
          }
          .address {
            margin-top: 138px;
            padding: 0 65px 0 0;
            font-size: 26px;
            color: #282828;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
          .biaoqian {
            padding: 20px 70px 0 5px;
            text-align: right;
            overflow: hidden;
            span {
              padding: 0 5px;
              background-color: #f5f8ff;
              border-radius: 3px;
              border: solid 1px #d2daec;
              font-size: $global-font-size-18;
              line-height: 26px;
              color: #7d8aaa;
              margin-right: 2px;
            }
          }
        }
        .image0 {
          background: url(/images/project/item_1.jpg) no-repeat;
        }
        .image1 {
          background: url(/images/project/item_2.jpg) no-repeat;
        }
        .image2 {
          background: url(/images/project/item_3.jpg) no-repeat;
        }
        .image3 {
          background: url(/images/project/item_4.jpg) no-repeat;
        }
        .image4 {
          background: url(/images/project/item_5.jpg) no-repeat;
        }
        .image5 {
          background: url(/images/project/item_6.jpg) no-repeat;
        }
        .image6 {
          background: url(/images/project/item_7.jpg) no-repeat;
        }
        .image7 {
          background: url(/images/project/item_9.jpg) no-repeat;
        }
      }
    }
    .info_3 {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      .right_1 {
        width: 50%;
        background-color: #ffffff;
        box-shadow: 0px 0px 16px 0px rgba(14, 5, 10, 0.11);
        border: solid 1px #e1e6f0;
        border-radius: 5px;
        .title {
          padding: 0 28px 0 24px;
          height: 52px;
          line-height: 52px;
          background-image: linear-gradient(90deg, #2070f6 0%, #629bf5 100%), linear-gradient(#1e6fff, #1e6fff);
          background-blend-mode: normal, normal;
          color: #fff;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .title_1 {
            float: left;
            font-size: $global-font-size-16;
          }
          .title_2 {
            float: right;
            font-size: $global-font-size-14;
          }
        }
        .content_2 {
          margin: 10px 0;
          .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            margin: 10px 12px;
            padding: 12px 10px;
            border-bottom: 1px solid #e1e6f0;
            transition: 0.3s ease-in-out;
            font-size: $global-font-size-16;
            .name {
              display: flex;
              align-items: center;
              .image {
                margin: 6px 5px 0 0;
              }
            }
          }
          .list:hover {
            box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
          }
        }
      }
      .right_1:last-child {
        margin-left: 35px !important;
      }
    }
  }
}
</style>