Browse Source

home

master
maochaoying 2 years ago
parent
commit
914c51ab94
  1. BIN
      src/assets/medical/pro/2.png
  2. BIN
      src/assets/medical/pro/3.png
  3. BIN
      src/assets/medical/pro/4.png
  4. 224
      src/components/Medical/Product/index.vue
  5. 4
      src/views/Medical/index.vue

BIN
src/assets/medical/pro/2.png

After

Width: 500  |  Height: 328  |  Size: 153 KiB

BIN
src/assets/medical/pro/3.png

After

Width: 500  |  Height: 328  |  Size: 95 KiB

BIN
src/assets/medical/pro/4.png

After

Width: 500  |  Height: 328  |  Size: 172 KiB

224
src/components/Medical/Product/index.vue

@ -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>

4
src/views/Medical/index.vue

@ -2,12 +2,16 @@
<div class="medical_container">
<Header :active="true" />
<HomeScreen />
<Product />
<NewBottom />
</div>
</template>
<script setup>
import Header from 'cpns/Medical/Header'
import HomeScreen from 'cpns/Medical/HomeScreen'
import Product from 'cpns/Medical/Product'
import NewBottom from 'cpns/NewBottom'
import { onMounted } from 'vue'
onMounted(() => {

Loading…
Cancel
Save