pt.vue 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636
  1. <template>
  2. <div class="header">
  3. <!-- 大盒子 -->
  4. <div class="box">
  5. <!-- 头部区域 -->
  6. <div class="tou">
  7. <div class="yong_hu">
  8. <!-- <span style="color: ">单位 :</span> -->
  9. <span class="span" style="padding-left: 4px">{{ danWie }}</span>
  10. <span style="color: #00f6ff">用户名 :</span>
  11. <span style="padding-left: 4px; color: #00f6ff">{{ yongHu }}</span>
  12. </div>
  13. <span style="color: #00f6ff; font-size: 1vw" class="tiem">{{
  14. times
  15. }}</span>
  16. <!-- <img class="liuxian" src="../assets/images/流线.gif" alt />
  17. <img class="img-left" src="../assets/images/闪烁GIF-慢.gif" alt /> -->
  18. </div>
  19. <!-- 主体区域 -->
  20. <div class="centen">
  21. <!-- 左面盒子 -->
  22. <div class="boxx">
  23. <ul class="ul">
  24. <li>
  25. <div class="demo-box">
  26. <div class="demo active" v-on:click="doThis">
  27. <img src="../images/dj.png" alt />
  28. </div>
  29. </div>
  30. <div class="demo-a">
  31. <a href="#" class="a">基 层 登 记</a>
  32. </div>
  33. </li>
  34. <li>
  35. <div class="demo-box">
  36. <div
  37. class="demo active"
  38. id="a1"
  39. v-on:click="wenyinfun"
  40. data-url="/diary?ref=addtabs"
  41. >
  42. <img src="../images/dy.png" alt />
  43. </div>
  44. </div>
  45. <div class="demo-a">
  46. <a href="#" class="a">集 中 文 印</a>
  47. </div>
  48. </li>
  49. <li>
  50. <div class="demo-box">
  51. <div
  52. class="demo active"
  53. v-on:click="gongzuofun"
  54. data-url="/diary?ref=addtabs"
  55. >
  56. <img src="../images/gz.png" alt />
  57. </div>
  58. </div>
  59. <div class="demo-a">
  60. <a href="#" class="a">工 作 安 排</a>
  61. </div>
  62. </li>
  63. <li>
  64. <div class="demo-box">
  65. <div
  66. class="demo active"
  67. v-on:click="guizhangfun"
  68. data-url="/diary?ref=addtabs"
  69. >
  70. <img src="../images/zd.png" alt />
  71. </div>
  72. </div>
  73. <div class="demo-a">
  74. <a href="#" class="a">规 章 制 度</a>
  75. </div>
  76. </li>
  77. <li>
  78. <div class="demo-box">
  79. <div
  80. class="demo active"
  81. v-on:click="taishifun"
  82. data-url="/diary?ref=addtabs"
  83. >
  84. <img src="../images/fx.png" alt />
  85. </div>
  86. </div>
  87. <div class="demo-a">
  88. <a href="#" class="a">态 势 分 析</a>
  89. </div>
  90. </li>
  91. <li>
  92. <div class="demo-box">
  93. <div
  94. id="q1"
  95. class="demo active"
  96. v-on:click="tongzhifun"
  97. data-url="/diary?ref=addtabs"
  98. >
  99. <img src="../assets/images/通知公告1.png" alt />
  100. </div>
  101. </div>
  102. <div class="demo-a">
  103. <a href="#" class="a">通 知 公 告</a>
  104. </div>
  105. </li>
  106. <img src="../assets/images/椭圆 513 (2).png" class="li-img" alt />
  107. </ul>
  108. <hr />
  109. <ul class="ul">
  110. <li>
  111. <div class="demo-box">
  112. <div
  113. class="demo active"
  114. v-on:click="zhanbeifun"
  115. data-url="/diary?ref=addtabs"
  116. >
  117. <img src="../images/zb.png" alt />
  118. </div>
  119. </div>
  120. <div class="demo-a">
  121. <a href="#" class="a">战备值班</a>
  122. </div>
  123. </li>
  124. <li>
  125. <div class="demo-box">
  126. <div
  127. class="demo active"
  128. v-on:click="jianchafun"
  129. data-url="/diary?ref=addtabs"
  130. >
  131. <img src="../images/jc.png" alt />
  132. </div>
  133. </div>
  134. <div class="demo-a">
  135. <a href="#" class="a">检查督导</a>
  136. </div>
  137. </li>
  138. <li>
  139. <div class="demo-box">
  140. <div
  141. class="demo active"
  142. v-on:click="renyuanfun"
  143. data-url="/diary?ref=addtabs"
  144. >
  145. <img src="../images/ry.png" alt />
  146. </div>
  147. </div>
  148. <div class="demo-a">
  149. <a href="#" class="a">人员进出</a>
  150. </div>
  151. </li>
  152. <li>
  153. <div class="demo-box">
  154. <div class="demo active" v-on:click="anfangfun" data-url="/diary?ref=addtabs">
  155. <img src="../images/af.png" alt />
  156. </div>
  157. </div>
  158. <div class="demo-a">
  159. <a href="#" class="a">安防监控</a>
  160. </div>
  161. </li>
  162. <li>
  163. <div class="demo-box">
  164. <div
  165. class="demo active"
  166. v-on:click="mengangfun"
  167. data-url="/diary?ref=addtabs"
  168. >
  169. <img src="../images/ag.png" alt />
  170. </div>
  171. </div>
  172. <div class="demo-a">
  173. <a href="#" class="a">门岗管理</a>
  174. </div>
  175. </li>
  176. <li>
  177. <div class="demo-box">
  178. <div class="demo active" id="a2" data-url="/diary?ref=addtabs">
  179. <img src="../images/mj.png" alt />
  180. </div>
  181. </div>
  182. <div class="demo-a">
  183. <a href="#" class="a">门禁管理</a>
  184. </div>
  185. </li>
  186. <img src="../assets/images/椭圆 513 (2).png" class="li-img" alt />
  187. </ul>
  188. <hr />
  189. <ul class="ul">
  190. <li>
  191. <div class="demo-box">
  192. <div
  193. class="demo active"
  194. v-on:click="sixiangfun"
  195. data-url="/diary?ref=addtabs"
  196. >
  197. <img src="../images/sx.png" alt />
  198. </div>
  199. </div>
  200. <div class="demo-a">
  201. <a href="#" class="a">思想政治教育</a>
  202. </div>
  203. </li>
  204. <li>
  205. <div class="demo-box">
  206. <div
  207. class="demo active"
  208. v-on:click="zhinengfun"
  209. data-url="/diary?ref=addtabs"
  210. >
  211. <img src="../assets/images/phone1.png" alt class="phone" />
  212. </div>
  213. </div>
  214. <div class="demo-a">
  215. <a href="#" class="a">智能手机柜</a>
  216. </div>
  217. </li>
  218. <li>
  219. <div class="demo-box">
  220. <div
  221. class="demo active"
  222. v-on:click="renlifun"
  223. data-url="/diary?ref=addtabs"
  224. >
  225. <img src="../images/rl.png" alt />
  226. </div>
  227. </div>
  228. <div class="demo-a">
  229. <a href="#" class="a">人力资源</a>
  230. </div>
  231. </li>
  232. <li>
  233. <div class="demo-box">
  234. <div
  235. class="demo active"
  236. v-on:click="xitongfun"
  237. data-url="/diary?ref=addtabs"
  238. >
  239. <img src="../images/xt.png" alt />
  240. </div>
  241. </div>
  242. <div class="demo-a">
  243. <a href="#" class="a">系统管理</a>
  244. </div>
  245. </li>
  246. <li>
  247. <div class="demo-box">
  248. <div
  249. class="demo active"
  250. v-on:click="gongju"
  251. data-url="/diary?ref=addtabs"
  252. >
  253. <img src="../images/xt.png" alt />
  254. </div>
  255. </div>
  256. <div class="demo-a">
  257. <a href="#" class="a">系统工具</a>
  258. </div>
  259. </li>
  260. <img src="../assets/images/椭圆 513 (2).png" class="li-img" alt />
  261. </ul>
  262. <hr />
  263. <ul class="ul">
  264. <li>
  265. <div class="demo-box">
  266. <div class="demo active" id="a3" v-on:click="junchefun">
  267. <img src="../images/cart.png" alt />
  268. </div>
  269. </div>
  270. <div class="demo-a">
  271. <a href="#" class="a">车辆管理</a>
  272. </div>
  273. </li>
  274. <li>
  275. <div class="demo-box">
  276. <div
  277. class="demo active"
  278. v-on:click="yingfangfun"
  279. data-url="/diary?ref=addtabs"
  280. >
  281. <img src="../images/git.png" alt />
  282. </div>
  283. </div>
  284. <div class="demo-a">
  285. <a href="#" class="a">营房管理</a>
  286. </div>
  287. </li>
  288. <li>
  289. <div class="demo-box">
  290. <div
  291. class="demo active"
  292. v-on:click="yingjufun"
  293. data-url="/diary?ref=addtabs"
  294. >
  295. <img src="../images/gl.png" alt />
  296. </div>
  297. </div>
  298. <div class="demo-a">
  299. <a href="#" class="a">营具管理</a>
  300. </div>
  301. </li>
  302. <li>
  303. <div class="demo-box">
  304. <div
  305. class="demo active"
  306. v-on:click="yiliaofun"
  307. data-url="/diary?ref=addtabs"
  308. >
  309. <img src="../images/yl.png" alt />
  310. </div>
  311. </div>
  312. <div class="demo-a">
  313. <a href="#" class="a">医疗卫生管理</a>
  314. </div>
  315. </li>
  316. <li>
  317. <div class="demo-box">
  318. <div
  319. class="demo active"
  320. v-on:click="baomifun"
  321. data-url="/diary?ref=addtabs"
  322. >
  323. <img src="../assets/images/保密协议.png" alt />
  324. </div>
  325. </div>
  326. <div class="demo-a">
  327. <a href="#" class="a">涉密载体</a>
  328. </div>
  329. </li>
  330. </ul>
  331. </div>
  332. <!-- 右面盒子 -->
  333. <div class="rigin">
  334. <div class="num1">
  335. <div class="num2">
  336. <img src="../images/db.png" alt />
  337. <span>待办事项</span>
  338. </div>
  339. <ul class="num1-ul">
  340. <div class="num2-ul-title">
  341. <div class="num2-ul-title-l">代办事项</div>
  342. <div class="num2-ul-title-c">分类</div>
  343. <div class="num2-ul-title-r">执行人</div>
  344. </div>
  345. <li
  346. class="num2-ul-li"
  347. v-for="item in worklist"
  348. :key="item.id"
  349. @click="dbsxfun"
  350. >
  351. <div class="num2-ul-li-l">{{ item.taskName }}</div>
  352. <div class="num2-ul-li-c">工作</div>
  353. <div class="num2-ul-li-r">{{ item.peopleName }}</div>
  354. </li>
  355. </ul>
  356. </div>
  357. <div class="num1">
  358. <div class="num2">
  359. <img src="../assets/images/通知公告.png" alt />
  360. <span>通知公告</span>
  361. </div>
  362. <span class="addspan" @click="tiaddfun">更多</span>
  363. <div class="num1-box">
  364. <div
  365. class="num1-box-div"
  366. v-for="item in noticeList"
  367. :key="item.noticeId"
  368. @click="tzggfun(item)"
  369. >
  370. <div class="num1-box-l">{{ item.noticeTitle }}</div>
  371. <div class="num1-box-r">
  372. <img
  373. src="../assets/images/通知.png"
  374. v-if="item.start == 1"
  375. alt
  376. />
  377. <img
  378. src="../assets/images/通知 拷贝 3.png"
  379. v-if="item.start == 0"
  380. alt
  381. />
  382. </div>
  383. </div>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. <div class="tkbox2" v-if="open2">
  390. <div class="tkbox-title">
  391. <div class="tkbox-title-left">
  392. <img src="../assets/images/八一.png" alt />
  393. <span>重要消息</span>
  394. </div>
  395. <div class="tkbox-title-right">
  396. <img src="../assets/images/关闭.png" alt @click="showfun2" />
  397. </div>
  398. </div>
  399. <div class="tkbox-main">
  400. <p>
  401. <img src="../assets/images/警示.png" alt />
  402. <span>{{ title2 }}</span>
  403. </p>
  404. </div>
  405. <div class="tkbox-footer">
  406. <button @click="quchulifun2">去处理</button>
  407. </div>
  408. </div>
  409. <div class="tkbox" v-if="open">
  410. <div class="tkbox-title">
  411. <div class="tkbox-title-left">
  412. <img src="../assets/images/八一.png" alt />
  413. <span>重要消息</span>
  414. </div>
  415. <div class="tkbox-title-right">
  416. <img src="../assets/images/关闭.png" alt @click="showfun" />
  417. </div>
  418. </div>
  419. <div class="tkbox-main">
  420. <p>
  421. <img src="../assets/images/警示.png" alt />
  422. <span>{{ title }}</span>
  423. </p>
  424. </div>
  425. <div class="tkbox-footer">
  426. <button @click="quchulifun">去处理</button>
  427. </div>
  428. </div>
  429. <div class="tkbox3" v-if="open3">
  430. <div class="tkbox-title">
  431. <div class="tkbox-title-left">
  432. <img src="../assets/images/八一.png" alt />
  433. <span>重要消息</span>
  434. </div>
  435. <div class="tkbox-title-right">
  436. <img src="../assets/images/关闭.png" alt @click="showfun3" />
  437. </div>
  438. </div>
  439. <div class="tkbox-main">
  440. <p>
  441. <img src="../assets/images/警示.png" alt />
  442. <span>{{ title3 }}</span>
  443. </p>
  444. </div>
  445. <div class="tkbox-footer">
  446. <button @click="quchulifun3">去处理</button>
  447. </div>
  448. </div>
  449. <div class="tkbox4" v-if="open4">
  450. <div class="tkbox-title">
  451. <div class="tkbox-title-left">
  452. <img src="../assets/images/八一.png" alt />
  453. <span>重要消息</span>
  454. </div>
  455. <div class="tkbox-title-right">
  456. <img src="../assets/images/关闭.png" alt @click="showfun4" />
  457. </div>
  458. </div>
  459. <div class="tkbox-main">
  460. <p>
  461. <img src="../assets/images/警示.png" alt />
  462. <span>{{ title4 }}</span>
  463. </p>
  464. </div>
  465. <div class="tkbox-footer">
  466. <button @click="quchulifun4">去处理</button>
  467. </div>
  468. </div>
  469. <!-- 添加或修改集中文印记录对话框 -->
  470. <!-- <el-dialog :title="title" style="margin-top: 200px;" :visible.sync="open5" width="565px" append-to-body>
  471. <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="120px">
  472. <el-form-item label="通知公告标题" prop>
  473. <el-input value placeholder="请输入通知公告标题" />
  474. </el-form-item>
  475. <el-form-item label="通知公告内容">
  476. <el-input value type="textarea" placeholder="请输入通知公告内容" />
  477. <el-input value type="textarea" placeholder="请输入通知公告内容" />
  478. </el-form-item>
  479. </el-form>
  480. <div slot="footer" class="dialog-footer">
  481. <el-button type="primary" style="width:55px;height:25px;" @click="submitForm">确 定</el-button>
  482. <button @click="cancel" style="width:55px;height:25px;margin-left:10px;" >取 消</button>
  483. </div>
  484. </el-dialog>-->
  485. <el-dialog
  486. title="查看通知公告"
  487. :visible.sync="open5"
  488. width="800px"
  489. append-to-body
  490. >
  491. <div class="jiben">基本信息</div>
  492. <el-form ref="form" :model="form" :rules="rules" :inline="true">
  493. <el-row>
  494. <el-col :span="12">
  495. <p
  496. style="
  497. width: 100%;
  498. height: 30px;
  499. line-height: 30px;
  500. color: #fff;
  501. fontsize: 16px;
  502. "
  503. v-if="!ggflg"
  504. >
  505. 公告标题:<span style="margin-left: 10px; fontsize: 14px">{{
  506. form.noticeTitle
  507. }}</span>
  508. </p>
  509. <el-form-item label="公告标题" v-if="ggflg" prop="noticeTitle">
  510. <el-input
  511. v-model="form.noticeTitle"
  512. placeholder="请输入公告标题"
  513. />
  514. </el-form-item>
  515. <!-- <el-form-item label="公告标题" prop="noticeTitle">
  516. <el-input
  517. v-model="form.noticeTitle"
  518. placeholder="请输入公告标题"
  519. style="width: 300px"
  520. />
  521. </el-form-item> -->
  522. </el-col>
  523. <el-col :span="12" v-if="ggflg">
  524. <el-form-item label="公告类型" prop="noticeType">
  525. <el-select v-model="form.noticeType" placeholder="请选择">
  526. <el-option
  527. v-for="dict in dict.type.sys_notice_type"
  528. :key="dict.value"
  529. :label="dict.label"
  530. :value="dict.value"
  531. ></el-option>
  532. </el-select>
  533. </el-form-item>
  534. </el-col>
  535. <el-col
  536. :span="24"
  537. style="margin-top: 15px; margin-bottom: 10px"
  538. v-if="ggflg"
  539. >
  540. <el-form-item label="状态">
  541. <el-radio-group v-model="form.status">
  542. <el-radio
  543. v-for="dict in dict.type.sys_notice_status"
  544. :key="dict.value"
  545. :label="dict.value"
  546. style="margin-right: 20px"
  547. >{{ dict.label }}</el-radio
  548. >
  549. </el-radio-group>
  550. </el-form-item>
  551. </el-col>
  552. </el-row>
  553. <el-row style="margin-top: 10px">
  554. <el-col :span="12" v-if="!ggflg">
  555. <el-form-item label="发布人" prop="createBy" label-width="0">
  556. <el-input
  557. v-model="form.createBy"
  558. disabled
  559. placeholder="请输入发布人"
  560. />
  561. </el-form-item>
  562. </el-col>
  563. <el-col :span="12" v-if="!ggflg">
  564. <el-form-item label="附件" label-width="0px" prop="filename">
  565. <a
  566. :href="url + form.filename"
  567. target="_blank"
  568. download
  569. style="
  570. display: inline-block;
  571. width: 90px;
  572. height: 30px;
  573. background-color: #409eff;
  574. border: none;
  575. border-radus: 3px;
  576. color: #fff;
  577. line-height: 30px;
  578. text-align: center;
  579. "
  580. >下载附件</a
  581. >
  582. <!-- <fileUpload v-model="form.filename" class="m-l-20" /> -->
  583. </el-form-item>
  584. </el-col>
  585. </el-row>
  586. <div class="jiben">内容</div>
  587. <el-col :span="24">
  588. <el-form-item
  589. label
  590. prop="remark"
  591. class="textareas"
  592. style="width: 100%"
  593. >
  594. <el-input
  595. v-model="form.remark"
  596. type="textarea"
  597. placeholder="请输入内容"
  598. />
  599. </el-form-item>
  600. </el-col>
  601. </el-form>
  602. <div slot="footer" class="dialog-footer">
  603. <button class="button1" v-if="ggflg" @click="submitForm">确 定</button>
  604. <button @click="cancel">取 消</button>
  605. </div>
  606. </el-dialog>
  607. </div>
  608. </template>
  609. <script>
  610. import {
  611. printTrigger,
  612. printTriggerClear,
  613. printPeople,
  614. printEachTrigger,
  615. } from "@/api/PrintsManage/manage";
  616. import {
  617. workEachTrigger,
  618. workTrigger,
  619. addNotice,
  620. listNotice,
  621. updateNotice,
  622. getWorkTask,
  623. } from "@/api/pt";
  624. import { getUserProfile } from "@/api/system/user";
  625. import Cookies from "js-cookie";
  626. export default {
  627. dicts: ["sys_notice_status", "sys_notice_type"],
  628. data() {
  629. return {
  630. times: null,
  631. timer: null,
  632. open: false,
  633. open2: false,
  634. open3: false,
  635. open4: false,
  636. timer2: null,
  637. open5: false,
  638. ggflg: false,
  639. form: "",
  640. rules: "",
  641. title: "",
  642. title2: "",
  643. title3: "",
  644. title4: "",
  645. url: process.env.VUE_APP_BASE_API,
  646. rules: {
  647. noticeTitle: [
  648. { required: true, message: "公告标题不能为空", trigger: "blur" },
  649. ],
  650. noticeType: [
  651. { required: true, message: "公告类型不能为空", trigger: "change" },
  652. ],
  653. },
  654. // 表单参数
  655. form: {},
  656. noticeList: [],
  657. worklist: [],
  658. // 用户信息
  659. user: {},
  660. danWie: "",
  661. yongHu: "",
  662. };
  663. },
  664. created() {
  665. this.getUser();
  666. this.timer = null;
  667. this.startTime();
  668. this.timer2 = null;
  669. this.startTime2();
  670. },
  671. mounted() {
  672. if (this.$route.params.name) {
  673. this.$modal.msgSuccess(this.$route.params.name);
  674. }
  675. this.getlist();
  676. this.getworklist();
  677. // console.log(this.$route.params.name)
  678. },
  679. methods: {
  680. // 获取登录信息
  681. getUser() {
  682. getUserProfile().then((response) => {
  683. this.user = response.data;
  684. this.danWie = response.data.dept.deptName;
  685. this.yongHu = response.data.nickName;
  686. });
  687. },
  688. getlist() {
  689. listNotice().then((res) => {
  690. this.noticeList = res.data;
  691. });
  692. },
  693. getworklist() {
  694. getWorkTask().then((res) => {
  695. console.log(res);
  696. this.worklist = res.data;
  697. });
  698. },
  699. // 表单重置
  700. reset() {
  701. this.form = {
  702. noticeId: undefined,
  703. noticeTitle: undefined,
  704. noticeType: undefined,
  705. noticeContent: undefined,
  706. status: "0",
  707. };
  708. this.resetForm("form");
  709. },
  710. startTime() {
  711. this.timer = setInterval(() => {
  712. var today = new Date();
  713. var y = today.getFullYear();
  714. var M = today.getMonth() + 1;
  715. var d = today.getDate();
  716. var h = today.getHours();
  717. var m = today.getMinutes();
  718. var s = today.getSeconds();
  719. var w = today.getDay();
  720. if (M < 10) {
  721. M = "0" + M;
  722. }
  723. if (d < 10) {
  724. d = "0" + d;
  725. }
  726. if (h < 10) {
  727. h = "0" + h;
  728. }
  729. if (m < 10) {
  730. m = "0" + m;
  731. }
  732. if (s < 10) {
  733. s = "0" + s;
  734. }
  735. this.times = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
  736. }, 500); /* 每500毫秒执行一次,实现动态显示时间效果 */
  737. },
  738. doThis() {
  739. this.$router
  740. .push({ path: "/index", query: { name: "/grassrootsregistration" } })
  741. .catch(() => {});
  742. Cookies.set("shuaxin", "false");
  743. },
  744. zhanbeifun() {
  745. this.$router
  746. .push({ path: "/index", query: { name: "/combatduty" } })
  747. .catch(() => {});
  748. Cookies.set("shuaxin", "false");
  749. },
  750. renlifun() {
  751. this.$router
  752. .push({ path: "/index", query: { name: "/peopleManage" } })
  753. .catch(() => {});
  754. Cookies.set("shuaxin", "false");
  755. },
  756. renyuanfun() {
  757. this.$router
  758. .push({ path: "/index", query: { name: "/peopleChuRu" } })
  759. .catch(() => {});
  760. Cookies.set("shuaxin", "false");
  761. },
  762. yingfangfun() {
  763. this.$router
  764. .push({ path: "/index", query: { name: "/barracksManagement" } })
  765. .catch(() => {});
  766. Cookies.set("shuaxin", "false");
  767. },
  768. junchefun() {
  769. this.$router
  770. .push({ path: "/index", query: { name: "/militaryvehicleManagement" } })
  771. .catch(() => {});
  772. Cookies.set("shuaxin", "false");
  773. },
  774. gongzuofun() {
  775. this.$router
  776. .push({ path: "/index", query: { name: "/workingArrangements" } })
  777. .catch(() => {});
  778. Cookies.set("shuaxin", "false");
  779. },
  780. guizhangfun() {
  781. this.$router
  782. .push({ path: "/index", query: { name: "/regulations" } })
  783. .catch(() => {});
  784. Cookies.set("shuaxin", "false");
  785. },
  786. yiliaofun() {
  787. this.$router
  788. .push({ path: "/index", query: { name: "/medicalhealth" } })
  789. .catch(() => {});
  790. Cookies.set("shuaxin", "false");
  791. },
  792. jianchafun() {
  793. this.$router
  794. .push({ path: "/index", query: { name: "/bdglregular" } })
  795. .catch(() => {});
  796. Cookies.set("shuaxin", "false");
  797. },
  798. anfangfun(){
  799. this.$router
  800. .push({ path: "/index", query: { name: "/monitoring" } })
  801. .catch(() => {});
  802. Cookies.set("shuaxin", "false");
  803. },
  804. mengangfun() {
  805. this.$router
  806. .push({ path: "/index", query: { name: "/doormanManage" } })
  807. .catch(() => {});
  808. Cookies.set("shuaxin", "false");
  809. },
  810. yingjufun() {
  811. this.$router
  812. .push({ path: "/index", query: { name: "/materialManagement" } })
  813. .catch(() => {});
  814. Cookies.set("shuaxin", "false");
  815. },
  816. xitongfun() {
  817. this.$router
  818. .push({ path: "/index", query: { name: "/system" } })
  819. .catch(() => {});
  820. Cookies.set("shuaxin", "false");
  821. },
  822. gongju() {
  823. this.$router
  824. .push({ path: "/index", query: { name: "/tool" } })
  825. .catch(() => {});
  826. Cookies.set("shuaxin", "false");
  827. },
  828. wenyinfun() {
  829. this.$router
  830. .push({ path: "/index", query: { name: "/print" } })
  831. .catch(() => {});
  832. Cookies.set("shuaxin", "false");
  833. },
  834. taishifun() {
  835. this.$router.push({ path: "/taishi" }).catch(() => {});
  836. Cookies.set("shuaxin", "false");
  837. // window.open(`/taishi`,'_self');
  838. },
  839. baomifun() {
  840. this.$router
  841. .push({ path: "/index", query: { name: "/bdglSecret" } })
  842. .catch(() => {});
  843. },
  844. sixiangfun() {
  845. this.$router
  846. .push({ path: "/index", query: { name: "/thought" } })
  847. .catch(() => {});
  848. },
  849. zhinengfun() {
  850. this.$router
  851. .push({ path: "/index", query: { name: "/phone" } })
  852. .catch(() => {});
  853. },
  854. showfun() {
  855. this.open = false;
  856. printTriggerClear().then((res) => {
  857. // console.log(res)
  858. });
  859. },
  860. showfun2() {
  861. this.open2 = false;
  862. printTriggerClear().then((res) => {
  863. // console.log(res)
  864. });
  865. },
  866. showfun3() {
  867. this.open3 = false;
  868. printTriggerClear().then((res) => {
  869. // console.log(res)
  870. });
  871. },
  872. showfun4() {
  873. this.open4 = false;
  874. printTriggerClear().then((res) => {
  875. // console.log(res)
  876. });
  877. },
  878. quchulifun() {
  879. printTriggerClear().then((res) => {
  880. if (res.code == 200) {
  881. this.open = true;
  882. window.open(`/print/manage`, "_self");
  883. }
  884. });
  885. },
  886. quchulifun2() {
  887. printTriggerClear().then((res) => {
  888. if (res.code == 200) {
  889. this.open = false;
  890. window.open(`/print/manage`, "_self");
  891. }
  892. });
  893. },
  894. quchulifun3() {
  895. printTriggerClear().then((res) => {
  896. if (res.code == 200) {
  897. this.open3 = false;
  898. window.open(`/workingArrangements/workTask`, "_self");
  899. }
  900. });
  901. },
  902. quchulifun4() {
  903. printTriggerClear().then((res) => {
  904. if (res.code == 200) {
  905. this.open4 = false;
  906. window.open(`/workingArrangements/workTask`, "_self");
  907. }
  908. });
  909. },
  910. startTime2() {
  911. this.timer = setInterval(() => {
  912. // printTrigger().then((res) => {
  913. // if (res.code == 200) {
  914. // if (res.print == "print") {
  915. // if (res.numb != 0) {
  916. // this.title2 = "您有打印文件需要处理,请尽快处理";
  917. // this.open2 = true;
  918. // }
  919. // }
  920. // }
  921. // });
  922. printEachTrigger().then((res) => {
  923. if (res.code == 200) {
  924. if (res.print == "printUserInfo") {
  925. var sendId = Cookies.get("userId");
  926. if (res.printUserInfo == sendId) {
  927. if (res.numb != 0) {
  928. this.title = res.msg;
  929. this.open = true;
  930. }
  931. }
  932. }
  933. }
  934. });
  935. workEachTrigger().then((res) => {
  936. var sendId = Cookies.get("userId");
  937. if (res.code == 200) {
  938. if (res.workEach != 0) {
  939. if (res.workUserid == sendId) {
  940. this.title3 = res.msg;
  941. this.open3 = true;
  942. }
  943. }
  944. }
  945. });
  946. workTrigger().then((res) => {
  947. // var sendId = Cookies.get("userId");
  948. if (res.code == 200) {
  949. if (res.workRequest != 0) {
  950. this.title4 = res.msg;
  951. this.open4 = true;
  952. }
  953. }
  954. });
  955. }, 10000); /* 每500毫秒执行一次,实现动态显示时间效果 */
  956. },
  957. tongzhifun() {
  958. // this.title = "添加通知通告";
  959. // this.open5 = true;
  960. // this.ggflg = true;
  961. // this.reset();
  962. // window.open(`/system/notice`, "_self");
  963. this.$router.push({ path: "/system/notice" }).catch(() => {});
  964. },
  965. submitForm() {
  966. // addNotice(this.form).then((response) => {
  967. // this.$modal.msgSuccess("新增成功");
  968. // this.open5 = false;
  969. // this.ggflg = false;
  970. // this.getlist();
  971. // });
  972. },
  973. cancel() {
  974. this.open5 = false;
  975. this.ggflg = false;
  976. this.getlist();
  977. },
  978. tiaddfun() {
  979. this.$router.push({ path: "/system/notice" }).catch(() => {});
  980. },
  981. tzggfun(item) {
  982. // console.log(item);
  983. // item.start = 1;
  984. this.reset();
  985. this.form = item;
  986. updateNotice({
  987. noticeId: item.noticeId,
  988. start: 1,
  989. noticeTitle: item.noticeTitle,
  990. }).then((res) => {
  991. if (res.code == 200) {
  992. this.getlist();
  993. }
  994. });
  995. this.open5 = true;
  996. this.ggflg = false;
  997. },
  998. dbsxfun() {
  999. this.$router
  1000. .push({ path: "/workingArrangements/workTask" })
  1001. .catch(() => {});
  1002. },
  1003. },
  1004. destroyed() {
  1005. clearInterval(this.timer); // 清除定时器
  1006. this.timer = null;
  1007. clearInterval(this.timer2); // 清除定时器
  1008. this.timer2 = null;
  1009. },
  1010. };
  1011. </script>
  1012. <style scoped>
  1013. .el-dialog {
  1014. margin-top: 500px;
  1015. }
  1016. * {
  1017. margin: 0;
  1018. padding: 0;
  1019. }
  1020. body,
  1021. html {
  1022. height: 100%;
  1023. width: 100%;
  1024. }
  1025. li {
  1026. list-style: none;
  1027. }
  1028. .header {
  1029. height: 100%;
  1030. width: 100%;
  1031. overflow: auto;
  1032. background: url("../images/背景1.png") no-repeat center;
  1033. background-size: 100% 100%;
  1034. position: relative;
  1035. }
  1036. .tou {
  1037. color: #fff;
  1038. position: relative;
  1039. height: 120px;
  1040. background: url("../assets/images/首页顶部.gif") no-repeat center;
  1041. background-size: cover;
  1042. }
  1043. .tou .yong_hu {
  1044. position: absolute;
  1045. right: 24px;
  1046. top: 33px;
  1047. min-width: 320px;
  1048. font-size: 16px;
  1049. box-sizing: border-box;
  1050. }
  1051. .tou .tiem {
  1052. position: absolute;
  1053. /* right: 24px; */
  1054. left: 124px;
  1055. top: 33px;
  1056. min-width: 320px;
  1057. font-size: 15px;
  1058. box-sizing: border-box;
  1059. }
  1060. .tou .span {
  1061. margin-right: 20px;
  1062. }
  1063. .liuxian {
  1064. position: absolute;
  1065. top: -7px;
  1066. }
  1067. .in1 {
  1068. padding: 0 84px;
  1069. }
  1070. .demo {
  1071. color: #fff;
  1072. width: 107px;
  1073. height: 90%;
  1074. background: url("../images/tx.png") no-repeat;
  1075. text-align: center;
  1076. margin-top: 10%;
  1077. /* margin: 0 80px; */
  1078. }
  1079. .demo img {
  1080. margin-top: 35px;
  1081. }
  1082. #q1 img {
  1083. margin-top: 42px;
  1084. }
  1085. .demo-box {
  1086. width: 100%;
  1087. height: 70%;
  1088. display: flex;
  1089. justify-content: center;
  1090. align-items: center;
  1091. }
  1092. .demo-a {
  1093. width: 100%;
  1094. height: 30%;
  1095. font-size: 1rem;
  1096. color: #fff;
  1097. display: flex;
  1098. justify-content: center;
  1099. align-items: center;
  1100. }
  1101. .ul {
  1102. /* margin-bottom: 7vh; */
  1103. height: 23%;
  1104. display: flex;
  1105. flex-flow: wrap;
  1106. }
  1107. .ul li {
  1108. /* margin: 0 48px; */
  1109. cursor: pointer;
  1110. width: 16.5%;
  1111. height: 100%;
  1112. display: inline-block;
  1113. }
  1114. .li-img {
  1115. width: 100%;
  1116. }
  1117. .boxx {
  1118. padding: 0 0 0 80px;
  1119. flex: 2.2;
  1120. }
  1121. .img-left {
  1122. position: absolute;
  1123. top: -8px;
  1124. }
  1125. hr {
  1126. height: 2px;
  1127. background-color: #06668a;
  1128. border: none;
  1129. margin-bottom: 20px;
  1130. }
  1131. .centen {
  1132. display: flex;
  1133. height: 85vh;
  1134. }
  1135. .num1 {
  1136. color: #fff;
  1137. width: 529px;
  1138. height: 41.5vh;
  1139. background: url("../images/rd.png") no-repeat;
  1140. margin-bottom: 20px;
  1141. padding: 30px 20px 0px 20px;
  1142. background-size: 100% 100%;
  1143. }
  1144. .num1 img {
  1145. /* width: 20px;
  1146. height: 20px; */
  1147. vertical-align: bottom;
  1148. margin-right: 10px;
  1149. }
  1150. .rigin {
  1151. flex: 1;
  1152. margin-left: 52px;
  1153. }
  1154. .table {
  1155. margin-top: 20px;
  1156. width: 492px;
  1157. height: 80%;
  1158. /* height: 182px; */
  1159. /* 去除中间的线 */
  1160. border-collapse: collapse;
  1161. border-spacing: 0;
  1162. }
  1163. .table tr td {
  1164. height: 28px;
  1165. text-align: center;
  1166. }
  1167. .table tr:nth-child(even) {
  1168. background-color: rgba(39, 104, 136, 0.2);
  1169. }
  1170. .table tr:hover {
  1171. background: rgba(0, 246, 255, 0.3);
  1172. }
  1173. #a2 img {
  1174. margin-top: 40px;
  1175. }
  1176. #a1 img {
  1177. margin-top: 40px;
  1178. }
  1179. #a3 img {
  1180. margin-top: 43px;
  1181. }
  1182. .num1-box {
  1183. width: 100%;
  1184. height: 86%;
  1185. margin-top: 10%;
  1186. }
  1187. .num1-box .num1-box-div {
  1188. width: 100%;
  1189. height: 36px;
  1190. display: flex;
  1191. flex-direction: row;
  1192. font-size: 14px;
  1193. color: #fff;
  1194. line-height: 36px;
  1195. }
  1196. .num1-box-div:nth-child(odd) {
  1197. background-color: rgba(39, 104, 136, 0.2);
  1198. }
  1199. .num1-box-div:hover {
  1200. background: rgba(0, 246, 255, 0.3);
  1201. }
  1202. .num1-box-l {
  1203. flex: 7;
  1204. height: 100%;
  1205. text-align: left;
  1206. margin-left: 10px;
  1207. text-overflow: ellipsis;
  1208. }
  1209. .num1-box-r {
  1210. flex: 3;
  1211. height: 100%;
  1212. text-align: right;
  1213. margin-right: 10px;
  1214. line-height: 30px;
  1215. }
  1216. .num1-ul {
  1217. width: 100%;
  1218. height: 86%;
  1219. margin-top: 5%;
  1220. }
  1221. .num1-ul-li {
  1222. width: 100%;
  1223. height: 36px;
  1224. display: flex;
  1225. flex-direction: row;
  1226. font-size: 14px;
  1227. color: #fff;
  1228. line-height: 36px;
  1229. }
  1230. .num1-ul-li:nth-child(even) {
  1231. background-color: rgba(39, 104, 136, 0.2);
  1232. }
  1233. .num1-ul-li:hover {
  1234. background: rgba(0, 246, 255, 0.3);
  1235. }
  1236. .num1-ul-li-l {
  1237. flex: 7;
  1238. height: 100%;
  1239. text-align: center;
  1240. }
  1241. .num1-ul-li-r {
  1242. flex: 3;
  1243. height: 100%;
  1244. text-align: center;
  1245. }
  1246. .num2-ul-li {
  1247. width: 100%;
  1248. height: 36px;
  1249. display: flex;
  1250. flex-direction: row;
  1251. font-size: 14px;
  1252. color: #fff;
  1253. line-height: 36px;
  1254. }
  1255. .num2-ul-li:nth-child(even) {
  1256. background-color: rgba(39, 104, 136, 0.2);
  1257. }
  1258. .num2-ul-li:hover {
  1259. background: rgba(0, 246, 255, 0.3);
  1260. }
  1261. .num2-ul-li-l {
  1262. flex: 6;
  1263. height: 100%;
  1264. text-align: left;
  1265. margin-left: 10px;
  1266. }
  1267. .num2-ul-li-c {
  1268. flex: 3;
  1269. height: 100%;
  1270. text-align: center;
  1271. }
  1272. .num2-ul-li-r {
  1273. flex: 3;
  1274. height: 100%;
  1275. text-align: center;
  1276. }
  1277. .num1-ul-title {
  1278. width: 100%;
  1279. height: 45px;
  1280. display: flex;
  1281. flex-direction: row;
  1282. font-size: 16px;
  1283. color: #fff;
  1284. line-height: 45px;
  1285. }
  1286. .num1-ul-title-l {
  1287. flex: 7;
  1288. height: 100%;
  1289. text-align: center;
  1290. }
  1291. .num1-ul-title-r {
  1292. flex: 3;
  1293. height: 100%;
  1294. text-align: center;
  1295. }
  1296. .num2-ul-title {
  1297. width: 100%;
  1298. height: 45px;
  1299. display: flex;
  1300. flex-direction: row;
  1301. font-size: 16px;
  1302. color: #fff;
  1303. line-height: 45px;
  1304. }
  1305. .num2-ul-title-l {
  1306. flex: 6;
  1307. height: 100%;
  1308. text-align: left;
  1309. margin-left: 10px;
  1310. }
  1311. .num2-ul-title-c {
  1312. flex: 3;
  1313. height: 100%;
  1314. text-align: center;
  1315. }
  1316. .num2-ul-title-r {
  1317. flex: 3;
  1318. height: 100%;
  1319. text-align: center;
  1320. }
  1321. .num1 {
  1322. position: relative;
  1323. }
  1324. .num1 .addspan {
  1325. width: 50px;
  1326. height: 25px;
  1327. display: inline-block;
  1328. background-color: #1c86e1;
  1329. line-height: 25px;
  1330. text-align: center;
  1331. font-size: 16px;
  1332. cursor: pointer;
  1333. /* margin-left: 851px; */
  1334. position: absolute;
  1335. right: 4%;
  1336. top: 9%;
  1337. }
  1338. ::v-deep .el-dialog {
  1339. background-color: #004d86;
  1340. }
  1341. ::v-deep .el-dialog__header {
  1342. border-bottom: 1px solid #718a9d;
  1343. }
  1344. ::v-deep .el-dialog__title {
  1345. color: #fff;
  1346. font: 18px;
  1347. }
  1348. ::v-deep .el-dialog__headerbtn .el-dialog__close {
  1349. color: #fff;
  1350. }
  1351. .el-form-item ::v-deep .el-input__inner {
  1352. width: 355px;
  1353. height: 36px;
  1354. background: #004d86;
  1355. color: #fff;
  1356. border: 1px solid #fff !important;
  1357. }
  1358. ::v-deep .el-textarea__inner {
  1359. width: 450px;
  1360. height: 104px;
  1361. margin-left: 25px;
  1362. }
  1363. /* 通知 */
  1364. ::v-deep .el-tag.el-tag--success {
  1365. background-color: #e7faf0;
  1366. border-color: #d0f5e0;
  1367. color: #13ce66;
  1368. }
  1369. /* 公告 */
  1370. ::v-deep .el-tag.el-tag--warning {
  1371. background-color: #fff8e6;
  1372. border-color: #fff1cc;
  1373. color: #ffba00;
  1374. }
  1375. /* 对话框背景颜色 */
  1376. ::v-deep .el-dialog {
  1377. background: #004d86 !important;
  1378. }
  1379. ::v-deep .el-textarea__inner {
  1380. width: 760px;
  1381. height: 104px;
  1382. margin: auto !important;
  1383. }
  1384. ::v-deep .el-dialog__header {
  1385. border-bottom: 1px solid #718a9d;
  1386. }
  1387. ::v-deep .el-dialog__title {
  1388. color: #fff;
  1389. font: 18px;
  1390. }
  1391. ::v-deep .el-dialog__headerbtn .el-dialog__close {
  1392. color: #fff;
  1393. }
  1394. ::v-deep .el-form-item__label {
  1395. font: 16px;
  1396. color: #fff;
  1397. width: auto !important;
  1398. }
  1399. ::v-deep .el-input__inner {
  1400. width: 250px !important;
  1401. height: 36px;
  1402. background: transparent;
  1403. color: #fff;
  1404. }
  1405. /* 单位框背景颜色 */
  1406. ::v-deep .vue-treeselect__control {
  1407. background: #004d86 !important;
  1408. }
  1409. /* 基本信息背景 */
  1410. .jiben {
  1411. width: 760px;
  1412. height: 32px;
  1413. background-image: url("../images/小标题底.png");
  1414. margin-bottom: 25px;
  1415. color: #fff;
  1416. padding-left: 16px;
  1417. line-height: 32px;
  1418. margin-top: 10px;
  1419. }
  1420. /*调整表单间距 */
  1421. ::v-deep .el-form-item__content {
  1422. width: 200px;
  1423. }
  1424. .contents {
  1425. padding: 0px 40px !important;
  1426. }
  1427. /* 单位框背景颜色 */
  1428. ::v-deep .vue-treeselect__control {
  1429. background: #004d86 !important;
  1430. color: #fff;
  1431. }
  1432. /* 备注输入框 */
  1433. .textareas ::v-deep .el-form-item__content {
  1434. width: 100%;
  1435. }
  1436. /* 状态 */
  1437. .el-radio {
  1438. color: rgb(204, 198, 198);
  1439. }
  1440. /* 备注输入框 */
  1441. .textareas ::v-deep .el-form-item__content {
  1442. width: 100%;
  1443. }
  1444. /* 富文本 */
  1445. ::v-deep .ql-snow .ql-fill,
  1446. .ql-snow .ql-stroke.ql-fill {
  1447. fill: #fff !important;
  1448. }
  1449. ::v-deep .ql-snow .ql-stroke {
  1450. stroke: #fff !important;
  1451. }
  1452. ::v-deep .ql-snow .ql-picker {
  1453. color: #fff !important;
  1454. }
  1455. ::v-deep .ql-editor ql-blank {
  1456. color: #fff !important;
  1457. }
  1458. /* 分页按钮 */
  1459. ::v-deep .el-pagination.is-background .el-pager li {
  1460. background-color: #004d86;
  1461. color: #fff;
  1462. }
  1463. ::v-deep .el-pagination.is-background .btn-next {
  1464. background-color: #004d86;
  1465. color: #fff;
  1466. }
  1467. ::v-deep .el-pagination.is-background .btn-prev,
  1468. .el-pagination.is-background .btn-next,
  1469. .el-pagination.is-background .el-pager li {
  1470. background: #004d86 !important;
  1471. color: #fff !important;
  1472. }
  1473. .el-select-dropdown__item {
  1474. left: 10px !important;
  1475. }
  1476. ::v-deep .el-upload__tip {
  1477. display: none;
  1478. }
  1479. </style>
  1480. <style lang="scss" scoped>
  1481. .tkbox {
  1482. width: 500px;
  1483. height: 220px;
  1484. background-image: url("../assets/images/框.png");
  1485. background-size: 100% 100%;
  1486. background-repeat: no-repeat;
  1487. position: absolute;
  1488. left: 20%;
  1489. top: 30%;
  1490. }
  1491. .tkbox2 {
  1492. width: 500px;
  1493. height: 220px;
  1494. background-image: url("../assets/images/框.png");
  1495. background-size: 100% 100%;
  1496. background-repeat: no-repeat;
  1497. position: absolute;
  1498. right: 26%;
  1499. top: 30%;
  1500. }
  1501. .tkbox3 {
  1502. width: 500px;
  1503. height: 220px;
  1504. background-image: url("../assets/images/框.png");
  1505. background-size: 100% 100%;
  1506. background-repeat: no-repeat;
  1507. position: absolute;
  1508. left: 20%;
  1509. top: 38%;
  1510. }
  1511. .tkbox4 {
  1512. width: 500px;
  1513. height: 220px;
  1514. background-image: url("../assets/images/框.png");
  1515. background-size: 100% 100%;
  1516. background-repeat: no-repeat;
  1517. position: absolute;
  1518. right: 26%;
  1519. top: 38%;
  1520. }
  1521. .tkbox-title {
  1522. width: 100%;
  1523. height: 90px;
  1524. }
  1525. .tkbox-title-left {
  1526. width: 90%;
  1527. display: inline-block;
  1528. line-height: 90px;
  1529. position: relative;
  1530. }
  1531. .tkbox-title-left img {
  1532. position: absolute;
  1533. left: 35px;
  1534. top: 30px;
  1535. }
  1536. .tkbox-title-left span {
  1537. color: #fff;
  1538. line-height: 95px;
  1539. margin-left: 75px;
  1540. }
  1541. .tkbox-title-right {
  1542. width: 10%;
  1543. text-align: right;
  1544. display: inline-block;
  1545. }
  1546. .tkbox-title-right img {
  1547. text-align: right;
  1548. margin-right: 30px;
  1549. }
  1550. .tkbox-main {
  1551. width: 100%;
  1552. height: 60px;
  1553. }
  1554. .tkbox-main p {
  1555. width: 90%;
  1556. height: auto;
  1557. margin: 0 auto;
  1558. color: #fff;
  1559. font-size: 14px;
  1560. display: flex;
  1561. align-items: center;
  1562. justify-content: center;
  1563. }
  1564. .tkbox-main p span {
  1565. margin-left: 10px;
  1566. }
  1567. .tkbox-footer {
  1568. width: 100%;
  1569. height: 30px;
  1570. margin-bottom: 30px;
  1571. text-align: center;
  1572. }
  1573. .fixed-header + .app-main {
  1574. padding-top: 50px;
  1575. }
  1576. .hasTagsView {
  1577. .app-main {
  1578. /* 84 = navbar + tags-view = 50 + 34 */
  1579. min-height: calc(100vh - 84px);
  1580. }
  1581. .fixed-header + .app-main {
  1582. padding-top: 84px;
  1583. }
  1584. }
  1585. .tkbox-footer button {
  1586. width: 60px;
  1587. height: 25px;
  1588. text-align: center;
  1589. line-height: 21px;
  1590. background-color: #409eff;
  1591. color: #fff;
  1592. border-radius: 6px;
  1593. border: none;
  1594. }
  1595. .dialog-footer button {
  1596. width: 60px;
  1597. height: 30px;
  1598. text-align: center;
  1599. line-height: 21px;
  1600. color: #fff;
  1601. border-radius: 3px;
  1602. border: none;
  1603. background-color: #196299;
  1604. margin-top: 20px;
  1605. }
  1606. .dialog-footer .button1 {
  1607. background-color: #409eff;
  1608. margin-right: 10px;
  1609. }
  1610. .phone {
  1611. margin-top: 40px !important;
  1612. }
  1613. </style>