DMCollection · PlentyMore · Aug 27, 2018 · Aug 27, 2018 · Aug 27, 2018 · Aug 27, 2018
diff --git a/index.html b/index.html
@@ -1,7 +1,10 @@
 <!DOCTYPE html>
 <html style="background: rgb(20, 20, 34)">
 
+<style type="text/css">
+</style>
 <head>
+    <link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Bungee+Inline|Leckerli+One" rel="stylesheet">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>test</title>
@@ -15,5 +18,4 @@
   <div id="app">
   </div>
 </body>
-
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -16,37 +16,44 @@
     </div>
     -->
     <div class="searchCom" :style="searchBoxMove" @mouseover="showInputKey=true" @mouseout="showInputKey=!searchText==''" v-show="showSearch">
+      <!--<div class="searchComBg" v-show="!showInputKey"></div>-->
       <div class="searchIconLeft"></div>
-      <transition name="searchInputTran">
-        <input class="searchKeyInput" v-if="showInputKey" v-model="searchText">
+      <transition name="searchInputTran" v-show="showInputKey">
+        <input placeholder=" 请输入关键词" class="searchKeyInput" v-if="showInputKey" v-model="searchText">
       </transition>
       <div class="searchIconRight"></div>
     </div>
-    <router-view :key="activeDate" v-bind="routerInfo"></router-view>
+    <transition name="routerTran" v-show="showInputKey">
+      <router-view :key="activeDate" v-bind="routerInfo" style="margin-bottom:30px;" @toIndex="toIndex"></router-view>
+    </transition>
+    <footer1 style="margin-bottom:0;"></footer1>
   </div>
 </template>
 
 <script>
 import MenuItemButton from "./components/menu/MenuItemButton.vue";
 import MenuButtonBox from "./components/menu/MenuButtonBox.vue";
