给更多页添加头部和底部并修改本地userid
This commit is contained in:
熊丽君
145
src/views/components/footer/index.vue
Normal file
145
src/views/components/footer/index.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="my_footer">
|
||||
<div style="height: 4px; background: #ffa32c"></div>
|
||||
<div class="footer_one content">
|
||||
<div class="footer_two">
|
||||
<div class="footer_left">
|
||||
<div class="footer_left_one"></div>
|
||||
<div class="footer_left_two">
|
||||
<i>24小时服务热线</i>
|
||||
</div>
|
||||
<div class="footer_left_three">
|
||||
<i>0551-xxxx-xxx</i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>合肥嘉策信息技术服务有限公司</h3>
|
||||
<div>
|
||||
地址：安徽省合肥市高新区黄山路601号科技创新公共服务中心412-414室
|
||||
</div>
|
||||
<div style="margin:15px 0">联系人：小杨老师、小黄老师</div>
|
||||
<div>电话：19805659038、15855136916</div>
|
||||
</div>
|
||||
<div class="footer_right">
|
||||
<div class="item">
|
||||
<img src="@/assets/image/wx02.png" alt="" />
|
||||
<div>嘉策公众号</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/assets/image/qq02.png" alt="" />
|
||||
<div>QQ群</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hc_bottom">
|
||||
<div class="content text">
|
||||
<span>CopyRight 2020-2021</span>
|
||||
<span>版权所有 合肥嘉策信息技术服务有限公司</span>
|
||||
<span>皖ICP备45619723号-1</span>
|
||||
<!-- <span>技术支持：安徽商挈智能科技有限公司</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.my_footer {
|
||||
background-color: #eeeeee;
|
||||
.footer_one {
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
span {
|
||||
i {
|
||||
margin-right: 3px;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
span:nth-child(2) {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer_two {
|
||||
// border-bottom: 1px solid #dcdcdc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.footer_left {
|
||||
padding: 40px 0;
|
||||
.footer_left_one {
|
||||
width: 392px;
|
||||
height: 63px;
|
||||
background: url(~@/assets/image/02.png) no-repeat left center;
|
||||
background-size: 90% 90%;
|
||||
}
|
||||
.footer_left_two {
|
||||
margin: 10px 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.footer_left_three {
|
||||
font-size: 22px;
|
||||
color: #555;
|
||||
}
|
||||
.footer_left_l {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.footer_left_r {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
i {
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer_right {
|
||||
display: flex;
|
||||
.item {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-right: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer_three {
|
||||
text-align: center;
|
||||
padding: 36px 0;
|
||||
div {
|
||||
font-size: 16px;
|
||||
color: #3394ff;
|
||||
span:nth-child(2) {
|
||||
margin: 0 39px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hc_bottom {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
background: #ccc;
|
||||
.text {
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
src/views/components/header/index.vue
Normal file
88
src/views/components/header/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