SelectModule.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div class="center">
  3. <div class="main-btn centerCol" v-for="item in moduleList" @click="handleRouter(item.link)">
  4. <Icon type="ios-podium" size="80" />
  5. <h4 class="color1">{{item.name}}</h4>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: "selectModule",
  12. props:["moduleList"],
  13. methods: {
  14. handleRouter(path) {
  15. this.$router.replace(path)
  16. },
  17. }
  18. }
  19. </script>
  20. <style scoped>
  21. .main-btn {
  22. height: 210px;
  23. width: 210px;
  24. cursor: pointer;
  25. font-size: 16px;
  26. font-weight: 200;
  27. background-color: rgba(179,179,179,.15);
  28. border: 0;
  29. margin: 0 10px;
  30. color: #ccc;
  31. }
  32. .main-btn:hover {
  33. background: rgba(179,179,179,.42);
  34. color: #fff !important;
  35. }
  36. .center {
  37. display: flex;
  38. flex-direction: row;
  39. justify-content: center;
  40. align-items: center;
  41. }
  42. .centerCol {
  43. display: flex;
  44. flex-direction: column;
  45. justify-content: center;
  46. align-items: center;
  47. }
  48. .color1 {
  49. margin-top: 20px;
  50. font-weight: 200;
  51. }
  52. </style>