+import footer1 from "./components/footer/footer.vue";
 export default {
   name: "App",
   components: {
     MenuItemButton,
-    MenuButtonBox
+    MenuButtonBox,
+    footer1
   },
   data() {
     return {
       routerInfo: {}, //用来传递数据给router-view对应组件用的包
       showMenu: false,
       showMain: false,
       searchText: "",
-      shake:false,
-      showInputKey:false,
+      shake: false,
+      showInputKey: false,
       searchBoxMove: {
         transform: "translate(-50%,0%) rotateZ(0deg)"
       },
-      activeDate: ""
+      activeDate: "",
+      toIndexFlag:true,
     };
   },
   computed: {
@@ -55,6 +62,10 @@ export default {
       if (this.$route.path == "/searchResult" || this.$route.path == "/")
         return true;
       else return false;
+    },
+    showFooter() {
+      if (this.$route.path == "/") return false;
+      else return true;
     }
   },
   watch: {
@@ -64,11 +75,14 @@ export default {
     searchText: async function(newText) {
       this.searchText = newText;
       if (newText == "") {
-        this.showInputKey=false;
+        this.showInputKey = false;
         this.searchBoxMove = {
           transform: "translate(-50%,0%) rotateZ(0deg)"
         };
-        this.$router.push({ name: "index" });
+        if(this.toIndexFlag){
+          this.$router.push({ name: "index" });
+        }
+        else this.toIndexFlag=true;
       } else {
         this.routerInfo = {
           searchText: this.searchText
@@ -81,14 +95,26 @@ export default {
     }
   },
   methods: {
+    toIndex(){
+      console.log('跳转到了首页');
+      if(this.$route.path !== "/") this.toIndexFlag=false;
+      this.searchText='';
+      //setTimeout(()=>{this.toIndexFlag=true;},1);
+    },
     //组件中无法使用this.$router对象，只能在App.vue将跳转函数传递给组件
     jmpIndex: function() {
       this.activeDate = new Date().getTime();
       this.$router.push({ name: "index" });
     },
     jmpWatch: function() {
-      this.activeDate = new Date().getTime();
-      this.$router.push({ name: "watch" });
+      // this.activeDate = new Date().getTime();
+      this.$router.push({ name: "blank"});
+      this.$router.push({ name: "watch"});
+      // setTimeout(()=>{
+      //
+      //   this.$router.push({ name: "watch"});
+      // },100);
+
     },
     jmpPersonal: function() {
       this.activeDate = new Date().getTime();
@@ -98,7 +124,7 @@ export default {
       console.log("App", pageNum);
       console.log(window.location.host);
       this.activeDate = new Date().getTime();
-      this.routerInfo={
+      this.routerInfo = {
         noticeIndex: pageNum
       };
       //window.location.assign('#/notice/'+pageNum);
@@ -121,6 +147,10 @@ export default {
 </script>
 
 <style>
+  .vicp-wrap {
+    background-color: #07070c !important;
+    width: 450px !important;
+  }
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -129,42 +159,56 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-.searchCom{
+.routerTran-enter-active,
+.routerTran-leave-active {
+  transition: opacity 0.3s;
+}
+.routerTran-enter, .routerTran-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+.searchCom {
   position: absolute;
   top: 200px;
   left: 50%;
-  z-index: 400;
+  z-index: 1000;
   display: flex;
   flex-direction: row;
   height: 50px;
   transition: 1s all;
 }
-.searchIconLeft{
+.searchComBg{
+  background-image: url("../static/img/search.png");
+  background-size: cover;
+  width: 50px;
+  border-radius: 5px;
+  opacity: 0.8;
+  border: 2px solid black;
+}
+.searchIconLeft {
   background-image: url("../static/img/searchLeft.png");
   background-size: cover;
   height: 50px;
   width: 25px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
-  opacity: .8;
+  opacity: 0.8;
   border-top: 2px solid black;
   border-bottom: 2px solid black;
   border-left: 2px solid black;
 }
-.searchIconRight{
+.searchIconRight {
   background-image: url("../static/img/searchRight.png");
   background-size: cover;
   height: 50px;
   width: 25px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
-  opacity: .8;
+  opacity: 0.8;
   border-top: 2px solid black;
   border-bottom: 2px solid black;
   border-right: 2px solid black;
-  margin-left: -0.1px;
 }
-.searchKeyInput{
+.searchKeyInput {
   height: 50px;
   width: 200px;
   background: rgba(255, 255, 255, 0.534);
@@ -230,28 +274,28 @@ export default {
   left: 50%;
   transition: transform 1s;
 }
-.searchInBar{
+.searchInBar {
   margin: auto auto;
   display: flex;
   flex-direction: row;
   width: 450px;
 }
-.searchBarKey{
+.searchBarKey {
   outline: none;
   height: 20px;
   background: rgba(255, 255, 255, 0);
   border: 1px dashed black;
   /*padding:10px;*/
   font-size: 20px;
-  font-family: 华文琥珀;
+  font-family: 'Sigmar One', cursive;
   font-weight: bold;
   line-height: 20px;
   margin: auto auto;
 }
-.searchBarKey:hover{
+.searchBarKey:hover {
   border: 1px dashed black;
 }
-.searchBarKey:active{
+.searchBarKey:active {
   border: 1px dashed black;
 }
 .searchBarItem {
@@ -260,36 +304,72 @@ export default {
   margin-right: 10px;
   line-height: 23px;
   font-size: 25px;
-  font-family: 华文琥珀;
+  font-family: 华文琥珀,serif;
   font-weight: bold;
   text-align: center;
 }
-.searchRun-animation{
-  animation: searchBarShake .5s linear 0s 1 normal;
+.searchRun-animation {
+  animation: searchBarShake 0.5s linear 0s 1 normal;
 }
 @keyframes searchBarShake {
-  0%{transform: translate(-50%,-500%) rotate(-3deg);}
-  12.5%{transform: translate(-50%,-500%) rotate(0deg);}
-  25%{transform: translate(-50%,-500%) rotate(3deg);}
-  37.5%{transform: translate(-50%,-500%) rotate(0deg);}
-  50%{transform: translate(-50%,-500%) rotate(-3deg);}
-  62.5%{transform: translate(-50%,-500%) rotate(0deg);}
-  75%{transform: translate(-50%,-500%) rotate(3deg);}
-  87.5%{transform: translate(-50%,-500%) rotate(0deg);}
-  100%{transform: translate(-50%,-500%) rotate(-3deg);}
+  0% {
+    transform: translate(-50%, -500%) rotate(-3deg);
+  }
+  12.5% {
+    transform: translate(-50%, -500%) rotate(0deg);
+  }
+  25% {
+    transform: translate(-50%, -500%) rotate(3deg);
+  }
+  37.5% {
+    transform: translate(-50%, -500%) rotate(0deg);
+  }
+  50% {
+    transform: translate(-50%, -500%) rotate(-3deg);
+  }
+  62.5% {
+    transform: translate(-50%, -500%) rotate(0deg);
+  }
+  75% {
+    transform: translate(-50%, -500%) rotate(3deg);
+  }
+  87.5% {
+    transform: translate(-50%, -500%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -500%) rotate(-3deg);
+  }
 }
-.searchRun-animation2{
-  animation: searchBarShake2 .5s linear 0s 1 normal;
+.searchRun-animation2 {
+  animation: searchBarShake2 0.5s linear 0s 1 normal;
 }
 @keyframes searchBarShake2 {
-  0%{transform: translate(-50%,-600%) rotate(0deg);}
-  12.5%{transform: translate(-50%,-600%) rotate(-3deg);}
-  25%{transform: translate(-50%,-600%) rotate(0deg);}
-  37.5%{transform: translate(-50%,-600%) rotate(3deg);}
-  50%{transform: translate(-50%,-600%) rotate(0deg);}
-  62.5%{transform: translate(-50%,-600%) rotate(-3deg);}
-  75%{transform: translate(-50%,-600%) rotate(0deg);}
-  87.5%{transform: translate(-50%,-600%) rotate(3deg);}
-  100%{transform: translate(-50%,-600%) rotate(0deg);}
+  0% {
+    transform: translate(-50%, -600%) rotate(0deg);
+  }
+  12.5% {
+    transform: translate(-50%, -600%) rotate(-3deg);
+  }
+  25% {
+    transform: translate(-50%, -600%) rotate(0deg);
+  }
+  37.5% {
+    transform: translate(-50%, -600%) rotate(3deg);
+  }
+  50% {
+    transform: translate(-50%, -600%) rotate(0deg);
+  }
+  62.5% {
+    transform: translate(-50%, -600%) rotate(-3deg);
+  }
+  75% {
+    transform: translate(-50%, -600%) rotate(0deg);
+  }
+  87.5% {
+    transform: translate(-50%, -600%) rotate(3deg);
+  }
+  100% {
+    transform: translate(-50%, -600%) rotate(0deg);
+  }
 }
 </style>
diff --git a/src/api.js b/src/api.js
@@ -79,6 +79,17 @@ const baseURL = "https://darker.online";
 const baseURL2 = "http://test.echisan.cn:8888";
 // const baseURL = "http://10.0.46.20:8080";
 
+//首页相关
+const getWelcome= ()=>{
+  return axios.get(`${baseURL2}/index/is`);
+}
+const getIndex=()=>{
+  return axios.get(`${baseURL2}/index`);
+}
+const getOnlineList=()=>{
+  return axios.get(`${baseURL2}/index/online`);
+}
+
 //  登录相关
 const login = data => {
   return axios.post(`${baseURL2}/auth/login`, data);
@@ -320,6 +331,9 @@ const resetPassword = data =>{
 export default {
   baseURL,
   baseURL2,
+  getIndex,
+  getOnlineList,
+  getWelcome,
   login,
   logout,
   checkToken,