vue -（滚动播放-全屏展示）
vue可视化
git地址：https://gitee.com/HuaWang400/jiajuxiaoshou
转载自：https://juejin.cn/post/6931189766109003783
滚动播报
公共组件-路由组件
components/Common/Scroll.vueclass="scroll">class="scroll-header" :style="{ height : headerConfig.headerHeight + 'px', background: headerConfig.headerBackground, }">class="scroll-header-item" v-for="(item, index) in headerConfig.headerItems" :key = "'scroll-header-item' + index" :style="{ width: averageWidth + 'px', ... headerConfig.headerStyle[index] }"> {{item}}class="scroll-content" ref="scrollContent">for="(item, index) in rowsData" :key = "item.index" :style = "{ height: rowHeights[index] + 'px', background: item.index % 2 === 0 ? rowBackground[0] : rowBackground[1] }" class="scroll-content-li">for="( k, i ) in Object.keys(item.data)" :key = "'scroll-content-li' + i" class="scroll-content-li-item" :style="{ width: headerConfig.headerStyle[i].width ? headerConfig.headerStyle[i].width : averageWidth + 'px', }">{{item.data[k]}}
class="star-product">
class="title">明星产品销售概况
class="list">
<scroll
:header="header"
:rows="list"
:duration="duration"
:capacity="6"
>
components/Scroll.vue
全屏/退出
DisplayHeader/index.vueclass="display-header"> class="sub">数据更新于：{{ time }} class="title">2020秋季家具交易会实时销售数据可视化平台 class="sub full-screen" @click="toggleScreen">{{ operationText }}