feat:新闻中心 和 新闻详情

src/components/header.vue

@@ -161,14 +161,19 @@ export default {
   methods: {
     //跳转导航
     hanldeNav(index) {
-      if (index == 4) {
+      if (index == 0) {
         this.$router.push({
-          path: "/aboutUs",
+          path: "/",
         });
       }
-      if (index == 0) {
+      if (index == 3) {
         this.$router.push({
-          path: "/",
+          path: "/pressCenter",
+        });
+      }
+      if (index == 4) {
+        this.$router.push({
+          path: "/aboutUs",
         });
       }
     },

src/main.js

@@ -12,3 +12,6 @@ new Vue({
   router,
   render: (h) => h(App),
 }).$mount("#app");
+router.afterEach((to, from, next) => {
+  window.scrollTo(0, 0);
+});

src/router/index.js

@@ -2,19 +2,31 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import HomeView from "../views/home.vue";
 import AboutUs from "../views/aboutUs.vue";
+import PressCenter from "../views/pressCenter.vue";
+import PressDetail from "../views/pressDetail.vue";
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
-    name: "home",
+    name: "首页",
     component: HomeView,
   },
    {
     path: "/aboutUs",
-    name: "aboutUs",
+    name: "关于我们",
     component: AboutUs,
   },
+    {
+    path: "/pressCenter",
+    name: "新闻中心",
+    component: PressCenter,
+  },
+   {
+    path: "/pressDetail",
+    name: "文字详情",
+    component: PressDetail,
+  },
 ];
 
 const router = new VueRouter({

src/views/home.vue

@@ -239,6 +239,7 @@
               :src="require('@/assets/img/home/content.png')"
               fit="fill"
             ></el-image>
+            <div class="black">山东青鸟工业互联网有限公司祝您新年快乐</div>
           </div>
           <div class="jo-right">
             <div class="jo-content" v-for="item in 3" :key="item">
@@ -256,6 +257,9 @@
                   根据《高新技术企业认定管理办法》（国科发火〔2016〕32号）
                   和《高新技术企业认定管理工作指引》（国科发火〔2016〕...
                 </div>
+                <div class="jo-more">
+                  了结更多<i class="el-icon-video-play"></i>
+                </div>
               </div>
             </div>
           </div>
@@ -895,6 +899,21 @@ export default {
       .jo-left {
         width: 50%;
         height: 100%;
+        position: relative;
+        .black {
+          width: 100%;
+          height: 40px;
+          background: rgba(0, 0, 0, 0.6);
+          border-radius: 0px 0px 8px 8px;
+          position: absolute;
+          bottom: 0;
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 600;
+          color: #ffffff;
+          line-height: 40px;
+          padding-left: 30px;
+        }
       }
 
       .jo-right {
@@ -914,9 +933,26 @@ export default {
           }
           .jo-detail {
             width: 70%;
-            padding: 10px 15px;
+            padding: 13px 15px;
             background: #fff;
             height: 94px;
+            position: relative;
+            .jo-more {
+              width: 64px;
+              height: 18px;
+              background: #3370ff;
+              border-radius: 8px 0px 8px 0px;
+              position: absolute;
+              right: 0;
+              bottom: 0;
+
+              font-size: 10px;
+              font-family: PingFang SC;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 18px;
+              text-align: center;
+            }
             .jo-title {
               font-size: 14px;
 
@@ -933,7 +969,8 @@ export default {
               font-family: PingFang SC;
               font-weight: 400;
               color: #333333;
-              padding-top: 10px;
+              padding-top: 5px;
+
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;

src/views/pressCenter.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="home">
+    <el-backtop />
+    <top :activeIndex="activeIndexs"></top>
+    <div class="ban">
+      <el-image
+        style="width: 100%"
+        :src="require('@/assets/img/home/pressimg.png')"
+        fit="fill"
+      ></el-image>
+    </div>
+    <!-- 新闻区 -->
+    <div class="solutabs">
+      <el-menu
+        :default-active="solutabsIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+        active-text-color="#3370FF"
+      >
+        <el-menu-item
+          v-for="(item, index) in type"
+          :key="index"
+          :index="index"
+          >{{ item.name }}</el-menu-item
+        >
+      </el-menu>
+      <div class="pres">
+        <div
+          class="pres-box"
+          v-for="item in 7"
+          :key="item"
+          @click="handleDetail"
+        >
+          <el-card :body-style="{ padding: '0px' }" shadow="hover">
+            <div class="list">
+              <div class="top">
+                <el-image
+                  style="width: 100%"
+                  :src="require('@/assets/img/home/pres.png')"
+                  fit="scale-down"
+                ></el-image>
+              </div>
+              <div class="year">
+                <div class="year-box">2022.02.02</div>
+              </div>
+              <div class="content">
+                <div class="content-title">
+                  热烈祝贺山东青鸟顺利通过DCMM贯标评估
+                </div>
+                <div class="content-bottom">
+                  根据中国电子信息行业联合会所公布获得数据管理能力成熟度(DCMM)等级证书的企业名单，山东青鸟工业互联网有限公司经公司申报、评估审查等严格的评审程序，顺利通过...
+                  根据中国电子信息行业联合会所公布获得数据管理能力成熟度(DCMM)等级证书的企业名单，山东青鸟工业互联网有限公司经公司申报、评估审查等严格的评审程序，顺利通过...
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+    <div>
+      <el-pagination
+        background
+        class="pagination"
+        layout="prev, pager, next"
+        :page-size="9"
+        :total="10"
+        style="float: none"
+      >
+      </el-pagination>
+    </div>
+    <bottom />
+    <el-backtop />
+  </div>
+</template>
+<script>
+import top from "@/components/header.vue";
+import bottom from "@/components/footer.vue";
+import headline from "@/components/headline.vue";
+export default {
+  name: "HomeView",
+  components: {
+    top,
+    bottom,
+    headline,
+  },
+  data() {
+    return {
+      activeIndexs: 3,
+      solutabsIndex: 0,
+      pressTitle: "全部",
+      type: [
+        {
+          name: "全部",
+          index: "0",
+        },
+        {
+          name: "公司资讯",
+          index: "1",
+        },
+        {
+          name: "行业动态",
+          index: "2",
+        },
+        {
+          name: "技术分享",
+          index: "3",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSelect(e) {
+      this.pressTitle = this.type[e].name;
+      this.pressIndex = e;
+    },
+    //跳转详情
+    handleDetail() {
+      this.$router.push({
+        path: "/pressDetail",
+        query: {
+          title: this.pressTitle,
+          index: this.pressIndex,
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.box-style {
+  width: 100%;
+
+  .box-style-box {
+    width: 100%;
+  }
+}
+// 新闻区
+.solutabs {
+  width: 100%;
+  margin: 0px auto;
+  .el-menu-demo {
+    display: flex;
+    justify-content: space-around;
+  }
+  .el-pagination {
+    margin-top: 20px;
+  }
+  .pres {
+    width: 1000px;
+    margin: 30px auto 0;
+    display: flex;
+    flex-wrap: wrap;
+    & > .pres-box:nth-child(2) {
+      margin-left: 2%;
+      margin-right: 2%;
+    }
+    & > .pres-box:nth-child(5) {
+      margin-left: 2%;
+      margin-right: 2%;
+    }
+    & > .pres-box:nth-child(8) {
+      margin-left: 2%;
+      margin-right: 2%;
+    }
+    .pres-box {
+      width: 32%;
+      margin-bottom: 20px;
+      cursor: pointer;
+      background: #ffffff;
+      box-shadow: 0px 0px 12px 0px rgba(25, 12, 96, 0.15);
+      .list {
+        .year {
+          width: 120px;
+          height: 30px;
+          background: #3370ff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .year-box {
+            width: 116px;
+            height: 26px;
+            border: 1px solid #ffffff;
+            font-size: 18px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            font-style: italic;
+            text-align: center;
+            color: #ffffff;
+          }
+        }
+        .content {
+          padding: 30px;
+          .content-title {
+            font-size: 21px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 36px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+          .content-bottom {
+            font-size: 14px;
+            padding-top: 20px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 36px;
+            display: -webkit-box;
+            -webkit-line-clamp: 4;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+.floor {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/views/pressDetail.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="home">
+    <top :activeIndex="activeIndexs"></top>
+    <div class="ban">
+      <el-image
+        style="width: 100%"
+        :src="require('@/assets/img/home/pressimg.png')"
+        fit="fill"
+      ></el-image>
+    </div>
+    <!-- 新闻区 -->
+    <div>
+      <div class="solutabs">
+        <!-- 面包屑 -->
+        <div class="solutabs-breadcrumb">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item class="myColor">新闻中心</el-breadcrumb-item>
+            <el-breadcrumb-item class="myColor">{{
+              $route.query.title
+            }}</el-breadcrumb-item>
+            <el-breadcrumb-item class="myColor">文章详情</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+      <div class="solutabs-contents">
+        <div class="title">热烈祝贺山东青鸟顺利通过DCMM贯标评估</div>
+        <div class="year">2023-03-13</div>
+        <div class="contentdetail">
+          根据中国电子信息行业联合会所公布获得数据管理能力成熟度(DCMM)等级证书的企业名单，山东青鸟工业互联网有限公司经公司申报、评估审查等严格的评审程序，顺利通过DCMM（二级）认证评估，获得甲方受管理级（二级）认证单位资质。标志着山东青鸟在为客户提供优质数据产品及实施数据治理服务的能力方面，获得了行业普遍认可。
+        </div>
+        <div style="padding-top: 20px">
+          <el-image
+            style="width: 100%"
+            :src="require('@/assets/img/home/pressdetail.png')"
+          ></el-image>
+        </div>
+        <div class="contentdetail">
+          DCMM是《数据管理能力成熟度评估模型》GB/T
+          36073-2018国家标准，是我国首个数据管理领域正式发布的国家标准。旨在帮助企业利用的数据管理理念和方法，建立和评价自身数据管理能力，持续完善数据管理组织、程序和制度，充分发挥数据在促进企业向信息化、数字化、智能化发展方面的价值，在提升我国数据管理方面的话语权、完善地区数据管理体系、规范各方数据活动、推动数据管理实践等方面有重要作用。
+        </div>
+        <div class="contentdetail">
+          工业和信息化部在《大数据产业发展十四五规划》多次提到“数据管理”和“数据管理能力”，进入数字化经济时代，数据已成为产业发展的生产要素，企业的数据管理能力成为企业竞争的核心能力之一。
+          山东青鸟未来将以DCMM体系和规范为指引，持续完善数据资产全生命周期管理机制，夯实数据基础。持续大力推动数字化转型，提供大数据应用解决方案，提升数据资产变现能力，强化数据服务对外开放。逐步建立符合行业发展的数据资产管理标准体系，赋能行业产业转型升级和高质量可持续发展。
+        </div>
+        <div class="contentdetail">
+          山东青鸟工业互联网有限公司为山东省第4家国家工业互联网标识解析二级节点（综合型）、山东省第一批网络安全重点企业、科技型中小企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业、国家高新技术企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商。公司先后研发软件著作权10项，发明专利1项，参与编制工业互联网在研国家标准3项，通过ISO质量、环境、职业健康、信息技术与信息安全管理等体系认证，获得ICP、ISP、IDC、VPN、CDN增值电信运营许可证及互联网域名服务许可证，公司运营中心位于济南中央商务区CBD，为自有资产，占地1200平。
+        </div>
+        <div class="contentdetail">
+          作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和
+          2035 年远景目标”中的新型基础设施建设部分的重要内容。
+        </div>
+      </div>
+    </div>
+    <bottom />
+    <el-backtop />
+  </div>
+</template>
+<script>
+import top from "@/components/header.vue";
+import bottom from "@/components/footer.vue";
+export default {
+  name: "HomeView",
+  components: {
+    top,
+    bottom,
+  },
+  data() {
+    return {
+      activeIndexs: 3,
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.solutabs {
+  width: 100%;
+  height: 50px;
+  box-shadow: 0px 0px 12px 0px rgba(2, 82, 217, 0.15);
+  .solutabs-breadcrumb {
+    width: 1200px;
+    height: 50px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    .el-breadcrumb {
+      font-size: 17px;
+
+      font-family: PingFang SC;
+      font-weight: 400;
+    }
+    .myColor:last-child /deep/ .el-breadcrumb__inner {
+      color: #3a6df3;
+    }
+  }
+}
+.solutabs-contents {
+  width: 1200px;
+  margin: 30px auto 50px;
+  .title {
+    font-size: 38px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #20222a;
+    padding-bottom: 13px;
+  }
+  .year {
+    font-size: 15px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 32px;
+    padding-bottom: 17px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .contentdetail {
+    padding-top: 30px;
+    font-size: 17px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 32px;
+  }
+}
+</style>