usky-web-mobile/src/pages/info.vue

<template>
  <u-navbar :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color" @rightClick="rightButtonClick()">
    <template #left>
      <view class="u-nav-slot">
        <!-- <u-icon name="arrow-left" size="19" color="#fff" style="display: none"></u-icon> -->
        <view class="u-navbar__content__title" style="color: #fff">消息</view>
      </view>
    </template>
    <template #center>
      <view class="u-nav-slot"> </view>
    </template>
    <template #right>
      <view class="u-nav-slot">
        <u-icon name="plus" size="19" color="#fff" style="display: none"></u-icon>
      </view>
    </template>
  </u-navbar>

  <u-sticky style="top: 0px">
    <view class="padding-lr ptb10" :class="'bg-' + proxy.$settingStore.themeColor.name">
      <u--input placeholder="搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" customStyle="height:35px;background-color:#f5f6fa;"></u--input>
    </view>
  </u-sticky>

  <scroll-view class="bg-white info-wrapper" scroll-y :style="`height: calc(100vh - (105px + ${proxy.$settingStore.barHightTop} + ${proxy.$settingStore.tabBarHeight}))`">
    <view class="uni-content-body">
      <view class="uni-list padding" @tap="goApplicationInfo()">
        <view class="uni-avatar">
          <image class="image-bg" src="@/static/images/common/applicationInfo.png" />
        </view>
        <view class="uni-content">
          <view class="uni-item">
            <view class="uni-item-cont text-dfl" style="color: #000000">应用消息</view>
            <!-- <view class="uni-item-right text-sm" style="color: #909399">5月15日</view> -->
          </view>
          <view class="flex uni-item">
            <view class="uni-item-cont text-df" style="color: #909399">您收到一条最新消息，请及时查看</view>
            <!-- <view class="uni-item-right text-df" style="margin: auto 0">
              <u-badge numberType="overflow" max="99" :value="1"></u-badge>
            </view> -->
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="uni-content-body">
      <view class="uni-list padding" @tap="goFireBase()">
        <view class="uni-avatar">
          <image class="image-bg" src="@/static/images/info/fireBase.png" />
        </view>
        <view class="uni-content">
          <view class="uni-item">
            <view class="uni-item-cont text-dfl" style="color: #000000">消防知识库</view>
            <view class="uni-item-right text-sm" style="color: #909399">5月15日</view>
          </view>
          <view class="flex uni-item">
            <view class="uni-item-cont text-df" style="color: #909399">您收到一条最新消息，请及时查看</view>
            <view class="uni-item-right text-df" style="margin: auto 0">
              <u-badge numberType="overflow" max="99" :value="1"></u-badge>
            </view>
          </view>
        </view>
      </view>
    </view> -->
  </scroll-view>

  <oa-tabbar :tabbarValue="1"></oa-tabbar>
</template>

<script setup>
import fireBase from "@/static/images/info/fireBase.png";
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";

import {} from "@/api/mine/info.js";

const { proxy } = getCurrentInstance();

const data = reactive({
  indexBackgroundImage: fireBase,
});

const { indexBackgroundImage } = toRefs(data);

function goApplicationInfo() {
  proxy.$tab.navigateTo("/pages/common/applicationInfo/index");
}

function goFireBase() {
  proxy.$tab.navigateTo("/pages/info/fireBase/fireBase");
}
function goPushList() {
  proxy.$tab.navigateTo("/pages/info/pushList/pushList");
}

onShow(() => {});

onLoad((options) => {
  uni.hideTabBar(); //隐藏自带tabbar
});
</script>

<style lang="scss" scoped>
:deep(.u-navbar__content__left) {
  padding: 30upx;
}

.uni-list {
  display: flex;

  .uni-avatar {
    margin: auto 20upx auto 0;
    .image-bg {
      width: 32px;
      height: 32px;
    }
  }

  .uni-content {
    width: calc(100% - (32px + 0.625rem));
    .uni-item {
      display: flex;
      line-height: 25px;
      white-space: nowrap;

      .uni-item-cont {
        margin-right: auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .uni-item-right {
        width: auto;
        text-align: right;
      }
    }
  }
}
</style>