add:网站新闻业页面，首页增加

src/views/pc/news/detail.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="detail">
+    <div class="banner"></div>
+    <div class="container">
+      <div class="breadcrumb">
+        <a href="#">首页</a>
+        <right-outlined class="iconarrow" />
+        <a href="#">新闻中心</a>
+        <right-outlined class="iconarrow" />
+        <span>新闻详情</span>
+      </div>
+      <div class="content">
+        <div class="title">{{ newsDetail.title }}</div>
+        <div class="time">
+          <p>来源：泰山先锋</p>
+          <p>2022年10月23日12:23</p>
+        </div>
+        <div class="newImg">
+          <img :src="newsDetail.image" alt="" />
+        </div>
+        <div class="nr">
+          {{ newsDetail.desc }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { RightOutlined } from '@ant-design/icons-vue'
+const route = useRoute()
+const newsDetail = ref(
+  {
+    id: 1,
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    time: '2021-11-15',
+    desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管......',
+    image: '../../../src/assets/images/new1.png'
+  }
+)
+// 需要添加根据路由参数获取数据的逻辑
+onMounted(() => {
+  const newsId = route.params.id
+  if (newsId) {
+    // 这里应该调用 API 获取对应的新闻详情
+    fetchNewsDetail(newsId)
+  }
+})
+
+const fetchNewsDetail = (id: any) => {
+  // 模拟 API 调用
+  // 实际应该调用后端接口获取数据
+  console.log('获取新闻详情，ID:', id)
+}
+</script>
+<style lang="less" scoped>
+.detail {
+
+  .banner {
+    width: 100%;
+    height: 450px;
+    background: url('./../../../assets/images/newbanner.png')center center no-repeat;
+    background-size: cover;
+  }
+
+  .container {
+    max-width: 1200px;
+    padding: 27px 0 60px;
+    margin: auto;
+
+    // 标题部分，面包屑
+    .breadcrumb {
+      border-bottom: 1px solid #e5e5e5;
+      padding-bottom: 14px;
+
+      a {
+        color: #666666;
+      }
+
+      .iconarrow {
+        padding: 0 3px;
+        color: #666666;
+      }
+
+    }
+
+    .content {
+      padding: 31px 0 67px;
+
+      .title {
+        font-size: 36px;
+        font-weight: 700;
+        color: rgba(26, 25, 25, 1);
+      }
+
+      .time {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .newImg {
+        width: 676px;
+        height: 330px;
+
+        img {}
+      }
+    }
+  }
+}
+</style>