央企文化

src/App.vue

@@ -15,7 +15,7 @@ export default {
   },
   computed: {
     showTabBar() {
-      const hideTabBarRoutes = ['/login', '/register', '/profile/detail']
+      const hideTabBarRoutes = ['/login', '/register', '/profile/detail', '/culture/detail']
       return !hideTabBarRoutes.includes(this.$route.path)
     }
   }

src/api/home.js

@@ -1,4 +1,5 @@
 import request from "@/utils/request";
 //获取轮播图
 export const getBanners = (data) => request({ url: "index/get_banners", method: "post", data,loading:true });
-export const getUserInfo = (data) => request({ url: "user/get_userinfo", method: "post", data,loading:true });
+export const getUserInfo = (data) => request({ url: "user/get_userinfo", method: "post", data,loading:true });
+export const getNewsDetail = (data) => request({ url: "index/newss_datail", method: "post", data,loading:true });

src/router/index.js

@@ -6,7 +6,7 @@ import Dynamic from "@/views/Dynamic.vue";
 import Profile from "@/views/Profile.vue";
 import ProfileDetail from "@/views/ProfileDetail.vue";
 import Register from "@/views/register.vue";
-
+import CultureDetail from "@/views/cultureDetail.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -56,6 +56,11 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "forget" */ "../views/forget.vue")
   },
+  {
+    path: "/culture/detail",
+    name: "CultureDetail",
+    component: CultureDetail
+  },
 ];
 
 const router = new VueRouter({

src/views/ProfileDetail.vue

@@ -2,7 +2,8 @@
   <div class="profile-detail">
     <div class="header">
       <div class="back" @click="goBack">
-        <i class="iconfont icon-back"></i>
+        
+        <img src="@/assets/back.png" alt="">
       </div>
       <div class="title">个人详情</div>
     </div>
@@ -56,6 +57,10 @@ export default {
       position: absolute;
       left: 15px;
       font-size: 20px;
+      img{
+        width: 20px;
+        height: 20px;
+      }
     }
 
     .title {

src/views/cultureDetail.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="profile-detail">
+    <div class="header">
+      <div class="back" @click="goBack">
+        <img src="@/assets/back.png" alt="">
+      </div>
+      <div class="title">央企文化</div>
+    </div>
+    <div class="content">
+        <div class="title">{{newsDetail.title}}</div>
+        <div class="content" v-html="newsDetail.content"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { getNewsDetail } from '@/api/home';
+export default {
+  name: 'ProfileDetail',
+  data() {
+    return {
+      newsDetail: {}
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    async getNewsDetail() {
+        const formData = new FormData();
+        formData.append('id', 8)
+        const res = await getNewsDetail(formData)
+        this.newsDetail = res.data
+    }
+  },
+  mounted() {
+    this.getNewsDetail()
+    console.log(this.newsDetail);
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.profile-detail {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+
+  .header {
+    position: relative;
+    height: 44px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #eee;
+
+    .back {
+      position: absolute;
+      left: 15px;
+      font-size: 20px;
+      img{
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .content{
+    padding: 10px;
+    .title{
+      margin-bottom: 10px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .content{
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+}
+</style> 

src/views/home/index.vue

@@ -10,7 +10,7 @@
       </div>
       <div class="row">
         <button class="btn" @click="toAppDownload">APP下载</button>
-        <button class="btn">央企文化</button>
+        <button class="btn" @click="toCultureDetail">央企文化</button>
       </div>
     </div>
     <div class="carousel">
@@ -103,6 +103,9 @@ export default {
     },
     toAppDownload() {
       window.open(this.userInfo.link[1].value, '_blank');
+    },
+    toCultureDetail() {
+      this.$router.push('/culture/detail');
     }
   }
 };