first commit

src/App.vue

@@ -1,28 +1,127 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div class="body">
+        <div class="list" v-loading="selecting">
+            <div style="display: flex">
+                <el-input v-model="input" placeholder="请输入内容"></el-input>
+                <el-button type="primary" style="margin-left: 10px" @click="sel"
+                    >搜索</el-button
+                >
+            </div>
+            <div>
+                <el-button v-for="(item,index) in list" :key="index" style="width: 100%; margin: 0; margin-top: 10px" @click="xuanze(index)">{{item.name}}</el-button>
+                
+            </div>
+        </div>
+        <div class="zhangjie" v-loading="zhangjieing">
+            <el-tabs type="border-card" style="height: 100%;overflow:auto;height:100%" v-if="mhxz != -1" @tab-click="selzj" >
+                <el-tab-pane v-for="(item,index) in list[mhxz].list" :key="index" :label="item.name">
+                  <!-- <el-button>{{item.url}}</el-button> -->
+                  <div v-for="(items,index) in zhangjielist[item.name]" :key="index">
+                    <div><el-tag>{{items.title}}</el-tag></div>
+                    <el-button v-for="(i,j) in items.list" :key="j" @click="getimg(i.url,item.name)">{{i.title}}</el-button>
+
+                  </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="50%" v-loading="imging">
+          <div style="overflow:auto;height: 100vh">
+          <img v-for="(item,index) in imglist.chapterImages" :key="index" :src="imglist.imghost + (imglist.chapterPath ?'/' + imglist.chapterPath : '/' ) + item" alt="" style="width:100%">
+
+          </div>
+        </el-drawer>
+    </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+    name: "App",
+    components: {},
+    data() {
+        return {
+            drawer: false,
+            list:[],
+            input: "",
+            selecting:false,
+            mhxz: -1,
+            zhangjielist:{},
+            zhangjieing: false,
+            name:"",
+            imglist:[],
+            imging:false
+
+        };
+    },
+    methods:{
+      sel(){
+        this.selecting = true
+        this.zhangjielist = {}
+        this.mhxz = -1;
+        this.axios.get("https://manhua.luyuan.tk/find?name=" + this.input).then((res)=>{
+          this.list = res.data
+          this.selecting = false
+        }).catch(()=>{
+          this.selecting = false
+        })
+      },
+      xuanze(index){
+        this.mhxz = index
+        this.zhangjie(this.list[index].list[0].name,this.list[index].list[0].url)
+      },
+      zhangjie(name, url){
+        this.zhangjieing = true
+        this.axios.get("https://manhua.luyuan.tk/section?name=" + name + "&url=" + url).then((res)=>{
+          this.zhangjielist[name] = res.data 
+          this.zhangjieing = false
+        }).catch(()=>{
+          this.zhangjieing = false
+        })
+      },
+      selzj(e){
+        console.log(e)
+        this.name = e.label
+        if(this.zhangjielist[e.label] == undefined){
+          this.zhangjie(e.label, this.list[this.mhxz].list[e.index].url)
+        }
+      },
+      getimg(url, name){
+        this.drawer = true
+        this.imging = true
+        this.imglist = []
+        this.axios.get("https://manhua.luyuan.tk/picture?name=" + name + "&url=" + url).then((res)=>{
+          this.imglist = res.data 
+          this.imging = false
+        }).catch(()=>{
+          this.imging = false
+        })
+      }
+    }
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.body {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: space-around;
+    background-color: #ececec;
+    align-items: center;
+}
+.body .list {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    width: 19%;
+    box-sizing: border-box;
+    height: 95%;
+}
+.body .zhangjie {
+    box-sizing: border-box;
+    overflow: hidden;
+    background-color: #fff;
+    height: 95%;
+    width: 79%;
+    border-radius: 10px;
 }
 </style>

src/main.js

@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import axios from "axios"
+Vue.use(ElementUI);
+Vue.prototype.axios = axios
 Vue.config.productionTip = false
 
 new Vue({