williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加公共头部，注册成功跳转基本信息页

Browse Source
This commit is contained in:
熊丽君
2021-09-14 16:02:04 +08:00
parent 9c07812e2d
commit a8a87cd8c5
5 changed files with 248 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/views/components/header/index.vue
View File

@ -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;"
<!-- 整体宽度 -->
<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')"
>
<el-col :span="8">
<!-- <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>
</el-col>
</el-row>
</el-col>
</el-row>
</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 {
height: 30px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background-color: #ffa32c;
font-size: 16px;
padding: 0 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 {
border-radius: 0 6px 6px 0;
background-color: #ffa32c;
font-size: 18px;
}
}
}

88
src/views/components/header2/index.vue Normal file
View 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>

44
src/views/index.vue
View File

@ -34,43 +34,8 @@
<!-- <div class="img_box">
<img src="@/assets/image/toubu.png" alt="" />
</div> -->
<!-- 整体宽度 -->
<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="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>
<headerPage />
<!-- ul li 列表 -->
<div class="uls">
<div class="lis content">
@ -98,6 +63,7 @@
</template>
<script>
import headerPage from './components/header';
import { mapGetters } from 'vuex';
import footerPage from './components/footer';
// import user from '@/store/modules/user';
@ -105,6 +71,7 @@ import footerPage from './components/footer';
export default {
name: 'home',
components: {
headerPage,
footerPage
},
data() {
@ -265,7 +232,8 @@ export default {
display: flex;
justify-content: space-between;
height: 63px;
margin-top: 35px;
margin-top: 40px;
padding: 0px 10px 0 85px;
img {
width: 392px;
height: 100%;

2
src/views/login.vue
View File

@ -526,7 +526,7 @@ export default {
this.$store
.dispatch('Register', this.registerForm)
.then(() => {
this.$router.push({ path: this.redirect || '/' });
this.$router.push({ path: '/mine/info' });
// this.$router.go(-1);
})
.catch(() => {

78
src/views/result.vue
View File

@ -172,7 +172,7 @@
<span>CopyRight 2020-2021</span>
<span>版权所有 合肥嘉策信息技术服务有限公司</span>
<span>皖ICP备45619723号-1</span>
<span>技术支持：安徽商挈智能科技有限公司</span>
<!-- <span>技术支持：安徽商挈智能科技有限公司</span> -->
</div>
</div>
</div>
@ -192,10 +192,12 @@ import { mapGetters } from 'vuex';
import { add, cancel } from '@/api/search';
import Editor from '@/components/Editor';
import headerPage from './components/header';
// import headerPage2 from './components/header2';
export default {
components: {
Editor,
headerPage
// headerPage2
},
data() {
return {
@ -310,43 +312,43 @@ export default {
}
}
}
.my_header {
position: fixed;
z-index: 1;
width: 100%;
height: 48px;
line-height: 48px;
background: #3d3e3e;
.title {
color: #fff;
.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;
}
}
}
}
}
// .my_header {
// position: fixed;
// z-index: 1;
// width: 100%;
// height: 48px;
// line-height: 48px;
// background: #3d3e3e;
// .title {
// color: #fff;
// .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;
// }
// }
// }
// }
// }
.my_main {
padding-top: 70px;
margin: 30px auto;
.r {
.title {
display: flex;
@ -428,7 +430,7 @@ export default {
}
.footer_right {
display: flex;
.item {
.item:nth-child(1) {
font-size: 18px;
color: #333;
margin-right: 50px;