|
- <template>
- <div class="bgBox">
- <div class="topBar">
- <div class="topBar_ct">
- <p class="left">欢迎来到 武汉富茂科技有限公司 !</p>
- <p class="right">
- <span @click="goRouter('/publish')">发布信息</span>
- <span @click="goRouter('/login')">登录</span>
- <span @click="goRouter('/register')">注册</span>
- </p>
- </div>
- </div>
- <div class="topImgBox">
- <!-- <img src="../../assets/img/bg/bg.jpg" class="topImg" alt=""> -->
- <el-input placeholder="搜索" v-model="search" class="searchIpt" @keyup.enter.native="searchFn">
- </el-input>
- </div>
- <div class="nav">
- <el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
- background-color="#409EFF"
- text-color="#fff"
- active-text-color="#ffd04b"
- >
- <el-menu-item index="1">首页</el-menu-item>
- <el-menu-item index="4">生活服务</el-menu-item>
- <el-menu-item index="5">房屋租赁</el-menu-item>
- <el-menu-item index="6">宠物市场</el-menu-item>
- <el-menu-item index="7">餐饮美食</el-menu-item>
- <el-menu-item index="8">票务卡券</el-menu-item>
- <el-menu-item index="9">车辆服务</el-menu-item>
- <el-menu-item index="10">企业招聘</el-menu-item>
- <el-menu-item index="11">商务服务</el-menu-item>
- </el-menu>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- search: '',
- menuActiveIndex: '1'
- };
- },
- watch: {
- $route() {
- this.menuActiveIndex = this.$route.query.tag ? this.$route.query.tag : '1'
- }
- },
- methods: {
- handleSelect(key, keyPath) {
- if(key === '1') {
- this.$router.push('/home');
- } else {
- this.$router.push({path: "/journalism",query:{tag: key}});
- }
- },
- goRouter(url) {
- if(url) {
- this.$router.push(url);
- }
- },
- searchFn() {
- this.$router.push('/home')
- this.search = ''
- }
- }
- };
- </script>
-
- <style lang="scss" scoped>
-
- .bgBox {
- width: 100%;
- /* background-image: url("../../assets/img/bg/2165324.png");
- //background-attachment: fixed;
- background-repeat: repeat-x;
- background-size: 100% 160px; */
- .topBar{
- line-height: 40px;
- height: 40px;
- height: 40px;
- background: rgb(228 242 253 / 70%);
- color: #444;
- .topBar_ct{
- width: 1200px;
- margin: 0 auto;
- .left{
- float: left;
- }
- .right{
- float: right;
- span{
- padding: 0 15px;
- cursor: pointer;
- }
- span:nth-of-type(2){
- border-right: 1px solid #ccc;
- }
- span:hover{
- font-weight: bold;
- }
- }
- }
-
- }
- .topImgBox{
- position: relative;
- height: 130px;
- background: #E4F2FD;
- width: 100%;
- .searchIpt{
- position: absolute;
- right: 20%;
- top: 5%;
- width: 200px;
- border: none;
- }
- }
- .topImg{
- width: 100%;
- }
- .nav {
- width: 1200px;
- margin: -64px auto 20px;
- display: flex;
- /* height: 60px;
- line-height: 60px; */
- background: #606266;
- .el-menu--horizontal {
- width: 100%;
- }
- .el-menu--horizontal>.el-menu-item {
- height: 50px;
- line-height: 50px;
- }
-
- }
- }
- .Box {
- overflow: hidden;
- }
- .backImg {
- height: 160px;
- width: 100%;
- .logoBox {
- width: 1200px;
- height: 160px;
- margin: 0 auto;
- // background-color: red;
-
- overflow: hidden;
- .logo_img {
- height: 130px;
- width: 150px;
- // background-color: antiquewhite;
- margin: 5px;
- float: left;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .title_Box {
- float: left;
- margin-left: 100px;
- margin-top: 30px;
- p {
- width: 600px;
- font-size: 30px;
- margin: 20px 0;
- text-align: center;
- font-weight: bold;
- color: rgb(253, 236, 189);
- }
- }
- }
- }
- .navigation {
- width: 1200px;
- margin: 0 auto;
- margin-top: 20px;
- background-color: cornflowerblue;
- }
- .el-menu-demo {
- display: flex;
- .el-menu-item {
- /* width: 10%; */
- text-align: center;
- flex: 1;
- }
- }
-
- /*.el-submenu {
- text-align: center;
- width: 14.2%;
- } */
-
- </style>
-
- <style lang="scss">
- .searchIpt{
- input{
- border: none;
- width: 150px;
- height: 30px;
- border-radius: 30px;
- }
- }
- </style>
|