change infomartion

idoubi · Feb 7, 2020 · 58bdca1 · 58bdca1
1 parent 1583d34
commit 58bdca1
Showing 1 changed file with 112 additions and 82 deletions.
diff --git a/web/src/views/ItemList.vue b/web/src/views/ItemList.vue
@@ -10,113 +10,143 @@
     <transition :name="transition">
       <div class="news-list" :key="page" v-if="page > 0">
         <transition-group tag="ul" name="item">
-          <Item v-for="item in newsItems" :key="item.title+item.id" :item="item">
-          </Item>
+          <Item v-for="item in newsItems" :key="item.title+item.id" :item="item"></Item>
         </transition-group>
-        <div id="copyright">Copyright © 2018 <a href="http://idoubi.cc" target="_blank">idoubi.cc</a></div>
+        <div id="copyright">
+          Powered by ©
+          <a href="https://idoubi.cc" target="_blank">艾逗笔</a>
+        </div>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-import Item from '../components/Item.vue'
+import Item from "../components/Item.vue";
 export default {
-  name: 'item-list',
+  name: "item-list",
   components: {
     Item
   },
-  props: {
-    
-  },
-  data () {
+  props: {},
+  data() {
     return {
-      transition: 'slide-right',
-      type: 'news'
-    }
+      transition: "slide-right",
+      type: "news"
+    };
   },
   computed: {
-    maxPage () {
-      return Math.ceil(this.newsTotal / this.newsPer)
+    maxPage() {
+      return Math.ceil(this.newsTotal / this.newsPer);
     },
-    hasMore () {
-      return this.page < this.maxPage
+    hasMore() {
+      return this.page < this.maxPage;
     },
-    page () {
-      return this.$store.state.page
+    page() {
+      return this.$store.state.page;
     },
-    newsTotal () {
-      return this.$store.state.newsTotal
+    newsTotal() {
+      return this.$store.state.newsTotal;
     },
-    newsPer () {
-      return this.$store.state.newsPer
+    newsPer() {
+      return this.$store.state.newsPer;
     },
-    newsItems () {
-      return this.$store.state.newsItems
+    newsItems() {
+      return this.$store.state.newsItems;
     }
   },
   methods: {
-    changePage (page) {
-      this.$store.commit('SET_PAGE', page)
-      this.$store.commit('SET_NEWS')
+    changePage(page) {
+      this.$store.commit("SET_PAGE", page);
+      this.$store.commit("SET_NEWS");
     }
   }
-}
+};
 </script>
 
 <style lang="stylus">
-#copyright
-  position: absolute
-  width: 100%
-  text-align: center
-  height: 60px
-  line-height: 60px
-  a
-    color #499ef3
-.news-view
-  padding-top 45px
-.news-list-nav, .news-list
-  background-color #fff
-  border-radius 2px
-.news-list-nav
-  padding 15px 30px
-  position fixed
-  text-align center
-  top 55px
-  left 0
-  right 0
-  z-index 998
-  box-shadow 0 1px 2px rgba(0,0,0,.1)
-  a
-    margin 0 1em
-    cursor: pointer
-  .disabled
-    color #ccc
-.news-list
-  position absolute
-  margin 30px 0
-  width 100%
-  transition all .5s cubic-bezier(.55,0,.1,1)
-  ul
-    list-style-type none
-    padding 0
-    margin 0
-.slide-left-enter, .slide-right-leave-to
-  opacity 0
-  transform translate(30px, 0)
-.slide-left-leave-to, .slide-right-enter
-  opacity 0
-  transform translate(-30px, 0)
-.item-move, .item-enter-active, .item-leave-active
-  transition all .5s cubic-bezier(.55,0,.1,1)
-.item-enter
-  opacity 0
-  transform translate(30px, 0)
-.item-leave-active
-  position absolute
-  opacity 0
-  transform translate(30px, 0)
-@media (max-width 600px)
-  .news-list
-    margin 10px 0
+#copyright {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  height: 60px;
+  line-height: 60px;
+
+  a {
+    color: #499ef3;
+  }
+}
+
+.news-view {
+  padding-top: 45px;
+}
+
+.news-list-nav, .news-list {
+  background-color: #fff;
+  border-radius: 2px;
+}
+
+.news-list-nav {
+  padding: 15px 30px;
+  position: fixed;
+  text-align: center;
+  top: 55px;
+  left: 0;
+  right: 0;
+  z-index: 998;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  a {
+    margin: 0 1em;
+    cursor: pointer;
+  }
+
+  .disabled {
+    color: #ccc;
+  }
+}
+
+.news-list {
+  position: absolute;
+  margin: 30px 0;
+  width: 100%;
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.slide-left-enter, .slide-right-leave-to {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+.slide-left-leave-to, .slide-right-enter {
+  opacity: 0;
+  transform: translate(-30px, 0);
+}
+
+.item-move, .item-enter-active, .item-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.item-enter {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+.item-leave-active {
+  position: absolute;
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+@media (max-width: 600px) {
+  .news-list {
+    margin: 10px 0;
+  }
+}
 </style>