添加消息中心和详情的静态页面

src/layouts/SideMenu.vue

@@ -10,11 +10,7 @@
           tag="a"
           class="intro-x flex items-center pl-5 pt-4"
         >
-          <img
-            alt=""
-            class="w-6"
-            src="@/assets/images/logo.svg"
-          />
+          <img alt="" class="w-6" src="@/assets/images/logo.svg" />
           <span class="hidden xl:block text-white text-lg ml-3">
             ZhiOS<span class="font-medium"> 智莺</span>
           </span>
@@ -37,7 +33,7 @@
                 class="side-menu"
                 :class="{
                   'side-menu--active': menu.active,
-                  'side-menu--open': menu.activeDropdown
+                  'side-menu--open': menu.activeDropdown,
                 }"
                 @click.native="linkTo(menu)"
               >
@@ -77,7 +73,7 @@
                           v-if="$h.isset(subMenu.subMenu)"
                           class="side-menu__sub-icon"
                           :class="{
-                            'transform rotate-180': subMenu.activeDropdown
+                            'transform rotate-180': subMenu.activeDropdown,
                           }"
                         />
                       </div>
@@ -90,8 +86,9 @@
                         "
                       >
                         <li
-                          v-for="(lastSubMenu,
-                          lastSubMenuKey) in subMenu.subMenu"
+                          v-for="(
+                            lastSubMenu, lastSubMenuKey
+                          ) in subMenu.subMenu"
                           :key="lastSubMenuKey"
                         >
                           <SideMenuTooltip
@@ -126,7 +123,7 @@
       <!-- BEGIN: Content -->
       <div class="content">
         <TopBar />
- 
+
         <router-view />
       </div>
       <!-- END: Content -->
@@ -144,27 +141,25 @@ export default {
   components: {
     SideMenuTooltip,
     MobileMenu,
-    TopBar
+    TopBar,
   },
   data() {
     return {
-      formattedMenu: []
+      formattedMenu: [],
     };
   },
   computed: {
     sideMenu() {
       return this.nestedMenu(this.$store.state.sideMenu.menu);
-    }
+    },
   },
   watch: {
     $route() {
       this.formattedMenu = this.$h.assign(this.sideMenu);
-    }
+    },
   },
   mounted() {
-    cash("body")
-      .removeClass("login")
-      .addClass("app");
+    cash("body").removeClass("login").addClass("app");
     this.formattedMenu = this.$h.assign(this.sideMenu);
   },
   methods: {
@@ -182,7 +177,7 @@ export default {
           menu[key].activeDropdown = this.findActiveMenu(item.subMenu);
           menu[key] = {
             ...item,
-            ...this.nestedMenu(item.subMenu)
+            ...this.nestedMenu(item.subMenu),
           };
         }
       });
@@ -191,7 +186,7 @@ export default {
     },
     findActiveMenu(subMenu) {
       let match = false;
-      subMenu.forEach(item => {
+      subMenu.forEach((item) => {
         if (item.pageName == this.$route.name && !item.ignore) {
           match = true;
         } else if (!match && this.$h.isset(item.subMenu)) {
@@ -204,9 +199,11 @@ export default {
       if (this.$h.isset(menu.subMenu)) {
         menu.activeDropdown = !menu.activeDropdown;
       } else {
-        this.$router.push({
-          name: menu.pageName
-        });
+        if (this.$route.name != menu.pageName) {
+          this.$router.push({
+            name: menu.pageName,
+          });
+        }
       }
     },
     enter(el, done) {
@@ -214,10 +211,10 @@ export default {
         el,
         "slideDown",
         {
-          duration: 300
+          duration: 300,
         },
         {
-          complete: done
+          complete: done,
         }
       );
     },
@@ -226,13 +223,13 @@ export default {
         el,
         "slideUp",
         {
-          duration: 300
+          duration: 300,
         },
         {
-          complete: done
+          complete: done,
         }
       );
-    }
-  }
+    },
+  },
 };
 </script>

src/router/index.js

@@ -356,6 +356,12 @@ const routes = [
 				name: 'my-app',
 				meta: { title: ['我的应用', '创建应用'] },
 				component: () => import('@/views/CreateAn')
+			},
+			{
+				path: 'chat/CreateAn',
+				name: 'side-menu-chat',
+				meta: { title: ['消息中心', '详情'] },
+				component: () => import('@/views/ChatDetails')
 			}
 		]
 	},

src/views/Chat.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
+    <div class="intro-x flex flex-col sm:flex-row items-center mt-8">
       <h2 class="text-lg font-medium mr-auto">新闻列表</h2>
     </div>
     <div class="message-body">
@@ -9,16 +9,18 @@
           class="messageDiv"
           v-for="(item, index) in messageData"
           :key="index"
+          @click="getDetails(item)"
+          
         >
-          <div class="PopStatus" v-show="item.type">
-            <div>
+          <div class="PopStatus -intro-x" v-show="item.type">
+            <div class="div1">
               <i
                 class="el-icon-share"
                 style="font-size: 15px; margin-right: 5px"
               ></i
               ><span>分享</span>
             </div>
-            <div>
+            <div class="div1">
               <i
                 class="el-icon-download"
                 style="font-size: 15px; margin-right: 5px"
@@ -46,7 +48,11 @@
                   >
                 </div>
               </div>
-              <div class="headFloat-right" @click="itemPop(index)">
+              <div
+                class="headFloat-right"
+                @click.stop="itemPop(index)"
+                ref="nextTick"
+              >
                 <div class="el-icon-more"></div>
               </div>
             </div>
@@ -230,18 +236,21 @@ export default {
       ],
     };
   },
