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