首页基本完成

src/App.vue

@@ -6,7 +6,7 @@
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Xsh HeiTi', Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/assets/Home/u761.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="130px" height="28px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip438">
+      <path d="M 119.298780487805 0.134615384615385  L 11.0975609756098 0.134615384615385  L 0.396341463414634 14.5384615384615  L 11.0975609756098 27.5961538461538  L 119.298780487805 27.5961538461538  L 129.867886178862 14.5384615384615  L 119.298780487805 0.134615384615385  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g>
+    <path d="M 119.298780487805 0.134615384615385  L 11.0975609756098 0.134615384615385  L 0.396341463414634 14.5384615384615  L 11.0975609756098 27.5961538461538  L 119.298780487805 27.5961538461538  L 129.867886178862 14.5384615384615  L 119.298780487805 0.134615384615385  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0" />
+    <path d="M 119.298780487805 0.134615384615385  L 11.0975609756098 0.134615384615385  L 0.396341463414634 14.5384615384615  L 11.0975609756098 27.5961538461538  L 119.298780487805 27.5961538461538  L 129.867886178862 14.5384615384615  L 119.298780487805 0.134615384615385  Z " stroke-width="4" stroke="#1c52bb" fill="none" mask="url(#clip438)" />
+  </g>
+</svg>

src/assets/ttf/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Xsh HeiTi';
+  src: url('./OPPOSans_M_2.ttf');
+}

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import 'lib-flexible/flexible'
+import './assets/ttf/font.css';
 
 Vue.config.productionTip = false
 

src/router/ChildrenRoutes.js

@@ -14,7 +14,55 @@ const childrenRouters = [
     meta: {
       title: '海盐数智牧场驾驶舱'
     }
-  }
+  },
+  {
+    path: '/bioSafety',
+    name: 'BioSafety',
+    component: () => import('../views/BioSafety/BioSafety.vue'),
+    meta: {
+      title: '生物安全'
+    }
+  },
+  {
+    path: '/zoology',
+    name: 'Zoology',
+    component: () => import('../views/Zoology/Zoology.vue'),
+    meta: {
+      title: '生态监测'
+    }
+  },
+  {
+    path: '/production',
+    name: 'Production',
+    component: () => import('../views/Production/Production.vue'),
+    meta: {
+      title: '生产经营'
+    }
+  },
+  {
+    path: '/environment',
+    name: 'Environment',
+    component: () => import('../views/Environment/Environment.vue'),
+    meta: {
+      title: '环境监测'
+    }
+  },
+  {
+    path: '/alarm',
+    name: 'Alarm',
+    component: () => import('../views/Alarm/Alarm.vue'),
+    meta: {
+      title: '报警信息'
+    }
+  },
+  {
+    path: '/monit',
+    name: 'Monit',
+    component: () => import('../views/Monit/Monit.vue'),
+    meta: {
+      title: '视频监控'
+    }
+  },
 ];
 
 export default childrenRouters

