jucai/public/themes/default/views/app/content/city/index.blade.php

@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
<link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ theme_asset('app/css/city/city.css') }}"/>
@endpush

@push('js')

@endpush

@section('content')
    <!--banner-->
    <div class="banner">
        <p class="banner_title">晋江概况</p>
        <p class="banner_txt">中国品牌之都&nbsp;·&nbsp;现代产业中心&nbsp;·&nbsp;滨海生态城市</p>
    </div>

    <!--晋江起点、晋江由来、晋江名片-->
    <div class="origin_come_card clearfix w">
        <!--晋江起点-->
        <div class="origin">
            <p class="origin_title">晋江起点</p>
            <div class="origin_content">
                <a href="#"><img src="{{ theme_asset('app/images/originImg.png') }}"/></a>

                <div class="origin_txt">
                    <p>晋江三面临海，土地资源的匮乏激起了晋江人的开拓意识，晋江先民开展多种经营，发展工商经济和海外贸易，带来了晋江商业的繁荣。</p>
                    <p>宋元时期，晋江口的泉州港号称“东方第一大港”，是“海上丝绸之路”的起点。</p>
                </div>
            </div>

        </div>

        <!--晋江由来-->
        <div class="come">
            <p class="come_title">晋江由来</p>
            <div class="come_content">
                <div class="come_txt">
                    <p>晋江古为闽越人聚居地，西晋永嘉时，晋人为避战乱，衣冠南渡，沿江而居，因思故土，故名为晋江。唐开元六年（公元718年），“析南安东南地置县”。因临晋江，遂衍江名为县名。县治设泉州，州县同治。宋太平兴国六年（公元981年），析晋江县东乡十六里置惠安县。1949年9月，晋江解放，成立晋江县人民政府，县治仍设泉州。</p>
                    <p>1951年春，县治迁至青阳镇。1988年，石狮、永宁、蚶江、祥芝四乡镇由晋江县析出，置石狮市。92年3月，晋江撤县设市。</p>
                </div>

                <div class="comeImg clearfix">
                    <a href="#" class="first"><img src="{{ theme_asset('app/images/comeImg1.png') }}"/></a>
                    <a href="#" class="last"><img src="{{ theme_asset('app/images/comeImg2.png') }}"/></a>
                </div>
            </div>

        </div>

        <!--晋江名片-->
        <div class="card">
            <p class="card_title">晋江名片</p>
            <div class="card_content">
                <div class="card_btn">
                    <a href="#" class="btn1"><span>实施畅通工程模范管理城市</span></a>
                    <a href="#" class="btn2"><span>中国民间戏剧之乡</span></a>
                    <a href="#" class="btn3"><span>福建省文明城市</span></a>
                    <a href="#" class="btn4"><span>全国文化先进县</span></a>
                    <a href="#" class="btn5"><span>中国爱心城市</span></a>
                    <a href="#" class="btn6"><span>国家园林城市</span></a>
                    <a href="#" class="btn7"><sapn>全国体育先进县</sapn></a>
                    <a href="#" class="btn8"><span>中国品牌之都</span></a>
                    <a href="#" class="btn9"><span>全国城市卫生先进市</span></a>
                    <a href="#" class="btn10"><span>全国科技进步先进市</span></a>
                    <a href="#" class="btn11"><span>全国双拥模范城</span></a>
                </div>

            </div>

        </div>

    </div>

    <!--晋江概览-->
    <div class="overview">
        <div class="view w">
            <p class="view_title">晋江概览</p>

            <div class="view_content clearfix">

                <div class="culture_income">
                    <!--文化名城-->
                    <div class="culture viewImg">
                        <p class="view_titleTxt">文化名城</p>
                        <div class="culture_txt view_txt">
                            <a href="#">中原文化、海洋文化、闽南文化、华侨文化、宗教文化等多元文化相互交融、相映成辉。拥有“安平桥”、“草庵”、深沪湾海底古森林、龙山寺等125处市级以上文物保护单位。郑成功、施琅、朱熹、曾公亮、欧阳詹、俞大猷、张瑞图等著名历史人物。</a>
                        </div>
                    </div>
                    <!--经济强市-->
                    <div class="income viewImg">
                        <p class="view_titleTxt">经济强市</p>
                        <div class="income_txt view_txt">
                            <a href="#">晋江地处福建省东南沿海，是海峡西岸经济区前沿地带，与台湾一衣带水，距金门仅5.3海里，是海峡两岸交流合作的“桥头堡”。</a>
                        </div>
                    </div>
                </div>

                <div class="brand_zone clearfix">
                    <!--品牌之都-->
                    <div class="brand viewImg">
                        <p class="view_titleTxt">品牌之都</p>
                        <div class="brand_txt view_txt">
                            <a href="#">拥有“国字号”产品品牌130多件（项），先后荣获“中国鞋都”、“世界茄克之都”、“中国纺织产业基地”、“全国食品工业强县”、“中国伞都”、“中国包装印刷基地”等14项“国字号”区域产业品牌。</a>
                        </div>
                    </div>
                    <!--区位独特-->
                    <div class="zone viewImg">
                        <p class="view_titleTxt">区位独特</p>
                        <div class="zone_txt view_txt">
                            <a href="#">晋江地处福建省东南沿海，是海峡西岸经济区前沿地带，与台湾一衣带水，距金门仅5.3海里，是海峡两岸交流合作的“桥头堡”。</a>
                        </div>
                    </div>
                </div>

                <div class="plate_town clearfix">
                    <!--晋江板块-->
                    <div class="plate viewImg">
                        <p class="view_titleTxt">晋江板块</p>
                        <div class="plate_txt view_txt">
                            <a href="#">共有上市企业46家，数量居全国县（市、区）首位，上市后备企业73家。</a>
                        </div>
                    </div>
                    <!--著名侨乡-->
                    <div class="town viewImg">
                        <p class="view_titleTxt">著名侨乡</p>
                        <div class="town_txt view_txt">
                            <a href="#">晋江地处福建省东南沿海，是海峡西岸经济区前沿地带，与台湾一衣带水，距金门仅5.3海里，是海峡两岸交流合作的“桥头堡”。</a>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </div>


    <!--产业布局-->
    <div class="product clearfix w">
        <p class="product_title">产业布局</p>
        <!--左侧-->
        <div class="product_left">
            <p class="product_details">经过改革开放30多年发展，晋江的产业经济发育形成了独具区域特色的556产业集群，围绕提升晋江产业在全球价价值链分工地位的战略目标，晋江正着力构建“5561”现代产业体系，重点培育发展集成电路，石墨烯等未来产业。</p>
            <div class="product_txt">
                <p>一、5大传统产业：纺织服装、制鞋、陶瓷建材、食品饮料、纸制品及包装印刷。</p>
                <p>二、5大新兴产业：高端装备机械、新材料、光电信息、海洋生物、高端包装印刷</p>
                <p>三、6个现代服务业：科创设计、商贸物流、互联网及信息、金融、文化旅游、体育健康</p>
            </div>
            <p class="plus">以“文创+科技、文化+创意、科技+创意”为产业特色，加快文化创意、设计服务与制造业、建筑业、信息业、旅游业、体育产业等领域横向融合发展。</p>
            <a href="#"><img src="{{ theme_asset('app/images/originImg.png') }}" /></a>
        </div>
        <!--右侧-->
        <div class="product_right clearfix">
            <div class="product_content">
                <div class="content_imgDiv">
                    <div class="content_img">
                        <img src="{{ theme_asset('app/images/productImg1.png') }}" />
                        <p>商贸物流</p>
                    </div>
                </div>

                <div class="contentTxt">
                    <a href="#">发展以海港、空港、陆港和出口加工区、高铁物流为龙头的现代物流服务业，拓展以物流信息和第三、第四方物流服务，完善“物流基地-分拨中心-配送中心”三位一体服务网络，巩固提升大宗货物海、陆、空、铁联运区域枢纽地位。</a>
                </div>
            </div>

            <div class="product_content">
                <div class="content_imgDiv">
                    <div class="content_img">
                        <img src="{{ theme_asset('app/images/productImg2.png') }}" />
                        <p>互联网及信息</p>
                    </div>
                </div>

                <div class="contentTxt">
                    <a href="#">培育“互联网+”、大数据、云计算、软件开发、网络安全、系统集成等网络信息服务业，加快信息经济与产业经济、社会事业融合发展。</a>
                </div>
            </div>

            <div class="product_content">
                <div class="content_imgDiv">
                    <div class="content_img">
                        <img src="{{ theme_asset('app/images/productImg3.png') }}" />
                        <p>金融服务</p>
                    </div>
                </div>

                <div class="contentTxt">
                    <a href="#">大力推进金融服务机制创新、产品创新、市场创新，拓展互联网金融、农地金融、科技金融等新型金融业态，推动金融业与实体经济融合发展。</a>
                </div>
            </div>

            <div class="product_content">
                <div class="content_imgDiv">
                    <div class="content_img">
                        <img src="{{ theme_asset('app/images/productImg4.png') }}" />
                        <p>文化旅游</p>
                    </div>
                </div>

                <div class="contentTxt">
                    <a href="#">规划自然生态、人文古迹、特色产业等旅游资源，深度挖掘中原文化、闽越文化、海交文化等传统文化及近代战地文化、现代工业文明的丰富内涵，打造“海丝”沿线多元文化旅游目的地。</a>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('script')
