首页

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

@@ -0,0 +1,42 @@
+<!-- 客服 -->
+<template>
+    <div class="customer_service_box pointer">
+        <img src="@assets/image/common/icon_customer_service.png" alt="客服" />
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.customer_service_box {
+    position: fixed;
+    right: 40px;
+    bottom: 40px;
+    z-index: 3;
+    img {
+        @include size(160px, auto);
+    }
+}
+</style>

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

@@ -6,12 +6,12 @@
             <div class="tab_box">
                 <ul class="tab_ul">
                     <li
-                        class="pointer"
-                        v-for="(item, index) in tabs"
+                        v-for="(item, index) in list"
                         :key="index"
+                        :class="['pointer']"
                         @click="slideTo(index)"
                     >
-                        {{ item }}
+                        {{ item.title }}
                     </li>
                 </ul>
             </div>
@@ -37,21 +37,12 @@
 //例如：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: "资金优势",
@@ -94,6 +85,10 @@ export default {
             swiperOption: {
                 slidesPerView: "auto",
                 loop: true,
+                autoplay: {
+                    delay: 3000,
+                    disableOnInteraction: false, // 手动切换之后继续自动轮播
+                },
                 watchSlidesProgress: true,
                 // 设定slide与左边框的预设偏移量（单位px）
                 slidesOffsetBefore: 37,
@@ -116,9 +111,9 @@ export default {
                         }
                     },
                     slideChange: function() {
-                        console.log(
-                            this.activeIndex >= 6 ? this.activeIndex - 6 : this.activeIndex
-                        );
+                        // console.log(
+                        //     this.activeIndex >= 6 ? this.activeIndex - 6 : this.activeIndex
+                        // );
                     },
                 },
             },
@@ -129,9 +124,6 @@ export default {
         swiper() {
             return this.$refs.mySwiper.swiper;
         },
-        // ...mapState({
-        //   activeItemIndex: state => state.activeIndex
-        // })
     },
     //监控data中的数据变化
     watch: {},
@@ -144,14 +136,12 @@ export default {
             });
         },
         slideTo(index) {
+            this.activeItemIndex = index;
             this.swiper.slideTo(index);
         },
         setBg(url) {
             return { background: `url(${url}) no-repeat` };
         },
-        changeIndex(index) {
-            this.activeItemIndex = index;
-        },
     },
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},

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

@@ -3,13 +3,14 @@
         <Banner></Banner>
         <div>
             <park-introduce :navLists="indexTab" :parkInfo="parkInfo"></park-introduce>
-            <product></product>
+            <product :leadingIndustryArr="leadingIndustryArr"></product>
             <service></service>
             <advantage></advantage>
             <park-map v-if="address" :address="address"></park-map>
             <Footer></Footer>
             <slide-nav :navLists="indexTab"></slide-nav>
         </div>
+        <custom-service></custom-service>
     </div>
 </template>
 
@@ -23,6 +24,7 @@ import ParkMap from "./ParkMap.vue";
 import Footer from "@components/Footer.vue";
 import SlideNav from "./SlideNav.vue";
 import { getRegisterArea } from "@api/index";
+import CustomService from "@/components/CustomService.vue";
 
 export default {
     metaInfo: {
@@ -37,6 +39,7 @@ export default {
         ParkMap,
         Footer,
         SlideNav,
+        CustomService,
     },
     data() {
         return {
@@ -68,6 +71,79 @@ export default {
                 },
             ],
             parkInfo: null,
+            leadingIndustryArr: [
+                {
+                    leadingIndustryName: "装备制造",
+                    companyProfile:
+                        "1园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    companyList: [
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                    ],
+                },
+                {
+                    leadingIndustryName: "科技研发",
+                    companyProfile:
+                        "2园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    companyList: [
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                    ],
+                },
+                {
+                    leadingIndustryName: "生物医药",
+                    companyProfile:
+                        "3园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    companyList: [
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                    ],
+                },
+                {
+                    leadingIndustryName: "视频制造",
+                    companyProfile:
+                        "4园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    companyList: [
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                    ],
+                },
+                {
+                    leadingIndustryName: "电子信息",
+                    companyProfile:
+                        "5园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。",
+                    companyList: [
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司",
+                        "上海xxx网络科技有限公司上海xxx网络科技有限公司",
+                    ],
+                },
+            ],
             address: null,
         };
     },

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

@@ -2,34 +2,57 @@
 <template>
     <div class="product" id="anchor-product">
         <div class="title">主导产业</div>
