project_detail.html 11.4 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CCDC</title>
    <!-- 引入jQuery -->
    <script src="../../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../static/js/slide.js"></script>
    <link rel="stylesheet" href="../../static/common/index.css">
    <!-- 引入 element-ui 的样式, -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- 必须先引入vue,后使用element-ui -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> -->
    <!-- 引入element 的组件库-->
    <!-- <scrip src="https://unpkg.com/element-ui/lib/index.js">  -->
    <link rel="stylesheet" href="../../static/css/about/about.css">
    <link rel="stylesheet" href="../../static/css/public/footer.css">
</head>

<body>
    <div id="app">
        <!-- 头部导航栏和标题 -->
        <div class="head">
            <!-- logo -->
            <h1><img src="../../static/imgs/home/logo.png" alt=""></h1>
            <!-- 导航栏 -->
            <ul>
                <span></span>
                <li><a href="../index.html" target="_self">HOME</a></li>
                <li><a href="../about/about.html" class="red_bold" target="_self">ABOUT US</a></li>
                <li><a href="../product/product.html" target="_self">PRODUCT</a></li>
                <li><a href="../system/system.html" target="_self">SYSTEM</a></li>
                <li><a href="../technology/technology.html" target="_self">TECHNOLOGY</a></li>
                <li><a href="../team_lab/t_l_centers.html" target="_self">LABORATORY/TEAM</a></li>
                <li><a href="../manu/manu.html" target="_self">MANUFACTURE</a></li>
                <li><a href="../contact/contact.html" target="_self">CONTACT US</a></li>
            </ul>
            <!-- 后方标志 -->
            <ol>
                <li><img src="../../static/imgs/home/search.png" alt=""></li>
                <li><img src="../../static/imgs/home/translate.png" alt=""></li>
                <li>
                    <span>EN</span>
                    <span>RU</span>
                    <span>ES</span>
                    <span>CN</span>
                </li>
            </ol>
        </div>
    </div>
    <div class="banner">
        <div>
            <p>ABOUT US</p>
            <p>A PIONEER FOR COMPLEX OIL & GASFIELD SERVICE</p>
        </div>
        <img src="../../static/imgs/about/pic2.jpg" alt="">
    </div>
    <!-- 切换地方 -->
    


    <!-- 尾部区域 -->
    <div class="fot">
        <!-- 尾部列表区域 -->
        <div class="all_ul">
            <div class="ul1">
                <span>ПРОДУКТЫ</span>
                <ul>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/product/product_type.html?data=35&title=SECTION8">DRILDETER<sup>® </sup></a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/product/product_type.html?data=37&title=SECTION8_SERIES">DRILDETER<sup>® </sup> ABB PLUS</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/product/product_type.html?data=36&title=SECTION8_SERIES">DRILDETER<sup>® </sup> ABB</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/product/product_type.html?data=36&title=SECTION9">FOAMDRIL<sup>® </sup></a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/product/product_type.html?data=37&title=SECTION10">GERMCI<sup>® </sup></a>
                    </li>
                </ul>
            </div>
            <div class="ul1">
                <span>СИСТЕМЫ</span>
                <ul>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/system/system_detail.html?data=121">AMPOLDRIL<sup>® </sup> Система буровых <br> растворов на основе амфотерных полимеров</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/system/system_detail.html?data=122">SOLITOLERDRIL<sup>® </sup> Система буровых растворов<br> на водной основе  с высокой переносимостью твердых частиц</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/system/system_detail.html?data=123">INHIBDRIL<sup>® </sup> Высокопроизводительная система буровых<br> растворов на водной основе</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/system/system_detail.html?data=126">AKUAFAST<sup>® </sup> Система буровых<br>  растворов для быстрого бурения с защитой окружающей среды</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/system/system_detail.html?data=127">AKUADRIL<sup>® </sup> Система буровых растворов для<br> защиты от обрушения и охраны окружающей среды</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/system/system_detail.html?data=128">AKUASEAL<sup>® </sup> Экологически  безопасные  системы  буровых<br>  растворов  с  низким уровнем опасности</a>
                    </li>
                </ul>
            </div>
            <div class="ul1">
                <span>ТЕХНОЛОГИЯ</span>
                <ul>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/technology/technology_detail.html?data=124">LONGLARTEC<sup>® </sup>Drilling Fluid Technology <br> for Long Section with Large Size</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/technology/technology_detail.html?data=139">HIPRESATEC<sup>® </sup>A Special Controling <br> Technology for Salt Water with Hgh Pressure</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/technology/technology_detail.html?data=140">BORENHANTEC<sup>® </sup>Wellbore Strengthening <br> Technology</a>
                    </li>
                    <li>
                        <a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/technology/technology_detail.html?data=141">HIFL-PLUGTEC<sup>® </sup>High Fluid-Loss Curing and <br> Plugging Technology</a>
                    </li>
                </ul>
            </div>
            <div class="ul1">
                <span>ЛАБОРАТОРИЯ/КОМАНДА</span>
                <ul>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/team_lab/t_l_centers.html">ЦЕНТРЫ НИОКР</a></li>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/team_lab/t_l_lab.html">ЛАБОРАТОРИЯ</a></li>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/team_lab/t_l_team.html">СЕРВИСНАЯ КОМАНДА</a></li>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/team_lab/t_l_station.html">СЕРВИСНАЯ КОМАНДА</a></li>
                    <!-- <li>Academic exchange</li> -->
                </ul>
            </div>
            <div class="ul1">
                <span>ПРОИЗВОДСТВО</span>
                <ul>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/manu/manu.html">ПРОИЗВОДСТВЕННАЯ БАЗА</a></li>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/manu/manu.html">МАСТЕРСКАЯ</a></li>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/manu/manu.html">ЛАБОРАТОРИЯ ПРОВЕРКИ КАЧЕСТВА</a></li>
                    <li><a href="http://www.ccdcdf.com:6080/pc/app/pages/Russian/manu/manu.html">СКЛАД</a></li>
                </ul>
            </div>
            <div class="ul1">
                <span>СВЯЗАТЬСЯ С НАМИ</span>
                <ul>
                    <li>Tel: +86-028-86011661</li>
                    <li>Fax: +86-028-86013997</li>
                    <li>Emal: cqswc@cnpc.com.cn</li>
                    <li>No. 6, Meng Zhui Wan St <br> Chengdu, P. R .China</li>
                </ul>
            </div>
        </div>
        <!-- 尾部logo区域 -->
        <div class="bot_logo">
            <div class="logo_text">
                <div class="lef">
                    <img src="../../static/imgs/logowhite.png" alt="">
                    <!-- <span>©2023 这里有文字这里有文字</span> -->
                </div>
                <p>ICP备20230200号-1</p>
            </div>
        </div>
    </div>
