Merge branch 'master' into feature/20220929首页静态开发

digital-park-web/digital-park/src/components/Footer.vue

@@ -0,0 +1,133 @@
+<!-- 底部导航 -->
+<template>
+    <div class="footer">
+        <section class="nav">
+            <div>
+                <router-link v-for="item in nav" :key="item.name" :to="item.path">
+                    {{ item.name }}
+                </router-link>
+            </div>
+
+            <!-- <ul>
+                <li
+                    :class="['pointer', index == 0 ? 'is_active' : '']"
+                    v-for="(item, index) in nav"
+                    :key="index"
+                >
+                    {{ item.name }}
+                </li>
+            </ul> -->
+        </section>
+
+        <section class="footer_info">
+            <div class="title">小昆山经济开发区</div>
+            <div class="info">
+                <div>
+                    <span>上海市·市辖区·松江区·小昆山镇</span>
+                    <span>邮编：100080</span>
+                    <span>联系电话：010-53616906 / 18616852496（卢先生）</span>
+                    <span>商务邮箱：servive@brixd.com</span>
+                </div>
+                <div>
+                    <span>版权所有©️2015-现在 上海禾获仁网络科技有限公司</span>
+                    <span>沪ICP备2022025118号 沪B2-20200177 沪公网安备31010402001838号</span>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            nav: [
+                {
+                    name: "园区首页",
+                    path: "/index",
+                },
+                // {
+                //     name: "招商服务",
+                // },
+                {
+                    name: "园区企业",
+                    path: "/2",
+                },
+                {
+                    name: "园区资讯问答",
+                    path: "/3",
+                },
+                {
+                    name: "我的企业",
+                    path: "/4",
+                },
+            ],
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.footer {
+    @include size(100%, 340px);
+    background: #04102d;
+}
+.nav {
+    width: 100%;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 40px 0 34px;
+    @include border-box;
+    > div {
+        width: $wrapWidth;
+        @include flex(row, flex-start, center, wrap);
+        margin: 0 auto;
+        @include font(24px, $color-white);
+        a {
+            @include font(24px, $color-white);
+            margin-right: 50px;
+        }
+        a:hover {
+            color: #99a9b8;
+        }
+        .router-link-active {
+            color: #99a9b8;
+        }
+    }
+}
+.footer_info {
+    width: $wrapWidth;
+    margin: 0 auto;
+    .title {
+        @include font(24px, $color-white);
+        padding: 38px 0 24px;
+        @include border-box;
+    }
+    .info {
+        @include font(16px, $color-white);
+        @include flex(row, flex-start, flex-end, wrap);
+        > div {
+            flex: 1;
+            @include flex(column, center, flex-start, wrap);
+            span {
+                margin-bottom: 4px;
+            }
+        }
+    }
+}
+</style>

digital-park-web/digital-park/src/components/Header.vue

@@ -3,7 +3,7 @@
     <div class="header">
         <div class="wrap">
             <section class="wrap_left">
-                <img src="" alt="" />
+                <img src="@assets/image/index/logo.png" alt="logo" />
                 小昆山数据可视化平台
             </section>
             <section class="wrap_right">
@@ -13,7 +13,7 @@
                     </router-link>
                 </div>
                 <section class="enterprise pointer">
-                    <img src="" alt="" />
+                    <img src="@assets/image/index/icon_company.png" alt="icon_company" />
                     我的企业
                 </section>
             </section>
@@ -86,7 +86,6 @@ export default {
         @include flex(row, center, center, wrap);
         img {
             @include size(45px, 45px);
-            background: rgb(10, 103, 139);
             margin-right: 10px;
         }
     }
