锅炉信息网 > 锅炉知识 > 锅炉资讯

通知界面布局

发布时间:

n<template>n  <view class="page-bg">n    <view class="main-container">n      <view class="tl-flex-ro



n<template>n <view class="page-bg">n <view class="main-container">n <view class="tl-flex-row">n <view>n <image :src="img1" class="tl-img-88"></image>n </view>n <view class="tl-right">n <view class="tl-font-32-29">活动提醒 <text class="tl-time-r tl-font-24-56">2021/3/28</text></view>n <view class="tl-font-28-56 tl-text">你参加的活动《每天读书》还有两小时即将…</view>n </view>n </view>n <view class="tl-flex-row">n <view>n <image :src="img2" class="tl-img-88"></image>n </view>n <view class="tl-right">n <view class="tl-font-32-29">更新提示 <text class="tl-time-r tl-font-24-56">2021/3/28</text></view>n <view class="tl-font-28-56 tl-text">版本更新到2.0啦</view>n </view>n </view>nn <view class="tl-flex-row">n <view>n <image :src="img3" class="tl-img-88"></image>n </view>n <view class="tl-right">n <view class="tl-font-32-29">互动消息 <text class="tl-time-r tl-font-24-56">2021/3/28</text></view>n <view class="tl-font-28-56 tl-text">请前往App查看详情</view>n </view>n </view>nn </view>n </view>n</template>nn<script>nexport default {n data() {n return {n img1: 'https://oss.goin-tech.com/files/202106/73b02611fbb9dc5f8dc5d96c05ee7433.png',n img2: 'https://oss.goin-tech.com/files/202106/c0f581e015601f0ae039d37ff5499f3e.png',n img3: 'https://oss.goin-tech.com/files/202106/9447483246af90413b41262b728d68b5.png',n listData: [],n userId: '',n }n },nn onLoad(options){nn let self = this;n self.userId = options.id;n self.getTypeList();nn },nnnn methods: {n /*n * 获取通知类型列表n * */n getTypeList(){n this.$http.post('getTypeList', {}).then(([error, res]) => {n if(res.data.code == 200) {n let data = res.data.data;n this.listData = [...data]n } else {n this.$common.toast(res.data.message)n }n })n },n }n}n</script>nn<style lang="less">n.page-bg {n width: 100vw;n height: auto;n overflow: hidden;n background-size: 750rpx auto;n background-color: #fff;n}nn.main-container {n width: 710rpx;n margin: 0 auto;n display: flex;n flex-direction: column;n}n.tl-img-88{n width: 88rpx;n height: 88rpx;n}n.tl-flex-row{n display: flex;n justify-content: flex-start;n align-items: center;n height: 166rpx;n border-top: 2rpx solid #DCDCDC;n}n.tl-right{n width: 574rpx;n margin-left: 24rpx;n position: relative;n}n.tl-time-r{n position: absolute;n right: 12rpx;n bottom: 52rpx;n}n.tl-font-32-29{n font-size: 32rpx;n font-family: PingFangSC-Medium, PingFang SC;n font-weight: 500;n color: #292929;n}nn.tl-font-28-56{n font-family: PingFangSC-Regular, PingFang SC;n font-weight: 400;n color: #565656;n font-size: 28rpx;n}nn.tl-font-24-56{n font-family: PingFangSC-Regular, PingFang SC;n font-weight: 400;n color: #565656;n font-size: 24rpx;n}n.tl-text{n width: 520rpx;n display: -webkit-box; /*弹性伸缩盒子模型显示*/n -webkit-box-orient: vertical; /*排列方式*/n -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/n overflow: hidden; /*溢出隐藏*/n}n</style>n

精选推荐

  • 如何正确选择白板供应商
    如何正确选择白板供应商

    目前在无锡想采购一块白板不管是实体店铺,还是网络平台都有很多选择,想要到专业的无锡白板公司采购还需要掌握一定的方式技巧。现

  • 柴油发电机组供应商
    柴油发电机组供应商

      t 扬州华东动力机械有限公司,位于江苏省扬州市江都区仙城工业园,是专业从事发电机、柴油及燃气发电机组研发、制造、销售、服务于

  • 高温辐射炉
    高温辐射炉

    5.2.2高温辐射炉5.2.2.1温度控制★(1)样品温度范围:常温~1400℃。★(2)均温区:长度不小于80mm。★(3)中心区:长度不小于10mm。(4)温度梯度(均

  • 高压锅在什么情况下会爆炸?
    高压锅在什么情况下会爆炸?

    近日,多地发生高压锅爆炸事故,给不少家庭带来了伤害和财产损失。那么,什么情况下会导致高压锅爆炸呢?首先,当高压锅内部压力过高时,如果

0