<template>
<div class="home" :style="styObj">
<div class="echart_main">
<div class="top_wrap">
<div class="top_title"></div>
<div class="top_text"></div>
<div class="top_time">
<span class="top_time_span"> 最新数据刷新时间:{
{ nowDate }} </span>
<a href="#" class="top_time_a" @click="screen"></a>
</div>
</div>
<div class="main_wrap">
<div class="wrap_1">
<div class="wrap_title_1">奖金池合计</div>
<div class="wrap_total">
<div class="total_box">
<b>{
{ yearTotal }}</b>
<span>年度累计(亿)</span>
</div>
<div class="total_box">
<b>{
{ monthTotal }}</b>
<span>月度累计(亿)</span>
</div>
</div>
</div>
<div class="wrap_2">
<div class="wrap_icon_2">
<div class="icon_box">
<div class="icon_title">
长期贡献奖金池({
{ devoteYearPercent }}%)
</div>
<div class="icon_main">
<div class="icon_main_box">
<b>{
{ devoteYearTotal }}</b>
<span>年度累计(亿)</span>
</div>
<div class="icon_main_box">
<b>{
{ devoteMonthTotal }}</b>
<span>月度累计(亿)</span>
</div>
</div>
</div>
</div>
<div class="wrap_box_2">
<div class="wrap_box_title">长期贡献奖金池</div>
<div class="wrap_box_chart" :style="testObj">
<div v-if="devoteShow" class="noImg"></div>
<pie-chart :pieChart="devoteData" v-else />
</div>
</div>
</div>
<div class="wrap_3">
<div class="wrap_icon_3">
<div class="icon_box">
<div class="icon_title">
储蓄购股奖金池<span v-if="saveTopShow"
>{
{ saveYearPercent }}</span
>
</div>
<div v-if="saveTopShow" class="icon_main">
<div class="icon_main_box">
<b>暂无数据</b>
<span style="visibility: hidden">年度累计(亿)</span>
</div>
<div class="icon_main_box">
<b></b>
<span style="visibility: hidden">月度累计(亿)</span>
</div>
</div>
<div class="icon_main" v-else>
<div class="icon_main_box">
<b>{
{ saveYearTotal }}</b>
<span>年度累计(亿)</span>
</div>
<div class="icon_main_box">
<b>{
{ saveMonthTotal }}</b>
<span>月度累计(亿)</span>
</div>
</div>
</div>
</div>
<div class="wrap_box_3">
<div class="wrap_box_title">储蓄购股奖金池</div>
<div class="wrap_box_chart" :style="testObj">
<div v-if="saveShow" class="noImg" :style="testObj"></div>
<pie-chart :pieChart="saveData" v-else />
</div>
</div>
</div>
<div class="wrap_4">
<div class="wrap_icon_4">
<div class="icon_box">
<div class="icon_title">
成就共享预留奖金池<span v-if="shareTopShow"
>{
{ shareYearPercent }}</span
>
</div>
<div v-if="shareTopShow" class="icon_main">
<div class="icon_main_box">
<b>暂无数据</b>
<span style="visibility: hidden">年度累计(亿)</span>
</div>
<div class="icon_main_box">
<b></b>
<span style="visibility: hidden">月度累计(亿)</span>
</div>
</div>
<div class="icon_main" v-else>
<div class="icon_main_box">
<b>{
{ shareYearTotal }}</b>
<span>年度累计(亿)</span>
</div>
<div class="icon_main_box">
<b>{
{ shareMonthTotal }}</b>
<span>月度累计(亿)</span>
</div>
</div>
</div>
</div>
&l
vue大屏页面
于 2021-12-14 17:35:38 首次发布
本文将探讨如何使用Vue.js进行大屏页面的开发,重点讲述在前端项目中利用JavaScript和Vue特性来实现响应式布局,确保在不同尺寸屏幕上的良好显示效果。通过组件化设计和CSS媒体查询,实现灵活的页面适配,让大屏应用场景如数据展示、仪表盘等更加高效易用。
摘要由CSDN通过智能技术生成