subsea-side-website/src/components/detail/RelativeMerits.vue

<template>
  <div class="relative_merits_container">
    <HeadLine
      title="优缺点对比"
      line1="根据一线工程师的使用感受，设计的产品，易用性很高"
    />
    <div class="card_container">
      <div class="card left">
        <div class="btn new_btn">新型设计</div>
        <img :src="Pic2" alt="img" class="img1" />
        <Info
          :isYes="true"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="true"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="true"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="true"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="true"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
      </div>
      <div class="card right">
        <div class="btn old_btn">传统设计</div>
        <img :src="Pic1" alt="img" class="img2" />
        <Info
          :isYes="false"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="false"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="false"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="false"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
        <Info
          :isYes="false"
          info="根据一线工程师的使用感受，设计的产品，易用性很高"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadLine from '../HeadLine'
import Pic1 from '@/static/img/zhongxin/duibi1.png'
import Pic2 from '@/static/img/zhongxin/duibi2.png'
import Info from './Info'
</script>

<style lang="scss" scoped>
.relative_merits_container {
  padding: 90px 0 0 0;
  margin: 0 auto;
  .card_container {
    width: 76vw;
    margin: 0 auto;
    margin-top: 90px;
    position: relative;
    display: flex;
    .card {
      flex: 1;
      padding: 44px 67px 67px 67px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .btn {
        width: 217px;
        height: 55px;
        border-radius: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 65px;
      }
      .img2 {
        width: 500px;
        height: 365px;
      }
      .img1 {
        width: 580px;
        height: 365px;
      }
      .new_btn {
        background: $btn-gradient;
      }
      .old_btn {
        background: #cbcbcb;
      }
    }
    .left {
      background: #f6f6f6;
    }
    .right {
      background: #f1f1f1;
    }
  }
}
</style>