fix: resolve icon display issues

- Fix asset path resolution in CSS (add @ alias)
  - News/Index.vue: dji.jpg background
  - JoinUs/Index.vue: banner_4.jpg background
  - ContactUs/Index.vue: banner_5.jpg background
  - Info/Index.vue: banner1.jpg background

- Reduce url-loader limit from 10KB to 1KB
  - Icons (tel.png, computer.png, skill.png, circle.png) now output as separate files
  - Prevents base64 encoding issues with small icons
  - Ensures proper icon display in HomePage and News pages

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

build/webpack.base.conf.js

@@ -55,7 +55,7 @@ module.exports = {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
         options: {
-          limit: 10000,
+          limit: 1000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }
       },

src/view/ContactUs/Index.vue

@@ -1,110 +1,110 @@
-<template>
-  <div id="ContactUs">
-    <div class="banner container-fuild text-center">联系我们</div>
-    <div class="container">
-      <div class="container-fuild ContactUs-container">
-        <div class="row">
-          <div class="col-xs-12 col-sm-12 col-md-6">
-            <form class="form-horizontal" role="form">
-              <div class="form-group">
-                <label for="name" class="col-sm-2 control-label">姓名</label>
-                <div class="col-sm-10 col-xs-12">
-                  <input type="text" class="form-control" id="name" placeholder="请输入名字">
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="email" class="col-sm-2 control-label">邮箱</label>
-                <div class="col-sm-10">
-                  <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="tel" class="col-sm-2 control-label">电话</label>
-                <div class="col-sm-10">
-                  <input type="text" class="form-control" id="tel" placeholder="请输入电话">
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="content" class="col-sm-2 control-label">内容</label>
-                <div class="col-sm-10">
-                  <textarea class="form-control" id="content" rows="8" placeholder="请输入内容"></textarea>
-                </div>
-              </div>
-              <div class="form-group">
-                <div class="col-sm-offset-2 col-sm-10">
-                  <button type="submit" class="btn btn-default btn-block">提交</button>
-                </div>
-              </div>
-            </form>
-          </div>
-          <div class="col-xs-12 col-sm-12 col-md-6">
-            <div id="map" class="wow zoomIn"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { WOW } from 'wowjs'
-import BMap from "BMap"
-
-export default {
-  name: "ContactUs",
-  data() {
-    return {};
-  },
-  mounted() {
-    var map = new BMap.Map("map"); // 创建地图实例
-    var point = new BMap.Point(121.440678,31.176694); // 创建点坐标
-    map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
-    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
-    var marker = new BMap.Marker(point); // 创建标注
-    map.addOverlay(marker); // 将标注添加到地图中
-    var opts = {
-      width: 50, // 信息窗口宽度
-      height: 10, // 信息窗口高度
-      title: "银海大楼-C座" // 信息窗口标题
-    };
-    var infoWindow = new BMap.InfoWindow(
-      "上海展域航空技术有限公司",
-      opts
-    ); // 创建信息窗口对象
-    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
-    var wow = new WOW();
-    wow.init();
-  }
-};
-</script>
-<style scoped>
-.banner {
-  color: #fff;
-  font-size: 30px;
-  height: 150px;
-  line-height: 150px;
-  background-image: url("~assets/img/banner_5.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: scroll;
-  background-position: center center;
-}
-.ContactUs-container {
-  padding: 80px 0;
-  transition: all ease 0.5s;
-  box-sizing: border-box;
-}
-#map {
-  width: 100%;
-  height: 365px;
-}
-.row {
-  margin-right: 0;
-  margin-left: 0;
-}
-@media screen and (max-width: 997px) {
-  .ContactUs-container {
-    padding: 20px 0;
-  }
-}
-</style>
-
+<template>
+  <div id="ContactUs">
+    <div class="banner container-fuild text-center">联系我们</div>
+    <div class="container">
+      <div class="container-fuild ContactUs-container">
+        <div class="row">
+          <div class="col-xs-12 col-sm-12 col-md-6">
+            <form class="form-horizontal" role="form">
+              <div class="form-group">
+                <label for="name" class="col-sm-2 control-label">姓名</label>
+                <div class="col-sm-10 col-xs-12">
+                  <input type="text" class="form-control" id="name" placeholder="请输入名字">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="email" class="col-sm-2 control-label">邮箱</label>
+                <div class="col-sm-10">
+                  <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="tel" class="col-sm-2 control-label">电话</label>
+                <div class="col-sm-10">
+                  <input type="text" class="form-control" id="tel" placeholder="请输入电话">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="content" class="col-sm-2 control-label">内容</label>
+                <div class="col-sm-10">
+                  <textarea class="form-control" id="content" rows="8" placeholder="请输入内容"></textarea>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-offset-2 col-sm-10">
+                  <button type="submit" class="btn btn-default btn-block">提交</button>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="col-xs-12 col-sm-12 col-md-6">
+            <div id="map" class="wow zoomIn"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { WOW } from 'wowjs'
+import BMap from "BMap"
+
+export default {
+  name: "ContactUs",
+  data() {
+    return {};
+  },
+  mounted() {
+    var map = new BMap.Map("map"); // 创建地图实例
+    var point = new BMap.Point(121.440678,31.176694); // 创建点坐标
+    map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
+    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
+    var marker = new BMap.Marker(point); // 创建标注
+    map.addOverlay(marker); // 将标注添加到地图中
+    var opts = {
+      width: 50, // 信息窗口宽度
+      height: 10, // 信息窗口高度
+      title: "银海大楼-C座" // 信息窗口标题
+    };
+    var infoWindow = new BMap.InfoWindow(
+      "上海展域航空技术有限公司",
+      opts
+    ); // 创建信息窗口对象
+    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
+    var wow = new WOW();
+    wow.init();
+  }
+};
+</script>
+<style scoped>
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url("~@/assets/img/banner_5.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+.ContactUs-container {
+  padding: 80px 0;
+  transition: all ease 0.5s;
+  box-sizing: border-box;
+}
+#map {
+  width: 100%;
+  height: 365px;
+}
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+@media screen and (max-width: 997px) {
+  .ContactUs-container {
+    padding: 20px 0;
+  }
+}
+</style>
+

