xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页，文化升级

lite
123456 2 years ago
parent
db306e9cfc
commit
f34d3f2807
6 changed files with 941 additions and 439 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      package-lock.json
  2. 1
      package.json
  3. 5
      src/main.js
  4. 653
      src/views/cultrue/index.vue
  5. 549
      src/views/index.vue
  6. 167
      src/views/ty/index.vue

5
package-lock.json
View File

@ -13533,6 +13533,11 @@
"resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz", "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz",
"integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=" "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4="
}, },
"v-scale-screen": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/v-scale-screen/-/v-scale-screen-1.0.2.tgz",
"integrity": "sha512-qMXPglHIs8KnhzDBdEBLcIoF3q7jgFCTWNIVPD5M0FGBkD+amYjbFUoLdKol/Xylm+pli4AHOZOqwyL6xX62SA=="
},
"v8-compile-cache": { "v8-compile-cache": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz", "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz",

1
package.json
View File

@ -17,6 +17,7 @@
"echarts": "^5.4.2", "echarts": "^5.4.2",
"less": "3.9.0", "less": "3.9.0",
"less-loader": "4.1.0", "less-loader": "4.1.0",
"v-scale-screen": "^1.0.2",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-awesome": "^4.0.2", "vue-awesome": "^4.0.2",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",

5
src/main.js
View File

@ -3,8 +3,11 @@ import App from './App.vue';
import router from './router'; import router from './router';
import store from './store'; import store from './store';
import dataV from '@jiaminghi/data-view'; import dataV from '@jiaminghi/data-view';
import VScaleScreen from 'v-scale-screen';
Vue.use(VScaleScreen);
Vue.use(dataV); Vue.use(dataV);
// 按需引入vue-awesome图标 // 按需引入vue-awesome图标
// import Icon from 'vue-awesome/components/Icon'; // import Icon from 'vue-awesome/components/Icon';
// import 'vue-awesome/icons/chart-bar.js'; // import 'vue-awesome/icons/chart-bar.js';
@ -28,7 +31,7 @@ import echarts from 'echarts'
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.config.productionTip = false; Vue.config.productionTip = false;
// Vue.use(VScaleScreen);
new Vue({ new Vue({
router, router,
store, store,

653
src/views/cultrue/index.vue
View File

@ -1,73 +1,75 @@
<template> <template>
<div id="cultrue"> <v-scale-screen width="1920" height="1080">
<!-- 左侧 --> <div id="cultrue">
<div class="leftbox"> <!-- 左侧 -->
<div class="lb_wht"> <div class="leftbox">
<span class="wh_big_tit">文化</span> <div class="lb_wht">
<span class="wh_small">图书馆 &nbsp; | &nbsp; 文化馆 &nbsp; | &nbsp; 博物馆</span> <span class="wh_big_tit">文化</span>
</div> <span class="wh_small">图书馆 &nbsp; | &nbsp; 文化馆 &nbsp; | &nbsp; 博物馆</span>
<!-- 总计进馆总人数 -->
<div class="inszone">
<span class="institle">总计进馆人数</span>
<!-- 今日进馆人数 -->
<div class="insval">
<img src="../../assets/wh/td_ins.png" />
<span class="insv">234,098</span>
<span class="inst">今日进馆人数</span>
</div> </div>
<!-- 本月进馆人数 --> <!-- 总计进馆总人数 -->
<div class="insval"> <div class="inszone">
<img src="../../assets/wh/tm_ins.png" /> <span class="institle">总计进馆人数</span>
<span class="insv">234,098</span> <!-- 今日进馆人数 -->
<span class="inst">本月进馆人数</span> <div class="insval">
<img src="../../assets/wh/td_ins.png" />
<span id="insv" class="insv">234,098</span>
<span class="inst">今日进馆人数</span>
</div>
<!-- 本月进馆人数 -->
<div class="insval">
<img src="../../assets/wh/tm_ins.png" />
<span id="insv2" class="insv">234,098</span>
<span class="inst">本月进馆人数</span>
</div>
<!-- 本年进馆人数 -->
<div class="insval">
<img src="../../assets/wh/tyear_ins.png" />
<span id="insv3" class="insv">234,098</span>
<span class="inst">本年进馆人数</span>
</div>
</div> </div>
<!-- 本年进馆人数 --> <!-- 24h ins 统计图 -->
<div class="insval"> <div class="dinszone">
<img src="../../assets/wh/tyear_ins.png" /> <span class="dins_title">24小时总进馆人流趋势</span>
<span class="insv">234,098</span> <!-- 柱状统计图 -->
<span class="inst">本年进馆人数</span> <div class="dins_chart" id="dinschart" style="height: 200px; width: 100%"></div>
</div> </div>
</div> </div>
<!-- 24h ins 统计图 --> <!-- 中间 -->
<div class="dinszone"> <div class="center">
<span class="dins_title">24小时总进馆人流趋势</span> <div class="ctop">24小时进馆人数</div>
<!-- 柱状统计图 --> <div class="cmid">
<div class="dins_chart" id="dinschart" style="height: 200px; width: 100%"></div> <div class="cmdiv">
</div> <span id="cmdval1" class="cmdval">890,098</span>
</div> <span class="cmdt">博物馆</span>
<!-- 中间 --> </div>
<div class="center"> <div class="cmdiv">
<div class="ctop">24小时进馆人数</div> <span id="cmdval2" class="cmdval">890,098</span>
<div class="cmid"> <span class="cmdt">文化馆</span>
<div class="cmdiv"> </div>
<span class="cmdval">890,098</span>
<span class="cmdt">博物馆</span>
</div> </div>
<div class="cmdiv"> <div class="cbuttom">
<span class="cmdval">890,098</span> <span id="cmdval3" class="cbval">23,334</span>
<span class="cmdt">文化馆</span> <span class="cbt">图书馆</span>
</div> </div>
</div> </div>
<div class="cbuttom"> <!-- 右侧 -->
<span class="cbval">23,334</span> <div class="rightbox">
<span class="cbt">图书馆</span> <!-- 各场馆人流趋势 -->
</div> <div class="pcgrliu">
</div> <span class="pcg_title">各场馆人流趋势</span>
<!-- 右侧 --> <div id="pcgchart" style="width: 100%;height: 32vh;margin-top: 20px;"></div>
<div class="rightbox"> </div>
<!-- 各场馆人流趋势 --> <!-- 图书馆数据统计 -->
<div class="pcgrliu"> <div class="tsgrliu">
<span class="pcg_title">各场馆人流趋势</span> <span class="tsg_title">图书馆数据统计</span>
<div id="pcgchart" style="width: 100%;height: 12vh;"></div> <div id="tsgchart" style="width: 100%;height: 20vh;margin-top: 20px;"></div>
</div> </div>
<!-- 图书馆数据统计 -->
<div class="tsgrliu">
<span class="tsg_title">图书馆数据统计</span>
<div id="tsgchart" style="width: 100%;height: 12vh;"></div>
</div> </div>
</div>
</div> </div>
</v-scale-screen>
</template> </template>
<script> <script>
// 引入echarts // 引入echarts
@ -86,7 +88,15 @@ export default {
} }
console.log(cc.classList) console.log(cc.classList)
this.cultrue_bar1(); this.cultrue_bar1();
this.cultrue_bar2();
this.cultrue_bar3(); this.cultrue_bar3();
this.addNumber(0,234098,'insv')
this.addNumber(0,234098,'insv2')
this.addNumber(0,234098,'insv3')
this.addNumber(0,890098,'cmdval1')
this.addNumber(0,890098,'cmdval2')
this.addNumber(0,234098,'cmdval3')
// var name = ['图书馆', '文化馆', '博物馆']
}, },
methods: { methods: {
cultrue_bar1() { cultrue_bar1() {
@ -119,7 +129,7 @@ export default {
}, },
xAxis: [{ xAxis: [{
data: [ data: [
'08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
], ],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -138,9 +148,9 @@ export default {
axisLabel: { axisLabel: {
// interval: 0, // interval: 0,
// rotate: 0 // rotate: 0
show:true, show: true,
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
} }
} }
}], }],
@ -156,9 +166,9 @@ export default {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: '#027eff' color: '#027eff'
} }
}, },
axisLabel: { axisLabel: {
color: '#0095FF', color: '#0095FF',
@ -221,20 +231,20 @@ export default {
z: 2, z: 2,
}, },
{ {
name: '背景', name: '背景',
type: 'bar', type: 'bar',
barWidth: '10%', barWidth: '10%',
barGap: '-100%', barGap: '-100%',
data: [15000,15000,15000,15000,15000,15000,15000,15000,15000], data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
itemStyle: { itemStyle: {
normal: { normal: {
color: '#004298', color: '#004298',
barBorderRadius: 30, barBorderRadius: 30,
// backgroundColor:'#091C24' // backgroundColor:'#091C24'
// borderColor:'#00D1F0' // borderColor:'#00D1F0'
} }
}, },
z: 1, z: 1,
}, },
] ]
} }
@ -242,166 +252,416 @@ export default {
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
cultrue_bar3() { cultrue_bar2() {
var chartDom = document.getElementById("tsgchart1"); var chartDom = document.getElementById("pcgchart");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
// var option;
// var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
// var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000] var option
// var data = [Math.random() * 300] // var xData = function() {
var option = { // var data = [];
// for (var i = 2011; i < 2017; i++) {
// data.push(i + "年");
// }
// return data;
// }();
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = ['图书馆', '文化馆', '博物馆']
var data = [
[137, 34, 135, 161, 74, 152, 110, 100, 150],
[174, 137, 135, 34, 152, 135, 140, 160, 100],
[134, 74, 137, 135, 161, 137, 300, 220, 250],
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
]
var series = [];
for (var i = 0; i < 6; i++) {
series.push({
name: name[i],
type: "line",
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
smooth: true, //是否平滑曲线显示
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: color[i]
}, {
offset: 0.8,
color: 'rgba(255,255,255,0)'
}], false),
// shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10,
opacity: 0.3,
}
},
itemStyle: {
normal: {
color: color[i],
lineStyle: {
width: 1,
type: 'solid' //'dotted'虚线 'solid'实线
},
borderColor: color[i], //图形的描边颜色。支持的格式同 color
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
barBorderRadius: 0,
label: {
show: false,
},
opacity: 0.5,
}
},
data: data[i],
})
}
option = {
// backgroundColor: "#141f56",
legend: {
top: 0,
itemGap: 15,
itemWidth: 15,
textStyle: {
color: '#fff',
fontSize: '14'
},
data: name
},
title: {
// text: "负面言论分领域趋势",
textStyle: {
color: '#fff',
fontSize: '22',
fontWeight: 'normal',
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
color: '#57617B'
}
}, },
formatter: function (params) { formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
return params[0].name + "</br>" + params[0].value backgroundColor: 'rgba(0,0,0,0.7)', // 背景
} padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
}, },
// legend: {
// data: ['厂用电量']
// },
grid: { grid: {
left: '3%', borderWidth: 0,
right: '3%', top: 240,
bottom: '3%', bottom: 240,
top: '10%', textStyle: {
containLabel: true color: "#fff"
}
}, },
xAxis: [{ xAxis: [{
data: [ type: "category",
'08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00',
],
axisLine: { axisLine: {
lineStyle: { show: false,
color: '#0095FF', },
width: 1, splitLine: {
type: 'solid', show: false,
},
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
inside: false,
textStyle: {
color: '#FFFFFF',
fontWeight: 'normal',
fontSize: '12',
}, },
show: true
}, },
data: xData,
}],
yAxis: {
type: 'value',
axisTick: { axisTick: {
show: false
},
axisLine: {
show: false, show: false,
}, },
splitLine: { splitLine: {
show: false show: true,
lineStyle: {
color: '#32346c ',
}
}, },
axisLabel: { axisLabel: {
// interval: 0, textStyle: {
// rotate: 0 color: '#0095FF',
show:true, fontWeight: 'normal',
textStyle:{ fontSize: '12',
color:'#fff' },
} formatter: '{value}',
} },
}], },
series: series,
}
option && myChart.setOption(option);
},
cultrue_bar3() {
var chartDom = document.getElementById("tsgchart");
var myChart = echarts.init(chartDom);
var option;
var data = [{
name: '今日办证人数',
value: 323,
},
{
name: '今日还书册数',
value: 209,
},
{
name: '今日借书册数',
value: 323,
},
// {
// name: 'user4',
// value: 44,
// sum: 60
// }, {
// name: 'user1',
// value: 10,
// sum: 10
// },
// {
// name: 'user2',
// value: 20,
// sum: 10
// },
// {
// name: 'user3',
// value: 53,
// sum: 50
// },
// {
// name: 'user4',
// value: 24,
// sum: 60
// }, {
// name: 'user1',
// value: 10,
// sum: 10
// },
// {
// name: 'user2',
// value: 20,
// sum: 10
// }
];
var getArrByKey = (data, k) => {
let key = k || "value";
let res = [];
if (data) {
data.forEach(function (t) {
res.push(t[key]);
});
}
return res;
};
var getSymbolData = (data) => {
let arr = [];
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: 'end'
})
}
return arr;
}
// var opt = {
// index: 0
// }
// var color = ['#A71A2B'];
// data = data.sort((a, b) => {
// return b.value - a.value
// });
console.log(getSymbolData(data));
option = {
// backgroundColor: '#000000',
grid: {
top: '2%',
bottom: -15,
right: 30,
left: 30,
containLabel: true
},
xAxis: {
show: false
},
yAxis: [{ yAxis: [{
type: 'value', triggerEvent: true,
// name: ' 今日发电量( KWh )', show: true,
// inverse: true,
data: getArrByKey(data, 'name'),
axisLine: { axisLine: {
show: false show: false
}, },
splitLine: {
show: false
},
axisTick: { axisTick: {
show: false
},
axisLabel: {
show: false, show: false,
interval: 0,
color: '#fff',
align: 'left',
margin: 80,
fontSize: 12,
formatter: function (value) {
return '{title|' + value + '}'
},
rich: {
title: {
width: 165
}
}
},
}, {
triggerEvent: true,
show: true,
// inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
}, },
splitLine: { splitLine: {
show: true, show: false
lineStyle: { },
// 使用深浅的间隔色 axisTick: {
color: '#027eff' show: false
}
}, },
axisLabel: { axisLabel: {
color: '#0095FF', interval: 0,
shadowOffsetX: '-20px',
color: '#fff',
align: 'right',
verticalAlign: 'bottom',
lineHeight: 30,
fontSize: 16,
formatter: function (value, index) {
return data[index].value + ' 册 '
},
} }
}], }],
series: [{ series: [{
// name: '厂用电量', name: 'XXX',
type: 'pictorialBar',
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
symbolSize: [50, 50],
symbolOffset: [20, 0],
z: 12,
itemStyle: {
normal: {
color: '#14b1eb'
}
},
data: getSymbolData(data)
}, {
name: '条',
type: 'bar', type: 'bar',
barGap: '5%', showBackground: true,
barWidth: '10%', barBorderRadius: 30,
barCategoryGap: '60%', yAxisIndex: 0,
stack: 1, data: data,
barWidth: 10,
// align: left,
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: [30, 30, 0, 0],
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{ 0,
0,
1,
0,
[{
offset: 0, offset: 0,
color: '#00feff' color: '#A71A2B'
},
{
offset: 0.7,
color: '#A71A2B'
}, },
// {
// offset: 0.5,
// color: '#00feff'
// },
{ {
offset: 1, offset: 1,
color: '#0286ff' color: '#5EDEE5'
} }
] ],
)
} false
),
barBorderRadius: 10
},
// color: '#A71A2B',
barBorderRadius: 4,
}, },
data: [ label: {
14000,
11000,
10000,
9000,
8000,
7000,
5000,
4000,
3000,
],
zlevel: 11
},
{
// name: '厂用电量',
type: 'scatter',
stack: 1,
xAxisIndex: 0,
symbolOffset: [0, 0], //相对于原本位置的偏移量
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
itemStyle: {
normal: { normal: {
color: '#fff' color: '#fff',
show: true,
position: [0, '-20px'],
textStyle: {
fontSize: 16
},
formatter: function (a) {
return a.name
}
} }
}, }
symbolSize: 13, }]
zlevel: 10, };
z: 2,
},
{
name: '背景',
type: 'bar',
barWidth: '10%',
barGap: '-100%',
data: [15000,15000,15000,15000,15000,15000,15000,15000,15000],
itemStyle: {
normal: {
color: '#004298',
barBorderRadius: 30,
// backgroundColor:'#091C24'
// borderColor:'#00D1F0'
}
},
z: 1,
},
]
}
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
addNumber(start, end, id) {
var o = document.getElementById(id);
var i = start;
var Interval;
if (i < end) {
Interval = setInterval(function () {
i += 4000; // 设置每次增加的动态数字，可调整
if (i > end) {
clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
i = 0;
} else {
o.innerHTML = i.toLocaleString();
}
}, 10); // 数据跳转的速度控制
}
}
}, },
}; };
</script> </script>
<style> <style lang="scss" scoped="scoped">
#cultrue { #cultrue {
width: 96%; width: 100%;
height: 100%; // height: 100%;
/* float: left; */ /* float: left; */
margin: 0 auto; margin: 0 auto;
} }
@ -419,6 +679,7 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
height: 3.8rem; height: 3.8rem;
// height: vh(142.5);
} }
.leftbox .lb_wht span { .leftbox .lb_wht span {
@ -430,6 +691,7 @@ export default {
/* line-height: 4.2rem; */ /* line-height: 4.2rem; */
text-align: right; text-align: right;
padding-top: 120px; padding-top: 120px;
/* padding-top: 3.2rem; */
} }
.leftbox .lb_wht .wh_small { .leftbox .lb_wht .wh_small {
@ -652,10 +914,11 @@ export default {
background-position: 0 center; background-position: 0 center;
padding-left: 0.68rem; padding-left: 0.68rem;
color: #fff; color: #fff;
font-size: 16px;
} }
.rightbox .tsgrliu { .rightbox .tsgrliu {
margin: 4vh 0 0 0; margin: 14vh 0 0 0;
height: 26vh; height: 26vh;
} }
@ -668,10 +931,12 @@ export default {
background-position: 0 center; background-position: 0 center;
padding-left: 0.68rem; padding-left: 0.68rem;
color: #fff; color: #fff;
font-size: 16px;
} }
/* 全局背景 */ /* 全局背景 */
.wh_bg { .wh_bg {
clear: both; clear: both;
background-image: url("../../assets/wh/whbg.jpg") !important; background-image: url("../../assets/wh/whbg.jpg") !important;
}</style> }
</style>

549
src/views/index.vue
View File

@ -1,149 +1,151 @@
<template> <template>
<div id="index"> <v-scale-screen width="1920" height="1080">
<!-- 左边 --> <div id="index">
<div class="leftbox"> <!-- 左边 -->
<!-- 客流 --> <div class="leftbox">
<div class="keliu"> <!-- 客流 -->
<span class="kliu_title">客流趋势</span> <div class="keliu">
<div class="kliu_st"> <span class="kliu_title">客流趋势</span>
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span> <div class="kliu_st">
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span> <span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span> <span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
</div> <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
<!-- 柱状图 -->
<div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
<!-- 柱图，注意样式 -->
</div>
<!-- 几大场馆预警图 -->
<div class="cgflow">
<!-- 左边的流量预警 -->
<div class="cgflow_leftbox">
<!-- 体育场的流量预警 -->
<div class="cgfitem">
<span class="cgtitle">体育场</span>
<span class="cgval">20%</span>
<span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
</div>
<!-- 体育馆 -->
<div class="cgfitem">
<span class="cgtitle">体育馆</span>
<span class="cgval">20%</span>
<span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
</div>
<!-- 游泳馆 -->
<div class="cgfitem">
<span class="cgtitle">游泳场</span>
<span class="cgval">20%</span>
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
</div>
</div> </div>
<!-- 右边流量预警 --> <!-- 柱状图 -->
<div class="cgflow_rightbox"> <div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
<!-- 图书馆 --> <!-- 柱图，注意样式 -->
<div class="cgfitem"> </div>
<span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span> <!-- 几大场馆预警图 -->
<span class="cgval">20%</span> <div class="cgflow">
<span class="cgtitle">图书馆</span> <!-- 左边的流量预警 -->
</div> <div class="cgflow_leftbox">
<!-- 文化馆 --> <!-- 体育场的流量预警 -->
<div class="cgfitem"> <div class="cgfitem">
<span class="cgimg"><img src="../assets/index/whg_icon.png" /></span> <span class="cgtitle">体育场</span>
<span class="cgval">20%</span> <span class="cgval">20%</span>
<span class="cgtitle">文化馆</span> <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
</div>
<!-- 体育馆 -->
<div class="cgfitem">
<span class="cgtitle">体育馆</span>
<span class="cgval">20%</span>
<span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
</div>
<!-- 游泳馆 -->
<div class="cgfitem">
<span class="cgtitle">游泳场</span>
<span class="cgval">20%</span>
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
</div>
</div> </div>
<!-- 博物馆 --> <!-- 右边流量预警 -->
<div class="cgfitem"> <div class="cgflow_rightbox">
<span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span> <!-- 图书馆 -->
<span class="cgval">20%</span> <div class="cgfitem">
<span class="cgtitle">博物馆</span> <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
<span class="cgval">20%</span>
<span class="cgtitle">图书馆</span>
</div>
<!-- 文化馆 -->
<div class="cgfitem">
<span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
<span class="cgval">20%</span>
<span class="cgtitle">文化馆</span>
</div>
<!-- 博物馆 -->
<div class="cgfitem">
<span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
<span class="cgval">20%</span>
<span class="cgtitle">博物馆</span>
</div>
</div> </div>
</div> </div>
</div>
<!-- 今日各场馆人数趋势 --> <!-- 今日各场馆人数趋势 -->
<div class="gcgqs"> <div class="gcgqs">
<div class="gcg_title">今日各场馆人数趋势</div> <div class="gcg_title">今日各场馆人数趋势</div>
<div id="kl-line" style="width: 100%; height: 180px"></div> <div id="kl-line" style="width: 100%; height: 20vh"></div>
</div> </div>
</div>
</div>
<!-- 中间 -->
<div class="centerbox">
<!-- 今日进馆人数 -->
<div class="jgrs">
<span class="jgval jgval1">345,235</span>
<span class="jgdesc jgdesc1">今日进馆人数</span>
</div>
<!-- 本周进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">本周进馆人数</span>
</div>
<!-- 本月进馆人数 -->
<div class="jgrs">
<span class="jgval jgval3">345,235</span>
<span class="jgdesc jgdesc3">本月进馆人数</span>
</div>
<!-- 会动的体育馆image -->
<div class="tygpic"><img src="../assets/index/zt.png" /></div>
<!-- 年度进馆人数 -->
<div class="ndjgrs">
<span class="nddesc">年度进馆人数</span>
<span class="ndval">33,532,890</span>
</div>
</div>
<!-- 右边 -->
<div class="rbox">
<div class="rbox_title">各场馆实施实时进馆人数</div>
<div class="rbox_con">
<!-- 各场馆实时人数 cg1 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">40%</span>
</div>
<!-- 各场馆实时人数 cg2 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">50%</span>
</div> </div>
<!-- 各场馆实时人数 cg3 --> </div>
<div class="rbitem"> <!-- 中间 -->
<span class="rbcgname">体育场</span> <div class="centerbox">
<span class="rbtitle">当前人数</span> <!-- 今日进馆人数 -->
<span class="rbval">4,738</span> <div class="jgrs">
<span class="rbrate">80%</span> <span id="jgval1" class="jgval jgval1">345,235</span>
<span class="jgdesc jgdesc1">今日进馆人数</span>
</div> </div>
<!-- 各场馆实时人数 cg4 --> <!-- 本周进馆人数 -->
<div class="rbitem"> <div class="jgrs">
<span class="rbcgname">体育场</span> <span id="jgval2" class="jgval">345,235</span>
<span class="rbtitle">当前人数</span> <span class="jgdesc">本周进馆人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">25%</span>
</div> </div>
<!-- 各场馆实时人数 cg5 --> <!-- 本月进馆人数 -->
<div class="rbitem"> <div class="jgrs">
<span class="rbcgname">体育场</span> <span id="jgval3" class="jgval jgval3">345,235</span>
<span class="rbtitle">当前人数</span> <span class="jgdesc jgdesc3">本月进馆人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">90%</span>
</div> </div>
<!-- 各场馆实时人数 cg6 --> <!-- 会动的体育馆image -->
<div class="rbitem"> <div class="tygpic"><img src="../assets/index/zt.png" /></div>
<span class="rbcgname">体育场</span> <!-- 年度进馆人数 -->
<span class="rbtitle">当前人数</span> <div class="ndjgrs">
<span class="rbval">4,738</span> <span class="nddesc">年度进馆人数</span>
<span class="rbrate">75%</span> <span class="ndval">33,532,890</span>
</div> </div>
</div>
<!-- 右边 -->
<div class="rbox">
<div class="rbox_title">各场馆实施实时进馆人数</div>
<div class="rbox_con">
<!-- 各场馆实时人数 cg1 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">40%</span>
</div>
<!-- 各场馆实时人数 cg2 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">50%</span>
</div>
<!-- 各场馆实时人数 cg3 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">80%</span>
</div>
<!-- 各场馆实时人数 cg4 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">25%</span>
</div>
<!-- 各场馆实时人数 cg5 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">90%</span>
</div>
<!-- 各场馆实时人数 cg6 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">75%</span>
</div>
</div>
</div> </div>
</div>
</div> </div>
</v-scale-screen>
</template> </template>
<script> <script>
// 引入echarts // 引入echarts
@ -171,6 +173,10 @@ export default {
this.home_bar(); this.home_bar();
// 折线图 // 折线图
this.line_zone(); this.line_zone();
this.addNumber(0,345235,'jgval1');
this.addNumber(0,345235,'jgval2');
this.addNumber(0,345235,'jgval3');
}, },
methods: { methods: {
//选择年月日中的某个 //选择年月日中的某个
@ -516,74 +522,262 @@ export default {
}, },
// 大面积折线图 // 大面积折线图
// line_zone() {
// var chartDom = document.getElementById("kl-line");
// var myChart = echarts.init(chartDom);
// var option;
// let base = +new Date(2022, 9, 3);
// let oneDay = 24 * 3600 * 1000;
// let date = [];
// let data = [Math.random() * 300];
// for (let i = 1; i < 20000; i++) {
// var now = new Date((base += oneDay));
// date.push(
// [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
// );
// data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
// }
// option = {
// xAxis: {
// type: "category",
// boundaryGap: false,
// data: date,
// },
// yAxis: {
// type: "value",
// boundaryGap: [0, "100%"],
// //网格线
// splitLine: {
// lineStyle: {
// type: "soild",
// color: "#2F00FF",
// },
// },
// },
// series: [
// {
// name: "Fake Data",
// type: "line",
// symbol: "none",
// sampling: "lttb",
// itemStyle: {
// color: "rgb(255, 170, 131)",
// },
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(255, 158, 68,0.6)",
// },
// {
// offset: 1,
// color: "rgb(255, 70, 131,0.6)",
// },
// ]),
// },
// data: data,
// },
// ],
// };
// option && myChart.setOption(option);
// },
line_zone() { line_zone() {
var chartDom = document.getElementById("kl-line"); var chartDom = document.getElementById("kl-line");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
let base = +new Date(2022, 9, 3); var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00'];
let oneDay = 24 * 3600 * 1000; var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
let date = []; var name = []
let data = [Math.random() * 300]; var data = [
for (let i = 1; i < 20000; i++) { [137, 34, 135, 161, 74, 152, 110, 100, 150,137, 34, 135, 161],
var now = new Date((base += oneDay)); [174, 137, 135, 34, 152, 135, 140, 160, 100,174, 137, 135, 34],
date.push( [134, 74, 137, 135, 161, 137, 300, 220, 250,134, 74, 137, 135],
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/") [147, 134, 155, 131, 174, 122, 140, 160, 150,127, 134, 175, 161],
); [124, 147, 175, 134, 122, 175, 180, 110, 130,154, 187, 125, 134],
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); [154, 174, 157, 175, 121, 157, 200, 250, 280,134, 174, 157, 175],
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
]
var series = [];
for (var i = 0; i < 6; i++) {
series.push({
name: name[i],
type: "line",
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
smooth: true, //是否平滑曲线显示
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: color[i]
}, {
offset: 0.8,
color: 'rgba(255,255,255,0)'
}], false),
// shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10,
opacity: 0.3,
}
},
itemStyle: {
normal: {
color: color[i],
lineStyle: {
width: 1,
type: 'solid' //'dotted'虚线 'solid'实线
},
borderColor: color[i], //图形的描边颜色。支持的格式同 color
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
barBorderRadius: 0,
label: {
show: false,
},
opacity: 0.5,
}
},
data: data[i],
})
} }
option = { option = {
xAxis: { // backgroundColor: "#141f56",
type: "category", legend: {
boundaryGap: false, top: 0,
data: date, itemGap: 15,
itemWidth: 15,
textStyle: {
color: '#fff',
fontSize: '14'
},
data: name
}, },
yAxis: { title: {
type: "value", // text: "负面言论分领域趋势",
boundaryGap: [0, "100%"], textStyle: {
//网格线 color: '#fff',
splitLine: { fontSize: '22',
fontWeight: 'normal',
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
tooltip: {
trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: { lineStyle: {
type: "soild", color: '#57617B'
color: "#2F00FF", }
},
}, },
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
}, },
grid: {
series: [ borderWidth: 0,
{ top: 160,
name: "Fake Data", bottom: 160,
type: "line", textStyle: {
symbol: "none", color: "#fff"
sampling: "lttb", }
itemStyle: { },
color: "rgb(255, 170, 131)", xAxis: [{
type: "category",
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0B0765',
}
},
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
inside: false,
textStyle: {
color: '#FFFFFF',
fontWeight: 'normal',
fontSize: '12',
}, },
areaStyle: { },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ data: xData,
{ }],
offset: 0, yAxis: {
color: "rgba(255, 158, 68,0.6)", type: 'value',
}, axisTick: {
{ show: false
offset: 1, },
color: "rgb(255, 70, 131,0.6)", axisLine: {
}, show: true,
]), lineStyle: {
color: '#0B0765 ',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#0B0765 ',
}
},
axisLabel: {
textStyle: {
color: '#0095FF',
fontWeight: 'normal',
fontSize: '12',
}, },
data: data, formatter: '{value}',
}, },
], },
}; series: series,
}
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
addNumber(start, end, id) {
var o = document.getElementById(id);
var i = start;
var Interval;
if (i < end) {
Interval = setInterval(function () {
i += 4000; // 设置每次增加的动态数字，可调整
if (i > end) {
clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
i = 0;
} else {
o.innerHTML = i.toLocaleString();
}
}, 10); // 数据跳转的速度控制
}
}
}, },
}; };
</script> </script>
<style> <style>
#index { #index {
width: 100%; width: 100%;
height: 100%;
float: left; float: left;
} }
@ -877,4 +1071,5 @@ export default {
.page_bg { .page_bg {
clear: both; clear: both;
background-image: url("../assets/index/bg.jpg") !important; background-image: url("../assets/index/bg.jpg") !important;
}</style> }
</style>

167
src/views/ty/index.vue
View File

@ -1,69 +1,64 @@
<template> <template>
<div id="ty"> <v-scale-screen width="1920" height="1080">
<div id="ty">
<div class="main"> <div class="main">
<div class="left"> <div class="left">
<div class="tiyuBla"> <div class="tiyuBla">
<div style="position: absolute; right: 28%; top: 52%">体育</div> <div style="position: absolute; right: 28%; top: 52%">体育</div>
</div> </div>
<div class="tongji"></div> <div class="tongji"></div>
<div class="bfb"> <div class="bfb">
<div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div> <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
<div class="num">24,352,345</div> <div class="num">24,352,345</div>
<!-- <div class="cntTxt"> <!-- <div class="cntTxt">
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div> <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
<div style="color: #0082FF;font-size: 14px;">人流饱和</div> <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
</div> --> </div> -->
<div class="cntTxt"> <div class="cntTxt">
<canvas <canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts"
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" @click="tap" />
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div>
<div class="rsType">
<div class="typeItem">
<div>安静</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/ty/quiet.png"
/>
</div>
<div class="typeItem">
<div>舒适</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/ty/soft.png"
/>
</div> </div>
<div class="typeItem">
<div>拥挤</div> <div class="rsType">
<img <div class="typeItem">
style="width: 45%; height: 40%; margin-top: 10%" <div>安静</div>
src="../../assets/ty/crowd.png" <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/quiet.png" />
/> </div>
<div class="typeItem">
<div>舒适</div>
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/soft.png" />
</div>
<div class="typeItem">
<div>拥挤</div>
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="right"> <div class="center">
<div class="item" ></div> <div class="item"></div>
<div class="item"></div> <div class="item"></div>
<div class="item"></div> <div class="item"></div>
<div class="item"></div> <!-- <div class="item"></div> -->
</div>
<div class="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- <div class="item"></div> -->
</div>
</div> </div>
</div>
</div> </div>
</v-scale-screen>
</template> </template>
<script> <script>
export default { export default {
@ -92,13 +87,16 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.main { .main {
display: flex; display: flex;
justify-content: space-between; justify-content: space-evenly;
.left { .left {
width: 30%; width: 38%;
height: 75vh; height: 75vh;
// border: 1px solid red; // border: 1px solid red;
margin-left: 2%; margin-left: 2%;
margin-top: -4%; margin-top: -4%;
.tiyuBla { .tiyuBla {
width: 100%; width: 100%;
height: 40%; height: 40%;
@ -124,14 +122,17 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
.renshu { .renshu {
span{ span {
margin-right: 5px; margin-right: 5px;
img{
img {
width: 10px; width: 10px;
height: 12px; height: 12px;
} }
} }
position: absolute; position: absolute;
top: 30%; top: 30%;
left: 10%; left: 10%;
@ -139,6 +140,7 @@ export default {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
.num { .num {
color: white; color: white;
font-weight: bold; font-weight: bold;
@ -147,6 +149,7 @@ export default {
top: 45%; top: 45%;
left: 6%; left: 6%;
} }
.cntTxt { .cntTxt {
width: 20%; width: 20%;
height: 60%; height: 60%;
@ -157,6 +160,7 @@ export default {
text-align: center; text-align: center;
padding-top: 2.5%; padding-top: 2.5%;
} }
.rsType { .rsType {
width: 30%; width: 30%;
height: 35%; height: 35%;
@ -166,6 +170,7 @@ export default {
right: 4%; right: 4%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.typeItem { .typeItem {
width: 30%; width: 30%;
height: 95%; height: 95%;
@ -177,36 +182,64 @@ export default {
} }
} }
.right { .center {
margin-top: 3%; margin-top: 3%;
width: 65%; width: 30%;
height: 66vh; height: 76vh;
// border: 1px solid #019ade; // border: 1px solid #019ade;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// align-items: center; // align-items: center;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
background-image: url("../../assets/ty/vbig_bg.png") ; background-image: url("../../assets/ty/vbig_bg.png");
background-size:contain; background-size: contain;
background-repeat:no-repeat; background-repeat: no-repeat;
.item{
width: 40%; .item {
height: 40%; width: 80%;
height: 30%;
margin-top: 5px; margin-top: 5px;
background-image: url("../../assets/ty/vsmall_bg.png") ; background-image: url("../../assets/ty/vsmall_bg.png");
background-size:contain; background-size: contain;
background-repeat:no-repeat; background-repeat: no-repeat;
} }
.item:nth-child(2),.item:nth-child(4){ }
margin-right: 60px;
.right {
margin-top: 3%;
width: 38%;
height: 76vh;
// border: 1px solid #019ade;
display: flex;
flex-wrap: wrap;
// align-items: center;
align-content: center;
justify-content: center;
background-image: url("../../assets/ty/vbig_bg.png");
background-size: contain;
background-repeat: no-repeat;
.item {
width: 80%;
height: 30%;
margin-top: 5px;
background-image: url("../../assets/ty/vsmall_bg.png");
background-size: contain;
background-repeat: no-repeat;
} }
// .item:nth-child(2),
// .item:nth-child(4) {
// margin-right: 60px;
// }
} }
.charts { .charts {
width: 225px; width: 225px;
height: 150px; height: 150px;
} }
.charts1 { .charts1 {
width: 550px; width: 550px;
height: 250px; height: 250px;

Write Preview
Loading…
Cancel
Save