CQ_JD
/
nazw


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- 引入 Vue -->
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入组件库 -->
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="swiper/swiper-bundle.css">
    <!-- jquery-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/urljson.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        li {
            list-style: none;
        }

        @font-face {
            font-family: 'DOUYU';
            src: url('fonts/DOUYUFONT-2.OTF');
            font-weight: normal;
            font-style: normal;
        }

        .backbutton {
            width: 7.3125rem;
            height: 2.625rem;
            background: rgb(0 0 0 / 30%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 1.25rem;
            right: 1.5625rem;
            cursor: pointer;
            z-index: 99;
        }

        .backbutton img {
            margin-right: 0.625rem;
        }

        .topbg {
            position: absolute;
            top: 0;
            width: 100vw;
            height: 30vh;
            background-image: url(images/bg-indextop.png);
            background-size: 100% 100%;
        }

        #indexcygyy {
            height: 100vh;
            background-image: url(images/indexcygyy.png);
            background-size: 100% 100%;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding-top: 10px;
            box-sizing: border-box;
            position: relative;
            opacity: 0.8;
        }

        .bg-cygyy {
            background-image: url(images/indexcygyy.png);
        }

        .bg-dxkjy {
            background-image: url(images/bg-dxkjy.png) !important;
        }

        .bg-npxq {
            background-image: url(images/bg-npxq.png) !important;
        }

        .bg-ylcxg {
            background-image: url(images/bg-ylcxg.jpg) !important;
        }

        #indexcygyy .top {
            display: flex;
            margin: auto;
            justify-content: center;
            position: absolute;
            width: 100%;
        }

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

        #indexcygyy .logo img {
            width: 3.5rem;
            height: 3.5rem;
        }

        #indexcygyy .menu {
            /* width: 60%; */
            max-width: 1065px;
            font-size: 1rem;
            display: flex;
        }

        #indexcygyy .menu li {
            width: 16%;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .content {
            width: 53vw;
            min-width: 589px;
            height: 70vh;
            background: rgb(0 28 60 / 60%);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 8.3125rem;
            margin-top: 15vh;
            position: relative;
        }

        .content>div {
            margin-top: 2%;
        }

        .content>.title {
            /* margin-top: 1.875rem; */
            font-family: DOUYU;
            font-weight: normal;
            font-size: 1.625rem;
            color: #FFFFFF;
            /* line-height: 3rem; */
            /* text-shadow: 0px 2px 4px rgba(11, 96, 169, 0.25); */
            background: linear-gradient(0deg, rgba(184, 225, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .content>.line {
            width: 37.9375rem;
            height: 1.125rem;
            /* margin-bottom: 1.25rem; */
        }

        .content>.text {
            width: 95%;
            min-height: 120px;
            font-size: 1rem;
            color: #FFFFFF;
            line-height: 1.875rem;
            text-indent: 2.5rem;

        }

        .content .more {
            width: 95%;
            height: 3.75rem;
            background-image: url(images/more-cygyy.png);
            background-size: 100% 100%;
            font-size: 1.5rem;
            color: #E1F0FE;
            line-height: 2.75rem;
            text-align: center;
            cursor: pointer;
        }

        .swiper {
            width: 95%;
            height: 50%;
            /* margin: 2.5rem auto; */
        }

        .swiper .title {
            word-break: break-all;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .swiper-slide.list {
            font-size: 1.125rem;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            cursor: pointer;
        }

        .swiper-slide img {
            display: block;
            width: 17.8125rem;
            height: 80%;
            object-fit: cover;
        }

        .swiper-slide .slidecontent {
            word-break: break-all;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            font-size: 1rem;
            color: rgb(255 255 255 / 60%);
        }

        .swiper-button-next,
        .swiper-button-prev {
            position: absolute;
            top: 64%;
            transform: translateY(-50%);
            z-index: 20;
            color: #fff;
            margin-top: 0 !important;
        }

        .swiper-button-next {
            right: 0;
        }

        .swiper-button-prev {
            left: 0;
        }

        .swiper-button-prev:after,
        .swiper-button-next:after {
            font-size: 33px;
        }

        /* 淡出动画 */
        .fade-out {
            animation: fadeOut 1s forwards;
        }

        /* 淡入动画 */
        .fade-in {
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeOut {
            from {
                opacity: 0.8;
            }

            to {
                opacity: 0.6;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0.6;
            }

            to {
                opacity: 0.8;
            }
        }

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

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

            .content {
                width: 58vw;
                height: 68vh;
            }

            .swiper-button-next,
            .swiper-button-prev {
                top: 68%;
            }
        }

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

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

            .content {
                width: 56vw;
                height: 68vh;
            }
        }

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

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

            .content {
                width: 54vw;
                height: 50vh;
            }
        }
    </style>
</head>

<body>
    <div class="" id="indexcygyy" :class="{ 'fade-out': fadeOut, 'fade-in': fadeIn }"
        :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
        <div class="backbutton" @click="back">
            <img src="images/backlogo.png" alt="">
            <span>返回</span>
        </div>
        <div class="topbg"></div>
        <div class="top">
            <div class="logo" @click="goIndex">
                <img src="images/nalogo.png" alt="">
                <span>重庆市南岸区人民政府</span>
            </div>
            <ul class="menu">
                <li :class="{ active: currentTab == tab.id }" v-for="(tab, index)  in this.titleList" :key="index"
                    @click="menuChange(tab.id)" :style="{width:tab.textwidth+'px'}">
                    <span>{{tab.title}}</span>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="title">{{currentTitle}}</div>
            <img src="images/cygyyline.png" alt="" class="line">
            <div class="text">{{parkDesc?parkDesc.slice(0,200):''}}<span
                    v-if="parkDesc && parkDesc.length > 180">...</span>
                <span v-if="parkDesc && parkDesc.length > 180" style="color: #E5C999;cursor: pointer;"
                    @click="cheakmore">详情>></span>
            </div>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide list" v-for="(item,index) in swiperList"
                        @click="goToLink('ztcrdetail.html?ztid=' + item.id)">
                        <div class="title" :title="item.carrierName">{{item.application}}</div>
                        <div class="slidecontent">{{item.carrierName}}</div>
                        <img :src="item.logo" alt="" v-if="item.logo">
                        <img src="images/indexztcrno.png" alt="" v-else>
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="more" @click="cheakmore">查看更多>></div>
        </div>

    </div>
</body>
<script src="swiper/swiper-bundle.js"></script>
<script>
    // 初始化Vue实例
    new Vue({
        el: '#indexcygyy',
        data: function () {
            return {
                reqPtah: '',
                currentTab: -1,
                titleList: [],
                currentTitle: '',
                parkDesc: '',
                swiperList: [
                ],
                backgroundImage: 'images/indexcygyy.png',
                fadeOut: false,
                fadeIn: false
            };
        },
        created() {
        },
        mounted() {
        },
        methods: {
            goIndex() {
                window.location.href = "indexsyyg.html"
            },
            menuChange(id) {
                this.getDetailData(id);
                this.currentTab = id;
                this.getSellBuild(id);
                // if (id == 4) {
                //     var bgClass = `bg-npxq`;
                // } else if (id == 6) {
                //     var bgClass = `bg-dxkjy`;
                // } else if (id == 5) {
                //     var bgClass = `bg-ylcxg`;
                // } else {
                //     var bgClass = `bg-cygyy`;
                // }
                // $('#indexcygyy').removeClass();
                // $('#indexcygyy').addClass(bgClass);
                //         .bg-dxkjy {
                //     background-image: url() !important;
                // }

                // .bg-npxq {
                //     background-image: url() !important;
                // }

                // .bg-ylcxg {
                //     background-image: url(images/bg-ylcxg.jpg) !important;
                // }
                this.fadeOut = true;
                setTimeout(() => {
                    if (id == 4) {
                        this.backgroundImage = 'images/bg-npxq.png';
                    } else if (id == 6) {
                        this.backgroundImage = 'images/bg-dxkjy.png';
                    } else if (id == 5) {
                        this.backgroundImage = 'images/bg-ylcxg.jpg';
                    } else {
                        this.backgroundImage = 'images/indexcygyy.png';
                    }

                    this.fadeOut = false;
                    this.fadeIn = true;
                    setTimeout(() => {
                        this.fadeIn = false;
                    }, 1000);
                }, 1000);
            },
            back() {
                window.location.href = "indexsyyg.html"
            },
            cheakmore() {
                window.location.href = "syyggyy.html?id=" + this.currentTab;
            },
            goToLink(url) {
                if (url) {
                    window.location.href = url;
                }
            },
            getSellBuild(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/sellBuild",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": 1,
                        "pageSize": 1000,
                        "parkId": id
                    }),
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        let dataList = data.list;
                        dataList.forEach(function (d) {
                            d.logo = d.imgUrl ? d.imgUrl.split(",")[0] : '';
                        });
                        that.swiperList = dataList;
                    }
                });
            },
            getParkData() {
                let that = this;
                $.ajax({
                    url: conpath + "/parkData/",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        data.forEach(function (item) {
                            item.subtitleList = item.subtitle ? item.subtitle.split(",") : [];
                            item.textwidth = item.title.length * 20;
                        })
                        that.titleList = data;
                        console.log(that.titleList)
                    }
                })
            },
            getDetailData(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/parkData/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        that.currentTitle = data.title;
                        document.title = that.currentTitle;
                        that.parkDesc = data.desc ? data.desc : '';
                    }
                })
            }
        },
        mounted() {
            const url = new URL(window.location.href);
            const id = url.searchParams.get('id');
            this.currentTab = id;
            this.getSellBuild(id);
            this.getDetailData(id);
            this.getParkData();
            if (id == 4) {
                var bgClass = `bg-npxq`;
            } else if (id == 6) {
                var bgClass = `bg-dxkjy`;
            } else if (id == 5) {
                var bgClass = `bg-ylcxg`;
            } else {
                var bgClass = `bg-cygyy`;
            }
            $('#indexcygyy').removeClass();
            $('#indexcygyy').addClass(bgClass);
            this.$nextTick(() => {
                var swiper = new Swiper(".mySwiper", {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            })
        }
    });

</script>

</html>