mainStatistics.vue 21 KB

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