first

pages/noticePage/noticeDetail.vue

@@ -0,0 +1,57 @@
+<template>
+  <view class="content">
+    <view class="title">
+      <span>{{ vdata.record.title }}</span>
+    </view>
+    <view class="updatedAt">
+      <span class="author">作者：{{ vdata.record.publisher }}</span>
+      <span>时间：{{ vdata.record.updatedAt }}</span>
+    </view>
+    <!-- mp-html 会有横向滚动条问题 所以采用v-html -->
+    <!-- <mp-html :content="record.content" />	 -->
+    <view v-html="vdata.record.content"></view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { reqLoad, API_URL_SYS_ARTICLES } from '@/http/apiManager.js'
+import { onLoad } from '@dcloudio/uni-app'
+
+onLoad((options) => {
+	reqLoad.getById(API_URL_SYS_ARTICLES, options.id).then( ({bizData}) => {
+		vdata.record = bizData
+	})
+})
+
+const vdata = reactive({
+	record : { }
+})
+
+
+</script>
+<style lang="scss" scoped>
+.content {
+  box-sizing: border-box;
+  padding: 0 50rpx 40rpx 50rpx;
+  .title {
+    // height: 60rpx;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 35rpx;
+    padding: 20rpx 0;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  .updatedAt {
+    padding: 0rpx 0 40rpx 0;
+    color: #969696;
+    font-size: 20rpx;
+    .author {
+      margin-right: 30rpx;
+    }
+  }
+}
+</style>