hi-ucs/front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue

<!-- 应用案例 -->
<template>
  <div class="application-scenarios-and-case" v-if="flag">
    <div
      class="application-scenarios-and-case-son"
      v-for="item in dataFrom"
      :key="item.title"
    >
      <div class="title">
        <DetalsTitle
          :title="item.title"
          :type="item.englishTitle"
        ></DetalsTitle>
      </div>
      <div class="tab">
        <div
          v-for="(itemSonTitle, indexSonTitle) in item.content"
          :key="itemSonTitle.title"
          @click="tabSwitch(itemSonTitle.title, item.title)"
          class="tab-son"
          :class="tabIndexClass(indexSonTitle, item.title, item.content)"
        >
          <div
            class="tab-top"
            :class="
              tabInitialize(item.title) == itemSonTitle.title
                ? 'tab-top-down'
                : ''
            "
          >
            {{ itemSonTitle.title }}
          </div>
          <div
            class="tab-bottom"
            v-if="tabInitialize(item.title) == itemSonTitle.title"
          ></div>
        </div>
      </div>
      <template v-for="itemSonTitle in item.content" :key="itemSonTitle">
        <div
          class="content"
          v-if="tabInitialize(item.title) == itemSonTitle.title"
        >
          <div :class="contentLocation(0, item.title)">
            <div
              :class="
                item.title == '应用场景'
                  ? 'content-left-scene'
                  : 'content-left-case'
              "
            ></div>
          </div>
          <div :class="contentLocation(1, item.title)">
            <div
              :class="
                item.title == '应用场景'
                  ? 'content-right-scene'
                  : 'content-right-case'
              "
            >
              <div class="content-top">{{ itemSonTitle.title }}</div>
              <div class="content-bottom">{{ itemSonTitle.content }}</div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
  import { ref, defineProps, watch } from 'vue'
  let dataFrom = ref([
    {
      title: '应用案例',
      englishTitle: 'CASE',
      content: [
        {
          title: '应用案例一',
          content:
            '应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
        },
        {
          title: '应用案例二',
          content:
            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
        },
        {
          title: '应用案例三',
          content:
            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
        },
        {
          title: '应用案例四',
          content:
            '应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
        },
        {
          title: '应用案例五',
          content:
            '应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
        },
        {
          title: '应用案例六',
          content:
            '应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
        },
      ],
    },
  ])
  const flag = ref(true)
  //数据初始化
  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
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
        if (!obj) {
          flag.value = false
        }
      }
    }
  )
  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切换方法
  let tabindex = ref('场景说明一')
  let tabindexCase = ref('应用案例一')
  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
  function tabInitialize(title) {
    if (title == '应用场景') {
      return tabindex.value
    } else {
      return tabindexCase.value
    }
  }
  //tab切换点击事件
  function tabSwitch(name, title) {
    if (title == '应用场景') {
      tabindex.value = name
      return tabindex.value
    } else {
      tabindexCase.value = name
      return tabindexCase.value
    }
  }
  //内容位置初始化
  function contentLocation(index, title) {
    log(index, title)
    if (index == 0) {
      if (title == '应用场景') {
        return 'content-right'
      } else {
        return 'content-left'
      }
    } else {
      if (title == '应用场景') {
        return 'content-left'
      } 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: 0.8rem;
      padding-bottom: 0.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: unset;
      .tab {
        max-width: 13rem;
        overflow-x: auto;
        display: flex;
        justify-content: center;
        color: #808080;
        border-bottom: 0.01rem #e4e6f5 solid;
        margin-top: 0.45rem;
        margin-bottom: 0.4rem;
        cursor: pointer;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        .tab-son {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 1rem;
          .tab-top {
            min-width: 1.2rem;
            font-size: 0.24rem;
            line-height: 0.24rem;
            margin-bottom: 0.2rem;
          }
          .tab-top-down {
            min-width: 1.2rem;
            color: #526aff;
            margin-bottom: 0.16rem;
          }
          .tab-bottom {
            height: 0.04rem;
            width: 0.6rem;
            background: #526aff;
          }
        }
        .tab-son-class {
          margin-left: 4.3rem;
          margin-bottom: 0.02rem;
        }
        .tab-son-class-two {
          margin-left: 2.3rem;
          margin-bottom: 0.02rem;
        }
        .tab-son:last-child {
          margin-right: 0rem;
        }
      }
      .tab::-webkit-scrollbar-thumb {
        background: rgba(82, 106, 255, 0.4);
      }
      .content {
        display: flex;
        position: relative;
        width: 100%;
        min-width: 13rem;
        height: 3.4rem;
        .content-left {
          position: absolute;
          left: 0;
        }
        .content-right {
          position: absolute;
          right: 0;
        }
        .content-right-scene,
        .content-right-case {
          width: 6.2rem;
          height: 3.4rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .content-left-scene,
        .content-left-case {
          height: 3.4rem;
          width: 6.35rem;
          border-radius: 0.1rem;
          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
          background-position: center;
          background-size: 6.35rem 3.4rem;
        }
        .content-top {
          font-size: 0.22rem;
          line-height: 0.22rem;
          color: #000000;
          margin-bottom: 0.35rem;
        }
        .content-bottom {
          font-size: 0.18rem;
          color: #999999;
          line-height: 0.26rem;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
      }
    }
    .application-scenarios-and-case-son:first-child {
      padding-top: 1rem;
    }
  }
</style>