<script>
    $(function(){

        var view_txtH = $(".view_txt a").height()/2;
        $(".view_txt > a").css("margin-top",view_txtH);
        $(".view_txt").hide();

        $(".viewImg").hover(function(){
            var index = $(".viewImg").index($(this));
            $(".view_titleTxt").eq(index).slideUp();
            $(".view_txt").eq(index).slideDown();
        },function(){
            var index = $(".viewImg").index($(this));
            $(".view_txt").eq(index).slideUp();
            $(".view_titleTxt").eq(index).slideDown();

        })

        var contentAH = $(".contentTxt a").height()/2;
        $(".contentTxt a").css("margin-top",contentAH);
        $(".contentTxt").hide();
        $(".product_content").hover(function(){
            var index = $(".product_content").index($(this));
            $(".contentTxt").eq(index).show();
            $(".content_imgDiv").css("z-index","0");
            $(".content_imgDiv").eq(index).css({"z-index":"200","background-color":"#dd4250","border":"1px #dd4250 solid"});
            $(".content_imgDiv").eq(index).find("img").attr("src","{{ theme_asset('app/images/productImgW') }}"+(index+1)+".png")
            $(".content_imgDiv").eq(index).find("p").css("color","#fff");
            if(index%2 == 0){
                $(".contentTxt").eq(index).stop().animate({"left":"300px"},"slow");
            }else{
                $(".contentTxt").eq(index).stop().animate({"left":"-320px"},"slow");
            }

        },function(){
            var index = $(".product_content").index($(this));
            $(".contentTxt").eq(index).hide();
//				$(".content_imgDiv").css("z-index","200");
            $(".content_imgDiv").eq(index).css({"z-index":"200","background-color":"#fff","border":"1px #dbdbdb solid"});
            $(".content_imgDiv").eq(index).find("img").attr("src","{{ theme_asset('app/images/productImg') }}"+(index+1)+".png")
            $(".content_imgDiv").eq(index).find("p").css("color","#4c4c4c");
            $(".contentTxt").stop().animate({"left":"0"},"slow");
//				if(index%2 == 0){
//					$(".contentTxt").eq(index).stop().animate({"left":"0"},"slow");
//				}else{
//					$(".contentTxt").eq(index).stop().animate({"left":"0"},"slow");
//				}
        })

    })
</script>
@endsection