reset Footer, update page

RalfZhang · Mar 4, 2017 · 5ad8338 · 5ad8338
1 parent 464328c
commit 5ad8338
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,19 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+        html {
+            height: 100%;
+        }
+        body {
+            min-height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        #app {
+            flex: 1;
+        }
+    </style>
 </head>
 
 <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,10 +1,8 @@
 <template>
-  <div>
     <div id="app">
       <router-view></router-view>
       <Copyright></Copyright>
     </div>
-  </div>
 </template>
 
 <script>
@@ -27,5 +25,9 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: #212121;
+    background:#f5f5f5;
+    position: relative;
+    min-height: 100%;
+    padding-bottom: 80px;
   }
   </style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -6,13 +6,17 @@ import Movie from 'view/Movie';
 import MovieTab from 'view/Movie/Tab';
 import MovieSubject from 'view/Movie/Subject';
 import MovieSearch from 'view/Movie/Search';
-// import Test from 'view/Test';
+import Test from 'view/Test';
 
 Vue.use(VueRouter);
 
 
 export default new VueRouter({
   routes: [
+    {
+      path: '/test',
+      component: Test,
+    },
     {
       path: '/',
       redirect: '/movie',

diff --git a/src/view/Copyright.vue b/src/view/Copyright.vue
@@ -7,7 +7,11 @@ Powered By RalfZ
 </template>
 <style lang="css" scoped>
     .footer{
-        margin: 30px;
+        text-shadow: 0 0 1px #e0e0e0;
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        padding: 20px;
         text-align: center;
         color: #bdbdbd;
     }

diff --git a/src/view/Movie/Card.vue b/src/view/Movie/Card.vue
@@ -55,7 +55,6 @@ export default {
     },
     fetchData() {
       fetchMovies(this.type).then((data) => {
-        console.log('data', data);
         this.subjects = data.subjects;
       });
     },
@@ -64,14 +63,14 @@ export default {
 </script>
 <style lang='css' scoped>
 .wrap{
-  padding: 10px;
+  padding: 6px;
 }
 .wrap>.paper-row{
   justify-content: flex-start;
   flex-flow: row wrap;
 }
 .paper-elem{
-  padding: 10px;
+  padding: 6px;
 }
 .paper-border{
   position: relative;
@@ -102,7 +101,7 @@ export default {
 }
 .paper-text>p{
   margin: 0;
-  padding: 0 4px;
+  padding: 0 6px;
   font-size: 14px;
   height: 20px;
   line-height: 20px;

diff --git a/src/view/Movie/Search.vue b/src/view/Movie/Search.vue
@@ -192,7 +192,7 @@ export default {
     };
   },
   mounted() {
-    console.log(`mmmmmm-------${Math.random()}`);
+    console.log(`search mounted-------${Math.random()}`);
   },
   watch: {
     $route: 'getQuery',
@@ -261,6 +261,8 @@ export default {
         position: relative;
         box-sizing: border-box;
         margin: 10px 15px;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
         height: 30%;
         overflow: hidden;
@@ -298,10 +300,14 @@ export default {
               }
             }
             .star{
+              display:-webkit-box;
+              display:-ms-flexbox;
               display:flex;
               padding-top: 2px;
               color: #ff6f00;
               .star-box{
+                display: -webkit-box;
+                display: -ms-flexbox;
                 display: flex;
                 margin-right: 4px;
                 .star-icon{

diff --git a/src/view/Movie/Subject.vue b/src/view/Movie/Subject.vue
@@ -196,12 +196,10 @@
     },
     watch: {
       $route(to) {
-        console.log(to);
         this.setPage(to.params.id);
       },
     },
     mounted() {
-      console.log(`mmmmmm-------${Math.random()}`);
       this.setPage(this.$route.params.id);
     },
     methods: {
@@ -228,7 +226,6 @@
       },
       setPage(id) {
         fetchMovieSubject(id).then((res) => {
-          console.log('res', res);
           this.movie = res;
         });
       },

diff --git a/src/view/Movie/Tab.vue b/src/view/Movie/Tab.vue
@@ -6,8 +6,8 @@
 				<mu-icon-button icon='search' @click="gotoSearch()" slot='right' />
 			</mu-appbar>
 			<mu-tabs :value="activeTab" @change="handleTabChange">
-				<mu-tab value="tab1" @active="handleActive" title="in_theaters" />
-				<mu-tab value="tab2" @active="handleActive" title="coming_soon" />
+				<mu-tab value="tab1" @active="handleActive" title="正在热映" />
+				<mu-tab value="tab2" @active="handleActive" title="即将上映" />
 			</mu-tabs>
 		</mu-paper>
 		<div v-if="activeTab === 'tab1'">
@@ -21,7 +21,6 @@
 
 <script>
 	import Card from './Card';
-	import router from './../../router';
 
 	export default {
 	  data() {
@@ -40,7 +39,7 @@
 	      console.log(`---------tab active-------------${val}`);
 	    },
 	    gotoSearch() {
-	      router.push({ name: 'MovieSearch' });
+	      this.$router.push({ name: 'MovieSearch' });
 	    },
 	  },
 	};

diff --git a/src/view/Test.vue b/src/view/Test.vue
@@ -1,24 +1,21 @@
 <template> 
-
-
-  <div class="star">
-    <mu-icon class='star-icon' :size='32' value="star" v-for="n in 2"/><mu-icon class='star-icon' :size='32' value="star_half" v-for="n in 1"/><mu-icon class='star-icon' :size='32' value="star_border" v-for="n in 2"/>
-  </div>
+<div class="loading">
+  <mu-infinite-scroll :loading="isLoading" loadingText=""/>
+</div>
 
 </template>
 <style lang="css" scoped>
-    
-
-.star{
-  width: 100%; 
-  height: 20px; 
-  z-index: 10; 
-  background: #CCC;
-  text-align: center;
-  vertical-align: middle;
-  height: 80px;
-  line-height: 80px;
-}
-
+    .loading{
+      padding: 100px 0;
+    }
 
 </style>
+<script>
+  export default{
+    data() {
+      return {
+        isLoading: true,
+      };
+    },
+  };
+</script>