日志完善

src/layouts/navbar/index.vue

@@ -64,7 +64,7 @@ export default {
                     title: "开发者平台"
                 },
                 {
-                    index: "/log",
+                    index: "/log/list",
                     title: "有什么新功能"
                 }
             ],

src/pages/log/list/index.vue

@@ -1,12 +1,16 @@
 <template>
     <div class="wrap">
-        <div class="inner">
-            <el-timeline>
-                <el-timeline-item v-for="(item, i) in listData" :key="i" :timestamp="item.updateTime" placement="top" color="#007EFF">
-                    <el-card>
-                        <h6>{{ platformList.find(e => e.id === item.platformId).name + item.versionName }}</h6>
-                        <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
-                        <ul class="detail">
+        <div class="top">
+            <h1>最近更新</h1>
+            <p>给用户带来更好的服务与体验是我们不断优化和迭代产品的动力。</p>
+        </div>
+        <div class="timeline">
+            <div class="item" v-for="(item, i) in listData" :key="i">
+                <span class="date">{{ item.updateTime }}</span>
+                <div class="right">
+                    <h6>{{ item.versionName }}</h6>
+                    <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
+                    <ul class="detail">
                         <li v-for="(item, i) in item.logContents" :key="i">
                             <p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
                             <div class="val">
@@ -14,9 +18,8 @@
                             </div>
                         </li>
                     </ul>
-                    </el-card>
-                </el-timeline-item>
-            </el-timeline>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -68,19 +71,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wrap{
+.wrap {
     padding: 50px 0 20px;
     background-color: #fff;
-    .inner {
+    .top {
+        margin-bottom: 50px;
+        text-align: center;
+    }
+    .timeline {
+        display: flex;
+        flex-direction: column;
         width: 1000px;
         margin: 0 auto;
     }
-    /deep/.el-card__body {
-      padding-left: 40px;
+    .item {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 30px;
+    }
+    .date {
+        width: 400px;
+        margin-right: 70px;
+        text-align: right;
+        color: $main-color;
+        font-size: 14px;
+    }
+    .right {
+        flex: 1;
     }
     h6 {
-      margin-bottom: 15px;
-      font-size: 18px;
+        margin: 0 0 15px 0;
+        font-size: 18px;
     }
     .cover {
         max-width: 400px;
@@ -97,8 +118,8 @@ export default {
             font-size: 14px;
             color: $main-color;
             img {
-                margin-right: 5px;
-                margin-left: -26px;
+                width: 30px;
+                margin-right: 8px;
             }
         }
         .val {
@@ -109,11 +130,11 @@ export default {
               position: relative;
               &:before {
                 content: '';
-                position: absolute;
-                top: 11px;
-                left: -10px;
+                display: inline-block;
                 width: 5px;
                 height: 5px;
+                margin: 0 15px 0 8px;
+                vertical-align: middle;
                 border-radius: 20px;
                 background-color: $main-color;
               }