detail.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721
  1. <template>
  2. <div class="device-detail">
  3. <template v-if="productInfo">
  4. <div class="detail-title">设备认证</div>
  5. <div class="page-top">
  6. <div class="swiper-body">
  7. <img :src="productInfo.pcImage" class="device-image" />
  8. <div class="auth-seal"></div>
  9. <img
  10. class="auth-card"
  11. :src="authCardImage"
  12. @click="onShowAuthCard"
  13. v-if="!showAuthCard"
  14. />
  15. <img class="auth-logo" :src="brandLogoImage" />
  16. </div>
  17. <div class="device-info">
  18. <div class="logo">
  19. <div class="logo-swiper" v-if="clubLogo.length > 1">
  20. <SimpleSwiper
  21. :imageList="clubLogo"
  22. :pagination="false"
  23. ></SimpleSwiper>
  24. </div>
  25. <img :src="clubLogo[0]" alt="logo" v-else />
  26. </div>
  27. <div class="section">
  28. <div class="name" v-text="productInfo.productName"></div>
  29. <div class="sncode mobile">
  30. SN码:<span>{{ productInfo.snCode | snCodeRender }}</span>
  31. </div>
  32. <div class="row">
  33. <!-- <span>产地:{{ productInfo.producePlace }}</span> -->
  34. <span>品牌:{{ productInfo.brandName }}</span
  35. ><i></i>
  36. <span v-if="productInfo.producePlaceType === 1">产地:{{ productInfo.producePlace }}</span>
  37. <span v-if="productInfo.producePlaceType === 2">技术授权方:{{ productInfo.producePlace }}</span>
  38. <!-- <span>品牌:RÖS'S</span><i></i><span>产地:西班牙巴塞罗那</span> -->
  39. </div>
  40. <div class="sncode pc">
  41. SN码:<span>{{ productInfo.snCode | snCodeRender }}</span>
  42. </div>
  43. <div class="maker" v-if="productInfo.manufacturerType === 1">制造商:{{ productInfo.manufacturer }}</div>
  44. <div class="maker" v-if="productInfo.manufacturerType === 2">制造委托方:{{ productInfo.manufacturer }}</div>
  45. <div class="supplier">供应商:{{ productInfo.shopName }}</div>
  46. <!-- <div class="supplier">供应商:ACEBELLE生物科技(深圳)有限公司</div> -->
  47. </div>
  48. <div class="auth" v-if="productInfo">
  49. <div class="auth-icon"></div>
  50. <template v-for="item in productInfo.clubList">
  51. <div class="auth-info" :key="item.authId">
  52. <span class="font-bold">{{productInfo.shopName}}</span>
  53. <span>授予</span>
  54. <span>{{ item.authParty }}</span>
  55. <span>正品拥有</span>
  56. </div>
  57. </template>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="page-content">
  62. <div class="device-params">
  63. <div class="title">相关参数</div>
  64. <div class="line"></div>
  65. <div class="params">
  66. <div class="row" v-for="(row, index) in paramListRender" :key="index">
  67. <template v-for="(col, index) in row">
  68. <div class="col" :key="'name' + index">
  69. {{ col.paramName }}{{ isPc ? ':' : '' }}
  70. </div>
  71. <div class="col" :key="'content' + index">
  72. {{ col.paramContent }}
  73. </div>
  74. </template>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </template>
  80. <!-- 设备为空 -->
  81. <SimpleEmpty
  82. v-else
  83. name="icon-empty-device.png"
  84. description="暂无关联设备信息~"
  85. />
  86. <!-- 授权牌弹窗 -->
  87. <div class="mask" v-if="showAuthCard" @click="onHideAuthCard"></div>
  88. <transition
  89. enter-active-class="animate__zoomIn"
  90. leave-active-class="animate__zoomOut"
  91. >
  92. <div class="auth-card-content animate__animated" v-if="showAuthCard">
  93. <div class="auth-card-popup">
  94. <span class="el-icon-circle-close" @click="onHideAuthCard"></span>
  95. <img :src="authCardImage" />
  96. </div>
  97. </div>
  98. </transition>
  99. </div>
  100. </template>
  101. <script>
  102. import deviceDetailMixin from '@/mixins/deviceDetail'
  103. export default {
  104. layout: 'app-ph',
  105. mixins: [deviceDetailMixin],
  106. }
  107. </script>
  108. <style lang="scss" scoped>
  109. ::v-deep {
  110. .swiper-pagination-bullet {
  111. @include useTheme() {
  112. background: fetch('color') !important;
  113. }
  114. }
  115. .simple-swiper {
  116. .swiper-pagination-bullet-active {
  117. @include useTheme() {
  118. background: fetch('color') !important;
  119. }
  120. }
  121. }
  122. }
  123. .mask {
  124. width: 100vw;
  125. height: 100vh;
  126. position: fixed;
  127. left: 0;
  128. top: 0;
  129. z-index: 8;
  130. background: rgba(0, 0, 0, 0.5);
  131. }
  132. // pc 端
  133. @media screen and (min-width: 768px) {
  134. .device-detail {
  135. @include useTheme() {
  136. margin-bottom: 48px;
  137. .auth-card-content {
  138. width: 100vw;
  139. height: 100vh;
  140. position: fixed;
  141. left: 0;
  142. top: 0;
  143. display: flex;
  144. justify-content: center;
  145. align-items: center;
  146. z-index: 9;
  147. .auth-card-popup {
  148. position: relative;
  149. width: 622px;
  150. img {
  151. display: block;
  152. width: 100%;
  153. height: auto;
  154. }
  155. .el-icon-circle-close {
  156. position: absolute;
  157. top: -50px;
  158. right: 0;
  159. font-size: 32px;
  160. color: #fff;
  161. cursor: pointer;
  162. }
  163. }
  164. }
  165. .detail-title {
  166. font-size: 24px;
  167. color: #282828;
  168. margin: 32px auto 24px;
  169. width: 1200px;
  170. }
  171. .page-top,
  172. .page-content {
  173. width: 1200px;
  174. margin: 0 auto;
  175. background: #fff;
  176. }
  177. .page-top {
  178. display: flex;
  179. justify-content: space-between;
  180. align-items: flex-start;
  181. padding: 24px;
  182. padding-right: 40px;
  183. .swiper-body {
  184. position: relative;
  185. width: 540px;
  186. height: 540px;
  187. background: #f7f7f7;
  188. .device-image {
  189. width: 100%;
  190. height: 100%;
  191. }
  192. .auth-seal {
  193. position: absolute;
  194. width: 70px;
  195. height: 70px;
  196. background: url(~assets/theme-images/normal/pc/icon-auth-seal.png)
  197. no-repeat center;
  198. background-size: 70px;
  199. right: 24px;
  200. bottom: 24px;
  201. z-index: 2;
  202. }
  203. .auth-card {
  204. position: absolute;
  205. width: auto;
  206. height: 110px;
  207. display: block;
  208. bottom: 24px;
  209. left: 24px;
  210. z-index: 2;
  211. cursor: pointer;
  212. }
  213. .auth-logo {
  214. position: absolute;
  215. max-width: 120px;
  216. max-height: 120px;
  217. top: 24px;
  218. left: 24px;
  219. z-index: 2;
  220. }
  221. }
  222. .device-info {
  223. width: 572px;
  224. position: relative;
  225. .section {
  226. width: 440px;
  227. word-break: break-all;
  228. }
  229. .logo {
  230. width: 114px;
  231. height: 114px;
  232. border-radius: 50%;
  233. // background: #d8d8d8;
  234. border: 1px solid #d8d8d8;
  235. // box-sizing: border-box;
  236. position: absolute;
  237. right: 0;
  238. top: 0;
  239. .logo-swiper {
  240. width: 112px;
  241. height: 112px;
  242. overflow: hidden;
  243. border-radius: 50%;
  244. }
  245. ::v-deep {
  246. img {
  247. width: 112px;
  248. height: 112px;
  249. border-radius: 50%;
  250. }
  251. }
  252. &::after {
  253. content: '';
  254. position: absolute;
  255. z-index: 1;
  256. right: 6px;
  257. bottom: 0;
  258. display: block;
  259. width: 24px;
  260. height: 24px;
  261. background: url(~assets/theme-images/normal/pc/icon-auth-ren.png)
  262. no-repeat center;
  263. background-size: 23px;
  264. }
  265. img {
  266. display: block;
  267. width: 100%;
  268. height: 100%;
  269. // background: pink;
  270. border-radius: 50%;
  271. }
  272. }
  273. .name {
  274. font-size: 24px;
  275. color: #282828;
  276. line-height: 1.6;
  277. margin-bottom: 24px;
  278. font-weight: bold;
  279. }
  280. .row,
  281. .sncode,
  282. .maker {
  283. margin-bottom: 16px;
  284. }
  285. .row {
  286. line-height: 24px;
  287. i {
  288. position: relative;
  289. margin: 0 16px;
  290. &::after {
  291. content: '';
  292. display: block;
  293. width: 1px;
  294. height: 16px;
  295. background: #999999;
  296. position: absolute;
  297. top: 0;
  298. left: 0;
  299. }
  300. }
  301. span {
  302. font-size: 18px;
  303. color: #999999;
  304. }
  305. }
  306. .sncode.mobile {
  307. display: none;
  308. }
  309. .sncode.pc {
  310. font-size: 18px;
  311. color: #282828;
  312. }
  313. .supplier,
  314. .maker {
  315. font-size: 20px;
  316. color: #282828;
  317. }
  318. .auth {
  319. width: 100%;
  320. min-height: 114px;
  321. background: fetch('color') !important;
  322. margin-top: 56px;
  323. box-sizing: border-box;
  324. padding: 24px;
  325. .auth-icon {
  326. height: 28px;
  327. background: url(~assets/theme-images/normal/pc/icon-auth2.png)
  328. no-repeat left center;
  329. background-size: auto 28px;
  330. margin-bottom: 10px;
  331. }
  332. .auth-info {
  333. font-size: 0;
  334. span {
  335. font-size: 20px;
  336. color: #fff;
  337. }
  338. }
  339. }
  340. }
  341. }
  342. .page-content {
  343. margin-top: 16px;
  344. box-sizing: border-box;
  345. padding: 24px;
  346. .device-params {
  347. .title {
  348. font-size: 28px;
  349. color: #282828;
  350. font-weight: bold;
  351. }
  352. .line {
  353. height: 1px;
  354. background: #ececec;
  355. position: relative;
  356. margin-top: 10px;
  357. margin-bottom: 20px;
  358. &::after {
  359. content: '';
  360. position: absolute;
  361. width: 73px;
  362. height: 2px;
  363. background: fetch('color') !important;
  364. left: 0;
  365. bottom: 0;
  366. }
  367. }
  368. .params {
  369. width: 100%;
  370. .row {
  371. display: table-row;
  372. width: 100%;
  373. }
  374. .col {
  375. display: table-cell;
  376. font-size: 16px;
  377. padding: 12px 0;
  378. &:nth-child(2n-1) {
  379. color: #999999;
  380. white-space: nowrap;
  381. }
  382. &:nth-child(2n) {
  383. color: #282828;
  384. padding-left: 12px;
  385. }
  386. &:nth-child(3) {
  387. padding-left: 100px;
  388. }
  389. }
  390. }
  391. }
  392. }
  393. }
  394. }
  395. }
  396. // 移动端
  397. @media screen and (max-width: 768px) {
  398. .device-detail {
  399. @include useTheme() {
  400. .detail-title {
  401. display: none;
  402. }
  403. .auth-card-content {
  404. width: 100vw;
  405. height: 100vh;
  406. position: fixed;
  407. left: 0;
  408. top: 0;
  409. display: flex;
  410. justify-content: center;
  411. align-items: center;
  412. z-index: 9;
  413. .auth-card-popup {
  414. position: relative;
  415. width: 86vw;
  416. img {
  417. display: block;
  418. width: 100%;
  419. height: auto;
  420. }
  421. .el-icon-circle-close {
  422. position: absolute;
  423. top: -8vw;
  424. right: 0;
  425. font-size: 7vw;
  426. color: #fff;
  427. cursor: pointer;
  428. }
  429. }
  430. }
  431. .page-top,
  432. .page-content {
  433. margin: 0 auto;
  434. background: #fff;
  435. }
  436. .page-top {
  437. .swiper-body {
  438. position: relative;
  439. width: 100vw;
  440. height: 100vw;
  441. background: #f7f7f7;
  442. .device-image {
  443. width: 100%;
  444. height: 100%;
  445. }
  446. ::v-deep {
  447. img {
  448. width: 100vw;
  449. height: 100vw;
  450. }
  451. }
  452. .auth-seal {
  453. position: absolute;
  454. width: 13.8vw;
  455. height: 13.8vw;
  456. background: url(~assets/theme-images/normal/h5/icon-auth-seal.png)
  457. no-repeat center;
  458. background-size: 13.8vw;
  459. right: 4vw;
  460. bottom: 4vw;
  461. z-index: 2;
  462. }
  463. .auth-card {
  464. position: absolute;
  465. width: auto;
  466. height: 20.6vw;
  467. display: block;
  468. bottom: 4vw;
  469. left: 4vw;
  470. z-index: 2;
  471. }
  472. .auth-logo {
  473. position: absolute;
  474. max-width: 18vw;
  475. max-height: 18vw;
  476. top: 4vw;
  477. left: 4vw;
  478. z-index: 2;
  479. }
  480. }
  481. .device-info {
  482. position: relative;
  483. .section {
  484. word-break: break-all;
  485. padding: 4vw 4vw 0;
  486. }
  487. .logo {
  488. width: 18vw;
  489. height: 18vw;
  490. border-radius: 50%;
  491. // background: #d8d8d8;
  492. border: 0.1vw solid #d8d8d8;
  493. box-sizing: border-box;
  494. position: absolute;
  495. right: 4vw;
  496. top: 5.8vw;
  497. .logo-swiper {
  498. width: 18vw;
  499. height: 18vw;
  500. overflow: hidden;
  501. border-radius: 50%;
  502. }
  503. ::v-deep {
  504. img {
  505. width: 18vw;
  506. height: 18vw;
  507. border-radius: 50%;
  508. }
  509. }
  510. &::after {
  511. content: '';
  512. position: absolute;
  513. z-index: 1;
  514. right: 0.7vw;
  515. bottom: 0;
  516. display: block;
  517. width: 3.6vw;
  518. height: 3.6vw;
  519. background: url(~assets/theme-images/normal/h5/icon-auth-ren.png)
  520. no-repeat center;
  521. background-size: 3.6vw;
  522. }
  523. img {
  524. display: block;
  525. width: 100%;
  526. height: 100%;
  527. // background: pink;
  528. border-radius: 50%;
  529. }
  530. }
  531. .name {
  532. font-size: 5.4vw;
  533. color: #282828;
  534. line-height: 7.4vw;
  535. margin-bottom: 2.4vw;
  536. font-weight: bold;
  537. }
  538. .sncode.pc {
  539. display: none;
  540. }
  541. .sncode.mobile {
  542. margin: 2.4vw 0 5.6vw;
  543. color: #282828;
  544. font-size: 4vw;
  545. }
  546. .row {
  547. line-height: 4.7vw;
  548. i {
  549. position: relative;
  550. margin: 0 4vw;
  551. &::after {
  552. content: '';
  553. display: block;
  554. width: 0.2vw;
  555. height: 3vw;
  556. background: #282828;
  557. position: absolute;
  558. top: 1vw;
  559. left: 0;
  560. }
  561. }
  562. span {
  563. font-size: 3.6vw;
  564. color: #282828;
  565. }
  566. }
  567. .row,
  568. .maker {
  569. margin-bottom: 1.2vw;
  570. }
  571. .supplier,
  572. .maker {
  573. font-size: 3.6vw;
  574. color: #282828;
  575. }
  576. .auth {
  577. // width: 100%;
  578. margin: 0 4vw;
  579. min-height: 20vw;
  580. background: fetch('color') !important;
  581. margin-top: 4vw;
  582. box-sizing: border-box;
  583. padding: 5.2vw 4vw;
  584. border-radius: 1.2vw;
  585. .auth-icon {
  586. height: 4.9vw;
  587. background: url(~assets/theme-images/normal/h5/icon-auth2.png)
  588. no-repeat left center;
  589. background-size: auto 4.9vw;
  590. margin-bottom: 1vw;
  591. }
  592. .auth-info {
  593. font-size: 0;
  594. span {
  595. font-size: 3.6vw;
  596. line-height: 6.4vw;
  597. color: #fff;
  598. font-weight: bold;
  599. }
  600. }
  601. }
  602. }
  603. }
  604. .page-content {
  605. .device-params {
  606. padding: 8vw 4vw;
  607. box-sizing: border-box;
  608. .title {
  609. font-size: 4.6vw;
  610. color: #282828;
  611. font-weight: bold;
  612. }
  613. .line {
  614. // height: 0.2vw;
  615. // background: #ececec;
  616. position: relative;
  617. margin-top: 4.7vw;
  618. margin-bottom: 1.2vw;
  619. }
  620. .params {
  621. width: 100%;
  622. word-break: break-all;
  623. text-align: justify;
  624. .row {
  625. display: table-row;
  626. width: 100%;
  627. &:first-child {
  628. .col {
  629. padding-top: 0;
  630. }
  631. }
  632. &:last-child {
  633. .col {
  634. padding-bottom: 0;
  635. }
  636. }
  637. }
  638. .col {
  639. display: table-cell;
  640. font-size: 3.6vw;
  641. padding: 1.6vw 0;
  642. &:nth-child(2n-1) {
  643. color: #282828;
  644. padding-right: 3.2vw;
  645. font-weight: bold;
  646. white-space: nowrap;
  647. border-right: 0.2vw solid #d8d8d8;
  648. }
  649. &:nth-child(2n) {
  650. color: #4e4e4e;
  651. padding-left: 3.2vw;
  652. }
  653. }
  654. }
  655. }
  656. }
  657. }
  658. }
  659. }
  660. </style>