更新代码

src/views/news/detail.vue

@@ -1,23 +1,80 @@
 <script setup>
 import {onMounted} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
+
+import {newsDetail} from './mock'
 
 const route = useRoute()
-const id = route.query.id // 就是 /news/123 里的 123
 
-console.log('id===>', id)
+const detail = route.query
 
-onMounted(() => {
-  console.log('id===>', id)
-})
+detail.artical = newsDetail.find((item) => item.id == route.query.id).article
+
+const router = useRouter()
+onMounted(() => {})
+
+const toBack = () => {
+  router.back()
+}
 </script>
 
 <template>
-  <div>
-    <div class="placeholder">
-      {{ id }}
+  <div class="page flex column a-c">
+    <div class="label">
+      {{ detail.label }}
     </div>
+    <div class="time">
+      {{ detail.time }}
+    </div>
+    <div class="img">
+      <img :src="`./static/images/${detail.imgUrl}`" alt="" />
+    </div>
+    <div class="artical">
+      {{ detail.artical }}
+    </div>
+    <div class="back" @click="toBack">返回</div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.label {
+  margin: 64px 0 20px 0;
+  font-family: 'PingFang SC';
+  font-weight: 500;
+  font-size: 28px;
+  color: $black;
+}
+.time {
+  margin-bottom: 40px;
+}
+.img {
+  width: 1200px;
+  height: 600px;
+  margin-bottom: 40px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.artical {
+  width: 1200px;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+  font-size: 18px;
+  color: $black;
+  text-indent: 2em;
+  white-space: pre-wrap; /* 保留换行符，同时允许自动折行 */
+  word-break: break-word; /* 长单词截断 */
+  margin-bottom: 300px;
+}
+.back {
+  padding: 10px 40px;
+  background: #0389ff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+  margin-bottom: 60px;
+  font-size: 20px;
+  color: $white;
+  cursor: pointer;
+}
+</style>