vue-cli init

src/components/Footer.vue

@@ -0,0 +1,26 @@
+<template>
+  <footer class="main-footer sticky footer-type-1">
+    <div class="footer-inner">
+      <!-- 版权信息 -->
+      <div class="footer-text">
+        &copy; 2017-2019
+        <a href="#"><strong>WebStack</strong></a> 
+        design by <a href="http://viggoz.com" target="_blank"><strong>Viggo</strong></a>
+      </div>
+      
+      <div class="go-up">
+        <a href="#" rel="go-top"><i class="fa-angle-up"></i></a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer'
+}
+</script>
+
+<style>
+
+</style>

src/components/WebItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h4 class="text-gray">
+      <i class="linecons-tag" :id="transName(item)"></i>{{transName(item)}}
+    </h4>
+    <div class="row">
+      <div class="col-sm-3" v-for="(web, idx) in item.web" :key="idx">
+        <div class="xe-widget xe-conversations box2 label-info" title=""
+          @click="openweb(web.url)"
+          data-toggle="tooltip" 
+          data-placement="bottom" 
+          :data-original-title="web.url">
+
+          <div class="xe-comment-entry">
+            <a class="xe-user-img">
+              <img :src="web.logo" class="lozad img-circle" width="40">
+            </a>
+            <div class="xe-comment">
+              <a href="#" class="xe-user-name overflowClip_1">
+                <strong>{{web.title}}</strong>
+              </a>
+              <p class="overflowClip_2">{{web.desc}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebItem',
+  props: {
+    item: Object,
+    transName: Function
+  },
+  methods: {
+    openweb(url) {
+      window.open(url, '_blank');
+    }
+  }
+}
+</script>
+
+<style scoped>
+i {
+  margin-right: 7px;
+}
+</style>