列表页面 doing

2026-07-27 00:30:19 +08:00 · 2020-01-13 18:20:20 +08:00
parent f0ad01fe5a
commit 2bdaf70be1
15 changed files with 399 additions and 21 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-container id="app">
+  <el-container id="app" class="theme-light">
    <el-header class="Header">
      <i class="el-icon-minus" @click="clickFrameEvent('min')"></i>
      <i class="el-icon-plus" @click="clickFrameEvent('max')"></i>
@@ -7,9 +7,25 @@
      <el-row class="Header-box">
      </el-row>
    </el-header>
-    <el-container class="Body">
-      <el-aside class="Aside">Aside</el-aside>
-      <el-main class="Main">Main</el-main>
+    <el-container>
+      <el-aside class="Aside" width="70px">
+        <el-row class="top">
+          <i :class="Main === 'Film' ? 'el-icon-film active' : 'el-icon-film'" @click="asideMenuClick('Film')"></i>
+          <i :class="Main === 'Search' ? 'el-icon-search active' : 'el-icon-search'" @click="asideMenuClick('Search')"></i>
+          <i :class="Main === 'Player' ? 'el-icon-video-play active' : 'el-icon-video-play'" @click="asideMenuClick('Player')"></i>
+          <i :class="Main === 'Star' ? 'el-icon-star-off active' : 'el-icon-star-off'" @click="asideMenuClick('Star')"></i>
+        </el-row>
+        <el-row class="bottom">
+          <i :class="Main === 'Setting' ? 'el-icon-setting active' : 'el-icon-setting'" @click="asideMenuClick('Setting')"></i>
+        </el-row>
+      </el-aside>
+      <el-main class="Main">
+        <Film v-show="Main === 'Film'" />
+        <Search v-show="Main === 'Search'" />
+        <Player v-show="Main === 'Player'" />
+        <Star v-show="Main === 'Star'" />
+        <Setting v-show="Main === 'Setting'" />
+      </el-main>
    </el-container>
  </el-container>
 </template>
@@ -18,48 +34,67 @@
 import Vue from 'vue'
 const { ipcRenderer: ipc } = require('electron')
 export default Vue.extend({
+  data () {
+    return {
+      Main: 'Film'
+    }
+  },
  methods: {
    clickFrameEvent (e:string) {
      ipc.send(e)
+    },
+    asideMenuClick (e:string) {
+      this.Main = e
    }
  },
-  created () {
-    console.log('alaa')
-  }
+  created () {}
 })
 </script>
 <style lang="scss">
