<template> <div :style="`background:url(${bg}) no-repeat fixed;background-size: 100% 100%;`"> <el-row> <el-col :span="24" class="top"> <top></top> </el-col> <el-col :span="24" class="logo"> <div class="w_1200"> <logo :info="info"></logo> </div> </el-col> <el-col :span="24" class="menu"> <div class="w_1200"> <menuInfo></menuInfo> </div> </el-col> <el-col :span="24" class="main"> <div class="w_1200"> <router-view /> </div> </el-col> <el-col :span="24" class="foot"> <div class="w_1200"> <foot :info="info"></foot> </div> </el-col> </el-row> </div> </template> <script> import top from './top.vue'; import logo from './logo.vue'; import menuInfo from './menuInfo.vue'; import foot from './foot.vue'; export default { name: 'government', props: { info: null, //站点信息 }, components: { top, //头部 logo, //logo menuInfo, //导航 foot, //底部 }, data: () => ({ bg: require('@common/assets/home/bg.jpg'), }), created() {}, computed: {}, methods: {}, }; </script> <style lang="less" scoped> .w_1200 { width: 1200px; margin: 0 auto; } .top { height: 40px; overflow: hidden; background-color: rgba(11, 58, 125, 0.8); } .logo { height: 200px; overflow: hidden; } .menu { height: 70px; overflow: hidden; } .main { // height: 1080px; overflow: hidden; margin: 10px 0; } .foot { float: left; width: 100%; height: 120px; overflow: hidden; } </style>