123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <template>
- <view class="content">
- <view class="navBarBox">
- <view
- class="statusBar"
- :style="{ paddingTop: statusBarHeight + 'px' }"
- ></view>
- <view class="navBar">
- <view>活动</view>
- <image class="logo" mode="scaleToFill"></image>
- </view>
- </view>
- <uni-card v-for="item in 2" :key="item" padding="0" spacing="0">
- <view @click.stop="onClick">
- <image
- slot="cover"
- class="cover"
- src="https://oss.dev.zonelife.cn/static/guida/img/act/15519395654249311.jpg"
- ></image>
- <view class="content-box">
- <view class="title">期待与生活与“粽”不同</view>
- <view class="sub-title">
- 期待与生活与“粽”不同期待与生活与“粽”不同
- </view>
- </view>
- </view>
- </uni-card>
- <zs-tab-bar :value="1"></zs-tab-bar>
- </view>
- </template>
- <script>
- import uniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
- export default {
- components: {
- uniCard,
- },
- data() {
- return {
- navBarHeight: 0,
- statusBarHeight: 0,
- };
- },
- created() {
- this.navBarHeight = this.$navHight(1);
- this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
- this.navBarHeight = this.navBarHeight + 10 + "px";
- },
- methods: {
- onClick() {
- uni.navigateTo({
- url: "/pages/activity/detail",
- });
- },
- },
- };
- </script>
- <style>
- page {
- background-color: #fafafa;
- }
- </style>
- <style lang="scss" scoped>
- .navBarBox .navBar .logo {
- width: 0rpx;
- height: 82rpx;
- // margin-right: 10rpx;
- }
- .navBarBox .navBar {
- font-size: 35rpx;
- font-weight: bold;
- padding: 3rpx 50rpx;
- padding-bottom: 8rpx;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
- .content {
- // padding-top: 24%;
- }
- .cover {
- width: 100%;
- height: 300rpx;
- }
- .content-box {
- padding: 0 20rpx;
- height: 110rpx;
- .title {
- font-weight: bold;
- // 超出文本使用...
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .sub-title {
- font-size: 20rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- </style>
|