@@ -122,7 +121,6 @@ export default {
         @include border-box;
         @include flex(row, center, center, wrap);
         img {
-            background: rgb(192, 251, 255);
             @include size(20px, 20px);
             margin-right: 10px;
         }

digital-park-web/digital-park/src/views/index/Advantage.vue

@@ -0,0 +1,242 @@
+<!-- 园区优势 -->
+<template>
+    <div class="product" id="anchor-advantage">
+        <div class="title">园区优势</div>
+        <section class="advantage">
+            <div class="tab_box">
+                <ul class="tab_ul">
+                    <li
+                        class="pointer"
+                        v-for="(item, index) in tabs"
+                        :key="index"
+                        @click="slideTo(index)"
+                    >
+                        {{ item }}
+                    </li>
+                </ul>
+            </div>
+
+            <div class="swiper-content">
+                <swiper ref="mySwiper" :options="swiperOption" class="show-swiper">
+                    <template v-for="(item, index) in list">
+                        <swiper-slide :key="index">
+                            <div class="swiper-item pointer" :style="setBg(item.imgUrl)">
+                                <span class="advantage_title">{{ item.title }}</span>
+                                <span class="subtitle">{{ item.subtitle }}</span>
+                            </div>
+                        </swiper-slide>
+                    </template>
+                </swiper>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
+import { pink } from "color-name";
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { swiper, swiperSlide },
+    data() {
+        //这里存放数据
+        return {
+            tabs: [
+                "资金优势",
+                "人才、科技依托优势",
+                "资讯服务优势",
+                "政策资源优势",
+                "低成本优势",
+                "功能配套优势",
+            ],
+            list: [
+                {
+                    title: "资金优势",
+                    subtitle:
+                        "整合各方资源，充分考虑创业者的需求，集合了研究开发、会议展览、成果交易、风险投资、信息传播、社区服务等完善的配套功能。",
+                    imgUrl: require("@assets/image/index/advantage_bg_1.png"),
+                },
+                {
+                    title: "人才、科技依托优势",
+                    subtitle:
+                        "整合各方资源，充分考虑创业者的需求，集合了研究开发、会议展览、成果交易、风险投资、信息传播、社区服务等完善的配套功能。",
+                    imgUrl: require("@assets/image/index/advantage_bg_2.png"),
+                },
+                {
+                    title: "资讯服务优势",
+                    subtitle:
+                        "整合各方资源，充分考虑创业者的需求，集合了研究开发、会议展览、成果交易、风险投资、信息传播、社区服务等完善的配套功能。",
+                    imgUrl: require("@assets/image/index/advantage_bg_3.png"),
+                },
+                {
+                    title: "政策资源优势",
+                    subtitle:
+                        "整合各方资源，充分考虑创业者的需求，集合了研究开发、会议展览、成果交易、风险投资、信息传播、社区服务等完善的配套功能。",
+                    imgUrl: require("@assets/image/index/advantage_bg_1.png"),
+                },
+                {
+                    title: "低成本优势",
+                    subtitle:
+                        "整合各方资源，充分考虑创业者的需求，集合了研究开发、会议展览、成果交易、风险投资、信息传播、社区服务等完善的配套功能。",
+                    imgUrl: require("@assets/image/index/advantage_bg_2.png"),
+                },
+                {
+                    title: "功能配套优势",
+                    subtitle:
+                        "整合各方资源，充分考虑创业者的需求，集合了研究开发、会议展览、成果交易、风险投资、信息传播、社区服务等完善的配套功能。",
+                    imgUrl: require("@assets/image/index/advantage_bg_3.png"),
+                },
+            ],
+            activeItemIndex: 1,
+            swiperOption: {
+                slidesPerView: "auto",
+                loop: true,
+                watchSlidesProgress: true,
+                // 设定slide与左边框的预设偏移量（单位px）
+                slidesOffsetBefore: 37,
+                // 设置slide之间的距离（单位px）
+                spaceBetween: 40,
+                centeredSlides: true,
+                init: false,
+                longSwipesRatio: 0.1,
+                touchReleaseOnEdges: true,
+                observer: true, // 修改swiper自己或子元素时，自动初始化swiper
+                observeParents: true, // 修改swiper的父元素时，自动初始化swiper
+                on: {
+                    progress: function() {
+                        for (let i = 0; i < this.slides.length; i++) {
+                            const slide = this.slides.eq(i);
+                            const slideProgress = this.slides[i].progress;
+                            const scale = 1 - Math.abs(slideProgress) / 5; // 缩放权重值，随着progress由中向两边依次递减，可自行调整
+                            slide.transform(`scale3d(${scale}, ${scale}, 1)`);
+                            // slide.transform(`translateY(-60px`);
+                        }
+                    },
+                    slideChange: function() {
+                        console.log(
+                            this.activeIndex >= 6 ? this.activeIndex - 6 : this.activeIndex
+                        );
+                    },
+                },
+            },
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {
+        swiper() {
+            return this.$refs.mySwiper.swiper;
+        },
+        // ...mapState({
+        //   activeItemIndex: state => state.activeIndex
+        // })
+    },
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        initSwiper() {
+            this.$nextTick(async () => {
+                await this.swiper.init(); // 现在才初始化
+                await this.swiper.slideTo(this.activeItemIndex);
+            });
+        },
+        slideTo(index) {
+            this.swiper.slideTo(index);
+        },
+        setBg(url) {
+            return { background: `url(${url}) no-repeat` };
+        },
+        changeIndex(index) {
+            this.activeItemIndex = index;
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {
+        this.initSwiper();
+    },
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.product {
+    @include size(100%, auto);
+    @include flex(column, space-between, center, null);
+    background: url("~@assets/image/index/bg_advantage.png") no-repeat;
+    background-size: 100% 100%;
+    padding-bottom: 100px;
+    @include border-box;
+}
+.title {
+    @include font(36px, $color-white);
+    padding: 60px 0 40px;
+    @include border-box;
+}
+.advantage {
+    width: 100%;
+}
+.tab_box {
+    width: 100%;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    @include border-box;
+}
+.tab_ul {
+    width: 1200px;
+    margin: 0 auto;
+    @include font(24px, #ffffff);
+
+    @include flex(row, center, center, null);
+    li {
+        padding-bottom: 30px;
+        border-bottom: 2px solid transparent;
+    }
+    li:hover {
+        border-bottom: 2px solid $color-white;
+    }
+    .is_active {
+        border-bottom: 2px solid $color-white;
+    }
+}
+.tab_ul > li + li {
+    margin-left: 60px;
+}
+.swiper-content {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    padding: 50px 0;
+    @include border-box;
+    .show-swiper {
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        .swiper-slide {
+            width: 800px;
+            // 表示所有属性都有动作效果，过度时间为0.4s，以慢速开始和结束的过渡效果
+            .swiper-item {
+                width: 100%;
+                height: 440px;
+                padding: 0 40px 30px;
+                background-size: 100% 100%;
+                @include border-box;
+                @include flex(column, flex-end, flex-start, null);
+            }
+            .advantage_title {
+                @include font(26px, #ffffff);
+                font-weight: 600;
+                margin-bottom: 10px;
+            }
+            .subtitle {
+                @include font(16px, #ffffff);
+                line-height: 30px;
+            }
+        }
+    }
+}
+</style>

digital-park-web/digital-park/src/views/index/Banner.vue

@@ -40,7 +40,8 @@ export default {
 //@import url(); 引入公共css类
 .banner {
     @include size(100%, 600px);
-    background: pink;
+    background: url("~@assets/image/index/banner.png") no-repeat;
+    background-size: 100% 100%;
     position: relative;
     .nav {
         z-index: 100;

digital-park-web/digital-park/src/views/index/Index.vue

@@ -1,8 +1,15 @@
 <template>
     <div class="home">
         <Banner></Banner>
-        <park-introduce></park-introduce>
-        <product></product>
+        <div>
+            <park-introduce :navLists="indexTab"></park-introduce>
+            <product></product>
+            <service></service>
+            <advantage></advantage>
+            <park-map></park-map>
+            <Footer></Footer>
+            <slide-nav :navLists="indexTab"></slide-nav>
+        </div>
     </div>
 </template>
 
@@ -10,6 +17,12 @@
 import Banner from "./Banner.vue";
 import ParkIntroduce from "./park-introduce/ParkIntroduce.vue";
 import Product from "./Product.vue";
+import Service from "./Service.vue";
+import Advantage from "./Advantage.vue";
+import ParkMap from "./ParkMap.vue";
+import Footer from "@components/Footer.vue";
+import SlideNav from "./SlideNav.vue";
+
 export default {
     metaInfo: {
         title: "园区首页", // set a title
@@ -18,9 +31,42 @@ export default {
         Banner,
         ParkIntroduce,
         Product,
+        Service,
+        Advantage,
+        ParkMap,
+        Footer,
+        SlideNav,
     },
     data() {
-        return {};
+        return {
+            indexTab: [
+                {
+                    name: "园区介绍",
+                    anchorName: "produce",
+                    imgUrl: require("@assets/image/index/icon_produce.png"),
+                },
+                {
+                    name: "主导产业",
+                    anchorName: "product",
+                    imgUrl: require("@assets/image/index/icon_product.png"),
+                },
+                {
+                    name: "招商服务",
+                    anchorName: "service",
+                    imgUrl: require("@assets/image/index/icon_service.png"),
+                },
+                {
+                    name: "园区优势",
+                    anchorName: "advantage",
+                    imgUrl: require("@assets/image/index/icon_advantage.png"),
+                },
+                {
+                    name: "园区地图",
+                    anchorName: "map",
+                    imgUrl: require("@assets/image/index/icon_map.png"),
+                },
+            ],
+        };
     },
     computed: {},
     mounted() {},
@@ -29,7 +75,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .home{
-        min-width: 1200px;
-    }
+.home {
+    min-width: $wrapWidth;
+    position: relative;
+}
 </style>

digital-park-web/digital-park/src/views/index/ParkMap.vue

@@ -1,18 +1,39 @@
 <!-- 园区地图 -->
 <template>
-    <div class="map"></div>
+    <div class="map" id="anchor-map">
+        <div class="title">园区地图</div>
+        <div class="map_box">
+            <baidu-map
+                class="bm_view"
+                ak="lVaszblsq2WBpnFMLDKM3eacxoDGKYf1"
+                :center="address"
+                :zoom="zoom"
+                :scroll-wheel-zoom="false"
+            >
+                <bm-marker :position="address"></bm-marker>
+            </baidu-map>
+        </div>
+    </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
+import BaiduMap from "vue-baidu-map/components/map/Map.vue";
+import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
 
 export default {
     //import引入的组件需要注入到对象中才能使用
-    components: {},
+    components: { BaiduMap, BmMarker },
     data() {
         //这里存放数据
-        return {};
+        return {
+            address: {
+                lng: 121.149813,
+                lat: 31.005265,
+            },
+            zoom: 15,
+        };
     },
     //监听属性 类似于data概念
     computed: {},
@@ -24,19 +45,28 @@ export default {
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
-    beforeCreate() {}, //生命周期 - 创建之前
-    beforeMount() {}, //生命周期 - 挂载之前
-    beforeUpdate() {}, //生命周期 - 更新之前
-    updated() {}, //生命周期 - 更新之后
-    beforeDestroy() {}, //生命周期 - 销毁之前
-    destroyed() {}, //生命周期 - 销毁完成
-    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .map {
-    width: 100%;
-    height: 910px;      
+    @include size(100%, 910px);
+    @include flex(column, center, center, null);
+    background: url("~@assets/image/index/bg_map.png") no-repeat;
+    background-size: 100% 100%;
+}
+.title {
+    @include font(36px, $color-white);
+    padding: 60px 0 40px;
+    @include border-box;
+}
+.map_box {
+    @include size($wrapWidth, 700px);
+    background: #fff;
+    padding: 30px;
+    @include border-box;
+    .bm_view {
+        @include size(100%, 100%);
+    }
 }
 </style>

digital-park-web/digital-park/src/views/index/Product.vue

@@ -1,30 +1,35 @@
 <!-- 主导产业 -->
 <template>
-    <div class="product">
+    <div class="product" id="anchor-product">
         <div class="title">主导产业</div>
         <section>
             <ul class="tab_ul">
-                <li class="pointer" v-for="(item, index) in tabs" :key="index">
-                    {{ item }}
+                <li
+                    :class="['pointer', activeTab === item.value ? 'is_active' : '']"
+                    v-for="item in tabs"
+                    :key="item.value"
+                    @click="changeTab(item)"
+                >
+                    {{ item.name }}
                 </li>
             </ul>
             <div class="tab_content">
                 <section>
-                    <div class="content_title">
-                        装备制造：
-                    </div>
+                    <div class="content_title">{{ content[activeTab].name }}：</div>
                     <div class="detail">
-                        园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。
+                        {{ content[activeTab].detail }}
                     </div>
                 </section>
                 <section>
                     <div class="content_title">
                         <span>代表企业：</span>
-                        <span class="pointer">MORE</span>
+                        <span class="pointer">
+                            <img src="@assets/image/index/icon_more_white.png" alt="更多" />
+                        </span>
                     </div>
                     <ul class="company_ul">
-                        <li v-for="(item, index) in 12" :key="index">
-                            上海xxx网络科技有限公司
+                        <li v-for="(item, index) in content[activeTab].company" :key="index">
+                            {{ item }}
                         </li>
                     </ul>
                 </section>
@@ -43,7 +48,69 @@ export default {
     data() {
         //这里存放数据
         return {
-            tabs: ["装备制造", "科技研发", "生物医药", "视频制造", "电子信息"],
+            tabs: [
+                {
+                    name: "装备制造",
+                    value: "zbzz",
+                },
+                {
+                    name: "科技研发",
+                    value: "kjyf",
+                },
+                {
+                    name: "生物医药",
+                    value: "swyy",
+                },
+                {
+                    name: "视频制造",
+                    value: "spzz",
+                },
+                {
+                    name: "电子信息",
+                    value: "dzxx",
+                },
+            ],
+            activeTab: "zbzz",
+            content: {
+                zbzz: {
+                    name: "装备制造",
+                    detail:
+                        "1园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    company: [
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                    ],
+                },
+                kjyf: {
+                    name: "科技研发",
+                    detail:
+                        "2园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    company: ["上海xxx网络科技有限公司"],
+                },
+                swyy: {
+                    name: "生物医药",
+                    detail:
+                        "3园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    company: ["上海xxx网络科技有限公司"],
+                },
+                spzz: {
+                    name: "视频制造",
+                    detail:
+                        "4园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    company: ["上海xxx网络科技有限公司"],
+                },
+                dzxx: {
+                    name: "电子信息",
+                    detail:
+                        "5园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    company: ["上海xxx网络科技有限公司", "上海xxx网络科技有限公司"],
+                },
+            },
         };
     },
     //监听属性 类似于data概念
@@ -51,7 +118,11 @@ export default {
     //监控data中的数据变化
     watch: {},
     //方法集合
-    methods: {},
+    methods: {
+        changeTab(tab) {
+            this.activeTab = tab.value;
+        },
+    },
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
@@ -63,7 +134,8 @@ export default {
 .product {
     @include size(100%, auto);
     @include flex(column, space-between, center, null);
-    background-color: #04102d;
+    background: url("~@assets/image/index/bg_product.png") no-repeat;
+    background-size: 100% 100%;
     padding-bottom: 100px;
     @include border-box;
 }
@@ -117,23 +189,24 @@ export default {
             @include flex(row, flex-start, center, nowrap);
             padding-left: 20px;
             @include border-box;
+            background-size: 100% 100%;
             &:nth-child(4n) {
                 margin-right: 0;
             }
             &:nth-child(5n) {
-                background-image: linear-gradient(135deg, #8592a2 0%, #728398 100%);
+                background: url("~@assets/image/index/bg_company_1.png") no-repeat;
             }
             &:nth-child(5n + 1) {
-                background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
+                background: url("~@assets/image/index/bg_company_2.png") no-repeat;
             }
             &:nth-child(5n + 2) {
-                background-image: linear-gradient(135deg, #737eff 0%, #5c69ff 100%);
+                background: url("~@assets/image/index/bg_company_3.png") no-repeat;
             }
             &:nth-child(5n + 3) {
-                background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+                background: url("~@assets/image/index/bg_company_4.png") no-repeat;
             }
             &:nth-child(5n + 4) {
-                background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%);
+                background: url("~@assets/image/index/bg_company_5.png") no-repeat;
             }
         }
     }

digital-park-web/digital-park/src/views/index/Service.vue

@@ -0,0 +1,355 @@
+<!-- 招商服务 -->
+<template>
+    <div class="service" id="anchor-service">
+        <div class="title">招商服务</div>
+        <section class="service_box">
+            <div class="left">
+                <div class="tab_box pointer" v-for="item in serviceTabs" :key="item.name">
+                    <div class="tab_title">{{ item.name }}</div>
+                    <ul class="tab_ul">
+                        <li v-for="item1 in item.children" :key="item1">{{ item1 }}</li>
+                    </ul>
+                </div>
+                <div class="enter pointer" @click="dialogTableVisible = true">
+                    <div class="left">
+                        <span class="enter_title">我是企业</span>
+                        <span class="enter_btn">
+                            <span>我要入驻</span>
+                            <i class="el-icon-right"></i>
+                        </span>
+                    </div>
+                    <img src="@assets/image/index/icon_company_big.png" alt="企业" />
+                </div>
+            </div>
+            <div :class="['right', lists && lists.length > 0 ? '' : 'no_data_padding']">
+                <ul class="product_ul" v-if="lists && lists.length > 0">
+                    <li class="pointer" v-for="item in 3">
+                        <img src="" alt="" />
+                        <div class="product_info">
+                            <span class="product_title">
+                                有限责任公司注册（松江）有限责任公司注册（松江）有限责任公司注册（松江）
+                            </span>
+                            <span class="product_content">
+                                近年来，国家大力推行数字化建设，数字化园区是数字化建设的重要部分，也由此进入了高速发展阶段。数字化园区是传统技术与新技术结合打造的新型场景，将在园区招商、日常办公、生产制造、疫情防控等方面为…
+                            </span>
+                            <span class="product_price">
+                                <span>
+                                    价格：
+                                    <span class="price">￥80.00</span>
+                                    元
+                                </span>
+                                <span class="more"><i class="el-icon-right"></i></span>
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+                <div v-else class="have_no_product product_bg">
+                    <div class="service_text">
+                        <span>高标准厂房出租，环境优美，交通便捷</span>
+                        <span>
+                            可按企业需求定制，减轻企业负担
+                        </span>
+                    </div>
+                    <div class="pointer service_btn">
+                        <span>获取园区招商具体详情</span>
+                        <i class="el-icon-right"></i>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <el-dialog
+            class="dialog_box"
+            :visible.sync="dialogTableVisible"
+            :show-close="false"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :lock-scroll="false"
+            width="740px"
+        >
+            <div slot="title" class="header_title">
+                <span class="title_text">入驻园区</span>
+                <img class="pointer" src="" alt="关闭" @click="dialogTableVisible = false" />
+            </div>
+            <div class="dialog_content">
+                <el-form label-position="right" label-width="95px">
+                    <el-form-item label="*企业名称">
+                        <el-input v-model="input"></el-input>
+                    </el-form-item>
+                    <el-form-item label="*联系方式">
+                        <el-input v-model="input"></el-input>
+                    </el-form-item>
+                    <el-form-item label="*主营业务">
+                        <el-input v-model="input"></el-input>
+                    </el-form-item>
+                    <el-form-item label="预计产税">
+                        <el-input v-model="input"></el-input>
+                    </el-form-item>
+                    <el-form-item label="其他说明">
+                        <el-input
+                            type="textarea"
+                            :rows="5"
+                            resize="none"
+                            v-model="input"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button class="submit_btn" type="primary" :loading="loading">
+                            提交
+                        </el-button>
+                        <div class="submit_tip">提交后园区工作人员将在1-3个工作日内联系您</div>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            serviceTabs: [
+                {
+                    name: "产业招商",
+                    children: ["集成电路", "人工智能", "生物医药", "电子信息"],
+                },
+                {
+                    name: "招商载体",
+                    children: ["集成电路", "人工智能", "生物医药", "电子信息"],
+                },
+            ],
+            lists: [],
+            dialogTableVisible: true,
+            input: "",
+            loading: false,
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.service {
+    @include size(100%, 910px);
+    @include flex(column, center, center, null);
+    background: url("~@assets/image/index/bg_service.png") no-repeat;
+    background-size: 100% 100%;
+}
+.title {
+    @include font(36px, $color-white);
+    padding: 60px 0 40px;
+    @include border-box;
+}
+.service_box {
+    @include size($wrapWidth, 700px);
+    background: #fff;
+    padding: 30px;
+    @include border-box;
+    @include flex(row, space-between, flex-start, null);
+    .left {
+        @include size(260px, 100%);
+        .tab_box {
+            @include size(100%, calc((100% - 140px) / 2));
+            margin-bottom: 20px;
+            padding: 25px 10px 25px 30px;
+            @include border-box;
+            .tab_ul {
+                @include flex(row, flex-start, center, wrap);
+                li {
+                    margin-top: 20px;
+                    margin-right: 25px;
+                }
+            }
+            &:nth-child(1) {
+                background-image: linear-gradient(90deg, #0689e7 0%, #eff8fe 100%);
+                .tab_title {
+                    @include font(24px, $color-white);
+                    border-bottom: 1px solid #d2e8f6;
+                    padding-bottom: 20px;
+                    @include border-box;
+                }
+                .tab_ul {
+                    @include font(16px, $color-white);
+                }
+            }
+            &:nth-child(2) {
+                background-image: linear-gradient(90deg, #e5f3fd 0%, #fbfeff 100%);
+                .tab_title {
+                    @include font(24px, #334a5f);
+                    border-bottom: 1px solid #d2e8f6;
+                    padding-bottom: 20px;
+                    @include border-box;
+                }
+                .tab_ul {
+                    @include font(16px, #637485);
+                }
+            }
+        }
+        .enter {
+            @include size(260px, 100px);
+            background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
+            padding: 18px 18px 18px 26px;
+
+            @include border-box;
+            @include flex(row, space-between, center, null);
+            .left {
+                flex: 1;
+                padding-right: 48px;
+                @include border-box;
+                @include flex(column, space-around, flex-start, null);
+                .enter_title {
+                    @include font(26px, $color-white);
+                }
+                .enter_btn {
+                    width: 100%;
+                    @include font(16px, $color-white);
+                    @include flex(row, space-between, center, null);
+                }
+            }
+            img {
+                @include size(64px, 64px);
+                border-radius: 50%;
+            }
+        }
+    }
+    .right {
+        @include size(860px, 100%);
+        padding: 40px 32px 40px 38px;
+        @include border-box;
+        background-image: linear-gradient(90deg, #e5f3fd 0%, #fbfeff 100%);
+
+        .product_ul {
+            height: 100%;
+            @include flex(column, space-between, flex-start, null);
+            li {
+                @include size(100%, 160px);
+                @include flex(row, space-between, center, null);
+                img {
+                    @include size(260px, 100%);
+                }
+                .product_info {
+                    overflow: hidden;
+                    padding-left: 20px;
+                    height: 100%;
+                    @include border-box;
+                    flex: 1;
+                    @include flex(column, space-between, flex-start, null);
+                }
+                .product_title {
+                    width: 100%;
+                    @include font(18px, #334a5f);
+                    font-weight: 600;
+                    @include text-ellipsis;
+                }
+                .product_content {
+                    width: 100%;
+                    @include font(16px, #637485);
+                    @include text-ellipsis-multiple(3);
+                }
+                .product_price {
+                    width: 100%;
+                    @include font(16px, #637485);
+                    @include flex(row, space-between, center, null);
+                    .price {
+                        @include font(24px, #d9121a);
+                    }
+                    .more {
+                        @include font(24px, #637485);
+                    }
+                }
+            }
+        }
+        .have_no_product {
+            @include flex(column, space-around, center, null);
+            padding: 130px 88px;
+            width: 100%;
+            height: 100%;
+            @include border-box;
+            .service_text {
+                @include font(36px, #f2faff);
+                @include flex(row, center, center, wrap);
+                line-height: 64px;
+            }
+            .service_btn {
+                @include size(282px, 62px);
+                @include font(20px, $color-white);
+                background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
+                border-radius: 8px;
+                padding: 0 24px;
+                @include border-box;
+                @include flex(row, space-between, center, null);
+            }
+        }
+        .product_bg {
+            background: url("~@assets/image/index/product_bg.png") no-repeat;
+            background-size: 100% 100%;
+        }
+        .service_bg {
+            background: url("~@assets/image/index/service_bg.png") no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+    .no_data_padding {
+        padding: 28px;
+        background: #e6f3fd;
+    }
+}
+.dialog_box {
+    ::v-deep .el-dialog {
+        background-image: linear-gradient(180deg, #cce7fa 0%, #feffff 100%);
+    }
+    ::v-deep .el-dialog__header {
+        padding: 0;
+    }
+    .header_title {
+        @include size(100%, 72px);
+        padding: 0 20px 0 30px;
+        @include border-box;
+        @include flex(row, space-between, center, null);
+        border-bottom: solid 1px #637485;
+        .title_text {
+            @include font(24px, #334a5f);
+            font-weight: 600;
+        }
+        img {
+            @include size(36px, 36px);
+        }
+    }
+    .dialog_content {
+        padding: 0 85px;
+        @include border-box;
+        ::v-deep .el-form-item__label {
+            @include font(16px, #637485);
+        }
+        ::v-deep .el-input__inner,
+        ::v-deep .el-textarea__inner {
+            background: transparent;
+            border: 1px solid #41a6fe;
+        }
+        .submit_btn {
+            width: 100%;
+            background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+        }
+        .submit_tip {
+            @include font(16px, #334a5f);
+            width: 100%;
+            text-align: center;
+        }
+    }
+}
+</style>

digital-park-web/digital-park/src/views/index/SlideNav.vue

@@ -0,0 +1,124 @@
+<!--  -->
+<template>
+    <div class="slide_nav">
+        <ul>
+            <li
+                v-for="(item, index) in navLists"
+                :key="item.name"
+                :class="['pointer', moveIndex === index ? 'is_active' : '']"
+                @click="itemClick(index)"
+            >
+                {{ item.name }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+// ！！！注意本组件只允许放在需要监听滚动页面的最底部，因为我们是通过父元素的节点获得内部所有子元素的高度所以必须要放在父元素中的最底部
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    props: {
+        navLists: Array, //每个标题内容
+    },
+    data() {
+        //这里存放数据
+        return {
+            moveIndex: 0, //当前激活nav栏高亮显示标题的下标
+            ContentHeightList: null, //页面中每一栏内容的高度数组
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        itemClick(index) {
+            // 获取父元素的dom元素
+            let pageScroll = document.querySelector(".slide_nav").parentNode;
+            // console.log(pageScroll.children[index].offsetTop + 520);
+            // 激活当前高亮nav栏
+            this.moveIndex = index;
+            // 点击后滚动到相应的区域
+            window.scrollTo({
+                top: pageScroll.children[index].offsetTop, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
+                behavior: "instant", //丝滑滚动
+            });
+        },
+        // 获取页面中每一栏内容的高度数组
+        getChildrenHeigh() {
+            // 获得他们的父元素节点
+            let pageScroll = document.querySelector(".slide_nav").parentNode;
+            let arr = [];
+            // console.log(this.navLists.length);
+            // 将所有子元素的高度放入arr
+            for (let i = 0; i < this.navLists.length; i++) {
+                // 把所有获得到的子元素高度都放入arr中
+                arr.push(pageScroll.children[i].offsetTop);
+            }
+            // 给这个arr兜底，这样可以解决最后一个内容栏监听不到的bug，注意：如果最后一栏内容高度低于滚动条当前的高度，也不会高亮显示最后一栏的标题哦
+            arr.push(Number.MAX_VALUE);
+            this.ContentHeightList = arr;
+        },
+        // 监听滚轮
+        handleScroll() {
+            // 获得当前的滚轮高度
+            var scrollTop =
+                window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+            let Heights = this.ContentHeightList;
+            // 只有ContentHeightList存在才监听当前高度
+            if (this.ContentHeightList) {
+                // console.log(scrollTop);
+                for (let i = 0; i < Heights.length; i++) {
+                    // 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ，那么说明滚轮在当前内容中，就激活当前的nav栏
+                    if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) {
+                        // console.log(i);
+                        // 那么就激活当前的nav栏
+                        this.moveIndex = i;
+                        // return false;
+                    }
+                }
+            }
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {
+        // 监听滚动
+        window.addEventListener("scroll", this.handleScroll, true);
+        // 获得内容高度
+        this.getChildrenHeigh();
+    },
+    destroyed() {
+        this.ContentHeightList = null;
+        window.removeEventListener("scroll", this.handleScroll, true);
+    },
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.slide_nav {
+    position: fixed;
+    right: 0;
+    top: 157px;
+    z-index: 100;
+    ul {
+        li {
+            margin-bottom: 10px;
+
+            @include font(16px, $color-white);
+            @include size(90px, 50px);
+            background-image: linear-gradient(135deg, #0184d067 0%, #0841d041 100%);
+            @include flex(row, center, center, null);
+        }
+        .is_active {
+            background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
+        }
+    }
+}
+</style>

digital-park-web/digital-park/src/views/index/park-introduce/Notice.vue

@@ -7,7 +7,7 @@
                 <span class="english">park announcement</span>
             </div>
             <div class="more pointer" v-if="lists.length < 5">
-                <img src="" alt="" />
+                <img src="@assets/image/index/icon_more.png" alt="更多" />
             </div>
         </div>
 
@@ -32,7 +32,7 @@
                 </ul>
             </section>
             <div class="more width_100 pointer">
-                <img src="" alt="" />
+                <img src="@assets/image/index/icon_more.png" alt="更多" />
             </div>
         </template>
         <template v-else>
@@ -74,13 +74,15 @@ export default {
     //方法集合
     methods: {
         scroll() {
-            this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
-            setTimeout(() => {
-                //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
-                this.lists.push(this.lists[0]); // 将数组的第一个元素添加到数组的
-                this.lists.shift(); //删除数组的第一个元素
-                this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
-            }, 1000);
+            if (this.lists.length < 5) {
+                this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
+                setTimeout(() => {
+                    //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
+                    this.lists.push(this.lists[0]); // 将数组的第一个元素添加到数组的
+                    this.lists.shift(); //删除数组的第一个元素
+                    this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
+                }, 1000);
+            }
         },
     },
     //生命周期 - 创建完成（可以访问当前this实例）
@@ -175,8 +177,9 @@ export default {
 }
 .width_100 {
     width: 100%;
-    margin-right: 30px;
+    padding-right: 30px;
     margin-top: 20px;
+    @include border-box;
 }
 .more {
     height: 25px;
@@ -184,7 +187,6 @@ export default {
     img {
         width: 73px;
         height: 25px;
-        background: pink;
     }
 }
 .notice_box {

digital-park-web/digital-park/src/views/index/park-introduce/ParkIntroduce.vue

@@ -1,12 +1,17 @@
 <!-- 园区介绍 -->
 <template>
-    <div class="park_introduce">
+    <div class="park_introduce" id="anchor-produce">
         <section class="top">
             <div class="title">小昆山数据可视化平台</div>
             <div class="subtitle">全面提升管理服务水平</div>
         </section>
         <ul class="middle">
-            <li class="pointer" v-for="(item, index) in indexTab" :key="index">
+            <li
+                class="pointer"
+                v-for="(item, index) in navLists"
+                :key="item.name"
+                @click="itemClick(index)"
+            >
                 <img :src="item.imgUrl" alt="" />
                 <span>{{ item.name }}</span>
             </li>
@@ -34,40 +39,13 @@ import Notice from "./Notice.vue";
 export default {
     //import引入的组件需要注入到对象中才能使用
     components: { Introduce, Notice },
+    props: {
+        navLists: Array, //每个标题内容
+    },
     data() {
         //这里存放数据
         return {
-            indexTab: [
-                {
-                    name: "园区介绍",
-                    imgUrl: "",
-                },
-                {
-                    name: "主导产业",
-                    imgUrl: "",
-                },
-                {
-                    name: "招商服务",
-                    imgUrl: "",
-                },
-                {
-                    name: "园区优势",
-                    imgUrl: "",
-                },
-                {
-                    name: "招商政策",
-                    imgUrl: "",
-                },
-                {
-                    name: "园区新闻",
-                    imgUrl: "",
-                },
-                {
-                    name: "园区地图",
-                    imgUrl: "",
-                },
-            ],
-            lists: [1, 2, 3, 4],
+            lists: [1, 2, 3, 4, 5, 6],
         };
     },
     //监听属性 类似于data概念
@@ -75,7 +53,20 @@ export default {
     //监控data中的数据变化
     watch: {},
     //方法集合
-    methods: {},
+    methods: {
+        itemClick(index) {
+            // 获取父元素的dom元素
+            let pageScroll = document.querySelector(".slide_nav").parentNode;
+            // console.log(pageScroll.children[index].offsetTop + 520);
+            // 激活当前高亮nav栏
+            this.moveIndex = index;
+            // 点击后滚动到相应的区域
+            window.scrollTo({
+                top: pageScroll.children[index].offsetTop, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
+                behavior: "instant", //丝滑滚动
+            });
+        },
+    },
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
@@ -87,7 +78,9 @@ export default {
 .park_introduce {
     @include size(100%, auto);
     @include flex(column, space-between, center, null);
-    background: rgb(113, 176, 235);
+    background: url("~@assets/image/index/bg_produce.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
 }
 .top {
     text-align: center;
@@ -113,7 +106,6 @@ export default {
         @include flex(column, center, center, nowrap);
         img {
             @include size(78px, 78px);
-            background: pink;
             margin-bottom: 4px;
         }
     }