index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <view class="content">
  3. <view class="navBarBox">
  4. <view
  5. class="statusBar"
  6. :style="{ paddingTop: statusBarHeight + 'px' }"
  7. ></view>
  8. <view class="navBar">
  9. <view>活动</view>
  10. <image class="logo" mode="scaleToFill"></image>
  11. </view>
  12. </view>
  13. <uni-card v-for="item in 2" :key="item" padding="0" spacing="0">
  14. <view @click.stop="onClick">
  15. <image
  16. slot="cover"
  17. class="cover"
  18. src="https://oss.dev.zonelife.cn/static/guida/img/act/15519395654249311.jpg"
  19. ></image>
  20. <view class="content-box">
  21. <view class="title">期待与生活与“粽”不同</view>
  22. <view class="sub-title">
  23. 期待与生活与“粽”不同期待与生活与“粽”不同
  24. </view>
  25. </view>
  26. </view>
  27. </uni-card>
  28. <zs-tab-bar :value="1"></zs-tab-bar>
  29. </view>
  30. </template>
  31. <script>
  32. import uniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
  33. export default {
  34. components: {
  35. uniCard,
  36. },
  37. data() {
  38. return {
  39. navBarHeight: 0,
  40. statusBarHeight: 0,
  41. };
  42. },
  43. created() {
  44. this.navBarHeight = this.$navHight(1);
  45. this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
  46. this.navBarHeight = this.navBarHeight + 10 + "px";
  47. },
  48. methods: {
  49. onClick() {
  50. uni.navigateTo({
  51. url: "/pages/activity/detail",
  52. });
  53. },
  54. },
  55. };
  56. </script>
  57. <style>
  58. page {
  59. background-color: #fafafa;
  60. }
  61. </style>
  62. <style lang="scss" scoped>
  63. .navBarBox .navBar .logo {
  64. width: 0rpx;
  65. height: 82rpx;
  66. // margin-right: 10rpx;
  67. }
  68. .navBarBox .navBar {
  69. font-size: 35rpx;
  70. font-weight: bold;
  71. padding: 3rpx 50rpx;
  72. padding-bottom: 8rpx;
  73. display: flex;
  74. flex-direction: row;
  75. justify-content: center;
  76. align-items: center;
  77. }
  78. .content {
  79. // padding-top: 24%;
  80. }
  81. .cover {
  82. width: 100%;
  83. height: 300rpx;
  84. }
  85. .content-box {
  86. padding: 0 20rpx;
  87. height: 110rpx;
  88. .title {
  89. font-weight: bold;
  90. // 超出文本使用...
  91. overflow: hidden;
  92. text-overflow: ellipsis;
  93. white-space: nowrap;
  94. }
  95. .sub-title {
  96. font-size: 20rpx;
  97. overflow: hidden;
  98. text-overflow: ellipsis;
  99. white-space: nowrap;
  100. }
  101. }
  102. </style>