园区资讯

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

@@ -61,7 +61,7 @@ export default {
                 },
                 {
                     name: "园区资讯问答",
-                    path: "/3",
+                    path: "/park-information",
                 },
                 {
                     name: "我的企业",

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

@@ -46,7 +46,7 @@ export default {
                 },
                 {
                     name: "园区资讯问答",
-                    path: "/3",
+                    path: "/park-information",
                 },
             ],
         };

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

@@ -0,0 +1,91 @@
+<!-- 分页组件 -->
+<template>
+    <div class="">
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="prev, pager, next,sizes, jumper"
+            :total="50"
+        ></el-pagination>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            currentPage: 3,
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+    beforeCreate() {}, //生命周期 - 创建之前
+    beforeMount() {}, //生命周期 - 挂载之前
+    beforeUpdate() {}, //生命周期 - 更新之前
+    updated() {}, //生命周期 - 更新之后
+    beforeDestroy() {}, //生命周期 - 销毁之前
+    destroyed() {}, //生命周期 - 销毁完成
+    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+::v-deep .el-pagination__jump {
+    @include font(16px, #258eeb);
+}
+::v-deep .el-pagination .btn-next,
+::v-deep .el-pagination .btn-prev,
+::v-deep .el-pager li,
+::v-deep .el-input__inner {
+    background: transparent;
+    @include font(16px, #258eeb);
+}
+::v-deep .el-input__inner {
+    border: 1px solid #258eeb;
+    height: 30px;
+}
+::v-deep .el-pagination__jump {
+    margin-left: 0;
+}
+::v-deep .el-select .el-input .el-select__caret {
+    color: #258eeb;
+}
+::v-deep .btn-prev,
+::v-deep .btn-next,
+::v-deep .el-pager li {
+    @include size(30px, 30px);
+    border-radius: 50%;
+    border: 1px solid #258eeb;
+    padding: 0;
+    @include border-box;
+    min-width: 0;
+    margin: 0 5px;
+}
+::v-deep .el-pager li.active {
+    @include font(16px, #fff);
+    background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+}
+</style>

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

@@ -1,6 +1,6 @@
 /**
  *
- *首页、搜索、关于我们路由
+ *首页、园区资讯路由
  *
  */
 
@@ -15,4 +15,37 @@ export default [
             title: "园区首页",
         },
     },
+    // 园区资讯问答
+    {
+        path: "/park-information",
+        name: "ParkInformation",
+        component: () =>
+            import ("@views/park-information/Index.vue"),
+        meta: {
+            title: "园区资讯问答",
+        },
+        children: [{
+                path: "/",
+                redirect: "question-list",
+            },
+            {
+                path: "question-list",
+                name: "QuestionList",
+                component: () =>
+                    import ("@views/park-information/List.vue"),
+            },
+            {
+                path: "search",
+                name: "Search",
+                component: () =>
+                    import ("@views/park-information/SearchList.vue"),
+            },
+            {
+                path: "detail",
+                name: "Detail",
+                component: () =>
+                    import ("@views/park-information/Detail.vue"),
+            },
+        ],
+    },
 ];

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

@@ -125,7 +125,7 @@ export default {
                 },
             ],
             lists: [],
-            dialogTableVisible: true,
+            dialogTableVisible: false,
             input: "",
             loading: false,
         };

digital-park-web/digital-park/src/views/park-information/Detail.vue

