大屏

project/dv/apps/AppPdDv.vue

@@ -134,7 +134,7 @@
     </div>
     <div class="middle">
       <div class="top">
-        <AiGrid :instance="instance" @nodeClick="onNodeClick"></AiGrid>
+        <PdGrid :instance="instance" @nodeClick="onNodeClick"></PdGrid>
       </div>
       <div class="bottom">
         <div class="bottom-title">
@@ -228,7 +228,7 @@
 
 <script>
   import DonutChart from './components/DonutChart'
-  import AiGrid from './components/AiGrid'
+  import PdGrid from './components/PdGrid'
   import * as echarts from 'echarts'
 
   export default {
@@ -242,7 +242,7 @@
 
     components: {
       DonutChart,
-      AiGrid
+      PdGrid
     },
 
     data () {
@@ -1194,6 +1194,7 @@
 
       .top {
         flex: 1;
+        margin-bottom: 29px;
       }
 
       .bottom {

project/dv/apps/components/PdGrid.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="pdgird">
+    <div class="pdgird-title">
+      <h2>幸福郫都微网实格架构</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'pdgird',
+
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .pdgird {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-bg.png) no-repeat center;
+    background-size: contain;
+
+    .pdgird-title {
+      position: absolute;
+      top: 200px;
+      left: 50%;
+      width: 640px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-titlebg.png) no-repeat center;
+      background-size: 100% 100%;
+      transform: translateX(-50%);
+
+      h2 {
+        color: #FFFFFF;
+        text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
+        background: linear-gradient(180deg, #FFFFFF 0%, #3BB6FF 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+</style>