370 lines
11 KiB
Vue
370 lines
11 KiB
Vue
<template>
|
||
<div class="center-imaging-services">
|
||
<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>{{ $t('service.subMenu1') }}</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<el-tabs v-model="activeName" class="custom_tab" ref="custom_tab">
|
||
<el-tab-pane :label="$t('imagingService.tab1')" name="1">
|
||
<div class="item">
|
||
<div style="margin-bottom: 30px;">
|
||
<p>{{ $t('imagingService.msg1') }}</p>
|
||
<p>{{ $t('imagingService.msg2') }}</p>
|
||
</div>
|
||
<h2>{{ $t('imagingService.title1') }}</h2>
|
||
<div class="img_content">
|
||
<img
|
||
v-if="$i18n.locale === 'zh'"
|
||
src="@/static/images/new_irc01.png"
|
||
alt=""
|
||
style="width: 500px;"
|
||
/>
|
||
<img
|
||
v-if="$i18n.locale === 'en'"
|
||
src="@/static/images/image3.png"
|
||
alt=""
|
||
style="width: 500px;"
|
||
/>
|
||
</div>
|
||
<h2>{{ $t('imagingService.title2') }}</h2>
|
||
<div class="img_content">
|
||
<img
|
||
v-if="$i18n.locale === 'zh'"
|
||
src="@/static/images/irc01.png"
|
||
alt=""
|
||
style="width: 800px;"
|
||
/>
|
||
<img
|
||
v-if="$i18n.locale === 'en'"
|
||
src="@/static/images/image1.png"
|
||
alt=""
|
||
style="width: 800px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="$t('imagingService.tab2')" name="2">
|
||
<div class="item">
|
||
<h2>{{ $t('imagingService.tab2' )}}</h2>
|
||
<ul>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
WHO、RECIST、RECIST1.1
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
Choi、Lugano 2014、LYRIC、RECIL
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
irRC、irRECIST、iRECIST、imRECIST
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
mRECIST Mesothelima、mRECIST HCC、PERCIST
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
RANO、PCWG3
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg3') }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="$t('imagingService.tab3')" name="3">
|
||
<div class="item">
|
||
<h2>{{ $t('imagingService.tab3') }}</h2>
|
||
<div class="img_content">
|
||
<img
|
||
v-if="$i18n.locale === 'zh'"
|
||
src="@/static/images/irc03.png"
|
||
alt=""
|
||
style="width: 800px;"
|
||
/>
|
||
<img
|
||
v-if="$i18n.locale === 'en'"
|
||
src="@/static/images/image2.png"
|
||
alt=""
|
||
style="width: 800px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="$t('imagingService.tab4')" name="4">
|
||
<div class="item">
|
||
<div style="margin-bottom: 30px;">
|
||
<p>{{ $t('imagingService.msg4') }}</p>
|
||
</div>
|
||
<img
|
||
src="@/static/images/new_irc04.png"
|
||
alt=""
|
||
style="display: block;margin: 0 auto;width: 600px;"
|
||
/>
|
||
<h2>{{ $t('imagingService.title3') }}</h2>
|
||
<p>{{ $t('imagingService.msg5') }}</p>
|
||
<p style="margin-bottom: 20px;">{{ $t('imagingService.msg6') }}</p>
|
||
<img
|
||
v-if="$i18n.locale === 'zh'"
|
||
src="@/static/images/new_irc05.png"
|
||
alt=""
|
||
style="display: block;margin: 0 auto;width: 620px;"
|
||
/>
|
||
<img
|
||
v-if="$i18n.locale === 'en'"
|
||
src="@/static/images/image4.png"
|
||
alt=""
|
||
style="display: block;margin: 0 auto;width: 620px;"
|
||
fit="scale-down"
|
||
/>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="$t('imagingService.tab6')" name="5">
|
||
<div class="item">
|
||
<p style="margin-bottom: 20px;">{{ $t('imagingService.msg7') }}</p>
|
||
<h2>{{ $t('imagingService.title4') }}</h2>
|
||
<div style="display: flex;">
|
||
<ul>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg8') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg9') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg10') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg11') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg12') }}
|
||
</li>
|
||
</ul>
|
||
<img
|
||
src="@/static/images/irc05.png"
|
||
alt=""
|
||
style="width:300px;position:relative;top:-60px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="$t('imagingService.tab5')" name="6">
|
||
<div class="item">
|
||
<p style="margin-bottom: 20px;">{{ $t('imagingService.msg13') }}</p>
|
||
<h2>{{ $t('imagingService.title5') }}</h2>
|
||
<div style="display: flex;display: flex;flex-direction: row;justify-content: space-around;">
|
||
<ul style="width: 700px">
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg14') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg15') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg16') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg17') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg18') }}
|
||
</li>
|
||
</ul>
|
||
<div style="width:340px;">
|
||
<img
|
||
src="@/static/images/new_irc07.jpg"
|
||
alt=""
|
||
style="width: 340px;position:relative;top:-40px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>{{ $t('imagingService.title6') }}</h2>
|
||
<div style="display: flex;flex-direction: row;justify-content: space-around;">
|
||
<ul style="width: 700px">
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg19') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg20') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg21') }}
|
||
</li>
|
||
<li>
|
||
<i class="el-icon-caret-right"></i>
|
||
{{ $t('imagingService.msg22') }}
|
||
</li>
|
||
</ul>
|
||
<div style="width:340px;">
|
||
<img
|
||
v-if="$i18n.locale === 'zh'"
|
||
src="@/static/images/new_irc08.jpg"
|
||
alt=""
|
||
style="width: 300px;position:relative;top:-60px;"
|
||
/>
|
||
<img
|
||
v-if="$i18n.locale === 'en'"
|
||
src="@/static/images/image5.png"
|
||
alt=""
|
||
style="width: 300px;position:relative;top:-60px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
activeName: '1'
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
|
||
},
|
||
mounted () {
|
||
this.$nextTick(() => {
|
||
// 获取第一个标签项
|
||
if (this.$refs.custom_tab && this.$refs.custom_tab.$el) {
|
||
const firstTab = this.$refs.custom_tab.$el.querySelector('.el-tabs__item')
|
||
firstTab.style.fontSize = '22px'
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.center-imaging-services {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|