src/view/Info/Index.vue

@@ -1,81 +1,81 @@
-<template>
-  <div id="Info">
-    <div class="banner container-fuild text-center">公司介绍</div>
-    <div class="container">
-      <div class="row info-container">
-        <div class="container text-center">
-          <p>
-            上海展域航空技术有限公司成立于2014年。公司秉承“航空报国、拥抱未来”的核心理念，致力于推进航空领域及数字智能领域的最先进技术应用于人们的生产生活，帮助人们拓展更高更远的视野，开辟更新更广的空间，帮助人们成就飞天的梦想。</p>
-        </div>
-        <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
-          <img class="img-responsive center-block" src="@/assets/img/general_aviation_img.png"
-               style="margin: 0 0 48px 0">
-          <p>
-            公司拥有通用航空经营及无人机系统运营的专业资质，具备经专业认证的技术人员和销售团队，为客户提供专业无人系统产品的代理销售和技术支持、面向行业应用场景的无人系统应用解决方案和实施服务、以及为客户应用无人系统所需的认证培训和作业指导。</p>
-        </div>
-        <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn" style="margin-bottom: 24px">
-          <img class="img-responsive center-block" src="@/assets/img/dji-card.png">
-          <p>
-            依托深圳市大疆创新科技有限公司一流的研发团队和齐配的供应链生产系统支持。上海展域航空技术有限公司已经在上海地区开拓了专业级大疆无人机行业应用服务市场。</p>
-        </div>
-        <div class="container text-left">
-          <p>
-            多年来，展域航空基于丰富的行业经验和技术能力，努力在青少年航空科普和创客实践、3D打印和桌面数字制造、无人机技术实验和应用等领域默默耕耘，依托中航工业、中国商飞、大疆创新等企业开展技术验证和应用推广，并先后与北航、上海交大、复旦大学等高校以及民航华东管理局、上海航空学会、上海无人机产业协会等机构开展合作，在服务于青年人才创新实践的基础上，帮助大型工业园区、城市基础设施以及化工、建筑、测绘等行业领域应用智能无人系统推进数字化智能化转型升级做出贡献。</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import {WOW} from 'wowjs';
-
-export default {
-  name: 'Info',
-  data() {
-    return {}
-  },
-  mounted() {
-    var wow = new WOW();
-    wow.init();
-  }
-}
-</script>
-<style scoped>
-.banner {
-  color: #fff;
-  font-size: 30px;
-  height: 150px;
-  line-height: 150px;
-  background-image: url('~assets/img/banner1.jpg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: scroll;
-  background-position: center center;
-}
-
-.row {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.info-container {
-  padding: 40px 0;
-}
-
-.info-container > div > p {
-  margin: 20px 12px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 360;
-  font-size: 13px;
-  color: #2f2f2f;
-  line-height: 2.2rem;
-}
-
-@media screen and (max-width: 997px) {
-  .info-container {
-    padding: 10px 0;
-    //color: #808080;
-  }
-}
-</style>
-
+<template>
+  <div id="Info">
+    <div class="banner container-fuild text-center">公司介绍</div>
+    <div class="container">
+      <div class="row info-container">
+        <div class="container text-center">
+          <p>
+            上海展域航空技术有限公司成立于2014年。公司秉承“航空报国、拥抱未来”的核心理念，致力于推进航空领域及数字智能领域的最先进技术应用于人们的生产生活，帮助人们拓展更高更远的视野，开辟更新更广的空间，帮助人们成就飞天的梦想。</p>
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
+          <img class="img-responsive center-block" src="@/assets/img/general_aviation_img.png"
+               style="margin: 0 0 48px 0">
+          <p>
+            公司拥有通用航空经营及无人机系统运营的专业资质，具备经专业认证的技术人员和销售团队，为客户提供专业无人系统产品的代理销售和技术支持、面向行业应用场景的无人系统应用解决方案和实施服务、以及为客户应用无人系统所需的认证培训和作业指导。</p>
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn" style="margin-bottom: 24px">
+          <img class="img-responsive center-block" src="@/assets/img/dji-card.png">
+          <p>
+            依托深圳市大疆创新科技有限公司一流的研发团队和齐配的供应链生产系统支持。上海展域航空技术有限公司已经在上海地区开拓了专业级大疆无人机行业应用服务市场。</p>
+        </div>
+        <div class="container text-left">
+          <p>
+            多年来，展域航空基于丰富的行业经验和技术能力，努力在青少年航空科普和创客实践、3D打印和桌面数字制造、无人机技术实验和应用等领域默默耕耘，依托中航工业、中国商飞、大疆创新等企业开展技术验证和应用推广，并先后与北航、上海交大、复旦大学等高校以及民航华东管理局、上海航空学会、上海无人机产业协会等机构开展合作，在服务于青年人才创新实践的基础上，帮助大型工业园区、城市基础设施以及化工、建筑、测绘等行业领域应用智能无人系统推进数字化智能化转型升级做出贡献。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {WOW} from 'wowjs';
+
+export default {
+  name: 'Info',
+  data() {
+    return {}
+  },
+  mounted() {
+    var wow = new WOW();
+    wow.init();
+  }
+}
+</script>
+<style scoped>
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url('~@/assets/img/banner1.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.info-container {
+  padding: 40px 0;
+}
+
+.info-container > div > p {
+  margin: 20px 12px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 360;
+  font-size: 13px;
+  color: #2f2f2f;
+  line-height: 2.2rem;
+}
+
+@media screen and (max-width: 997px) {
+  .info-container {
+    padding: 10px 0;
+    //color: #808080;
+  }
+}
+</style>
+

src/view/JoinUs/Index.vue

@@ -1,82 +1,82 @@
-<template>
-  <div id="JoinUs">
-    <div class="banner container-fuild text-center">加入我们</div>
-    <div class="container">
-      <div class="JoinUs-container wow pulse">
-        <h2>JAVA全栈工程师</h2>
-        <p>岗位职责</p>
-        <ol>
-          <li> 负责无人机领域的无人机web管理系统的二次开发，部署上线。</li>
-          <li> 负责无人机管理系统的接口协议定义与接口开发。</li>
-          <li> 参与系统需求分析与设计， 与项目经理一起参与客户需求调研，抽象业务功能，完成业务逻辑的开发。接口规范制定，架构设计。</li>
-        </ol>
-        <p>任职要求</p>
-        <ol>
-          <li>精通SpringBoot+MySql+Vue开发, 熟悉前后端分离的WEB开发思路，熟悉Vue3或React ；</li>
-          <li>具备非常强的自学能力，遇到问题善于使用github、google、生成式AI、copilot等工具查询解决思路。</li>
-          <li>熟练掌握 Java 语言，熟练掌握Spring boot 框架。 如果能熟练掌握C++ 与 opencv  更好（非必需）。</li>
-          <li>具备良好的代码编写习惯和调试能力，能够编写可维护的高质量代码。</li>
-        </ol>
-        <button class="center-block btn btn-warning btn-lg">投递简历</button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { WOW } from 'wowjs';
-export default {
-  name: "JoinUs",
-  data() {
-    return {};
-  },
-  mounted(){
-    var wow = new WOW();
-    wow.init();
-  }
-};
-</script>
-<style scoped>
-.banner {
-  color: #fff;
-  font-size: 30px;
-  height: 150px;
-  line-height: 150px;
-  background-image: url("~assets/img/banner_4.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: scroll;
-  background-position: center center;
-}
-.JoinUs-container {
-  margin: 100px;
-  padding: 30px;
-  transition: all ease 0.5s;
-  border: 1px dashed salmon;
-}
-.JoinUs-container h2{
-  color: rgb(255, 102, 19);
-  font-weight: bolder;
-  text-align: center;
-}
-.JoinUs-container p{
-font-size: 20px;
-  color: rgb(255, 102, 19);
-  font-weight: 700;
-}
-.JoinUs-container ol{
-    list-style-type: decimal;
-    padding-left: 30px;
-}
-.JoinUs-container ol>li{
-    font-size: 14px;
-    line-height: 2.7rem;
-}
-@media screen and (max-width: 997px) {
-  .JoinUs-container {
-    margin: 20px 0;
-    padding: 20px;
-    border: 1px dashed salmon;
-  }
-}
-</style>
-
+<template>
+  <div id="JoinUs">
+    <div class="banner container-fuild text-center">加入我们</div>
+    <div class="container">
+      <div class="JoinUs-container wow pulse">
+        <h2>JAVA全栈工程师</h2>
+        <p>岗位职责</p>
+        <ol>
+          <li> 负责无人机领域的无人机web管理系统的二次开发，部署上线。</li>
+          <li> 负责无人机管理系统的接口协议定义与接口开发。</li>
+          <li> 参与系统需求分析与设计， 与项目经理一起参与客户需求调研，抽象业务功能，完成业务逻辑的开发。接口规范制定，架构设计。</li>
+        </ol>
+        <p>任职要求</p>
+        <ol>
+          <li>精通SpringBoot+MySql+Vue开发, 熟悉前后端分离的WEB开发思路，熟悉Vue3或React ；</li>
+          <li>具备非常强的自学能力，遇到问题善于使用github、google、生成式AI、copilot等工具查询解决思路。</li>
+          <li>熟练掌握 Java 语言，熟练掌握Spring boot 框架。 如果能熟练掌握C++ 与 opencv  更好（非必需）。</li>
+          <li>具备良好的代码编写习惯和调试能力，能够编写可维护的高质量代码。</li>
+        </ol>
+        <button class="center-block btn btn-warning btn-lg">投递简历</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { WOW } from 'wowjs';
+export default {
+  name: "JoinUs",
+  data() {
+    return {};
+  },
+  mounted(){
+    var wow = new WOW();
+    wow.init();
+  }
+};
+</script>
+<style scoped>
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url("~@/assets/img/banner_4.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+.JoinUs-container {
+  margin: 100px;
+  padding: 30px;
+  transition: all ease 0.5s;
+  border: 1px dashed salmon;
+}
+.JoinUs-container h2{
+  color: rgb(255, 102, 19);
+  font-weight: bolder;
+  text-align: center;
+}
+.JoinUs-container p{
+font-size: 20px;
+  color: rgb(255, 102, 19);
+  font-weight: 700;
+}
+.JoinUs-container ol{
+    list-style-type: decimal;
+    padding-left: 30px;
+}
+.JoinUs-container ol>li{
+    font-size: 14px;
+    line-height: 2.7rem;
+}
+@media screen and (max-width: 997px) {
+  .JoinUs-container {
+    margin: 20px 0;
+    padding: 20px;
+    border: 1px dashed salmon;
+  }
+}
+</style>
+

src/view/News/Index.vue

@@ -1,238 +1,238 @@
-<template>
-  <div id="News">
-    <div class="banner container-fuild text-center">公司动态</div>
-    <div class="container">
-      <div class="row news-container">
-        <ul class="news-container container-fuild">
-          <li v-for="(item,index) in newsList" :key="index" class="wow fadeIn">
-            <div class="content">
-              <p>{{ item.title }}</p>
-              <p>{{ item.introduce }}</p>
-            </div>
-            <div class="time">
-              <p>{{ item.date }}</p>
-              <span>{{ item.year }}</span>
-            </div>
-            <div class="circle">
-              <img src="@/assets/img/circle.png">
-              <i class="line center-block"></i>
-            </div>
-          </li>
-        </ul>
-        <div class="contaianer-fuild text-center more">
-          <i class="glyphicon glyphicon-th"></i>
-        </div>
-
-      </div>
-
-
-    </div>
-  </div>
-</template>
-<script>
-import {WOW} from 'wowjs';
-
-export default {
-  name: 'News',
-  data() {
-    return {
-      newsList: [
-        {
-          id: '001',
-          introduce: '配合和参与上海测绘院及上海建科集团数字化转型发展，推荐大疆产品在测绘及工程建设城市运维领域的应用',
-          date: '07-18',
-          year: '2023年'
-        }, {
-          id: '002',
-          introduce: '完成上海化工区智能无人系统应用监管研究课题，帮助园区管委会和相关企业规范开展无人系统应用服务业务',
-          date: '09-27',
-          year: '2022年'
-        }, {
-          id: '003',
-          introduce: '参与上海宝武吴淞园、上海化工区等大型工业园区无人机应用项目的实验和监管论证，推广大疆行业应用产品和服务',
-          date: '03-16',
-          year: '2020年'
-        }, {
-          id: '004',
-          introduce: '完成对口支援日喀则和果乐地区创客空间示范项目建设，设立创客师资上海培训基地，推广3D打印和无人机课程',
-          date: '06-08',
-          year: '2018年'
-        }, {
-          id: '005',
-          introduce: '公司由北航和复旦校友发起创立，推出飞天网创客空间，成为上海众创空间联盟首批会员单位，服务航空科技爱好者',
-          date: '05-24',
-          year: '2014年'
-        }
-      ]
-    }
-  },
-  mounted() {
-    var wow = new WOW();
-    wow.init();
-  },
-}
-</script>
-<style scoped>
-#News {
-  height: 100%;
-}
-
-.banner {
-  color: #fff;
-  font-size: 30px;
-  height: 150px;
-  line-height: 150px;
-  background-image: url("~assets/img/dji.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: scroll;
-  background-position: center center;
-}
-
-.news-container {
-  margin: 20px 20px 0 20px;
-}
-
-.nav > a {
-  display: inline-block;
-  text-decoration: none;
-  width: 120px;
-  height: 45px;
-  line-height: 45px;
-  color: #333;
-  border: 1px solid #333;
-}
-
-.nav > a:hover {
-  color: #1e73be;
-  border-color: #1e73be;
-}
-
-.news-container {
-  overflow: hidden;
-  margin-bottom: 0;
-}
-
-.news-container > li {
-  width: 55.62%;
-  height: 120px;
-  float: left;
-  color: #333;
-  text-align: right;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-}
-
-.news-container > li:hover {
-  color: #1e73be;
-  border: 1px solid #1e73be;
-  cursor: pointer;
-}
-
-.news-container > li:nth-of-type(2n) {
-  float: right;
-  text-align: left;
-}
-
-.news-container > li > .content {
-  width: 60%;
-  float: left;
-  padding: 10px 0;
-}
-
-.news-container > li > .content > p {
-  margin: 0 12px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 360;
-  font-size: 14px;
-  color: #2f2f2f;
-  line-height: 2.2rem;
-}
-
-.news-container > li > .time {
-  width: 20%;
-  float: left;
-  padding: 0;
-}
-
-.news-container > li > .time > p {
-  font-size: 24px;
-  margin: 10px 0;
-}
-
-.news-container > li > .circle {
-  width: 20%;
-  height: 100%;
-  float: left;
-  position: relative;
-}
-
-.news-container > li > .circle > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  width: 20px;
-  height: 20px;
-}
-
-.news-container > li > .circle > i {
-  display: block;
-  width: 1px;
-  height: 100%;
-  background: #707070;
-}
-
-.news-container > li:nth-of-type(2n) > .content {
-  float: right;
-}
-
-.news-container > li:nth-of-type(2n) > .time {
-  float: right;
-}
-
-.news-container > li:nth-of-type(2n) > .circle {
-  float: right;
-}
-
-.news-container > li:nth-of-type(1) > .circle > i {
-  height: 50%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
-.more {
-  font-size: 25px;
-  color: #707070;
-}
-
-.more > i {
-  cursor: pointer;
-}
-
-@media screen and (max-width: 767px) {
-  .news-container > li {
-    width: 100%;
-  }
-
-  .news-container > li > .content {
-    width: 70%;
-    text-align: left;
-    float: right;
-  }
-
-  .news-container > li > .time {
-    width: 30%;
-    text-align: left;
-    float: right;
-  }
-
-  .news-container > li > .circle {
-    display: none;
-  }
-}
-</style>
-
+<template>
+  <div id="News">
+    <div class="banner container-fuild text-center">公司动态</div>
+    <div class="container">
+      <div class="row news-container">
+        <ul class="news-container container-fuild">
+          <li v-for="(item,index) in newsList" :key="index" class="wow fadeIn">
+            <div class="content">
+              <p>{{ item.title }}</p>
+              <p>{{ item.introduce }}</p>
+            </div>
+            <div class="time">
+              <p>{{ item.date }}</p>
+              <span>{{ item.year }}</span>
+            </div>
+            <div class="circle">
+              <img src="@/assets/img/circle.png">
+              <i class="line center-block"></i>
+            </div>
+          </li>
+        </ul>
+        <div class="contaianer-fuild text-center more">
+          <i class="glyphicon glyphicon-th"></i>
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+</template>
+<script>
+import {WOW} from 'wowjs';
+
+export default {
+  name: 'News',
+  data() {
+    return {
+      newsList: [
+        {
+          id: '001',
+          introduce: '配合和参与上海测绘院及上海建科集团数字化转型发展，推荐大疆产品在测绘及工程建设城市运维领域的应用',
+          date: '07-18',
+          year: '2023年'
+        }, {
+          id: '002',
+          introduce: '完成上海化工区智能无人系统应用监管研究课题，帮助园区管委会和相关企业规范开展无人系统应用服务业务',
+          date: '09-27',
+          year: '2022年'
+        }, {
+          id: '003',
+          introduce: '参与上海宝武吴淞园、上海化工区等大型工业园区无人机应用项目的实验和监管论证，推广大疆行业应用产品和服务',
+          date: '03-16',
+          year: '2020年'
+        }, {
+          id: '004',
+          introduce: '完成对口支援日喀则和果乐地区创客空间示范项目建设，设立创客师资上海培训基地，推广3D打印和无人机课程',
+          date: '06-08',
+          year: '2018年'
+        }, {
+          id: '005',
+          introduce: '公司由北航和复旦校友发起创立，推出飞天网创客空间，成为上海众创空间联盟首批会员单位，服务航空科技爱好者',
+          date: '05-24',
+          year: '2014年'
+        }
+      ]
+    }
+  },
+  mounted() {
+    var wow = new WOW();
+    wow.init();
+  },
+}
+</script>
+<style scoped>
+#News {
+  height: 100%;
+}
+
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url("~@/assets/img/dji.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+
+.news-container {
+  margin: 20px 20px 0 20px;
+}
+
+.nav > a {
+  display: inline-block;
+  text-decoration: none;
+  width: 120px;
+  height: 45px;
+  line-height: 45px;
+  color: #333;
+  border: 1px solid #333;
+}
+
+.nav > a:hover {
+  color: #1e73be;
+  border-color: #1e73be;
+}
+
+.news-container {
+  overflow: hidden;
+  margin-bottom: 0;
+}
+
+.news-container > li {
+  width: 55.62%;
+  height: 120px;
+  float: left;
+  color: #333;
+  text-align: right;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+
+.news-container > li:hover {
+  color: #1e73be;
+  border: 1px solid #1e73be;
+  cursor: pointer;
+}
+
+.news-container > li:nth-of-type(2n) {
+  float: right;
+  text-align: left;
+}
+
+.news-container > li > .content {
+  width: 60%;
+  float: left;
+  padding: 10px 0;
+}
+
+.news-container > li > .content > p {
+  margin: 0 12px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 360;
+  font-size: 14px;
+  color: #2f2f2f;
+  line-height: 2.2rem;
+}
+
+.news-container > li > .time {
+  width: 20%;
+  float: left;
+  padding: 0;
+}
+
+.news-container > li > .time > p {
+  font-size: 24px;
+  margin: 10px 0;
+}
+
+.news-container > li > .circle {
+  width: 20%;
+  height: 100%;
+  float: left;
+  position: relative;
+}
+
+.news-container > li > .circle > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 20px;
+  height: 20px;
+}
+
+.news-container > li > .circle > i {
+  display: block;
+  width: 1px;
+  height: 100%;
+  background: #707070;
+}
+
+.news-container > li:nth-of-type(2n) > .content {
+  float: right;
+}
+
+.news-container > li:nth-of-type(2n) > .time {
+  float: right;
+}
+
+.news-container > li:nth-of-type(2n) > .circle {
+  float: right;
+}
+
+.news-container > li:nth-of-type(1) > .circle > i {
+  height: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.more {
+  font-size: 25px;
+  color: #707070;
+}
+
+.more > i {
+  cursor: pointer;
+}
+
+@media screen and (max-width: 767px) {
+  .news-container > li {
+    width: 100%;
+  }
+
+  .news-container > li > .content {
+    width: 70%;
+    text-align: left;
+    float: right;
+  }
+
+  .news-container > li > .time {
+    width: 30%;
+    text-align: left;
+    float: right;
+  }
+
+  .news-container > li > .circle {
+    display: none;
+  }
+}
+</style>
+