|
- <template>
- <el-container>
- <el-header>
- <div class="header">
- <img src="@/assets/logo.png" id="logo" />
- <yqheaders/>
- <el-button plain class="login" size="small">注册 / 登陆</el-button>
- </div>
- </el-header>
- <el-main>
- <router-view />
- </el-main>
- <yqfooters/>
- </el-container>
- </template>
- <script>
- import yqheaders from '@/components/header.vue'
- import yqfooters from '@/components/footer.vue'
- export default {
- name: 'layouts',
- data () {
- return {}
- },
- components: {
- yqheaders,
- yqfooters
- }
- }
- </script>
- <style lang="scss" scoped>
- .header{
- width: 1200px !important;
- }
- .el-container {
- margin: 0;
- padding: 0;
- .el-header {
- position: fixed;
- top: 0;
- left: 0;
- margin:0;
- padding: 0;
- width: 100%;
- display: flex;
- justify-content: center;
- height: 77px;
- background: #00000081;
- align-items: center;
- z-index: 999;
- #logo {
- width: 163px;
- height: 43px;
- image-rendering: pixelated;
- margin-right: 70px;
- float: left;
- margin-top: 10px;
- }
- .login {
- background: none !important;
- border: 1px solid #00F6BD;
- opacity: 0.8;
- border-radius: 4px;
- color: #fff;
- float: right;
- margin-top: 16px;
- }
- }
- .el-main {
- padding: 0;
- margin: 0;
- }
- .el-footer {
- margin:0;
- padding: 0;
- width: 100%;
- }
- }
- </style>
|