顶部导航、园区介绍

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

     list-style: none;
 }
 
+a {
+    text-decoration: none;
+}
+
 .pointer {
     cursor: pointer;
 }

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

                 小昆山数据可视化平台
             </section>
             <section class="wrap_right">
-                <ul>
-                    <li class="pointer" v-for="(item, index) in nav" :key="index">
+                <div>
+                    <router-link v-for="item in nav" :key="item.name" :to="item.path">
                         {{ item.name }}
-                    </li>
-                </ul>
-                <section class="enterprise">
+                    </router-link>
+                </div>
+                <section class="enterprise pointer">
                     <img src="" alt="" />
                     我的企业
                 </section>
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
+import { commonJs } from "@/utils/common.js";
 
 export default {
     //import引入的组件需要注入到对象中才能使用
             nav: [
                 {
                     name: "园区首页",
+                    path: "/index",
                 },
                 // {
                 //     name: "招商服务",
                 // },
                 {
                     name: "园区企业",
+                    path: "/2",
                 },
                 {
                     name: "园区资讯问答",
+                    path: "/3",
                 },
             ],
         };
     //监控data中的数据变化
     watch: {},
     //方法集合
-    methods: {},
+    methods: {
+        clickRouter(path) {
+            commonJs.routerOpenInNewWindow({
+                path,
+            });
+        },
+    },
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
     .wrap_right {
         height: 100%;
         @include flex(row, flex-end, center, wrap);
-    }
-    ul {
-        height: 100%;
-        @include flex(row, space-between, center, wrap);
-        li {
+        > div {
             height: 100%;
-            margin-right: 50px;
-            @include flex(row, center, center, wrap);
-            @include hoverLine(2px, $color-white);
+            @include flex(row, space-between, center, wrap);
+            a {
+                height: 100%;
+                margin-right: 50px;
+                @include font(18px, $color-white);
+                @include flex(row, center, center, wrap);
+                @include hoverLine(2px, $color-white);
+            }
+            .router-link-active::after {
+                content: "";
+                position: absolute;
+                height: 2px;
+                width: 100%;
+                background: $color-white;
+                bottom: 0;
+                left: 0;
+            }
         }
     }
+
     .enterprise {
         @include size(160px, 40px);
         border: solid 1px rgba(255, 255, 255, 0.5);

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

             <span class="chinese">园区介绍</span>
             <span class="english">park introduce</span>
         </div>
-        <img class="park_img_50" src="" alt="" />
+        <img :class="[lists.length < 5 ? 'park_img_100' : 'park_img_50']" src="" alt="" />
         <div class="content">
             小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
-        </div>
-        <div class="content1">
-            园区坚持按照“规划先导、基础先行、内外资并举、可持续发展”的要求，本着“外向型、高起点”和“持续、快速、安全、健康”的发展理念，充分发挥园区原料丰富、设施齐备、物流便捷和贴近市场等方面的独特优势，通过完善基础设施配套、稳步推进产业链招商、全面提升管理服务水平。
+            小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
+            小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
         </div>
     </div>
 </template>
 export default {
     //import引入的组件需要注入到对象中才能使用
     components: {},
+    props: ["lists"],
     data() {
         //这里存放数据
         return {};
 //@import url(); 引入公共css类
 .introduce {
     height: 100%;
-    @include flex(column, space-between, flex-start, null);
-}
-.right_slice {
-    padding-right: 20px;
-    @include border-box;
+    @include flex(column, flex-start, flex-start, null);
 }
 .title {
     margin-bottom: 30px;
     }
 }
 .park_img_50 {
-    width: 560px;
+    width: 100%;
     height: 238px;
     background: #d8d8d8;
 }
 .park_img_100 {
+    width: 100%;
     height: 314px;
     background-color: #d8d8d8;
 }
 .content {
+    width: 100%;
     @include font(16px, #334a5f);
     font-weight: 600;
     margin-top: 30px;
-}
-.content1 {
-    @include font(16px, #334a5f);
-    margin-top: 40px;
+    @include text-ellipsis-multiple(6);
+    word-break: break-all;
 }
 </style>

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

 <!-- 园区公告-->
 <template>
-    <div class="notice left_slice">
-        <div class="title">
-            <span class="chinese">园区公告</span>
-            <span class="english">park announcement</span>
+    <div class="notice">
+        <div class="title_box">
+            <div class="title">
+                <span class="chinese">园区公告</span>
+                <span class="english">park announcement</span>
+            </div>
+            <div class="more pointer" v-if="lists.length < 5">
+                <img src="" alt="" />
+            </div>
         </div>
-        <section class="content">
-            <div class="main_notice">
-                <div class="notice_title">国务院关于推进物联网有序健康发展指导者</div>
-                <div class="notice_content">
-                    小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
+
+        <template v-if="lists.length >= 5">
+            <section class="content">
+                <div class="main_notice pointer">
+                    <div class="notice_title">国务院关于推进物联网有序健康发展指导者</div>
+                    <div class="notice_content">
+                        小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
+                        小昆山园区经过不断改革发展，园区已经具备大规模开发建设的总体框架，形成了良性循环的软硬投资环境，吸引了多地区企业的投资。园区地理交通条件优越，区内交通四通八达，道路宽敞平坦。
+                    </div>
                 </div>
+                <ul class="notice_ul">
+                    <li class="notice_item pointer" v-for="item in lists" :key="item">
+                        <div class="notice_detail">
+                            <div>
+                                {{ item }}
+                            </div>
+                        </div>
+                        <div>2022.09.17</div>
+                    </li>
+                </ul>
+            </section>
+            <div class="more width_100 pointer">
+                <img src="" alt="" />
             </div>
-            <ul class="notice_ul">
-                <li class="notice_li pointer" v-for="item in 6">
-                    <div class="notice_detail">
-                        <div>
-                            国务院关于推进物联网有序健康发展指导国务院关于推进物联网有序健康发展指导者…
+        </template>
+        <template v-else>
+            <div class="notice_box">
+                <ul :class="['notice_list', animate ? 'content_top' : '']">
+                    <li class="notice_item " v-for="item in lists" :key="item">
+                        <div class="notice_detail">
+                            <div>
+                                {{ item }}
+                            </div>
                         </div>
-                    </div>
-                    <div>2022.09.17</div>
-                </li>
-            </ul>
-        </section>
-        <div>
-            <img src="" alt="" />
-        </div>
+                        <div>2022.09.17</div>
+                    </li>
+                </ul>
+            </div>
+        </template>
     </div>
 </template>
 
 export default {
     //import引入的组件需要注入到对象中才能使用
     components: {},
+    props: ["lists"],
+
     data() {
         //这里存放数据
-        return {};
+        return {
+            animate: false,
+        };
     },
     //监听属性 类似于data概念
     computed: {},
     //监控data中的数据变化
     watch: {},
     //方法集合
-    methods: {},
+    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);
+        },
+    },
     //生命周期 - 创建完成（可以访问当前this实例）
-    created() {},
+    created() {
+        setInterval(this.scroll, 5000);
+    },
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
-    beforeCreate() {}, //生命周期 - 创建之前
-    beforeMount() {}, //生命周期 - 挂载之前
-    beforeUpdate() {}, //生命周期 - 更新之前
-    updated() {}, //生命周期 - 更新之后
-    beforeDestroy() {}, //生命周期 - 销毁之前
-    destroyed() {}, //生命周期 - 销毁完成
-    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>
     height: 100%;
     @include flex(column, space-between, flex-start, null);
 }
-.left_slice {
-    padding-left: 20px;
-    @include border-box;
+.title_box {
+    width: 100%;
+    @include flex(row, space-between, center, null);
+    margin-bottom: 30px;
 }
 .title {
-    margin-bottom: 30px;
+    flex: 1;
+
     .chinese {
         @include font(24px, #334a5f);
     }
     @include border-box;
     .main_notice {
         border-bottom: solid 1px #abcee4;
+        padding-bottom: 12px;
+        @include border-box;
         .notice_title {
             @include font(16px, #334a5f);
             font-weight: 600;
             @include border-box;
         }
         .notice_content {
+            height: 100%;
             @include font(16px, #334a5f);
-            padding-bottom: 12px;
-            @include border-box;
+            // padding-bottom: 12px;
+            // @include border-box;
+            @include text-ellipsis-multiple(2);
         }
     }
     .notice_ul {
         width: 100%;
-        .notice_li {
-            width: 100%;
-            @include font(16px, #334a5f);
-            @include flex(row, space-between, center, nowrap);
+        .notice_item {
             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%);
+    }
+}
+.notice_item {
+    width: 100%;
+    @include font(16px, #334a5f);
+    @include flex(row, space-between, center, nowrap);
+}
+.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%);
+}
+.width_100 {
+    width: 100%;
+    margin-right: 30px;
+    margin-top: 20px;
+}
+.more {
+    height: 25px;
+    @include flex(row, flex-end, center, null);
+    img {
+        width: 73px;
+        height: 25px;
+        background: pink;
+    }
+}
+.notice_box {
+    @include size(100%, 60px);
+    background: #eef7fd;
+    padding: 0 20px;
+    @include border-box;
+    overflow: hidden;
+    .notice_list {
+        @include size(100%, 100%);
+        overflow: hidden;
+        li {
+            height: 100%;
         }
     }
 }
+.content_top {
+    transition: all 0.5s;
+    margin-top: -60px;
+}
 </style>

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

             <div class="subtitle">全面提升管理服务水平</div>
         </section>
         <ul class="middle">
-            <li v-for="(item, index) in indexTab" :key="index">
+            <li class="pointer" 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 :class="[lists.length < 5 ? 'row_100' : 'row_50']">
+                <introduce :lists="lists"></introduce>
+                <div v-if="lists.length < 5" class="top_padding">
+                    <notice :lists="lists"></notice>
+                </div>
             </div>
-            <div class="row_50">
-                <notice></notice>
+            <div v-if="lists.length >= 5" class="row_50 left_padding">
+                <notice :lists="lists"></notice>
             </div>
         </section>
     </div>
                     imgUrl: "",
                 },
             ],
+            lists: [1, 2, 3, 4],
         };
     },
     //监听属性 类似于data概念
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .park_introduce {
-    @include size(100%, 1030px);
+    @include size(100%, auto);
     @include flex(column, space-between, center, null);
     background: rgb(113, 176, 235);
 }
 
 .middle {
     width: $wrapWidth;
+    margin-top: 40px;
     @include flex(row, space-between, center, nowrap);
     li {
         @include font(16px, $color-white);
     background: #ffffff;
     padding: 50px 30px 40px;
     @include border-box;
+    margin-top: 50px;
 }
 .row {
     @include flex(row, space-between, flex-start, nowrap);
     .row_50 {
         width: 50%;
         height: 100%;
+        padding-right: 20px;
+        @include border-box;
+    }
+    .row_100 {
+        width: 100%;
+    }
+    .top_padding {
+        padding-top: 50px;
+        @include border-box;
+    }
+    .left_padding {
+        padding-left: 20px;
+        @include border-box;
     }
 }
 </style>