aggregated_1.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="content-box">
  3. <view class="theme-list">
  4. <image class="theme-img" :src="$getImgPath(themeVo.themeBanner)" mode="scaleToFill"></image>
  5. <view class="theme-item" v-for="item in themeModuleVoList" :key="item.themeModuleId"
  6. @click.stop="openKongKim(item)">
  7. <image class="theme-icon" :src="$getImgPath(item.moduleImage)" mode="aspectFit"></image>
  8. <text class="theme-name zw-one-row">{{item.moduleName}}</text>
  9. <text class="theme-look iconfont_yige">&#xe65f;</text>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import Mixin from "./Mixin.js"
  16. export default {
  17. mixins: [Mixin],
  18. data() {
  19. return {
  20. }
  21. }
  22. }
  23. </script>
  24. <style lang="scss" scoped>
  25. .content-box {
  26. padding: 0 25rpx 25rpx;
  27. min-height: 100vh;
  28. background-color: rgba(248, 248, 248, 1);
  29. }
  30. .theme-img {
  31. width: 100%;
  32. height: 373rpx;
  33. }
  34. .theme-list {
  35. width: 100%;
  36. // padding-top: 30rpx;
  37. background-color: #fff;
  38. border-radius: 0 0 20rpx 20rpx;
  39. .theme-item {
  40. width: 100%;
  41. height: 160rpx;
  42. display: flex;
  43. justify-content: space-between;
  44. align-items: center;
  45. padding: 0 30rpx;
  46. border-bottom: 1rpx solid #F7F7F7;
  47. &:last-child {
  48. border-bottom: none;
  49. }
  50. .theme-icon {
  51. width: 88rpx;
  52. height: 88rpx;
  53. flex-shrink: 0;
  54. }
  55. .theme-name {
  56. flex: 1;
  57. font-size: 30rpx;
  58. font-family: Microsoft YaHei;
  59. font-weight: 400;
  60. color: #333333;
  61. padding: 0 33rpx;
  62. }
  63. .theme-look {
  64. flex-shrink: 0;
  65. // width: 100rpx;
  66. font-size: 30rpx;
  67. font-weight: 400;
  68. color: #333333;
  69. }
  70. }
  71. }
  72. </style>