mainStatistics.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718
  1. <template>
  2. <view>
  3. <view class="head">
  4. <view class="">
  5. <image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
  6. </view>
  7. <view class="pname">
  8. <font class="wenzi" style="color: #BDD6F3;font-size:28upx">用户:{{pname}}</font>
  9. </view>
  10. <view class="company">
  11. <font style="color: #BDD6F3;font-size:28upx">申泽智能物联</font>
  12. </view>
  13. </view>
  14. <view class="ri">
  15. <view class="riShell">
  16. <view class="riImg">
  17. <image style="width: 64upx;height: 64upx;padding-top: 20upx;" src="../../static/img/ri.png"></image>
  18. </view>
  19. <view class="riTitle">
  20. <view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
  21. <font class="fontLeft" style="color: #596D83;">今日收入总额:</font>
  22. <font style="color: #ED341F;"> {{dayTotalMoney}}</font>
  23. </view>
  24. <view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
  25. <font class="fontLeft" style="color: #596D83;">今日销售数量:</font>
  26. <font style="color: #ED341F;"> {{dayTotalNum}}</font>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="riqi">
  31. <view style="text-align:right" class="tody">
  32. <font style="color: #596D83;">2019年10月7日</font>
  33. </view>
  34. <view style="text-align:right" class="xingqi">
  35. <font style="color: #596D83;">星期一</font>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="fourTitle">
  40. <view class="four">
  41. <view class="fourImg">
  42. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/zhou.png" mode=""></image>
  43. </view>
  44. <view class="fourShell">
  45. <view class="one">
  46. <font class="fontLeft" style="color: #596D83;">本周收入总额:</font>
  47. <font style="color: #ED341F;"> {{dayTotalMoney}}</font>
  48. </view>
  49. <view class="two">
  50. <font class="fontLeft" style="color: #596D83;">本周销售数量:</font>
  51. <font style="color: #ED341F;"> {{dayTotalNum}}</font>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="four">
  56. <view class="fourImg">
  57. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/yue.png" mode=""></image>
  58. </view>
  59. <view class="fourShell">
  60. <view class="one">
  61. <font class="fontLeft" style="color: #596D83;">本月收入总额:</font>
  62. <font style="color: #ED341F;"> {{monthTotalMoney}}</font>
  63. </view>
  64. <view class="two">
  65. <font class="fontLeft" style="color: #596D83;">本月销售数量:</font>
  66. <font style="color: #ED341F;"> {{monthTotalNum}}</font>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="four">
  71. <view class="fourImg">
  72. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/nian.png" mode=""></image>
  73. </view>
  74. <view class="fourShell">
  75. <view class="one">
  76. <font class="fontLeft" style="color: #596D83;">本年收入总额:</font>
  77. <font style="color: #ED341F;"> {{yearTotalMoney}}</font>
  78. </view>
  79. <view class="two">
  80. <font class="fontLeft" style="color: #596D83;">本年销售数量:</font>
  81. <font style="color: #ED341F;"> {{yearTotalNum}}</font>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="four">
  86. <view class="fourImg">
  87. <image style="width: 54upx;height: 54upx;padding-top: 20upx;" src="../../static/img/zong.png" mode=""></image>
  88. </view>
  89. <view class="fourShell">
  90. <view class="one">
  91. <font class="fontLeft" style="color: #596D83;">投放机器数量:</font>
  92. <font style="color: #ED341F;"> {{machineTotalNum}}</font>
  93. </view>
  94. <view class="two">
  95. <font class="fontLeft" style="color: #596D83;">运营机器数量:</font>
  96. <font style="color: #ED341F;"> {{machineUseNum}}</font>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <view class="qiun-columns">
  102. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  103. <view class="qiun-title-dot-light">今日销售情况</view>
  104. <view class="shijian" style="text-align: center;position: relative;">
  105. <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  106. <span>{{startDate1}}</span>
  107. <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  108. </view>
  109. </view>
  110. <view class="qiun-charts" style="background-color: #FFFFFF;">
  111. <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true @touchstart="touchLine1" @touchmove="moveLine1"
  112. @touchend="touchEndLine1" style="background-color: #FFFFFF;"></canvas>
  113. </view>
  114. </view>
  115. <view class="qiun-columns">
  116. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  117. <view class="qiun-title-dot-light">本周销售情况</view>
  118. <view class="shijian" style="text-align: center;position: relative;">
  119. <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  120. <span>{{startDate2}} 至 {{endDate2}}</span>
  121. <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  122. </view>
  123. </view>
  124. <view class="qiun-charts" style="background-color: #FFFFFF;">
  125. <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true @touchstart="touchLine2" @touchmove="moveLine2"
  126. @touchend="touchEndLine2" style="background-color: #FFFFFF;"></canvas>
  127. </view>
  128. </view>
  129. <view class="qiun-columns">
  130. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  131. <view class="qiun-title-dot-light">本月销售情况</view>
  132. <view class="shijian" style="text-align: center;position: relative;">
  133. <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  134. <span>{{startDate3}} 至 {{endDate3}}</span>
  135. <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  136. </view>
  137. </view>
  138. <view class="qiun-charts" style="background-color: #FFFFFF;">
  139. <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true @touchstart="touchLine3" @touchmove="moveLine3"
  140. @touchend="touchEndLine3" style="background-color: #FFFFFF;"></canvas>
  141. </view>
  142. </view>
  143. <view class="qiun-columns">
  144. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  145. <view class="qiun-title-dot-light">本年销售情况</view>
  146. <view class="shijian" style="text-align: center;position: relative;">
  147. <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  148. <span>{{startDate4}} 至 {{endDate4}}</span>
  149. <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  150. </view>
  151. </view>
  152. <view class="qiun-charts" style="background-color: #FFFFFF;">
  153. <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true @touchstart="touchLine4" @touchmove="moveLine4"
  154. @touchend="touchEndLine4" style="background-color: #FFFFFF;"></canvas>
  155. </view>
  156. </view>
  157. </view>
  158. </template>
  159. <script>
  160. import { mapState, mapActions, mapMutations } from 'vuex';
  161. import uCharts from '@/components/u-charts/u-charts.js';
  162. import {dateUtils} from '@/common/util.js';
  163. var _self;
  164. var canvaColumn1=null;
  165. var canvaColumn2=null;
  166. var canvaColumn3=null;
  167. var canvaColumn4=null;
  168. export default {
  169. name: 'mainStatistics',
  170. props: {
  171. equipmentId: '',
  172. adminId: '',
  173. pname:'',
  174. },
  175. data() {
  176. return {
  177. machineTotalNum:0,
  178. machineUseNum:0,
  179. dayTotalMoney:0,
  180. dayTotalNum:0,
  181. weekTotalMoney:0,
  182. weekTotalNum:0,
  183. monthTotalMoney:0,
  184. monthTotalNum:0,
  185. yearTotalMoney:0,
  186. yearTotalNum:0,
  187. cWidth: '',
  188. cHeight: '',
  189. pixelRatio: 1,
  190. startDate1: '',
  191. startDate2: '',
  192. endDate2: '',
  193. startDate3: '',
  194. endDate3: '',
  195. startDate4: '',
  196. endDate4: '',
  197. // pname:''
  198. }
  199. },
  200. computed: {
  201. ...mapState(['loginUser']),
  202. },
  203. // onLoad(option){
  204. // console.log("onLoad")
  205. // this.init();
  206. // },
  207. onShow() {
  208. var test = uni.getStorageSync('test');
  209. //判断是不是初次登陆
  210. if(test == 2){
  211. this.init();
  212. }
  213. },
  214. mounted() {
  215. console.log("mounted");
  216. this.init();
  217. },
  218. methods: {
  219. ...mapActions('chart', ['getStatistics','getMainStatistics','getMachineNum']),
  220. async init(){
  221. console.log('pname:{}',this.pname);
  222. // this.pname=uni.getStorageSync("name");
  223. if(!this.pname){
  224. console.log('loginUser:{}',this.loginUser)
  225. this.pname=this.loginUser.name;
  226. }
  227. console.log("adminId:" + this.adminId)
  228. console.log("equipmentId:" + this.equipmentId)
  229. _self = this;
  230. //图表中图
  231. this.cWidth = uni.upx2px(690);
  232. this.cHeight = uni.upx2px(370);
  233. await this.getMainStatisticsData();
  234. await this.initDateRang(new Date(),'day');
  235. await this.initDateRang(new Date(),'week');
  236. await this.initDateRang(new Date(),'month');
  237. await this.initDateRang(new Date(),'year');
  238. //初次登陆跳转后,把test变成2
  239. uni.setStorageSync('test', '2');
  240. },
  241. initDateRang(day,chartType) {
  242. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  243. if(chartType === 'day'){
  244. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  245. }
  246. if (chartType === 'week') {
  247. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  248. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  249. }
  250. if (chartType === 'month') {
  251. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  252. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  253. }
  254. if (chartType === 'year') {
  255. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  256. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  257. }
  258. return this.getStatisticsData(chartType);
  259. },
  260. /**上一个 */
  261. pre(chartType) {
  262. let day;
  263. if (chartType === 'day') { // 日
  264. day = new Date(this.startDate1);
  265. day.setDate(day.getDate() - 1);
  266. }
  267. if(chartType === 'week'){ // 周
  268. day = new Date(this.startDate2);
  269. day.setDate(day.getDate() - 7);
  270. }
  271. if (chartType === 'month') { // 月
  272. day = new Date(this.startDate3);
  273. day.setMonth(day.getMonth() - 1);
  274. }
  275. if (chartType === 'year') { // 年
  276. day = new Date(this.startDate4);
  277. day.setFullYear(day.getFullYear() - 1);
  278. }
  279. this.initDateRang(day,chartType);
  280. },
  281. /**下一个 */
  282. next(chartType) {
  283. let day;
  284. if (chartType === 'day') { // 日
  285. day = new Date(this.startDate1);
  286. day.setDate(day.getDate() + 1);
  287. }
  288. if(chartType === 'week'){ // 周
  289. day = new Date(this.startDate2);
  290. day.setDate(day.getDate() + 7);
  291. }
  292. if (chartType === 'month') { // 月
  293. day = new Date(this.startDate3);
  294. day.setMonth(day.getMonth() + 1);
  295. }
  296. if (chartType === 'year') { // 年
  297. day = new Date(this.startDate4);
  298. day.setFullYear(day.getFullYear() + 1);
  299. }
  300. this.initDateRang(day,chartType);
  301. },
  302. getStatisticsData(chartType) {
  303. const param = {
  304. 'chartType': chartType
  305. };
  306. if(chartType=='day'){
  307. param['startDate'] = this.startDate1;
  308. param['endDate'] = this.startDate1;
  309. }
  310. if(chartType=='week'){
  311. param['startDate'] = this.startDate2;
  312. param['endDate'] = this.endDate2;
  313. }
  314. if(chartType=='month'){
  315. param['startDate'] = this.startDate3;
  316. param['endDate'] = this.endDate3;
  317. }
  318. if(chartType=='year'){
  319. param['startDate'] = this.startDate4;
  320. param['endDate'] = this.endDate4;
  321. }
  322. if(this.adminId){ // 子组件,则拿传过来的参
  323. param['adminId'] = this.adminId;
  324. }else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  325. param['adminId'] = this.loginUser['id'];
  326. }
  327. if (this.equipmentId) {
  328. param['equipmentId'] = this.equipmentId;
  329. }
  330. return this.getStatistics(param)
  331. .then(data => {
  332. uni.stopPullDownRefresh();
  333. if(param['chartType']=='day'){
  334. canvaColumn1 = this.initChart('canvaColumn1',data);
  335. }
  336. if(param['chartType']=='week'){
  337. canvaColumn2 = this.initChart('canvaColumn2',data);
  338. }
  339. if(param['chartType']=='month'){
  340. canvaColumn3 = this.initChart('canvaColumn3',data);
  341. }
  342. if(param['chartType']=='year'){
  343. canvaColumn4 = this.initChart('canvaColumn4',data);
  344. }
  345. }
  346. , _ => {
  347. uni.stopPullDownRefresh();
  348. if(param['chartType']=='day'){
  349. canvaColumn1 = this.initChart('canvaColumn1',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  350. }
  351. if(param['chartType']=='week'){
  352. canvaColumn2 = this.initChart('canvaColumn2',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  353. }
  354. if(param['chartType']=='month'){
  355. canvaColumn3 = this.initChart('canvaColumn3',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  356. }
  357. if(param['chartType']=='year'){
  358. canvaColumn4 = this.initChart('canvaColumn4',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
  359. }
  360. }
  361. );
  362. },
  363. initChart(canvasId, chartData){
  364. return new uCharts({
  365. $this: _self,
  366. canvasId: canvasId,
  367. enableScroll: true,
  368. type: 'column',
  369. legend: true,
  370. fontSize: 11,
  371. background: '#FFFFFF',//y轴颜色
  372. pixelRatio: 1,
  373. animation: true,
  374. categories: chartData.categories,
  375. series: chartData.series,
  376. xAxis: {
  377. type: 'grid',
  378. gridType: 'dash',
  379. itemCount: 5, //x轴单屏显示数据的数量,默认为5个
  380. scrollShow: true, //新增是否显示滚动条,默认false
  381. scrollAlign: 'left', //滚动条初始位置
  382. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  383. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  384. // disableGrid:true,
  385. },
  386. yAxis: {
  387. //disabled:true
  388. },
  389. dataLabel: true,
  390. width: _self.cWidth * _self.pixelRatio,
  391. height: _self.cHeight * _self.pixelRatio,
  392. extra: {
  393. column: {
  394. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  395. width: 30
  396. }
  397. }
  398. });
  399. },
  400. getMainStatisticsData(){
  401. const param = {};
  402. if(this.adminId){ // 子组件,则拿传过来的参
  403. param['adminId'] = this.adminId;
  404. }else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  405. param['adminId'] = this.loginUser['id'];
  406. }
  407. if (this.equipmentId) {
  408. param['equipmentId'] = this.equipmentId;
  409. }
  410. console.log('getMainStatisticsData:{}',param);
  411. var adminId = param.adminId;
  412. var equipmentId = this.equipmentId;
  413. var serverurl = this.serverurl;
  414. uni.request({
  415. url: serverurl+'/TEquipment/getMachineNum',
  416. data:{
  417. "adminId":adminId,
  418. "equipmentId":equipmentId
  419. },
  420. method:"POST",
  421. success: (res) => {
  422. var list = res.data.data;
  423. this.machineTotalNum = list[0];
  424. this.machineUseNum = list[1];
  425. }
  426. });
  427. return this.getMainStatistics(param)
  428. .then(data => {
  429. for (let bean of data) {
  430. if(bean['categorie']==='day'){
  431. this.dayTotalMoney=bean['salePrice'];
  432. this.dayTotalNum=bean['saleNum'];
  433. }
  434. if(bean['categorie']==='week'){
  435. this.weekTotalMoney=bean['salePrice'];
  436. this.weekTotalNum=bean['saleNum'];
  437. }
  438. if(bean['categorie']==='month'){
  439. this.monthTotalMoney=bean['salePrice'];
  440. this.monthTotalNum=bean['saleNum'];
  441. }
  442. if(bean['categorie']==='year'){
  443. this.yearTotalMoney=bean['salePrice'];
  444. this.yearTotalNum=bean['saleNum'];
  445. }
  446. }
  447. uni.stopPullDownRefresh();
  448. }
  449. , _ => void uni.stopPullDownRefresh());
  450. },
  451. touchLine1(e) {
  452. if(canvaColumn1){
  453. canvaColumn1.scrollStart(e);
  454. }
  455. },
  456. moveLine1(e) {
  457. if(canvaColumn1){
  458. canvaColumn1.scroll(e);
  459. }
  460. },
  461. touchEndLine1(e) {
  462. if(canvaColumn1){
  463. canvaColumn1.scrollEnd(e);
  464. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  465. canvaColumn1.showToolTip(e, {
  466. format: function(item, category) {
  467. return category + ' ' + item.name + ':' + item.data
  468. }
  469. });
  470. }
  471. },
  472. touchLine2(e) {
  473. if(canvaColumn2){
  474. canvaColumn2.scrollStart(e);
  475. }
  476. },
  477. moveLine2(e) {
  478. if(canvaColumn2){
  479. canvaColumn2.scroll(e);
  480. }
  481. },
  482. touchEndLine2(e) {
  483. if(canvaColumn2){
  484. canvaColumn2.scrollEnd(e);
  485. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  486. canvaColumn2.showToolTip(e, {
  487. format: function(item, category) {
  488. return category + ' ' + item.name + ':' + item.data
  489. }
  490. });
  491. }
  492. },
  493. touchLine3(e) {
  494. if(canvaColumn3){
  495. canvaColumn3.scrollStart(e);
  496. }
  497. },
  498. moveLine3(e) {
  499. if(canvaColumn3){
  500. canvaColumn3.scroll(e);
  501. }
  502. },
  503. touchEndLine3(e) {
  504. if(canvaColumn3){
  505. canvaColumn3.scrollEnd(e);
  506. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  507. canvaColumn3.showToolTip(e, {
  508. format: function(item, category) {
  509. return category + ' ' + item.name + ':' + item.data
  510. }
  511. });
  512. }
  513. },
  514. touchLine4(e) {
  515. if(canvaColumn4){
  516. canvaColumn4.scrollStart(e);
  517. }
  518. },
  519. moveLine4(e) {
  520. if(canvaColumn4){
  521. canvaColumn4.scroll(e);
  522. }
  523. },
  524. touchEndLine4(e) {
  525. if(canvaColumn4){
  526. canvaColumn4.scrollEnd(e);
  527. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  528. canvaColumn4.showToolTip(e, {
  529. format: function(item, category) {
  530. return category + ' ' + item.name + ':' + item.data
  531. }
  532. });
  533. }
  534. },
  535. }
  536. }
  537. </script>
  538. <style>
  539. page {
  540. /* background: #F2F2F2; */
  541. background:#FFFFFF;
  542. width: 750upx;
  543. overflow-x: hidden;
  544. }
  545. .head{
  546. display: flex;
  547. flex-direction: row;
  548. background:#206DC3;
  549. width: 750upx;
  550. height: 180upx;
  551. }
  552. .company{
  553. width: 48%;
  554. text-align:right;
  555. }
  556. .pname{
  557. display: flex;
  558. flex-direction: row;
  559. width: 40%;
  560. }
  561. .userFlagimg{
  562. padding-left: 10upx;
  563. padding-top: 10upx;
  564. width: 26upx;
  565. height: 28upx;
  566. }
  567. .wenzi{
  568. padding-right: 0upx;
  569. /* text-align:right; */
  570. white-space: nowrap;
  571. overflow: hidden;
  572. /* text-overflow: ellipsis; */
  573. }
  574. .ri{
  575. width: 690upx;
  576. height: 180upx;
  577. background:#FFFFFF;
  578. border-radius: 15upx;
  579. /* 上移 */
  580. transform: translateY(-90upx);
  581. text-align:center;
  582. margin: auto;
  583. display: flex;
  584. flex-direction: row;
  585. /* 阴影 */
  586. box-shadow:0upx -1upx 20upx #D3D3D3;
  587. /* box-shadow:0px 0px 10px 5px #aaa; */
  588. }
  589. .riShell{
  590. display: flex;
  591. flex-direction: row;
  592. margin: auto;
  593. }
  594. .riTitle{
  595. display: flex;
  596. flex-direction: column;
  597. margin: auto;
  598. }
  599. .riqi{
  600. display: flex;
  601. flex-direction: column;
  602. margin: auto;
  603. }
  604. .fourTitle{
  605. width: 690upx;
  606. height: 294upx;
  607. display: flex;
  608. flex-direction: row;
  609. flex-wrap:wrap;
  610. background:#FFFFFF;
  611. box-shadow:0upx 0upx 20upx #D3D3D3;
  612. margin: auto;
  613. border-radius: 15upx;
  614. transform: translateY(-60upx);
  615. }
  616. .four{
  617. display: flex;
  618. flex-direction: row;
  619. margin: auto;
  620. width: 48%;
  621. }
  622. .fourImg{
  623. width: 54upx;
  624. height: 54upx;
  625. }
  626. .qiun-padding {
  627. padding: 2%;
  628. width: 96%;
  629. }
  630. .qiun-wrap {
  631. display: flex;
  632. flex-wrap: wrap;
  633. }
  634. .qiun-rows {
  635. display: flex;
  636. flex-direction: row !important;
  637. }
  638. .qiun-columns {
  639. display: flex;
  640. flex-direction: column !important;
  641. }
  642. .qiun-common-mt {
  643. margin-top: 0upx;
  644. height: 200upx;
  645. }
  646. .qiun-bg-white {
  647. background: #FFFFFF;
  648. }
  649. .qiun-title-bar {
  650. width: 100%;
  651. /* padding: 10upx 2%; */
  652. flex-wrap: nowrap;
  653. border-radius: 15upx;
  654. }
  655. .qiun-title-dot-light {
  656. border-left: 30upx solid #0ea391;
  657. padding-top: 20upx;
  658. /* border-left: 20upx; */
  659. padding-left: 10upx;
  660. height: 85upx;
  661. font-family: "PingFang-SC-Bold";
  662. font-weight: bold;
  663. margin: auto;
  664. font-size: 32upx;
  665. color: #363D44;
  666. }
  667. .shijian{
  668. padding-top: 30upx;
  669. height: 80upx;
  670. width: 690upx;
  671. margin: auto;
  672. box-shadow:0upx 0upx 10upx #D3D3D3;
  673. }
  674. .qiun-charts {
  675. width: 690upx;
  676. height: 370upx;
  677. padding-top: 30upx;
  678. background-color: #FFFFFF;
  679. margin: auto;
  680. }
  681. .charts {
  682. width: 690upx;
  683. height: 370upx;
  684. background-color: #FFFFFF;
  685. margin: auto;
  686. }
  687. .preImg {
  688. position: absolute;left: 40upx; width: 27upx;height: 45upx;
  689. }
  690. .nextImg {
  691. position: absolute;right: 40upx; width: 27upx;height: 45upx;
  692. }
  693. .fontLeft{
  694. margin-right: 20upx;
  695. }
  696. </style>