CQ_JD
/
nazw


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jquery-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        li {
            list-style: none;
        }

        body {
            min-width: 1370px;
            margin: 0;
            overflow: hidden;
            /* 确保视频覆盖整个页面 */
        }

        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 确保视频按比例填充整个页面 */
            z-index: -1;
            /* 将视频置于所有内容之下 */
        }

        .indexcot {
            height: 100vh;
            /* background-image: url(images/indexsyyg.png); */
            /* background-size: 100% 100%; */
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding-top: 1.875rem;
            box-sizing: border-box;
        }

        .indexcot .top {
            width: 69%;
            display: flex;
            margin: auto;
            justify-content: space-between;
        }

        .indexcot .logo {
            display: flex;
            align-items: center;
            font-size: 1.25rem;
            margin-right: 10%;
            white-space: nowrap;
            cursor: pointer;
        }

        .indexcot .logo img {
            width: 3.5rem;
            height: 3.5rem;
        }

        .indexcot .menu {
            width: 60%;
            max-width: 620px;
            font-size: 1rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .indexcot .menu li {
            cursor: pointer;
            white-space: nowrap;
        }

        .indexcot .menu .active {
            font-size: 1.25rem;
            padding-bottom: 0.3125rem;
            box-sizing: border-box;
            border-bottom: 1px solid #fff;
        }

        .indexcot .title {
            display: flex;
            width: 69%;
            margin: auto;
            align-items: center;
            justify-content: center;
            margin-top: 25vh;
        }

        .indexcot .title .left {
            font-size: 2.375rem;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            white-space: nowrap;
        }

        .indexcot .right {
            font-size: 5rem;
            color: #FFFFFF;
            white-space: nowrap;
        }

        #titleTabs {
            width: 80%;
            max-width: 1500px;
            margin: 0 auto;
            font-size: 1.25rem;
            display: flex;
            justify-content: center;
            margin-top: 3.125rem;
        }

        #titleTabs .tab {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        #titleTabs .tab-contents {
            display: none;
        }


        #titleTabs .active .tab-contents {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            height: 22vh;
            background: rgb(116 175 244 / 40%);
        }

        .tab-items {
            /* width: 16%; */
            width: 14.25rem;
            height: 4.1875rem;
            cursor: pointer;
        }

        .tab-items>.name {
            height: 4.1875rem;
            background: #5598E7;
            margin-left: 0.9375rem;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding: 0 0.625rem;
        }

        .tab-items.active>.name {
            background: #206AC2;
            font-size: 1.375rem;
        }

        .tab-contents {
            margin-left: 0.9375rem;
        }

        .tab-contents li {
            display: flex;
            align-items: center;
            height: 2.5rem;
            padding-left: 1.25rem;
            box-sizing: border-box;
        }

        .tab-contents li img {
            margin-right: 0.9375rem;
        }

        .tab-contents li.more {
            padding-left: 2.6875rem;
            font-size: 0.875rem;
            color: #FFFFFF;
            line-height: 3rem;
            text-decoration-line: underline;
            cursor: pointer;
        }

        @media screen and (max-width:1600px) {

            html,
            body {
                font-size: 14px;
            }
        }

        @media screen and (max-width:1300px) {

            html,
            body {
                font-size: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="indexcot">
        <video autoplay loop muted playsinline>
            <source src="media/业.ecabc222.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="top">
            <div class="logo">
                <img src="images/nalogo.png" alt="">
                <span>重庆市南岸区人民政府</span>
            </div>
            <ul class="menu">
                <li class="active">首页</li>
                <li>园区概况</li>
                <li>产业布局</li>
                <li>政策计算</li>
                <li>特色服务</li>
                <li>载体出让</li>
                <li>党群服务</li>
            </ul>
        </div>
        <div class="title">
            <div class="left">
                <span>重庆市南岸区</span>
                <span style="letter-spacing: 10px;">重庆经开区</span>
            </div>
            <div class="right">
                园区服务平台
            </div>
        </div>
        <div id="titleTabs">
            <div class="tab">
                <div class="tab-items" :class="{ active: currentTab === tab.id }"
                    v-for="(tab, index)  in this.titleList" :key="index" @mouseenter="currentTab = tab.id"
                    @mouseleave="currentTab = -1">
                    <div class="name" @click="tsmore(tab.id)">
                        {{tab.title}}
                    </div>
                    <ul class="tab-contents">
                        <li v-for="(tabl, indexl)  in tab.subtitleList" :key="indexl">
                            <img src="images/listlogo.png" alt="" />
                            <div class="name">{{tabl}}</div>
                        </li>
                        <li class="more" @click="tsmore(tab.id)" v-if="tab.subtitleList.length">
                            探索更多>>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    </div>
</body>
<script>
    // 初始化Vue实例
    new Vue({
        el: '#titleTabs',
        data: function () {
            return {
                currentTab: -1,
                titleList: [

                ],
                // parkData: {
                //     id:[],
                //     title:[],
                //     subtitle:[]
                // },
            };
        },
        methods: {
            tsmore(id) {
                window.location.href = "indexcygyy.html?id=" + this.currentTab;
            },
            getParkData() {
                let that = this;
                $.ajax({
                    url: "http://172.16.99.105:8082/parkData/",
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        data.forEach(function (item) {
                            item.subtitleList = item.subtitle ? item.subtitle.split(",") : [];
                        })
                        that.titleList = data;
                        console.log(data);
                    }
                })
            }
        },
        mounted() {
            this.getParkData();
        }
    });
</script>

</html>