@@ -0,0 +1,108 @@
+<!-- 园区资讯问答——详情 -->
+<template>
+    <div>
+        <search-box></search-box>
+        <section class="detail_box">
+            <div class="title_box">
+                就业创业类知识问答
+            </div>
+            <div class="question_box">
+                <div class="question_title">
+                    <span class="tip">问</span>
+                    <span class="question">把握住深圳企业的选址动向，招商工作就赢了一半？</span>
+                </div>
+                <div class="answer_box">
+                    <div class="answer">
+                        一、申报时所需资料：
+                        根据一个纳税年度内的所得、应纳税额、已缴(扣)税额、抵免(扣)税额、应补(退)税额等情况，如实填写并报送《个人所得税纳税申报表(适用于年所得12万元以上的纳税人申报)》、个人有效身份证件复印件，以及主管税务机关要求报送的其他有关资料。有效身份证件，包括纳税人的身份证、护照、回乡证、军人身份证件等。
+                        二、收入计算方法。
+                        (一)工资、薪金所得，以每月收入额减除费用3500元后的余额为应纳税所得额。
+                        (二)个体工商户的生产、经营所得，按照应纳税所得额计算。实行查账征收的，按照每一纳税年度的收入总额减除成本、费用以及损失后的余额计算;实行定期定额征收的，按照纳税人自行申报的年度应纳税所得额计算，或者按照其自行申报的年度应纳税经营额乘以应税所得率计算。
+                        (三)对企事业单位的承包经营、承租经营所得，按照每一纳税年度的收入总额计算，即按照承包经营、承租经营者实际取得的经营利润，加上从承包、承租的企事业单位中取得的工资、薪金性质的所得计算。
+                        个税申报 个税申报
+                        (四)劳务报酬所得，稿酬所得，特许权使用费所得，按照未减除费用(每次800元或者每次收入的20%)的收入额计算。
+                        (五)财产租赁所得，按照未减除费用(每次800元或者每次收入的20%)和修缮费用的收入额计算。
+                        (六)财产转让所得，按照应纳税所得额计算，即按照以转让财产的收入额减除财产原值和转让财产过程中缴纳的税金及有关合理费用后的余额计算。
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import SearchBox from "./components/SearchBox.vue";
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { SearchBox },
+    data() {
+        //这里存放数据
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.detail_box {
+    width: 1200px;
+    min-height: 400px;
+    background: #f7fbff;
+    padding: 40px 30px 40px 40px;
+    @include border-box;
+    .title_box {
+        @include font(24px, #334a5f);
+        font-weight: 600;
+        padding-bottom: 20px;
+        border-bottom: solid 1px #d8e0e8;
+        @include border-box;
+    }
+    .question_title {
+        padding: 20px 8px 0 0;
+        @include flex(row, flex-start, center, null);
+        @include border-box;
+        .tip {
+            @include size(38px, 38px);
+            @include font(16px, #ffffff);
+            border-radius: 50%;
+            background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+            text-align: center;
+            line-height: 38px;
+            margin-right: 10px;
+        }
+        .question {
+            height: 38px;
+            line-height: 38px;
+            background: #eef7fd;
+            border-radius: 19px;
+            padding: 0 40px 0 20px;
+            @include border-box;
+        }
+    }
+    .answer_box {
+        padding: 30px 0 0 48px;
+        min-height: 200px;
+
+        @include border-box;
+        .answer {
+            background: #eef7fd;
+            border-radius: 30px;
+            @include border-box;
+            padding: 40px 38px;
+            @include font(14px, #334a5f);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,104 @@
+<!-- 园区资讯问答 -->
+<template>
+    <div class="information">
+        <section class="nav_box">
+            <Nav></Nav>
+            <div class="second_nv">
+                <div>
+                    <div class="position">
+                        <img src="" alt="" />
+                        <span>
+                            当前位置：
+                            <span class="pointer">园区资讯问答</span>
+                            <span style="margin:0 4px;">></span>
+                            <span class="current pointer">详情</span>
+                        </span>
+                    </div>
+                    <div class="head_title">
+                        <span class="text">园区资讯问答</span>
+                        <span class="english">Questions and Answers</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="content_box">
+            <router-view></router-view>
+        </section>
+        <Footer></Footer>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import Nav from "@components/Header.vue";
+import Footer from "@components/Footer.vue";
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { Nav, Footer },
+    data() {
+        //这里存放数据
+        return {
+            input2: "",
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.nav_box {
+    background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+    .second_nv {
+        @include size(100%, 140px);
+        > div {
+            @include size(1200px, 100%);
+            margin: 0 auto;
+            @include flex(column, flex-start, flex-start, null);
+            position: relative;
+        }
+        .head_title {
+            width: 100%;
+            @include flex(column, center, center, null);
+            .text {
+                @include font(36px, #ffffff);
+                font-weight: 600;
+            }
+            .english {
+                @include font(14px, #ffffff);
+                margin-top: 4px;
+            }
+        }
+        .position {
+            @include flex(row, flex-start, center, null);
+            img {
+                @include size(16px, 16px);
+                background: #ffffff;
+                margin-right: 6px;
+            }
+            padding-top: 10px;
+            @include border-box;
+            @include font(16px, #ffffff);
+            .current {
+                font-weight: 600;
+            }
+        }
+    }
+}
+.content_box {
+    width: 1200px;
+    min-height: 400px;
+    margin: 0 auto;
+    padding: 30px 0;
+    @include border-box;
+}
+</style>

digital-park-web/digital-park/src/views/park-information/List.vue

@@ -0,0 +1,106 @@
+<!-- 资讯列表页 -->
+<template>
+    <div class="">
+        <div class="tab_box">
+            <span
+                :class="['pointer', activeTab === item.value ? 'active' : '']"
+                v-for="item in tabs"
+                :key="item.value"
+                @click="changeTab(item)"
+            >
+                {{ item.name }}
+            </span>
+        </div>
+        <search-box></search-box>
+        <div class="detail_box">
+            <question-list></question-list>
+            <div class="pagination_box">
+                <Pagination></Pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SearchBox from "./components/SearchBox.vue";
+import QuestionList from "./components/QuestionList.vue";
+import Pagination from "@components/Pagination.vue";
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { SearchBox, QuestionList, Pagination },
+    data() {
+        //这里存放数据
+        return {
+            tabs: [
+                {
+                    name: "园区公告",
+                    value: 1,
+                },
+                {
+                    name: "产业咨询",
+                    value: 2,
+                },
+                {
+                    name: "常见问答",
+                    value: 3,
+                },
+            ],
+            activeTab: 1,
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        changeTab(item) {
+            this.activeTab = item.value;
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.tab_box {
+    width: 600px;
+    @include flex(row, flex-start, flex-start, null);
+    margin-bottom: 16px;
+    border: solid 1px #bcd8e9;
+    @include border-box;
+    span {
+        flex: 1;
+        @include size(100%, 60px);
+        @include font(18px, #637485);
+        @include flex(row, center, center, null);
+    }
+    > span + span {
+        border-left: solid 1px #bcd8e9;
+        @include border-box;
+    }
+    .active {
+        background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+        @include font(18px, #ffffff);
+    }
+}
+.detail_box {
+    width: 1200px;
+    min-height: 400px;
+    background: #f7fbff;
+    padding: 5px 30px 40px 40px;
+    @include border-box;
+
+    .pagination_box {
+        padding-top: 40px;
+        @include border-box;
+        text-align: right;
+    }
+}
+</style>

digital-park-web/digital-park/src/views/park-information/SearchList.vue

@@ -0,0 +1,69 @@
+<!-- 园区资讯问答——详情 -->
+<template>
+    <div>
+        <search-box></search-box>
+        <section class="detail_box">
+            <div class="title_box">
+                您搜索的关键词：招商
+            </div>
+            <div class="question_box">
+                <question-list></question-list>
+                <div class="pagination_box">
+                    <Pagination></Pagination>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import SearchBox from "./components/SearchBox.vue";
+import Pagination from "@components/Pagination.vue";
+import QuestionList from "./components/QuestionList.vue";
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { SearchBox, Pagination, QuestionList },
+    data() {
+        //这里存放数据
+        return {
+            currentPage3: 3,
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.detail_box {
+    width: 1200px;
+    min-height: 400px;
+    background: #f7fbff;
+    padding: 40px 30px 40px 40px;
+    @include border-box;
+    .title_box {
+        @include font(24px, #334a5f);
+        font-weight: 600;
+        padding-bottom: 20px;
+        border-bottom: solid 1px #d8e0e8;
+        @include border-box;
+    }
+
+    .pagination_box {
+        padding-top: 40px;
+        @include border-box;
+        text-align: right;
+    }
+}
+</style>

digital-park-web/digital-park/src/views/park-information/components/QuestionList.vue

@@ -0,0 +1,81 @@
+<!--  -->
+<template>
+    <div>
+        <ul class="notice_ul">
+            <li class="notice_item pointer" v-for="item in 10" :key="item">
+                <div class="notice_detail">
+                    <div>
+                        把握住深圳企业的选址动向，招商工作就赢了一半把握住深圳企业的选址动向，招商工作就赢了一半把握住深圳企业的选址动向，招商工作就赢了一半把握住深圳企业的选址动向，招商工作就赢了一半
+                    </div>
+                </div>
+                <div>2022-09-01 18:00</div>
+            </li>
+        </ul>
+    </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_ul {
+    width: 100%;
+    .notice_item {
+        width: 100%;
+        padding-top: 25px;
+        @include border-box;
+        @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%);
+    }
+}
+</style>

digital-park-web/digital-park/src/views/park-information/components/SearchBox.vue

@@ -0,0 +1,91 @@
+<!-- 搜索框 -->
+<template>
+    <div class="search_box">
+        <img class="info_img" src="" alt="" />
+        <span class="search_title">园区知识库</span>
+        <div class="input_box">
+            <el-input placeholder="请输入搜索内容" v-model="input2">
+                <div slot="prefix" class="icon_box"><img src="" alt="" /></div>
+                <div slot="append" class="pointer">搜索</div>
+            </el-input>
+        </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类
+.search_box {
+    @include size(100%, 166px);
+    @include flex(row, center, center, null);
+    margin-bottom: 30px;
+    background-color: #04102d;
+    .info_img {
+        @include size(36px, 36px);
+        background: pink;
+        margin-right: 10px;
+    }
+    .search_title {
+        @include font(24px, #ffffff);
+        font-weight: 600;
+        margin-right: 22px;
+    }
+    .input_box {
+        @include size(720px, 60px);
+        ::v-deep .el-input-group {
+            height: 100%;
+        }
+        .icon_box {
+            height: 100%;
+            @include flex(row, center, center, null);
+            img {
+                @include size(24px, 24px);
+            }
+        }
+        ::v-deep .el-input__inner {
+            height: 100%;
+            border-radius: 0;
+            border: none;
+            padding-left: 60px;
+        }
+        ::v-deep .el-input-group__append {
+            border-radius: 0;
+            @include size(120px, 60px);
+            background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+            @include font(18px, #ffffff);
+            border: none;
+            text-align: center;
+            padding: 0;
+        }
+    }
+}
+</style>