795 lines
22 KiB
Vue
795 lines
22 KiB
Vue
<template>
|
||
<div class="nav">
|
||
<div class="navCont">
|
||
<img :src="imageUrl.logo" alt srcset />
|
||
<div
|
||
v-for="(item,index) in navCont"
|
||
:key="index"
|
||
@click="navClick(index,item.url)"
|
||
@mouseenter="navMouseClick(index,item.url,true)"
|
||
@mouseleave="navMouseClick(index,item.url,false)"
|
||
:class="{fontSty:index==1&&colorD}"
|
||
>
|
||
<div style="position:relative;">
|
||
{{item.text}}
|
||
<!-- 数据二级导航 -->
|
||
<div class="dataTwo" v-if="twonav&&index===1">
|
||
<div @click="jumpData('monthly')">月度数据</div>
|
||
<div @click="jumpData('quarter')">季度数据</div>
|
||
<div @click="jumpData('year')">年度数据</div>
|
||
<div @click="jumpData('area')">地区数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dsearch">
|
||
<!-- <img :src="imageUrl.search" alt srcset /> -->
|
||
<!-- 未登录 -->
|
||
<div class="div1" v-if="!userLogin" @click="loginWindow()">登录</div>
|
||
<!-- 登陆成功后显示 -->
|
||
<div
|
||
:class="{loginAfter:true,loginAfters:fontsF}"
|
||
v-if="userLogin"
|
||
@mouseenter="userLoginC()"
|
||
@mouseleave="userLoginC()"
|
||
>
|
||
<img :src="userPic" alt srcset />
|
||
{{userName}}
|
||
<!-- 个人信息二级导航 -->
|
||
<div class="dataTwos" v-if="personalInfo">
|
||
<div @click="perspnalCenter">个人中心</div>
|
||
<div @click="quit">退出</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 登陆窗口 -->
|
||
<section class="loginSty" v-if="showWinStatic">
|
||
<div class="loginSty_wcont">
|
||
<div class="wcont_header">
|
||
<div>登录</div>
|
||
<img :src="imageUrl.deleteimg" alt @click="closeLoginWind(false)" />
|
||
</div>
|
||
<div class="wcont_content">
|
||
<div>
|
||
<img :src="imageUrl.usernames" alt />
|
||
<input type="text" placeholder="请输入用户名" v-model="username" />
|
||
</div>
|
||
<div>
|
||
<img :src="imageUrl.userpwds" alt />
|
||
<input type="password" placeholder="请输入密码" v-model="userpwd" />
|
||
</div>
|
||
<div>
|
||
<input type="text" placeholder="请输入验证码" v-model="useryzm" />
|
||
<canvas ref="identifyDom" @click="get_identity()"></canvas>
|
||
</div>
|
||
<div @click="closeLoginWind(true)">确认</div>
|
||
<div>
|
||
<span @click="regirest()">没有账号？去注册</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'navs',
|
||
data: function () {
|
||
return {
|
||
imageUrl: {
|
||
logo: require('../../../static/nav/navlogo.png'),
|
||
search: require('../../../static/nav/search.png'),
|
||
deleteimg: require('../../../static/nav/deleteImg.png'),
|
||
usernames: require('../../../static/nav/username.png'),
|
||
userpwds: require('../../../static/nav/userpwds.png')
|
||
},
|
||
navCont: [
|
||
{ text: '首页', url: '/' },
|
||
{ text: '数据', url: '/companyIntroduction' },
|
||
{ text: '公司介绍', url: '/companyIntroduction' },
|
||
{ text: '联系我们', url: '/relation' },
|
||
{ text: '个人中心', url: '/personalCenter' },
|
||
{ text: '帮助', url: '/help' }
|
||
],
|
||
twonav: false,
|
||
colorD: false,
|
||
userName: '十画.TeFuir',
|
||
userPic: '',
|
||
// 用户名和登陆的显示隐藏
|
||
userLogin: false,
|
||
personalInfo: false,
|
||
fontsF: false,
|
||
// 登陆窗口
|
||
showWinStatic: false,
|
||
// 用户名
|
||
username: '',
|
||
// 密码
|
||
userpwd: '',
|
||
// 验证码
|
||
useryzm: '',
|
||
// 图片中的验证码
|
||
imgIdentify: null
|
||
}
|
||
},
|
||
watch: {
|
||
$auth (newVal, oldVal) {
|
||
console.log(newVal, '$auth$auth$auth$auth')
|
||
}
|
||
},
|
||
methods: {
|
||
navClick (indexs, url) {
|
||
if (indexs !== 1) {
|
||
this.twonav = false
|
||
this.colorD = false
|
||
this.fontsF = false
|
||
this.personalInfo = false
|
||
if (this.$route.path === url) {
|
||
this.$router.go(0)
|
||
} else {
|
||
this.$router.push({
|
||
path: url
|
||
})
|
||
}
|
||
}
|
||
},
|
||
navMouseClick (indexs, url, statics) {
|
||
if (indexs === 1 && statics) {
|
||
this.twonav = true
|
||
this.colorD = true
|
||
this.fontsF = false
|
||
this.personalInfo = false
|
||
} else if (indexs === 1 && !statics) {
|
||
this.twonav = false
|
||
this.colorD = false
|
||
this.fontsF = false
|
||
this.personalInfo = false
|
||
}
|
||
},
|
||
userLoginC () {
|
||
this.personalInfo = !this.personalInfo
|
||
this.fontsF = !this.fontsF
|
||
this.twonav = false
|
||
this.colorD = false
|
||
},
|
||
loginWindow () {
|
||
this.showWinStatic = true
|
||
this.$auth.auth = true
|
||
this.get_identity()
|
||
},
|
||
// 关闭登录窗口
|
||
closeLoginWind (status) {
|
||
if (status) {
|
||
// 调接口上传，成功后关闭窗口
|
||
if (this.username === '') {
|
||
alert('用户名不能为空！')
|
||
} else if (this.userpwd === '') {
|
||
alert('密码不能为空！')
|
||
} else if (this.useryzm === '') {
|
||
alert('验证码不能为空！')
|
||
} else if (this.useryzm.toLocaleLowerCase() !== this.imgIdentify) {
|
||
alert('验证码输入不正确请重新输入！')
|
||
} else {
|
||
// 调接口判断密码是否输入正确,改变登录状态
|
||
this.$axios({
|
||
method: 'POST',
|
||
url: 'member/index/login',
|
||
data: {
|
||
username: this.username,
|
||
password_hash: this.userpwd
|
||
}
|
||
}).then(res => {
|
||
console.log(res)
|
||
// 请求接口完成注册 请求成功
|
||
alert(res.data.message)
|
||
if (res.data.code === 200) {
|
||
this.showWinStatic = !this.showWinStatic
|
||
this.$auth.auth = this.showWinStatic
|
||
// 用户信息存本地
|
||
localStorage.setItem('username', res.data.data.username)
|
||
localStorage.setItem('pic', res.data.data.pic)
|
||
localStorage.setItem('userPwd', this.userpwd)
|
||
localStorage.setItem('token', 'Bearer ' + res.data.data.token)
|
||
localStorage.setItem('tokenB', res.data.data.token)
|
||
// 登录状态
|
||
localStorage.setItem('userLogin', true)
|
||
console.log(this.$route, '000111')
|
||
if (this.$route.path === '/') {
|
||
this.$router.go(0)
|
||
} else {
|
||
this.$router.push({ path: '/' })
|
||
}
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
}
|
||
} else {
|
||
console.log(!this.showWinStatic, 'this.showWinStatic')
|
||
this.showWinStatic = !this.showWinStatic
|
||
this.$auth.auth = this.showWinStatic
|
||
}
|
||
},
|
||
// 获取验证码图片及内容
|
||
get_identity () {
|
||
// 获取验证码渲染区域
|
||
this.$nextTick(() => {
|
||
let identifyD = this.$refs.identifyDom
|
||
console.log(identifyD, 'ref')
|
||
var content = this.$identify(100, 30, identifyD)
|
||
this.imgIdentify = content.join('')
|
||
console.log(this.imgIdentify)
|
||
})
|
||
},
|
||
regirest () {
|
||
this.showWinStatic = !this.showWinStatic
|
||
this.$auth.auth = this.showWinStatic
|
||
this.$router.push({ path: '/register' })
|
||
},
|
||
// 跳到数据页面
|
||
jumpData (staData) {
|
||
if (this.$route.path !== '/datasweb') {
|
||
this.$router.push(
|
||
{
|
||
path: '/datasweb',
|
||
query: {
|
||
type: staData
|
||
}
|
||
}
|
||
)
|
||
} else {
|
||
this.twonav = false
|
||
this.$router.push({
|
||
path: '/'
|
||
})
|
||
this.$router.push(
|
||
{
|
||
path: '/datasweb',
|
||
query: {
|
||
type: staData
|
||
}
|
||
}
|
||
)
|
||
this.$router.go(0)
|
||
}
|
||
},
|
||
// 退出
|
||
quit () {
|
||
// 调接口判断密码是否输入正确,改变登录状态
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'member/index/logout',
|
||
params: {
|
||
'access-token': localStorage.getItem('tokenB')
|
||
}
|
||
}).then(res => {
|
||
console.log(res)
|
||
alert(res.data.message)
|
||
// 请求接口完成注册 请求成功
|
||
if (res.data.code === 200) {
|
||
console.log(this.$route.path, 'this.$router.path')
|
||
if (this.$route.path !== '/') {
|
||
this.$router.push({
|
||
path: '/'
|
||
})
|
||
}
|
||
localStorage.clear()
|
||
this.$router.go(0)
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
perspnalCenter () {
|
||
if (this.$route.path !== '/personalCenter') {
|
||
this.$router.push({ path: '/personalCenter' })
|
||
} else {
|
||
this.$router.go(0)
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
},
|
||
mounted () {
|
||
let that = this
|
||
this.userLogin = localStorage.getItem('userLogin')
|
||
this.userName = localStorage.getItem('username')
|
||
this.userPic = localStorage.getItem('pic')
|
||
// 监听对象的变化
|
||
/* eslint-disable */
|
||
Object.defineProperty(this.$auth, 'auth', {
|
||
set: function (newVal) {
|
||
console.log(newVal, 'newValnewValnewVal')
|
||
that.showWinStatic = newVal
|
||
that.get_identity()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// 登陆窗口
|
||
.loginSty {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.28);
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > .loginSty_wcont {
|
||
width: 37.5rem;
|
||
height: 32.6875rem;
|
||
background-color: #ffffff;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
-moz-box-orient: vertical;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > .wcont_header {
|
||
width: 32.8125rem;
|
||
height: 3.875rem;
|
||
border-bottom: 0.0625rem solid #dbdbdb;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: space-between;
|
||
-moz-box-pack: justify;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
-webkit-align-items: center;
|
||
// po
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > div {
|
||
margin-left: 1rem;
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > img {
|
||
margin-right: 1rem;
|
||
width: 1.3125rem;
|
||
height: 1.3125rem;
|
||
}
|
||
& > img:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .wcont_content {
|
||
width: 30.8125rem;
|
||
height: 26.5rem;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
-moz-box-orient: vertical;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-justify-content: space-around;
|
||
-moz-box-pack: space-around;
|
||
-ms-flex-pack: space-around;
|
||
justify-content: space-around;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > div:nth-last-child(n + 2) {
|
||
width: 100%;
|
||
height: 3.25rem;
|
||
border: 0.0625rem solid #dbdbdb;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: flex-start;
|
||
-moz-box-pack: start;
|
||
-ms-flex-pack: start;
|
||
justify-content: flex-start;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > input {
|
||
width: 21.625rem;
|
||
height: 1.6rem;
|
||
border: none;
|
||
}
|
||
& > input::-webkit-input-placeholder {
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > input::-moz-placeholder {
|
||
/* Mozilla Firefox 19+ */
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > input:-moz-placeholder {
|
||
/* Mozilla Firefox 4 to 18 */
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > input:-ms-input-placeholder {
|
||
/* Internet Explorer 10-11 */
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
}
|
||
& > div:nth-child(1) {
|
||
& > img {
|
||
margin: 0 1.2rem;
|
||
width: 1.375rem;
|
||
height: 1.3125rem;
|
||
}
|
||
}
|
||
& > div:nth-child(2) {
|
||
& > img {
|
||
margin: 0 1.35625rem;
|
||
width: 1.0625rem;
|
||
height: 1.3125rem;
|
||
}
|
||
}
|
||
& > div:nth-child(3) {
|
||
& > input {
|
||
margin: 0 1.35625rem;
|
||
}
|
||
& > canvas:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > div:nth-last-child(2) {
|
||
width: 100%;
|
||
height: 3.1875rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.3125rem;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
-moz-box-orient: vertical;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #ffffff;
|
||
}
|
||
& > div:nth-last-child(2):hover {
|
||
cursor: pointer;
|
||
}
|
||
& > div:last-child {
|
||
width: 100%;
|
||
height: 3.1875rem;
|
||
border-radius: 0.3125rem;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
-moz-box-orient: vertical;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-justify-content: flex-start;
|
||
-moz-box-pack: start;
|
||
-ms-flex-pack: start;
|
||
justify-content: flex-start;
|
||
-webkit-align-items: flex-end;
|
||
-moz-box-align: end;
|
||
-ms-flex-align: end;
|
||
align-items: flex-end;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #52b6e3;
|
||
& > span {
|
||
border-bottom: 0.125rem solid #52b6e3;
|
||
}
|
||
& > span:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
width: 100%;
|
||
height: 5.5rem;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
& > .navCont {
|
||
width: 84.25rem;
|
||
height: 5.5rem;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: space-between;
|
||
-moz-box-pack: space-between;
|
||
-ms-flex-pack: space-between;
|
||
justify-content: space-between;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
// border: 1px solid black;
|
||
& > .fontSty {
|
||
color: #52b6e3 !important;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
& > div:nth-child(2) {
|
||
position: relative;
|
||
}
|
||
.dataTwo {
|
||
width: 8rem;
|
||
height: 14rem;
|
||
position: absolute;
|
||
top: 1.875rem;
|
||
left: -2.5625rem;
|
||
z-index: 10;
|
||
background-image: url("../../../static/nav/xl.png");
|
||
background-repeat: no-repeat;
|
||
-o-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
-moz-box-orient: vertical;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > div {
|
||
margin-top: 0.985rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
& > img {
|
||
width: 9.375rem;
|
||
height: 3.375rem;
|
||
}
|
||
& > img:hover {
|
||
cursor: pointer;
|
||
}
|
||
& > div {
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > .dsearch {
|
||
margin-left: 8.625rem;
|
||
width: 13.25rem;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: space-around;
|
||
-ms-flex-pack: distribute;
|
||
justify-content: space-around;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > img {
|
||
width: 1.75rem;
|
||
height: 1.75rem;
|
||
}
|
||
& > .div1 {
|
||
width: 4.375rem;
|
||
height: 2.75rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.25rem;
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #ffffff;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: row;
|
||
-moz-box-orient: horizontal;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
}
|
||
& > .loginAfter {
|
||
position: relative;
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #666666;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
& > img {
|
||
margin-right: 0.75rem;
|
||
width: 3.2rem;
|
||
height: 3.2rem;
|
||
border-radius: 50%;
|
||
}
|
||
& > .dataTwos {
|
||
width: 8rem;
|
||
height: 6.125rem;
|
||
position: absolute;
|
||
top: 2.875rem;
|
||
// right: 3.825rem;
|
||
z-index: 10;
|
||
background-image: url("../../../static/nav/xl.png");
|
||
background-repeat: no-repeat;
|
||
-o-background-size: 100% 100%;
|
||
background-size: 100% 100%;
|
||
display: -webkit-flex;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
-moz-box-orient: vertical;
|
||
-moz-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-justify-content: center;
|
||
-moz-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-align-items: center;
|
||
-moz-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
& > div {
|
||
margin-top: 0.375rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
& > .loginAfter:hover {
|
||
color: #52b6e3;
|
||
}
|
||
& > .loginAfters {
|
||
color: #52b6e3 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|