main.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
  1. <template>
  2. <div class="main-data data-engineering">
  3. <div class="left">
  4. <div class="left-cont" v-if="leftShow">
  5. <div class="left-top"
  6. @click="showDialog(1)"
  7. @mouseover="showDialog(1)">
  8. <div class="cont-title-area">
  9. <img
  10. class="cont-title-bg"
  11. src="@/assets/images/main/cont_title_bg.png"
  12. alt=""
  13. />
  14. <div class="cont-title">生产辅助基建项目情况</div>
  15. </div>
  16. <div class="components-item bg2">
  17. <unit-access :parest = "parest"
  18. :num = "num"
  19. :key="appOrg"></unit-access>
  20. </div>
  21. <!-- <monitoring v-if="menu === 1"></monitoring>
  22. <monitoring-video v-if="menu === 2"></monitoring-video> -->
  23. </div>
  24. <div class="left-top">
  25. <div class="cont-title-area">
  26. <img
  27. class="cont-title-bg"
  28. src="@/assets/images/main/cont_title_bg.png"
  29. alt=""
  30. />
  31. <div class="cont-title">现场监控接入情况</div>
  32. </div>
  33. <div class="components-item">
  34. <unit-access-to @chooseUnit="onChooseUnit" :app-org="appOrg" :key="appOrg"></unit-access-to>
  35. </div>
  36. <!-- <monitoring v-if="menu === 1"></monitoring>
  37. <monitoring-video v-if="menu === 2"></monitoring-video> -->
  38. </div>
  39. </div>
  40. </div>
  41. <div class="middle flex-column">
  42. <!-- <div class="menu-area flex-row align-items-center space-between">
  43. <div v-for="(item, index) in dataList" :key="index" class="rate-area">
  44. <img src="@/assets/images/main/rate_bg.png" class="icon" alt="" />
  45. <div class="rate">
  46. <div class="rate-data">
  47. <div class="data">{{ item.num }}</div>
  48. <div class="unit">{{ item.unit }}</div>
  49. </div>
  50. </div>
  51. <div class="desc">{{ item.name }}</div>
  52. </div>
  53. </div> -->
  54. <!-- <province
  55. v-if="showMap"
  56. ref="province"
  57. height="850px"
  58. @mapClick="onMapClick"
  59. ></province>-->
  60. <Map @transmit="transmit" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>
  61. <div
  62. v-if="showLocal"
  63. class="img-area flex-row align-items-center flex-center"
  64. >
  65. <img class="build" src="@/assets/images/build.png" alt="" />
  66. </div>
  67. <!-- 返回按钮 -->
  68. <!-- <div class="bottom-area flex-row align-items-center space-between">
  69. <div class="bottom-left flex-row align-items-center">
  70. <div class="left-item">
  71. <el-cascader
  72. v-model="curCompany"
  73. :options="company"
  74. @change="handleCompanyChange"
  75. placeholder="单位"
  76. :show-all-levels="false"
  77. >
  78. <template slot-scope="{ node, data }">
  79. <div style="display: flex; align-items: center">
  80. <img
  81. v-if="data.label == '山西省公司(本部)'"
  82. src="../../../assets/images/main/tiaozhuanlouyu.png"
  83. style="width: 15px; margin-right: 10px"
  84. />
  85. <span
  86. v-else-if="data.value == '1A001' || data.value == '1A002' || data.value == '1A004' || data.value == '1A005'"
  87. style="
  88. display: inline-block;
  89. width: 10px;
  90. height: 10px;
  91. border-radius: 50%;
  92. margin-right: 10px;
  93. background: rgb(255, 180, 74);
  94. "
  95. ></span>
  96. <span
  97. v-else-if="data.value.length == 5 && data.value != '10001'"
  98. style="
  99. display: inline-block;
  100. width: 10px;
  101. height: 10px;
  102. border-radius: 50%;
  103. margin-right: 10px;
  104. background: rgb(74, 194, 29);
  105. "
  106. ></span>
  107. <span
  108. v-else-if="data.value.length == 7"
  109. style="
  110. display: inline-block;
  111. width: 10px;
  112. height: 10px;
  113. border-radius: 50%;
  114. margin-right: 10px;
  115. background: rgb(99, 235, 255);
  116. "
  117. ></span>
  118. <span>{{ data.label }}</span>
  119. </div>
  120. &lt;!&ndash; <div
  121. v-if="data.level == 2"
  122. style="width: 1.5vh;height: 1.5vh;background-color: red;border-radius: 60%;margin-top:10px;margin-left:10px;float:right"
  123. ></div> &ndash;&gt;
  124. </template>
  125. </el-cascader>
  126. </div>
  127. <div class="office" disabled>办公区</div>
  128. </div>
  129. <div class="bottom-right">
  130. <img
  131. v-if="showBack"
  132. @click="onBack"
  133. src="@/assets/images/main/back.png"
  134. class="back"
  135. />
  136. </div>
  137. </div>-->
  138. </div>
  139. <div class="right">
  140. <div class="right-cont">
  141. <div class="right-top">
  142. <div class="cont-title-area">
  143. <img
  144. class="cont-title-bg"
  145. src="@/assets/images/main/cont_title_bg.png"
  146. alt=""
  147. />
  148. <div class="cont-title">现场远程检查情况</div>
  149. </div>
  150. <div class="components-item">
  151. <current-area @chooseMonitor="onChooseMonitor" @choose="onChooseIssueList"
  152. :monitorName="monitorName"
  153. :app-org="appOrg"
  154. :key="appOrg"></current-area>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <!-- 监控区域 -->
  160. <div v-if="showCenter" class="dialog-2">
  161. <div class="dialog-center">
  162. <monitor-live
  163. v-if="showType === 1"
  164. @closeMonitor="onCloseMonitor"
  165. @chooseAllMonitor="onChooseAllMonitor"
  166. @issue="onChooseIssue"
  167. :monitorInfo="this.monitorInfo"
  168. ></monitor-live>
  169. <monitor-live-list
  170. v-if="showType === 2"
  171. @closeMonitor="onCloseMonitor1"
  172. @chooseMonitor="onChooseMonitor"
  173. :monitorInfo="this.monitorInfo"
  174. :monitorName="monitorName"
  175. :curCompanMonth="curCompanMonth"
  176. ></monitor-live-list>
  177. </div>
  178. </div>
  179. <!-- 监控区域 -->
  180. <div v-if="showC" class="dialog-2">
  181. <div class="dialog-center">
  182. <unit-project-dia
  183. v-if="showProject === 1"
  184. @close="onCloseProject()"
  185. :curCompanyear="curCompanyear"
  186. @choose="onChooseProject"
  187. ></unit-project-dia>
  188. <project-camera-dia
  189. v-if="showCamera === 1"
  190. @close="onCloseCamera"
  191. @choose="onChooseCamera"
  192. ></project-camera-dia>
  193. <camera-screen
  194. v-if="showCameraScreen === 1"
  195. @leave="onCloseCameraScreen"
  196. >
  197. </camera-screen>
  198. <issue-list-dia
  199. v-if="showIssue === 1"
  200. @close="onCloseIssue"
  201. @subIssue="onSubIssue"
  202. @dealIssue="onDealIssue"
  203. :monitorInfo="this.monitorInfo">
  204. </issue-list-dia>
  205. <issue-sub-dia
  206. v-if="showIssueSub === 1"
  207. @close="onCloseIssueSub"
  208. :monitorInfo="this.monitorInfo"
  209. :imgUrl="this.imgUrl">
  210. </issue-sub-dia>
  211. <issue-deal-dia
  212. v-if="showIssueDeal === 1"
  213. :getProList="getProList"
  214. @close="onCloseIssueDeal"
  215. :monitorInfo="this.monitorInfo">
  216. </issue-deal-dia>
  217. </div>
  218. </div>
  219. <!-- 弹出层-->
  220. <div
  221. :class="dialogType < 3 ? 'dialog' : 'dialog-r'"
  222. v-if="dialogShow"
  223. @click="closeDialog"
  224. >
  225. <unit-access-dialog
  226. v-if="dialogType === 1"
  227. :parest = "parest"
  228. :num = "num"
  229. :parest1 = "parest1"
  230. @choose="chooseRes"
  231. @chooseH="chooseHealth"
  232. @closeDialog="closeDialog"
  233. ></unit-access-dialog>
  234. </div>
  235. </div>
  236. </template>
  237. <script>
  238. import IssueSubDia from './issueSubDia.vue'
  239. import IssueDealDia from './issueDealDia.vue'
  240. import CameraScreen from './cameraScreen.vue'
  241. import IssueListDia from "./issueListDia.vue"
  242. import ProjectCameraDia from "./projectCameraDia.vue";
  243. import UnitProjectDia from "./unitProjectDia.vue";
  244. import Province from "../map/province.vue";
  245. import Map from "../map/map.vue";
  246. import UnitAccess from "./unitAccess.vue";
  247. import UnitAccessTo from "./unitAccessto.vue";
  248. import CameraOnline from "./cameraOnline.vue";
  249. import CurrentArea from "./currentArea.vue";
  250. import Monitoring from "./monitoring.vue";
  251. import VideoList from "./videoList.vue";
  252. import MonitoringStatus from "./monitoringStatus.vue";
  253. import MonitoringVideo from "./monitoringVideo.vue";
  254. import MonitorLive from "./monitorLive.vue";
  255. import MonitorLiveList from "./monitorLiveList.vue";
  256. import company from "../data/company.json";
  257. import TerminalDataDialog from "@/views/pad/official/terminalDataDialog.vue";
  258. import CarWarningDialog from "@/views/pad/official/carWarningDialog.vue";
  259. import CarStockDialog from "@/views/pad/logistics/car/carStockDialog.vue";
  260. import unitAccessDialog from "@/views/pad/engineering/unitAccessDialog.vue";
  261. import CarCost from "@/views/pad/official/carCost.vue";
  262. import ResourceList from "@/views/pad/official/resourceList.vue";
  263. import CarHealth from "@/views/pad/official/carHealth.vue";
  264. import {
  265. getProjectNum,
  266. getProjectNumThisWeek,
  267. getProjectNumX,
  268. getProjectNumY,
  269. getProjectNumZ
  270. } from '@/api/screen/service'
  271. export default {
  272. name: "EngineeringMain",
  273. components: {
  274. CarHealth, ResourceList, CarCost,
  275. CarStockDialog, CarWarningDialog, TerminalDataDialog,
  276. IssueSubDia,
  277. IssueDealDia,
  278. CameraScreen,
  279. IssueListDia,
  280. ProjectCameraDia,
  281. UnitProjectDia,
  282. Province,
  283. Map,
  284. UnitAccess,
  285. UnitAccessTo,
  286. CameraOnline,
  287. CurrentArea,
  288. Monitoring,
  289. VideoList,
  290. MonitoringStatus,
  291. MonitoringVideo,
  292. MonitorLive,
  293. MonitorLiveList,
  294. unitAccessDialog,
  295. },
  296. props: {},
  297. data() {
  298. return {
  299. getProList:null,
  300. appOrg: "10001",
  301. num: 0,
  302. parest:[
  303. {name:"可研评审",num:0},{name:"初设评审",num:0},
  304. {name:"政府立项备案",num:0},{name:"土地手续",num:0},
  305. {name:"用地规划",num:0},{name:"工程规划",num:0},
  306. {name:"设计招标",num:0},{name:"施工招标",num:0},
  307. {name:"监理招标",num:0},{name:"施工许可",num:0},
  308. ],
  309. parest1:[
  310. {name:"基础施工",num:0},{name:"主体工程",num:0},
  311. {name:"室内外装修",num:0},{name:"室外工程",num:0},
  312. ],
  313. mapArr:[
  314. "1A003",
  315. "1B001",
  316. "1C001",
  317. "1D001",
  318. "1E001",
  319. "1F001",
  320. "1K001",
  321. "1L001",
  322. "1H001",
  323. "1M001",
  324. "1J001",
  325. ],
  326. list1: [],
  327. list2: [],
  328. imgUrl:'',
  329. curCompanyear:'',
  330. curCompanMonth:'',
  331. showRes:0,
  332. showC:false,
  333. showIssue:0,
  334. showIssueSub:0,
  335. showIssueDeal:0,
  336. showCameraScreen:0,
  337. showCamera:0,
  338. showProject:0,
  339. menu: 0,
  340. showCost:0,
  341. showHealth:0,
  342. leftShow: true,
  343. rightShow: true,
  344. dialogShow: false,
  345. dialogType: 0,
  346. showCenter: false,
  347. showType: 0, //实时监控
  348. curDeep: 1,
  349. showBack: false,
  350. showMap: true,
  351. showLocal: false,
  352. dataList: [
  353. {
  354. name: "接入单位数量",
  355. num: "56",
  356. unit: "个",
  357. },
  358. {
  359. name: "应接入项目数量",
  360. num: "56",
  361. unit: "个",
  362. },
  363. {
  364. name: "已接入项目数量",
  365. num: "56",
  366. unit: "个",
  367. },
  368. {
  369. name: "接入摄像头数量",
  370. num: "56",
  371. unit: "个",
  372. },
  373. {
  374. name: "接入摄像头在线率",
  375. num: "56",
  376. unit: "%",
  377. },
  378. ],
  379. monitorInfo: {},
  380. monitorName: '',
  381. curCompany: [],
  382. company: company,
  383. };
  384. },
  385. created() {
  386. this.$nextTick(() => {
  387. this.getProjectNum();
  388. this.getProjectNumX();
  389. this.getProjectNumZ();
  390. });
  391. },
  392. destroyed() {},
  393. beforeDestroy() {},
  394. mounted() {},
  395. methods: {
  396. transmit(appOrg){
  397. this.appOrg = appOrg
  398. this.getProjectNum();
  399. this.getProjectNumX();
  400. },
  401. //前期审批数量
  402. getProjectNum() {
  403. getProjectNum(this.appOrg).then((res) => {
  404. if (Number(res.code) === 200) {
  405. this.num = res.data;
  406. }
  407. });
  408. },
  409. getProjectNumX() {
  410. getProjectNumX(this.appOrg).then((res) => {
  411. if (Number(res.code) === 200) {
  412. const fetchedData = res.data;
  413. if (res.data.length > 0) {
  414. for (let i = 0; i < fetchedData.length; i++) {
  415. this.parest[fetchedData[i].subdivision - 1].num = fetchedData[i].num;
  416. }
  417. }
  418. else {
  419. for (let i = 0; i < this.parest1.length; i++){
  420. this.parest[i].num = 0
  421. }
  422. }
  423. }
  424. });
  425. },
  426. getProjectNumY() {
  427. getProjectNumY(this.appOrg).then((res) => {
  428. if (Number(res.code) === 200) {
  429. const fetchedData = res.data;
  430. if (res.data.length > 0){
  431. for (let i = 0; i < fetchedData.length; i++) {
  432. this.parest1[fetchedData[i].subdivision-11].num= fetchedData[i].num;
  433. }
  434. }
  435. else {
  436. for (let i = 0; i < this.parest1.length; i++){
  437. this.parest1[i].num = 0
  438. }
  439. }
  440. }
  441. });
  442. },
  443. getProjectNumZ() {
  444. getProjectNumZ(this.mapArr).then((res) => {
  445. if (Number(res.code) === 200) {
  446. this.list1 = res.data.list1
  447. this.list2 = res.data.list2
  448. this.$refs.map.start();
  449. }
  450. });
  451. },
  452. chooseRes(){
  453. this.closeDialog()
  454. this.showC = true
  455. this.showRes = 1
  456. },
  457. chooseHealth(){
  458. this.closeDialog()
  459. this.showC = true
  460. this.showHealth = 1
  461. },
  462. onChooseUnit(f){
  463. this.curCompanyear = f;
  464. this.showC = true;
  465. this.showProject = 1;
  466. },
  467. onCloseRes(){
  468. this.showC = false
  469. this.showRes = 0
  470. },
  471. onCloseCost(){
  472. this.showC = false
  473. this.showCost = 0
  474. },
  475. onCloseHealth(){
  476. this.showC = false
  477. this.showHealth = 0
  478. },
  479. onChooseProject(e){
  480. this.curCompanMonth = e;
  481. this.showC = false
  482. this.showCenter = true;
  483. this.showType = 2;
  484. },
  485. onCloseProject(){
  486. this.showC = false;
  487. this.showProject = 0;
  488. },
  489. onChooseCamera(){
  490. this.showCameraScreen = 1;
  491. this.showCamera = 0;
  492. },
  493. onCloseCamera(){
  494. this.showProject = 1;
  495. this.showCamera = 0;
  496. },
  497. onCloseCameraScreen(){
  498. this.showCameraScreen = 0;
  499. this.showCamera = 1;
  500. },
  501. //入口
  502. onChooseIssue(t){
  503. this.imgUrl=t
  504. this.flag = 1
  505. this.showType = 0;
  506. this.showC = true;
  507. this.showProject=0
  508. this.showIssueSub = 1;
  509. },
  510. onChooseIssueList(){
  511. this.showC = true
  512. this.showIssue = 1
  513. },
  514. onCloseIssue(){
  515. this.showC = false
  516. this.showIssue = 0
  517. },
  518. //入口
  519. onSubIssue(){
  520. this.flag = 2
  521. this.showIssueSub = 1
  522. this.showIssue = 0
  523. },
  524. onDealIssue(u){
  525. this.getProList=u
  526. this.showIssueDeal = 1
  527. this.showIssue = 0
  528. },
  529. onCloseIssueSub(){
  530. this.showIssueSub = 0
  531. if (this.flag === 1){
  532. this.showC = false
  533. this.showCenter = false
  534. // this.showIssueSub=0
  535. }
  536. else if (this.flag === 2){
  537. this.showIssue = 1
  538. }
  539. else {
  540. }
  541. this.flag = 0
  542. },
  543. onCloseIssueDeal() {
  544. this.showIssueDeal = 0
  545. this.showIssue = 1
  546. },
  547. showDialog(type) {
  548. if (type === 1) {
  549. this.getProjectNumY();
  550. this.leftShow = false;
  551. this.rightShow = true;
  552. } else {
  553. this.rightShow = false;
  554. this.leftShow = true;
  555. }
  556. this.dialogShow = true;
  557. this.dialogType = type;
  558. },
  559. closeDialog() {
  560. this.leftShow = true;
  561. this.rightShow = true;
  562. this.dialogShow = false;
  563. },
  564. //关闭监控视频
  565. onCloseMonitor() {
  566. this.showCenter = false;
  567. this.showType = 0;
  568. },
  569. //关闭监控视频
  570. onCloseMonitor1() {
  571. this.showCenter = false;
  572. this.showC = true;
  573. this.showType = 0;
  574. },
  575. //显示列表
  576. onChooseAllMonitor() {
  577. this.showType = 2;
  578. },
  579. //选择视频列表
  580. onChooseMonitor(data) {
  581. this.showCenter = true;
  582. this.showType = 1;
  583. this.monitorInfo = data;
  584. },
  585. //点击地图事件
  586. onMapClick(e) {
  587. this.curDeep = e.deep;
  588. if (e.deep > 1) {
  589. this.showBack = true;
  590. } else {
  591. this.showBack = false;
  592. }
  593. //点击山西省本部
  594. if (e.name == "山西省公司(本部)") {
  595. this.showMap = false;
  596. this.showLocal = true;
  597. this.curCompany = ["10001", "10001"];
  598. this.appOrg = "10001";
  599. } else {
  600. this.showMap = true;
  601. this.showLocal = false;
  602. this.curCompany = e.curCompany;
  603. }
  604. //判断是否点击了子单位
  605. if (e.curCompany && e.curCompany.length > 0) {
  606. let appOrg = e.curCompany[e.curCompany.length - 1];
  607. this.appOrg = appOrg;
  608. }
  609. },
  610. //返回操作
  611. // onBack() {
  612. // this.curDeep = 1;
  613. // if (this.curDeep <= 1) {
  614. // this.showBack = false;
  615. // this.showMap = true;
  616. // this.showLocal = false;
  617. // this.curCompany = [];
  618. // }
  619. // this.appOrg = "0000";
  620. // this.$refs.province.reloadMap(this.curDeep);
  621. // },
  622. //选择公司
  623. // handleCompanyChange(e) {
  624. // console.log(e);
  625. // if (e && e.length > 0) {
  626. // if (e[1] == "10001") {
  627. // this.showMap = false;
  628. // this.showLocal = true;
  629. // this.showBack = true;
  630. // } else {
  631. // this.showMap = true;
  632. // this.showLocal = false;
  633. // }
  634. // let appOrg = e[e.length - 1];
  635. // this.appOrg = appOrg;
  636. // }
  637. // if(e[1] == "1A001" || e[1] == "1A002" || e[1] == "1A004" || e[1] == "1A005"){
  638. // this.showMap = true;
  639. // this.showLocal = false;
  640. // this.showBack = true;
  641. // // return;
  642. // }
  643. // this.$refs.province.chooseUnit(e);
  644. // },
  645. },
  646. };
  647. </script>
  648. <style lang="scss">
  649. .data-engineering {
  650. width: 100%;
  651. height: 100%;
  652. margin: 0 auto;
  653. // background-image: url("../../../assets/images/engineering/bg.jpg");
  654. // background-size: cover;
  655. display: flex;
  656. flex-direction: row;
  657. justify-content: space-between;
  658. .left {
  659. margin: 125px 0 0 40px;
  660. width: 580px;
  661. .left-cont {
  662. width: 100%;
  663. height: 1000px;
  664. padding-top: 19px;
  665. background: url("../../../assets/images/main/main_bg.png") no-repeat;
  666. background-size: 100% 100%;
  667. }
  668. .components-item {
  669. width: 550px;
  670. height: 420px;
  671. background: url("../../../assets/images/main/components_mid_bg.png")
  672. no-repeat;
  673. background-size: 100% 100%;
  674. margin-bottom: 28px;
  675. margin-left: 15px;
  676. overflow: hidden;
  677. }
  678. .left-top {
  679. // width: 550px;
  680. // height: 915px;
  681. // background: url("../../../assets/images/main/right_top_new.png") no-repeat;
  682. // background-size: cover;
  683. // margin-bottom: 21px;
  684. }
  685. }
  686. .middle {
  687. //background: url('../../../assets/zhang/project_map.png') no-repeat center;
  688. display: flex;
  689. flex: 1;
  690. align-items: center;
  691. justify-content: center;
  692. padding: 125px 0 0 0px;
  693. position: relative;
  694. .bottom-area {
  695. position: absolute;
  696. right: 50px;
  697. left: 50px;
  698. bottom: 50px;
  699. .bottom-left {
  700. .left-item {
  701. width: 180px;
  702. height: 30px;
  703. background: url("../../../assets/images/main/choose_bg_long.png")
  704. no-repeat;
  705. background-size: cover;
  706. input {
  707. background: rgba(255, 255, 255, 0);
  708. border: none;
  709. color: #00ffff;
  710. }
  711. .el-input__icon {
  712. color: #00ffff;
  713. }
  714. }
  715. .office {
  716. margin-left: 10px;
  717. width: 180px;
  718. height: 30px;
  719. line-height: 30px;
  720. padding-left: 15px;
  721. color: #898989;
  722. background: url("../../../assets/images/main/choose_bg_long.png")
  723. no-repeat;
  724. background-size: cover;
  725. font-size: 14px;
  726. }
  727. }
  728. .bottom-right {
  729. .back {
  730. width: 34px;
  731. height: 30px;
  732. cursor: pointer;
  733. }
  734. }
  735. }
  736. .menu-area {
  737. padding: 0 30px;
  738. .rate-area {
  739. width: 20%;
  740. position: relative;
  741. cursor: pointer;
  742. img {
  743. width: 100%;
  744. }
  745. .rate {
  746. display: flex;
  747. flex-direction: column;
  748. align-items: center;
  749. justify-content: center;
  750. width: 100%;
  751. position: absolute;
  752. top: 5px;
  753. left: 0;
  754. color: #fff;
  755. .rate-data {
  756. display: flex;
  757. flex-direction: row;
  758. align-items: baseline;
  759. color: #00ffff;
  760. .data {
  761. font-size: 30px;
  762. font-family: "electronicFont";
  763. }
  764. .unit {
  765. font-size: 12px;
  766. }
  767. }
  768. }
  769. .desc {
  770. font-size: 12px;
  771. text-align: center;
  772. color: #00ffff;
  773. }
  774. }
  775. }
  776. }
  777. .right {
  778. margin: 125px 40px 0 0px;
  779. width: 580px;
  780. .right-cont {
  781. width: 100%;
  782. height: 1000px;
  783. padding-top: 19px;
  784. background: url("../../../assets/images/main/main_bg.png") no-repeat;
  785. background-size: 100% 100%;
  786. }
  787. .components-item {
  788. width: 550px;
  789. height: 920px;
  790. background: url("../../../assets/images/main/components_long_bg.png")
  791. no-repeat;
  792. background-size: 100% 100%;
  793. margin-left: 15px;
  794. overflow: hidden;
  795. }
  796. .right-top {
  797. // width: 553px;
  798. // height: 915px;
  799. // background: url("../../../assets/images/main/right_top_new.png") no-repeat;
  800. // background-size: cover;
  801. // margin-bottom: 21px;
  802. }
  803. .right-bottom {
  804. // width: 553px;
  805. // height: 556px;
  806. // background: url("../../../assets/images/main/right_top_m.png") no-repeat;
  807. // background-size: cover;
  808. // margin-bottom: 21px;
  809. }
  810. }
  811. .dialog {
  812. position: fixed;
  813. top: 125px;
  814. left: 40px;
  815. z-index: 10;
  816. width: 100%;
  817. }
  818. .dialog-r {
  819. position: fixed;
  820. top: 125px;
  821. right: 40px;
  822. z-index: 10;
  823. width: 100%;
  824. display: flex;
  825. justify-content: flex-end;
  826. }
  827. .dialog-2 {
  828. position: fixed;
  829. left: 0;
  830. top: 0;
  831. right: 0;
  832. bottom: 0;
  833. z-index: 9999;
  834. display: flex;
  835. flex-direction: row;
  836. align-items: center;
  837. justify-content: center;
  838. background: rgba(0, 0, 0, 0.7);
  839. }
  840. .img-area {
  841. height: 850px;
  842. .build {
  843. margin: 0 auto;
  844. width: 90%;
  845. height: auto;
  846. object-fit: contain;
  847. }
  848. }
  849. .cont-title-area {
  850. display: flex;
  851. flex-direction: row;
  852. align-items: center;
  853. justify-content: center;
  854. position: relative;
  855. margin-bottom: 10px;
  856. img {
  857. width: 331px;
  858. height: 32px;
  859. }
  860. .cont-title {
  861. font-size: 20px;
  862. font-weight: 900;
  863. font-family: "PingFangSC";
  864. width: 100%;
  865. position: absolute;
  866. display: flex;
  867. align-items: center;
  868. justify-content: center;
  869. top: -5px;
  870. color: #fff;
  871. }
  872. }
  873. ::-webkit-scrollbar {
  874. width: 3px;
  875. height: 3px;
  876. }
  877. ::-webkit-scrollbar-thumb {
  878. //滑块部分
  879. // border-radius: 5px;
  880. background-color: #58cbbb;
  881. }
  882. ::-webkit-scrollbar-track {
  883. //轨道部分
  884. // box-shadow: inset 0 0 5px #ddd;
  885. background: #ddd;
  886. // border-radius: 5px;
  887. }
  888. }
  889. </style>