index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718
  1. <template>
  2. <view class="page-container uni-column">
  3. <view class="logo-container uni-row">
  4. <image class="logo" src="../../static/images/logo.png" />
  5. </view>
  6. <view class="title"><text class="label">德迈仕数字生产线管理平台</text></view>
  7. <view class="user-info-container uni-row">
  8. <view class="icon"><text class="label">{{ userInfo.nickName.charAt(0) }}</text></view>
  9. <view class="user-info uni-column">
  10. <view class="nickname uni-row"><text class="label">用户名: {{ userInfo.userName }}</text></view>
  11. <view class="nickname uni-row"><text class="label">ID:{{ userInfo.userId }}</text></view>
  12. <!-- <view class="process uni-row"><text class="label">当前工段:</text><text class="label">{{ deptName }}</text> -->
  13. <!-- </view> -->
  14. </view>
  15. </view>
  16. <view class="user-info uni-column" style="margin: 0 20rpx 20rpx 20rpx;width: 94%;">
  17. <uni-section title="当前厂别" type="square">
  18. <uni-data-select v-model="curSelectedTenantId" :localdata="tenantList" :clear="false"
  19. @change="handleTenantChange"></uni-data-select>
  20. </uni-section>
  21. <uni-section title="当前工段" type="square">
  22. <uni-data-select v-model="curSelectedDeptId" :localdata="userDeptsByTenantId" :clear="false"
  23. @change="handleDeptChange"></uni-data-select>
  24. </uni-section>
  25. </view>
  26. <!-- <view class="business-btn uni-row" v-if="showOther" @click="handleRecerptSfprod"><text class="label">半成品接收</text></view> -->
  27. <view class="business-btn uni-row" v-if="showOther" @click="handeleToReportHistory">
  28. <text class="label">我的报工</text>
  29. </view>
  30. <view v-if="showQuick" class="business-btn uni-row" @click="handleFastToProductionPlan">
  31. <text class="label">快速报工</text>
  32. </view>
  33. <view class="business-btn uni-row" v-if="showTakeStock" @click="handleToTakeStock">
  34. <text class="label">盘点</text>
  35. </view>
  36. <view class="business-btn uni-row" v-if="showOther && !showSizing" @click="handleToProductionPlan">
  37. <text class="label">报工</text>
  38. </view>
  39. <view class="business-btn uni-row" v-if="showInnerTurnover" @click="handleInnerTurnover">
  40. <text class="label">内部周转</text>
  41. </view>
  42. <view class="business-btn uni-row" v-if="showSizing" @click="handleToSorting">
  43. <text class="label">分选报工</text>
  44. </view>
  45. <view class="business-btn uni-row" @click="handleToGetLotInfo">
  46. <text class="label">扫码查询批次信息</text>
  47. </view>
  48. <!-- <view class="business-btn uni-row" v-if="showInspector" @click="handleToProcessInspection">
  49. <text class="label">序检</text>
  50. </view> -->
  51. <view class="business-btn uni-row" @click="handleToInspectionDetails">
  52. <text class="label">检查列表</text>
  53. </view>
  54. <view class="business-btn uni-row" v-if="showOutsourcedInspector" @click="handleToOutsourcedInspection">
  55. <text class="label">外协检查</text>
  56. </view>
  57. <!-- <view class="business-btn uni-row" v-if="showDeliveryInspection" @click="handleToDeliveryInspection">
  58. <text class="label">交检</text>
  59. </view> -->
  60. <!-- <view class="business-btn uni-row" v-if="showInspector" @click="handleToFirstInspection">
  61. <text class="label">首件检</text>
  62. </view> -->
  63. <view class="business-btn uni-row" v-if="showOnSiteInspector" @click="handleToOnSiteInspection">
  64. <text class="label">巡检</text>
  65. </view>
  66. <view class="business-btn uni-row" v-if="showInstrumentRoomInspection" @click="handleToInstrumentInspection">
  67. <text class="label">仪器室</text>
  68. </view>
  69. <!-- <view class="business-btn uni-row" v-if="showInspector" @click="handleToFactoryInspection">
  70. <text class="label">出厂检</text>
  71. </view> -->
  72. <!-- <view class="business-btn uni-row" v-if="showAdjust" @click="handleToAdjust">
  73. <text class="label">交检审核</text>
  74. </view> -->
  75. <!-- v-hasRoles="['porter']" 可通过v-Roles自定义指令进行显隐 -->
  76. <view class="business-btn uni-row" v-if="showTurn" @click="handleToHandlingList">
  77. <text class="label">周转</text>
  78. </view>
  79. <view class="business-btn uni-row" v-if="showOutSourceList" @click="handleOutsourceList">
  80. <text class="label">外协验箱</text>
  81. </view>
  82. <view class="business-btn uni-row" v-if="showChangeTurnover" @click="handleChangeTurnover">
  83. <text class="label">更换工段加工</text>
  84. </view>
  85. <view class="bottom-btn-container">
  86. <!-- <view class="start-batch-btn uni-row" @click="handleToEquiPmentList"><text class="label">绑定设备</text></view> -->
  87. <view class="start-batch-btn uni-row" @click="handleSwitchOrQuit">
  88. <text class="label">切换 / 退出账号</text>
  89. </view>
  90. </view>
  91. </view>
  92. <dialog-confirm ref="confirm" @submit="logout"></dialog-confirm>
  93. <dialog-inspectionChamber ref="inspectionChanberRef" @handleSelectInspectionChamber='handleSelectInspectionChamber'></dialog-inspectionChamber>
  94. </template>
  95. <script setup>
  96. import {
  97. ref
  98. } from 'vue'
  99. import {
  100. onLoad,
  101. onReady
  102. } from '@dcloudio/uni-app'
  103. import {
  104. getSubPlanDetailsList
  105. } from '../../api/business/subPlanDetails'
  106. import {
  107. checkCarrier
  108. } from '../../api/business/processInspection'
  109. import {
  110. getTenantList,
  111. } from '@/api/login/index.js'
  112. import {
  113. getUserDeptList
  114. } from '@/api/dept/dept.js'
  115. import {
  116. listInnerTurnover
  117. } from '../../api/business/innerTurnover'
  118. import {
  119. store
  120. } from '@/store/index.js'
  121. const userName = ref('') // 用户名
  122. const curSelectedDeptId = ref(null) // 用户当前选择的工段
  123. const curSelectedTenantId = ref(null) // 用户当前选择的厂别
  124. const userInfo = ref({}) // 用户信息
  125. const tenantList = ref([]) // 厂别列表
  126. const userDeptList = ref([]) // 用户所在所有工段列表
  127. const userDeptsByTenantId = ref([])
  128. const confirm = ref(null) // 确认组件
  129. const inspectionChanberRef = ref(null)
  130. const showTurn = ref(false)
  131. const showOther = ref(false)
  132. const showInspector = ref(false);
  133. const showOnSiteInspector = ref(false)
  134. const showInstrumentRoomInspection = ref(false)
  135. const showAdjust = ref(false)
  136. const showQuick = ref(false)
  137. const showSizing = ref(false)
  138. const showTakeStock = ref(false)
  139. const showInnerTurnover = ref(false)
  140. const showOutsourcedInspector = ref(false)
  141. const showDeliveryInspection = ref(false)
  142. const showOutSourceList = ref(false)
  143. const showChangeTurnover = ref(false)
  144. onLoad(() => {
  145. console.log(store.userInfo)
  146. userInfo.value = store.userInfo || {
  147. nickName: ""
  148. };
  149. store.tenantId = userInfo.value.tenantId;
  150. // console.log("-----------", store.userInfo.roles)
  151. // console.log("-----permissions-----", store.userInfo)
  152. if (store.userInfo.roles.some(item => item.roleId == 124) && store.userInfo.roles.length > 1) {
  153. showTurn.value = true;
  154. showOther.value = true;
  155. } else if (store.userInfo.roles.some(item => item.roleId == 124) && store.userInfo.roles.length == 1) {
  156. showTurn.value = true;
  157. showOther.value = false;
  158. } else if (store.userInfo.roles.some(item => item.roleId == 128)) {
  159. showInspector.value = true
  160. } else {
  161. showTurn.value = false;
  162. showOther.value = true;
  163. }
  164. //盘点状态
  165. if(store.userInfo.takeStock) {
  166. showTakeStock.value = true
  167. }else{
  168. showTakeStock.value = false
  169. }
  170. //巡检
  171. if(store.userInfo.roles.some(item =>item.roleKey == 'patrolInspection')) {
  172. showOnSiteInspector.value = true
  173. }else{
  174. showOnSiteInspector.value = false
  175. }
  176. //交检
  177. if (store.userInfo.roles.some(item => item.roleKey == 'deliveryInspection')) {
  178. showDeliveryInspection.value = true
  179. } else {
  180. showDeliveryInspection.value = false
  181. }
  182. //仪器室
  183. if(store.userInfo.roles.some(item =>item.roleKey == 'instrumentRoomInspection')) {
  184. showInstrumentRoomInspection.value = true
  185. }else{
  186. showInstrumentRoomInspection.value = false
  187. }
  188. //交检审核
  189. if (store.userInfo.roles.some(item => item.roleKey == 'adjuster')) {
  190. showAdjust.value = true
  191. } else {
  192. showAdjust.value = false
  193. }
  194. if (store.userInfo.permissions.some(item => item === 'business:outsource:checkBox') || store.userInfo
  195. .permissions.some(item => item === "*:*:*")) {
  196. showOutSourceList.value = true;
  197. } else {
  198. showOutSourceList.value = false;
  199. }
  200. if (store.userInfo.permissions.some(item => item === 'business:switchDept:change') || store.userInfo
  201. .permissions.some(item => item === "*:*:*")) {
  202. showChangeTurnover.value = true;
  203. } else {
  204. showChangeTurnover.value = false;
  205. }
  206. if (store.userInfo.roles.some(item => item.roleId == 129)) {
  207. showOutsourcedInspector.value = true
  208. // showOther.value = true;
  209. }
  210. init();
  211. })
  212. /******************************** 定义一些方法 ********************************/
  213. function init() {
  214. getTenant();
  215. getUserDepts(store.userInfo.userId, store.tenantId);
  216. //getUserDeptsByTenantId(store.tenantId);
  217. }
  218. // 获取租户列表
  219. function getTenant() {
  220. getTenantList().then((res) => {
  221. if (res.code == 200) {
  222. for (var i = 0; i < res.rows.length; i++) {
  223. tenantList.value[i] = {
  224. text: res.rows[i].orgName,
  225. value: res.rows[i].id
  226. }
  227. }
  228. curSelectedTenantId.value = store.userInfo.tenantId;
  229. }
  230. })
  231. }
  232. // 获取人员工段
  233. function getUserDepts(userId, tenantId) {
  234. userDeptsByTenantId.value = []
  235. getUserDeptList(userId).then((res) => {
  236. if (res.code == 200) {
  237. userDeptList.value = res.data;
  238. for (let i = 0; i < res.data.length; i++) {
  239. if (res.data[i].tenantId == tenantId) {
  240. userDeptsByTenantId.value[i] = {
  241. text: res.data[i].deptName,
  242. value: res.data[i].deptId
  243. }
  244. }
  245. }
  246. if (res.data.some(v => v.hasQuick === 1)) {
  247. showQuick.value = true
  248. } else {
  249. showQuick.value = false
  250. }
  251. }
  252. })
  253. }
  254. // 根据租户id获取到工段
  255. function getUserDeptsByTenantId(tenantId) {
  256. userDeptsByTenantId.value = [];
  257. let newArr = userDeptList.value.filter((item, index, arrs) => item.tenantId == tenantId);
  258. for (var i = 0; i < newArr.length; i++) {
  259. userDeptsByTenantId.value[i] = {
  260. text: newArr[i].deptName,
  261. value: newArr[i].deptId
  262. }
  263. }
  264. }
  265. /*
  266. // 半成品接收
  267. function handleRecerptSfprod() {
  268. if (curSelectedDeptId.value) {
  269. uni.navigateTo({
  270. url: '/pages/recerptSfprod/index'
  271. })
  272. } else {
  273. uni.showToast({
  274. icon: "none",
  275. title: "请选择工段"
  276. })
  277. }
  278. }
  279. */
  280. function handeleToReportHistory() {
  281. uni.navigateTo({
  282. url: '/pages/reportHistory/index'
  283. })
  284. }
  285. function handleToGetLotInfo() {
  286. uni.navigateTo({
  287. url: '/pages/queryLotInfo/index'
  288. })
  289. }
  290. function handleInnerTurnover(){
  291. uni.navigateTo({
  292. url: '/pages/innerTurnover/index'
  293. })
  294. }
  295. function handleFastToProductionPlan() {
  296. if (curSelectedDeptId.value) {
  297. uni.navigateTo({
  298. url: '/pages/fastProductionPlan/index'
  299. })
  300. } else {
  301. uni.showToast({
  302. icon: "none",
  303. title: "请选择工段"
  304. })
  305. }
  306. }
  307. function handleToProductionPlan() {
  308. if (curSelectedDeptId.value) {
  309. uni.navigateTo({
  310. url: '/pages/productionPlan/index'
  311. })
  312. } else {
  313. uni.showToast({
  314. icon: "none",
  315. title: "请选择工段"
  316. })
  317. }
  318. }
  319. //盘点
  320. function handleToTakeStock() {
  321. if (curSelectedDeptId.value) {
  322. uni.navigateTo({
  323. url: '/pages/takeStock/index'
  324. })
  325. } else {
  326. uni.showToast({
  327. icon: "none",
  328. title: "请选择工段"
  329. })
  330. }
  331. }
  332. //交检审核
  333. function handleToAdjust() {
  334. if (curSelectedDeptId.value) {
  335. uni.navigateTo({
  336. url: '/pages/deliveryExamine/index'
  337. })
  338. } else {
  339. uni.showToast({
  340. icon: "none",
  341. title: "请选择工段"
  342. })
  343. }
  344. }
  345. // 分选
  346. function handleToSorting() {
  347. if (curSelectedDeptId.value) {
  348. uni.navigateTo({
  349. url: '/pages/sortProductionPlan/index'
  350. })
  351. } else {
  352. uni.showToast({
  353. icon: "none",
  354. title: "请选择工段"
  355. })
  356. }
  357. }
  358. //检查列表
  359. function handleToInspectionDetails() {
  360. const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
  361. if (mpaasScanModule) {
  362. // 调用插件的 mpaasScan 方法
  363. mpaasScanModule.mpaasScan({
  364. // 扫码识别类型,参数可多选,qrCode、barCode,
  365. // 如不设置,默认识别所有扫码类型,可能有些许影响识别效率
  366. scanType: ["qrCode", "barCode"],
  367. // 是否隐藏相册,默认false不隐藏
  368. hideAlbum: false,
  369. },
  370. (ret) => {
  371. console.log(ret);
  372. let vehicleObj = {
  373. carrierCode: ret.resp_result
  374. };
  375. if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
  376. uni.showToast({
  377. icon: "none",
  378. title: "请扫载具码",
  379. duration: 1000
  380. })
  381. return;
  382. }
  383. checkCarrier({
  384. carrierCode: vehicleObj.carrierCode,
  385. }).then(response => {
  386. if (response.code == 200) {
  387. uni.navigateTo({
  388. url: "/pages/processInspectionReceive/form",
  389. success: (res) => {
  390. // 通过eventChannel向被打开页面传送数据
  391. res.eventChannel.emit("inspecionCarrierCode", {
  392. carrierCode: vehicleObj.carrierCode
  393. })
  394. }
  395. })
  396. } else {
  397. uni.showToast({
  398. icon: 'none',
  399. title: response.msg,
  400. duration: 2000
  401. })
  402. }
  403. })
  404. }
  405. );
  406. } else {
  407. // 测试时用
  408. checkCarrier({
  409. carrierCode: "300088",
  410. }).then(response => {
  411. if (response.code == 200) {
  412. uni.navigateTo({
  413. url: "/pages/processInspectionReceive/form",
  414. success: (res) => {
  415. // 通过eventChannel向被打开页面传送数据
  416. res.eventChannel.emit("inspecionCarrierCode", {
  417. carrierCode: "300088"
  418. })
  419. }
  420. })
  421. } else {
  422. uni.showToast({
  423. icon: 'none',
  424. title: response.msg,
  425. duration: 2000
  426. })
  427. }
  428. })
  429. }
  430. }
  431. // 外协检查
  432. function handleToOutsourcedInspection() {
  433. uni.navigateTo({
  434. url: '/pages/outsourcedInspection/index'
  435. })
  436. }
  437. // 工序检查
  438. function handleToProcessInspection() {
  439. uni.navigateTo({
  440. url: '/pages/processInspection/index'
  441. })
  442. }
  443. //检查
  444. function handleToInspection() {
  445. inspectionTypeDialog.value.open()
  446. }
  447. function handleToHandlingList() {
  448. console.log(store)
  449. uni.navigateTo({
  450. url: '/pages/handlingList/index'
  451. })
  452. }
  453. function handleOutsourceList() {
  454. uni.navigateTo({
  455. url: '/pages/outsourcedReturnCheck/index'
  456. })
  457. }
  458. //
  459. function handleChangeTurnover() {
  460. if (curSelectedDeptId.value) {
  461. uni.navigateTo({
  462. url: '/pages/switchDept/index'
  463. })
  464. } else {
  465. uni.showToast({
  466. icon: "none",
  467. title: "请选择工段"
  468. })
  469. }
  470. }
  471. //交检
  472. function handleToDeliveryInspection() {
  473. if (curSelectedDeptId.value) {
  474. uni.navigateTo({
  475. url: '/pages/deliveryInspection/index'
  476. })
  477. } else {
  478. uni.showToast({
  479. icon: "none",
  480. title: "请选择工段"
  481. })
  482. }
  483. }
  484. //首件检
  485. function handleToFirstInspection() {
  486. if (curSelectedDeptId.value) {
  487. uni.navigateTo({
  488. url: '/pages/switchDept/index'
  489. })
  490. } else {
  491. uni.showToast({
  492. icon: "none",
  493. title: "请选择工段"
  494. })
  495. }
  496. }
  497. //巡检
  498. function handleToOnSiteInspection() {
  499. if (curSelectedDeptId.value) {
  500. uni.navigateTo({
  501. url: '/pages/onSiteInspection/index'
  502. })
  503. } else {
  504. uni.showToast({
  505. icon: "none",
  506. title: "请选择工段"
  507. })
  508. }
  509. }
  510. //仪器室
  511. function handleToInstrumentInspection() {
  512. if (curSelectedDeptId.value) {
  513. //选择仪器室
  514. inspectionChanberRef.value.open()
  515. } else {
  516. uni.showToast({
  517. icon: "none",
  518. title: "请选择工段"
  519. })
  520. }
  521. }
  522. function handleSelectInspectionChamber(data) {
  523. uni.navigateTo({
  524. url: "/pages/instrumentRoomInspection/index",
  525. success: (res) => {
  526. // 通过eventChannel向被打开页面传送数据
  527. res.eventChannel.emit("inspectionChamberInfo", {
  528. data: data
  529. })
  530. }
  531. })
  532. }
  533. //出厂检
  534. function handleToFactoryInspection() {
  535. }
  536. function logout() {
  537. uni.reLaunch({
  538. url: '/pages/index/index'
  539. })
  540. }
  541. function handleSwitchOrQuit() {
  542. let msg = "确认退出登录吗?"
  543. confirm.value.open(msg);
  544. }
  545. /*
  546. // 绑定设备
  547. function handleToEquiPmentList() {
  548. uni.navigateTo({
  549. url: "/pages/equipmentList/index"
  550. })
  551. }
  552. */
  553. function handleTenantChange() {
  554. console.log(curSelectedTenantId)
  555. store.tenantId = curSelectedTenantId.value
  556. curSelectedDeptId.value = null
  557. getUserDeptsByTenantId(store.tenantId)
  558. }
  559. function handleDeptChange() {
  560. let curDept = userDeptList.value.find(item => item.deptId === curSelectedDeptId.value)
  561. store.curDeptDetails = curDept
  562. if (curDept.deptName === '分选' || store.userInfo.roles.some(item => item.roleKey == 'sortingInspector')) {
  563. showSizing.value = true
  564. } else {
  565. showSizing.value = false
  566. }
  567. console.log(store)
  568. handleSelectInnerTurnover()
  569. }
  570. //查询当前工段当前操作者是否能看见内部周转按钮
  571. function handleSelectInnerTurnover() {
  572. listInnerTurnover({deptId:store.curDeptDetails.deptId,userId:store.userInfo.userId}).then(res =>{
  573. if(res.code == 200){
  574. showInnerTurnover.value = res.rows.length>0?true:false
  575. }
  576. })
  577. }
  578. </script>
  579. <style lang="scss">
  580. .page-container {
  581. height: calc(100% - 208rpx);
  582. overflow: auto;
  583. }
  584. .logo-container {
  585. justify-content: center;
  586. .logo {
  587. width: 120rpx;
  588. height: 120rpx;
  589. }
  590. }
  591. .title {
  592. align-items: center;
  593. .label {
  594. font-size: 40rpx;
  595. font-weight: bold;
  596. }
  597. }
  598. .user-info-container {
  599. margin: 16rpx 0 20rpx 20rpx;
  600. align-items: center;
  601. .icon {
  602. width: 120rpx;
  603. height: 120rpx;
  604. justify-content: center;
  605. align-items: center;
  606. border-radius: 60rpx;
  607. border: 1px solid #e1e1e1;
  608. .label {
  609. font-size: 64rpx;
  610. }
  611. }
  612. .user-info {
  613. box-sizing: border-box;
  614. padding-top: 8rpx;
  615. margin-left: 24rpx;
  616. justify-content: center;
  617. // font-size: 20rpx;
  618. .nickname {
  619. margin-bottom: 16rpx;
  620. .label {
  621. font-weight: bold;
  622. font-size: 32rpx;
  623. }
  624. }
  625. .process {
  626. .label {
  627. font-size: 32rpx;
  628. }
  629. }
  630. }
  631. .data-select {
  632. flex: 3;
  633. width: 100%;
  634. height: 50rpx;
  635. border-radius: 18rpx;
  636. background-color: #FFF;
  637. .data-select-options {
  638. width: 200rpx;
  639. }
  640. }
  641. }
  642. .business-btn {
  643. margin: 0 20rpx 20rpx 20rpx;
  644. background-color: #fff;
  645. min-height: 100rpx;
  646. width: 94%;
  647. align-items: center;
  648. justify-content: center;
  649. border: 1rpx solid #e1e1e1;
  650. border-radius: 8rpx;
  651. .label {
  652. font-size: 35rpx;
  653. }
  654. }
  655. .bottom-btn-container {
  656. position: fixed;
  657. right: 20rpx;
  658. bottom: 0;
  659. left: 20rpx;
  660. .start-batch-btn {
  661. // background-color: grey;
  662. background-color: #1684fc;
  663. margin-bottom: 24rpx;
  664. border-radius: 8rpx;
  665. justify-content: center;
  666. align-items: center;
  667. height: 80rpx;
  668. .label {
  669. font-size: 32rpx;
  670. color: #ffffff;
  671. }
  672. }
  673. }
  674. </style>