151 lines
2.8 KiB
Vue
151 lines
2.8 KiB
Vue
<template>
|
|
<view class="header">
|
|
<view v-if="isShowUserInfo" class="left">
|
|
<unitv-zone
|
|
id="header_zone"
|
|
class="header_zone"
|
|
:down="down"
|
|
:values="[0, 1]"
|
|
:column="2"
|
|
>
|
|
<unitv-item
|
|
:item="0"
|
|
class="item"
|
|
@click="fnNavigate('/pages/login/index')"
|
|
>
|
|
<view class="login_btn">登录</view>
|
|
</unitv-item>
|
|
<unitv-item
|
|
:item="1"
|
|
class="item user"
|
|
@click="fnNavigate('/pages/mine/index')"
|
|
>
|
|
<view class="avatar">
|
|
<image src="/static/avatar.png" />
|
|
</view>
|
|
<view>呀哈哈</view>
|
|
</unitv-item>
|
|
</unitv-zone>
|
|
</view>
|
|
<view class="right">
|
|
<view>{{ time }}</view>
|
|
<view class="logo">
|
|
<image src="/static/logo.png" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from "dayjs";
|
|
|
|
export default {
|
|
props: {
|
|
isShowUserInfo: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
down: {
|
|
type: String,
|
|
default: "tabs_zone",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
time: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.time = dayjs().format("HH:mm");
|
|
setInterval(() => {
|
|
this.time = dayjs().format("HH:mm");
|
|
}, 1000);
|
|
},
|
|
methods: {
|
|
fnNavigate(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
width: 100%;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
position: relative;
|
|
z-index: 99;
|
|
overflow: auto;
|
|
|
|
.left {
|
|
float: left;
|
|
.header_zone {
|
|
display: flex;
|
|
|
|
.item {
|
|
display: flex;
|
|
border-radius: 34rpx;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
font-size: 12rpx;
|
|
margin-left: 10rpx;
|
|
|
|
.login_btn {
|
|
padding: 3rpx 15rpx;
|
|
border-radius: 34rpx;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.user {
|
|
position: relative;
|
|
border-radius: 11rpx;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
padding: 3rpx 10rpx 3rpx 30rpx;
|
|
|
|
.avatar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border: 2rpx solid #070a26;
|
|
border-radius: 50%;
|
|
font-size: 0;
|
|
|
|
image {
|
|
width: 19rpx;
|
|
height: 19rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hover {
|
|
background-color: #254eff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
font-size: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
|
|
.logo {
|
|
margin-left: 26rpx;
|
|
|
|
image {
|
|
width: 62rpx;
|
|
height: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|