quick.html 11.3 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>Tianjin Medical University Cancer Institute & Hospital</title>
    <style>
        .single_box {
margin-bottom: 44px;
width: auto;
}

.single_box:last-child {
    margin: 0;
}

.content-word {
    position: relative;
}

.content-word-left {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.single_date {
    height: auto;
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    justify-content: space-between;
}

.single_date h3 {
    color: #666666;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}
.content-word-right {
    color: #01a26e;
    flex: unset;
    width: 400px !important;
    margin: 0 auto;
    transform: translateX(-70%);
}
    </style>
</head>

<body>
    <nav class="navbar navbar-default bgf mb0">
        <div class="container-fluid top_pc_brand">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle mtperc10 menuPage" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"
                    aria-expanded="true">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo" href="../index.html">
                    <img class="brand-logo" src="../images/logo.png" alt="">
                </a>
            </div>
            <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-4" aria-expanded="true">
                <div class="search-group mt30 form-group navbar-text navbar-right">
                    <a href="http://www.tjmuch.com/" class="langue">中文</a>
                    <input type="text" class="form-control search-input" placeholder="Search">
                    <div class="magnifier">
                        <img src="../images/search_btn.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="container-fluid pc">
        <div class="mask"></div>
        <div class="bs-example" data-example-id="simple-justified-button-group">
            <ul class="nav_menu_items">
                <li class="btn  navbtnActive navbtn-a" role="button">
                    <a href="../pcSecond.html">ABOUT US</a>
                    <div class='sec_menu_items'>
                        <a href="../about/welcome.html" class="inner_item">
                            Welcome Message
                        </a>
                        <a href="../about/mission.html" class="inner_item">
                            Mission and Vision
                        </a>
                        <a href="../about/leadership.html" class="inner_item">
                            Leadership
                        </a>
                        <a href="../about/history.html" class="inner_item">
                            History and Milestones
                        </a>
                        <a href="../about/quick.html" class="inner_item">
                            Quick Facts
                        </a>
                    </div>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="../clinical.html">CLINICAL RESOURCES</a>
                    <div class='sec_menu_items'>
                        <a href="../clinical/departments.html" class="inner_item">
                            Clinical Departments
                        </a>
                        <a href="../clinical/activities.html" class="inner_item">
                            Clinical Activities
                        </a>
                        <a href="../clinical/trials.html" class="inner_item">
                            Clinical Trials
                        </a>
                        <a href="../clinical/finddoctor.html" class="inner_item">
                            Find a Doctor
                        </a>
                        <a href='../clinical/national.html'>National Cancer Clinical <br>
                            Research Center</a>
                    </div>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="../research.html">RESEARCH & EDUCATION</a>
                    <div class='sec_menu_items'>
                        <a href="../research/introduction.html" class="inner_item">
                            Introduction
                        </a>
                        <a href="../research/departments.html" class="inner_item">
                            Research Departments
                        </a>
                        <a href="../research/facility.html" class="inner_item">
                            Core Facilities
                        </a>

                        <a href="../research/researcher.html" class="inner_item">
                            Find a Researcher
                        </a>
                        <a href="../research/education.html" class="inner_item">
                            Education
                        </a>
                        <a href="../research/transfer.html" class="inner_item">
                            Technology Transfer
                        </a>
                        <a href="http://www.cancerbiomed.org/index.php/cocr" class="inner_item">
                            Cancer Journals
                        </a>
                    </div>

                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="../international.html">INTERNATIONAL AFFAIRS</a>
                    <div class='sec_menu_items'>
                        <a href="../international/conference.html" class="inner_item">
                            International Conferences
                        </a>
                        <a href="../international/training.html" class="inner_item">
                            Oversea Trainings
                        </a>
                        <a href="../international/referral.html" class="inner_item">
                            International Patients
                        </a>
                        <a href="../international/partners.html" class="inner_item">
                            Partnership Institutions
                        </a>

                    </div>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="../news.html">NEWS RELEASE</a>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="../contact.html">CONTACT US</a>
                </li>
            </ul>
        </div>

        <!-- Swiper -->
        <div class="img-header">
            <img src="../images/quick_1.png" width="100%" alt="">
        </div>
        <div class="content">
            <div class="content-word">
                <div class="content-word-right">
                    <div class="single_box">
                        <img src="../images/q1.png" alt="">
                    </div>
                    <div class="single_box">
                        <img src="../images/q2.png" alt="">
                    </div>
                    <div class="single_box">
                        <img src="../images/q3.png" alt="">
                    </div>
                </div>
                <div class="content-word-left">
                    <div class="single_date">
                        <H3>
                            Main Campus
                        </H3>
                        <P>
                            Cover Area: 63,000㎡
                        </P>
                        <P>
                            Building Area: 175,052㎡
                        </P>
                        <P>
                            Beds: 2,198
                        </P>
                        <P>
                            Staffs: 2,993
                        </P>
                        <p>Outpatient visits: 1,224,629</p>
                        <p>n-patients visits: 103,123</p>
                        <p>Operations: 32,462</p>
                    </div>
                    <div class="single_date">
                        <H3>
                            Airport Free Trade Zone Hospital
                        </H3>
                        </P>
                        <P>
                            Building Area: 116,255㎡
                        </P>
                        <P>
                            Beds: 1,000
                        </P>
                        <P>
                            Staffs: 450
                        </P>
                    </div>
                    <div class="single_date">
                        <H3>
                            Binhai Hospital
                        </H3>

                        <P>
                            Covers 150,000㎡
                        </P>
                        <P>
                            Beds: 1200
                        </P>
                        <P>
                            Put into use in 2020
                        </P>
                    </div>

                </div>
            </div>
        </div>
        <footer class="footer-content">
            <div class="footer-main">

                <ul class="list-unstyled third-ul">
                    <li>West Huan-Hu Rd, Ti Yuan Bei, Hexi District</li>
                    <li>Tianjin 300060</li>
                    <li>China</li>
                    <li>Tel/Fax: 0086-22-23359337</li>
                    <li>Email: tcih@263.net.cn</li>
                </ul>
                <ul class="list-unstyled first-ul">
                    <li><img src="../images/yikeda.png" width="160px" alt=""></li>
                    <li><img src="../images/tjuc.png" width="160px" alt=""></li>
                </ul>
            </div>
        </footer>

    </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/swiper-3.4.2.jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function () {
            $(".btn-group").find(".navbtn-a").click(function () {
                console.log(this)
                $(this).siblings('.navbtn-a').removeClass('navbtnActive'); // 删除其他兄弟元素的样式
                $(this).addClass('navbtnActive'); // 添加当前元素的样式   
            })
        })
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });

        var swiper = new Swiper('.swiper-container1', {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 30
        });
    </script>
</body>

</html>