hi-ucs/front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue

<!-- 应用场景-->
<template>
  <div class="application-scenarios-and-case" v-if="flag">
    <div class="application-scenarios-and-case-son">
      <!-- {{ dataFrom.attrType }} -->
      <div class="title">
        <DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
      </div>
      <div class="tab">
        <div
          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
          :key="itemSonTitle.name"
          @click="tabSwitch(itemSonTitle.name)"
          class="tab-son"
          :class="
            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
          "
        >
          <a-tooltip>
            <template #title>{{ itemSonTitle.name }}</template>
            <div
              class="tab-top"
              :class="
                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
              "
            >
              {{ itemSonTitle.name }}
            </div>
          </a-tooltip>
          <div
            class="tab-bottom"
            v-if="tabInitialize() == itemSonTitle.name"
          ></div>
        </div>
      </div>
      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
        <div class="content" v-if="tabindex == itemSonTitle.name">
          <div class="content-left">
            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
            <a-image
              :width="635"
              :height="340"
              :src="itemSonTitle.img"
              v-if="itemSonTitle.img"
            ></a-image>
          </div>
          <div :class="contentLocation(1, dataFrom.attrType)">
            <div class="content-right-scene" :class="'content-right-case'">
              <div class="content-top">{{ itemSonTitle.name }}</div>
              <a-tooltip>
                <template #title>{{ itemSonTitle.desc }}</template>
                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
              </a-tooltip>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
  import { ref, defineProps, watch } from 'vue'
  const flag = ref(true)
  let dataFrom = ref([])
  // tab切换方法
  let tabindex = ref('场景说明一')
  //数据初始化
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '应用场景'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      obj.attrValue = JSON.parse(obj.attrValue)
      dataFrom.value = obj
      tabindex.value = dataFrom.value.attrValue[0].name
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
        if (!obj) {
          flag.value = false
        } else {
          obj.attrValue = JSON.parse(obj.attrValue)
          dataFrom.value = obj
          tabindex.value = dataFrom.value.attrValue[0].name
        }
      }
    }
  )
  const { log } = console
  //滚动条样式
  function tabIndexClass(index, title, content) {
    if (title == '应用场景' && index == 0 && content.length > 6) {
      return 'tab-son-class'
    }
    if (title == '应用案例' && index == 0 && content.length > 6) {
      return 'tab-son-class-two'
    }
  }
  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
  function tabInitialize() {
    return tabindex.value
  }
  //tab切换点击事件
  function tabSwitch(name) {
    tabindex.value = name
    return tabindex.value
  }
  //内容位置初始化
  function contentLocation(index, title) {
    log(index, title)
    if (index == 0) {
      if (title == '应用场景') {
        return 'content-left'
      } else {
        return 'content-left'
      }
    } else {
      if (title == '应用场景') {
        return 'content-right'
      } else {
        return 'content-right'
      }
    }
  }
</script>

<style lang="less" scoped>
  .application-scenarios-and-case {
    width: 100%;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: unset;
    .application-scenarios-and-case-son {
      padding-top: 80px;
      padding-bottom: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: unset;
      .tab {
        max-width: 1300px;
        overflow-x: auto;
        display: flex;
        justify-content: center;
        color: #808080;
        border-bottom: 1px #e4e6f5 solid;
        margin-top: 45px;
        margin-bottom: 40px;
        cursor: pointer;
        padding-left: 40px;
        padding-right: 40px;
        .tab-son {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 100px;
          .tab-top {
            min-width: 120px;
            font-size: 24px;
            line-height: 24px;
            margin-bottom: 20px;
            max-width: 200px;
            height: 24px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .tab-top-down {
            min-width: 120px;
            color: #526aff;
            margin-bottom: 16px;
          }
          .tab-bottom {
            height: 4px;
            width: 60px;
            background: #526aff;
          }
        }
        .tab-son-class {
          margin-left: 430px;
          margin-bottom: 2px;
        }
        .tab-son-class-two {
          margin-left: 230px;
          margin-bottom: 2px;
        }
        .tab-son:last-child {
          margin-right: 0px;
        }
      }
      .tab::-webkit-scrollbar-thumb {
        background: rgba(82, 106, 255, 0.4);
      }
      .content {
        display: flex;
        position: relative;
        width: 100%;
        min-width: 1300px;
        height: 340px;
        .content-left {
          position: absolute;
          left: 0;
          min-width: 620px;
          // text-align: center;
          .content-top {
            text-align: left;
          }
        }
        .content-right {
          width: 620px;
          height: 340px;
          position: absolute;
          right: 0;
          display: flex;
          justify-content: center;
          :deep(.ant-image-img) {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .content-right-scene,
        .content-right-case {
          width: 620px;
          height: 340px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .content-left-scene,
        .content-left-case {
          height: 340px;
          width: 635px;
          border-radius: 10px;
          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
          background-position: center;
          background-size: 635px 340px;
        }
        .content-top {
          font-size: 22px;
          line-height: 22px;
          color: #000000;
          margin-bottom: 35px;
        }
        .content-bottom {
          font-size: 18px;
          color: #999999;
          line-height: 26px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
        }
      }
    }
    .application-scenarios-and-case-son:first-child {
      padding-top: 100px;
    }
  }
</style>