<template> <header class="one-header"> <h1>Baidu DLS</h1> <a href="http://dls.baidu.com/" target="_blank" >返回 DLS</a> <veui-dropdown label="Vue" :options="options" @click="redirect" /> </header> </template> <script> import { Dropdown } from 'veui' export default { name: 'one-header', components: { 'veui-dropdown': Dropdown }, data () { return { options: [ { label: 'Vue', value: '/' }, { label: 'React', value: 'http://one-ui.baidu-int.com/' }, { label: 'Angular', value: 'http://cp01-wangfengjiao01.epc.baidu.com:8404/' } ] } }, methods: { redirect (url) { location.href = url } } } </script> <style lang="stylus" scoped> .one-header position fixed top 0 left 0 right 0 z-index 20 display flex align-items center height 60px background-color #070628 color #ffffff padding 0 51px 0 17px h1 display inline-block font-size 18px a margin-left auto color #ffffff font-size 16px &:hover color #ffffff .veui-dropdown margin-left 40px & >>> .veui-dropdown-button color #ffffff background-color transparent border-radius 6px height 28px display inline-flex align-items center .veui-dropdown-label line-height 1 </style>