+
+  mounted() {},
   methods: {
     itemPop: function (index) {
- 
-        for (let i in this.messageData) {
-          if (i == index) {
-            this.messageData[i].type = !this.messageData[i].type;
-          } else {
-            this.messageData[i].type = false;
-          }
+      for (let i in this.messageData) {
+        if (i == index) {
+          this.messageData[i].type = !this.messageData[i].type;
+        } else {
+          this.messageData[i].type = false;
         }
-      
+      }
     },
+    getDetails: function( data ){
+        this.$router.push('chat/CreateAn')
+    }
   },
 };
 </script>
@@ -256,6 +265,8 @@ export default {
   width: 100%;
   overflow: hidden;
   .messageDiv {
+    cursor: pointer;
+    min-width: 450px;
     width: 31.7%;
     height: 429px;
     background: #ffffff;
@@ -277,11 +288,19 @@ export default {
       font-size: 14px;
       color: #2d3748;
       box-sizing: border-box;
-      div {
+      z-index: 999;
+      .div1 {
         padding-left: 16px;
         height: 44px;
         line-height: 44px;
       }
+      .div1:hover {
+        background: rgba(233, 233, 233, 0.3);
+        cursor: pointer;
+      }
+      .div1:active {
+        background: rgba(233, 233, 233, 0.5);
+      }
     }
     .mssageHeader {
       width: 100%;
@@ -290,7 +309,7 @@ export default {
       border-bottom: 1px solid #e2e8f0;
       box-sizing: border-box;
       .headerItem {
-        padding: 15px 20px;
+        padding: 15px 5%;
         overflow: hidden;
         height: 100%;
         box-sizing: border-box;
@@ -319,21 +338,19 @@ export default {
           float: right;
           color: #718096;
           font-size: 16px;
-          transform: rotate(90deg);
-          height: 16px;
-          width: 16px;
           text-align: center;
-          line-height: 2;
+          width: 40px;
           height: 100%;
-          width: 50px;
-   
-          div  {
-            float: right;
+          line-height: 43px;
+          cursor: pointer;
+          div {
+            transform: rotate(90deg);
+            display: inline-block;
           }
         }
       }
       .headerContent {
-        padding: 15px 20px;
+        padding: 15px 5%;
         overflow: hidden;
         img {
           width: 100%;
@@ -345,6 +362,7 @@ export default {
           box-sizing: border-box;
           color: #2d3748;
           padding-top: 20px;
+          overflow: hidden;
         }
       }
     }

src/views/ChatDetails.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="intro-x flex flex-col sm:flex-row items-center mt-8">
+      <h2 class="text-lg font-medium mr-auto">智莺联盟</h2>
+    </div>
+
+    <div class="detailsBody">
+      <div class="detailHead">
+        <span>100 米赛跑的时候你是没有时间去看你的对手的</span>
+      </div>
+      <div class="imgUrl-box">
+        <img
+          src="https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1"
+          alt=""
+        />
+      </div>
+      <div class="font-box">
+        <div>
+          易次将面头强样按国会名光时十县容流状识而非达理离解江即高战红变报存与形感速器切周信志子七加边金说劳况。管切存成且但间易长身好严存法建产去而构身线准们复断水即却信次式近口断日给制以亲精制布合很机形光过十定本始。
+        </div>
+        <div>
+          五党图格头设张支领制八位权场自还反法其多造向是认具资内列况实标空们。者究毛具七才连声现权自写照期越无色消例马半每化安适关须观他受外党划界不世清同二到红再持质并北平省看低心等。压易次将面头强样按国会名光时十县容流状识而非达理离解江即高战红变报存与形感速器切周信志子七加边金说劳况。管切存成且但间易长身好严存法建产去而构身线准们复断水即却信次式近口断日给制以亲精制布合很机形光过十定本始。五党图格头设张支领制八位权场自还反法其多造向。
+        </div>
+      </div>
+
+      <div class="imgUrl-box">
+        <img
+          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3111049137,3116259153&fm=26&gp=0.jpg"
+          alt=""
+        />
+      </div>
+
+      <div class="font-box">
+        <div>
+          易次将面头强样按国会名光时十县容流状识而非达理离解江即高战红变报存与形感速器切周信志子七加边金说劳况。管切存成且但间易长身好严存法建产去而构身线准们复断水即却信次式近口断日给制以亲精制布合很机形光过十定本始。
+        </div>
+        <div>
+          五党图格头设张支领制八位权场自还反法其多造向是认具资内列况实标空们。者究毛具七才连声现权自写照期越无色消例马半每化安适关须观他受外党划界不世清同二到红再持质并北平省看低心等。压易次将面头强样按国会名光时十县容流状识而非达理离解江即高战红变报存与形感速器切周信志子七加边金说劳况。管切存成且但间易长身好严存法建产去而构身线准们复断水即却信次式近口断日给制以亲精制布合很机形光过十定本始。五党图格头设张支领制八位权场自还反法其多造向。
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.detailsBody {
+  width: 769px;
+  background: #ffffff;
+  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.03);
+  opacity: 1;
+  border-radius: 22px;
+  padding-bottom: 80px;
+  margin-top: 20px;
+  .detailHead {
+    height: 62px;
+    line-height: 60px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e2e8f0;
+    span {
+      padding: 0 20px;
+      color: #2d3748;
+      font-size: 16px;
+    }
+  }
+  .imgUrl-box {
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    img {
+      margin: 0;
+      width: 100%;
+      vertical-align: middle;
+    }
+  }
+  .font-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 20px;
+    color: #2d3748;
+    font-size: 14px;
+    line-height: 28px;
+    div {
+      text-indent: 2em;
+    }
+  }
+}
+</style>