manu.html 13.9 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>
    <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"> -->
    <script src="../../../static/js/include.js"></script>
    <script src="../../../static/js/public.js"></script>
    <link rel="stylesheet" href="../../../static/common/swiper.css">
    <link rel="stylesheet" href="../../../static/css/team_lab/team_lab_canter.css">
    <link rel="stylesheet" href="../../../static/css/manu/manu.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 class="to_li" style="left: 74.8%;"></span>
                <li><a href="../index.html" target="_self">ГЛАВНАЯ</a></li>
                <li><a href="../about/about.html" target="_self">О НАС</a></li>
                <li><a href="../product/product.html" target="_self">ПРОДУКТ</a></li>
                <li><a href="../system/system.html" target="_self">СИСТЕМА</a></li>
                <li><a href="../technology/technology.html" target="_self">ТЕХНОЛОГИЯ</a></li>
                <li><a href="../team_lab/t_l_centers.html" target="_self">ЛАБОРАТОРИЯ/КОМАНДА</a></li>
                <li><a href="../manu/manu.html" class="red_bold" target="_self">ПРОИЗВОДСТВО</a></li>
                <li><a href="../contact/contact.html" target="_self">СВЯЗАТЬСЯ С НАМИ</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 class="lan_change" data-title="English">EN</span>
                    <span class="lan_change" data-title="Russian">RU</span>
                    <span class="lan_change" data-title="Spain">ES</span>
                    <span class="lan_change" data-title="Chinese">CN</span>
                </li>
            </ol>
        </div>
    </div>
    <div class="banner">
        <div>
            <p>ПРОИЗВОДСТВО</p>
            <p>ПИОНЕР КОМПЛЕКСНОГО ОБСЛУЖИВАНИЯ НЕФТЕГАЗОВЫХ МЕСТОРОЖДЕНИЙ</p>
        </div>
        <img src="../../../static/imgs/manu/banner.jpg" alt="">
    </div>
    <!-- 切换地方 -->
    <div class="change">
        <div class="tab-container">
            <!-- 标签页选项卡 -->
            <div class="tag">
                <div class="main">
                    <span class="tab_to manuTab" style="left: 211px;"></span>
                    <div class="tab active" onclick="openTab(event,'tab1')">ПРОИЗВОДСТВЕННАЯ БАЗА</div>
                    <div class="tab" onclick="openTab(event,'tab2')">МАСТЕРСКАЯ</div>
                    <div class="tab" onclick="openTab(event,'tab3')">ЛАБОРАТОРИЯ ПРОВЕРКИ КАЧЕСТВА</div>
                    <div class="tab" onclick="openTab(event,'tab4')">СКЛАД</div>
                </div>
            </div>
            <!-- 标签页内容 -->
            <div class="content">
                <!-- 生产基地介绍 -->
                <div id="tab1" class="tab-content" style="display:block;">
                    <p class="title show">ПРОИЗВОДСТВЕННАЯ БАЗА</p>
                    <include src="./base.html"></include>
                </div>
                <!-- 液体固体车间 -->
                <div id="tab2" class="tab-content">
                    <p class="title">1.цех по производству флюидов </p>
                   <include src="./workshop.html"></include>
                </div>
                <!-- 质检实验室 -->
                <div id="tab3" class="tab-content">
                    <p class="title show">Инспекционная лаборатория</p>
                    <include src="./quality.html"></include>
                </div>
                <!-- 化剂立体储存仓库 -->
                <div id="tab4" class="tab-content">
                   <p class="title">ТРЕХМЕРНЫЙ СКЛАД ХИМИЧЕСКОГО СРЕДСТВА</p>
                   <include src="./warehouse.html"></include>
                </div>
            </div>
        </div>
    </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>
<link rel="stylesheet" href="../../../node_modules/swiper/swiper-bundle.min.css">
<script src="../../../node_modules/swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.Swiper1', {
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    })
</script>
<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")
        });
    });
    $('.tab').click(function(){
        let left_distance = $(this).position().left  + 14 + $(this).width()/2 - 20 
        $('.tab_to').css("left",left_distance)
        // console.log($(this).width())
        console.log($(this).position().left + 14 + $(this).width()/2 - 20)
    })
</script>
<!-- 引入HTML组件化JS -->
<script src="../../static/js/include.js"></script>

</html>