-        <section>
-            <ul class="tab_ul">
-                <li
-                    :class="['pointer', activeTab === item.value ? 'is_active' : '']"
-                    v-for="item in tabs"
-                    :key="item.value"
-                    @click="changeTab(item)"
-                >
-                    {{ item.name }}
-                </li>
-            </ul>
+        <!-- :class="['pointer', activeTab === index ? 'is_active' : '']" -->
+
+        <section class="leading_industry_box">
+            <div :class="['tabs_box', leadingIndustryArr.length > 6 ? '' : 'is_flex']">
+                <el-tabs v-model="activeTab" @click="changeTab">
+                    <el-tab-pane
+                        v-for="(item, index) in leadingIndustryArr"
+                        :key="item.title"
+                        :label="item.leadingIndustryName"
+                        :name="index + ''"
+                    ></el-tab-pane>
+                </el-tabs>
+            </div>
+
+            <!-- <div class="tabs_box">
+                <ul class="tab_ul">
+                    <li
+                        v-for="(item, index) in content"
+                        :key="item.title"
+                        :class="['pointer', activeTab === index ? 'is_active' : '']"
+                        @click="changeTab(index)"
+                    >
+                        {{ item.leadingIndustryName }}
+                    </li>
+                </ul>
+            </div> -->
+
             <div class="tab_content">
                 <section>
-                    <div class="content_title">{{ content[activeTab].name }}：</div>
+                    <div class="content_title">
+                        {{ leadingIndustryArr[activeTab].leadingIndustryName }}：
+                    </div>
                     <div class="detail">
-                        {{ content[activeTab].detail }}
+                        {{ leadingIndustryArr[activeTab].companyProfile }}
                     </div>
                 </section>
                 <section>
                     <div class="content_title">
                         <span>代表企业：</span>
-                        <span class="pointer">
+                        <!-- <span class="pointer">
                             <img src="@assets/image/index/icon_more_white.png" alt="更多" />
-                        </span>
+                        </span> -->
                     </div>
                     <ul class="company_ul">
-                        <li v-for="(item, index) in content[activeTab].company" :key="index">
-                            {{ item }}
+                        <li
+                            v-for="(item, index) in leadingIndustryArr[activeTab].companyList"
+                            :key="index"
+                        >
+                            <div>
+                                {{ item }}
+                            </div>
                         </li>
                     </ul>
                 </section>
@@ -45,72 +68,16 @@
 export default {
     //import引入的组件需要注入到对象中才能使用
     components: {},
+    props: {
+        leadingIndustryArr: {
+            type: Array,
+            default: () => [],
+        },
+    },
     data() {
         //这里存放数据
         return {
-            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网络科技有限公司"],
-                },
-            },
+            activeTab: 0,
         };
     },
     //监听属性 类似于data概念
@@ -119,8 +86,8 @@ export default {
     watch: {},
     //方法集合
     methods: {
-        changeTab(tab) {
-            this.activeTab = tab.value;
+        changeTab(index) {
+            this.activeTab = index;
         },
     },
     //生命周期 - 创建完成（可以访问当前this实例）
@@ -144,13 +111,40 @@ export default {
     padding: 60px 0 40px;
     @include border-box;
 }
-.tab_ul {
+.leading_industry_box {
+    @include size($wrapWidth, auto);
+}
+.tabs_box {
     width: 100%;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    ::v-deep .el-tabs__nav-wrap::after {
+        height: 0;
+    }
+    ::v-deep .el-tabs__header {
+        margin: 0;
+    }
+    ::v-deep .el-tabs__item {
+        height: auto;
+        @include font(24px, $color-white);
+        padding: 0 50px 30px;
+    }
+    ::v-deep .el-tabs__item.is-active {
+        @include font(24px, $color-white);
+    }
+    ::v-deep .el-tabs__active-bar {
+        background-color: $color-white;
+    }
+}
+.is_flex {
+    @include flex(row, center, center, nowrap);
+}
+.tab_ul {
     @include font(24px, #ffffff);
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     @include border-box;
-    @include flex(row, center, center, null);
+    // @include flex(row, center, center, nowrap);
     li {
+        display: inline-block;
         padding-bottom: 30px;
         border-bottom: 2px solid transparent;
     }
@@ -208,6 +202,9 @@ export default {
             &:nth-child(5n + 4) {
                 background: url("~@assets/image/index/bg_company_5.png") no-repeat;
             }
+            div {
+                @include text-ellipsis;
+            }
         }
     }
 }

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

@@ -65,13 +65,12 @@
                                 <span>
                                     价格：
                                     <span class="price">
-                                        ￥
                                         {{
                                             activeTab === 0
                                                 ? item.showPrice
                                                 : item.housingInformationList &&
                                                   item.housingInformationList.length > 0
-                                                ? item.housingInformationList[0].price
+                                                ? item.housingInformationList[0].showPrice
                                                 : "0"
                                         }}
                                     </span>