pc-design/src/views/DesignDetail/index.vue

<template>
  <div class="design_detail_container">
    <Header :active="true" />
    <img :src="getTitleImg()" class="big_img" alt="" />
    <div class="cards_case_container">
      <div
        class="card"
        @click="showDetailModal(item.id)"
        v-for="item in case_detail_list[activeTab]"
        :key="item"
      >
        <div class="title">{{ item.title }}</div>
        <div class="img_wrap">
          <img v-lazy="item.thumb" class="img" alt="" />
        </div>
        <div class="bottom_wrap">
          <!-- <p class="en"></p> -->
          <div class="detail">案例详情</div>
        </div>
      </div>
      <!-- <div class="more_card">
        <img class="more_img" :src="More" alt="" />
        <div class="modal"></div>
      </div> -->
      <div class="btns_box">
        <div :class="activeClass('1')" @click="changeDetail('1')">
          医疗健康
          <p class="line" v-if="activeTab == '1'"></p>
        </div>
        <div :class="activeClass('2')" @click="changeDetail('2')">
          智能硬件
          <p class="line" v-if="activeTab == '2'"></p>
        </div>
        <div :class="activeClass('3')" @click="changeDetail('3')">
          工业设备
          <p class="line" v-if="activeTab == '3'"></p>
        </div>
        <div :class="activeClass('4')" @click="changeDetail('4')">
          高铁设备
          <p class="line" v-if="activeTab == '4'"></p>
        </div>
        <div :class="activeClass('5')" @click="changeDetail('5')">
          户外设备
          <p class="line" v-if="activeTab == '5'"></p>
        </div>
        <div :class="activeClass('6')" @click="changeDetail('6')">
          特种设备
          <p class="line" v-if="activeTab == '6'"></p>
        </div>
        <div :class="activeClass('7')" @click="changeDetail('7')">
          智能家居
          <p class="line" v-if="activeTab == '7'"></p>
        </div>
        <div :class="activeClass('8')" @click="changeDetail('8')">
          实验仪器
          <p class="line" v-if="activeTab == '8'"></p>
        </div>
        <div :class="activeClass('9')" @click="changeDetail('9')">
          消费电子
          <p class="line" v-if="activeTab == '9'"></p>
        </div>
      </div>
    </div>
    <Bottom />
    <DetailModal
      v-if="showModalVisible"
      :hiddenDetailModal="hiddenDetailModal"
      :productInfo="productInfo"
    />
  </div>
</template>

<script setup>
import Header from 'cpns/design/Header'
import A1 from '@/assets/design/detail/1.png'
import A2 from '@/assets/design/detail/2.png'
import A3 from '@/assets/design/detail/3.png'
import A4 from '@/assets/design/detail/4.png'
import A5 from '@/assets/design/detail/5.png'
import A6 from '@/assets/design/detail/6.png'
import A7 from '@/assets/design/detail/7.png'
import A8 from '@/assets/design/detail/8.png'
import A9 from '@/assets/design/detail/9.png'
import More from '@/assets/design/detail/more.png'
import Bottom from 'cpns/NewBottomWhite.vue'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import DetailModal from 'cpns/design/DetailModal'
import { case_detail_img_data } from '@/mock/case'
import { case_detail_list } from '@/mock/case_industry'

const showModalVisible = ref(false)

const activeClass = i => {
  if (activeTab.value == i) {
    return 'btn active'
  }
  return 'btn'
}

const route = useRoute()

const activeTab = ref('1')

const changeDetail = index => {
  activeTab.value = index
}

const getTitleImg = () => {
  const val = activeTab.value
  if (val == '1') {
    return A1
  }
  if (val == '2') {
    return A2
  }
  if (val == '3') {
    return A3
  }
  if (val == '4') {
    return A4
  }
  if (val == '5') {
    return A5
  }
  if (val == '6') {
    return A6
  }
  if (val == '7') {
    return A7
  }
  if (val == '8') {
    return A8
  }
  if (val == '9') {
    return A9
  }
}

const productInfo = ref({})
const showDetailModal = id => {
  // 取消html的滚动条
  const rootTag = document.getElementById('iflytop')
  rootTag.style.overflow = 'hidden'
  rootTag.style.height = '100%'
  showModalVisible.value = true
  // 根据activeTab和id确定详情数据
  productInfo.value = case_detail_list[activeTab.value][id]
}

const hiddenDetailModal = () => {
  // 恢复html的滚动条
  const rootTag = document.getElementById('iflytop')
  rootTag.style['overflow-y'] = 'scroll'
  rootTag.style['overflow-x'] = 'hidden'
  rootTag.style.height = 'auto'
  productInfo.value = {}
  showModalVisible.value = false
}

onMounted(() => {
  document.body.scrollTop = document.documentElement.scrollTop = 0
  if (route.query?.t) {
    activeTab.value = route.query?.t
  }
})

watch(
  () => route.query?.t,
  () => {
    activeTab.value = route.query?.t
  },
  { immediate: true, deep: true },
)
</script>

<style lang="scss" scoped>
.design_detail_container {
  .big_img {
    width: 100vw;
    height: auto;
  }
  .cards_case_container {
    background: #f6f6f6;
    padding: 110px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 40px;
    position: relative;
    .btns_box {
      position: absolute;
      left: 110px;
      right: 110px;
      top: -53px;
      height: 106px;
      border-radius: 483px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .btn {
        font-family: Source Han Sans CN;
        font-size: 18px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #030303;
        cursor: pointer;
        position: relative;
        padding: 9px 26px;
        .line {
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 38px;
          height: 2px;
          border-radius: 276px;
          background: #2a4ee1;
          transform: translateX(-50%);
        }
        transition-property: all;
        transition-duration: 0.1s;
        animation-fill-mode: forwards;
        &:hover {
          // transform: scale(1.1);
          color: $theme-color;
          font-weight: bold;
        }
      }
      .active {
        color: #2a4ee1;
      }
    }
    .card {
      border-radius: 21px;
      width: 100%;
      background: #ffffff;
      box-sizing: border-box;
      cursor: pointer;
      padding: 38px 43px 23px 43px;
      .title {
        white-space: nowrap;
        font-family: Source Han Sans CN;
        font-size: 22px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #787878;
        margin-bottom: 51px;
      }
      .img_wrap {
        height: 306px;
        width: 100%;
        margin-bottom: 83px;
        display: flex;
        justify-content: center;
        .img {
          height: 306px;
          width: 284px;
          border-radius: 20px;
          object-fit: cover;
          transition-property: all;
          transition-duration: 0.7s;
          animation-fill-mode: forwards;
        }
      }
      .bottom_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .en {
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          color: #000000;
          white-space: nowrap;
        }
        .detail {
          transition-property: all;
          transition-duration: 0.2s;
          animation-fill-mode: forwards;
          white-space: nowrap;
          padding: 11px 40px;
          border-radius: 324px;
          background: #f6f6f6;
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: center;
          font-family: Source Han Sans CN;
          font-size: 16px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0.1em;
          color: #787878;
          cursor: pointer;
        }
      }
      &:hover {
        .bottom_wrap {
          .detail {
            background: #2a4ee1;
            color: #ffffff;
          }
        }
        .img_wrap {
          .img {
            transform: translateY(-20px);
          }
        }
      }
    }
    .more_card {
      border-radius: 21px;
      width: 100%;
      background: #000;
      height: 578px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .more_img {
        height: 578px;
        object-fit: cover;
      }
      .modal {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        box-shadow: inset 0px 0px 100px 0px #000000;
      }
      &:hover {
        .modal {
          opacity: 1;
        }
      }
    }
  }
}
</style>