首页相关，组件化

plat-info.json

@@ -9,6 +9,12 @@
    "mailbox": "xtkfqbgs@sohu.com",
    "logourl": "/static/xtkfq/icon-logo.png",
    "bannerurl": "/static/xtkfq/banner.jpg",
    "platimgurl": "/static/xtkfq/platimg.jpg"
    "platimgurl": "/static/xtkfq/platimg.jpg",
    "adinfo":[
      {
        "adUrl": "http://www.ecorr.org",
        "imgUrl": "/static/xtkfq/ad/fengying.jpg"
      }
    ]
  }
}

src/App.vue

@@ -1,5 +1,5 @@
<template>
  <div id="main" class="app-main">
  <div class="app-main">
      <router-view></router-view>
  </div>
</template>

src/common/stylus/common.styl

@@ -15,11 +15,37 @@ a
  clear:both
  font-size:15px
.block-wrapper
  margin-bottom:20px
.content-wrapper
  box-sizing: border-box
  padding:20px
  background:#fff
/*左右分栏*/
.main-content
  display: flex
  justify-content: space-between
  .wrapper-left
    width:800px
  .wrapper-right
    width: 280px
.ad-wrapper
  position: relative
  display: block
  margin-bottom: 10px
  &:after
    content:"广告"
    font-size:10px
    color:#fff
    background:rgba(0,0,0,0.3)
    position:absolute
    padding:0 4px
    right:0
    bottom:0px
/*左右分栏*/
.content-title
  display:flex
  justify-content: space-between
@@ -71,3 +97,20 @@ a
.el-button--primary
  background-color: $mainColor;
  border-color: $mainColor;
/*认证标识相关*/
.authicon
  display: inline-block
  margin-left:4px
  width:16px
  height:16px
  background-size: cover
  &.icon-pro
    bg-image($iconPro)
  &.icon-com
    bg-image($iconCmp)
  &.icon-staff
    bg-image($iconStaff)
  &.icon-real
    width:24px
    bg-image($iconReal)

src/common/stylus/mixin.styl

@@ -34,7 +34,8 @@ border-radius($radius = 6px)
  -moz-border-radius: $radius
  border-radius: $radius
border-1px($color)
$borderColor = #e4e7ed
border-1px()
  position:relative
  &:after
    display:block
@@ -42,7 +43,7 @@ border-1px($color)
    left:0
    bottom:0
    width:100%
    border-top:1px solid $color
    border-top:1px solid $borderColor
    content:' '
border-none()
  &:after
@@ -66,5 +67,12 @@ text-ellipsis($n = 1,$lineH = 30px)
  overflow: hidden
/*text-about e*/
/*head icon*/
$iconPro = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEE3NTVFQjAwNTk4MTFFN0JFNTk5M0E5N0ZCMjUxRUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEE3NTVFQjEwNTk4MTFFN0JFNTk5M0E5N0ZCMjUxRUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTYyMTg5MzA1NzIxMUU3QkU1OTkzQTk3RkIyNTFFRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowOTYyMTg5NDA1NzIxMUU3QkU1OTkzQTk3RkIyNTFFRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt51E2cAAAKlSURBVHjavJdfaI1hHMd/5xwpK5xIJucsImoMa0PSXLhhShnaWku5cDGXyMVhW24so1woroSQRnKBWGTlRo1hxTFM8mdR5Ia2KOecfX/O7+hx9ryP53nPu/dXn97tfZ/n/X7P8zzv7/c8kVzTarKMWnACHAa3QE7Tph4cBPtAn81Lo2QfnWANuAkeg63SPwK2gH4xtlbaWkXEcgTWg3ua+2mQBVWaZxvAnSBGgH9hl8ezJR7iHEekb8kGtsn8u0Y1aHSdgkmgEqwEq+RaJff9xG/wHDwCD+WalvtaA0NgIU1svAfzvKbgG018fDGtgQ8hGPhoMjAcgoHh8EYgPpMouYBMGsUGPgUmnpiP7HEB2eA80bS41RqYDtoCEZ+LRd5+Em+cQTT4hGjkh/q0A8wqNjAZXDNkNTfxjlN58TRKxrH9RJmM2oI/8xugjJRickbyfXDiL/DLj6Io/vqpa8nJ5yxrR6VytWhfWLcRzXpxrXcX79rrJV4ITtOdUZl7fcSQgadgpHa3E63bZDfnduJ/113s0NJED/5YARaPe/zutdS8GqKaOqKvn5FIh/Ti/Mm5iV8HO3kEeIU0e+5grp7OE0XT1rZ/R8K/eJ9oZgpVbhRsBg+0xYgNcGzflTeRw27s7aAi/tRF/I1ojeqqIbu65NmVDTBZbIJGvhNNjYv4Hltxjh3golr/1Zht7KqOhD/xcRrFBpL/7c4mOLNVIMefO+4q/idJl2aA4/blUtJVhakYJUIox0mTgTkhGCg3TcEisEzZkNbKJjXmU4xzzEtlQ8qHlwHXg0kT6PZpoMX4WVueC67IUcw1BmyM2xjgQ2jK49krQRcpObYFcji9C3qV/59J1qwUmuVeIe6DnqBPxwdkETWA5TK8WaFb7jXIdKVsXzomwADplrxmbpHXjAAAAABJRU5ErkJggg==";
$iconCmp = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEE3NTVFQjQwNTk4MTFFN0JFNTk5M0E5N0ZCMjUxRUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEE3NTVFQjUwNTk4MTFFN0JFNTk5M0E5N0ZCMjUxRUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0QTc1NUVCMjA1OTgxMUU3QkU1OTkzQTk3RkIyNTFFRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0QTc1NUVCMzA1OTgxMUU3QkU1OTkzQTk3RkIyNTFFRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pvkg9isAAAG0SURBVHjaYtTY8YsBCvSBeAUQazCQBj4AcTEQzyOk8Lo7K4YYExK7jwzLQUAAiKcDMT8ZelEcIMpAPmCjhgMGBIw6YNQBA+4AFlwSS8xYGIwFGbHKnX3/nyHm1J+BCwFG7O56CMT/0fA7II4nKwSo5ENBIJ4JxGuB+MtApQF2IBYazQUjIhdQNwSo5cOBSgNXgdgeFFhQ/IieDgC1joyB+BBFUUAmABU6WUj8FCAOBGIDkF2aO3/fANLbQc0/YPsQ3BhlRGqUXgJiXQpywX1omxJkIKj1uQOInXA49C4QewAdcYeauaATajkI7MdjOQgoA/FpYIhwUzMX7IHScUBsjUfdSiDWAWJtIG6nZiL8jRTvuMBiaO3ICeUn0SIX6EDpb0B8Dkn8JjDO46DRowRrztPCAWxQGtQeiAHiKVC+CTDOJwFpSyS1f2nhgJtQmhuI1wHxDCAWg0ZNLno5RAsHrEJia0Dj3QWI+7Go3Y6zHCADyEOLXHZomSBJhB4FJqjF/ym0HLlNKA7ENkD8HI9akDp/YKJ8SKvK6B4QawLxBCB+CsSfofgNEC8HyQEt3wRSCBBgACfAbsTi3K8cAAAAAElFTkSuQmCC";
$iconStaff = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAgCAYAAACW5L+YAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkNFNUZFQTUwNTk4MTFFN0JFNTk5M0E5N0ZCMjUxRUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkNFNUZFQTYwNTk4MTFFN0JFNTk5M0E5N0ZCMjUxRUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2Q0U1RkVBMzA1OTgxMUU3QkU1OTkzQTk3RkIyNTFFRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2Q0U1RkVBNDA1OTgxMUU3QkU1OTkzQTk3RkIyNTFFRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Php2vI8AAAQdSURBVHja7FhbSBRRGD4zu5sSi9lqVKRIF9PUHpQoNUIQL28RBfXQQy++FwQVGPQSUo89lw/S7akLPZktRkVXRKEwBS9hpUKamJcw153p/2Z21nV2bju7a7MxH/wLjmfOnPOd//KdnyvtXGaEYrJrZA1kOcxFMpgjC5JdIhvy0k8J2TuyXJeblAAOepysnqyap582l9y0AJy28ZG04CI9aOLdnJtW+HmXg/TCEsHPDntZrYGfn9nOs1d1PsM58L7ZmP8RXrMBIGaHn2PtNT52d1hgV0fCcWOqAhzLzzaep36LRxrzudnHWt6G2BsSM48PeVnxJs7SQod+iezY+5U1z3BgZt9VY9/TkLMIBhFltKi+Bh87vUd2eC2SzYB3uqfC7BYdFOz6xzDrmRbZ2IIYXxkKeNb1XVjzbGpJe95pen7khTXSBpr1I6i/yX503R8RdDnxWp2kMiiTfCCfPG7E3kJwWPDem9U+NrQosI5JHSKI4LP94XX1tJk/OlWKeM/2MLZEy1nQOcdvv0X7HqwmOVmA5PKu1IVpICs1uV0vCm6Ue6SIejkp2Dr0jFYRvdOCrufppRPHFDmtAqTneUV+Lnra6lOGwmjZ69H1FrzTSB5SZqP4yN8KO9oJdAl+9FWQ1AFQlsuxAr9+tc/Llv8X2BA/pnAjF5fP1BDFxBeudXBW8HMpXo38E4I7JleLELzMiGAQJxBJJZs5TfWgVFgln1lBbFVfFuLzvyINEwl75OtAFucMD04E8EpsNFFNaoTguGAq0bSKE3T7qUIP650RJSdR62aQnFEEI1SBi30h6TJyebfHlk7Wzq/2VEo7RUmRP55gx16VjYA8KEY2FqL9nNjpDGGidYHJGIJj+xJIC+ORzTyfEKR0oXi1CxsEo1DhJqY0gYArn1aiYY1id2G/eXVHPlTeTyWQojKWYFR2qACIe3gplAWKG9JD7L2c55gheWj4SI2f2dSH8cldfPSwoeVrc6xHYzLQm8eSC1Xlr54DOmpK00aMFDe1LKvbJutmbDBWc9ZslefBnf5cj9xRQ0TYusXN4OvCmmJ7vsLDfPSJnh8iu13pZSW5chcQtWF0TpRufmpFAsXRbkE6wrEGDMbpNZ0sEYyF4bLR+HpFCkGQy0XIjvVeBRiHxhA2+KHexw52yx9+MiZED0G5KXI0EafRzVL/vUjnpMyj6OBY6YWoQXpSt1Sx3qNFvLQWGMhGw0o5ePVB2YWelORKO5fFREMBBN8bFkzlGEh+8EV7HDxOIcnqBjAPvg+vVABSJxZFdmdUMJVl8OqKPE4qxGiHrkfHLmGCnQB4JdKUVvRY1e7rpZEzkuD/Wqa5cAl2HMFzLg1pwwIIDro8pA1dILiVbNblIuUAp60geJCsmuwh2bzLS9KYj3AJTgf/CjAAB+aTPwL/jsYAAAAASUVORK5CYII=";
$iconReal = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QUZCM0QyMjExMTFFN0I1REJFMjhGQkM5NjdGMjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QUZCM0UyMjExMTFFN0I1REJFMjhGQkM5NjdGMjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZBRkIzQjIyMTExMUU3QjVEQkUyOEZCQzk2N0YyMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZBRkIzQzIyMTExMUU3QjVEQkUyOEZCQzk2N0YyMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjXxjlIAAAOcSURBVHja3FhbSFNhHP+fs7OLlzm3IhTsIt2sJeWDJFYPqSkICgVGSUQ+ZBBk2ItBdFOSfKjAh6BejLJ1EfJZsiAIsaCn0IQugqMaDKebrXY75/T9vzmvOzuXSXj6wW8bO+d83//3v34b13BrEgi2Et4krCLMgdWNAOEg4UXCzxx52U44TJgL+gA6+AhhBWEZS146dWT8QqDNnexs2ugV1awOcj4VslnQOTQJKMozrJgBuFY667FaNmxvtEH3KduKCLjUkEPX0ypCtYAxDw/jnhjkOQxpR6KlJgvMRgY+jkfpulrAkEEmJrtwrzkX7GmUyNQvAc7cn5aNpByuuPwpxXHpGCEFFC+XhteP2yAYEqHp7tSy6yfKLVBflkn3l4sMq9QgDPfSTZ62Oui7GhxymqjxkVhy41EcGh/jRUXOY5UUbaaZgf1OMzy/4ICuxvjYcFgNwDLxd6W4fNgKp2uyqfEDH/7Ao3P2RXWUiIxIkrr9WUDRmgZnTdu1ZBfCIQFG3VF4Px6D/vchUmgR2FNognxSvLUlFvBM8bBhHQcTXh7efY0mffabdz78rvN2+qzHx0Mz8WwkKsLBYjNU7rZAfg4L/qBAjUdcfeJXXNSSRYzAVrnWxsKniRh09M/MpQBiR4GRRuXobZ/ijuOb4aF3KLToe4wCdiIEel6N8bJF/OVnDOxWExQXGmn6YPtscwXmBKhB90Aw6fc/JnkozOMgTCJyoy+gup1yspsSYm621lvpRli06MUt+VzaQ6znrB2yLAxNq5YHfk1rKLICvYIdAYUkPGQ2MSCI2gcYpl8COBQxwlrauaQAbJEp2xcjf9+xO75lXci5yUifxTbJkg9L71E7UyQFDI2GJR9ybjTSKY018X2SV+VxzPWHr4O0hsp3mtNOQ05t0WEa7SMbowczSBqVFZlgeCwieX9irZLNJnC9CcLLkYimJpBWDSycvnV7M+lnHDTr1xjgZEXcu+hNjJqUkGRT958JwNzdVsDRfo3nl64X8XaHRI/ibGiqigvBiPQMzns65RCaTa9UwFPA77CoTgB6+sAuC1gzGOAMzFzuvh1J7mE0FonGYCTwuFBXKt8aGbK0XB1gwasWgH2+tjQDeAHA7Y1BDyk6JQMGxVGSCe71CynvxaksdRpdiMTZS9NR4r/9TbzaBOg5AiIKcOtYgBsFPNaxgF4U0E74SofGo80d2EbxF0Y1YQNhJaz+P3qnZ43vIxT+CjAAwIp3rArpHr4AAAAASUVORK5CYII=";
/*head icon*/

