news

src/components/swiper/index.vue

@@ -31,6 +31,7 @@ let autoPlayTimer = null
 const itemWidth = computed(() => $fontSize(props.sourceWidth))
 const itemHeight = computed(() => $fontSize(props.sourceHeight))
 const itemGap = computed(() => $fontSize(props.sourceGap))
+
 const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
 const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
 const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')

src/utils/rem.js

@@ -11,16 +11,12 @@ function setRem() {
   // 当前页面宽度相对于设计稿宽度的缩放比例
   const scale = document.documentElement.clientWidth / designWidth
   // 设置页面根节点字体大小（最高放大比例为maxScale）
-  document.documentElement.style.fontSize =
-    baseSize * Math.min(scale, maxScale) + 'px'
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
 }
 
 // 根据设计稿尺寸计算实际尺寸
 export function fontSize(res) {
-  const clientWidth =
-    window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth
+  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
   if (!clientWidth) return res
   const scale = clientWidth / designWidth
   return res * Math.min(scale, maxScale)

src/views/about/index.vue

@@ -29,37 +29,19 @@ const imgList = [
     id: 2,
     width: 210,
     height: 300,
-    list: [
-      'main/5.png',
-      'main/6.png',
-      'main/7.png',
-      'main/8.png',
-      'main/9.png',
-    ],
+    list: ['main/5.png', 'main/6.png', 'main/7.png', 'main/8.png', 'main/9.png'],
   },
   {
     id: 3,
     width: 210,
     height: 300,
-    list: [
-      'main/10.png',
-      'main/11.png',
-      'main/12.png',
-      'main/13.png',
-      'main/14.png',
-    ],
+    list: ['main/10.png', 'main/11.png', 'main/12.png', 'main/13.png', 'main/14.png'],
   },
   {
     id: 4,
     width: 210,
     height: 300,
-    list: [
-      'main/15.png',
-      'main/16.png',
-      'main/17.png',
-      'main/18.png',
-      'main/19.png',
-    ],
+    list: ['main/15.png', 'main/16.png', 'main/17.png', 'main/18.png', 'main/19.png'],
   },
   {
     id: 5,
@@ -135,9 +117,13 @@ onMounted(() => {})
 .my-card {
   width: 100%;
   height: 100%;
+  img {
+    width: 40%;
+    height: auto;
+  }
   .label {
     text-align: left;
-    width: 532px;
+    width: 40%;
     padding-right: 25px;
     font-family: 'PingFang SC';
     font-weight: 400;

src/views/news/detail.vue

@@ -8,21 +8,29 @@ import {ElMessage} from 'element-plus'
 const route = useRoute()
 const detail = route.query
 const showLoad = ref(true)
+
 const newsTitle = ref('')
+const newsTime = ref('')
 const newsSubTitle = ref('')
 const newsCoverImg = ref('')
-const newsContent = ref('')
+const newsContent = ref(null)
+
+const router = useRouter()
+
+onMounted(() => {
+  getDetail()
+})
 
 const getDetail = () => {
-  showLoad.value = true
   let query = {
     slug: detail.slug,
   }
   getNewsDetail(query)
     .then((res) => {
       if (res.code === 0) {
-        let {content, cover_image, snapshot, title} = res.data
+        let {content, cover_image, snapshot, datetime, title} = res.data
         newsTitle.value = title
+        newsTime.value = datetime
         newsSubTitle.value = snapshot
         newsCoverImg.value = cover_image
         newsContent.value = content
@@ -37,11 +45,6 @@ const getDetail = () => {
     })
 }
 
-const router = useRouter()
-onMounted(() => {
-  getDetail()
-})
-
 const toBack = () => {
   router.back()
 }
@@ -53,23 +56,22 @@ const toBack = () => {
       <h3 class="label">
         {{ newsTitle }}
       </h3>
-      <h3 class="time" v-if="newsSubTitle">
-        {{ newsSubTitle }}
+      <h3 class="time" v-if="newsTime">
+        {{ newsTime }}
       </h3>
-      <div class="img" v-if="newsCoverImg">
-        <img :src="newsCoverImg" alt="" />
-      </div>
-      <div class="artical" v-if="newsContent">
-        {{ newsContent }}
+      <div class="artical">
+        <div v-html="newsContent"></div>
       </div>
     </div>
-    <div v-else>暂无内容</div>
+    <div v-else class="no-content">暂无内容</div>
     <div class="back" @click="toBack">返回</div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.page {
   .label {
+    text-align: center;
     margin: 64px 0 20px 0;
     font-family: 'PingFang SC';
     font-weight: 500;
@@ -77,32 +79,21 @@ const toBack = () => {
     color: $black;
   }
   .time {
+    text-align: center;
     font-family: 'PingFang SC';
     font-weight: 500;
-  font-size: 18px;
-  margin-bottom: 40px;
-}
-.img {
-  width: 1200px;
-  height: auto;
-  margin-bottom: 40px;
-  img {
-    width: 100%;
-    height: 100%;
-  }
+    font-size: 20px;
+    margin-bottom: 20px;
   }
   .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;
+  }
+  .no-content {
+    margin-top: 40px;
+    font-size: 32px;
   }
   .back {
+    margin-top: 40px;
     padding: 10px 40px;
     background: #0389ff;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
@@ -112,4 +103,5 @@ const toBack = () => {
     color: $white;
     cursor: pointer;
   }
+}
 </style>

src/views/news/index.vue

@@ -1,16 +1,23 @@
 <script setup>
 defineOptions({name: 'New'})
-import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
+import {ref, onMounted, nextTick, onActivated, onDeactivated, computed} from 'vue'
 import Banner from '@/components/Banner/index.vue'
 import Swiper from '@/components/Swiper/index.vue'
 import {useRouter} from 'vue-router'
 import {onBeforeRouteLeave} from 'vue-router'
 import {getNews} from '@/api/index'
+import {fontSize} from '@/utils'
 
 const currentPage = ref(1)
 const showLoad = ref(true)
-const containerWidth = ref(1700)
-const containerHeight = ref(1400)
+const containerWidth = ref(fontSize(1700))
+const containerHeight = computed(() => {
+  if (newList.value.length > 0) {
+    return 350 * newList.value.length
+  } else {
+    return 200
+  }
+})
 
 onMounted(() => {
   getNewList()
@@ -34,14 +41,20 @@ async function getNewList() {
     page: page.value.pageNum,
     page_size: page.value.pageSize,
   }
-  let {code, data, pagination} = await getNews(query)
-  if (code === 0) {
-    newList.value = data
-    page.value.totalPages = pagination.total_pages
+
+  getNews(query)
+    .then((res) => {
+      if (res.code === 0) {
+        newList.value = res.data
+        page.value.totalPages = res.pagination.total_pages
         showLoad.value = false
       } else {
         showLoad.value = false
       }
+    })
+    .catch(() => {
+      showLoad.value = false
+    })
 }
 
 const toDetail = (item) => {
@@ -68,12 +81,8 @@ onDeactivated(() => {
 
 onBeforeRouteLeave((to) => {
   if (to.name === 'Detail') return
-
-  // 去别的顶级菜单 → 销毁
   const parent = to.matched[0]
   if (parent?.name !== 'News') {
-    // 通过修改路由 meta 让 keep-alive 排除当前组件
-    // 需要把 keep-alive 写成 :include="cachedNames" 并在 pinia 里维护数组
   }
 })
 </script>
@@ -93,6 +102,7 @@ onBeforeRouteLeave((to) => {
     >
       <template #default="{item, index, isActive}">
         <div class="my-card">
+          <template v-if="newList.length > 0">
             <div
               class="news flex j-s"
               :class="{active: isActive}"
@@ -111,6 +121,8 @@ onBeforeRouteLeave((to) => {
                 <div class="text">{{ item.snapshot }}</div>
               </div>
             </div>
+          </template>
+          <div v-else class="no-content">暂无内容</div>
         </div>
       </template>
     </Swiper>
@@ -177,5 +189,10 @@ onBeforeRouteLeave((to) => {
       color: #999999;
     }
   }
+
+  .no-content {
+    margin-top: 40px;
+    font-size: 24px;
+  }
 }
 </style>

src/views/product/detail.vue

@@ -46,7 +46,7 @@ const toBack = () => {
 
     <!-- 软件 -->
     <template v-else>
-      <div class="content software flex j-s">
+      <div class="content software flex">
         <video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
           <source :src="`./static/video/${query.video}`" type="video/mp4" />
         </video>
@@ -68,6 +68,8 @@ const toBack = () => {
 
 <style lang="scss" scoped>
 :deep(.hardware) {
+  font-size: 20px;
+  line-height: 1.8;
   margin-bottom: 40px;
 }
 
@@ -107,6 +109,7 @@ const toBack = () => {
 
 .software {
   width: 1700px;
+  align-items: flex-start;
   video {
     width: 65%;
     height: auto;
@@ -152,7 +155,6 @@ const toBack = () => {
 
 .descripition {
   width: 1000px;
-  font-size: 22px;
 }
 
 .back {

src/views/product/project.vue

@@ -5,7 +5,7 @@ onMounted(() => {})
 
 // 资质证书
 const certificateWidth = ref(1300)
-const certificateHeight = ref(500)
+const certificateHeight = ref(700)
 
 const currentPage = ref(1)
 
@@ -54,8 +54,8 @@ const imgList = [
       :showHover="false"
     >
       <template #default="{item, index, isActive}">
-        <div class="certificate flex j-s a-c" :class="{active: isActive}">
-          <div v-for="(list, listIdx) in imgList" :index="list.id" class="flex j-c a-c wrap">
+        <div class="certificate flex j-s" :class="{active: isActive}">
+          <div v-for="list in imgList" :index="list.id" class="flex j-c wrap">
             <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
               <div class="label">{{ img.label }}</div>
               <img
@@ -77,9 +77,7 @@ const imgList = [
 
 <style lang="scss" scoped>
 #certificate {
-  // margin-top: 60px;
   .certificate {
-    margin-top: 40px;
     width: 100%;
     height: 100%;
     .label {