Home.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887
  1. <template>
  2. <div class="home">
  3. <timeing></timeing>
  4. <p class="backtitle">居家老年人巡视关爱探访平台</p>
  5. <div class="left">
  6. <!-- 左一 -->
  7. <div class="p1 bj">
  8. <div class="p1title bj">
  9. <router-link to="/home/oldStatistics">
  10. <p>老年人信息统计</p>
  11. </router-link>
  12. </div>
  13. <div class="p1chart bj">
  14. <com1 ref="c1"></com1>
  15. </div>
  16. </div>
  17. <!-- 左二 -->
  18. <div class="p2 bj">
  19. <!-- <div class="p2title bj">-->
  20. <!-- <router-link to="/home/EnterpriseInformation">-->
  21. <!-- <p>巡访员信息统计</p>-->
  22. <!-- </router-link>-->
  23. <!-- <span :class="isTure ? 'kaung1': 'kaung2' " style="margin-left: 10px" @click="right1">个人探访数据</span>-->
  24. <!-- <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>-->
  25. <!-- </div>-->
  26. <div class="p2title bj">
  27. <p>
  28. <router-link to="/home/PatrolmanStatistics">
  29. <span>巡访员信息统计</span>
  30. </router-link>
  31. <span :class="isleftbtnTure1 ? 'left-kaung3': 'left-selectkaung3' " style="margin-right: 10px"
  32. @click="left2">性别</span>
  33. <span :class="isleftbtnTure ? 'left-selectkaung': 'left-kaung' " style="margin-right: 10px"
  34. @click="left1">认证数据</span>
  35. </p>
  36. </div>
  37. <div class="p2chart bj">
  38. <!-- <div class="p2legend">-->
  39. <!-- <span class="span2">群众</span>-->
  40. <!-- <img src="../assets/index/lv.png"/>-->
  41. <!-- <span class="span2">党员</span>-->
  42. <!-- <img src="../assets/index/huang.png"/>-->
  43. <!-- </div>-->
  44. <com2 ref="c2"></com2>
  45. </div>
  46. </div>
  47. <!-- 左三 -->
  48. <div class="p3 bj">
  49. <div class="p3title bj">
  50. <p>采集巡访数据统计</p>
  51. </div>
  52. <div class="p3chart bj">
  53. <!-- <div class="p3legend">-->
  54. <!-- <span class="span1">巡访数据</span>-->
  55. <!-- <img src="../assets/index/huang.png"/>-->
  56. <!-- <span class="span2">采集数据</span>-->
  57. <!-- <img src="../assets/index/lan.png"/>-->
  58. <!-- </div>-->
  59. <com3 ref="c3"></com3>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- 中间部分 -->
  64. <div class="center">
  65. <!-- 中间部分上方数据 -->
  66. <div class="topdatabox">
  67. <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
  68. <el-col :span="5">老年人信息(人)</el-col>
  69. <el-col :span="5">认证巡访员(人)</el-col>
  70. <el-col :span="4">累计巡访量(次)</el-col>
  71. <el-col :span="5">累计积分(分)</el-col>
  72. <el-col :span="5">今日探访(次)</el-col>
  73. </el-row>
  74. </div>
  75. <div class="topdatabox2">
  76. <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
  77. <el-col :span="5">
  78. <span>
  79. <span class="num">{{count1}}</span> <!--老年人信息(人)-->
  80. </span>
  81. </el-col>
  82. <el-col :span="5">
  83. <span>
  84. <span class="num">{{count2}}</span> <!--认证巡访员(人)-->
  85. </span>
  86. </el-col>
  87. <el-col :span="4">
  88. <span>
  89. <span class="num">{{count3}}</span> <!--累计巡访量(次)-->
  90. </span>
  91. </el-col>
  92. <el-col :span="5">
  93. <span>
  94. <span class="num">{{count4}}</span> <!--累计积分(分)-->
  95. </span>
  96. </el-col>
  97. <el-col :span="5">
  98. <span>
  99. <span class="num">{{count5}}</span> <!--今日探访(次)-->
  100. </span>
  101. </el-col>
  102. </el-row>
  103. </div>
  104. <!-- 地图组件 -->
  105. <div class="mapbox">
  106. <img src="../assets/index/dq.gif" class="aa"/>
  107. <img src="../assets/index/diqiu.png" class="bb"/>
  108. <jlMap :data1="mapDataArr" :data2="mapprodata"></jlMap>
  109. </div>
  110. </div>
  111. <div class="right">
  112. <!-- 右一 -->
  113. <div class="p4 bj">
  114. <div class="p4title bj">
  115. <router-link to="/home/Ranking">
  116. <p>当月探访数据排行榜</p>
  117. </router-link>
  118. <span :class="isTure ? 'kaung1': 'kaung2' " style="margin-left: 10px" @click="right1">个人探访数据</span>
  119. <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>
  120. </div>
  121. <div class="p4chart bj">
  122. <com4></com4>
  123. </div>
  124. </div>
  125. <!-- 右二 -->
  126. <div class="p5 bj">
  127. <div class="p5title bj">
  128. <p>运营分析</p>
  129. </div>
  130. <div class="p5chart">
  131. <com5 ref="c5"></com5>
  132. </div>
  133. </div>
  134. <!-- 右三 -->
  135. <div class="p6 bj">
  136. <div class="p6title bj">
  137. <p>实时信息</p>
  138. </div>
  139. <vueSeamlessScroll :data="listData" class="seamless-warp">
  140. <ul class="item" style="height:100%">
  141. <li v-for="(item, index) in listData" :key="index">
  142. <el-row
  143. style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff"
  144. type="flex"
  145. justify="center"
  146. align="middle"
  147. :class="{'sc0': index%2==0}"
  148. >
  149. <!-- <el-col :span="4" class="col4">-->
  150. <!-- <el-image class="img" :src="scrollTextisColor(index)"></el-image>-->
  151. <!-- </el-col>-->
  152. <el-col :span="4">{{item.date}}</el-col>
  153. <el-col :span="4">{{item.time}}</el-col>
  154. <!-- <el-col :span="4">
  155. <img src="../assets/index/block.png" alt />
  156. </el-col>-->
  157. <el-col :span="12">{{item.address}}</el-col>
  158. </el-row>
  159. </li>
  160. </ul>
  161. </vueSeamlessScroll>
  162. </div>
  163. </div>
  164. </div>
  165. </template>
  166. <script>
  167. import jlMap from "../components/index/jlMap.vue";
  168. import com1 from "../components/index/1.vue";
  169. import com2 from "../components/index/2.vue";
  170. import com3 from "../components/index/3.vue";
  171. import com4 from "../components/index/4.vue";
  172. import com5 from "../components/index/5.vue";
  173. import vueSeamlessScroll from "vue-seamless-scroll";
  174. import {
  175. selectUserByAuth,
  176. oldPersonSelectDeptValue,
  177. oldnum,
  178. visitnum
  179. } from "../api";
  180. export default {
  181. name: "Home",
  182. components: {com1, com2, com3, com4, com5, jlMap, vueSeamlessScroll},
  183. data() {
  184. return {
  185. count1: 0, //老年人信息(人)
  186. count2: 0, //认证巡访员(人)
  187. count3: 0, //累计巡访量(次)
  188. count4: 0, //累计积分(分)
  189. count5: 0, //今日探访(次)
  190. month: "",
  191. isTure: true,
  192. isleftbtnTure: true,
  193. isleftbtnTure1: true,
  194. isleftbtnTure2: true,
  195. isTure2: false,
  196. num: 0,
  197. zhuce: 0,
  198. maptopResult: {},
  199. // 右三实时对接数据
  200. listData: [
  201. {
  202. date:'06-09',
  203. time:'08:17',
  204. address:'长春市朝阳区老人张翠芳探访',
  205. },
  206. {
  207. date:'06-09',
  208. time:'08:17',
  209. address:'长春市朝阳区老人张翠芳探访',
  210. },
  211. {
  212. date:'06-09',
  213. time:'08:17',
  214. address:'长春市朝阳区老人张翠芳探访',
  215. },
  216. {
  217. date:'06-09',
  218. time:'08:17',
  219. address:'长春市朝阳区老人张翠芳探访',
  220. },
  221. {
  222. date:'06-09',
  223. time:'08:17',
  224. address:'长春市朝阳区老人张翠芳探访',
  225. },
  226. {
  227. date:'06-09',
  228. time:'08:17',
  229. address:'长春市朝阳区老人张翠芳探访',
  230. },
  231. {
  232. date:'06-09',
  233. time:'08:17',
  234. address:'长春市朝阳区老人张翠芳探访',
  235. }, {
  236. date:'06-09',
  237. time:'08:17',
  238. address:'长春市朝阳区老人张翠芳探访',
  239. },
  240. {
  241. date:'06-09',
  242. time:'08:17',
  243. address:'长春市朝阳区老人张翠芳探访',
  244. },
  245. {
  246. date:'06-09',
  247. time:'08:17',
  248. address:'长春市朝阳区老人张翠芳探访',
  249. }
  250. ],
  251. step: 20, // 数值越大速度滚动越快
  252. limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
  253. hoverStop: true, // 是否开启鼠标悬停stop
  254. direction: 0, // 0向下 1向上 2向左 3向右
  255. openWatch: true, // 开启数据实时监控刷新dom
  256. singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  257. singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  258. waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
  259. mapdata: [],
  260. mapdata1: [],
  261. mapprodata: [],
  262. data4: [],
  263. mapDataArr: [],
  264. mapDide: {
  265. //长春
  266. cc: [
  267. [125.35, 43.88],
  268. [125.35, 44.58],
  269. [126.35, 44.88],
  270. [125.85, 44.11],
  271. [125.85, 44.55]
  272. ],
  273. //四平
  274. sp: [
  275. [124.8, 43.47],
  276. [123.8, 43.77],
  277. [124.5, 43.87],
  278. [124.3, 43.47],
  279. [124.88, 43.77]
  280. ],
  281. // 辽源市
  282. ly: [
  283. [125.13, 42.88],
  284. [125.38, 42.9],
  285. [125.5, 43],
  286. [125.5, 42.6],
  287. [125.2, 42.6]
  288. ],
  289. // 吉林市
  290. jl: [
  291. [126.55, 43.83],
  292. [126.88, 43.99],
  293. [126.11, 43.11],
  294. [126.66, 43.33],
  295. [126.99, 43.66]
  296. ],
  297. //松原市
  298. sy: [
  299. [124.82, 45.11],
  300. [125.82, 45.11],
  301. [123.82, 44.66],
  302. [124.11, 44.33],
  303. [124.11, 45.11]
  304. ],
  305. // 白城市
  306. bc: [
  307. [122.84, 45.61],
  308. [123.33, 45.61],
  309. [122.84, 45.11],
  310. [123.33, 45.11],
  311. [122.66, 44.55]
  312. ],
  313. // //白山市
  314. bs: [
  315. [126.997839, 41.992505],
  316. [126.447839, 41.992505],
  317. [126.997839, 42.662505],
  318. [127.667839, 41.662505],
  319. [127.667839, 41.992505]
  320. ],
  321. // 通化市
  322. th: [
  323. [125.93, 41.73],
  324. [125.93, 41.11],
  325. [125.93, 42.11],
  326. [125.93, 42.55],
  327. [125.66, 42.11]
  328. ],
  329. // 延边朝鲜族自治州
  330. yb: [
  331. [129.5, 42.88],
  332. [128.5, 42.88],
  333. [128.5, 42.22],
  334. [128.5, 43.44],
  335. [129.5, 43.44]
  336. ]
  337. }
  338. };
  339. },
  340. mounted() {
  341. this.timer = setInterval(() => {
  342. this.mapsec();
  343. }, 60000);
  344. this.timer = setInterval(() => {
  345. this.ssdj();
  346. }, 60000);
  347. // this.fiveNum();
  348. this.count1_method();
  349. this.count2_method();
  350. this.count3_method();
  351. this.count4_method();
  352. this.count5_method();
  353. },
  354. methods: {
  355. async count1_method() {
  356. const result = await oldnum({}, 'POST');
  357. this.count1 = result.oldnum;
  358. },
  359. async count2_method() {
  360. const result = await selectUserByAuth({}, 'POST');
  361. this.count2 = result[0].count;
  362. },
  363. async count3_method() {
  364. const result = await visitnum({}, 'POST');
  365. this.count3 = result.visitnum;
  366. },
  367. async count4_method() {
  368. const result = await oldPersonSelectDeptValue({}, 'POST');
  369. this.count4 = result.totalValue;
  370. },
  371. async count5_method() {
  372. },
  373. // 右边第一个 地区探访数据 按钮
  374. right1() {
  375. this.isTure = false;
  376. },
  377. // 右边第二个
  378. right2() {
  379. this.isTure = true;
  380. },
  381. // 认证数据 按钮切换
  382. left1() {
  383. this.isleftbtnTure = true;
  384. this.isleftbtnTure2 = true;
  385. this.isleftbtnTure1 = true;
  386. this.$refs.c2.draw1();
  387. },
  388. // 性别 按钮切换
  389. left2() {
  390. this.isleftbtnTure1 = false;
  391. this.isleftbtnTure2 = true;
  392. this.isleftbtnTure = false;
  393. this.$refs.c2.draw2();
  394. },
  395. // // 地图上5个统计
  396. // async fiveNum() {
  397. // const response = await fiveNum();
  398. // this.maptopResult = response;
  399. // this.circledata0 = Number(((this.maptopResult.ljfknum / this.maptopResult.sqjenum) * 100).toFixed(0));
  400. // },
  401. // async mapsec() {
  402. // const response = await mapsec();
  403. // // console.log(response);
  404. // let data = [];
  405. // for (let arr in response) {
  406. // response[arr].forEach((item, index) => {
  407. // data.push({
  408. // ...item,
  409. // value: this.mapDide[arr][index].concat(parseInt(item.intllmoney)),
  410. // name: item.company_name
  411. // });
  412. // });
  413. // }
  414. // this.mapDataArr = data;
  415. // // }
  416. // },
  417. scrollTextisColor: function (i) {
  418. let inde = i % 3;
  419. //console.log(inde)
  420. if (inde === 0) {
  421. return require("../assets/index/red.png")
  422. } else if (inde === 1) {
  423. return require("../assets/index/lv.png")
  424. } else if (inde === 2) {
  425. return require("../assets/index/huang.png")
  426. }
  427. },
  428. },
  429. computed: {
  430. }
  431. };
  432. </script>
  433. <style scoped lang="less" type="text/css">
  434. .backtitle {
  435. background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
  436. -webkit-background-clip: text;
  437. -webkit-text-fill-color: transparent;
  438. font-size: 32px;
  439. font-weight: 900;
  440. position: absolute;
  441. left: 40%;
  442. top: 1%;
  443. }
  444. .seamless-warp {
  445. width: 85%;
  446. margin-left: 5%;
  447. height: 80%;
  448. margin-top: 2%;
  449. overflow: hidden;
  450. }
  451. .home {
  452. height: 100%;
  453. position: fixed;
  454. width: 100%;
  455. background: url("../assets/index/bj.png");
  456. background-size: 100% 100%;
  457. display: flex;
  458. }
  459. .bj {
  460. width: 100%;
  461. }
  462. .left {
  463. width: 26%;
  464. height: 99%;
  465. position: relative;
  466. }
  467. .center {
  468. width: 48%;
  469. height: 99%;
  470. position: relative;
  471. }
  472. .right {
  473. width: 26%;
  474. height: 99%;
  475. position: relative;
  476. }
  477. .p1 {
  478. height: 36%;
  479. position: absolute;
  480. top: 0%;
  481. left: 0%;
  482. }
  483. .p2 {
  484. height: 30%;
  485. position: absolute;
  486. top: 36%;
  487. left: 0%;
  488. }
  489. .p3 {
  490. height: 32%;
  491. position: absolute;
  492. top: 66%;
  493. left: 0%;
  494. }
  495. .p4 {
  496. height: 29.7%;
  497. margin-top: 18%;
  498. padding-top: 17px;
  499. }
  500. .p5 {
  501. height: 29%;
  502. }
  503. .p6 {
  504. height: 26%;
  505. /*margin-top: 3%;*/
  506. padding-top: 10px
  507. }
  508. .p1title {
  509. height: 10%;
  510. color: #fff;
  511. position: absolute;
  512. top: 30%;
  513. left: 13%;
  514. font-size: 1.2em;
  515. }
  516. .p2title {
  517. height: 10%;
  518. position: absolute;
  519. left: 13%;
  520. top: 15%;
  521. font-size: 1.2em;
  522. color: #fff;
  523. width: 85%;
  524. /*height: 12%;*/
  525. /*color: #fff;*/
  526. /*position: relative;*/
  527. }
  528. .p3title {
  529. height: 16%;
  530. position: absolute;
  531. left: 13%;
  532. top: 13.5%;
  533. font-size: 1.2em;
  534. color: #fff;
  535. }
  536. .p1chart {
  537. height: 70%;
  538. position: absolute;
  539. top: 40%;
  540. left: 0%;
  541. }
  542. .p2chart {
  543. height: 80%;
  544. position: absolute;
  545. top: 35%;
  546. left: 0%;
  547. }
  548. .p1legend img {
  549. float: right;
  550. margin-right: 2%;
  551. }
  552. .p3chart {
  553. height: 80%;
  554. position: absolute;
  555. top: 30%;
  556. left: 0%;
  557. }
  558. .p4chart {
  559. height: 82%;
  560. }
  561. .p1legend {
  562. width: 95%;
  563. height: 10%;
  564. }
  565. .p2legend {
  566. width: 95%;
  567. height: 10%;
  568. }
  569. .p3legend {
  570. width: 95%;
  571. height: 10%;
  572. }
  573. .p4legend {
  574. width: 90%;
  575. height: 10%;
  576. }
  577. .p2legend img {
  578. float: right;
  579. margin-right: 2%;
  580. margin-top: 1%;
  581. }
  582. .p3legend img {
  583. float: right;
  584. margin-right: 2%;
  585. margin-top: 1%;
  586. }
  587. .p4legend img {
  588. float: right;
  589. margin-right: 2%;
  590. margin-top: 1%;
  591. }
  592. .p6title {
  593. height: 15%;
  594. position: relative;
  595. color: white;
  596. }
  597. .p6title p {
  598. position: absolute;
  599. bottom: 20%;
  600. left: 6%;
  601. font-size: 1.2em;
  602. }
  603. .p4title {
  604. height: 12%;
  605. color: #fff;
  606. position: relative;
  607. }
  608. .p5title {
  609. height: 18%;
  610. color: #fff;
  611. position: relative;
  612. font-size: 1.2em;
  613. }
  614. .p5title p {
  615. position: absolute;
  616. top: 20%;
  617. left: 6%;
  618. }
  619. .p4title p {
  620. position: absolute;
  621. bottom: 4%;
  622. left: 6%;
  623. font-size: 1.2em;
  624. }
  625. .p5chart {
  626. width: 100%;
  627. height: 84%;
  628. margin-left:4%;
  629. }
  630. .span1box {
  631. width: 85%;
  632. margin-left: 5%;
  633. height: 12%;
  634. border-bottom: 1px dashed #006273;
  635. }
  636. .progress .el-row {
  637. height: 25%;
  638. border-bottom: 1px dashed #006273;
  639. }
  640. .topdatabox {
  641. width: 100%;
  642. height: 5%;
  643. position: absolute;
  644. top: 13%;
  645. text-align: center;
  646. letter-spacing: 2px;
  647. color: white;
  648. }
  649. .topdatabox2 {
  650. width: 100%;
  651. height: 5%;
  652. position: absolute;
  653. top: 18%;
  654. text-align: center;
  655. color: #fff;
  656. font-size: 22px;
  657. }
  658. .num {
  659. font-size: 35px;
  660. font-family: AgencyFB;
  661. font-weight: normal;
  662. color: rgba(247, 255, 63, 1);
  663. }
  664. .dw {
  665. color: #ffc809;
  666. }
  667. .name {
  668. color: #fff;
  669. font-size: 25px;
  670. }
  671. .sc0 {
  672. background-color: #0d274c;
  673. }
  674. .span1 {
  675. float: right;
  676. color: #fff;
  677. font-size: 1em;
  678. /*font-size:13px;*/
  679. }
  680. .span2 {
  681. float: right;
  682. color: #fff;
  683. font-size: 1em;
  684. margin-right: 2%;
  685. }
  686. .p5box {
  687. width: 45%;
  688. height: 48%;
  689. margin-top: 2%;
  690. float: left;
  691. position: relative;
  692. top: -3%;
  693. }
  694. .aa {
  695. opacity: 0.1;
  696. width: 735px;
  697. height: 735px;
  698. position: absolute;
  699. top: 24%;
  700. left: 10%;
  701. }
  702. .bb {
  703. width: 735px;
  704. height: 735px;
  705. position: absolute;
  706. top: 24%;
  707. left: 10%;
  708. -webkit-animation: rotateImg 8s linear infinite;
  709. vertical-align: middle;
  710. }
  711. .bb {
  712. -webkit-animation: rotateImg 5s linear infinite;
  713. vertical-align: middle;
  714. }
  715. @keyframes rotateImg {
  716. 0% {
  717. transform: rotate(0deg);
  718. }
  719. 100% {
  720. transform: rotate(-360deg);
  721. }
  722. }
  723. @-webkit-keyframes rotateImg {
  724. 0% {
  725. -webkit-transform: rotate(0deg);
  726. }
  727. 100% {
  728. -webkit-transform: rotate(-360deg);
  729. }
  730. }
  731. .mapbox {
  732. width: 100%;
  733. height: 76%;
  734. margin-top: 25%;
  735. }
  736. .item {
  737. font-size: 16px;
  738. }
  739. .left-kaung {
  740. float: right;
  741. cursor: pointer;
  742. padding: 2px 5px;
  743. display: inline-block;
  744. background: url("../assets/index/leftkuang.png");
  745. font-size: 16px;
  746. }
  747. .left-selectkaung {
  748. float: right;
  749. cursor: pointer;
  750. padding: 2px 5px;
  751. display: inline-block;
  752. background: url("../assets/index/leftselectkuang.png");
  753. font-size: 16px;
  754. }
  755. .left-kaung2 {
  756. float: right;
  757. cursor: pointer;
  758. padding: 2px 5px;
  759. display: inline-block;
  760. background: url("../assets/index/leftkuang2.png");
  761. font-size: 16px;
  762. }
  763. .left-selectkaung2 {
  764. float: right;
  765. cursor: pointer;
  766. padding: 2px 5px;
  767. display: inline-block;
  768. font-size: 16px;
  769. background: url("../assets/index/leftselectkuang2.png");
  770. }
  771. .left-kaung3 {
  772. float: right;
  773. cursor: pointer;
  774. padding: 2px 5px;
  775. display: inline-block;
  776. background: url("../assets/index/leftkuang2.png");
  777. font-size: 16px;
  778. }
  779. .left-selectkaung3 {
  780. float: right;
  781. cursor: pointer;
  782. padding: 2px 5px;
  783. display: inline-block;
  784. font-size: 16px;
  785. background: url("../assets/index/leftselectkuang2.png");
  786. }
  787. .kaung1 {
  788. float: right;
  789. margin-top: 2%;
  790. cursor: pointer;
  791. padding: 2px 5px;
  792. display: inline-block;
  793. background: url("../assets/index/biankuang2.png");
  794. }
  795. .kaung2 {
  796. float: right;
  797. margin-top: 2%;
  798. background: url("../assets/index/biankuang1.png");
  799. padding: 2px 5px;
  800. display: inline-block;
  801. cursor: pointer;
  802. }
  803. </style>