feat: page labels

ChenJiaH · Sep 16, 2019 · ec6c241 · ec6c241
1 parent b1b5c8d
commit ec6c241
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 24 deletions.
diff --git a/src/assets/css/fonts/iconfont.css b/src/assets/css/fonts/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {font-family: "iconfont";
-  src: url('./iconfont.eot?t=1568600941274'); /* IE9 */
-  src: url('./iconfont.eot?t=1568600941274#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('./iconfont.woff?t=1568600941274') format('woff'),
-  url('./iconfont.ttf?t=1568600941274') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  src: url('./iconfont.eot?t=1568618884900'); /* IE9 */
+  src: url('./iconfont.eot?t=1568618884900#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('./iconfont.woff?t=1568618884900') format('woff'),
+  url('./iconfont.ttf?t=1568618884900') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 }
 
 .iconfont {
@@ -61,6 +61,10 @@
   content: "\e869";
 }
 
+.icon-mail:before {
+  content: "\e645";
+}
+
 .icon-tu:before {
   content: "\e704";
 }
@@ -85,10 +89,6 @@
   content: "\e643";
 }
 
-.icon-time:before {
-  content: "\e909";
-}
-
 .icon-location:before {
   content: "\e76f";
 }

diff --git a/src/assets/css/fonts/iconfont.eot b/src/assets/css/fonts/iconfont.eot
diff --git a/src/assets/css/fonts/iconfont.ttf b/src/assets/css/fonts/iconfont.ttf
diff --git a/src/assets/css/fonts/iconfont.woff b/src/assets/css/fonts/iconfont.woff
diff --git a/src/router.js b/src/router.js
@@ -15,6 +15,11 @@ const router = new Router({
       name: 'labels',
       component: () => import(/* webpackChunkName: "labels" */ './views/Labels.vue'),
     },
+    {
+      path: '/links',
+      name: 'links',
+      component: () => import(/* webpackChunkName: "labels" */ './views/Links.vue'),
+    },
     {
       path: '/about',
       name: 'about',

diff --git a/src/views/Labels.vue b/src/views/Labels.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-labels">
-    <div class="nav flex flex-middle">
+    <div class="nav flex flex-middle" v-if="archives.labels.length">
       <div class="name flex flex-center flex-middle">标签</div>
       <div class="labels flex-item flex">
         <a class="label flex flex-middle flex-center" :class="[item.name === archives.label && 'active']" href="javascript:;" v-for="item in archives.labels" :key="item.name" v-text="item.name" @click="changeLabel(item)"></a>
@@ -24,21 +24,23 @@
         </ul>
       </div>
     </div>
-    <div class="auxi flex flex-middle flex-center" v-if="archives.none">
-      <i class="iconfont icon-none"></i>
-      <span>目前就这么多啦~</span>
-    </div>
-    <template v-else>
-      <template v-if="archives.loading">
-        <div class="auxi flex flex-middle flex-center">
-          <i class="iconfont icon-loading"></i>
-          <span>正在加载中</span>
-        </div>
-      </template>
+    <template v-if="archives.label">
+      <div class="auxi flex flex-middle flex-center" v-if="archives.none">
+        <i class="iconfont icon-none"></i>
+        <span>目前就这么多啦~</span>
+      </div>
       <template v-else>
-        <div class="flex flex-middle flex-center">
-          <a class="btn-next flex flex-middle flex-center" href="javascript:;" @click="getData">加载更多</a>
-        </div>
+        <template v-if="archives.loading">
+          <div class="auxi flex flex-middle flex-center">
+            <i class="iconfont icon-loading"></i>
+            <span>正在加载中</span>
+          </div>
+        </template>
+        <template v-else>
+          <div class="flex flex-middle flex-center">
+            <a class="btn-next flex flex-middle flex-center" href="javascript:;" @click="getData">加载更多</a>
+          </div>
+        </template>
       </template>
     </template>
   </div>
@@ -150,7 +152,7 @@ export default {
 </script>
 <style lang="scss" scoped>
   .page-labels {
-    .nav {
+    .nav { margin-bottom: 24px;
       .name { width: 40px; height: 40px; background-color: #f0f0f0; border-radius: 50%; color: #555555; margin-left: -18px; margin-right: 8px;}
       .labels { flex-wrap: wrap;
         .label { font-size: 12px; color: #999999; padding: 0 12px; height: 32px; margin-right: 8px; margin-bottom: 8px; border-radius: 15px; background-color: #f6f6f6; transition: all 0.2s;

diff --git a/src/views/Links.vue b/src/views/Links.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="page-links">
+    <div class="links">
+      <a class="link flex flex-middle" :href="link.url" target="_blank" rel="noopener noreferrer" v-for="(link, index) in links" :key="index">
+        <div class="avatar">
+          <img :src="link.avatar" alt="" v-if="link.avatar">
+        </div>
+        <div class="flex-item">
+          <h4 class="name" v-text="link.name"></h4>
+          <p class="bio" v-text="link.bio"></p>
+        </div>
+      </a>
+    </div>
+    <div class="tips flex flex-middle">
+      <span class="flex flex-middle flex-center">
+        <i class="iconfont icon-mail"></i>
+      </span>
+      <p>交换友链可以邮件 chenjiahao.xyz@gmail.com</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    return {
+      links: [{
+        avatar: 'http://forsigner.com/images/avatar.jpg',
+        bio: 'Find the bug of the world',
+        name: 'Forsigner',
+        url: 'http://forsigner.com',
+      }],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+  .page-links {
+    .links { margin-bottom: 24px;
+      .link { margin-left: -20px;
+        .avatar { width: 44px; height: 44px; border-radius: 50%; background-color: #f0f0f0; margin-right: 8px;
+          img { width: 100%; height: 100%; border-radius: 50%; overflow: hidden;}
+        }
+        .name { font-weight: bold; font-size: 16px; color: #444444; line-height: 24px;}
+        .bio { font-size: 13px; color: #999999; text-overflow: ellipsis; overflow: hidden; line-height: 20px;}
+      }
+      .link + .link { margin-top: 16px;}
+    }
+    .tips { height: 32px; color: #dddddd; margin-top: 8px;
+      span { width: 24px; height: 24px; border-radius: 50%; background-color: #f0f0f0; margin-right: 8px; margin-left: -10px;
+        i { font-size: 16px; color: #ffffff;}
+      }
+      p { font-size: 16px; color: #dddddd;}
+    }
+
+    .btn-next {
+      width: 100px;
+      height: 32px;
+      border: 1px solid #eeeeee;
+      border-radius: 16px;
+      color: #888888;
+      margin-top: 8px;
+    }
+  }
+</style>