generated from maochaoying/dreamworks-frontend-template
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.1 KiB
118 lines
3.1 KiB
<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>
|