feat: 页面布局搭建

src/components/FloatPanel/index.vue

@@ -24,6 +24,7 @@ export default {
 
   .@{namespace}-float-panel {
     position: absolute;
+    min-width: 513px;
     
     .content {
       margin-top: 49px;
@@ -40,7 +41,5 @@ export default {
       background: url("@/assets/images/float-panel-right.png") no-repeat;
       background-size: 513px 49px;
     }
-
   }
-
 </style>

src/layouts/default/index.vue

@@ -1,12 +1,18 @@
 <template>
   <div id="default-layout">
     <Header />
-    <router-view />
+    <div>
+      <router-view />
+    </div>
+    <div class="action-panel-wrapper">
+      <ActionPanel />
+    </div>
   </div>
 </template>
 
 <script>
 import Header from './modules/Header.vue'
+import ActionPanel from './modules/ActionPanel'
 export default {
   name: 'DefaultLayout',
   provide() {
@@ -15,7 +21,8 @@ export default {
     }
   },
   components: {
-    Header
+    Header,
+    ActionPanel
   }
 }
 </script>
@@ -28,5 +35,11 @@ export default {
   background-image: url("@/assets/images/global-bg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  .action-panel-wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-48.8%, 0);
+  }
 }
 </style>

src/layouts/default/modules/ActionPanel/ActionItem.vue

@@ -0,0 +1,69 @@
+<template>
+  <div @mouseover="isMove = true" @mouseout="isMove = false" :class="`${namespace}-action-item`" @click="handleClick">
+   <div>
+      <img :class="isMove || isActive ? 'active-icon' : 'icon'" :src="isMove || isActive ? activeIcon : icon" />
+   </div>
+    <div class="title">
+      <span>{{ title }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ActionItem',
+  inject: ['namespace'],
+  props: ['title', 'icon', 'activeIcon', 'active'],
+  data: () => ({
+    isActive: false,
+    isMove: false,
+  }),
+  model: {
+    prop: 'active',
+    event: 'update:active',
+  },
+  created() {
+    this.isActive = this.active | false;
+  },
+  methods: {
+    handleClick() {
+      this.$emit('clickItem')
+      this.isActive = !this.isActive;
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="less">
+@import '@/assets/styles/config.less';
+
+  .@{namespace}-action-item {
+    cursor: pointer;
+    position: relative;
+    .icon {
+      transition: all 0.3s;
+      width: 200px;
+      height: 165px;
+    }
+
+    .active-icon {
+      width: 198px;
+      height: 200px;
+      margin-top: -34px;
+    }
+
+    .title {
+      width: 100%;
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 25px;
+      font-family: DataFont;
+      text-align: center;
+      color: #fff;
+    }
+  }
+</style>

src/layouts/default/modules/ActionPanel/index.js

@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils/component'
+import ActionPanel from './index.vue'
+
+export default withInstall(ActionPanel)

src/layouts/default/modules/ActionPanel/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="`${namespace}-action-panel`">
+    <ActionItem v-for="item in actions"
+      :title="item.name"
+      :icon="item.icon"
+      :activeIcon="item.activeIcon"
+      :key="item.name"
+    />
+  </div>
+</template>
+
+<script>
+import ActionItem from './ActionItem.vue'
+export default {
+  name: 'ActionPanel',
+  inject: ['namespace'],
+  components: {
+    ActionItem
+  },
+  data: () =>({
+    actions: [
+      {
+        name: '消火栓',
+        icon: require('@/assets/images/xf0.png'),
+        activeIcon: require('@/assets/images/xf1.png'),
+      },
+      {
+        name: '天然水源',
+        icon: require('@/assets/images/shuiyuan0.png'),
+        activeIcon: require('@/assets/images/shuiyuan1.png'),
+      },
+      {
+        name: '微型消防站',
+        icon: require('@/assets/images/weixing0.png'),
+        activeIcon: require('@/assets/images/weixing1.png'),
+      },
+      {
+        name: '物联网',
+        icon: require('@/assets/images/wlwang0.png'),
+        activeIcon: require('@/assets/images/wlwang1.png'),
+      },
+      {
+        name: '消防车',
+        icon: require('@/assets/images/xfc0.png'),
+        activeIcon: require('@/assets/images/xfc1.png'),
+      }
+    ]
+  })
+}
+</script>
+
+<style scoped lang="less">
+@import '@/assets/styles/config.less';
+
+  .@{namespace}-action-panel { 
+    height: 200px;
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/views/detail/index.vue

@@ -1,16 +1,22 @@
 <template>
   <div id="detail">
-    详情页
+    <RightPanel />
+    
+    <LeftPanel />
   </div>
 </template>
 
 <script>
+import LeftPanel from './left'
+import RightPanel from './right'
 export default {
   name: 'DetailView',
   components: {
+    LeftPanel,
+    RightPanel
   }
 }
 </script>
 
-<style>
+<style lang="less">
 </style>

src/views/detail/left/index.js

@@ -0,0 +1,4 @@
+import LeftPanel from './index.vue'
+import { withInstall } from '@/utils/component'
+
+export default withInstall(LeftPanel)

src/views/detail/left/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <FloatPanel pos="left">
+    左面板
+    
+  </FloatPanel>
+</template>
+
+<script>
+import { FloatPanel }  from '@/components'
+export default {
+  name: 'DetailLeftView',
+  components: {
+    FloatPanel
+  }
+}
+</script>

src/views/detail/right/index.js

@@ -0,0 +1,4 @@
+import RightPanel from './index.vue'
+import { withInstall } from '@/utils/component'
+
+export default withInstall(RightPanel)

src/views/detail/right/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <FloatPanel pos="right">
+    右面板
+    
+  </FloatPanel>
+</template>
+
+<script>
+import { FloatPanel }  from '@/components'
+export default {
+  name: 'DetailRightView',
+  components: {
+    FloatPanel
+  }
+}
+</script>

src/views/main/index.vue

@@ -1,24 +1,22 @@
 <template>
   <div id="main">
-    <FloatPanel pos="left">
-      <ContainerBorder pos="center" subtitle="子菜单">
-        111
-      </ContainerBorder>
-    </FloatPanel>
+    <RightPanel />
+    
+    <LeftPanel />
   </div>
 </template>
 
 <script>
-import { ContainerBorder, FloatPanel } from '@/components'
+import LeftPanel from './left'
+import RightPanel from './right'
 export default {
   name: 'MainView',
   components: {
-    ContainerBorder,
-    FloatPanel
+    LeftPanel,
+    RightPanel
   }
 }
 </script>
 
-
 <style lang="less">
 </style>

src/views/main/left/index.js

@@ -0,0 +1,4 @@
+import LeftPanel from './index.vue'
+import { withInstall } from '@/utils/component'
+
+export default withInstall(LeftPanel)

src/views/main/left/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <FloatPanel pos="left">
+    左面板
+    
+  </FloatPanel>
+</template>
+
+<script>
+import { FloatPanel }  from '@/components'
+export default {
+  name: 'MainLeftView',
+  components: {
+    FloatPanel
+  }
+}
+</script>

src/views/main/right/index.js

@@ -0,0 +1,4 @@
+import RightPanel from './index.vue'
+import { withInstall } from '@/utils/component'
+
+export default withInstall(RightPanel)

src/views/main/right/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <FloatPanel pos="right">
+    右面板
+    
+  </FloatPanel>
+</template>
+
+<script>
+import { FloatPanel }  from '@/components'
+export default {
+  name: 'MainRightView',
+  components: {
+    FloatPanel
+  }
+}
+</script>