首页

digital-park-web/digital-park/src/assets/scss/common.scss

@@ -0,0 +1,18 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+#app {
+    height: 100%;
+}
+
+ul,
+ol,
+li {
+    list-style: none;
+}
+
+.pointer {
+    cursor: pointer;
+}

digital-park-web/digital-park/src/assets/scss/global.scss

@@ -0,0 +1,66 @@
+$color-white: #fff;
+$wrapWidth: 1200px;
+// 尺寸
+@mixin size($w, $h) {
+    width: $w;
+    height: $h;
+}
+
+// 字体大小、颜色
+@mixin font($font-size, $font-color) {
+    font-size: $font-size;
+    color: $font-color;
+}
+
+// 背景图片
+@mixin bg-image($url) {
+    background-image: url($url);
+}
+
+// 文本溢出省略显示
+// 单行文本溢出省略显示
+@mixin text-ellipsis() {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// 多行文本溢出省略显示，支持 WebKit浏览器或移动端的页面
+// $row - 行数
+@mixin text-ellipsis-multiple($row) {
+    overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+}
+
+// flex布局
+@mixin flex( $direction: row, $justify-content: flex-start, $align-items: flex-start, $flex-wrap: nowrap) {
+    display: flex;
+    flex-direction: $direction;
+    justify-content: $justify-content;
+    align-items: $align-items;
+    flex-wrap: $flex-wrap;
+}
+
+@mixin hoverLine($height, $color: $color-text-primary) {
+    position: relative;
+    &:hover::after {
+        content: "";
+        position: absolute;
+        height: $height;
+        width: 100%;
+        background-color: $color;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+// IE盒模型
+@mixin border-box {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}

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

@@ -0,0 +1,110 @@
+<!-- 导航 -->
+<template>
+    <div class="header">
+        <div class="wrap">
+            <section class="wrap_left">
+                <img src="" alt="" />
+                小昆山数据可视化平台
+            </section>
+            <section class="wrap_right">
+                <ul>
+                    <li class="pointer" v-for="(item, index) in nav" :key="index">
+                        {{ item.name }}
+                    </li>
+                </ul>
+                <section class="enterprise">
+                    <img src="" alt="" />
+                    我的企业
+                </section>
+            </section>
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            nav: [
+                {
+                    name: "园区首页",
+                },
+                // {
+                //     name: "招商服务",
+                // },
+                {
+                    name: "园区企业",
+                },
+                {
+                    name: "园区资讯问答",
+                },
+            ],
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.header {
+    @include size(100%, 100px);
+    color: $color-white;
+    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
+    background: transparent;
+    @include flex(row, center, center, wrap);
+    @include border-box;
+}
+.wrap {
+    @include size($wrapWidth, 100%);
+    @include flex(row, space-between, center, wrap);
+    .wrap_left {
+        @include flex(row, center, center, wrap);
+        img {
+            @include size(45px, 45px);
+            background: rgb(10, 103, 139);
+            margin-right: 10px;
+        }
+    }
+    .wrap_right {
+        height: 100%;
+        @include flex(row, flex-end, center, wrap);
+    }
+    ul {
+        height: 100%;
+        @include flex(row, space-between, center, wrap);
+        li {
+            height: 100%;
+            margin-right: 50px;
+            @include flex(row, center, center, wrap);
+            @include hoverLine(2px, $color-white);
+        }
+    }
+    .enterprise {
+        @include size(160px, 40px);
+        border: solid 1px rgba(255, 255, 255, 0.5);
+        border-radius: 20px;
+        @include border-box;
+        @include flex(row, center, center, wrap);
+        img {
+            background: rgb(192, 251, 255);
+            @include size(20px, 20px);
+            margin-right: 10px;
+        }
+    }
+}
+</style>

digital-park-web/digital-park/src/main.js

@@ -11,6 +11,7 @@ import * as filters from "./utils/filters";
 import MetaInfo from "vue-meta-info";
 import scroll from "vue-seamless-scroll";
 import VueClipboard from "vue-clipboard2";
+import "@assets/scss/common.scss"; /*引入公共样式*/
 
 Vue.use(VueLazyload, {
     preLoad: 1.3,

digital-park-web/digital-park/src/router/index.js

@@ -16,6 +16,7 @@ router.beforeEach((to, from, next) => {
     if (to.meta.title) {
         document.title = to.meta.title;
     }
+    next()
 });
 
 const originalPush = VueRouter.prototype.push;

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

@@ -0,0 +1,101 @@
+<!-- banner -->
+<template>
+    <div class="banner">
+        <section class="nav">
+            <Nav></Nav>
+        </section>
+        <!-- <el-carousel height="600px">
+            <el-carousel-item v-for="item in 1" :key="item">
+                <img :src="item" alt="" />
+            </el-carousel-item>
+        </el-carousel> -->
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import Nav from "@components/Header.vue";
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { Nav },
+    data() {
+        //这里存放数据
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.banner {
+    @include size(100%, 600px);
+    background: pink;
+    position: relative;
+    .nav {
+        z-index: 100;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+}
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 600px;
+    margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+    background-color: #d3dce6;
+}
+</style>
+<style lang="scss">
+.banner {
+    .el-carousel__button {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: transparent;
+        border: 2px solid #fff;
+        position: relative;
+    }
+    .el-carousel__button::after {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #fff;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .is-active button,
+    .el-carousel__indicator:hover button {
+        opacity: 0.72;
+        border: 2px solid #0086e7;
+    }
+    .is-active button::after,
+    .el-carousel__indicator:hover button::after {
+        opacity: 0.72;
+        background: #0086e7;
+    }
+}
+</style>

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

@@ -1,99 +1,35 @@
 <template>
-    <div class="about">
-        首页
+    <div class="home">
+        <Banner></Banner>
+        <park-introduce></park-introduce>
+        <product></product>
     </div>
 </template>
 
 <script>
+import Banner from "./Banner.vue";
+import ParkIntroduce from "./park-introduce/ParkIntroduce.vue";
+import Product from "./Product.vue";
 export default {
     metaInfo: {
         title: "园区首页", // set a title
-        
     },
     components: {
-       
+        Banner,
+        ParkIntroduce,
+        Product,
     },
     data() {
-        return {
-           
-        };
+        return {};
     },
-    computed: {
-    },
-    mounted() {
-       
-    },
-    methods: {
-        
-    },
-
+    computed: {},
+    mounted() {},
+    methods: {},
 };
 </script>
 
-/* vue单文件组件中无法修改swiper样式。 */
-.cententSearch /deep/ .el-input {
-    // width: 410px;
-    height: 40px;
-}
-.cententSearchInput {
-    width: 368px !important;
-    height: 42px;
-}
-.cententSearch .el-icon-input {
-    width: 132px;
-    margin-right: 4px;
-    padding-left: 10px;
-    background: #ffffff;
-    border-color: #2b5fe4;
-    line-height: 36px;
-    font-size: 14px;
-    color: #999999;
-    box-sizing: border-box;
-}
-.cententSearch .el-input__inner {
-    height: 40px;
-    background-color: #ffffff;
-    border: solid 1px #2b5fe4;
-    border-radius: 20px 0px 0px 20px;
-}
-.el-select .el-input__inner {
-    color: #2b5fe4;
-}
-.featureBox .swiper-pagination-bullet {
-    width: 26px !important;
-    height: 7px !important;
-    background-color: #d0d0d0 !important;
-    border-radius: 3px !important;
-}
-.featureBox .swiper-pagination-bullet-active {
-    background: #c5c5c5 !important;
-}
-.customer .swiper-pagination-bullet {
-    background-color: #d0d0d0 !important;
-}
-.customer .swiper-pagination-bullet-active {
-    width: 22px !important;
-    height: 8px !important;
-    border-radius: 4px !important;
-    background: #a4beff !important;
-}
-.swiper-pagination-one .swiper-pagination-bullet {
-    width: 34px !important;
-    height: 5px !important;
-    background-color: #d0d0d0 !important;
-    border-radius: 3px !important;
-}
-.swiper-pagination-one .swiper-pagination-bullet {
-    height: 3px !important;
-}
-.swiper-pagination-one .swiper-pagination-bullet-active {
-    background: #ffffff !important;
-}
-.swiper-pagination .swiper-pagination-bullet,
-.swiper-entrepreneur .swiper-pagination-bullet {
-    margin: 0 5px;
-}
-</style>
 <style lang="scss" scoped>
-
+    .home{
+        min-width: 1200px;
+    }
 </style>

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

@@ -0,0 +1,42 @@
+<!-- 园区地图 -->
+<template>
+    <div class="map"></div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    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;      
+}
+</style>

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

@@ -0,0 +1,141 @@
+<!-- 主导产业 -->
+<template>
+    <div class="product">
+        <div class="title">主导产业</div>
+        <section>
+            <ul class="tab_ul">
+                <li class="pointer" v-for="(item, index) in tabs" :key="index">
+                    {{ item }}
+                </li>
+            </ul>
+            <div class="tab_content">
+                <section>
+                    <div class="content_title">
+                        装备制造：
+                    </div>
+                    <div class="detail">
+                        园区旨在鼓励和吸引国内外装备制造产业，促进装备制造产业高科技发展化，重点加强水资源、工业废弃物、废气、生活垃圾的循环利用系统构建，引入先进的生产模式，根据产业特点，制定装备制造发展政策，促进产业发展升级，服务经济，为区域内装备制造产业的长远发展提供充分的技术支撑和项目支撑、人才支撑。建立港口机械、石油钻探机械、冶金设备、工程机械和汽车、船只修造产业基地。
+                    </div>
+                </section>
+                <section>
+                    <div class="content_title">
+                        <span>代表企业：</span>
+                        <span class="pointer">MORE</span>
+                    </div>
+                    <ul class="company_ul">
+                        <li v-for="(item, index) in 12" :key="index">
+                            上海xxx网络科技有限公司
+                        </li>
+                    </ul>
+                </section>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            tabs: ["装备制造", "科技研发", "生物医药", "视频制造", "电子信息"],
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.product {
+    @include size(100%, auto);
+    @include flex(column, space-between, center, null);
+    background-color: #04102d;
+    padding-bottom: 100px;
+    @include border-box;
+}
+.title {
+    @include font(36px, $color-white);
+    padding: 60px 0 40px;
+    @include border-box;
+}
+.tab_ul {
+    width: 100%;
+    @include font(24px, #ffffff);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    @include border-box;
+    @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: 100px;
+}
+.tab_content {
+    width: $wrapWidth;
+    .content_title {
+        padding-top: 60px;
+        @include border-box;
+        @include font(20px, #ffffff);
+        @include flex(row, space-between, center, null);
+    }
+    .detail {
+        @include font(16px, #9aaab9);
+        line-height: 30px;
+        margin-top: 30px;
+    }
+    .company_ul {
+        @include flex(row, flex-start, center, wrap);
+        li {
+            @include font(16px, #ffffff);
+            flex: 1;
+            @include size(calc((100% - 60px) / 4), 70px);
+            min-width: calc((100% - 60px) / 4);
+            max-width: calc((100% - 60px) / 4);
+            margin: 20px 20px 0 0;
+            @include flex(row, flex-start, center, nowrap);
+            padding-left: 20px;
+            @include border-box;
+            &:nth-child(4n) {
+                margin-right: 0;
+            }
+            &:nth-child(5n) {
+                background-image: linear-gradient(135deg, #8592a2 0%, #728398 100%);
+            }
+            &:nth-child(5n + 1) {
+                background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
+            }
+            &:nth-child(5n + 2) {
+                background-image: linear-gradient(135deg, #737eff 0%, #5c69ff 100%);
+            }
+            &:nth-child(5n + 3) {
+                background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+            }
+            &:nth-child(5n + 4) {
+                background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%);
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,86 @@
+<!-- 园区介绍 -->
+<template>
+    <div class="introduce right_slice">
+        <div class="title">
+            <span class="chinese">园区介绍</span>
+            <span class="english">park introduce</span>
+        </div>
+        <img class="park_img_50" src="" alt="" />
+        <div class="content">
+            小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
+        </div>
+        <div class="content1">
+            园区坚持按照“规划先导、基础先行、内外资并举、可持续发展”的要求，本着“外向型、高起点”和“持续、快速、安全、健康”的发展理念，充分发挥园区原料丰富、设施齐备、物流便捷和贴近市场等方面的独特优势，通过完善基础设施配套、稳步推进产业链招商、全面提升管理服务水平。
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+    beforeCreate() {}, //生命周期 - 创建之前
+    beforeMount() {}, //生命周期 - 挂载之前
+    beforeUpdate() {}, //生命周期 - 更新之前
+    updated() {}, //生命周期 - 更新之后
+    beforeDestroy() {}, //生命周期 - 销毁之前
+    destroyed() {}, //生命周期 - 销毁完成
+    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.introduce {
+    height: 100%;
+    @include flex(column, space-between, flex-start, null);
+}
+.right_slice {
+    padding-right: 20px;
+    @include border-box;
+}
+.title {
+    margin-bottom: 30px;
+    .chinese {
+        @include font(24px, #334a5f);
+    }
+    .english {
+        @include font(14px, #637485);
+        margin-left: 10px;
+    }
+}
+.park_img_50 {
+    width: 560px;
+    height: 238px;
+    background: #d8d8d8;
+}
+.park_img_100 {
+    height: 314px;
+    background-color: #d8d8d8;
+}
+.content {
+    @include font(16px, #334a5f);
+    font-weight: 600;
+    margin-top: 30px;
+}
+.content1 {
+    @include font(16px, #334a5f);
+    margin-top: 40px;
+}
+</style>

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

@@ -0,0 +1,136 @@
+<!-- 园区公告-->
+<template>
+    <div class="notice left_slice">
+        <div class="title">
+            <span class="chinese">园区公告</span>
+            <span class="english">park announcement</span>
+        </div>
+        <section class="content">
+            <div class="main_notice">
+                <div class="notice_title">国务院关于推进物联网有序健康发展指导者</div>
+                <div class="notice_content">
+                    小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
+                </div>
+            </div>
+            <ul class="notice_ul">
+                <li class="notice_li pointer" v-for="item in 6">
+                    <div class="notice_detail">
+                        <div>
+                            国务院关于推进物联网有序健康发展指导国务院关于推进物联网有序健康发展指导者…
+                        </div>
+                    </div>
+                    <div>2022.09.17</div>
+                </li>
+            </ul>
+        </section>
+        <div>
+            <img src="" alt="" />
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+    beforeCreate() {}, //生命周期 - 创建之前
+    beforeMount() {}, //生命周期 - 挂载之前
+    beforeUpdate() {}, //生命周期 - 更新之前
+    updated() {}, //生命周期 - 更新之后
+    beforeDestroy() {}, //生命周期 - 销毁之前
+    destroyed() {}, //生命周期 - 销毁完成
+    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.notice {
+    width: 100%;
+    height: 100%;
+    @include flex(column, space-between, flex-start, null);
+}
+.left_slice {
+    padding-left: 20px;
+    @include border-box;
+}
+.title {
+    margin-bottom: 30px;
+    .chinese {
+        @include font(24px, #334a5f);
+    }
+    .english {
+        @include font(14px, #637485);
+        margin-left: 10px;
+    }
+}
+.content {
+    width: 100%;
+    flex: 1;
+    background-image: linear-gradient(180deg, #e5f3fc 0%, #fcfefe 100%);
+    padding: 35px 30px 0 40px;
+    @include border-box;
+    .main_notice {
+        border-bottom: solid 1px #abcee4;
+        .notice_title {
+            @include font(16px, #334a5f);
+            font-weight: 600;
+            padding-bottom: 15px;
+            @include border-box;
+        }
+        .notice_content {
+            @include font(16px, #334a5f);
+            padding-bottom: 12px;
+            @include border-box;
+        }
+    }
+    .notice_ul {
+        width: 100%;
+        .notice_li {
+            width: 100%;
+            @include font(16px, #334a5f);
+            @include flex(row, space-between, center, nowrap);
+            padding-top: 25px;
+            @include border-box;
+        }
+        .notice_detail {
+            overflow: hidden;
+            flex: 1;
+            padding: 0 40px 0 26px;
+            position: relative;
+            @include border-box;
+            > div {
+                @include text-ellipsis;
+            }
+        }
+        .notice_detail::before {
+            content: "";
+            width: 15px;
+            height: 15px;
+            border: 2px solid #0086e7;
+            border-radius: 50%;
+            @include border-box;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,129 @@
+<!-- 园区介绍 -->
+<template>
+    <div class="park_introduce">
+        <section class="top">
+            <div class="title">小昆山数据可视化平台</div>
+            <div class="subtitle">全面提升管理服务水平</div>
+        </section>
+        <ul class="middle">
+            <li v-for="(item, index) in indexTab" :key="index">
+                <img :src="item.imgUrl" alt="" />
+                <span>{{ item.name }}</span>
+            </li>
+        </ul>
+        <section class="content row">
+            <div class="row_50">
+                <introduce></introduce>
+            </div>
+            <div class="row_50">
+                <notice></notice>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import Introduce from "./Introduce.vue";
+import Notice from "./Notice.vue";
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { Introduce, Notice },
+    data() {
+        //这里存放数据
+        return {
+            indexTab: [
+                {
+                    name: "园区介绍",
+                    imgUrl: "",
+                },
+                {
+                    name: "主导产业",
+                    imgUrl: "",
+                },
+                {
+                    name: "招商服务",
+                    imgUrl: "",
+                },
+                {
+                    name: "园区优势",
+                    imgUrl: "",
+                },
+                {
+                    name: "招商政策",
+                    imgUrl: "",
+                },
+                {
+                    name: "园区新闻",
+                    imgUrl: "",
+                },
+                {
+                    name: "园区地图",
+                    imgUrl: "",
+                },
+            ],
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.park_introduce {
+    @include size(100%, 1030px);
+    @include flex(column, space-between, center, null);
+    background: rgb(113, 176, 235);
+}
+.top {
+    text-align: center;
+    padding-top: 44px;
+    @include border-box;
+    .title {
+        @include font(36px, $color-white);
+    }
+    .subtitle {
+        padding-top: 10px;
+        @include border-box;
+        @include font(18px, $color-white);
+    }
+}
+
+.middle {
+    width: $wrapWidth;
+    @include flex(row, space-between, center, nowrap);
+    li {
+        @include font(16px, $color-white);
+        flex: 1;
+        @include flex(column, center, center, nowrap);
+        img {
+            @include size(78px, 78px);
+            background: pink;
+            margin-bottom: 4px;
+        }
+    }
+}
+.content {
+    @include size($wrapWidth, auto);
+    background: #ffffff;
+    padding: 50px 30px 40px;
+    @include border-box;
+}
+.row {
+    @include flex(row, space-between, flex-start, nowrap);
+    .row_50 {
+        width: 50%;
+        height: 100%;
+    }
+}
+</style>

digital-park-web/digital-park/vue.config.js

@@ -44,9 +44,14 @@ module.exports = {
             .set("@components", resolve("./src/components"))
             .set("@views", resolve("./src/views"))
             .set("@customerService", resolve("./src/customerService"));
-        // 移除prefetch
-        config.plugins.delete("prefetch");
-        config.plugins.delete("preload");
+    },
+    css: {
+        loaderOptions: {
+            sass: {
+                // 根据自己样式文件的位置调整
+                prependData: `@import "@assets/scss/global.scss";`, //这里的@是别名
+            },
+        },
     },
     configureWebpack: config => {
         config.optimization = {