@import './assets/theme/dark.scss';
@import './assets/theme/light.scss';
-html,body,#app{
-  width: 100%;
-  height: 100%;
+*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
-  background-color: #fff;
-  .Header, .Aside, .Main{
-    // border: 1px solid #000;
-  }
+}
+html,body,#app{
+  width: 100%;
+  height: 100%;
  .Header{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    -webkit-app-region: drag;
    -webkit-user-select: none;
+    padding: 0;
    i{
+      width: 60px;
+      height: 60px;
      font-size: 30px;
      cursor: pointer;
      -webkit-app-region: no-drag;
-      margin-left: 10px;
-      color: #606266;
-      &:hover{
-        color: #5ca4d0;
-      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
    }
  }
-  .Body{
+  .Aside{
+    -webkit-app-region: drag;
+    -webkit-user-select: none;
+    text-align: center;
+    i{
+      -webkit-app-region: no-drag;
+      font-size: 32px;
+      width: 70px;
+      height: 70px;
+      line-height: 70px;
+      cursor: pointer;
+    }
+  }
+  .Main{
    height: 100%;
+    overflow: hidden;
  }
 }
 </style>
--- a/src/assets/theme/dark.scss
+++ b/src/assets/theme/dark.scss
@@ -0,0 +1,23 @@
+@import './global.scss';
+.theme-dark{
+  color: var(--d-c);  
+  background-color: var(--d-bgc);
+  .Header, .Aside{
+    i{
+      color: var(--d-icon);
+      &:hover{
+        color: var(--d-icon-h);
+        background-color: var(--d-bgc-h);
+      }
+    }
+  }
+  .Aside{
+    i{
+      &.active{
+        color: var(--d-icon-h);
+        background-color: var(--d-bgc-h);
+        border-left: 4px solid var(--d-icon-h);
+      }
+    }
+  }
+}
--- a/src/assets/theme/global.scss
+++ b/src/assets/theme/global.scss
@@ -0,0 +1,19 @@
+:root{
+  // light
+  --l-c: #808695;
+  --l-c-h: #515a6e;
+  --l-icon: #C0C4CC;
+  --l-icon-h: #515a6e;
+  --l-bgc: #ffffff;
+  --l-bgc-h: #efefef;
+  --l-bdc: #dcdee2;
+
+  // dark
+  --d-c: #919191;
+  --d-c-h: #454545;
+  --d-icon: #919191;
+  --d-icon-h: #919191;
+  --d-bgc: #242424;
+  --d-bgc-h: #454545;
+  --d-bdc: #dcdee2;
+}
--- a/src/assets/theme/light.scss
+++ b/src/assets/theme/light.scss
@@ -0,0 +1,23 @@
+@import './global.scss';
+.theme-light{
+  color: var(--l-c); 
+  background-color: var(--l-bgc);
+  .Header, .Aside{
+    i{
+      color: var(--l-icon);
+      &:hover{
+        color: var(--l-icon-h);
+        background-color: var(--l-bgc-h);
+      }
+    }
+  }
+  .Aside{
+    i{
+      &.active{
+        color: var(--l-icon-h);
+        background-color: var(--l-bgc-h);
+        border-left: 4px solid var(--l-icon-h);
+      }
+    }
+  }
+}
--- a/src/components/detail.vue
+++ b/src/components/detail.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-row class="detail"></el-row>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+
+</style>
--- a/src/lib/sites.ts
+++ b/src/lib/sites.ts
@@ -0,0 +1,41 @@
+interface Site {
+  id: string
+  name: string
+  url: string
+  type: Array<any>
+}
+
+const sites:Array<Site> = [
+  {
+    id: 'okzy',
+    name: 'OK资源网',
+    url: 'https://www.okzy.co',
+    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 21 ], [ '福利', 22 ], [ '解说', 33 ]]
+  },
+  {
+    id: 'zuidazy',
+    name: '最大资源网',
+    url: 'http://www.zuidazy1.com',
+    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '福利', 16 ], [ '伦理', 17 ], [ '音乐', 18 ]]
+  },
+  {
+    id: 'subo',
+    name: '速播资源站',
+    url: 'https://www.subo988.com',
+    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 16 ], [ '音乐', 20 ]]
+  },
+  {
+    id: 'zuixinzy',
+    name: '最新资源网',
+    url: 'http://www.zuixinzy.cc',
+    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], ['伦理', 21], ['情色', 23], [ '福利', 30 ], [ '解说', 34 ]]
+  },
+  {
+    id: '123ku',
+    name: '123资源网',
+    url: 'https://www.123ku.com',
+    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 16 ]]
+  }
+]
+
+export default sites
--- a/src/lib/util.zy.ts
+++ b/src/lib/util.zy.ts
@@ -0,0 +1,33 @@
+import fly from 'flyio'
+import sites from './sites'
+
+interface ZY {
+  num: number
+  page: number
+  key: string
+  site: object
+  list: Array<string>
+  getInfoRequire: any
+  getInfoHtml: any
+  info: any
+  getDetailUrls: any
+  detail: any
+  getFilmsRequire: any
+  films: any
+}
+const zy:ZY = {
+  num: 0,
+  page: 1,
+  key: '',
+  site: {},
+  list: [],
+  getInfoRequire () {},
+  getInfoHtml () {},
+  info () {},
+  getDetailUrls () {},
+  detail () {},
+  getFilmsRequire () {},
+  films () {}
+}
+
+export default zy
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,9 +2,12 @@ import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
 import './plugins/element.ts'
+import Register from './page/register'

 Vue.config.productionTip = false

