智慧大屏动态效果修改

2 years ago · 93ddb63dab
17 changed files with 337 additions and 55 deletions
--- a/package.json
+++ b/package.json
@ -18,7 +18,9 @@
    "element-ui": "^2.15.9",
    "vue": "^2.6.11",
    "vue-awesome": "^4.0.2",
+    "vue-count-to": "^1.0.13",
    "vue-router": "^3.1.5",
+    "vue-seamless-scroll": "^1.1.23",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
@ -31,6 +33,7 @@
    "eslint-plugin-vue": "^6.1.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
+    "vue-awesome-swiper": "^3.1.3",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
--- a/src/assets/images/header-bg.png
+++ b/src/assets/images/header-bg.png
--- a/src/assets/images/header-left.png
+++ b/src/assets/images/header-left.png
--- a/src/assets/images/header-right.png
+++ b/src/assets/images/header-right.png
--- a/src/assets/images/notice.gif
+++ b/src/assets/images/notice.gif
--- a/src/assets/images/title-big.png
+++ b/src/assets/images/title-big.png
--- a/src/assets/images/top-line.png
+++ b/src/assets/images/top-line.png
--- a/src/assets/styles/ball-running-animate.css
+++ b/src/assets/styles/ball-running-animate.css
@ -0,0 +1,116 @@
+.ball-running-dots {
+	position: absolute;
+	top: 0.2rem;
+}
+.left-dots {
+	left: 136px;
+}
+.right-dots {
+	right: 200px;
+}
+.ball-running-dots > div {
+	position: relative;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.ball-running-dots {
+	display: block;
+	font-size: 0;
+	color: #316fd9;
+}
+.ball-running-dots > div {
+	display: inline-block;
+	float: none;
+	background-color: currentColor;
+	border: 0 solid currentColor;
+}
+.ball-running-dots {
+	width: 12px;
+	height: 12px;
+}
+.ball-running-dots > div {
+	position: absolute;
+	margin-left: 30px;
+	border-radius: 100%;
+}
+.left-dots > div {
+	animation: ball-running-dots-animate 2s linear infinite;
+}
+.right-dots > div {
+	animation: ball-running-dots-animate2 2s linear infinite;
+}
+.ball-running-dots > div:nth-child(1) {
+	animation-delay: 0s;
+}
+.ball-running-dots > div:nth-child(2) {
+	animation-delay: -0.8s;
+}
+.ball-running-dots > div:nth-child(3) {
+	animation-delay: -1.2s;
+}
+.ball-running-dots > div:nth-child(4) {
+	animation-delay: -1.6s;
+}
+@keyframes ball-running-dots-animate {
+	0%{
+		width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(-500%) scale(50%,50%);
+    opacity: 0.5;
+	}
+	80% {
+		transform: translateY(0) translateX(0);
+	}
+	85% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-125%) translateX(0);
+	}
+	90% {
+		width: 200%;
+		height: 75%;
+	}
+	95% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-100%) translateX(-500%);
+	}
+  100% {
+    width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(-500%) scale(50%,50%);
+    opacity: 1;
+	}
+}
+@keyframes ball-running-dots-animate2 {
+	0%{
+		width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(500%) scale(50%,50%);
+    opacity: 0.5;
+	}
+	80% {
+		transform: translateY(0) translateX(0);
+	}
+	85% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-125%) translateX(0);
+	}
+	90% {
+		width: 200%;
+		height: 75%;
+	}
+	95% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-100%) translateX(500%);
+	}
+	100% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(500%);
+    opacity: 1;
+	}
+}
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -12,12 +12,32 @@
 // 头部主题标题
 .header-container{
  position: relative;
+  width: 100%;
+  height: 1.125rem;
  font-size: 0.3rem;
  color: #fff;
+  &::before,
+  &::after{
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 6.2rem;
+    height: 1.05rem;
+  }
+  &::before{
+    left: 0;
+    background: url('~@/assets/images/header-left.png') no-repeat top center;
+  }
+  &::after{
+    right: 0;
+    background: url('~@/assets/images/header-right.png') no-repeat top center;
+  }
  .header-title{
-    width: 100%;
-    height: 1.125rem;
-    background: url('~@/assets/images/top.png') no-repeat center -5px;
+    position: relative;
+    width: 15.85rem;
+    height: 1.075rem;
+    margin: 0 auto;
+    background: url('~@/assets/images/header-bg.png') no-repeat top center;
    background-size: cover;
    h2{
      font-size: 0.6rem;
@ -37,20 +57,62 @@
  }
  .header-weather {
    left: 1rem;
-    // top: 0.32rem;
  }
  .header-date {
    right: 0.375rem;
  }
 }

+// 头部动态效果
+.line1,
+.line2{
+  position: absolute;
+  top: 0;
+}
+
+.line1{
+  right: 632px;
+  transform: rotateY(-180deg);
+}
+
+.line2{
+  left: 632px;
+}
+
+.top-line1,
+.top-line2{
+  display: block;
+  width: 7.925rem;
+  height: 1.075rem;
+  animation: topline 4s linear infinite both;
+}
+
+.top-line1{
+  background: url('~@/assets/images/top-line.png') no-repeat;
+}
+
+.top-line2{
+  background: url('~@/assets/images/top-line.png') no-repeat;
+}
+
+@keyframes topline {
+  from {
+      width: 0;
+  }
+  50%,
+  to {
+      width: 643px;
+  }
+}
+
 // 主题内部部分
 .screen-main{
  display: flex;
  justify-content: space-between;
-  height: calc(100% - 155px);
+  height: calc(100% - 91px);
  margin: 0.0625rem 0 0.5rem 0;
  padding: 0 0.325rem;
+  overflow: hidden;
  .screen-left,
  .screen-right{
    width: 6.375rem;
@ -88,12 +150,13 @@
  }
  .big-module{
    height: 6.675rem;
+    margin:0.1625rem 0;
  }
  
  //排行榜-推荐 - list
  .lending-ranking{
    .module-content{
-      padding: 0.1625rem 0.25rem;
+      padding: 0 0.25rem;
      overflow: hidden;
    }
  }
@ -102,7 +165,6 @@
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0.25rem;
-    // background-color: #09194B;
    .book-img{
      display: block;
      width: 0.825rem;
@ -141,7 +203,8 @@
    margin: 0.375rem 0 .25rem 0;
    .accessToLib-item{
      width: 2.75rem;
-      p{
+      .panel-num{
+        display: block;
        height: 0.85rem;
        margin-top: 0.125rem;
        line-height: 0.85rem;
@ -158,11 +221,16 @@
  // 视频
  .video-box{
    width: 100%;
-    height: 5.075rem;
+    height: 5.225rem;
  }

  // 阅读之星
  .read-star{
+    flex: 1;
+    .common-title{
+      background: url('~@/assets/images/title-big.png') no-repeat center center;
+      background-size: cover;
+    }
    .module-content{
      padding: .25rem;
      overflow: hidden;
@ -231,17 +299,18 @@
      display: flex;
      justify-content: space-between;
      padding: 0.25rem 0.375rem 0.5rem 0.375rem;
-      .icon-tongzhi{
+      .notice-icon-gif{
+        display: block;
+        width: 3.375rem;
+        height: 2.875rem;
+        background: url('~@/assets/images/notice.gif') no-repeat left top;
+        background-size: contain;
        margin-right: 0.15rem;
-        font-size: 0.325rem;
-        color: #1AC9FF;
      }
-      p{
+      .seamless-warp{
        height: 3.1rem;
        overflow: hidden;
-        // overflow-y: auto;
      }
    }
  }
-
 }
--- a/src/main.js
+++ b/src/main.js
@ -18,6 +18,9 @@ Vue.prototype.$axios = axios
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts

+import scroll from 'vue-seamless-scroll'
+Vue.use(scroll)
+
 Vue.config.productionTip = false

 new Vue({
--- a/src/views/accessToLibrary.vue
+++ b/src/views/accessToLibrary.vue
@ -2,22 +2,26 @@
  <div class="accessToLib-container">
    <div class="accessToLib-item">
      <span>总进馆人数</span>
-      <p>2,125,462</p>
+      <count-to :start-val="0" :end-val="2125462" :duration="3200" class="panel-num" />
    </div>
    <div class="accessToLib-item">
      <span>月进馆人数</span>
-      <p>10,062</p>
+      <count-to :start-val="0" :end-val="10062" :duration="3200" class="panel-num" />
    </div>
    <div class="accessToLib-item">
      <span>今日进馆人数</span>
-      <p>2,462</p>
+      <count-to :start-val="0" :end-val="2462" :duration="3200" class="panel-num" />
    </div>
  </div>
 </template>

 <script>
+import CountTo from 'vue-count-to'
 export default {
  name: 'AccessToLibrary',
+  components: {
+    CountTo
+  },
  data() {
    return {
      timer: null
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@ -1,13 +1,32 @@
 <template>
  <div class="header-container">
-    <div class="header-title"><h2>东西湖区图书馆</h2></div>
+    <div class="header-title">
+      <div class="line1">
+        <span class="top-line1" />
+      </div>
+      <div class="ball-running-dots left-dots">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <h2>东西湖区图书馆</h2>
+      <div class="ball-running-dots right-dots">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div class="line2">
+        <span class="top-line2" />
+      </div>
+    </div>
    <div class="header-text header-weather">
      <!-- 天气api: https://www.tianqi.com/plugin -->
      <iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" />
    </div>
    <div class="header-text header-date">{{ nowDate }}</div>
  </div>
-
 </template>

 <script>
@ -33,4 +52,5 @@ export default {

 <style lang="scss">
@import "~@/assets/styles/index.scss";
+@import "~@/assets/styles/ball-running-animate.css";
 </style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -9,8 +9,8 @@
      <div class="screen-middle">
        <AccessToLibrary />
        <div class="video-box">
-          <video width="100%" height="100%" controls loop autoplay muted>
-            <source src="https://qiniu.aiyxlib.com/1658104739000.mp4" type="video/mp4">
+          <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
+            <source :src="src" type="video/mp4">
          </video>
        </div>
        <ReadStar />
@ -44,6 +44,8 @@ export default {
  },
  data() {
    return {
+      poster: 'https://image.chinamcloud.com/hbrb/upload/Image/default/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/0_640_400_1994.jpg',
+      src: 'https://hbrbvod.chinamcache.com/hbrb/vod/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/d0b5a55806fd45d2b4232e2fc3c7f257_h264_1000k_mp4.mp4'
    }
  },
  created() {
--- a/src/views/lengingRanking.vue
+++ b/src/views/lengingRanking.vue
@ -2,7 +2,7 @@
  <!-- 借阅排行榜 -->
  <div class="screen-item lending-ranking">
    <div class="common-title">借阅排行榜</div>
-    <div ref="lendList" class="big-module module-content">
+    <vue-seamless-scroll :data="rankingList" :class-option="defaultOption" class="big-module module-content">
      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
        <img class="book-img" :src="item.img">
        <div class="book-info">
@ -22,27 +22,35 @@
          <p>NO.{{ item.ranking }}</p>
        </div>
      </div>
-    </div>
+    </vue-seamless-scroll>
  </div>
 </template>

 <script>
 import data from './data'
-import scrollMixins from '@/common/scrollMixins'
+// import scrollMixins from '@/common/scrollMixins'

 export default {
  name: 'LengingRanking',
-  mixins: [scrollMixins],
+  // mixins: [scrollMixins],
  data() {
    return {
      rankingList: []
    }
  },
+  computed: {
+    defaultOption() {
+      return {
+        hoverStop: false, // 是否开启鼠标悬停stop
+        singleHeight: 102 // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+      }
+    }
+  },
  created() {
    this.rankingList = data.ranking
  },
  mounted() {
-    this.dataCompleteFun()
+    // this.dataCompleteFun()
  },
  destroyed() {
    // 清理定时器
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend.vue
@ -3,25 +3,29 @@
  <div class="screen-item lending-ranking">
    <div class="common-title">新书推荐</div>
    <div ref="newbook" class="big-module module-content">
-      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
-        <img class="book-img" :src="item.img">
-        <div class="book-info">
-          <h4 class="title-item">{{ item.title }}</h4>
-          <p>{{ item.author }}</p>
-        </div>
-        <div class="ranking-num">
-          <svg v-if="item.ranking === 1" class="icon" aria-hidden="true">
-            <use xlink:href="#icon-a-no1" />
-          </svg>
-          <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
-            <use xlink:href="#icon-a-no21" />
-          </svg>
-          <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
-            <use xlink:href="#icon-a-no3" />
-          </svg>
-          <p>NO.{{ item.ranking }}</p>
-        </div>
-      </div>
+      <swiper ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
+        <swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
+          <div class="book-list-item">
+            <img class="book-img" :src="item.img">
+            <div class="book-info">
+              <h4 class="title-item">{{ item.title }}</h4>
+              <p>{{ item.author }}</p>
+            </div>
+            <div class="ranking-num">
+              <svg v-if="item.ranking === 1" class="icon" aria-hidden="true">
+                <use xlink:href="#icon-a-no1" />
+              </svg>
+              <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
+                <use xlink:href="#icon-a-no21" />
+              </svg>
+              <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
+                <use xlink:href="#icon-a-no3" />
+              </svg>
+              <p>NO.{{ item.ranking }}</p>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
    </div>
  </div>
 </template>
@ -29,20 +33,40 @@
 <script>
 import data from './data'
 import scrollMixins from '@/common/scrollMixins'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'

 export default {
  name: 'NewBookRecommend',
+  components: {
+    swiper,
+    swiperSlide
+  },
  mixins: [scrollMixins],
  data() {
    return {
-      rankingList: []
+      rankingList: [],
+      swiperOptionThumbs: {
+        direction: 'vertical',
+        autoplay: true,
+        loop: true,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        touchRatio: 0.2,
+        autoScrollOffset: true
+      }
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.swiperThumbs.swiper
    }
  },
  created() {
    this.rankingList = data.ranking
  },
  mounted() {
-    this.dataCompleteFun()
+    // this.dataCompleteFun()
  },
  destroyed() {
    // 清理定时器
@ -66,4 +90,19 @@ export default {

  <style lang="scss">
  @import "~@/assets/styles/index.scss";
+  .swiper-container{
+    overflow: initial;
+  }
+  .swiper {
+    &.gallery-thumbs {
+      height: 1.275rem;
+    }
+    &.gallery-thumbs .swiper-slide {
+      width: 100%;
+      height: 100%;
+    }
+    &.gallery-thumbs .swiper-slide-active {
+      background-color: #09194B;
+    }
+  }
  </style>
--- a/src/views/notice.vue
+++ b/src/views/notice.vue
@ -3,8 +3,11 @@
  <div class="screen-item notice">
    <div class="common-title">通知公告</div>
    <div class="small-module module-content">
-      <i class="iconfont icon-tongzhi" />
-      <p ref="noticetxt">经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的</p>
+      <!-- <i class="iconfont icon-tongzhi" /> -->
+      <span class="notice-icon-gif" />
+      <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp">
+        <p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p>
+      </vue-seamless-scroll>
    </div>
  </div>
 </template>
@ -16,15 +19,31 @@ export default {
  mixins: [scrollMixins],
  data() {
    return {
-      // interval: 3000,
-      // scrollTimer: null, // 滚动定时器
-      // pauseTimer: null // 暂停定时器
+      noticeData: [
+        {
+          'des': '1.经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的'
+        },
+        {
+          'des': '2.经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的'
+        }
+      ]
+    }
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 1, // 开始无缝滚动的数据量
+        hoverStop: false, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true // 开启数据实时监控刷新dom
+      }
    }
  },
  created() {
  },
  mounted() {
-    this.dataCompleteFun()
+    // this.dataCompleteFun()
  },
  destroyed() {
    // 清理定时器
--- a/src/views/totalLending.vue
+++ b/src/views/totalLending.vue
@ -63,7 +63,6 @@ export default {
    },
    setNumberTransform() {
      var numberItems = document.getElementsByClassName('item')
-      // console.log(numberItems)
      const numberArr = this.chartNum.filter(item => !isNaN(item))
      for (var index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]