maochaoying
2 years ago
5 changed files with 228 additions and 0 deletions
-
BINsrc/assets/medical/pro/2.png
-
BINsrc/assets/medical/pro/3.png
-
BINsrc/assets/medical/pro/4.png
-
224src/components/Medical/Product/index.vue
-
4src/views/Medical/index.vue
|
After Width: 500 | Height: 328 | Size: 153 KiB |
|
After Width: 500 | Height: 328 | Size: 95 KiB |
|
After Width: 500 | Height: 328 | Size: 172 KiB |
@ -0,0 +1,224 @@ |
|||||
|
<template> |
||||
|
<div class="product_container"> |
||||
|
<div class="header"> |
||||
|
<p class="left">产品信息</p> |
||||
|
<p class="en">Products</p> |
||||
|
</div> |
||||
|
<div class="cards"> |
||||
|
<div class="card"> |
||||
|
<div class="img_wrap"> |
||||
|
<img :src="A2" class="img" alt="" /> |
||||
|
<div class="modal"> |
||||
|
<div class="title_wrap">清瀚医疗ECMO</div> |
||||
|
<p class="desc"> |
||||
|
超声聚焦治疗是一种无创的局部性治疗方法，以超声波为能源 |
||||
|
利用其可穿透性和可聚焦性，将体外低能量的超声波聚焦于肿 |
||||
|
瘤靶区形成焦斑。 |
||||
|
</p> |
||||
|
<p class="second"> |
||||
|
焦斑温度在0.1秒的瞬间上升到65摄氏度以上，使病灶靶点产生 |
||||
|
凝固性坏死，从而达到治疗目的...... |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="bottom_info"> |
||||
|
<p class="title">超声肿瘤治疗系统</p> |
||||
|
<div class="btn"> |
||||
|
<p class="t">查看详情</p> |
||||
|
<p class="arrow">→</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"></div> |
||||
|
<div class="card"></div> |
||||
|
<div class="card"></div> |
||||
|
<div class="card"></div> |
||||
|
<div class="card"></div> |
||||
|
</div> |
||||
|
<div class="bottom_wrap"> |
||||
|
<div class="btn">查看更多</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import A2 from '@/assets/medical/pro/2.png' |
||||
|
import A3 from '@/assets/medical/pro/3.png' |
||||
|
import A4 from '@/assets/medical/pro/4.png' |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.product_container { |
||||
|
padding: 20px 190px; |
||||
|
.header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background: #f9f9f9; |
||||
|
padding: 20px 38px; |
||||
|
margin-bottom: 20px; |
||||
|
.left { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 26px; |
||||
|
font-weight: 500; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.en { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
.cards { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
grid-template-rows: repeat(2, 1fr); |
||||
|
column-gap: 20px; |
||||
|
row-gap: 20px; |
||||
|
.card { |
||||
|
cursor: pointer; |
||||
|
width: 100%; |
||||
|
height: 448px; |
||||
|
background: #f9f9f9; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.img_wrap { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
.img { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
.modal { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
background: rgba(246, 246, 246, 0.95); |
||||
|
padding: 48px 55px; |
||||
|
box-sizing: border-box; |
||||
|
flex-direction: column; |
||||
|
display: none; |
||||
|
.title_wrap { |
||||
|
width: 177px; |
||||
|
height: 46px; |
||||
|
border-radius: 378px; |
||||
|
opacity: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #ffffff; |
||||
|
background: linear-gradient(90deg, #8af2f9 0%, #09deff 100%); |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
.desc { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #000000; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.second { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bottom_info { |
||||
|
height: 120px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
justify-content: space-between; |
||||
|
border-left: solid 5px #4eb6ff; |
||||
|
padding: 40px 42px; |
||||
|
.title { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 22px; |
||||
|
font-weight: 500; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #4eb6ff; |
||||
|
} |
||||
|
.btn { |
||||
|
width: 150px; |
||||
|
height: 40px; |
||||
|
border-radius: 378px; |
||||
|
opacity: 1; |
||||
|
background: #ffffff; |
||||
|
font-family: 思源黑体; |
||||
|
font-size: 18px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #7d7d7d; |
||||
|
padding: 6px 20px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.arrow { |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&:hover { |
||||
|
.img_wrap { |
||||
|
.modal { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
.bottom_info { |
||||
|
background: #4eb6ff; |
||||
|
.title { |
||||
|
color: #fff; |
||||
|
} |
||||
|
.btn { |
||||
|
background: #fff; |
||||
|
color: #4eb6ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bottom_wrap { |
||||
|
width: 100%; |
||||
|
padding: 52px 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100px; |
||||
|
height: 30px; |
||||
|
background: #f9f9f9; |
||||
|
font-family: 思源黑体; |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #7d7d7d; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue