添加广告位

Author: fxss5201

package-lock.json

@@ -23,7 +23,9 @@
     "markdown-it-toc-and-anchor": "^4.2.0",
     "mavon-editor": "^2.7.7",
     "moment": "^2.24.0",
+    "swiper": "^5.3.6",
     "vue": "^2.6.10",
+    "vue-awesome-swiper": "^4.1.0",
     "vue-meta": "^2.3.1",
     "vue-progressbar": "^0.7.5",
     "vue-router": "^3.0.6",

package.json

@@ -0,0 +1,16 @@
+const adList = [
+  {
+    name: '【采购季】上云仅¥223/3年',
+    url: 'https://www.aliyun.com/sale-season/2020/procurement-new-members?userCode=yk6lvt62',
+    pc_img: 'https://img.fxss.work/article-15865358080002-production.jpg',
+    m_img: 'https://img.fxss.work/article-158653580000092-production.jpg'
+  },
+  {
+    name: '【云小站】新老客都返佣',
+    url: 'https://www.aliyun.com/minisite/goods?userCode=yk6lvt62',
+    pc_img: 'https://img.fxss.work/article-15865358080002-production.jpg',
+    m_img: 'https://img.fxss.work/article-158653580000092-production.jpg'
+  }
+]
+
+export default adList

src/assets/header.jpg

@@ -0,0 +1,74 @@
+<template>
+  <div class="ad-box">
+    <swiper ref="mySwiper" :options="swiperOptions">
+      <swiper-slide v-for="(item, index) in adList" :key="index">
+        <a :href="item.url" class="item-box">
+          <img class="img" :src="item.pc_img" :alt="item.name">
+          <div class="title">{{ item.name }}</div>
+        </a>
+      </swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+    </swiper>
+  </div>
+</template>
+
+<script>
+import adList from '@/assets/js/asideAd.js'
+import '@/plugins/swiper.js'
+
+export default {
+  name: 'AsideAd',
+  data () {
+    return {
+      adList,
+      swiperOptions: {
+        loop: true,
+        autoplay: {
+          delay: 3000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        }
+      }
+    }
+  },
+  computed: {
+    swiper () {
+      return this.$refs.mySwiper.$swiper
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ad-box {
+  margin-top: 15px;
+  .item-box {
+    position: relative;
+    font-size: 0;
+    .img {
+      width: 100%;
+    }
+    .title {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 5;
+      color: #fff;
+      font-size: 14px;
+      padding: 8px 12px;
+      background: rgba(0, 0, 0, 0.5);
+    }
+  }
+  .swiper-pagination {
+    box-sizing: border-box;
+    padding-right: 5px;
+    bottom: 12px;
+    text-align: right;
+  }
+}
+</style>

src/assets/logo.jpg renamed to src/assets/img/logo.jpg

@@ -1,7 +1,7 @@
 <template>
   <div class="header clearfix">
     <router-link to="/" class="logo-box fl">
-      <img class="logo" src="./../assets/logo.jpg" alt="logo">
+      <img class="logo" :src="logo" alt="logo">
       <div class="logo-text">{{ logoText }}</div>
     </router-link>
     <div class="fr clearfix">
@@ -71,6 +71,7 @@ export default {
   name: 'PageHeader',
   data () {
     return {
+      logo: require('@/assets/img/logo.jpg'),
       menuObj: [
         {
           index: '1',

src/assets/js/asideAd.js

@@ -10,6 +10,7 @@ import SkeletonCircle from './components/skeleton/circle/index.js'
 import './plugins/element.js'
 import moment from 'moment'
 import './style/common.scss'
+import AsideAd from '@/components/AsideAd.vue'
 
 // console.log(process.env.VUE_APP_host)
 // console.log(process.env.VUE_APP_pathname)
@@ -26,6 +27,7 @@ const options = {
 Vue.use(VueProgressBar, options)
 Vue.use(SkeletonRect)
 Vue.use(SkeletonCircle)
+Vue.component('aside-ad', AsideAd)
 
 Vue.config.productionTip = false
 Vue.prototype.$moment = moment

src/assets/logo.png

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+
+Vue.use(VueAwesomeSwiper)

src/components/AsideAd.vue

@@ -18,6 +18,7 @@
             :info="author.asideArticle.info"></aside-card>
         </el-collapse-item>
       </el-collapse>
+      <aside-ad></aside-ad>
     </el-aside>
     <el-main class="content">
       <div class="author-info" v-if="currentAuthor.authorIntroduce">

src/components/PageHeader.vue

@@ -11,6 +11,7 @@
           :title="item.title"
           :info="item.info"></aside-card>
       </template>
+      <aside-ad></aside-ad>
     </el-aside>
     <el-main class="content">
       <detail-skeleton v-if="!info.articleTitle"></detail-skeleton>

src/main.js

@@ -14,6 +14,7 @@
           :title="item.title"
           :info="item.info"></aside-card>
       </template>
+      <aside-ad></aside-ad>
     </el-aside>
     <el-main class="content">
       <div class="content-header clearfix">

src/plugins/swiper.js

@@ -14,6 +14,7 @@
           :title="item.title"
           :info="item.info"></aside-card>
       </template>
+      <aside-ad></aside-ad>
     </el-aside>
     <el-main class="content">
       <template v-if="columnInfo && columnInfo.columnTitle">