portal_website/src/views/industrySolutions/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>
    </div>
    <div style="width: 75vw;margin:0 auto;margin-top: 2vw; ">
      <template v-for="i in tabsList">
        <div class="card">
          <!-- 左侧图片 -->
          <div class="card-img" :style="{backgroundImage: 'url(' + i.img + ') '}">
          </div>

          <!-- 右侧内容 -->
          <div class="card-content">
            <h3 class="card-title">{{ i.title }}</h3>
            <!--            <p class="card-subtitle">{{ i.value }}</p>-->
            <div class="card-subtitle1"></div>
            <p class="card-desc">{{ i.info }}</p>
            <div class="card-arrow" @click="$router.push('/test?id=' + i.id)">
              →
<!--              <i class="arrow">→</i>-->
            </div>
          </div>
        </div>
      </template>
    </div>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {selectMenuTree} from "@/api/hwWebMenu";

export default {
  name: 'ContactUs1',
  components: {
    ContactUs,
    Copyright
  },
  data() {
    return {
      banner:'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
      bannerTitle: '',
      tabsActive: 0,
      tabsList: [
        {
          title: '智能轮胎',
          value: '智能轮胎介绍',
          info: '智能轮胎信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '5'
        },
        {
          title: '轮胎工厂',
          value: '轮胎工厂介绍',
          info: '轮胎工厂信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '18'
        },
        {
          title: '快递物流',
          value: '快递物流介绍',
          info: '快递物流信息',
          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8717_20250822141810A130.jpg',
          id: '19'
        },
        {
          title: '畜牧食品',
          value: '畜牧食品介绍',
          info: '在畜牧屠宰行业，RFID助力车间自动化，智能化生产，合作客户包括双汇、正大、牧原等',
          img: 'http://1.13.177.47:9665/statics/2025/08/22/12_20250822135124A121.png',
          id: '20'
        },
        {
          title: '新能源',
          value: '新能源介绍',
          info: '新能源信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '21'
        },
        {
          title: '智能制造',
          value: '智能制造介绍',
          info: '智能制造信息',
          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8736_20250822142617A134.jpg',
          id: '22'
        },
        {
          title: '工业物联',
          value: '工业物联介绍',
          info: '工业物联信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '23'
        },
      ],
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getData() {
      selectMenuTree().then(e=>{
        let data = e.data.find(v=>v.webMenuId ===4)?.children
        this.tabsList = data.map(v=>{
          return {
            title:v.webMenuName,
            value:v.webMenuName+'介绍',
            info:v.webMenuName+'信息',
            id:v.webMenuId
          }
        })
        console.log(data)
      })
    }
  }
}
</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: 25%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

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

.companyProfile {
  width: 100%;
}

.enterpriseQualification {
  width: 100%;
  position: relative;
}

.teamStyle {
  width: 100%;
}

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

.copyright {
  width: 100%;
  background-color: #1d3348;
}
.card{
  width: calc(31% - 2px);
  display: inline-block;
  height: 400px;
  position: relative;
  border: 1px solid #0001;
  &:nth-child(3n){
    margin-left: 2%;
  }

  &:nth-child(3n-1) {
    margin-left: 2%;
  }

  .card-img{
    position: absolute;
    //opacity: 0.4;
    width: 40%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    ///* 设置透明蒙版 */
    //-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    //-webkit-mask-repeat: no-repeat;
    //-webkit-mask-size: 100% 100%;
    //
    //mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    //mask-repeat: no-repeat;
    //mask-size: 100% 100%;
  }


  .card-title{

    position: absolute;
    left: 45%;
    top: 40px;
    font-size: 24px;
  }
  .card-subtitle{
    position: absolute;
    left: 45%;
    top: 80px;
    width: 70%;
    font-size: 18px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-subtitle1 {
    position: absolute;
    top: 115px;
    left: 45%;
    width: 5%;
    height: 3px;
    background-color: #2e445c;
  }
  .card-desc{
    width: 70%;
    position: absolute;
    left: 45%;
    top: 120px;
    text-align: left;
    font-size: 14px;
    color: #0005;
  }
  
  .card-arrow{
    position: absolute;
    right: 30px;
    bottom: 30px;
    height: 20px;
    width: 20px;
    border: 2px solid #0009;
    border-radius: 50%;
    padding: 8px;
    line-height: 17px;
    transition: all 0.3s;
    cursor: pointer;
    &:hover{
      background-color: #409EFF;
      color:#fff;
      border-color: #fff
    }
  }
}
</style>