index.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template>
  2. <div class="page">
  3. <div class="page-top flex flex-col justify-center items-center">
  4. <img class="logo" :src="supplierInfo.logo" />
  5. <div class="name mt-2" v-text="supplierInfo.shopName + '正品授权'"></div>
  6. </div>
  7. <div class="page-content">
  8. <div class="list">
  9. <div
  10. class="section flex flex-col justify-center items-center mt-5 mb-5"
  11. v-for="item in list"
  12. :key="item.id"
  13. @click="toDetail(item)"
  14. >
  15. <div class="icon-image" :class="'item' + item.id"></div>
  16. <div class="mt-3 mb-3"></div>
  17. <div class="name" v-text="item.name"></div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import { mapGetters } from 'vuex'
  25. export default {
  26. layout: 'app',
  27. data() {
  28. return {
  29. list: [],
  30. }
  31. },
  32. asyncData() {
  33. return {
  34. list: [
  35. {
  36. id: 1,
  37. name: '机构认证',
  38. path: '/approve/club',
  39. },
  40. {
  41. id: 2,
  42. name: '设备认证',
  43. path: '/approve/device',
  44. },
  45. {
  46. id: 3,
  47. name: '医师认证',
  48. path: '/approve/personnel/operate',
  49. },
  50. ],
  51. }
  52. },
  53. computed: {
  54. ...mapGetters(['supplierInfo', 'routePrefix']),
  55. },
  56. methods: {
  57. toDetail(item) {
  58. const url = this.routePrefix + item.path
  59. this.$router.push(url)
  60. },
  61. },
  62. }
  63. </script>
  64. <style scoped lang="scss">
  65. // pc 端
  66. @media screen and (min-width: 768px) {
  67. .page {
  68. min-height: calc(100vh - 80px - 80px);
  69. background-color: #fff;
  70. }
  71. .page-top {
  72. height: 360px;
  73. @include themify($themes) {
  74. background: themed('pc-banner-approve');
  75. background-size: auto 360px;
  76. }
  77. .logo {
  78. display: block;
  79. width: 120px;
  80. height: 120px;
  81. border-radius: 50%;
  82. background: #fff;
  83. }
  84. .name {
  85. font-size: 30px;
  86. color: #fff;
  87. }
  88. }
  89. .page-content {
  90. width: 1200px;
  91. margin: 0 auto;
  92. .list {
  93. display: flex;
  94. justify-content: space-between;
  95. align-items: center;
  96. }
  97. .section {
  98. width: 380px;
  99. height: 220px;
  100. background-size: 380px 220px;
  101. margin-left: auto;
  102. margin-right: auto;
  103. cursor: pointer;
  104. transition: all 0.4s;
  105. &:hover {
  106. box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
  107. }
  108. .icon {
  109. width: 48px;
  110. height: 48px;
  111. }
  112. .line {
  113. width: 24px;
  114. height: 2px;
  115. @include themify($themes) {
  116. background-color: themed('color');
  117. }
  118. }
  119. .name {
  120. font-size: 20px;
  121. color: #fff;
  122. }
  123. .icon-image {
  124. width: 48px;
  125. height: 48px;
  126. background-size: 48px 48px;
  127. background-repeat: no-repeat;
  128. background-position: center;
  129. &.item1 {
  130. background-image: url(~assets/theme-images/common/pc-icon-club.png);
  131. }
  132. &.item2 {
  133. background-image: url(~assets/theme-images/common/pc-icon-device.png);
  134. }
  135. &.item3 {
  136. background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
  137. }
  138. }
  139. &:nth-child(1) {
  140. @include themify($themes) {
  141. background-image: themed('pc-entry-club-bg');
  142. }
  143. }
  144. &:nth-child(2) {
  145. @include themify($themes) {
  146. background-image: themed('pc-entry-device-bg');
  147. }
  148. }
  149. &:nth-child(3) {
  150. @include themify($themes) {
  151. background-image: themed('pc-entry-doctor-bg');
  152. }
  153. }
  154. }
  155. }
  156. }
  157. // 移动 端
  158. @media screen and (max-width: 768px) {
  159. .page-top {
  160. height: 46vw;
  161. @include themify($themes) {
  162. background: themed('h5-banner-approve');
  163. background-size: auto 46vw;
  164. }
  165. .logo {
  166. display: block;
  167. width: 14.8vw;
  168. height: 14.8vw;
  169. border-radius: 50%;
  170. background: #fff;
  171. }
  172. .name {
  173. font-size: 4vw;
  174. color: #fff;
  175. }
  176. }
  177. .page-content {
  178. .section {
  179. width: 92vw;
  180. height: 42vw;
  181. background-size: 92vw 42vw;
  182. margin-left: auto;
  183. margin-right: auto;
  184. .icon {
  185. width: 8.8vw;
  186. height: 8.8vw;
  187. }
  188. .line {
  189. width: 4.2vw;
  190. height: 0.3vw;
  191. @include themify($themes) {
  192. background-color: themed('color');
  193. }
  194. }
  195. .name {
  196. font-size: 4.2vw;
  197. color: #fff;
  198. }
  199. .icon-image {
  200. width: 48px;
  201. height: 48px;
  202. background-size: 48px 48px;
  203. background-repeat: no-repeat;
  204. background-position: center;
  205. &.item1 {
  206. background-image: url(~assets/theme-images/common/pc-icon-club.png);
  207. }
  208. &.item2 {
  209. background-image: url(~assets/theme-images/common/pc-icon-device.png);
  210. }
  211. &.item3 {
  212. background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
  213. }
  214. }
  215. &:nth-child(1) {
  216. @include themify($themes) {
  217. background-image: themed('pc-entry-club-bg');
  218. }
  219. }
  220. &:nth-child(2) {
  221. @include themify($themes) {
  222. background-image: themed('pc-entry-device-bg');
  223. }
  224. }
  225. &:nth-child(3) {
  226. @include themify($themes) {
  227. background-image: themed('pc-entry-doctor-bg');
  228. }
  229. }
  230. }
  231. }
  232. }
  233. </style>