do search page

src/assets/theme/light.scss

@@ -4,25 +4,22 @@
     color: #515a6e;
   }
   .sider{
-    border-right: 1px solid #dcdee2;
     .sider-box{
       color: #808695;
       i{
         &:hover{
           color: #515a6e;
           background-color: #efefef;
-          border-right: 1px solid #808695;
         }
         &.active{
           color: #515a6e;
           background-color: #efefef;
-          border-left: 2px solid #515a6e;
+          border-left: 4px solid #515a6e;
         }
       }
     }
   }
   .header{
-    border-bottom: 1px solid #dcdee2;
     .header-box{
       color: #808695;
       i{
@@ -34,4 +31,25 @@
       }
     }
   }
+  .content{
+    border: 1px solid #dcdee2;
+  }
+  .search{
+    .search-middle{
+      .ivu-table-cell{
+        button{
+          margin: 0 4px;
+        }
+      }
+    }
+    .search-bottom{
+      border-top: 1px solid #dcdee2;
+      .ivu-progress-bg{
+        background-color: #dcdee2;
+      }
+      span{
+        color: #808695;
+      }
+    }
+  }
 }

src/plugin/iview/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import 'view-design/dist/styles/iview.css'
 import {
   Layout, Sider, Header, Content, Row, Col,
-  Icon, Button
+  Icon, Button, Input, Progress, Table
 } from 'view-design'
 
 Vue.component('Layout', Layout)
@@ -13,3 +13,6 @@ Vue.component('Row', Row)
 Vue.component('Col', Col)
 Vue.component('Icon', Icon)
 Vue.component('Button', Button)
+Vue.component('Input', Input)
+Vue.component('Progress', Progress)
+Vue.component('Table', Table)

src/store.js

@@ -6,7 +6,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     theme: 'light',
-    iconActive: 'list'
+    iconActive: 'search'
   },
   getters: {
     getTheme: state => {

src/util/util.video.js

@@ -2,12 +2,7 @@
 import axios from 'axios'
 const video = {
   url: 'http://www.666zy.com/',
-  init () {
-    console.log('init')
-    this.post(this.url, '冰雪奇缘')
-  },
-  getList () {},
-  post (url, txt) {
+  getList (url, txt) {
     const t = encodeURI(txt)
     const d = `wd=${t}&submit=search`
     axios({
@@ -21,14 +16,34 @@ const video = {
   },
   parser (txt) {
     const parser = new DOMParser()
-    const html = parser.parseFromString(txt, 'text/html')
-    console.log(html)
-    const list = html.querySelectorAll('.xing_vb4 a')
-    console.log(list)
-    for (let i = 0; i < list.length; i++) {
-      console.log(i, list[i].innerHTML, 'innerHTML')
-      console.log(i, list[i].getAttribute('href'), 'href')
+    let html = parser.parseFromString(txt, 'text/html')
+    let data = []
+    let name = []
+    let detail = []
+    let type = []
+    let time = []
+    let nameList = html.querySelectorAll('.xing_vb4 a')
+    for (let i = 0; i < nameList.length; i++) {
+      name.push(nameList[i].innerText)
+      detail.push('http://www.666zy.com' + nameList[i].getAttribute('href'))
     }
+    let typeList = html.querySelectorAll('.xing_vb5 a')
+    for (let i = 0; i < typeList.length; i++) {
+      type.push(typeList[i].innerText)
+    }
+    let timeList = html.querySelectorAll('.xing_vb6')
+    for (let i = 0; i < timeList.length; i++) {
+      time.push(timeList[i].innerText)
+    }
+    for (let i = 0; i < name.length; i++) {
+      let d = {}
+      d.name = name[i]
+      d.detail = detail[i]
+      d.type = type[i]
+      d.time = time[i]
+      data.push(d)
+    }
+    return data
   }
 }
 

src/views/Search.vue

@@ -1,13 +1,131 @@
 <template>
-  <div class="search">search</div>
+  <div class="search">
+    <div :class="active ? 'search-top haveList': 'search-top'" >
+      <Input class="search-input" v-model.trim="txt" size="large" search placeholder="输入需要搜索的资源名称..." @on-search="searchEvent" @on-focus="searchFocus" />
+    </div>
+    <div class="search-middle" v-if="active">
+      <Table stripe :columns="columns" :data="data" :loading="loading">
+        <template slot-scope="{ row, index }" slot="action" >
+          <Button size="small" @click="play(row)">Play</Button>
+          <Button size="small" @click="collection(index)">Star</Button>
+          <Button size="small" @click="detail(index)">Detail</Button>
+        </template>
+      </Table>
+    </div>
+    <div class="search-bottom" v-if="active">
+      <Progress class="progress" :percent="percent" status="active" :stroke-width="10">
+        <span class="progress-txt">搜索中</span>
+      </Progress>
+    </div>
+  </div>
 </template>
 <script>
-// import video from '@/util/util.video'
+import video from '@/util/util.video'
 export default {
   name: 'search',
-  methods: {},
-  created () {
-    // video.init()
-  }
+  data () {
+    return {
+      txt: '',
+      active: false,
+      percent: 0,
+      columns: [
+        {
+          title: 'Name',
+          key: 'name'
+        },
+        {
+          title: 'Category',
+          key: 'category'
+        },
+        {
+          title: 'Time',
+          key: 'time'
+        },
+        {
+          title: 'Action',
+          slot: 'action',
+          align: 'center',
+          width: 260
+        }
+      ],
+      data: [],
+      loading: true
+    }
+  },
+  methods: {
+    async searchEvent () {
+      if (this.txt !== '') {
+        this.active = true
+        let d = await video.getList('http://www.666zy.com/', this.txt)
+        console.log(d)
+      }
+    },
+    searchFocus () {
+      this.txt = ''
+      this.active = false
+    },
+    play (e) {
+      console.log(e)
+    },
+    collection (e) {},
+    detail (e) {}
+  },
+  created () {}
 }
 </script>
+<style lang="scss" scoped>
+.search{
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .search-top{
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: slideDown 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    .search-input{
+      width: 80%;
+    }
+    &.haveList{
+      animation: slideUp 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    }
+    @keyframes slideUp {
+      from {
+        height: 100%;
+      }
+      to{
+        height: 60px;
+      }
+    }
+    @keyframes slideDown {
+      from {
+        height: 60px;
+      }
+      to{
+        height: 100%;
+      }
+    }
+  }
+  .search-middle{
+    flex: 1;
+    padding: 10px;
+  }
+  .search-bottom{
+    width: 100%;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 0 10px;
+    .progress-txt{
+      font-size: 10px;
+      margin-left: 4px;
+    }
+    .progress{
+      width: 100%;
+    }
+  }
+}
+</style>