xuchaoqing
/
fastadmin_materials_official


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="{:__lm($navCur,'keywords')}" />
    <meta name="description" content="{:__lm($navCur,'description')}" />
    <title>{:__lm($navCur,'seotitle')} - {$site.site_name}</title>
    <link rel="shortcut icon" href="{$site.logo|cdnurl}">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/reset.css">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/style.css">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/media.css">
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/jquery.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/swiper.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/swiper.animate1.0.3.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/wow.js"></script>
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/jquery.counterup.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/addons/material/js/javascript.js"></script>
    <style>
        /* 公司简介样式 */
        .company-profile {
            max-width: 1200px;
            margin: 80px auto 0;
        }

        .profile-header {
            margin-bottom: 40px;
        }

        .en-title {
            font-weight: 400;
            font-size: 30px;
            color: #737980;
            line-height: 44px;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        .cn-title {
            font-size: 32px;
            color: #333;
            font-weight: 500;
            margin-top: 0;
        }

        .profile-content {
            position: relative;
            /* 添加这一行 */
            display: flex;
            align-items: stretch;
            margin-bottom: 80px;
        }

        .profile-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .profile-text {
            flex: 1;
            padding-right: 40px;
        }

        .profile-text p {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            margin-bottom: 20px;
            text-align: justify;
        }

        .profile-image {
            position: relative;
            cursor: pointer;
        }

        .profile-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .play-btn {
            display: block;
            position: absolute;
            width: 66px;
            height: 66px;
            left: 50%;
            top: 50%;
            margin: -27px 0 0 -27px;
            z-index: 20;
        }

        .play-btn i {
            position: relative;
            display: block;
            width: 66px;
            height: 66px;
            background: #DF0100 url("__CDN__/assets/addons/material/images/play.svg") center no-repeat;
            background-size: 35%;
            border-radius: 100%;
            z-index: 2;
        }

        .play-btn i:hover {
            background: #404040 url("__CDN__/assets/addons/material/images/play.svg") center no-repeat;
            background-size: 35%;
        }

        .profile-image:hover .play-button img {
            opacity: 1;
        }

        /* 公司数据样式 */
        .company-data {
            width: 890px;
            height: 110px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            position: absolute;
            bottom: 40px;
        }

        .data-box {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            height: 100%;
        }

        .data-item {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 110px;
        }

        .data-item:not(:last-child)::after {
            content: '';
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            width: 1px;
            background-color: #cfd2d6;
        }

        .data-number-unit {
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .data-item h3 {
            font-weight: 500;
            font-size: 40px;
            color: #DF0100;
            margin: 0;
            line-height: 1;
        }

        .data-unit {
            font-weight: 400;
            font-size: 12px;
            color: #8A9199;
            margin-left: 4px;
            margin-bottom: 2px;
        }

        .data-title {
            font-weight: 400;
            font-size: 12px;
            color: #737980;
            /* margin-top: 8px; */
        }

        .company-intro-section {
            max-width: 1200px;
            margin: 60px auto 0;
            padding: 0 20px;
        }

        .intro-paragraph {
            font-size: 16px;
            color: #333;
            line-height: 2;
            text-align: justify;
            margin-bottom: 40px;
        }

        .intro-images-row {
            display: flex;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 40px;
        }

        .intro-images-row img {
            width: 48%;
            height: 260px;
            object-fit: cover;
            border-radius: 6px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

        /* .video-modal {
          position: fixed;
          left: 0; top: 0; right: 0; bottom: 0;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .video-modal-mask {
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
          background: rgba(0,0,0,0.7);
      }
      .video-modal-content {
          position: relative;
          z-index: 2;
          background: #000;
          border-radius: 8px;
          padding: 20px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      }
      .video-modal-close {
          position: absolute;
          right: 16px;
          top: 8px;
          color: #fff;
          font-size: 32px;
          cursor: pointer;
          z-index: 10;
      }
      .video-modal video {
          display: block;
          background: #000;
          border-radius: 8px;
      } */
    </style>
</head>

<body>
    <!--头部-->
    {include file="header" /}
    <!-- 栏目Banner -->
    <div class="col-banner">
        <div class="section-banner">
            <img src="{$site.banner5|cdnurl}" alt="">
        </div>
    </div>
    <div class="container">
        <!-- 公司简介 -->
        <div class="company-profile">
            <div class="profile-content">
                <div class="profile-left">
                    <div class="profile-header wow fadeInUp" data-wow-delay="0.5s">
                        <h2 class="en-title">COMPANY PROFILE</h2>
                        <h2 class="cn-title">{$site.ban5_t1}</h2>
                    </div>
                    <div class="profile-text wow fadeInUp" data-wow-delay="0.5s">
                        {$about.about_content|default=''}
                    </div>

                </div>
                <div class="profile-image" data-video="file/dance.mp4">
                    <img src="{$about.about_image|cdnurl}" alt="公司大楼">
                    {if condition="empty($about.about_video) neq true"}
                    <a href="javascript:;" class="play-btn m-video" data-src="{$about.about_video|cdnurl}"><i></i></a>
                    {/if}
                </div>
            </div>
            <!-- 公司简介补充内容 -->
            <div class="company-intro-section wow fadeInUp" data-wow-delay="0.5s">
                {$about.about_bottom_content|default=''}
            </div>
        </div>
    </div>

    <!--底部-->
    {include file="footer" /}
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/video.css">
    <script type='text/javascript' src="__CDN__/assets/addons/material/js/video.js"></script>
    <!-- <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        // autoplay: true, //自动滑动
        speed: 500,
        slidesPerView: 'auto',
        // centeredSlides: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
        },
        navigation: {
            nextEl: '.develop-next',
            prevEl: '.develop-prev',
        },
    });
</script> -->
</body>

</html>