maochaoying
2 years ago
10 changed files with 342 additions and 129 deletions
-
BINsrc/assets/medical/2.png
-
BINsrc/assets/medical/case/1.png
-
BINsrc/assets/medical/case/2.png
-
BINsrc/assets/medical/param/1.png
-
10src/components/Medical/Header/index.vue
-
31src/components/Medical/HeaderLine/index.vue
-
12src/components/Medical/Info/index.vue
-
14src/components/Medical/Parameters/index.vue
-
158src/views/MedicalDetail copy/index.vue
-
244src/views/MedicalDetail/index.vue
|
After Width: 1920 | Height: 440 | Size: 289 KiB |
|
After Width: 325 | Height: 221 | Size: 44 KiB |
|
After Width: 790 | Height: 440 | Size: 161 KiB |
|
After Width: 1540 | Height: 620 | Size: 608 KiB |
@ -0,0 +1,31 @@ |
|||||
|
<template> |
||||
|
<div class="header_line_container"> |
||||
|
<p class="title">{{ title }}</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
const props = defineProps({ |
||||
|
title: { |
||||
|
type: String, |
||||
|
}, |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.header_line_container { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 61px 0 40px 0; |
||||
|
.title { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 26px; |
||||
|
font-weight: 500; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0em; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,12 @@ |
|||||
|
<template> |
||||
|
<div class="info_container"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.info_container { |
||||
|
height: 620px; |
||||
|
background: #f9f9f9; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,14 @@ |
|||||
|
<template> |
||||
|
<div class="product_param_container">123</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.product_param_container { |
||||
|
background: url(../../../assets/medical/param/1.png) no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
height: 620px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,158 @@ |
|||||
|
<template> |
||||
|
<div class="medical_container"> |
||||
|
<Header :active="true" /> |
||||
|
<div |
||||
|
class="card" |
||||
|
v-for="(item, index) in case_detail_list[1]" |
||||
|
:key="index" |
||||
|
@click="showDetailModal(1, index)" |
||||
|
> |
||||
|
<div class="left"> |
||||
|
<div v-for="(ite, ind) in swiperList[index].slice(0, 3)" :key="ind"> |
||||
|
<img class="img" :src="ite.picUrl" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<h1 class="title">{{ item.title }}</h1> |
||||
|
<div class="desc" v-html="item.detailList?.topText"></div> |
||||
|
<div class="btn_wrap"> |
||||
|
<div class="btn"> |
||||
|
<span class="text">查看详情</span> |
||||
|
<svg |
||||
|
xmlns="http://www.w3.org/2000/svg" |
||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" |
||||
|
fill="none" |
||||
|
version="1.1" |
||||
|
width="20" |
||||
|
height="4" |
||||
|
viewBox="0 0 20 4" |
||||
|
> |
||||
|
<g> |
||||
|
<path |
||||
|
d="M19.9922,3.41357C20.0475,3.71869,19.8013,3.998,19.4754,4L0.524717,4C0.234187,4.00028,-0.00116205,3.77604,0.00000432898,3.50006C0.00000432898,3.2236,0.238414,2.99963,0.524717,2.99963L18.3818,2.99963L16.1219,0.851393C15.9164,0.656325,15.9171,0.339718,16.1235,0.145482C16.3287,-0.0494938,16.6655,-0.0469936,16.8661,0.143982L19.8464,2.97713C19.9717,3.09611,20.0201,3.25959,19.9922,3.41357Z" |
||||
|
fill="#FFFFFF" |
||||
|
fill-opacity="1" |
||||
|
/> |
||||
|
</g> |
||||
|
</svg> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<DetailModal |
||||
|
v-if="showModalVisible" |
||||
|
:hiddenDetailModal="hiddenDetailModal" |
||||
|
:productInfo="productInfo" |
||||
|
/> |
||||
|
</div> |
||||
|
<Bottom /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import DetailModal from 'cpns/design/DetailModal' |
||||
|
import Header from 'cpns/Medical/Header' |
||||
|
import Bottom from 'cpns/NewBottom.vue' |
||||
|
import { ref } from 'vue' |
||||
|
import { case_detail_list } from '@/mock/case_industry' |
||||
|
import { swiperList } from '@/mock/case_detail/01.js' |
||||
|
import { onMounted } from 'vue' |
||||
|
|
||||
|
onMounted(() => { |
||||
|
document.body.scrollTop = document.documentElement.scrollTop = 0 |
||||
|
}) |
||||
|
const showModalVisible = ref(false) |
||||
|
const productInfo = ref({}) |
||||
|
|
||||
|
const showDetailModal = (id1, id2) => { |
||||
|
// 取消html的滚动条 |
||||
|
const rootTag = document.getElementById('iflytop') |
||||
|
rootTag.style.overflow = 'hidden' |
||||
|
rootTag.style.height = '100%' |
||||
|
showModalVisible.value = true |
||||
|
// 根据activeTab和id确定详情数据 |
||||
|
productInfo.value = case_detail_list[id1][id2] |
||||
|
} |
||||
|
|
||||
|
const hiddenDetailModal = () => { |
||||
|
// 恢复html的滚动条 |
||||
|
const rootTag = document.getElementById('iflytop') |
||||
|
rootTag.style['overflow-y'] = 'scroll' |
||||
|
rootTag.style['overflow-x'] = 'hidden' |
||||
|
rootTag.style.height = 'auto' |
||||
|
productInfo.value = {} |
||||
|
showModalVisible.value = false |
||||
|
} |
||||
|
|
||||
|
const showModal = () => {} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.medical_container { |
||||
|
padding: 123px 67px 67px 67px; |
||||
|
min-height: 100vh; |
||||
|
background: #f6f6f6; |
||||
|
.card { |
||||
|
background: #ffffff; |
||||
|
padding: 36px 64px 36px 36px; |
||||
|
display: flex; |
||||
|
margin-bottom: 40px; |
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.img { |
||||
|
width: 278px; |
||||
|
height: 278px; |
||||
|
background: #d8d8d8; |
||||
|
margin-right: 40px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
.right { |
||||
|
flex: 1; |
||||
|
.title { |
||||
|
padding-bottom: 33px; |
||||
|
border-bottom: 1px solid #d3d3d3; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.02em; |
||||
|
font-feature-settings: 'kern' on; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.desc { |
||||
|
padding-top: 26px; |
||||
|
padding-bottom: 24px; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 18px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.04em; |
||||
|
font-feature-settings: 'kern' on; |
||||
|
color: #d3d3d3; |
||||
|
} |
||||
|
.btn_wrap { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
.btn { |
||||
|
padding: 10px 20px; |
||||
|
border-radius: 383px; |
||||
|
background: #000000; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 16px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.04em; |
||||
|
font-feature-settings: 'kern' on; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.text { |
||||
|
margin-right: 11px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue