更新消息

src/assets/sass/_app.scss

@@ -131,4 +131,19 @@
 .el-carousel__arrow--left {
     display: none;
 
+}
+
+.el-dialog, .el-pager li  {
+background: none;
+}
+
+.el-pagination .btn-next, .el-pagination .btn-prev {
+    background: none;
+
+}
+
+.pagination-box {
+    .el-pagination button:disabled {
+        background: none;
+    }
 }

src/router/index.js

@@ -384,22 +384,22 @@ const routes = [
 	}
 ];
 
-const router = new VueRouter({
-	routes,
-  })
-
 // const router = new VueRouter({
-// 	mode: 'hash',  //history
-// 	base: process.env.BASE_URL,
 // 	routes,
-// 	scrollBehavior(to, from, savedPosition) {
-// 		if (savedPosition) {
-// 			return savedPosition;
-// 		} else {
-// 			return { x: 0, y: 0 };
-// 		}
-// 	}
-// });
+//   })
+
+const router = new VueRouter({
+	mode: 'history',  //history
+	base: process.env.BASE_URL,
+	routes,
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition) {
+			return savedPosition;
+		} else {
+			return { x: 0, y: 0 };
+		}
+	}
+});
 
 router.beforeEach((to, from, next) => {
 	document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'

src/views/Chat.vue

@@ -1,38 +1,80 @@
 <template>
   <div>
     <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
-      <h2 class="text-lg font-medium mr-auto">Chat1</h2>
-      <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
-        <button class="button text-white bg-theme-1 shadow-md mr-2">
-          Start New Chat
-        </button>
-        <div class="dropdown ml-auto sm:ml-0">
-          <button
-            class="dropdown-toggle button px-2 box text-gray-700"
-          >
-            <span class="w-5 h-5 flex items-center justify-center">
-              <PlusIcon class="w-4 h-4" />
-            </span>
-          </button>
-          <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box p-2">
-              <a
-                
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
-              >
-                <UsersIcon class="w-4 h-4 mr-2" /> Create Group
-              </a>
-              <a
-                
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
-              >
-                <SettingsIcon class="w-4 h-4 mr-2" /> Settings
-              </a>
+      <h2 class="text-lg font-medium mr-auto">新闻列表</h2>
+    </div>
+    <div class="message-body">
+      <div class="message-box">
+        <div
+          class="messageDiv"
+          v-for="(item, index) in messageData"
+          :key="index"
+        >
+          <div class="PopStatus" v-show="item.type">
+            <div>
+              <i
+                class="el-icon-share"
+                style="font-size: 15px; margin-right: 5px"
+              ></i
+              ><span>分享</span>
+            </div>
+            <div>
+              <i
+                class="el-icon-download"
+                style="font-size: 15px; margin-right: 5px"
+              ></i>
+              <span>下载</span>
+            </div>
+          </div>
+
+          <div class="mssageHeader">
+            <div class="headerItem">
+              <div class="head-">
+                <img
+                  src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3244810419,3612941851&fm=11&gp=0.jpg"
+                  alt=""
+                />
+              </div>
+              <div class="head-font">
+                <div style="font-size: 14px; colo: #2d3748">中秋佳节大促销</div>
+                <div>
+                  <span style="color: #1890ff; font-size: 12px"
+                    >中秋佳节大促销</span
+                  >
+                  <span class="timeLeft" style="font-size: 12px; color: #718096"
+                    >11分钟前</span
+                  >
+                </div>
+              </div>
+              <div class="headFloat-right" @click="itemPop(index)">
+                <div class="el-icon-more"></div>
+              </div>
+            </div>
+            <div class="headerContent">
+              <img :src="item.imgUrl" alt="" />
+              <div class="contentDiv">
+                <h1 style="font-size: 16px; margin: 0px 0 10px">
+                  {{ item.h1 }}
+                </h1>
+                <h2 style="font-size: 14px">
+                  {{ item.h2 }}
+                </h2>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="pagination-box intro-x">
+      <el-pagination
+        hide-on-single-page
+        :page-size="20"
+        :pager-count="11"
+        layout="prev, pager, next"
+        :total="1000"
+      >
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -40,11 +82,272 @@
 export default {
   data() {
     return {
- 
+      messageData: [
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+        {
+          imgUrl:
+            "https://img.shipin520.com/photo/00006/08635-350-v1.jpg?imageView2/2/sharpen/1",
+          h1: "智莺新上新，全场满1000减100智莺新",
+          h2:
+            " 智莺新上新，全场满1000减100智莺新上新，全场满1000减智莺新上新，全场满1000减100智莺新上新，全场满1000减100智莺新上新.",
+          type: false,
+        },
+      ],
     };
   },
   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;
+          }
+        }
+      
+    },
+  },
 };
 </script>
