portal_website/src/views/contactUs/enterpriseQualification.vue

<template>
    <div>
        <div class="title">ENTERPRISE QUALIFICATION</div>
        <div class="subTitle">企业资质</div>
        <div class="bg">
            <div class="list1">
                <div class="item">国家级专精特新“小巨人”企业</div>
                <div class="item">国家高新技术企业</div>
                <div class="item">青岛市专精特新中小企业</div>
                <div class="item">青岛市雏鹰企业</div>
                <div class="item">科技型中小企业</div>
                <div class="item">青岛市“百千万”工程千帆企业</div>
                <div class="item">获批山东省中小企业创新能力提升工程项目</div>
            </div>
            <div class="list2">
                <div class="item">获批青岛第四批“人才特区”人才项目</div>
                <div class="item">第四届“创业齐鲁 共赢未来”高层次人才创业大赛（创业企业类）优胜奖</div>
                <div class="item">第十届中国创新创业大赛青岛赛区二等奖</div>
                <div class="item">第十一届LT中国物流技术奖-创新应用奖</div>
                <div class="item">通过ISO 9001质量管理体系认证</div>
                <div class="item">轮胎用RFID电子标签产品获得ROSH认证</div>
                <div class="item">轮胎用RFID电子标签自动化设备通过CE认证</div>
            </div>
        </div>
    </div>
</template>

<script>
import banner from '@/assets/image/banner.png'

export default {
    name: 'ProductCenter',
    data() {
        return {
            banner,
        }
    },
    methods: {}
}
</script>

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

.content {
  width: 70vw;
  margin: 0 auto;
}

.title {
  padding-top: 4.2vw;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  letter-spacing: 2px;
  color: #fff6;
}

.subTitle {
  margin-top: 0.4vw;
  width: 100%;
  text-align: center;
  font-size: 1.9vw;
  letter-spacing: 2px;
  color: #fff;
}

.bg {
  width: 100%;
  height: 23.3vw;
  background-color: @standard-color;
  position: absolute;
  top: 0;
  z-index: -1;

  .list1 {
    position: absolute;
    box-shadow: 0 0 3px #0002;
    top: 100%;
    left: 50%;
    width: 24.8vw;
    height: 20.8vw;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(calc(-100% - 2vw), -9.5vw);
  }

  .list2 {
    position: absolute;
    box-shadow: 0 0 3px #0002;
    top: 100%;
    left: 50%;
    width: 24.8vw;
    height: 20.8vw;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(2vw, -9.5vw);
  }
  .list1,.list2{
    text-align: left;
    padding: 1.1vw 2.1vw ;
    .item{
      width: 100%;
      line-height: 2.5vw;
      font-size: 1vw;
      letter-spacing: 1px;
    }
  }
}

</style>