portal_website/src/views/productCenter/index.vue

<template>
  <div>
    <div class="banner">
      <el-image
        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
        :src="banner"
        fit="contain"></el-image>
      <div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div>
      <el-button type="primary" class="bannerBtn">免费体验</el-button>
      <div class="tabs">
        <div class="content">
          <div class="tab active">物联网平台</div>
          <div class="tab">物联网硬件产品系列</div>
        </div>
      </div>
    </div>
    <platformAdvantages class="platformAdvantages"/>
    <PlatformIntroduction class="platformIntroduction"/>
    <PlatformAdvantages2 class="platformAdvantages2"/>
    <PlatformAdvantages3 class="platformAdvantages3"/>
    <PlatformArchitecture class="platformArchitecture"/>
    <TechnicalArchitecture class="technicalArchitecture"/>
    <platformFeatures class="platformFeatures"/>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'
import PlatformAdvantages from './platformAdvantages'
import PlatformIntroduction from './platformIntroduction'
import PlatformAdvantages2 from './platformAdvantages2'
import PlatformAdvantages3 from './platformAdvantages3'
import PlatformArchitecture from './platformArchitecture'
import TechnicalArchitecture from './technicalArchitecture'
import PlatformFeatures from './platformFeatures'
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'

export default {
  name: 'ProductCenter',
  components: {
    PlatformAdvantages,
    PlatformIntroduction,
    PlatformAdvantages2,
    PlatformAdvantages3,
    PlatformArchitecture,
    TechnicalArchitecture,
    PlatformFeatures,
    ContactUs,
    Copyright
  },
  data() {
    return {
      banner
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 45%;
    text-align: left;
    font-size: 1.4vw;
    color: @standard-color;
    line-height: 2.5vw;
    letter-spacing: 4px;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 50%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(50% - 2px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}

.platformAdvantages {
  width: 100%;
}

.platformIntroduction {
  width: 100%;
  background-color: #f4f9ff;
}

.platformAdvantages2 {
  width: 100%;
}

.platformAdvantages3 {
  width: 100%;
  background-color: #f6f7fb;
}

.platformArchitecture {
  width: 100%;
}

.technicalArchitecture {
  width: 100%;
  background-color: #f4f9ff;
}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}
</style>