有了上一章的基础，我们来做一个公共的头部和底部功能，效果图如下：
普通模式
黑暗模式
找到我们的default.vue,完整代码如下：（功能包括导航navbar,搜索，登录注册弹窗，底部导航等）
<template>
<div class="el_full_box mx-auto">
<div class="common-layout">
<el-container>
<!--头部布局-->
<el-header>
<div class="el_full_box el_base_color">
<div class="hj_container hj_title_box">
<span>欢迎来到XXXXXX</span>
<div class="hj_search">
<div class="hj_ruzhu">
<div>
<div class="hj_rt">
<ul>
<li @click="opeanCooper">
<span class="hj_span1">商务合作</span>
<b></b>
</li>
<li v-if="state.userData">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper u_name">
<img v-if="state.userData" :src="state.userData.headimg" class="u_img">
<span class="user_name">{{state.userData.truename}}</span>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<nuxt-link to="/user">
<el-dropdown-item>个人中心</el-dropdown-item>
</nuxt-link>
<el-dropdown-item divided>
<span @click="loginout" style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<b></b>
</li>
<li v-if="!state.userData" @click="login">
<span class="hj_lo">登录/注册</span>
<b v-if="state.userData"></b>
</li>
<li v-if="state.userData">
<nuxt-link to="/user">
<span class="hj_cc">个人中心</span>
</nuxt-link>
<b v-if="!state.userData"></b>
</li>
<!-- <li v-if="!state.userData">-->
<!-- <nuxt-link to="/reg">-->
<!-- <span class="hj_ccc">注册</span>-->
<!-- </nuxt-link>-->
<!-- </li>-->
<li>
<el-switch
class="change_ico"
v-model="isDark"
size="small"
inline-prompt
style="--el-switch-on-color: #f2f2f2; --el-switch-off-color: #141414"
:active-icon="Sunny"
:inactive-icon="Moon"
@change="themeChange"
/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hj_box">
<div class="hj_container nave_bar">
<div class="c_logo">
<img style="height: 30px;" src="/assets/images/logo.png" />
<span>XXXXXX课堂</span>
</div>
<el-menu
:default-active="activeIndex"
class="el-menu-tabs"
mode="horizontal"
:ellipsis="isCollapse"
background-color="var(--el-navbar_bg)"
text-color="var(--el-text-color-bar)"
active-text-color="#fff"
@select="handleSelect"
>
<el-menu-item index="1">
<NuxtLink to="/"> 首 页 </NuxtLink>
</el-menu-item>
<el-menu-item index="2">
<nuxt-link to="/learn"> 学习中心 </nuxt-link>
</el-menu-item>
<el-menu-item index="3">
<nuxt-link to="/exercise">在线练习</nuxt-link>
</el-menu-item>
<el-menu-item index="4">
<NuxtLink to="/workplace"> 职场提升</NuxtLink>
</el-menu-item>
<el-menu-item index="5">
<NuxtLink to="/employment"> 行业资讯</NuxtLink>
</el-menu-item>
<el-menu-item index="6">
<NuxtLink to="/business"> 新闻资讯</NuxtLink>
</el-menu-item>
<!-- <el-menu-item index="7">-->
<!-- <NuxtLink to="/live"> 网红直播</NuxtLink>-->
<!-- </el-menu-item>-->
<!-- <el-sub-menu index="8">-->
<!-- <template #title>政策动态</template>-->
<!-- <el-menu-item index="8-1"> 政策公告 </el-menu-item>-->
<!-- <el-menu-item index="8-2"> 行业动态 </el-menu-item>-->
<!-- <el-menu-item index="8-3"> IP 新闻</el-menu-item>-->
<!-- </el-sub-menu>-->
<el-menu-item index="9">
<NuxtLink to="/about"> 关于我们 </NuxtLink>
</el-menu-item>
</el-menu>
<div class="hj_search">
<div class="search_lf_box">
<div class="search_box">
<el-input placeholder="课程名称" v-model="state.searchCtn"></el-input>
<div v-if="state.searchCtn" class="sou_action">
<b></b>
<nuxt-link style="margin-top:2px;" v-if="searchCtn" :to="{name:'searchlist',query:{kwd:state.searchCtn}}">
<img @click="getSearchAll" class="hj_btn" src="/assets/images/ssuo.png" alt="">
</nuxt-link>
</div>
<div v-else class="sou_action" @click="getSearchAll">
<b></b>
<el-icon size="28" color="var(--el-text-color-secondary)" >
<Search style="width: 2em; height: 2em;"/>
</el-icon>
</div>
<!--<el-button v-else @click="getSearchAll" class="hj_btn">搜索</el-button>-->
</div>
</div>
</div>
</div>
</div>
</el-header>
<!--主题插槽-->
<el-main class="el_main">
<slot />
</el-main>
<!---底部布局---->
<div class="el_footer">
<div class="hj_footer">
<div class="footer_box">
<div class="lf">
<div>
<h6>友情链接</h6>
<div class="footer_phone hj_href">
<div>
<a style="text-align: left" href="https://daxuepc.com/index">腾讯大学</a>
<a href="https://www.examw.com/">中华考试网</a>
<a href="https://www.wangxiao.cn/?agent=qqcheng">中大网校</a>
<a href="http://www.offcn.com/">中公公务员网</a>
<a href="http://www.huatu.com/">公务员考试网</a>
<a href="http://www.woshipm.com/">人人都是产品经理</a>
<a href="https://ke.qq.com/itdoc">IT教程</a>
<a href="http://www.yixiuxueyuan.com/">益修学院</a>
<a href="https://www.qidianla.com/index/main.html">起点学院</a>
<a style="text-align: left" href="http://hrss.henan.gov.cn" target="_blank">河南省人社厅</a>
<a href="https://www.baishan.com" target="_blank">白山云科技</a>
<a href="https://www.alibabagroup.com/cn/global/home" target="_blank">阿里巴巴</a>
</div>
</div>
</div>
</div>
</div>
<div class="hj_bei hj_shuoming">
<span>Copyright © 2022 All Rights Reserved </span>
<img style="width:22px;" src="/assets/images/logo.png" />
<span> XXXXX信息科技有限公司 版权所有</span>
<a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备333333333号-1</a>
</div>
</div>
</div>
</el-container>
</div>
<!-- 商务合作表单弹窗 -->
<client-only>
<el-dialog
width="540px"
v-model="state.cooporationTost"
>
<div class="title hj_two hj_t_margin">
<div>
<span>商务合作</span>
</div>
</div>
<el-form ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
class="common-ruleForm"
:size="formSize"
status-icon
label-width="0"
>
<el-form-item label="" prop="cNames">
<el-input placeholder="请输入姓名" v-model="ruleForm.cNames"></el-input>
</el-form-item>
<el-form-item label="" prop="cPhone">
<el-input placeholder="请输入联系方式" v-model="ruleForm.cPhone"></el-input>
</el-form-item>
<el-form-item label="" prop="selectedOptions" class="hj_area">
<el-cascader
size="large"
:options="$regionData"
placeholder="选择所在地区"
v-model="state.selectedOptions"
@change="handleChange">
</el-cascader>
</el-form-item>
<el-form-item label="" style="margin-bottom: 40px;" prop="cDesc">
<el-input
type="textarea"
:rows="4"
placeholder="合作描述"
v-model="ruleForm.cDesc">
</el-input>
</el-form-item>
<el-button type="primary" class="hj_reg_btn" @click.native.prevent="HeZuo">提 交</el-button>
</el-form>
</el-dialog>
</client-only>
<!-- 注册提示弹窗 -->
<client-only>
<el-dialog v-model="state.tipShow" title="注册须知" width="30%" center>
<div>
<span><strong style="color:#ff0000">注意</strong>：本平台注册功能只针对个人用户使用，批量组织学习用户，请联系： <strong style="color:#173C80">负责人</strong> / <strong style="color:#173C80">教务老师</strong> 获取本人账号密码登录学习相关课程， <strong style="color:#ff0000">切勿注册</strong> </span>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="backLogin">登 录</el-button>
<el-button type="primary" @click="wenTi">注 册</el-button>
</span>
</template>
</el-dialog>
</client-only>
<!-- 登录弹窗 -->
<client-only>
<el-dialog v-model="state.loginVisible" width="440px" center>
<div class="hj_login" >
<div class="title hj_two">
<div class="loginActive" >
<img style="width:100px;" src="assets/images/loginImg.png" alt="">
</div>
</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="0" class="demo-ruleForm">
<el-form-item label="" prop="phone">
<el-input placeholder="请输入手机号码" v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input placeholder="请输入密码" show-password v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item class="hj_other" label="">
<div class="hj_aggrens">
<el-checkbox v-model="state.checked">记住密码</el-checkbox>
<div>
<span @click="forgetPwd">忘记密码</span>
<b></b>
<span @click="register">注册</span>
</div>
</div>
</el-form-item>
<el-form-item label="">
<el-button type="primary" @click="userLogin" class="hj_reg_btn hj_sm_btn" >登 录</el-button>
</el-form-item>
</el-form>
</div>
</el-dialog>
</client-only>
<!-- 找回密码 -->
<client-only>
<el-dialog :closeOnClickModal="false" width="440px" center v-model="state.forgetVisible">
<div class="hj_login" >
<div class="title hj_two hj_sp">
<span class="hj_three">找回密码</span>
</div>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0" class="demo-ruleForm">
<div v-if="state.getShow == 0">
<el-form-item label="" prop="phone">
<el-input placeholder="请输入注册手机号" v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item class="pos_cod" label="" prop="code">
<div class="hj_code">
<el-input class="_code" placeholder="请输入验证码" v-model="ruleForm.code"></el-input>
<el-button @click="getCode" :disabled="state.isDisabled" class="get_cod" type="success" round>{{state.buttonName}}</el-button>
</div>
</el-form-item>
<el-form-item label="">
<el-button @click="getSteps(0)" type="primary" class="hj_reg_btn hj_sm_btn mj_next" >下一步</el-button>
</el-form-item>
</div>
<div v-else>
<el-form-item label="" prop="password">
<el-input show-password placeholder="请输入密码" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="" prop="rePassword">
<el-input show-password placeholder="请再次输入密码" v-model="ruleForm.rePassword"></el-input>
</el-form-item>
<el-form-item label="">
<el-button @click="getSteps(1)" type="primary" class="hj_reg_btn hj_sm_btn mj_next" >提 交</el-button>
</el-form-item>
</div>
</el-form>
</div>
</el-dialog>
</client-only>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, ElButton,ElCheckbox } from 'element-plus'
import { Moon, Sunny, Search} from '@element-plus/icons-vue'
import theme from '@/utils/theme'
import { colorMix } from "@/utils/tool"
const { $router, $regionData,$TextToCode, $CodeToText } = useNuxtApp()
const routeName = $router.currentRoute.value.name
const activeIndex = ref('1')
const isCollapse = ref(false)
const isDark = ref(true)
//导航定位
if(routeName == "learn"){
activeIndex.value = "2"
}else if(routeName == "exercise"){
activeIndex.value = "3"
}else if(routeName == "industry"){
activeIndex.value = "7"
}else if(routeName == "workplace"){
activeIndex.value = "6"
}else if(routeName == "about"){
activeIndex.value = "9"
}else{
activeIndex.value = "1"
}
// 设置switch的背景颜色
const blackColor = 'var(--bg-color-mute)'
const themeColorObj = {
defaultTheme: {
title: '浅色主题'
},
darkTheme: {
title: '深色主题'
}
}
const state = reactive({
currentSkinName: 'defaultTheme',
searchCtn:'',
options:[],
selectedOptions: [],
cooporationTost:false,
tipShow:false,
registerVisible:false,
loginVisible:false,
forgetVisible:false,
loginActives:0,
checked: true,
getShow:0,
buttonName: "获取验证码",
isDisabled: false,
ctnList:[],
sTime: 60,
userData:''
})
// 表单
const ruleForm = reactive({
'cNames': '',
'cPhone': '',
'phone':'',
'password':'',
'region': '',
'sheng':'',
'shi':'',
'xian':'',
'code':'',
'rePassword':'',
'cDesc': ''
})
const rules = reactive<FormRules>({
cNames: [
{ required: true, message: '请输入您的姓名', trigger: 'blur' }
],
cPhone: [
{ required: true, message: '请输入您的手机号码', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
],
rePassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }
],
region: [
{
required: true,
message: '请选择所在地区',
trigger: 'change',
},
],
cDesc: [
{ required: true, message: '您的合作意向描述', trigger: 'blur' }
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
resource: [
{
required: true,
message: 'Please select activity resource',
trigger: 'change',
},
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' },
],
})
onMounted(() => {
if(process.client){
switchTheme(state.currentSkinName)
state.options = $regionData
console.log($TextToCode)
state.selectedOptions = [
$TextToCode ['河南省'].code,
$TextToCode ['河南省']['郑州市'].code,
// $TextToCode ['河南省']['郑州市']['金水区'].code
]
}
})
// 选择时间
const handleChange = (value) => {
ruleForm.region = $CodeToText[value[0]]+'/'+$CodeToText[value[1]]+'/'+$CodeToText[value[2]]
ruleForm.sheng = $CodeToText[value[0]]
ruleForm.shi = $CodeToText[value[1]]
ruleForm.xian = $CodeToText[value[2]]
}
// 提交商务合作表单
const HeZuo = ():void => {
let telReg = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/;
if(!ruleForm.cNames){
ElMessage({
message: '请输入您的姓名',
type: 'error',
})
}else if(!ruleForm.cPhone){
ElMessage({
message: '请输入手机号码',
type: 'error',
})
}else if(!telReg.test(ruleForm.cPhone)){
ElMessage({
message: '手机号码格式不正确',
type: 'error',
})
}else if(!ruleForm.region){
ElMessage({
message: "请选择地址",
type: 'error',
})
}else if(!ruleForm.cDesc){
ElMessage({
message: '合作描述不能为空',
type: 'error',
})
}else{
let data = {
'name':ruleForm.cNames,
'phone':ruleForm.cPhone,
'province':ruleForm.sheng,
'city':ruleForm.shi,
'county':ruleForm.xian,
'demand':ruleForm.cDesc
}
//商务合作接口
}
}
const getThemes = ():void => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
})
}
const themeChange = (val: boolean) => {
console.log(val)
if(val){
state.currentSkinName = 'defaultTheme'
switchTheme( state.currentSkinName )
}else{
state.currentSkinName = 'darkTheme'
switchTheme(state.currentSkinName)
}
}
const switchTheme = (type?:string) =>{
type = type || 'darkTheme'
const colorObj = theme[type]
for (let i = 1; i < 10; i += 1) {
colorObj[`--el-color-primary-light-${10 - i}`] = colorMix(colorObj['--el-color-white'], colorObj['--el-color-primary'], i * 0.1)
}
Object.keys(colorObj).map(item => {
document.documentElement.style.setProperty(item, colorObj[item])
})
}
//商务合作
const opeanCooper = () => {
state.cooporationTost = true
console.log(state.cooporationTost)
}
//导航切换
const handleSelect = (key: string, keyPath: string[]) => {
}
// 搜索
const goSearch = () => {
}
const getSearchAll = () => {
}
// 退出登录
const loginout = () => {
}
//登录注册
const login = () => {
state.loginVisible = true
}
//返回登录
const backLogin = () => {
state.tipShow = false
state.loginVisible = true
}
//注册
const register = () => {
state.tipShow = true
state.loginVisible = false
}
//获取验证码
const getCode = () => {
state.isDisabled = true;
var telReg = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/;
if(ruleForm.phone){
state.isDisabled = false;
ElMessage({
message: "手机号码不能为空",
type: 'error',
})
}else if(!telReg.test(ruleForm.phone)){
state.isDisabled = false;
ElMessage({
message: "手机号码格式不正确",
type: 'error',
})
}else{
let data = {
phone:ruleForm.phone
}
getCodes(data)
let interval = window.setInterval(function() {
state.buttonName = '' + state.sTime + '秒后重新发送';
--state.sTime;
if(state.sTime < 0) {
state.buttonName = "重新发送";
state.sTime = 60;
state.isDisabled = false;
window.clearInterval(interval);
}
}, 1000);
}
}
const getCodes = (data) => {
//获取验证码接口
}
//注册弹窗
const wenTi = () => {
state.tipShow = false
state.loginVisible = false
// refreshCode()
}
// 忘记密码
const forgetPwd = () => {
state.forgetVisible = true
}
const getSteps = (i:number) => {
if(i == 0){
var telReg = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/;
if(!ruleForm.phone){
ElMessage({
message: "请输入手机号码",
type: 'error',
})
}else if(!telReg.test(ruleForm.phone)){
ElMessage({
message: "手机号码格式不正确",
type: 'error',
})
}else if(!ruleForm.code){
ElMessage({
message: "请输入验证码",
type: 'error',
})
}else{
state.getShow = i+1
}
}else{
if(!ruleForm.password){
ElMessage({
message: "请输入密码",
type: 'error',
})
}else if(!ruleForm.rePassword){
ElMessage({
message: "请再次输入密码",
type: 'error',
})
}else if(ruleForm.password !== ruleForm.rePassword){
ElMessage({
message: "两次密码不一致",
type: 'error',
})
}else{
let data = {
'username':ruleForm.phone,
'code':ruleForm.code,
'newspassword':ruleForm.password
}
//忘记密码接口
}
}
}
const userLogin = () => {
}
const handleClick = () => {
}
</script>
<style lang="scss" scoped>
:deep(.el-input__inner){
height: 40px;
line-height: 40px;
width: 100%;
}
//登录注册
.hj_login{
.hj_code{
display: flex;
flex-direction: row;
justify-content: space-between;
.get_cod{
width:200px;
color:#fff !important;
font-size: 14px;
background-color: #173C80;
border-color:#173C80;
height:40px;
line-height: 40px;
margin-left:22px;
border-radius: 4px !important;
&:hover{
background-color: #4570AB;
color:#fff;
border:1px solid #4570AB;
}
:deep(span){
color:#fff !important;
}
}
}
padding:0 22px;
:deep(.el-input){
height: 42px;
}
:deep(.el-input__inner){
-webkit-appearance: none;
border-radius: 4px;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
.hj_other{
>div{
line-height: inherit !important;
}
.hj_aggrens{
display: flex;
flex-direction: row;
justify-content: space-between;
width:100%;
:deep(.el-checkbox__label){
color:#333 !important;
font-size: 14px !important;
font-weight: inherit !important;
}
span:hover{
cursor: pointer;
}
div{
display: flex;
justify-content: flex-end;
align-items: center;
span{
display: inline-block;
font-size: 14px;
color:#999;
font-weight: bold;
&:hover{
cursor: pointer;
}
}
b{
display: inline-block;
height:10px;
width:1px;
background-color: #999;
margin-left:12px;
margin-right:12px;
}
}
}
}
}
//商务合作
.title{
display: flex;
flex-direction: row;
justify-content: center;
margin-top:-42px;
div{
text-align: center;
padding: 10px 14px;
}
span{
width:100%;
display: block;
text-align: center;
font-size: 18px;
margin-bottom: 32px;
color:#333;
}
}
.hj_two{
width:100%;
}
.hj_reg_btn{
width:100%;
height:42px;
font-size: 16px;
}
.common-ruleForm{
padding:12px 32px 0 32px;
:deep(div){
width:100%;
}
}
.el_full_box{
.el-header{
position: fixed;
left:0;
top:0;
width:100%;
padding:0;
height:80px;
z-index: 1000;
background-color: var(--el-navbar_bg);
.hj_box{
background-color: var(--el-navbar_bg);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
width:100%;
height:50px;
overflow: hidden;
.nave_bar{
display: flex;
justify-content: space-between;
align-items: center;
.hj_search{
width:120px;
display: flex;
flex-direction: row;
justify-content: space-between;
.search_lf_box{
width:100%;
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
.search_box{
position: relative;
display: flex;
justify-content: space-between;
:deep(.el-input__inner){
width: 90px;
height: 32px;
font-size: 12px;
//border:1px solid var(--el-border-color-base)
border:none;
}
//:deep(.el-input__wrapper ){
// justify-content: flex-end;
//}
>div{
float: right;
width: 100%;
height: 32px;
border-radius: 45px;
}
.sou_action{
display: flex;
justify-content: center;
align-items: center;
&:hover{
cursor: pointer;
}
.hj_btn{
width:22px;
height:22px;
color:#fff;
border-radius: 45px;
text-align: center;
margin-top:6px;
&:hover{
cursor: pointer;
}
}
b{
display: inline-block;
width:1px;
height:28px;
background-color: #efefef;
margin-right:5px;
}
}
}
}
.hj_ruzhu{
display: flex;
flex-direction: column;
margin-left:22px;
min-width: 170px;
text-align: right;
div{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
.hj_rt{
b{
display: flex;
margin-left:16px;
margin-right:16px;
height:16px;
width:1px;
background-color:var(--el-text-color-primary);
}
ul{
overflow: hidden;
display: flex;
flex-direction: row;
padding-left:0;
li{
display: flex;
flex-direction: row;
cursor: pointer;
align-items: center;
a{
display: flex;
justify-content: flex-start;
align-items: center;
}
.user_name{
display: inline-block;
width:50px;
color:#00adff !important;
}
.hj_lo{
display: inline-block;
width:33px;
}
.hj_ccc{
width:32px;
}
.hj_cc{
display: inline-block;
width:68px;
}
}
}
}
span{
font-size: 14px;
color:#fff;
}
}
}
}
.c_logo{
display: flex;
justify-content: flex-start;
align-items: center;
span{
display: inline-block;
font-size:18px;
color:var(--el-text-color-bar);
font-weight: 400;
}
}
.el-menu-tabs{
display: flex;
justify-content: space-between;
a{
padding:0 10px;
font-weight:400;
font-size:14px;
text-decoration:none;
}
}
}
.hj_container {
max-width: 1200px;
min-width: 1100px;
margin: 0 auto;
height:52px;
.el-menu_box{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--el-navbar_bg);
height:60px;
width:100%;
li{
height:60px;
line-height: 60px;
}
}
}
}
.hj_title_box{
height:36px !important;
>span{
font-size: 13px;
color:var(--el-text-color-cls);
}
}
.hj_container{
max-width: 1200px;
min-width: 1100px;
margin:0 auto;
padding: 0 22px 0 22px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
height:100px;
.hj_header{
height: 95px;
display: flex;
justify-content: flex-start;
align-items: center;
.hj_title{
min-width: 367px;
display: flex;
justify-content: flex-start;
flex-direction: column;
strong{
font-weight: 700;
font-family: Microsoft YaHei;
font-size: 24px;
color: var(--el-logo_bg);
}
span{
font-family: Times New Roman;
font-size: 12px;
color: var(--el-en_bg);
}
}
}
.hj_search{
display: flex;
flex-direction: row;
justify-content: flex-end;
.hj_ruzhu{
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-left:22px;
min-width: 170px;
text-align: right;
position: relative;
.hj_rt{
:deep(.el-switch__action) {
display: none;
}
:deep(.el-switch) {
}
.hj_span1{
display: inline-block;
width:72px;
&:hover{
color:#ff3f29;
}
}
ul{
overflow: hidden;
display: flex;
flex-direction: row;
padding-left:0;
li{
display: flex;
flex-direction: row;
cursor: pointer;
align-items: center;
.hj_theme{
margin-left:22px;
:deep(.el-input__inner) {
font-size: 12px;
border:1px solid var(--el-border-color-base)
}
}
.u_img{
width:32px;
height:32px;
margin-right:8px;
}
a{
display: flex;
justify-content: flex-start;
align-items: center;
}
span{
font-size: 13px;
color:var(--el-text-color-cls);
&:hover{
color:#ff3f29;
}
}
b{
display: flex;
margin-left:16px;
margin-right:16px;
height:10px;
width:1px;
background-color:var(--el-text-color-cls);
}
}
}
}
.hj_phone{
position: absolute;
bottom:-14px;
right:6px;
font-size: 14px;
color:#FF0200;
text-align: center;
margin-top:12px;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
animation-direction:alternate;
animation-timing-function: ease-in-out;
-webkit-animation:mymove 5s infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes mymove
{
0%{
transform: scale(1); /*开始为原始大小*/
}
25%{
transform: scale(1.1); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.1);
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0%{
transform: scale(1); /*开始为原始大小*/
}
25%{
transform: scale(1.1); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.1);
}
}
img{
margin-left:12px;
}
div{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
span{
font-size: 14px;
}
}
}
.search_lf_box{
width:45%;
padding-left:4px;
.search_box{
position: relative;
padding-right:37px;
>div{
height:39px;
border: var(--el-input-bg-color);
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
}
.hj_btn{
position: absolute;
right:32px;
top:0px;
width:89px;
z-index: 99;
height:39px;
background-color: var(--el-navbar_bg);
color: var(--el-color-primary);
border-top-left-radius: 0px;
border-top-right-radius: 12px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 12px;
text-align: center;
&:hover{
border:1px solid #548DD4;
background-color: var(--el-hover-bg-color);
}
}
span{
font-size: 16px;
color:#fff;
}
span:hover{
color:#fff !important;
}
}
}
}
}
}
.el_main{
width: 100%;
margin-top:86px;
min-height: 70vh;
background-color: var(--el-background-color-base);
padding: 0;
}
.el_footer{
padding:0;
.hj_footer{
width:100%;
background-color: var(--el-footer-bg);
padding-top: 24px;
padding-bottom: 24px;
background-image: url('assets/images/footer-logo-dark.png');
background-position: 50%;
background-size: 100%;
padding:32px 0;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.hj_shuoming{
color:var(--el-text-color-th);
font-size: 14px !important;
display: flex;
justify-content: flex-start;
align-items: center;
span{
color:var(--el-text-color-th);
font-size: 14px !important;
}
}
.hj_bei{
font-size: 14px !important;
margin:12px 0 32px 0;
color:var(--el-text-color-th);
a{
text-decoration: none;
font-size: 14px;
color:var(--el-text-color-th);
display: inline-block;
margin-left:6px;
}
}
.footer_box{
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 1200px;
min-width: 1100px;
margin:0 auto;
padding: 0 6px 0 6px;
margin-bottom: 32px;
a{
margin-bottom: 12px;
display: inline-block;
font-size: 16px;
color: var(--el-text-color-secondary);
text-decoration: none;
vertical-align: top;
}
img{
width:120px;
height:120px;
}
.lf{
display: flex;
flex-direction: row;
justify-content: space-between;
width:100%;
h6,span{
font-size: 16px;
color: var(--el-text-color-primary);
}
h6{
padding-left:42px;
}
>div{
display: flex;
flex-direction: column;
justify-content: flex-start;
.footer_phone {
flex-direction: row !important;
justify-content: flex-start;
align-items: center;
div:first-child{
padding-left:42px;
a{
display: inline-block;
font-size: 14px;
}
}
div{
a:first-child{
margin-right:22px;
}
a{
display: inline-block;
font-size: 14px;
}
}
h4{
border-bottom: 0;
font-size: 20px;
color:#fff;
margin-top:32px;
}
span{
font-size: 20px;
color:#fff;
}
img{
width:67px;
height:70px;
}
}
}
.hj_href{
a{
display: inline-block;
margin-right:42px;
}
}
}
.rt{
display: flex;
justify-content: flex-end;
width:25%;
span{
display: block;
font-size: 14px;
color:var(--el-text-color-secondary);
margin-top:8px;
}
div{
width:100%;
display: flex;
justify-content: flex-end;
align-items: center;
div{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
}
}
}
}
}
}
</style>
⚠️注意：原文来自个人头条号： "胖奶奶与胖小伙"
