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
-
246src/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