|
|
@@ -1,450 +0,0 @@
|
|
|
-<!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>
|
|
|
- <script src="js/echarts.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>
|
|
|
- <script src="js/nanan.js" type="text/javascript"></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;
|
|
|
- }
|
|
|
-
|
|
|
- @font-face {
|
|
|
- font-family: 'Source Han Sans SC';
|
|
|
- src: url('fonts/MSYHL.TTC');
|
|
|
- font-weight: normal;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .backbutton img {
|
|
|
- margin-right: 0.625rem;
|
|
|
- }
|
|
|
-
|
|
|
- #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;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- /* min-width: 402px; */
|
|
|
- height: 100%;
|
|
|
- background: rgb(4 20 40 / 50%);
|
|
|
- display: flex;
|
|
|
- border-radius: 1.525rem;
|
|
|
- }
|
|
|
-
|
|
|
- .list {
|
|
|
- width: calc(30% - 40px);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- border-radius: 1.17rem;
|
|
|
- padding: 20px;
|
|
|
- margin-right: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .map {
|
|
|
- width: 40%;
|
|
|
- height: 70%;
|
|
|
- margin: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- border-left: 1px solid rgba(214, 225, 240, .5);
|
|
|
- border-right: 1px solid rgba(214, 225, 240, .5);
|
|
|
- }
|
|
|
-
|
|
|
- #mapEcharts {
|
|
|
- width: 70%;
|
|
|
- height: 70%;
|
|
|
- padding-top: 10%;
|
|
|
- position: relative;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- .dec {
|
|
|
- width: 30%;
|
|
|
- padding-top: 3.5%;
|
|
|
- padding-left: 2rem;
|
|
|
- padding-right: 2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .dec>div {
|
|
|
- text-indent: 2em;
|
|
|
- color: #fff;
|
|
|
- font-size: 1.17rem;
|
|
|
- line-height: 35px;
|
|
|
- padding-top: 2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .dec>span {
|
|
|
- background: #176ED0;
|
|
|
- border-radius: 10px;
|
|
|
- color: #fff;
|
|
|
- display: inline-block;
|
|
|
- padding: 20px 25px;
|
|
|
- font-size: 1.17rem;
|
|
|
- }
|
|
|
-
|
|
|
- .mapdec {
|
|
|
- color: #fff;
|
|
|
- font-size: 0.925rem;
|
|
|
- text-align: center;
|
|
|
- padding-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- color: #FFFFFF;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-bottom: 45px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .subtitle {
|
|
|
- font-size: 1.725rem;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .backbutton {
|
|
|
- width: 117px;
|
|
|
- height: 42px;
|
|
|
- background: url(images/buttonbg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- border-radius: 10px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 10px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .backbutton img {
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .contentList {
|
|
|
- height: calc(100% / 6);
|
|
|
- justify-content: space-between;
|
|
|
- line-height: normal;
|
|
|
- background-color: transparent;
|
|
|
- color: #FFFFFF !important;
|
|
|
- font-size: 1.17rem;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- letter-spacing: 2px;
|
|
|
- padding: 0 10px;
|
|
|
- border-radius: 10px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .contentList:hover {
|
|
|
- background-color: rgba(23, 110, 208, .5);
|
|
|
- font-size: 1.37rem;
|
|
|
- }
|
|
|
-
|
|
|
- .listRight {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .listRight>img {
|
|
|
- width: 0.7rem;
|
|
|
- height: 1.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .el-collapse-item__content {
|
|
|
- padding: 0 15px 15px 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .listLeft {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .collapseItem {
|
|
|
- color: #DFDFDF;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- font-size: 0.9rem;
|
|
|
- }
|
|
|
-
|
|
|
- .link {
|
|
|
- cursor: pointer;
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .listLeft>img {
|
|
|
- width: 3rem;
|
|
|
- height: 3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- .contentBox {
|
|
|
- width: 80%;
|
|
|
- height: 75%;
|
|
|
- padding-top: 5%;
|
|
|
- padding-left: 10%;
|
|
|
- padding-right: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- /* 淡出动画 */
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width:1400px) {
|
|
|
-
|
|
|
- html,
|
|
|
- body {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width:1300px) {
|
|
|
-
|
|
|
- html,
|
|
|
- body {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <div class="" id="indexcygyy" :class="{ 'fade-out': fadeOut, 'fade-in': fadeIn }"
|
|
|
- :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
|
|
|
- <div class="contentBox">
|
|
|
- <div class="title">
|
|
|
- <span class="subtitle">产业园区</span>
|
|
|
- <div class="backbutton" @click="window.history.go(-1)">
|
|
|
- <img src="images/backlogo.png" alt="">
|
|
|
- <span>返回</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="list">
|
|
|
- <li v-for="(tab, index) in this.titleList" :key="index" class="contentList"
|
|
|
- @click="golink(`indexsyy.html?id=${tab.id}`)">
|
|
|
- <div class="listLeft">
|
|
|
-     {{tab.title}}
|
|
|
- </div>
|
|
|
- <div class="listRight">
|
|
|
- <img src="images/arrowR.png" />
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </div>
|
|
|
- <div class="map">
|
|
|
- <div id="mapEcharts"></div>
|
|
|
- <div class="mapdec">南岸区产业布局图</div>
|
|
|
- </div>
|
|
|
- <div class="dec">
|
|
|
- <span>产业简介及发展重点</span>
|
|
|
- <div>
|
|
|
-
|
|
|
- 重庆经开区的“四园一港”是指南坪西区产业园、长江绿色创新产业园、先进汽车电子产业园、茶园工业园以及迎龙创新港。这一概念是为了形成高质量发展的区域空间格局，推动经济社会高质量发展，培育推动经济社会产生高质量变革的新质生产力，壮大经济发展新动能、新方式、新引擎。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="dialog">
|
|
|
- <div class="dialogHeader">
|
|
|
- <div class="dialogTitle">明星企业</div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
-</body>
|
|
|
-<script>
|
|
|
- // 初始化Vue实例
|
|
|
- new Vue({
|
|
|
- el: '#indexcygyy',
|
|
|
- data: function () {
|
|
|
- return {
|
|
|
- reqPtah: '',
|
|
|
- currentTab: -1,
|
|
|
- contentList: [],
|
|
|
- currentTitle: '',
|
|
|
- parkDesc: '',
|
|
|
- parkName: '',
|
|
|
- titleList: [],
|
|
|
- backgroundImage: 'images/yqgkBg.png',
|
|
|
- fadeOut: false,
|
|
|
- fadeIn: false,
|
|
|
- id: null
|
|
|
- };
|
|
|
- },
|
|
|
- created() { },
|
|
|
- mounted() {
|
|
|
- const url = new URL(window.location.href);
|
|
|
- this.id = url.searchParams.get('id');
|
|
|
- this.getParkData()
|
|
|
- if (this.id == 4) {
|
|
|
- this.backgroundImage = 'images/bg-npxq.png';
|
|
|
- } else if (this.id == 6) {
|
|
|
- this.backgroundImage = 'images/bg-dxkjy.png';
|
|
|
- } else if (this.id == 5) {
|
|
|
- this.backgroundImage = 'images/bg-ylcxg.jpg';
|
|
|
- } else {
|
|
|
- this.backgroundImage = 'images/indexsyyg.png';
|
|
|
- }
|
|
|
- var myChart = echarts.init(document.getElementById('mapEcharts'));
|
|
|
- console.log(document.getElementById('mapEcharts'));
|
|
|
- // 注册地图(数据放在axios返回对象的data中哦)
|
|
|
- echarts.registerMap('nanan', nanan)
|
|
|
- window.addEventListener("resize", function () {
|
|
|
- myChart.resize();
|
|
|
- })
|
|
|
- myChart.setOption({
|
|
|
- series: [{
|
|
|
- type: 'map',
|
|
|
- map: 'nanan',
|
|
|
- regions: []
|
|
|
- }]
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goIndex() {
|
|
|
- window.location.href = "indexsyyg.html"
|
|
|
- },
|
|
|
- back() {
|
|
|
- window.location.href = "indexsyyg.html"
|
|
|
- },
|
|
|
- golink(hrf, val) {
|
|
|
- window.location.href = hrf;
|
|
|
- },
|
|
|
- getParkData() {
|
|
|
- let that = this;
|
|
|
- $.ajax({
|
|
|
- url: conpath + "/parkData/",
|
|
|
- type: "get",
|
|
|
- dataType: "json",
|
|
|
- success: function (data) {
|
|
|
- const arr = []
|
|
|
- data.forEach(function (item) {
|
|
|
- item.subtitleList = item.subtitle ? item.subtitle.split(",").slice(0, 3) : [];
|
|
|
- })
|
|
|
- arr.push(data[2], data[0], data[3], data[1], data[4], data[5])
|
|
|
- that.titleList = arr;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-</script>
|
|
|
-
|
|
|
-</html>
|
tml