1

src/components/admin-frame/Header.vue

@@ -8,7 +8,7 @@
               <i v-if="!collapse" class="el-icon-s-fold"></i>
               <i v-else class="el-icon-s-unfold"></i>
             </span>
-            <span>{{ siteInfo.title }}-管理中心</span>
+            <span>{{ siteInfo.zhTitle }}-管理中心</span>
           </el-col>
           <el-col :span="12" class="right">
             <i class="el-icon-user-solid"></i>

src/components/web-frame/banner.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="banner">
+    <el-row v-if="bannerInfo.info.display">
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-carousel
+            :height="bannerInfo.info.height"
+            :trigger="bannerInfo.info.trigger"
+            :autoplay="bannerInfo.info.autoplay"
+            :interval="bannerInfo.info.interval"
+            :indicator-position="bannerInfo.info.indicatorpos"
+            :arrow="bannerInfo.info.arrow"
+            :type="bannerInfo.info.type"
+            :loop="bannerInfo.info.loop"
+            :direction="bannerInfo.info.direction"
+          >
+            <el-carousel-item v-for="(item, index) in bannerInfo.list" :key="index">
+              <el-image :src="item.url"></el-image>
+            </el-carousel-item>
+          </el-carousel>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'banner',
+  props: {
+    bannerInfo: { type: Object, default: () => {} },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .el-image {
+      width: 100%;
+      height: 400px;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/components/web-frame/foot.vue

@@ -1,13 +1,11 @@
 <template>
   <div id="foot">
-    <el-row>
+    <el-row v-show="footInfo.display">
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
           <div class="w_1200">
-            <p>{{ footInfo.p1 }}</p>
             <p>{{ footInfo.p2 }}</p>
             <p>{{ footInfo.p3 }}</p>
-            <p>{{ footInfo.p4 }}</p>
           </div>
         </el-col>
       </el-col>
@@ -16,16 +14,15 @@
 </template>
 
 <script>
-const { footinfo } = require('../../layout/deploy/site');
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'foot',
-  props: {},
+  props: {
+    footInfo: { type: Object, default: () => {} },
+  },
   components: {},
   data: function() {
-    return {
-      footInfo: footinfo,
-    };
+    return {};
   },
   created() {},
   methods: {},
@@ -48,10 +45,13 @@ export default {
 <style lang="less" scoped>
 .main {
   .one {
-    min-height: 120px;
+    min-height: 30px;
     background-color: #3a3637;
     color: #999999;
     padding: 10px 0;
+    p {
+      margin: 0 0 5px 0;
+    }
   }
 }
 </style>

src/components/web-frame/index.vue

@@ -2,9 +2,11 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main">
-        <top></top>
+        <top :siteInfo="siteInfo"><template v-slot:deRight></template></top>
+        <menus :menuInfo="menuInfo"></menus>
+        <banner :bannerInfo="bannerInfo"></banner>
         <router-view></router-view>
-        <foot></foot>
+        <foot :footInfo="footInfo"></foot>
       </el-col>
     </el-row>
   </div>
@@ -12,14 +14,29 @@
 
 <script>
 import top from './top.vue';
+import menus from './menus.vue';
+import banner from './banner.vue';
 import foot from './foot.vue';
+const { siteInfo, menuInfo, bannerInfo, footInfo } = require('../../layout/deploy/site');
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: { top, foot },
+  components: { top, menus, banner, foot },
   data: function() {
-    return {};
+    return {
+      siteInfo: siteInfo,
+      menuInfo: menuInfo,
+      bannerInfo: {
+        info: bannerInfo.info,
+        list: [
+          { name: '轮播一', url: require('../../assets/banner.png') },
+          { name: '轮播二', url: require('../../assets/banner.png') },
+          { name: '轮播二', url: require('../../assets/banner.png') },
+        ],
+      },
+      footInfo: footInfo,
+    };
   },
   created() {},
   methods: {},

src/components/web-frame/menus.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="menus">
+    <el-row v-if="menuInfo.info.display">
+      <el-col :span="24" class="main" :style="{ background: menuInfo.info.backColor }">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-menu
+              :default-active="$route.title"
+              :mode="menuInfo.info.mode"
+              :background-color="menuInfo.info.backColor"
+              :text-color="menuInfo.info.textColor"
+              :active-text-color="menuInfo.info.actColor"
+              router
+            >
+              <template v-for="item in menuInfo.menuList">
+                <!-- 二级菜单，三级菜单 -->
+                <template v-if="item.subs">
+                  <el-submenu :index="item.index" :key="item.index">
+                    <!-- 二级菜单-名称 -->
+                    <template slot="title">{{ item.title }}</template>
+                    <template v-for="subItem in item.subs">
+                      <!-- 三级菜单 -->
+                      <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                        <!-- 三级菜单-名称 -->
+                        <template slot="title">{{ subItem.title }}</template>
+                        <!-- 三级菜单-菜单列表 -->
+                        <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
+                          <template slot="title">{{ threeItem.title }}</template>
+                        </el-menu-item>
+                      </el-submenu>
+                      <!-- 二级菜单-菜单列表 -->
+                      <el-menu-item v-else :index="subItem.index" :key="subItem.index" :route="{ path: item.index }">
+                        <template slot="title">{{ item.title }}</template>
+                      </el-menu-item>
+                    </template>
+                  </el-submenu>
+                </template>
+                <!-- 一级菜单 -->
+                <template v-else>
+                  <el-menu-item :index="item.title" :key="item.index" :route="{ path: item.index }">
+                    <template slot="title">{{ item.title }}</template>
+                  </el-menu-item>
+                </template>
+              </template>
+            </el-menu>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'menus',
+  props: {
+    menuInfo: { type: Object, default: () => {} },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  height: 51px;
+  border-bottom: 1px solid #f1f1f1;
+  .one {
+    height: 50px;
+    overflow: hidden;
+    .el-menu--horizontal > .el-menu-item {
+      height: 50px;
+      line-height: 50px;
+      border-bottom: none;
+      font-size: 16px;
+    }
+    /deep/.el-menu--horizontal > .el-menu-item.is-active {
+      background-color: #fe950e !important;
+    }
+    /deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
+      height: 50px;
+      line-height: 50px;
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/components/web-frame/top.vue

@@ -1,8 +1,27 @@
 <template>
   <div id="top">
-    <el-row>
+    <el-row v-show="siteInfo.display">
       <el-col :span="24" class="main">
-        顶部
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-col :span="20" class="left" @click.native="$router.push('/')">
+              <el-col :span="3" class="image">
+                <el-image :src="siteInfo.logo_url"></el-image>
+              </el-col>
+              <el-col :span="21" class="other">
+                <el-col :span="24" class="zhTitle textOver">
+                  {{ siteInfo.zhTitle }}
+                </el-col>
+                <el-col :span="24" class="enTitle textOver">
+                  {{ siteInfo.enTitle }}
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="4" class="right">
+              <slot name="deRight"></slot>
+            </el-col>
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -12,7 +31,9 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'top',
-  props: {},
+  props: {
+    siteInfo: { type: Object, default: () => {} },
+  },
   components: {},
   data: function() {
     return {};
@@ -35,4 +56,32 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .one {
+    min-height: 130px;
+    .left {
+      .image {
+        padding: 16px 0;
+        text-align: center;
+        .el-image {
+          width: 90px;
+          height: 90px;
+        }
+      }
+      .other {
+        padding: 30px 0;
+        .zhTitle {
+          font-size: 35px;
+          font-family: cursive;
+          font-weight: 700;
+        }
+        .enTitle {
+          font-size: 15px;
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/deploy/menu.js

@@ -1,14 +1,2 @@
-export const system = [
-  {
-    icon: 'icon-shouye',
-    index: '/adminCenter/homeIndex',
-    title: '系统首页',
-  },
-];
-export const userMenu = [
-  {
-    icon: 'icon-ceshi',
-    index: '/adminCenter/test/index',
-    title: '测试页面',
-  },
-];
+export const system = [{ icon: 'icon-shouye', index: '/adminCenter/homeIndex', title: '系统首页' }];
+export const userMenu = [{ icon: 'icon-ceshi', index: '/adminCenter/test/index', title: '测试页面' }];

src/layout/deploy/site.js

@@ -1,9 +1,85 @@
 // 网站基本设置
 export const siteInfo = {
-  title: '平台名称',
+  display: true,
+  zhTitle: '长春市福瑞科技有限公司',
+  enTitle: 'Changchun Furui Technology Co., Ltd',
+  logo_url: require('../../assets/logo.png'),
+};
+// 菜单设置
+export const menuInfo = {
+  info: {
+    display: true,
+    mode: 'horizontal',
+    backColor: '#0457c7',
+    textColor: '#ffffff',
+    // actColor: '#fe950e',
+    actColor: '#ffffff',
+  },
+  menuList: [
+    { icon: '', index: '/test1/index', title: '测试菜单一' },
+    { icon: '', index: '/test2/index', title: '测试菜单二' },
+    { icon: '', index: '/test3/index', title: '测试菜单三' },
+    // {
+    //   icon: '',
+    //   index: '2',
+    //   title: '二级菜单',
+    //   subs: [
+    //     {
+    //       icon: '',
+    //       index: '/test3/index',
+    //       title: '二级菜单一',
+    //     },
+    //   ],
+    // },
+    // {
+    //   icon: '',
+    //   index: '3',
+    //   title: '三级菜单',
+    //   subs: [
+    //     {
+    //       icon: '',
+    //       index: '3-1',
+    //       title: '三级菜单-一级',
+    //       subs: [
+    //         {
+    //           icon: '',
+    //           index: '/test3/index',
+    //           title: '三级菜单-二级',
+    //         },
+    //       ],
+    //     },
+    //   ],
+    // },
+  ],
+};
+// 轮播图设置
+export const bannerInfo = {
+  info: {
+    display: true,
+    // 轮播高度
+    height: '400px',
+    // 指示器触发方式-默认值：hover,click：点击
+    trigger: '',
+    // 是否自动切换-默认值：true
+    autoplay: true,
+    // 自动切换秒数
+    interval: 3000,
+    // 指示器位置显示-默认值：显示，outside：外部，none：不显示,
+    indicatorpos: '',
+    // 切换箭头-默认值：鼠标滑过时显示，always：一直显示，never：一直隐藏
+    arrow: '',
+    // 轮播类型-card：卡片化
+    type: '',
+    // 是否循环显示：默认值：true
+    loop: true,
+    // 轮播垂直方向显示-默认值：横向，vertical：垂直
+    direction: 'horizontal',
+  },
+  list: [],
 };
 // 网站底部信息
-export const footinfo = {
+export const footInfo = {
+  display: true,
   p1: '技术运营：吉林省科技大市场专利分市场',
   p2: '技术支持：长春福瑞科技有限公司',
   p3: '地址：吉林省长春市朝阳区前进大街1244号电话：17319450324微信：guhongwei324邮箱：guhongwei0324@163.com',