页面切图

pages/message/feedback.vue

@@ -1,8 +1,8 @@
 <template>
     <view class="content">
         <uni-list :border="false">
-            <uni-list-item :show-badge="item<0" badgeType="error" isDot badge-text="未读" title="机器不稳定"
-                note="2023-02-01 15:10:29" v-for="item in 5" />
+            <uni-list-item :show-badge="index < 1" badgeType="error" isDot badge-text="未读" :title="item.title"
+                note="2023-02-01 15:10:29" v-for="(item, index) in list" :key="index"></uni-list-item>
         </uni-list>
         <uni-load-more status="nomore"></uni-load-more>
     </view>
@@ -12,7 +12,15 @@
 export default {
     data () {
         return {
-            title: '灿能'
+            title: '灿能',
+            list: [
+                {
+                    title: '机器不稳定',
+                },
+                {
+                    title: '死机'
+                },
+            ]
         }
     },
     onLoad () {

pages/message/feedbackDetail.vue

@@ -0,0 +1,66 @@
+<template>
+    <Cn-page :loading='loading'>
+        <view slot='body'>
+            <view class='detail'>
+                <view class="detail-content " style="font-size:32rpx">
+                    <!-- <view class="detail-content-title mb20">发生时间</view> -->
+                    <view>2023-02-14</view>
+                </view>
+                <view class="detail-content ">
+                    <view class="detail-content-title mb20">基础信息</view>
+                    <view class="mb10">CN_NPQS682</view>
+                    <view>发生暂降事件，特征幅值：88%，持续时间：0.047s</view>
+                    <view>
+                        南京市 灿能园区
+                    </view>
+                    <view>
+                        电压等级：0.38kV
+                    </view>
+                    <view>
+                        网路参数：00-B7-8D-A8-00-D3
+                    </view>
+                    <!-- <view class="space-between">请您评价本次事件是否对设备造成影响
+                        
+                    </view> -->
+                </view>
+                <view class="detail-content ">
+                    <view class="detail-content-title mb20">瞬时波形图</view>
+                    <image style="width:100%" src="/static/boxing1.jpeg" mode="widthFix" />
+                </view>
+                <view class="detail-content ">
+                    <view class="detail-content-title mb20">RMS波形图</view>
+                    <image style="width:100%" src="/static/boxing2.jpeg" mode="widthFix" />
+                </view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang='scss'>
+.detail {
+    padding: 20rpx 0;
+
+    .detail-content {
+        padding: 20rpx;
+        background: #fff;
+        margin-bottom: 20rpx;
+        font-size: 26rpx;
+
+        .detail-content-title {
+            font-size: 32rpx;
+            color: #111;
+            font-weight: 700;
+        }
+    }
+}
+</style>