Style detail

dev/manifest.json

@@ -25,9 +25,9 @@
     {
       "matches": [
         // "*://github.com/*",
-        // "*://git.elenet.me/*",
-        "*://www.baidu.com/*"
-        // "*://www.google.com.hk/*"
+        "*://git.elenet.me/*",
+        "*://www.baidu.com/*",
+        "*://www.google.com/*"
       ],
       "js": [
         "vendor.js",

src/content/app.vue

@@ -1,37 +1,74 @@
 <template>
   <section id="chrome-extension-aidou">
-    <input type="search"
-      class="search-input"
-      v-model.trim="keyword"
-      @keyup.enter="fetchExp">
-    <expression-list :query="query"></expression-list>
+    <app-header @fetch-exp="fetchExp"></app-header>
+    <expression-list
+      :data="data"
+      :total="total"
+      :page.sync="page"
+      :loading="loading">
+    </expression-list>
   </section>
 </template>
 
 <script>
+import debounce from 'lodash/debounce'
+import crun from '@/common/crun'
+import AppHeader from './components/app-header'
 import ExpressionList from './components/expression-list'
 export default {
   data () {
     return {
-      keyword: '',
-      query: ''
+      query: '',
+      data: [],
+      size: 10,
+      page: 1,
+      total: 0,
+      loading: false
     }
   },
 
   computed: {
-    
+    params () {
+      const { query, page, size } = this
+      return { query, page, size }
+    }
   },
 
-  created () {
+  watch: {
+    query: 'reset',
+    params: {
+      deep: true,
+      handler: 'fetchExpression'
+    }
   },
 
   methods: {
-    fetchExp () {
-      this.query = this.keyword
+    fetchExp (v) {
+      this.query = v
+    },
+
+    reset () {
+      this.data = []
+      this.page = 1
+      this.total = 0
+    },
+
+    fetchExpression () {
+      if (!this.query) return
+      this.loading = true
+      crun.$emit('fetch-expression', this.params)
+        .then(this.receiveExpression)
+    },
+
+    receiveExpression ({ data = [], total = 0 }) {
+      this.loading = false
+      this.total = total
+      this.data = this.data.concat(data)
     }
   },
 
   components: {
+    AppHeader,
     ExpressionList
   }
 }
@@ -40,45 +77,30 @@ export default {
 
 <style lang="scss">
 * {
+  box-sizing: border-box;
   padding: 0;
   margin: 0;
-  box-sizing: border-box;
 }
 
-html, body {
-  height: 100%;
+html,
+body {
   width: 100%;
+  height: 100%;
 }
 
 #chrome-extension-aidou {
-  $border-color: #d1d5da;
-  width: 100%;
-  height: 100%;
+  $border-color: #ebebeb;
+  z-index: 100;
   display: flex;
   flex-direction: column;
-  z-index: 100;
   box-sizing: border-box;
-  border: 1px solid $border-color;
-  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  padding: 30px 40px;
+  color: #3e5165;
+  border-left: 1px solid $border-color;
   background: #fff;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .search-input {
-    display: block;
-    height: 40px;
-    width: 100%;
-    padding: 0 10px;
-    font-size: 14px;
-    border: none;
-    border-bottom: 1px solid $border-color;
-
-    &:focus {
-      outline: none;
-    }
-  }
+  font-weight: 200;
 }
 </style>
 

src/content/components/app-header.vue

@@ -0,0 +1,161 @@
+<template>
+  <section class="cpt-app-header">
+    <div class="search-input">
+      <span class="icon-search"></span>
+      <input v-model.trim="keyword" @keyup.enter="fetchExp">
+    </div>
+    <ul class="oper-btns">
+      <li v-for="btn in btnList"
+        :key="btn.text"
+        class="btn" 
+        @click="btn.handler">
+        <span class="icon" :class="btn.icon"></span>
+        <span class="text">{{ btn.text }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+
+<script>
+export default {
+  data () {
+    return {
+      keyword: ''
+    }
+  },
+
+  computed: {
+    btnList () {
+      const { noop } = this
+      return [
+        {
+          icon: 'icon-shuffle',
+          text: '随便看看',
+          handler: noop
+        },
+        {
+          icon: 'icon-favorite_border',
+          text: '我的收藏',
+          handler: noop
+        },
+        {
+          icon: 'icon-settings',
+          text: '设置',
+          handler: noop
+        }
+      ]
+    }
+  },
+
+  methods: {
+    noop () {
+      alert('fuck you')
+    },
+
+    fetchExp () {
+      this.$emit('fetch-exp', this.keyword)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.cpt-app-header {
+  $main-color: #929aa3;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 10px;
+  border: 1px solid #eee;
+  border-radius: 40px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, .1);
+  background: #fff;
+
+  .search-input {
+    display: flex;
+    align-items: center;
+    flex: 3;
+
+    input {
+      display: block;
+      height: 100%;
+      border: none;
+      outline: none;
+      font-size: 14px;
+      font-weight: 500;
+
+      appearance: none;
+    }
+
+    .icon-search {
+      padding: 10px;
+      color: $main-color;
+      font-size: 16px;
+      vertical-align: middle;
+    }
+  }
+
+  .oper-btns {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+
+    list-style: none;
+
+    .btn {
+      position: relative;
+      height: 100%;
+      color: $main-color;
+
+      .icon {
+        font-size: 16px;
+
+        cursor: pointer;
+      }
+
+      .text {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 70px;
+        padding: 4px 0;
+        border-radius: 40px;
+        background: $main-color;
+        color: #fff;
+        font-size: 10px;
+        text-align: center;
+        opacity: 0;
+
+        transform: translate3d(-50%, -100%, 0);
+        transition: opacity .2s ease-in-out, transform .2s ease-in-out;
+
+        &:after {
+          content: "";
+          position: absolute;
+          bottom: -3px;
+          left: 50%;
+          border-top: 4px solid $main-color;
+          border-right: 4px solid transparent;
+          border-left: 4px solid transparent;
+
+          transform: translateX(-50%);
+        }
+      }
+
+      &:hover {
+        color: #55b559;
+
+        .text {
+          opacity: 1;
+
+          transform: translate3d(-50%, -120%, 0);
+        }
+      }
+    }
+  }
+}
+</style>
+