</body>
<script>
    //切换50
    function openTab(event, tabName) {
        // 获取所有标签页内容元素
        var tabContent = document.getElementsByClassName("tab-content");

        // 隐藏所有标签页内容
        for (var i = 0; i < tabContent.length; i++) {
            tabContent[i].style.display = "none";
        }

        // 移除所有标签页选项卡的 active 类
        var tabs = document.getElementsByClassName("tab");
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].className = tabs[i].className.replace(" active", "");
        }

        // 显示当前选中标签页内容
        document.getElementById(tabName).style.display = "block";

        // 添加 active 类到当前选中标签页选项卡
        event.currentTarget.className += " active";
    }

    // 显示隐藏部分
    $(function () {//显示三行 多余隐藏 点击展开
        $('.innerCtn1').click(function () {
            $('.show').removeClass('out');
            $('.innerCtn1').css("display", "none")
        });
        $('.innerCtn2').click(function () {
            $('.show').removeClass('out');
            $('.innerCtn2').css("display", "none")
        });
        $('.innerCtn3').click(function () {
            $('.show').removeClass('out');
            $('.innerCtn3').css("display", "none")
        });
    });
    // 服务区域切换
    $(".rz_query_right_header li").on('click', function () {
        var type = $(this).attr("data-value");
        console.log(type)
        $(this).addClass('two_active').siblings().removeClass('two_active');
        if (type == "1") {
            $(".first_lc").toggle();
            $(".two_lc").toggle();
            $(".service1").toggle();
            $(".service2").toggle();
        } else {
            $(".two_lc").toggle();
            $(".first_lc").toggle();
            $(".service2").toggle();
            $(".service1").toggle();
        }
    })
    $('.tab').click(function () {
        let left_distance = $(this).position().left + 16 + $(this).width() / 2 - 20
        $('.tab_to').css("left", left_distance)
    })
</script>
</html>