CQ_JD
/
nazw


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/syygggy.css">
    <!-- 引入 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>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
    </script>
    <script src="js/urljson.js"></script>
    <style>
        .toplogo img {
            margin-bottom: 17px;
        }

        .contentright {
            width: 50vw;
            height: 1384px;
        }

        .zwsj {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cyfb {
            display: -webkit-box;
            line-height: 20px;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            word-break: break-all;
            cursor: pointer;
        }

        #ggyq>.top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #B7C7DC;
            background: #FFFFFF;
        }

        .btnrlt {
            background-image: url(images/btn-cyrlt.png);
            background-size: 100% 100%;
            width: 250px;
            height: 98px;
            font-weight: bold;
            font-size: 30px;
            color: #FFFFFF;
            text-shadow: 3px 5px 7px rgba(11, 58, 165, 0.43);
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 100;
            text-align: center;
            line-height: 84px;
            cursor: pointer;
        }

        #scrollContainer {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }

        .scrollContent {
            animation: scroll 10s infinite;
        }

        @keyframes scroll {
            0% {
                transform: translateY(100%);
            }

            100% {
                transform: translateY(-100%);
            }
        }
    </style>
</head>

<body>
    <div id="ggyq" style="position: relative;">
        <div class="btnrlt">产业热力图</div>
        <div class="top">
            <div class="toplogo">
                <img src="images/gyylogo.png" alt="">
                <span>{{this.jbqk.title}}</span>
            </div>
            <div class="backbutton" @click="window.history.go(-1)">
                <img src="images/back1.png" alt="">
                <span>返回</span>
            </div>
        </div>
        <div style="display: flex;">
            <div class="contentleft">
                <div class="title">
                    <img src="images/gyy-title1.png" alt="">
                    <span>园区简介</span>
                </div>
                <div class="yqjj">
                    <div class="zwsj" v-if="!this.parkDesc.length">暂无数据</div>
                    {{parkDesc?parkDesc.slice(0,160):''}}<span v-if="parkDesc && parkDesc.length > 160">...</span>
                    <span v-if="parkDesc && parkDesc.length > 160" style="color: #186FF0;cursor: pointer;"
                        @click="cheakmore">更多>></span>
                </div>
                <div class="title">
                    <img src="images/gyy-title1.png" alt="">
                    <span>基本情况</span>
                </div>
                <div class="jbqk">
                    <div class="list" style="background-image: url(images/jbqk1.png);">
                        <p>总面积</p>
                        <p><span id="totalSpace">-</span><span>平方公里</span></p>
                    </div>
                    <div class="list" style="background-image: url(images/jbqk2.png);">
                        <p>建成面积 </p>
                        <p><span id="buildSpace">-</span><span>平方公里</span></p>
                    </div>
                    <div class="list" style="background-image: url(images/jbqk3.png);">
                        <p>产业分布</p>
                        <span class="cyfb" :title="jbqk.industry">{{this.jbqk.industry?this.jbqk.industry:'- '}}</span>
                    </div>
                </div>
                <div class="title">
                    <img src="images/gyy-title8.png" alt="">
                    <span>便企服务站</span>
                </div>
                <div class="tsfw">
                    <div class="list" @click="goToLink('dqfw.html')"><img src="images/tsfw1.png" alt="">
                        <span>党群服务</span>
                    </div>
                    <div class="list" @click="window.open('https://www.cqna.gov.cn/zczs/')">
                        <img src="images/tsfw3.png" alt=""><span>政策通</span>
                    </div>
                    <div class="list" @click="goToLink('tsfw.html')"><img src="images/tsfw5.png" alt="">
                        <span>特色服务</span>
                    </div>
                    <div class="list" @click="goToLink('qysmzq.html')"><img src="images/tsfw4.png" alt="">
                        <span>生命周期</span>
                    </div>
                    <div class="list" @click="goToLink('rcfw.html')"><img src="images/tsfw6.png" alt="">
                        <span>人才服务</span>
                    </div>
                    <div class="list" @click="goToLink('znxz.html')"><img src="images/tsfw2.png" alt="">
                        <span>智能选址</span>
                    </div>
                    <div class="list" @click="goToLink('wybdb.html')"><img src="images/tsfw7.png" alt="">
                        <span>帮代办</span>
                    </div>
                    <div class="list" @click="goToLink('wyyy.html')"><img src="images/tsfw8.png" alt="">
                        <span>延时办</span>
                    </div>
                </div>
                <!-- <div class="title" style="margin-left: 5px;">
                    <img src="images/gyy-title2.png" alt="">
                    <span>区位优势</span>
                </div>
                <div class="qwys" style="height: 179px;">
                    <div class="zwsj" v-if="!this.qwysList.length">暂无数据</div>
                    <div class="list" v-for="(item,index) in this.qwysList" v-else>
                        <div class="name">
                            <img :src="item.logo" alt="">
                            <span>{{item.title}}</span>
                        </div>
                        <ul>
                            <li v-for="(item1,index1) in item.subtitleList">
                                {{item1}}
                            </li>
                        </ul>
                    </div>
                </div> -->
                <div style="display: flex;justify-content: space-between;height: 398px;">
                    <div class="left" style="height: 100%;">
                        <div class="title" style="display: flex;justify-content: space-between;">
                            <div style="display: flex;align-items: center;">
                                <img src="images/gyy-title7.png" alt="">
                                <span>载体租售</span>
                            </div>
                            <div class="more" @click="ztcrmore" v-if="this.ztcrList.length">更多>></div>
                        </div>
                        <div class="ztcr">
                            <div class="zwsj" v-if="!this.ztcrList.length">暂无数据</div>
                            <div class="list" v-for="(item,index) in ztcrList"
                                @click="goToLink('ztcrdetail.html?ztid=' + item.id)" v-else>
                                <div class="bg">
                                    <img :src="item.logo" alt="" v-if="item.logo">
                                    <img src="images/ztcrlno.png" alt="" v-else>
                                    <div class="number">{{item.space}}&nbsp;㎡</div>
                                </div>
                                <div class="title" :title="item.carrierName">{{item.application}}</div>
                                <div class="content">{{item.carrierName}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="right" style="height: 100%;">
                        <div class="title" style="display: flex;justify-content: space-between;">
                            <div style="display: flex;align-items: center;">
                                <img src="images/gyy-title6.png" alt="">
                                <span>土地出让</span>
                            </div>
                            <div class="more" @click="tdcrmore" v-if="this.tdcrList.length">更多>></div>
                        </div>
                        <div class="tdcr">
                            <div class="top">
                                <div class="left">地块编号</div>
                                <div class="right">占地面积（亩）</div>
                            </div>
                            <div class="zwsj" v-if="!this.tdcrList.length">暂无数据</div>
                            <div class="content" v-else>
                                <div class="list" v-for="(item,index) in tdcrList"
                                    @click="goToLink('tdcr.html?tdid=' + item.id)">
                                    <div class="left">{{item.landName}}</div>
                                    <div class="right">{{item.landArea}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div class="left" style="width: 49.5%;">
                        <div class="title">
                            <img src="images/gyy-title3.png" alt="">
                            <span>园区活动</span>
                        </div>
                        <div class="yqhd">
                            <div class="zwsj" v-if="!this.yqhdList.length">暂无数据</div>
                            <ul v-else>
                                <li v-for="(item,index) in yqhdList"><span>{{item.title}}</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="right" style="width: 49.5%;">
                        <div class="title">
                            <img src="images/gyy-title5.png" alt="">
                            <span>政策文件</span>
                        </div>
                        <div class="zcwj">
                            <ul v-if="zcwjList && zcwjList.length > 0">
                                <li v-for="(item,index) in zcwjList" @click="goToLink(item.link)">
                                    <div>{{item.title}}</div>
                                </li>
                            </ul>
                            <div class="zwsj" v-else>暂无数据</div>
                        </div>
                    </div>
                </div>
                <!-- <div style="display: flex;justify-content: space-evenly;margin-bottom: 20px;">
                    <div class="left">
                        <div class="title">
                            <img src="images/gyy-title8.png" alt="">
                            <span>特色服务</span>
                        </div>
                        <div class="tsfw">
                            <div class="list" @click="goToLink('dqfw.html')"><img src="images/tsfw1.png" alt="">
                                <span>党群服务</span>
                            </div>
                            <div class="list" @click="goToLink('znxz.html')"><img src="images/tsfw2.png" alt="">
                                <span>智能选址</span>
                            </div>
                            <div class="list" @click="window.open('https://www.cqna.gov.cn/zczs/')"><img
                                    src="images/tsfw3.png" alt=""> <span>南岸政策通</span></div>
                            <div class="list" @click="goToLink('tsfw.html')"><img src="images/tsfw4.png" alt="">
                                <span>便企服务站</span>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="title">
                            <img src="images/gyy-title9.png" alt="">
                            <span>服务事项清单</span>
                        </div>
                        <div class="fwsxqd">
                            <div class="zwsj" v-if="!this.fwsxqdList.length">暂无数据</div>
                            <div v-for="(item,index) in fwsxqdList" class="list" v-else>
                                <div v-if="index==0" style="background: #DEEDFF;
border: 1px solid #4B98F6;color: #4B98F6;" @click="goToLink('tsfw.html')">
                                    <div v-if="item.title.length == 6"
                                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;white-space: nowrap;">
                                        <span>{{item.title.slice(0,4)}}</span><span>{{item.title.slice(4,6)}}</span>
                                    </div>
                                    <div v-else>{{item.title}}</div>
                                </div>
                                <div v-if="index==1" style="background: #CEEBE8;
border: 1px solid #62B9AF;color: #62B9AF;" @click="goToLink('tsfw.html')">
                                    <div v-if="item.title.length == 6"
                                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;white-space: nowrap;">
                                        <span>{{item.title.slice(0,4)}}</span><span>{{item.title.slice(4,6)}}</span>
                                    </div>
                                    <div v-else>{{item.title}}</div>
                                </div>
                                <div v-if="index==2" style="background: #F7EBE0;
border: 1px solid #EFA34E;color: #EFA34E;" @click="goToLink('tsfw.html')">
                                    <div v-if="item.title.length == 6"
                                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;white-space: nowrap;">
                                        <span>{{item.title.slice(0,4)}}</span><span>{{item.title.slice(4,6)}}</span>
                                    </div>
                                    <div v-else>{{item.title}}</div>
                                </div>
                                <div v-if="index==3" style="background: #DFF8E2;
                                border: 1px solid #6CB179;color: #6CB179;" @click="goToLink('tsfw.html')">
                                    <div v-if="item.title.length == 6"
                                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;white-space: nowrap;">
                                        <span>{{item.title.slice(0,4)}}</span><span>{{item.title.slice(4,6)}}</span>
                                    </div>
                                    <div v-else>{{item.title}}</div>
                                </div>
                                <div v-if="index==4" style="background: #F7EBE0;
border: 1px solid #EFA34E;color: #EFA34E;" @click="goToLink('tsfw.html')">
                                    <div v-if="item.title.length == 6"
                                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;white-space: nowrap;">
                                        <span>{{item.title.slice(0,4)}}</span><span>{{item.title.slice(4,6)}}</span>
                                    </div>
                                    <div v-else>{{item.title}}</div>
                                </div>

                                <div v-if="index==5" style="background: #DEEDFF;
border: 1px solid #4B98F6;color: #4B98F6;" @click="goToLink('qysmzq.html')">
                                    <div v-if="item.title.length == 6"
                                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;white-space: nowrap;">
                                        <span>{{item.title.slice(0,4)}}</span><span>{{item.title.slice(4,6)}}</span>
                                    </div>
                                    <div v-else>{{item.title}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <div class="title">
                    <img src="images/gyy-title4.png" alt="">
                    <span>明星企业</span>
                </div>
                <div class="mxqy" id="scrollContainer">
                    <div class="zwsj" v-if="!this.mxqyList.length">暂无数据</div>
                    <ul id="auto-scroll-div" :class="{scrollContent:this.mxqyList.length>12}" v-else>
                        <li v-for="(item,index) in mxqyList" @click="item.link?window.open(item.link):''">
                            <img :src="item.logo" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="contentright" id="mapcontainer">
            </div>
        </div>
    </div>
</body>
<script>
    // 初始化Vue实例
    new Vue({
        el: '#ggyq',
        data: function () {
            return {
                pageSize: 20,
                jbqk: {},
                qwysList: [],
                yqhdList: [],
                mxqyList: [],
                tsfwList: [],
                zcwjList: [],
                ztcrList: [],
                tdcrList: [],
                fwsxqdList: [],
                firstPoint: '',
                wordPoint: '',
                parkDesc: ''
            };
        },
        mounted() {
            const url = new URL(window.location.href);
            const id = url.searchParams.get('id');
            this.getJBQK(id);
            this.getDetail(id);
            this.getSellBuild(id);
            this.getSellLand(id);
            this.getParkActivity(id);
        },
        methods: {
            cheakmore() { },
            goIndex() {
                window.location.href = "indexsyyg.html"
            },
            ztcrmore() {
                const url = new URL(window.location.href);
                const id = url.searchParams.get('id');
                window.location.href = "ztcrlist.html?id=" + id;
            },
            tdcrmore() {
                const url = new URL(window.location.href);
                const id = url.searchParams.get('id');
                window.location.href = "tdcrlist.html?id=" + id;
            },
            goToLink(url) {
                const addr = new URL(window.location.href);
                const id = addr.searchParams.get('id');
                if (url) {
                    window.location.href = url + '?id=' + id;
                }
            },
            getJBQK(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/parkData/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var pointlist = data.addr.split('@');
                        that.jbqk = data;
                        that.parkDesc = data.desc;
                        document.title = that.jbqk.title;
                        that.loadMap(data.addr);
                        const time = 500;
                        // 总面积
                        const totalSpaceElement = document.getElementById('totalSpace');
                        that.animateValue(totalSpaceElement, 0, data.totalArea ? parseFloat(data.totalArea).toFixed(2) : '-', time);
                        // 建成面积
                        const buildSpaceElement = document.getElementById('buildSpace');
                        that.animateValue(buildSpaceElement, 0, data.buildArea ? parseFloat(data.buildArea).toFixed(2) : '-', time);
                    }
                })
            },
            loadMap(points) {
                let map = new BMap.Map("mapcontainer");
                map.enableScrollWheelZoom();// 启用滚轮缩放
                map.enableDragging(); // 启用拖拽功能
                const addr = new URL(window.location.href);
                const id = addr.searchParams.get('id');
                // 设定中心点和地图级别
                if (id == 1) {
                    map.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
                    // var marker = new BMap.Marker(new BMap.Point(106.651444, 29.48682));        // 创建标注    
                    // map.addOverlay(marker);
                } else if (id == 2) {
                    map.centerAndZoom(new BMap.Point(106.76723874457288, 29.573276880811712), 14);
                } else if (id == 3) {
                    map.centerAndZoom(new BMap.Point(106.69517131217539, 29.51577313312822), 15);
                } else if (id == 4) {
                    map.centerAndZoom(new BMap.Point(106.559829995157, 29.501581648208534), 15);
                } else if (id == 5) {
                    map.centerAndZoom(new BMap.Point(106.72194027111843, 29.513690776940248), 16);
                } else if (id == 6) {
                    map.centerAndZoom(new BMap.Point(106.70580793222035, 29.514020426917684), 16);
                } else {
                    map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
                }
                map.setMapType(BMAP_SATELLITE_MAP);
                if (!points) return;
                let pointList = points.split('@');
                let result = [];
                pointList.forEach(function (point) {
                    let arr = point.split(',');
                    result.push(new BMap.Point(arr[0], arr[1]));
                });
                // 创建多边形
                let polygon = new BMap.Polygon(result, {
                    strokeColor: "blue",
                    strokeWeight: 4,
                    strokeOpacity: 0.5,
                    strokeStyle: "solid",
                    fillColor: "#4B98F6",
                    fillOpacity: 0.3
                });
                // 将多边形添加到地图中
                map.addOverlay(polygon);

                // 创建文本标签
                if (id == 1) {
                    var opts = {
                        position: new BMap.Point(106.644876, 29.491868), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                } else if (id == 2) {
                    var opts = {
                        position: new BMap.Point(106.75723874457288, 29.603376880811712), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                } else if (id == 3) {
                    var opts = {
                        position: new BMap.Point(106.68517131217539, 29.53777313312822), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                } else if (id == 4) {
                    var opts = {
                        position: new BMap.Point(106.552829995157, 29.520581648208534), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                } else if (id == 5) {
                    var opts = {
                        position: new BMap.Point(106.71894027111843, 29.522690776940248), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                } else if (id == 6) {
                    var opts = {
                        position: new BMap.Point(106.70480793222035, 29.523020426917684), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                } else {
                    var opts = {
                        position: new BMap.Point(106.644876, 29.491868), // 指定文本标签所在的地理位置
                        offset: new BMap.Size(10, 10) // 设置文本偏移量
                    };
                }
                // 创建文本标签对象，并添加到地图
                var label = new BMap.Label(this.jbqk.title, opts);
                // 自定义文本标签样式
                label.setStyle({
                    color: "#FFFFFF",
                    fontSize: "22px",
                    height: "auto",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑",
                    fontWeight: 'bold',
                    backgroundColor: 'transparent',
                    border: 'none',
                    textShadow: '0 0 4px #4B97F5',
                    textStrokeColor: "#4B97F5", // 文本描边颜色
                    textStrokeWidth: "4px", // 文本描边宽度
                });
                map.addOverlay(label);
            },
            getDetail(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/parkData/details/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        // 特色服务
                        that.tsfwList = data.filter(item => item.moduleType === "1");
                        // 区位优势
                        that.qwysList = data.filter(item => item.moduleType === "2");
                        that.qwysList.forEach(item => {
                            if (item.subtitle) {
                                item.subtitleList = item.subtitle.split(",");
                            }
                        });
                        // 明星企业
                        that.mxqyList = data.filter(item => item.moduleType === "3");
                        // 特色服务
                        that.fwsxqdList = data.filter(item => item.moduleType === "4");
                        // 政策文件
                        that.zcwjList = data.filter(item => item.moduleType === "5");
                    }
                });
            },
            getSellBuild(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/sellBuild",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": 1,
                        "pageSize": that.pageSize,
                        "parkId": id
                    }),
                    dataType: "json",
                    success: function (data) {
                        let dataList = data.list;
                        dataList.forEach(function (d) {
                            d.logo = d.imgUrl ? d.imgUrl.split(",")[0] : '';
                        });
                        that.ztcrList = dataList.splice(0, 6);
                    }
                });
            },
            getSellLand(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/sellLand",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": 1,
                        "pageSize": that.pageSize,
                        "parkId": id
                    }),
                    dataType: "json",
                    success: function (data) {
                        let dataList = data.list;
                        that.tdcrList = dataList;
                    }
                });
            },
            getParkActivity(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/parkActivity",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": 1,
                        "pageSize": that.pageSize,
                        "parkId": id
                    }),
                    dataType: "json",
                    success: function (data) {
                        let dataList = data.list;
                        that.yqhdList = dataList;
                    }
                });
            },
            animateValue(obj, start, end, duration) {
                let startTimestamp = null;
                const step = (timestamp) => {
                    if (!startTimestamp) startTimestamp = timestamp;
                    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                    obj.innerHTML = Math.floor(progress * (end - start) + start);
                    if (progress < 1) {
                        window.requestAnimationFrame(step);
                    } else {
                        obj.innerHTML = end;
                        obj.classList.remove('animate');
                    }
                };
                obj.classList.add('animate');
                window.requestAnimationFrame(step);
            }
        }
    });
</script>
<script>
    // const scrollContent = document.querySelector('.scrollContent');

    // function generateContent() {
    //     const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...';
    //     let generatedContent = '';
    //     for (let i = 0; i < 5; i++) { // 生成5次以创建循环效果
    //         generatedContent += content;
    //     }
    //     scrollContent.innerHTML = generatedContent;
    // }

    // generateContent();
</script>

</html>