src/views/Alarm/Alarm.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>报警信息</div>
+</template>
+
+<script>
+export default {
+name: "Alarm"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/BioSafety/BioSafety.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>生物安全</div>
+</template>
+
+<script>
+export default {
+name: "BioSafety"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Environment/Environment.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>环境监测</div>
+</template>
+
+<script>
+export default {
+name: "Environment"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Home/Home.vue

@@ -10,7 +10,7 @@
       <div class="content-center">
         <ul class="carousel" :style="{width: width + 'px', left: leftNum + 'px'}">
           <template v-for="(item, i) in list">
-            <li class="carousel-li" :key="item.id" @mouseover="onChange(i)" @mouseout="initData">
+            <li class="carousel-li" :key="item.id" @click="jump(item.url)" @mouseover="onChange(i)" @mouseout="initData">
               <div class="box">
                 <div class="box-line box-top-right"></div>
                 <div class="box-line box-bottom-right"></div>
@@ -39,212 +39,214 @@
         </div>
       </div>
     </div>
-    <div class="case" v-show="selectId === 0">
-      <div class="case-box case-left">
-        <div class="case-title">人员管控</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style=" padding-left: 20px;padding-right: 50px">正常</span>
-            <span><strong class="sign">79</strong>人次</span>
-          </div>
-          <div class="case-one">
-            <span style=" padding-left: 20px; padding-right: 50px">异常</span>
-            <span><strong class="sign">79</strong>人次</span>
+    <div class="parent">
+      <div class="case" v-show="selectId === 0">
+        <div class="case-box case-left">
+          <div class="case-title">人员管控</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style=" padding-left: 20px;padding-right: 50px">正常</span>
+              <span><strong class="sign">79</strong>人次</span>
+            </div>
+            <div class="case-one">
+              <span style=" padding-left: 20px; padding-right: 50px">异常</span>
+              <span><strong class="sign">79</strong>人次</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">车辆管控</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style="padding-left: 20px; padding-right: 50px">洗消次数</span>
-            <span><strong class="sign">19</strong>次</span>
-          </div>
-          <div class="case-one">
-            <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
-            <span><strong class="sign">34</strong>分钟</span>
+        <div class="case-center">
+          <div class="case-title">车辆管控</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style="padding-left: 20px; padding-right: 50px">洗消次数</span>
+              <span><strong class="sign">19</strong>次</span>
+            </div>
+            <div class="case-one">
+              <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
+              <span><strong class="sign">34</strong>分钟</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">熏蒸监管</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style="padding-left: 20px; padding-right: 50px">熏蒸次数</span>
-            <span><strong class="sign">4</strong>次</span>
-          </div>
-          <div class="case-one">
-            <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
-            <span><strong class="sign">3.4</strong>小时</span>
+        <div class="case-center">
+          <div class="case-title">熏蒸监管</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style="padding-left: 20px; padding-right: 50px">熏蒸次数</span>
+              <span><strong class="sign">4</strong>次</span>
+            </div>
+            <div class="case-one">
+              <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
+              <span><strong class="sign">3.4</strong>小时</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-box case-right">
-        <div class="case-title">死猪监管</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style="padding-right: 50px">抓取次数</span>
-            <span><strong class="sign">79</strong>人次</span>
-          </div>
-          <div class="case-one">
-            <span style=" padding-right: 50px">最近抓取</span>
-            <span><strong class="sign">07/01</strong></span>
+        <div class="case-box case-right">
+          <div class="case-title">死猪监管</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style="padding-right: 40px">抓取次数</span>
+              <span><strong class="sign">79</strong>人次</span>
+            </div>
+            <div class="case-one">
+              <span style=" padding-right: 40px">最近抓取</span>
+              <span><strong class="sign">07/01</strong></span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="case" v-show="selectId === 1">
-      <div class="case-box case-left">
-        <div class="case-title">猪舍温度</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style=" padding-left: 20px;padding-right: 50px">最高</span>
-            <span><strong class="sign">34.2</strong>℃</span>
-          </div>
-          <div class="case-one">
-            <span style=" padding-left: 20px; padding-right: 50px">最低</span>
-            <span><strong class="sign">24.1</strong>℃</span>
+      <div class="case" v-show="selectId === 1">
+        <div class="case-box case-left">
+          <div class="case-title">猪舍温度</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style=" padding-left: 20px;padding-right: 50px">最高</span>
+              <span><strong class="sign">34.2</strong>℃</span>
+            </div>
+            <div class="case-one">
+              <span style=" padding-left: 20px; padding-right: 50px">最低</span>
+              <span><strong class="sign">24.1</strong>℃</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">猪舍湿度</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style="padding-left: 40px; padding-right: 50px">最高</span>
-            <span><strong class="sign">95</strong>RH</span>
-          </div>
-          <div class="case-one">
-            <span style="padding-left: 40px; padding-right: 50px">最低</span>
-            <span><strong class="sign">55</strong>RH</span>
+        <div class="case-center">
+          <div class="case-title">猪舍湿度</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style="padding-left: 40px; padding-right: 50px">最高</span>
+              <span><strong class="sign">95</strong>RH</span>
+            </div>
+            <div class="case-one">
+              <span style="padding-left: 40px; padding-right: 50px">最低</span>
+              <span><strong class="sign">55</strong>RH</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">猪场耗电量</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style="padding-left: 20px; padding-right: 50px">今日累计</span>
-            <span><strong class="sign">325</strong>kw/h</span>
-          </div>
-          <div class="case-one">
-            <span style="padding-left: 20px; padding-right: 50px">本月累计</span>
-            <span><strong class="sign">9325</strong>kw/h</span>
+        <div class="case-center">
+          <div class="case-title">猪场耗电量</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style="padding-left: 20px; padding-right: 40px">今日累计</span>
+              <span><strong class="sign">325</strong>kw/h</span>
+            </div>
+            <div class="case-one">
+              <span style="padding-left: 20px; padding-right: 40px">本月累计</span>
+              <span><strong class="sign">9325</strong>kw/h</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-box case-right">
-        <div class="case-title">猪舍用水量</div>
-        <div class="case-content">
-          <div class="case-one">
-            <span style="padding-right: 50px">今日累计</span>
-            <span><strong class="sign">7</strong>吨</span>
-          </div>
-          <div class="case-one">
-            <span style=" padding-right: 50px">本月累计</span>
-            <span><strong class="sign">154</strong>吨</span>
+        <div class="case-box case-right">
+          <div class="case-title">猪舍用水量</div>
+          <div class="case-content">
+            <div class="case-one">
+              <span style="padding-right: 50px">今日累计</span>
+              <span><strong class="sign">7</strong>吨</span>
+            </div>
+            <div class="case-one">
+              <span style=" padding-right: 50px">本月累计</span>
+              <span><strong class="sign">154</strong>吨</span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="case" v-show="selectId === 2">
-      <div class="case-box case-left">
-        <div class="case-title">总存栏</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">15427</strong>头</span>
+      <div class="case" v-show="selectId === 2">
+        <div class="case-box case-left">
+          <div class="case-title">总存栏</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">15427</strong>头</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">下月预计可出栏</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">2354</strong>头</span>
+        <div class="case-center">
+          <div class="case-title">下月预计可出栏</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">2354</strong>头</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">本月累计销售额度</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">21354.2</strong>元</span>
+        <div class="case-center">
+          <div class="case-title">本月累计销售额度</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">21354.2</strong>元</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-box case-right">
-        <div class="case-title">今日任务</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">7</strong>个</span>
+        <div class="case-box case-right">
+          <div class="case-title">今日任务</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">7</strong>个</span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="case" v-show="selectId === 3">
-      <div class="case-box case-left">
-        <div class="case-title">COD</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">7.54</strong>mg/L</span>
+      <div class="case" v-show="selectId === 3">
+        <div class="case-box case-left">
+          <div class="case-title">COD</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">7.54</strong>mg/L</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">累计流量</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">123.57</strong>T</span>
+        <div class="case-center">
+          <div class="case-title">累计流量</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">123.57</strong>T</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">总磷</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">0.323</strong>mg/L</span>
+        <div class="case-center">
+          <div class="case-title">总磷</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">0.323</strong>mg/L</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-box case-right">
-        <div class="case-title">氨氮</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">0.619</strong>mg/L</span>
+        <div class="case-box case-right">
+          <div class="case-title">氨氮</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">0.619</strong>mg/L</span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="case" v-show="selectId === 4">
-      <div class="case-box case-left">
-        <div class="case-title">今日报警</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">9</strong>次</span>
+      <div class="case" v-show="selectId === 4">
+        <div class="case-box case-left">
+          <div class="case-title">今日报警</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">9</strong>次</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">平均相应时间</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">34</strong>分钟</span>
+        <div class="case-center">
+          <div class="case-title">平均相应时间</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">34</strong>分钟</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-center">
-        <div class="case-title">今日时间提醒</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">27</strong>次</span>
+        <div class="case-center">
+          <div class="case-title">今日时间提醒</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">27</strong>次</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="case-box case-right">
-        <div class="case-title">未处理事件</div>
-        <div class="case-content">
-          <div class="case-two">
-            <span><strong class="sign">7</strong>件</span>
+        <div class="case-box case-right">
+          <div class="case-title">未处理事件</div>
+          <div class="case-content">
+            <div class="case-two">
+              <span><strong class="sign">7</strong>件</span>
+            </div>
           </div>
         </div>
       </div>
@@ -268,32 +270,32 @@ export default {
         {
           id: 1,
           title: '生物安全',
-          url: '',
+          url: '/bioSafety',
         },
         {
           id: 2,
           title: '生态监测',
-          url: '',
+          url: '/zoology',
         },
         {
           id: 3,
           title: '生产经营',
-          url: '',
+          url: '/production',
         },
         {
           id: 4,
           title: '环境监测',
-          url: '',
+          url: '/environment',
         },
         {
           id: 5,
           title: '报警信息',
-          url: '',
+          url: '/alarm',
         },
         {
           id: 6,
           title: '视频监控',
-          url: '',
+          url: '/monit',
         },
       ],
       num: 0,
@@ -306,7 +308,10 @@ export default {
       selectId: 0,
       // 闪光
       isFlash: true,
-      timer3: null
+      timer3: null,
+      //获取当前时间
+      timer4: null,
+      currentTime: new Date(),
     }
   },
   methods: {
@@ -366,7 +371,10 @@ export default {
           that.isFlash = !that.isFlash
         })
       }, 500)
