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

<!-- 园区介绍 -->
<template>
    <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 navLists"
                :key="item.name"
                @click="itemClick(index)"
            >
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
            </li>
        </ul>
        <section class="content row">
            <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 v-if="lists.length >= 5" class="row_50 left_padding">
                <notice :lists="lists"></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 },
    props: {
        navLists: Array, //每个标题内容
    },
    data() {
        //这里存放数据
        return {
            lists: [1, 2, 3, 4, 5, 6],
        };
    },
    //监听属性 类似于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", //丝滑滚动
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.park_introduce {
    @include size(100%, auto);
    @include flex(column, space-between, center, null);
    background: url("~@assets/image/index/bg_produce.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.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;
    margin-top: 40px;
    @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);
            margin-bottom: 4px;
        }
    }
}
.content {
    @include size($wrapWidth, auto);
    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>