discover

EroCode · Jan 5, 2018 · fe06bab · fe06bab
1 parent 45023e7
commit fe06bab
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "axios": "^0.17.1",
     "element-ui": "^2.0.8",
+    "horwheel": "^1.0.1",
     "lodash": "^4.17.4",
     "mockjs": "^1.0.1-beta3",
     "vue": "^2.5.3",

diff --git a/src/app.vue b/src/app.vue
@@ -10,7 +10,7 @@
         <h3>Router</h3>
         <p>
             <router-link to="/test">Go to Test</router-link>
-        <!-- </p> -->
+        </p> -->
         <router-view></router-view>
 
         <!-- <el-container> 
@@ -38,8 +38,8 @@ module.exports = {
         };
     },
     components: {
-        navbar: navbar,
-        foot: foot
+        navbar,
+        foot
     }
 };
 </script>

diff --git a/src/apps/common/foot.vue b/src/apps/common/foot.vue
@@ -1,7 +1,7 @@
 <template>
 <footer>
     <div class="ctn">
-        <p>Dircle Feed</p>
+        <p>Dircle Feed @ EroCode Team</p>
         <p>Made with ♥ by Dimpurr & Heymind</p>
     </div>
 </footer>
@@ -18,7 +18,10 @@ module.exports = {
 </script>
 
 <style scoped lang="scss">
+@import "../../vars.scss";
 p {
-    color: #777;
+    font-size: 12px;
+    margin: 0;
+    color: $c-text-light;
 }
 </style>
diff --git a/src/apps/common/navbar.vue b/src/apps/common/navbar.vue
@@ -2,10 +2,11 @@
 <nav>
     <div class="ctn">
         <h1>Dircle Feed</h1>
-        <router-link to="/welcome">Welcome</router-link>
-        <router-link to="/subscribe">Subscribe</router-link>
-        <router-link to="/my">My Collections</router-link>
-        <router-link to="/discover">Discover</router-link>
+        <router-link to="/welcome">欢迎</router-link>
+        <router-link to="/my">我的</router-link>
+        <router-link to="/subscribe">订阅</router-link>
+        <router-link to="/discover">发现</router-link>
+        <el-button type="text" icon="el-icon-search">搜索</el-button>
     </div>
 </nav>
 </template>
@@ -21,13 +22,43 @@ module.exports = {
 </script>
 
 <style scoped lang="scss">
+@import "../../vars.scss";
+
 nav {
+
     h1 {
         display: inline-block;
         margin-right: 10px;
         font-size: 18px;
         font-weight: normal;
         color: #333;
+        cursor: pointer;
+    }
+
+    a {
+        margin: 0 8px;
+        padding: 3px 2px;
+        font-weight: 500;
+        color: $c-link-dark;
+        text-decoration: none;
+
+        @mixin nav-border($color) {
+            border-bottom: 2px solid $color;
+        }
+
+        &:hover {
+            @include nav-border($c-border);
+        }
+
+        &:active, &.router-link-active {
+            @include nav-border($c-link-dark);
+        }
+    }
+
+    .el-button {
+        float: right;
+        margin-top: 2px;
+        color: $c-link-dark;
     }
 }
 </style>
diff --git a/src/apps/site/common/articlesColle_list.vue b/src/apps/site/common/articlesColle_list.vue
@@ -0,0 +1,122 @@
+<template>
+<div>
+    <article class="artsColle-item">
+        <header>
+                <div class="info">
+                    <span>dimpurr</span>
+                    <span>123 篇文章</span>
+                </div>
+                <h4>AVG 幕后</h4>
+        </header>
+        <ul>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+        </ul>
+    </article>
+    <article class="artsColle-item">
+        <header>
+                <div class="info">
+                    <span>dimpurr</span>
+                    <span>123 篇文章</span>
+                </div>
+                <h4>AVG 幕后</h4>
+        </header>
+        <ul>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+        </ul>
+    </article>
+    <article class="artsColle-item">
+        <header>
+                <div class="info">
+                    <span>dimpurr</span>
+                    <span>123 篇文章</span>
+                </div>
+                <h4>AVG 幕后</h4>
+        </header>
+        <ul>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+        </ul>
+    </article>
+    <article class="artsColle-item">
+        <header>
+                <div class="info">
+                    <span>dimpurr</span>
+                    <span>123 篇文章</span>
+                </div>
+                <h4>AVG 幕后</h4>
+        </header>
+        <ul>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+            <li><a href="#">【充满了爱】原创概念性AVG《意识流》中篇标题尽可能的长测试<span class="origin-tag">KeyFC</span></a></li>
+        </ul>
+    </article>
+</div>
+</template>
+
+<script>
+module.exports = {
+    data: function() {
+        return {
+            vue_name: 'm component'
+        };
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../../vars.scss";
+
+.artsColle-item {
+    display: inline-block;
+    width: 300px;
+    overflow: hidden;
+    margin: 0 12px;
+    border: 1px solid $c-border;
+    box-shadow: 0 0 $size-shadow-item $c-shadow;
+    background-color: $c-bg-item;
+
+    ul {
+        @include flat-list-ul;
+        li {
+            a {
+                display: block;
+                max-width: 100%;
+                box-sizing: border-box;
+                padding: 10px 6px;
+                font-size: $size-text-item;
+                text-decoration: none;
+                text-overflow: ellipsis;
+                color: $c-text-item;
+                border-top: 1px solid $c-border;
+                &:hover {
+                    background-color: $c-bg-item-hover;
+                }
+
+                .origin-tag {
+                    float: right;
+                    padding: 2px 4px;
+                    background-color: $c-bg-tag;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/apps/site/common/linksColle_list.vue b/src/apps/site/common/linksColle_list.vue
@@ -0,0 +1,19 @@
+<template>
+    <p>I'm {{ vue_name }} !</p>
+</template>
+
+<script>
+module.exports = {
+    data: function() {
+        return {
+            vue_name: 'm component'
+        };
+    }
+};
+</script>
+
+<style scoped lang="scss">
+p {
+    color: #00F;
+}
+</style>
diff --git a/src/apps/site/discover.vue b/src/apps/site/discover.vue
@@ -1,13 +1,29 @@
 <template>
-    <p>I'm {{ vue_name }} !</p>
+<div>
+    <section>
+        <h3>文章集</h3>
+        <div class="hor">
+            <articlesColle_list></articlesColle_list>
+        </div>
+    </section>
+</div>
 </template>
 
 <script>
+import horwheel from 'horwheel';
+import articlesColle_list from './common/articlesColle_list.vue';
+
 module.exports = {
     data: function() {
         return {
             vue_name: 'd component'
         };
+    },
+    components: {
+        articlesColle_list
+    },
+    mounted() {
+        horwheel(document.querySelector('.hor'));
     }
 };
 </script>

diff --git a/src/apps/site/welcome.vue b/src/apps/site/welcome.vue
@@ -6,7 +6,7 @@
 module.exports = {
     data: function() {
         return {
-            vue_name: 'component'
+            vue_name: 'w component'
         };
     }
 };

diff --git a/src/global.scss b/src/global.scss
@@ -1,9 +1,22 @@
+@import "./vars.scss";
+
+body {
+    max-width: 100vw;
+    overflow-x: hidden;
+}
+
 .ctn {
     margin: 0 auto;
     padding: 0 10px;
     max-width: 900px;
 }
 
+.hor {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
 a {
-    color: #777;
+    color: $c-link;
 }
diff --git a/src/main.js b/src/main.js
@@ -11,6 +11,7 @@ import App from './app.vue';
 import SiteMy from './apps/site/my.vue';
 import SiteSubscribe from './apps/site/subscribe.vue';
 import SiteDiscover from './apps/site/discover.vue';
+import SiteWelcome from './apps/site/welcome.vue';
 
 // vue-router
 
@@ -25,6 +26,9 @@ const routes = [{
 },{
     path: '/discover',
     component: SiteDiscover
+},{
+    path: '/welcome',
+    component: SiteWelcome
 }];
 
 const router = new VueRouter({

diff --git a/src/vars.scss b/src/vars.scss
@@ -0,0 +1,23 @@
+$c-link: #777;
+$c-link-dark: #333;
+$c-border: #DDD;
+$c-border-light: #EEE;
+$c-shadow: #DDD;
+$c-text-item: #666;
+$c-text-light: #777;
+$c-text-lighter: #AAA;
+$c-bg-item: #FAFAFA;
+$c-bg-item-hover: #FFF;
+$c-bg-tag: #DDD;
+$size-shadow-item: 20px;
+$size-text-item: 14px;
+
+@mixin flat-list-ul {
+    // ul {
+        margin: 0;
+        padding: 0;
+        li {
+            list-style: none;
+        }
+    // }
+}