-    }
+    },
+    jump(url) {
+      this.$router.push(url);
+    },
   },
   mounted() {
     this.width = this.list.length * (220 + 180) - 90;
@@ -538,6 +546,19 @@ export default {
     top: 0;
     left: -15px;
   }
+  .parent {
+    animation: flip-horizontal-bck 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+  }
+  @keyframes flip-horizontal-bck {
+    0% {
+      -webkit-transform: translateZ(-260px) rotateX(190deg);
+      transform: translateZ(-260px) rotateX(190deg);
+    }
+    100% {
+      -webkit-transform: translateZ(0) rotateX(0);
+      transform: translateZ(0) rotateX(0);
+    }
+  }
   .case {
     width: 1200px;
     height: 360px;

src/views/MainLayout.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="MainLayout">
+    <div class="main-title">{{title}}</div>
+    <div class="main-left">
+      <!--  天气    -->
+      <div v-show="isHome" class="main-home">天气</div>
+      <!--  返回首页    -->
+      <div v-show="!isHome" class="main-back" @click="back">首页</div>
+    </div>
+    <div class="main-right">
+      <!-- 时间     -->
+      <div v-show="isHome" class="main-time">{{currentTime}}</div>
+      <!--  天气    -->
+      <div v-show="!isHome" class="main-home">天气</div>
+    </div>
+    <div class="main-bottom">青莲食品</div>
     <div class="content">
       <router-view></router-view>
     </div>
@@ -8,7 +22,65 @@
 
 <script>
 export default {
-name: "MainLayout"
+  name: "MainLayout",
+  data() {
+    return {
+      title: '',
+      isHome: true,
+      currentTime: '',
+      timer4: null
+    }
+  },
+  watch: {
+    $route(newVal) {
+      if(newVal) {
+        this.title = newVal.meta.title;
+        if (newVal.name === 'Home') {
+          this.isHome = true;
+          this.initTime();
+        } else {
+          this.isHome = false;
+          clearInterval(this.timer4);
+        }
+      }
+    }
+  },
+  methods: {
+    initTime() {
+      var _this = this;
+      this.timer4 = setInterval(function() {
+        var date = new Date();
+        var year = date.getFullYear();
+        var month = date.getMonth() + 1;
+        var hour = date.getHours();
+        var minutes = date.getMinutes() ;
+        var seconds = date.getSeconds();
+        var strDate = date.getDate();
+        if (month >= 1 && month <= 9) {
+          month = "0" + month;
+        }
+        if (strDate >= 0 && strDate <= 9) {
+          strDate = "0" + strDate;
+        }
+        _this.currentTime = year + '-' + month + '-' + strDate+"  "+hour+":" +minutes+":" +seconds;
+      }, 1000)
+    },
+    back() {
+      this.$router.push('/')
+    }
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    if (this.$route.name === 'Home') {
+      this.isHome = true;
+      this.initTime();
+    } else {
+      this.isHome = false;
+      if(this.timer4) {
+        clearInterval(this.timer4)
+      }
+    }
+  }
 }
 </script>
 
@@ -20,6 +92,7 @@ name: "MainLayout"
     background-size: 100% 100%;
     box-sizing: border-box;
     padding: 20px 20px;
+    position: relative;
   }
   .content {
     width: 100%;
@@ -29,4 +102,67 @@ name: "MainLayout"
     box-sizing: border-box;
     padding: 70px 60px;
   }
+  .main-title {
+    width: 230px;
+    height: 52px;
+    line-height: 52px;
+    position: absolute;
+    top: 25px;
+    left: 50.5%;
+    text-align: center;
+    transform: translate(-50%, 0);
+    color: #66FFFF;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .main-left {
+    width: 180px;
+    height: 40px;
+    position: absolute;
+    top: 15px;
+    left: 150px;
+  }
+  .main-right {
+    width: 180px;
+    height: 40px;
+    position: absolute;
+    top: 15px;
+    right: 150px;
+  }
+  .main-home {
+    width: 100%;
+    height: 100%;
+    line-height: 40px;
+    color: white;
+  }
+  .main-time {
+    width: 100%;
+    height: 100%;
+    line-height: 50px;
+    font-size: 16px;
+    color: #289882
+  }
+  .main-bottom {
+    width: 200px;
+    height: 50px;
+    /*background-color: red;*/
+    position: absolute;
+    line-height: 50px;
+    color: #66FFFF;
+    font-size: 24px;
+    font-weight: 600;
+    left: 51%;
+    bottom: 35px;
+    transform: translate(-50% , 0);
+  }
+  .main-back {
+    width: 180px;
+    height: 40px;
+    font-size: 18px;
+    line-height: 40px;
+    background: url("../assets/Home/u761.svg") no-repeat;
+    background-size: 100% 100%;
+    color: white;
+    cursor: pointer;
+  }
 </style>

src/views/Monit/Monit.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>视频监控</div>
+</template>
+
+<script>
+export default {
+ name: "Monit"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Production/Production.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>生产经营</div>
+</template>
+
+<script>
+export default {
+name: "Production"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Zoology/Zoology.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>生态监测</div>
+</template>
+
+<script>
+export default {
+name: "Zoology"
+}
+</script>
+
+<style scoped>
+
+</style>