785 lines
19 KiB
Vue
785 lines
19 KiB
Vue
<template>
|
|
<div class="Image-Based-Surgical-Planning">
|
|
<div class="banner"></div>
|
|
<div class="content">
|
|
<el-breadcrumb separator-class="el-icon-arrow-right"
|
|
style="padding: 5px;background-color: #f1f1f1;margin-top: 10px;">
|
|
<el-breadcrumb-item :to="{ path: '/home' }">{{ $t('home.menuName') }}</el-breadcrumb-item>
|
|
<el-breadcrumb-item><a href="/services">{{ $t('service.menuName') }}</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item><a href="/services/3DPostProcessingServices">{{ $t('service.subMenu2')
|
|
}}</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{ $t('processingService.tab6') }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div class="solution">
|
|
<div class="soluDetail">
|
|
<div class="cont" style="display: block;margin-top: 0;">
|
|
<div class="itemX">
|
|
<h2 class="liverTitle cf"><s>{{ $t(`ImageBasedSurgicalPlanning.title5`) }}</s><em>{{
|
|
$t(`ImageBasedSurgicalPlanning.title6`) }}</em>
|
|
<div class="aAs cf">
|
|
<span :class="{ cur: activeName === 'LM' }" @click.stop="handleClick('LM')">{{
|
|
$t(`ImageBasedSurgicalPlanning.tab_LM`) }}</span>
|
|
| <span :class="{ cur: activeName === 'FSF' }" @click.stop="handleClick('FSF')">{{
|
|
$t(`ImageBasedSurgicalPlanning.tab_FSF`) }}</span> | <span :class="{ cur: activeName === 'TAVI' }"
|
|
@click.stop="handleClick('TAVI')">{{
|
|
$t(`ImageBasedSurgicalPlanning.tab_TAVI`) }}</span> | <span :class="{ cur: activeName === 'KM' }"
|
|
@click.stop="handleClick('KM')">{{
|
|
$t(`ImageBasedSurgicalPlanning.tab_KM`) }}</span> | <span :class="{ cur: activeName === 'PT' }"
|
|
@click.stop="handleClick('PT')">{{
|
|
$t(`ImageBasedSurgicalPlanning.tab_PT`) }}</span> | <span :class="{ cur: activeName === 'AAA' }"
|
|
@click.stop="handleClick('AAA')">{{
|
|
$t(`ImageBasedSurgicalPlanning.tab_AAA`) }}</span>
|
|
</div>
|
|
</h2>
|
|
<div class="liverList cf">
|
|
<h3>{{ $t(`ImageBasedSurgicalPlanning.tab_${activeName}`) }}</h3>
|
|
<p style="float:right; font-size:14px; color:#777; margin-bottom:0px; "><i
|
|
class="fa fa-search-plus"></i>{{ $t(`ImageBasedSurgicalPlanning.msg1`) }}</p>
|
|
<table class="comTable liverTable cf">
|
|
<tbody>
|
|
<tr>
|
|
<th width="180">{{ $t(`ImageBasedSurgicalPlanning.title1`) }}</th>
|
|
<th width="">{{ $t(`ImageBasedSurgicalPlanning.title2`) }}</th>
|
|
<th width="180">{{ $t(`ImageBasedSurgicalPlanning.title3`) }}</th>
|
|
</tr>
|
|
<tr v-for="(item, index) in list" :key="item.id" :class="{ last: index === list.length - 1 }">
|
|
<td class="td1" v-html="$t(`ImageBasedSurgicalPlanning.${item.key}.series_${item.id}`)"></td>
|
|
<td class="td2">
|
|
<p v-html="$t(`ImageBasedSurgicalPlanning.${item.key}.clinical_${item.id}`)">
|
|
</p>
|
|
</td>
|
|
<td class="td3">
|
|
<img :src="getSrc(item.img)" class="liverTri" @click.stop="openShowImage(item, index)">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<showImage v-if="visible" :visible.sync="visible" :images="images" :data="rowData" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import showImage from "./showImage.vue"
|
|
export default {
|
|
components: { showImage },
|
|
|
|
|
|
methods: {
|
|
handleClick(active) {
|
|
this.activeName = active
|
|
this.list = this.obj[this.activeName] || []
|
|
},
|
|
getSrc(src) {
|
|
return require(`../../../../../${src}`)
|
|
},
|
|
openShowImage(item, index) {
|
|
this.images = []
|
|
this.rowData = Object.assign({}, item)
|
|
let { viewFrom, viewLength } = item
|
|
for (let i = 1; i <= viewLength; i++) {
|
|
this.images.push(require(`../../../../../static/images/mass/${viewFrom}/${index + 1}/${i}.jpg`))
|
|
}
|
|
this.visible = true
|
|
}
|
|
},
|
|
mounted() {
|
|
let active = this.$route.query.active
|
|
if (active) {
|
|
this.activeName = active
|
|
this.list = this.obj[this.activeName] || []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
images: [],
|
|
activeName: "LM",
|
|
visible: false,
|
|
rowData: {},
|
|
list: [],
|
|
obj: {
|
|
"LM": [
|
|
{
|
|
"id": "LM1",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1a.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "LM2",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1b.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "LM3",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1c.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "LM4",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1d.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "LM5",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1e.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "LM6",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1f.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "LM7",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1g.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 7
|
|
},
|
|
{
|
|
"id": "LM8",
|
|
"key": "LM",
|
|
"img": "static/images/livermass1h.jpg",
|
|
"viewFrom": "liver",
|
|
"viewLength": 5
|
|
}
|
|
],
|
|
"FSF": [
|
|
{
|
|
"id": "FSF1",
|
|
"key": "FSF",
|
|
"img": "static/images/bone1.jpg",
|
|
"viewFrom": "bone",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "FSF2",
|
|
"key": "FSF",
|
|
"img": "static/images/bone2.jpg",
|
|
"viewFrom": "bone",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "FSF3",
|
|
"key": "FSF",
|
|
"img": "static/images/bone3.jpg",
|
|
"viewFrom": "bone",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "FSF4",
|
|
"key": "FSF",
|
|
"img": "static/images/bone4.jpg",
|
|
"viewFrom": "bone",
|
|
"viewLength": 30
|
|
},
|
|
{
|
|
"id": "FSF5",
|
|
"key": "FSF",
|
|
"img": "static/images/bone5.jpg",
|
|
"viewFrom": "bone",
|
|
"viewLength": 6
|
|
}
|
|
],
|
|
"TAVI": [
|
|
{
|
|
"id": "TAVI1",
|
|
"key": "TAVI",
|
|
"img": "static/images/tavi1.jpg",
|
|
"viewFrom": "tavi",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "TAVI2",
|
|
"key": "TAVI",
|
|
"img": "static/images/tavi2.jpg",
|
|
"viewFrom": "tavi",
|
|
"viewLength": 2
|
|
},
|
|
{
|
|
"id": "TAVI3",
|
|
"key": "TAVI",
|
|
"img": "static/images/tavi3.jpg",
|
|
"viewFrom": "tavi",
|
|
"viewLength": 1
|
|
},
|
|
{
|
|
"id": "TAVI4",
|
|
"key": "TAVI",
|
|
"img": "static/images/tavi4.jpg",
|
|
"viewFrom": "tavi",
|
|
"viewLength": 12
|
|
},
|
|
{
|
|
"id": "TAVI5",
|
|
"key": "TAVI",
|
|
"img": "static/images/tavi5.jpg",
|
|
"viewFrom": "tavi",
|
|
"viewLength": 32
|
|
},
|
|
{
|
|
"id": "TAVI6",
|
|
"key": "TAVI",
|
|
"img": "static/images/tavi6.jpg",
|
|
"viewFrom": "tavi",
|
|
"viewLength": 32
|
|
}
|
|
],
|
|
"KM": [
|
|
{
|
|
"id": "KM1",
|
|
"key": "KM",
|
|
"img": "static/images/kidney1.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 2
|
|
},
|
|
{
|
|
"id": "KM2",
|
|
"key": "KM",
|
|
"img": "static/images/kidney2.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 2
|
|
},
|
|
{
|
|
"id": "KM3",
|
|
"key": "KM",
|
|
"img": "static/images/kidney3.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "KM4",
|
|
"key": "KM",
|
|
"img": "static/images/kidney4.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "KM5",
|
|
"key": "KM",
|
|
"img": "static/images/kidney5.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "KM6",
|
|
"key": "KM",
|
|
"img": "static/images/kidney6.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "KM7",
|
|
"key": "KM",
|
|
"img": "static/images/kidney7.jpg",
|
|
"viewFrom": "kidney",
|
|
"viewLength": 7
|
|
}
|
|
],
|
|
"PT": [
|
|
{
|
|
"id": "PT1",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas1.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 16
|
|
},
|
|
{
|
|
"id": "PT2",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas2.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 6
|
|
},
|
|
{
|
|
"id": "PT3",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas3.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "PT4",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas4.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "PT5",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas5.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "PT6",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas6.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "PT7",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas7.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "PT8",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas8.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "PT9",
|
|
"key": "PT",
|
|
"img": "static/images/pancreas9.jpg",
|
|
"viewFrom": "pancreas",
|
|
"viewLength": 4
|
|
}
|
|
],
|
|
"AAA": [
|
|
{
|
|
"id": "AAA1",
|
|
"key": "AAA",
|
|
"img": "static/images/belly1.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 30
|
|
},
|
|
{
|
|
"id": "AAA2",
|
|
"key": "AAA",
|
|
"img": "static/images/belly2.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "AAA3",
|
|
"key": "AAA",
|
|
"img": "static/images/belly3.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "AAA4",
|
|
"key": "AAA",
|
|
"img": "static/images/belly4.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "AAA5",
|
|
"key": "AAA",
|
|
"img": "static/images/belly5.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 21
|
|
},
|
|
{
|
|
"id": "AAA6",
|
|
"key": "AAA",
|
|
"img": "static/images/belly6.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 5
|
|
},
|
|
{
|
|
"id": "AAA7",
|
|
"key": "AAA",
|
|
"img": "static/images/belly7.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 5
|
|
},
|
|
{
|
|
"id": "AAA8",
|
|
"key": "AAA",
|
|
"img": "static/images/belly8.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "AAA9",
|
|
"key": "AAA",
|
|
"img": "static/images/belly9.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "AAA10",
|
|
"key": "AAA",
|
|
"img": "static/images/belly10.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 4
|
|
},
|
|
{
|
|
"id": "AAA11",
|
|
"key": "AAA",
|
|
"img": "static/images/belly11.jpg",
|
|
"viewFrom": "belly",
|
|
"viewLength": 4
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Image-Based-Surgical-Planning {
|
|
background: #fff;
|
|
|
|
.banner {
|
|
height: 300px;
|
|
background: url(../../../../../../src/static/images/bannerSolution3.jpg) no-repeat center center;
|
|
background-size: cover;
|
|
position: relative;
|
|
overflow: hidden;
|
|
clear: both;
|
|
}
|
|
|
|
// style="color: #1083b6;font-size: 22px;"
|
|
.content {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
|
|
.el-tabs__nav .el-tabs__item:first-child {
|
|
color: #1083b6 !important;
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
.custom_tab {
|
|
.el-tabs__header {
|
|
border-bottom: none;
|
|
margin: 0;
|
|
}
|
|
|
|
// 标签项样式
|
|
.el-tabs__item {
|
|
color: #555 !important;
|
|
height: 65px;
|
|
font-size: 15px;
|
|
line-height: 65px;
|
|
font-weight: normal;
|
|
|
|
// 竖线分隔（排除最后一个元素）
|
|
&:not(:last-child)::after {
|
|
content: "丨";
|
|
position: absolute;
|
|
right: -8px;
|
|
color: #ddd;
|
|
}
|
|
|
|
// 激活态样式
|
|
&.is-active {
|
|
color: #1083b6 !important;
|
|
font-weight: normal;
|
|
}
|
|
|
|
// 隐藏默认下划线
|
|
&::before {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// 隐藏激活态下划线
|
|
.el-tabs__active-bar {
|
|
display: none;
|
|
}
|
|
|
|
// 调整导航栏布局
|
|
.el-tabs__nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border: none !important;
|
|
}
|
|
|
|
.item {
|
|
margin: 30px 0;
|
|
|
|
p {
|
|
font-size: 15px;
|
|
line-height: 28px;
|
|
color: #2f2f2f;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 18px;
|
|
padding-left: 5px;
|
|
border-left: 5px solid #1083b6;
|
|
color: #1083b6;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
margin-bottom: 30px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.img_content {
|
|
margin: -10px 0 25px 0;
|
|
|
|
img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: -10px 0 25px 0;
|
|
|
|
// list-style: none
|
|
li {
|
|
width: 100%;
|
|
float: none;
|
|
clear: both;
|
|
line-height: 24px;
|
|
padding-bottom: 14px;
|
|
font-size: 14px;
|
|
color: #2f2f2f;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.cf {
|
|
zoom: 1;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
}
|
|
|
|
|
|
ul {
|
|
margin-top: 10px;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
display: list-item;
|
|
text-align: -webkit-match-parent;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.fa {
|
|
display: inline-block;
|
|
font: normal normal normal 14px / 1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.solution {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding-top: 30px;
|
|
padding-bottom: 73px;
|
|
|
|
.soluDetail {
|
|
padding-top: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
color: #333333;
|
|
padding-left: 14px;
|
|
border-left: 6px solid #1083b6;
|
|
height: 18px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
p {
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
color: #2f2f2f;
|
|
padding-bottom: 0;
|
|
// padding-bottom: 22px;
|
|
}
|
|
|
|
ul {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.cont {
|
|
clear: both;
|
|
margin-top: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.cont.on {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.itemX {
|
|
margin-bottom: 30px;
|
|
|
|
p {
|
|
font-size: 15px;
|
|
line-height: 28px;
|
|
color: #2f2f2f;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h2 {
|
|
padding-left: 8px;
|
|
border-left: 5px solid #1083b6;
|
|
color: #444;
|
|
margin-bottom: 30px;
|
|
|
|
s {
|
|
font-size: 18px !important;
|
|
display: block;
|
|
margin-top: -4px;
|
|
margin-bottom: 11px;
|
|
line-height: 18px !important;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
em {
|
|
line-height: 1;
|
|
display: block;
|
|
margin: 5px 0 -2px 0px;
|
|
font-size: 17px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.liverTitle {
|
|
position: relative;
|
|
border: none;
|
|
margin-top: 0;
|
|
|
|
.aAs {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 24px;
|
|
font-size: 14px !important;
|
|
color: #999;
|
|
width: 900px;
|
|
text-align: right;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
margin: 0 4px;
|
|
font-size: 14px !important;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.cur {
|
|
color: #1083b6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.liverList {
|
|
h3 {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
padding-top: 2px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.liverTable {
|
|
td {
|
|
padding: 15px 20px 15px 20px;
|
|
}
|
|
|
|
.td1 {
|
|
text-align: left;
|
|
}
|
|
|
|
.td2 {
|
|
p {
|
|
padding-bottom: 0;
|
|
text-align: justify;
|
|
}
|
|
}
|
|
|
|
.liverTri {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.comTable {
|
|
width: 100%;
|
|
border-left: 1px solid #1083b6;
|
|
border-right: 1px solid #1083b6;
|
|
|
|
tr:nth-child(2n) {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
th {
|
|
height: 47px;
|
|
line-height: 47px;
|
|
color: #fff;
|
|
background: #1083b6;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
td {
|
|
line-height: 22px;
|
|
font-size: 14px;
|
|
color: #2f2f2f;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding: 15px 13px 15px 0;
|
|
}
|
|
|
|
td.td2 {
|
|
text-align: left;
|
|
}
|
|
|
|
.last td {
|
|
border-bottom: 1px solid #1083b6;
|
|
}
|
|
|
|
}
|
|
</style>
|