+
+
+<style lang="scss" scoped>
+.message-body {
+  width: calc(100% + 24px);
+}
+
+.message-box {
+  width: 100%;
+  overflow: hidden;
+  .messageDiv {
+    width: 31.7%;
+    height: 429px;
+    background: #ffffff;
+    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.03);
+    opacity: 1;
+    border-radius: 22px;
+    float: left;
+    margin: 24px 1.6% 24px 0;
+    box-sizing: border-box;
+    position: relative;
+    .PopStatus {
+      position: absolute;
+      width: 152px;
+      box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
+      border-radius: 6px;
+      top: 47px;
+      right: 20px;
+      background: #fff;
+      font-size: 14px;
+      color: #2d3748;
+      box-sizing: border-box;
+      div {
+        padding-left: 16px;
+        height: 44px;
+        line-height: 44px;
+      }
+    }
+    .mssageHeader {
+      width: 100%;
+      height: 73px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #e2e8f0;
+      box-sizing: border-box;
+      .headerItem {
+        padding: 15px 20px;
+        overflow: hidden;
+        height: 100%;
+        box-sizing: border-box;
+        .head- {
+          float: left;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          overflow: hidden;
+          margin-right: 12px;
+        }
+        .head-font {
+          float: left;
+          .timeLeft::before {
+            vertical-align: 3px;
+            content: "";
+            margin: 0 4px;
+            width: 2px;
+            height: 2px;
+            display: inline-block;
+            background: #718096;
+            border-radius: 50%;
+          }
+        }
+        .headFloat-right {
+          float: right;
+          color: #718096;
+          font-size: 16px;
+          transform: rotate(90deg);
+          height: 16px;
+          width: 16px;
+          text-align: center;
+          line-height: 2;
+          height: 100%;
+          width: 50px;
+   
+          div  {
+            float: right;
+          }
+        }
+      }
+      .headerContent {
+        padding: 15px 20px;
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 224px;
+        }
+        .contentDiv {
+          height: 111px;
+          width: 100%;
+          box-sizing: border-box;
+          color: #2d3748;
+          padding-top: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/CreateAn.vue

@@ -109,11 +109,12 @@ export default {
 
   mounted() {
  
-    // this.getInit()
+    this.getInit()
   },
   methods: {
 
     getInit: function(){
+      console.log(123)
       aget('/api/myapp/list').then(res=>{
         console.log(res)
       })

src/views/index.vue

@@ -46,7 +46,7 @@
         </div>
       </div>
       <!-- 方案解决 -->
-      <div class="content-title intro-x">
+      <div class="content-title intro-Y">
         <p class="p1">多终端产品线 全覆盖</p>
         <p class="p2">全面覆盖多终端产品线，智颖系统智能集成系</p>
       </div>
@@ -64,7 +64,7 @@
                 alt=""
               />
             </div>
-            <div class="item-Text">
+            <div class="item-Text -intro-x">
               <div class="text1">全原生开发</div>
               <div class="text2">支持安卓，iOS，iPad终端全平台运营</div>
             </div>