初始化代码

src/views/news/index.vue

@@ -0,0 +1,159 @@
+<script setup>
+import {ref, onMounted, getCurrentInstance} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+import {useRouter} from 'vue-router'
+
+const currentPage = ref(1)
+
+const instance = getCurrentInstance()
+const $fontSize = instance.appContext.config.globalProperties.$fontSize
+
+const containerWidth = ref(1700)
+const containerHeight = ref(1400)
+
+const list = [
+  {
+    id: 1,
+    imgUrl: 'main/1.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 2,
+    imgUrl: 'main/2.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 3,
+    imgUrl: 'main/3.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 4,
+    imgUrl: 'main/4.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+]
+
+onMounted(() => {})
+
+let router = useRouter()
+const toDetail = (url) => {
+  router.push({
+    path: '/news/detail',
+    query: {
+      id: url,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="新闻中心"
+      v-model="currentPage"
+      :source-width="containerWidth"
+      :source-height="containerHeight"
+      :show-pagination="false"
+      :auto-play="false"
+      :showHover="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card">
+          <div
+            class="news flex j-s"
+            :class="{active: isActive}"
+            v-for="item in list"
+            :key="item.id"
+            @click="toDetail(item.id)"
+          >
+            <div class="img">
+              <!-- <img :src="`./static/images/${item.imgUrl}`" /> -->
+            </div>
+
+            <div class="content">
+              <div class="label">{{ item.label }}</div>
+              <div class="time">{{ item.time }}</div>
+              <div class="sub-label">{{ item.subLabel }}</div>
+              <div class="text">{{ item.content }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  width: 100%;
+  height: 100%;
+  .news {
+    width: calc(100% - 100px);
+    margin: 20px 50px;
+    overflow-y: hidden;
+    transition: all 0.3s;
+    cursor: pointer;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    &:not(:last-of-type) {
+      margin-bottom: 40px;
+    }
+    &:hover {
+      scale: (1.05);
+    }
+  }
+  .img {
+    width: 428px;
+    height: 278px;
+    background-color: #d9d9d9;
+  }
+  .content {
+    flex: 1;
+    text-align: left;
+    margin-left: 58px;
+    margin-top: 30px;
+    padding-right: 20px;
+    .label {
+      font-family: 'PingFang SC';
+      font-weight: 500;
+      font-size: 20px;
+      color: $black;
+    }
+    .time {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 18px;
+      margin-top: 16px;
+    }
+    .sub-label {
+      margin-top: 16px;
+    }
+    .sub-label,
+    .text {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+    }
+  }
+}
+</style>