+Register.registerComponents()
+
 new Vue({
  store,
  render: h => h(App)
--- a/src/page/film.vue
+++ b/src/page/film.vue
@@ -0,0 +1,124 @@
+<template>
+  <el-row class="film">
+    <el-row class="film-tabs">
+      <el-tabs v-model="activeName" @tab-click="tabClick" tab-position="right">
+        <el-tab-pane class="film-tabpane" v-for="i in sites[siteNum].type" :key="sites[siteNum].id + i[1]" :label="i[0]" :value="i[1]" :name="i[0]">
+          <el-row class="tabs-table">
+            <el-table :data="filmData" stripe style="width: 100%;" class="film-table">
+              <el-table-column prop="name" label="影片名称"></el-table-column>
+              <el-table-column prop="type" label="影片类别" width="200"></el-table-column>
+              <el-table-column prop="time" label="更新时间" width="180"></el-table-column>
+            </el-table>
+          </el-row>
+        </el-tab-pane>
+      </el-tabs>
+    </el-row>
+    <el-row class="film-bottom" type="flex" justify="space-between">
+      <el-select v-model="siteNum" placeholder="请选择" size="small" @change="selectSite">
+        <el-option
+          v-for="(i, j) in sites"
+          :key="i.id"
+          :label="i.name"
+          :value="j">
+        </el-option>
+      </el-select>
+      <el-pagination
+        small
+        layout="total, prev, pager, next, jumper"
+        :current-page="filmPage"
+        :page-size="50"
+        :total="filmTotal">
+      </el-pagination>
+    </el-row>
+  </el-row>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+import zy from '@/lib/util.zy'
+import sites from '@/lib/sites'
+export default Vue.extend({
+  data () {
+    return {
+      sites: sites,
+      activeName: sites[0].type[0][0],
+      siteNum: 0,
+      siteName: sites[0].name,
+      filmPage: 1,
+      filmTotal: 0,
+      filmData: [
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
+        { name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
+      ]
+    }
+  },
+  methods: {
+    tabClick (tab:any) {
+      console.log(tab.$attrs.value)
+    },
+    selectSite (e:any) {
+      this.activeName = sites[e].type[0][0]
+    }
+  },
+  created () {}
+})
+</script>
+<style lang="scss" scoped>
+.film{
+  height: 100%;
+  .film-tabs{
+    height: calc(100% - 32px);
+    // overflow: scroll;
+    border: 1px solid #000;
+    .film-tabpane{
+      height: 100%;
+      border: 1px solid green;
+      overflow: scroll;
+    }
+    .tabs-table{
+      height: 100%;
+      border: 1px solid red;
+    }
+    .film-table{
+      border: 1px solid #000;
+      // height: 100px;
+      // height: calc(100% - 32px);
+      overflow: scroll;
+    }
+  }
+}
+</style>
--- a/src/page/player.vue
+++ b/src/page/player.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-row class="player">player</el-row>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+
+</style>
--- a/src/page/register.ts
+++ b/src/page/register.ts
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Film from './film.vue'
+import Search from './search.vue'
+import Player from './player.vue'
+import Star from './star.vue'
+import Setting from './setting.vue'
+
+export default {
+  registerComponents () {
+    Vue.component('Film', Film)
+    Vue.component('Search', Search)
+    Vue.component('Player', Player)
+    Vue.component('Star', Star)
+    Vue.component('Setting', Setting)
+  }
+}
--- a/src/page/search.vue
+++ b/src/page/search.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-row class="search">search</el-row>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+
+</style>
--- a/src/page/setting.vue
+++ b/src/page/setting.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-row class="setting">setting</el-row>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+
+</style>
--- a/src/page/star.vue
+++ b/src/page/star.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-row class="star">star</el-row>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({})
+</script>
+<style lang="scss" scoped>
+
+</style>
--- a/src/plugins/element.ts
+++ b/src/plugins/element.ts
@@ -1,5 +1,9 @@
 import Vue from 'vue'
-import { Button, Container, Row, Col, Header, Aside, Main } from 'element-ui'
+import {
+  Container, Row, Col, Header, Aside, Main,
+  Tabs, TabPane, Button, Select, Option, Pagination,
+  Table, TableColumn
+} from 'element-ui'

 Vue.use(Container)
 Vue.use(Row)
@@ -7,4 +11,11 @@ Vue.use(Col)
 Vue.use(Header)
 Vue.use(Aside)
 Vue.use(Main)
+Vue.use(Tabs)
+Vue.use(TabPane)
 Vue.use(Button)
+Vue.use(Select)
+Vue.use(Option)
+Vue.use(Pagination)
+Vue.use(Table)
+Vue.use(TableColumn)