添加公共头部，注册成功跳转基本信息页
This commit is contained in:
熊丽君
@ -1,42 +1,64 @@
|
||||
<template>
|
||||
<div class="my_header">
|
||||
<div class="title content p0-100">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<img
|
||||
src="@/assets/logo/logo2.png"
|
||||
alt=""
|
||||
style="vertical-align: middle;"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row
|
||||
style="justify-content: flex-end;height: 100%;align-items: center;padding-right: 30px;"
|
||||
>
|
||||
<el-col :span="8">
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model.trim="input"
|
||||
placeholder="请输入搜索关键字"
|
||||
@keyup.enter.native="toSearch"
|
||||
></el-input>
|
||||
<el-button type="warning" @click="toSearch">一站搜</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 整体宽度 -->
|
||||
<div class="content">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<div class="login_btn" v-if="!avatar">
|
||||
<el-button type="text" @click="handlePage(true)">登录</el-button>
|
||||
<i class="mark">|</i>
|
||||
<el-button type="text" @click="handlePage(false)">注册</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="login_btn avatar-wrapper"
|
||||
v-else
|
||||
@click="handlePath('/mine')"
|
||||
>
|
||||
<!-- <span>
|
||||
<i>20</i>
|
||||
</span> -->
|
||||
<el-badge :value="badge" :max="10" class="item">
|
||||
<img :src="avatar" class="user-avatar" />
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="img2_box">
|
||||
<img src="@/assets/image/02.png" alt="" />
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model.trim="input"
|
||||
placeholder="请输入搜索关键字"
|
||||
@keyup.enter.native="toSearch"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-button type="warning" @click="toSearch">一站搜</el-button>
|
||||
<!-- <router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/search', query: { val: input } }"
|
||||
>
|
||||
<el-button type="warning">一站搜</el-button>
|
||||
</router-link> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['avatar', 'badge'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlePath(path) {
|
||||
this.path = path;
|
||||
this.$router.push({ path });
|
||||
},
|
||||
toSearch() {
|
||||
if (!this.input.length) return this.msgError('请输入搜索关键字');
|
||||
let routerJump = this.$router.resolve({
|
||||
@ -50,36 +72,74 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.my_header {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #3d3e3e;
|
||||
.title {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
.el-row {
|
||||
display: flex;
|
||||
.search {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
/deep/input {
|
||||
color: #fff;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 6px 0 0 6px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
// position: fixed;
|
||||
// z-index: 1;
|
||||
// width: 100%;
|
||||
// height: 48px;
|
||||
// line-height: 48px;
|
||||
// background: #3d3e3e;
|
||||
background-color: #fff;
|
||||
.header {
|
||||
height: 177px;
|
||||
background: url(~@/assets/image/01.png) no-repeat;
|
||||
background-size: contain;
|
||||
.login_btn {
|
||||
height: 60px;
|
||||
text-align: right;
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
color: #4097e7;
|
||||
font-weight: bold;
|
||||
}
|
||||
.mark {
|
||||
width: 1px;
|
||||
color: #dcdcdc;
|
||||
margin: 0 14px;
|
||||
}
|
||||
}
|
||||
.avatar-wrapper {
|
||||
text-align: right;
|
||||
.el-badge {
|
||||
// display: block;
|
||||
// position: relative;
|
||||
top: 10px;
|
||||
right: 8px;
|
||||
border: 1px solid #ffa32c;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5px 5px 5px 0px #dadada;
|
||||
.user-avatar {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img2_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 63px;
|
||||
margin-top: 40px;
|
||||
padding: 0px 10px 0 85px;
|
||||
img {
|
||||
width: 392px;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.el-input--medium .el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
border: 1px solid #ffa32c;
|
||||
border-right: 0;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
.el-button {
|
||||
height: 30px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-radius: 0 6px 6px 0;
|
||||
background-color: #ffa32c;
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
88
src/views/components/header2/index.vue
Normal file
88
src/views/components/header2/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="my_header">
|
||||
<div class="title content p0-100">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<img
|
||||
src="@/assets/logo/logo2.png"
|
||||
alt=""
|
||||
style="vertical-align: middle;"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row
|
||||
style="justify-content: flex-end;height: 100%;align-items: center;padding-right: 30px;"
|
||||
>
|
||||
<el-col :span="8">
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model.trim="input"
|
||||
placeholder="请输入搜索关键字"
|
||||
@keyup.enter.native="toSearch"
|
||||
></el-input>
|
||||
<el-button type="warning" @click="toSearch">一站搜</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toSearch() {
|
||||
if (!this.input.length) return this.msgError('请输入搜索关键字');
|
||||
let routerJump = this.$router.resolve({
|
||||
path: '/search',
|
||||
query: { val: this.input }
|
||||
});
|
||||
window.open(routerJump.href, '_blank');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.my_header {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #3d3e3e;
|
||||
.title {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
.el-row {
|
||||
display: flex;
|
||||
.search {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
/deep/input {
|
||||
color: #fff;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 6px 0 0 6px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.el-button {
|
||||
height: 30px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background-color: #ffa32c;
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user