src/components/global-component/backtop/BackTop.vue

@@ -0,0 +1,99 @@
<template>
  <div>9090909top</div>
  <!-- <transition name='slide-fade'>backup
    <div class='page-component-up' v-show='isShow' @click='getTop'>
      <i class='tri'></i>
    </div>
  </transition> -->
</template>
<script>
  export default {
    name: 'BackTop',
    props: {
      scrollmyself: {
        type: Boolean,
        // 这是选择滚动对象的props值，如果滚动的对象是当前组件的父元素，就设置scrollObj为true.如果没有设置就默认为window对象
        default: false
      }
    },
    data () {
      return {
        isShow: false,
        target: ''
      };
    },
    methods: {
      addhoverClass (e) {
        if (e.type === 'mouseover') {
          this.$el.classList.add('hover');
        } else if (e.type === 'mouseout') {
          this.$el.classList.remove('hover');
        }
      },
      showIcon () {
        if (this.target.scrollTop > 100) {
          this.isShow = true;
          this.$el.addEventListener('mouseover', this.addhoverClass);
          this.$el.addEventListener('mouseout', this.addhoverClass);
        } else if (this.target.scrollTop < 100) {
          this.isShow = false;
        }
      },
      getTop () {
        let timer = setInterval(() => {
          let top = this.target.scrollTop;
          let speed = Math.ceil(top / 5);
          this.target.scrollTop = top - speed;
          if (top === 0) {
            clearInterval(timer);
          }
        }, 20);
      }
    },
    mounted () {
      // 通过这个target来判断当前的滚动监听对象是谁
      if (this.scrollmyself) {
        this.target = this.$el.parentNode;
      } else {
        this.target = document.body;
      }
      this.target.addEventListener('scroll', this.showIcon);
    },
    beforeDestroy () {
      this.target.removeEventListener('scroll', this.showIcon);
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .slide-fade-enter-active
     transition: all .1s ease
  .slide-fade-leave-active
    transition: all .1s cubic-bezier(1.0, 0.3, 0.8, 1.0)
    opacity: 0
  .slide-fade-enter, .slide-fade-leave-to
    opacity: 0
  .page-component-up
    background-color: #4eb1fb
    position: fixed
    right: 3rem
    bottom: 12rem
    width: 50px
    height: 50px
    border-radius: 25px
    cursor: pointer
    opacity: .4
    transition: .3s
    text-align: center
    z-index: 999
  .tri
    width: 0
    height: 0
    border: 12px solid transparent
    border-bottom-color: #dfe6ec
    text-align: center
  .hover
    background-color: red
</style>

src/components/global-component/backtop/index.js

@@ -0,0 +1,13 @@
import BackTop from './BackTop';
/* istanbul ignore next */
BackTop.install = function(Vue) {
  Vue.component(BackTop.name, BackTop);
};
// const BackTop = {
//   install: function(Vue) {
//     Vue.component('BackTop', myBackTop);
//   }
// };
export default BackTop;

src/components/global-component/index.js

@@ -0,0 +1,27 @@
// import BackTop from './backtop/BackTop';
// import Loading from './loading/Loading';
// const components = [
//   BackTop,
//   Loading
// ];
// const install = (Vue, OPts) => {
//   if (install.installed) {
//     return;
//   };
//   components.map(component => {
//     Vue.component(component.name, component);
//   });
// };
// if (typeof window !== 'undefined' && window.Vue) {
//   console.log('传入参数install方法')
//   install(window.Vue);
// };
// export default {
//   BackTop,
//   Loading
// };

src/components/global-component/loading/Loading.vue

@@ -0,0 +1,5 @@
<template>
  <div class="loading">
    loading...
  </div>
</template>

src/components/global-component/loading/index.js

@@ -0,0 +1,13 @@
import MyLoading from './Loading';
// Loading.install = function(Vue) {
//   Vue.component(Loading.name, MyLoading);
// };
const Loading = {
  install: function(Vue) {
    Vue.component('Loading', MyLoading);
  }
};
// 导出组件
export default Loading;

src/components/main-views/ViewCooperationAgency.vue

@@ -1,6 +1,20 @@
<template>
  <div class="">合作机构</div>
	<div class="cooperation">
		<div class="content-wrapper">
			<div class="content-title">平台合作机构</div>
			<div class="block-container">
				<baseAgency v-for="item in 10" :key="item"></baseAgency>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
</style>
<script type="text/ecmascript-6">
	import baseAgency from '../sub-component/BaseAgency';
	export default {
    components: {
      baseAgency
    }
  };
</script>

src/components/main-views/ViewExpertPool.vue

@@ -1,6 +1,20 @@
<template>
  <div class="">专家库</div>
	<div class="expert">
		<div class="content-wrapper">
			<div class="content-title">平台签约专家顾问</div>
			<div class="block-container">
				<baseExpert v-for="item in 10" :key="item"></baseExpert>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
</style>
<script type="text/ecmascript-6">
	import baseExpert from '../sub-component/BaseExpert';
	export default {
    components: {
      baseExpert
    }
  };
</script>

src/components/main-views/ViewFindResource.vue

@@ -1,5 +1,88 @@
<template>
  <div class="">找资源</div>
  <div class="main-content">
    <div class="wrapper-left">
      <div class="block-wrapper search-wrapper">
        <el-input placeholder="请输入资源名称、用途、发布者或相关关键词" class="input-with-select">
          <el-button slot="append" icon="el-icon-search">搜索</el-button>
        </el-input>
      </div>
      <div class="block-wrapper">
        <div class="content-wrapper tab-wrapper">
          <div class="tab-lable">资源类型：</div>
          <ul class="tab-sort">
            <li>不限</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
            <li>检测服务</li>
          </ul>
        </div>
        <div class="tab-contain">
          <baseResource v-for="item in 10" :key="item"></baseResource>
        </div>
      </div>
    </div>
    <div class="wrapper-right">
      <div class="block-wrapper" v-if="plat.adinfo">
        <a class="ad-wrapper" :href="plat.adinfo[0].adUrl" target="_blank">
          <img :src="plat.adinfo[0].imgUrl" width="280" height="200">
        </a>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus"></style>
<script type="text/ecmascript-6">
  import baseResource from '../sub-component/BaseResource';
  export default {
    props: {
      plat: {
        type: Object
      }
    },
    components: {
      baseResource
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin';
  .tab-wrapper
    display:flex
    align-items:baseline
    padding:15px 20px
    color: $commonFont
    .tab-lable
      width:100px
    .tab-sort
      display:flex
      flex-wrap:wrap
      margin-right:-10px
      margin-bottom:-10px
      li
        display:inline-block
        margin-right:10px
        margin-bottom:10px
        padding:2px 10px
        border: 1px solid $borderColor
        border-radius(10px)
        cursor: pointer
        &.active
          color: $mainColor
  .tab-contain
    margin-top:20px
  .el-input-group__append
    background:$mainColor
    color:#fff
    padding:10px 40px
    border-color:$mainColor
</style>

src/components/main-views/ViewFindServe.vue

@@ -1,5 +1,88 @@
<template>
  <div class="">找服务</div>
  <div class="main-content">
		<div class="wrapper-left">
			<div class="block-wrapper search-wrapper">
				<el-input placeholder="请输入服务内容、发布者或相关关键词" class="input-with-select">
					<el-button slot="append" icon="el-icon-search">搜索</el-button>
				</el-input>
			</div>
			<div class="block-wrapper">
				<div class="content-wrapper tab-wrapper">
					<div class="tab-lable">服务类型：</div>
					<ul class="tab-sort">
						<li>不限</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
						<li>检测服务</li>
					</ul>
				</div>
				<div class="tab-contain">
					<baseService v-for="item in 10" :key="item"></baseService>
				</div>
			</div>
		</div>
		<div class="wrapper-right">
			<div class="block-wrapper" v-if="plat.adinfo">
				<a class="ad-wrapper" :href="plat.adinfo[0].adUrl" target="_blank">
					<img :src="plat.adinfo[0].imgUrl" width="280" height="200">
				</a>
			</div>
		</div>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus"></style>
<script type="text/ecmascript-6">
  import baseService from '../sub-component/BaseService';
	export default {
    props: {
      plat: {
        type: Object
      }
    },
    components: {
      baseService
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
	@import '../../common/stylus/mixin';
	.tab-wrapper
		display:flex
		align-items:baseline
		padding:15px 20px
		color: $commonFont
		.tab-lable
			width:100px
		.tab-sort
			display:flex
			flex-wrap:wrap
			margin-right:-10px
			margin-bottom:-10px
			li
				display:inline-block
				margin-right:10px
				margin-bottom:10px
				padding:2px 10px
				border: 1px solid $borderColor
				border-radius(10px)
				cursor: pointer
				&.active
					color: $mainColor
	.tab-contain
		margin-top:20px
	.el-input-group__append
		background:$mainColor
		color:#fff
		padding:10px 40px
		border-color:$mainColor
</style>

src/components/main-views/ViewHome.vue

@@ -1,5 +1,7 @@
<template>
  <div class="home-main">
    <!-- <backTop :scrollmyself="true"></backTop> -->
    <div class="block-wrapper">
      <div class="wrapper-left">
        <img :src="plat.platimgurl" width="800" height="280">
@@ -76,7 +78,7 @@
                <div class="item-pic">
                  <img src="">
                </div>
                <div class="item-text item-tit">北京科袖科技有限公司北京科袖科技有限公司</div>
                <div class="item-text item-left">北京科袖科技有限公司北京科袖科技有限公司</div>
              </div>
            </div>
          </div>
@@ -175,16 +177,16 @@
        </div>
      </div>
    </div>
    <!-- <Loading></Loading> -->
  </div>
</template>
<script>
<script type="text/ecmascript-6">
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  import baseAgency from './subtemplate/BaseAgency';
  import baseExpert from './subtemplate/BaseExpert';
  import baseAgency from '../sub-component/BaseAgency';
  import baseExpert from '../sub-component/BaseExpert';
  export default {
    props: {
@@ -234,7 +236,6 @@
    .block-wrapper
      display: flex
      justify-content: space-between
      margin-bottom: 20px
      color:$commonFont
      .wrapper-left
        padding: 0
@@ -337,10 +338,5 @@
            display:inline-block
            padding-left:20px
            color:$secondaryFont
        .block-container
          display:flex
          flex-wrap: wrap
          margin-right:-10px
          margin-bottom:-10px
</style>

src/components/main-views/ViewPlatTrend.vue

@@ -1,5 +1,73 @@
<template>
  <div class="">平台动态</div>
  <div class="main-content">
		<div class="wrapper-left">
			<div class="block-wrapper">
				<img :src="plat.platimgurl" width="800" height="280">
			</div>
			<div class="block-wrapper">
				<div class="content-wrapper tab-wrapper">
					<el-tabs v-model="activeName">
						<el-tab-pane label="平台新闻" name="first">
							<div class="tab-contain">
								<baseArticle v-for="item in 5" :key="item"></baseArticle>
							</div>
						</el-tab-pane>
						<el-tab-pane label="企业动态" name="second">
							<div class="tab-contain">
								<baseArticle v-for="item in 1" :key="item"></baseArticle>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
		<div class="wrapper-right">
			<div class="block-wrapper" v-if="plat.adinfo">
				<a class="ad-wrapper" :href="plat.adinfo[0].adUrl" target="_blank">
					<img :src="plat.adinfo[0].imgUrl" width="280" height="200">
				</a>
			</div>
		</div>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus"></style>
<script type="text/ecmascript-6">
import baseArticle from '../sub-component/BaseArticle';
	export default {
    props: {
      plat: {
        type: Object
      }
    },
    data() {
      return {
        activeName: 'first'
      };
    },
    components: {
      baseArticle
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
	@import '../../common/stylus/mixin';
	.tab-wrapper
		padding:10px 20px
		color: $commonFont
		li
			display:inline-block
			margin-right:20px
			cursor: pointer
			&.active
				color: $mainColor
		.el-tabs__nav-wrap::after
			content:none
		.el-tabs__content
			margin:0 -20px
			.tab-contain
				border-top:20px solid #f4f6f8
</style>

src/components/main-views/subtemplate/style.styl

@@ -1,65 +0,0 @@
@import '../../../common/stylus/mixin';
.item-block
  width:180px
  overflow:hidden
  .item-pic
    width:180px
    height:120px
    box-sizing:border-box
    border:1px solid #e4e7ed
    background-size:cover
    overflow:hidden
  .item-text
    margin-top:6px
    line-height:30px
    &.item-tit
      text-align:center
      text-ellipsis()
    .title
      text-ellipsis()
    .desc
      margin-top:3px
      text-ellipsis(2,20px)
    .owner
      margin-top:10px
      text-ellipsis()
.block-item
  display:flex
  justify-content: space-between
  width:346px
  height:140px
  box-sizing:border-box
  padding:10px
  margin-right:10px
  margin-bottom:10px
  border:1px solid #e4e7ed
  .show-head
    width:80px
    height:80px
    border:1px solid #e4e7ed
    border-radius(50%)
  .show-info
    width:230px
    .info-tit
      font-size:18px
      line-height:28px
      color:$mainFont
    .info-tag
      color:$secondaryFont
      text-ellipsis(1,26px)
    .info-desc
      color:$secondaryFont
      text-ellipsis(3,20px)
  &.org-item
    height:200px
    text-align:center
    .item-block
      width:306px
      margin:auto
      .item-pic
        margin:auto
      .item-tag
        color:$secondaryFont
        text-ellipsis(1,20px)

src/components/main-views/subtemplate/BaseAgency.vue

@@ -5,14 +5,14 @@
        <img src="">
      </div>
      <div class="item-text">
        <p class="item-tit">北京科袖科技有限公司北京科袖科技有限公司</p>
        <div class="item-tit"><span>北京科袖科技有限公司北京科有限公司北京科袖科技有限公司</span><em class="authicon icon-com"></em></div>
        <p class="item-tag">所属行业 | 所属行业 | 所属行业</p>
      </div>
    </div>
  </div>
</template>
<script>
<script type="text/ecmascript-6">
  export default {
  };

src/components/sub-component/BaseArticle.vue

@@ -0,0 +1,25 @@
<template>
  <div class="list-item">
    <div class="list-head"></div>
    <div class="list-info">
      <div class="list-tit">2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜！</div>
      <ul class="list-tag">
        <li>发布者</li>
        <li>5月8日 18:00</li>
        <li>阅读量 1000</li>
        <li>赞 99</li>
        <li>留言 109</li>
      </ul>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import './style';
</style>

src/components/main-views/subtemplate/BaseExpert.vue

@@ -3,7 +3,7 @@
    <div class="block-item">
      <div class="show-head"></div>
      <div class="show-info">
        <div class="info-tit">专家姓名</div>
        <div class="info-tit">专家姓名<em class="authicon icon-pro"></em></div>
        <div class="info-tag">职称/职位，所在机构</div>
        <div class="info-desc">
@@ -14,7 +14,7 @@
  </div>
</template>
<script>
<script type="text/ecmascript-6">
  export default {
  };

src/components/sub-component/BaseResource.vue

@@ -0,0 +1,20 @@
<template>
  <div class="list-item">
    <div class="list-head"></div>
    <div class="list-info">
      <div class="list-tit list-topic">2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜！</div>
      <div class="list-owner">发布者<em class="authicon icon-pro"></em></div>
      <div class="list-desc">内容：2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import './style';
</style>

src/components/sub-component/BaseService.vue

@@ -0,0 +1,20 @@
<template>
  <div class="list-item">
    <div class="list-head"></div>
    <div class="list-info">
      <div class="list-tit list-topic">2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜！</div>
      <div class="list-owner">发布者<em class="authicon icon-pro"></em></div>
      <div class="list-desc">内容：2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜2017年“浙江杰出青年”揭晓，祝贺中科院宁波材料所王立平研究员上榜中科院宁波材料所王立平研究员上榜</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import './style';
</style>

src/components/sub-component/style.styl

@@ -0,0 +1,112 @@
@import '../../common/stylus/mixin';
.item-block
  width:180px
  overflow:hidden
  .item-pic
    width:180px
    height:120px
    box-sizing:border-box
    border:1px solid $borderColor
    background-size:cover
    overflow:hidden
  .item-text
    margin-top:6px
    line-height:30px
    &.item-left
      text-ellipsis()
    .item-tit
      text-align:center
      display:flex
      align-items:center
      span
        display: inline-block
        max-width: 86%
        text-ellipsis()
    .title
      text-ellipsis()
    .desc
      margin-top:3px
      text-ellipsis(2,20px)
    .owner
      margin-top:10px
      text-ellipsis()
.block-container
  display: flex
  flex-wrap: wrap
  margin-right:-10px
  margin-bottom:-10px
  .block-item
    display:flex
    justify-content: space-between
    width:346px
    height:140px
    box-sizing:border-box
    padding:10px
    margin-right:10px
    margin-bottom:10px
    border:1px solid $borderColor
    .show-head
      width:80px
      height:80px
      border:1px solid $borderColor
      border-radius(50%)
    .show-info
      width:230px
      .info-tit
        font-size:18px
        line-height:28px
        color:$mainFont
      .info-tag
        color:$secondaryFont
        text-ellipsis(1,26px)
      .info-desc
        color:$secondaryFont
        text-ellipsis(3,20px)
    &.org-item
      height:200px
      text-align:center
      .item-block
        width:306px
        margin:auto
        .item-pic
          margin:auto
        .item-tag
          color:$secondaryFont
          text-ellipsis(1,20px)
.list-item
  display:flex
  align-items:center
  background:#fff
  padding:20px
  border-1px()
  &:last-child
    border-none()
  .list-head
    width:180px
    height:120px
    background:red
  .list-info
    flex: 1 1 180px
    padding-left:15px
    .list-tit
      color:$mainFont
      font-size:18px
      text-ellipsis(2,26px)
      &.list-topic
        text-ellipsis(1,26px)
    .list-tag
      margin-top:10px
      color:$secondaryFont
      font-size:14px
      li
        display:inline-block
        margin-right:15px
    .list-owner
      color:$commonFont
      line-height:30px
    .list-desc
      text-ellipsis(2,20px)
      color:$commonFont

src/main.js

@@ -5,21 +5,26 @@ import App from './App.vue';
import {router} from './router/index';
import axios from 'axios';
import Loading from './components/global-component/loading';
import BackTop from './components/global-component/backtop';
Vue.prototype.$axios = axios;
Vue.use(ElementUI);
Vue.use(Loading);
Vue.use(BackTop);
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
    data: {
  el: '#app',
  router: router,
  render: h => h(App),
  data: {
    },
    mounted () {
  },
  mounted () {
    },
    created () {
  },
  created () {
    }
  }
});