|
|
@@ -9,18 +9,18 @@
|
|
|
aria-expanded="false"
|
|
|
aria-label="Toggle navigation"
|
|
|
@click="openNavBarFunc"
|
|
|
- v-bind:class="['navbar-toggler',{ 'open-fixed': openNavBar}]"
|
|
|
+ v-bind:class="['navbar-toggler',{ 'open-fixed': openNavBar}]"
|
|
|
>
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
</button>
|
|
|
</div>
|
|
|
- <div class="collapse navbar-collapse" v-bind:style="{right:openNavBar?'230px':'0'}">
|
|
|
- <ul class="navbar-nav ml-auto" >
|
|
|
+ <div class="collapse navbar-collapse" v-bind:style="{right:openNavBar?'230px':'0'}">
|
|
|
+ <ul class="navbar-nav ml-auto">
|
|
|
<li class="dropdown nav-item">
|
|
|
<router-link to="/home">
|
|
|
- <a class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
|
+ <a class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
|
<img class="icon" src="@/assets/img/home_icon.svg">
|
|
|
<span>首页</span>
|
|
|
</a>
|
|
|
@@ -28,7 +28,7 @@
|
|
|
</li>
|
|
|
<li class="dropdown nav-item">
|
|
|
<router-link to="/square">
|
|
|
- <a class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
|
+ <a class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
|
<img class="icon" src="@/assets/img/square_icon.svg">
|
|
|
<span>任务广场</span>
|
|
|
</a>
|
|
|
@@ -36,7 +36,7 @@
|
|
|
</li>
|
|
|
<li class="dropdown nav-item">
|
|
|
<router-link to="/mine">
|
|
|
- <a class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
|
+ <a class="dropdown-toggle nav-link" data-toggle="dropdown">
|
|
|
<img class="icon" src="@/assets/img/mine_icon.svg">
|
|
|
<span>我的众测</span>
|
|
|
</a>
|
|
|
@@ -57,280 +57,294 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
export default {
|
|
|
- name: "header-container",
|
|
|
- data(){
|
|
|
- return{
|
|
|
- openNavBar:false
|
|
|
+ name: 'header-container',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ openNavBar: false,
|
|
|
+ userIdentity: '',
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- openNavBarFunc(){
|
|
|
- this.openNavBar = !this.openNavBar;
|
|
|
+ methods: {
|
|
|
+ openNavBarFunc () {
|
|
|
+ this.openNavBar = !this.openNavBar
|
|
|
+ },
|
|
|
+ getCurrentUser () {
|
|
|
+ // Http.get(Apis.USER.GET_CURRENT_USER).then((res) => {
|
|
|
+ // sessionStorage.setItem('user', JSON.stringify(res))
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ getUserIdentity () {
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getCurrentUser()
|
|
|
+ })
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
-.open-fixed{
|
|
|
- position:fixed;
|
|
|
- right:5px;
|
|
|
- z-index: 1033;
|
|
|
-}
|
|
|
-
|
|
|
-.navbar {
|
|
|
- background-color: #fff !important;
|
|
|
- box-shadow: none;
|
|
|
- padding-top: 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
- color: #000;
|
|
|
- transition: all 0.15s ease 0s;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-@media (max-width: 991px) {
|
|
|
- [class*="navbar-expand-"] > .container {
|
|
|
- padding-left: 15px;
|
|
|
- padding-right: 15px;
|
|
|
+ .open-fixed {
|
|
|
+ position: fixed;
|
|
|
+ right: 5px;
|
|
|
+ z-index: 1033;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.navbar > .container {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
+ .navbar {
|
|
|
+ background-color: #fff !important;
|
|
|
+ box-shadow: none;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ color: #000;
|
|
|
+ transition: all 0.15s ease 0s;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
-.navbar .navbar-brand {
|
|
|
- position: relative;
|
|
|
- color: inherit;
|
|
|
- font-size: 1.8rem;
|
|
|
- line-height: 30px;
|
|
|
- padding: 10px 0;
|
|
|
- margin-right: 1rem;
|
|
|
- display: inline-block;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ [class*="navbar-expand-"] > .container {
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-@media (max-width: 991px) {
|
|
|
- .navbar .navbar-translate {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
+ .navbar > .container {
|
|
|
display: flex;
|
|
|
- -ms-flex-pack: justify !important;
|
|
|
- justify-content: space-between !important;
|
|
|
- -ms-flex-align: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
- transition: transform 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.navbar-collapse {
|
|
|
- flex-basis: 100%;
|
|
|
- flex-grow: 1;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+ .navbar .navbar-brand {
|
|
|
+ position: relative;
|
|
|
+ color: inherit;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-right: 1rem;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
|
|
|
-@media (max-width: 991px) {
|
|
|
- .navbar-collapse {
|
|
|
- position: fixed;
|
|
|
- display: block;
|
|
|
- top: 0;
|
|
|
- height:100vh;
|
|
|
- width: 230px;
|
|
|
- right: 0;
|
|
|
- margin-right: 0 !important;
|
|
|
- z-index: 1032;
|
|
|
- visibility: visible;
|
|
|
- background-color: #fff;
|
|
|
- overflow-y: visible;
|
|
|
- border-top: none;
|
|
|
- text-align: left;
|
|
|
- padding-right: 0;
|
|
|
- padding-left: 0;
|
|
|
- max-height: none !important;
|
|
|
- -webkit-transform: translate3d(230px, 0, 0);
|
|
|
- transform: translate3d(230px, 0, 0);
|
|
|
- transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ .navbar .navbar-translate {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ -ms-flex-pack: justify !important;
|
|
|
+ justify-content: space-between !important;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: transform 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media (min-width: 992px) {
|
|
|
.navbar-collapse {
|
|
|
- display: flex !important;
|
|
|
- flex-basis: auto;
|
|
|
+ flex-basis: 100%;
|
|
|
+ flex-grow: 1;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-[type="reset"],
|
|
|
-[type="submit"],
|
|
|
-button,
|
|
|
-html [type="button"] {
|
|
|
- -webkit-appearance: button;
|
|
|
-}
|
|
|
-
|
|
|
-.navbar-toggler {
|
|
|
- padding: 0.25rem 0.75rem;
|
|
|
- font-size: 1.25rem;
|
|
|
- line-height: 1;
|
|
|
- background-color: transparent;
|
|
|
- border: 1px solid transparent;
|
|
|
- border-radius: 0.25rem;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ .navbar-collapse {
|
|
|
+ position: fixed;
|
|
|
+ display: block;
|
|
|
+ top: 0;
|
|
|
+ height: 100vh;
|
|
|
+ width: 230px;
|
|
|
+ right: 0;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ z-index: 1032;
|
|
|
+ visibility: visible;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow-y: visible;
|
|
|
+ border-top: none;
|
|
|
+ text-align: left;
|
|
|
+ padding-right: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ max-height: none !important;
|
|
|
+ -webkit-transform: translate3d(230px, 0, 0);
|
|
|
+ transform: translate3d(230px, 0, 0);
|
|
|
+ transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ .navbar-collapse {
|
|
|
+ display: flex !important;
|
|
|
+ flex-basis: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.navbar-toggler:not(:disabled):not(.disabled) {
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
+ [type="reset"],
|
|
|
+ [type="submit"],
|
|
|
+ button,
|
|
|
+ html [type="button"] {
|
|
|
+ -webkit-appearance: button;
|
|
|
+ }
|
|
|
|
|
|
-@media (min-width: 992px) {
|
|
|
.navbar-toggler {
|
|
|
- display: none;
|
|
|
+ padding: 0.25rem 0.75rem;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ line-height: 1;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 0.25rem;
|
|
|
+ outline: none;
|
|
|
}
|
|
|
-}
|
|
|
-@media (max-width: 991px) {
|
|
|
- .navbar.navbar-transparent .navbar-toggler .navbar-toggler-icon {
|
|
|
- background-color: #fff;
|
|
|
+
|
|
|
+ .navbar-toggler:not(:disabled):not(.disabled) {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.navbar .navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon {
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ .navbar-toggler {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.navbar .navbar-toggler .navbar-toggler-icon {
|
|
|
- width: 22px;
|
|
|
- height: 2px;
|
|
|
- vertical-align: middle;
|
|
|
- outline: 0;
|
|
|
- display: block;
|
|
|
- border-radius: 1px;
|
|
|
-}
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ .navbar.navbar-transparent .navbar-toggler .navbar-toggler-icon {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.navbar .navbar-toggler .navbar-toggler-icon {
|
|
|
- background-color: #555;
|
|
|
-}
|
|
|
+ .navbar .navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
|
|
|
-.navbar-toggler-icon {
|
|
|
- display: inline-block;
|
|
|
- width: 1.5em;
|
|
|
- height: 1.5em;
|
|
|
- vertical-align: middle;
|
|
|
- content: "";
|
|
|
- background: no-repeat 50%;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
+ .navbar .navbar-toggler .navbar-toggler-icon {
|
|
|
+ width: 22px;
|
|
|
+ height: 2px;
|
|
|
+ vertical-align: middle;
|
|
|
+ outline: 0;
|
|
|
+ display: block;
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
|
|
|
-.navbar-nav {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-left: 0;
|
|
|
- margin-bottom: 0;
|
|
|
- list-style: none;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
+ .navbar .navbar-toggler .navbar-toggler-icon {
|
|
|
+ background-color: #555;
|
|
|
+ }
|
|
|
|
|
|
-@media (min-width: 991px) {
|
|
|
- .navbar .navbar-nav {
|
|
|
- align-items: center;
|
|
|
+ .navbar-toggler-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1.5em;
|
|
|
+ height: 1.5em;
|
|
|
+ vertical-align: middle;
|
|
|
+ content: "";
|
|
|
+ background: no-repeat 50%;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media (min-width: 992px) {
|
|
|
.navbar-nav {
|
|
|
- flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ list-style: none;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media (max-width: 991px) {
|
|
|
- .navbar-nav {
|
|
|
- margin-top:70px;
|
|
|
- text-align: right;
|
|
|
+ @media (min-width: 991px) {
|
|
|
+ .navbar .navbar-nav {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.ml-auto,
|
|
|
-.mx-auto {
|
|
|
- margin-left: auto !important;
|
|
|
-}
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ .navbar-nav {
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.collapsing,
|
|
|
-.dropdown,
|
|
|
-.dropup {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ .navbar-nav {
|
|
|
+ margin-top: 70px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.dropdown-menu {
|
|
|
- position: absolute;
|
|
|
- top: 100%;
|
|
|
- left: 0;
|
|
|
- z-index: 1000;
|
|
|
- float: left;
|
|
|
- min-width: 10rem;
|
|
|
- padding: 0.5rem 0;
|
|
|
- margin: 0.125rem 0 0;
|
|
|
- font-size: 1rem;
|
|
|
- color: #212529;
|
|
|
- text-align: left;
|
|
|
- list-style: none;
|
|
|
- background-color: #fff;
|
|
|
- background-clip: padding-box;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
- border-radius: 0.25rem;
|
|
|
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
|
+ .ml-auto,
|
|
|
+ .mx-auto {
|
|
|
+ margin-left: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .collapsing,
|
|
|
+ .dropdown,
|
|
|
+ .dropup {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ float: left;
|
|
|
+ min-width: 10rem;
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ margin: 0.125rem 0 0;
|
|
|
+ font-size: 1rem;
|
|
|
+ color: #212529;
|
|
|
+ text-align: left;
|
|
|
+ list-style: none;
|
|
|
+ background-color: #fff;
|
|
|
+ background-clip: padding-box;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
+ border-radius: 0.25rem;
|
|
|
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
|
- display: none;
|
|
|
- padding: 0.3125rem 0;
|
|
|
- border: 0;
|
|
|
- opacity: 0;
|
|
|
- transform: scale(0);
|
|
|
- transform-origin: 0 0;
|
|
|
- will-change: transform, opacity;
|
|
|
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
|
+ display: none;
|
|
|
+ padding: 0.3125rem 0;
|
|
|
+ border: 0;
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0);
|
|
|
+ transform-origin: 0 0;
|
|
|
+ will-change: transform, opacity;
|
|
|
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
|
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
|
-}
|
|
|
-
|
|
|
-.navbar-nav .dropdown-menu {
|
|
|
- float: none;
|
|
|
-}
|
|
|
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
|
+ }
|
|
|
|
|
|
-@media (min-width: 992px) {
|
|
|
.navbar-nav .dropdown-menu {
|
|
|
- position: absolute;
|
|
|
+ float: none;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media (min-width: 992px) {
|
|
|
- .navbar-nav .nav-link {
|
|
|
- padding-right: 0.5rem;
|
|
|
- padding-left: 0.5rem;
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ .navbar-nav .dropdown-menu {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.navbar .navbar-nav .nav-item .nav-link {
|
|
|
- padding: 15px;
|
|
|
- // text-align: center;
|
|
|
- height: 20px;
|
|
|
- vertical-align: middle;
|
|
|
- color: inherit;
|
|
|
- display: block;
|
|
|
-}
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ .navbar-nav .nav-link {
|
|
|
+ padding-right: 0.5rem;
|
|
|
+ padding-left: 0.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.nav-link > span {
|
|
|
- /* font-size: 1.2rem; */
|
|
|
- height: 100%;
|
|
|
- vertical-align: middle;
|
|
|
- display: inline-block;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
+ .navbar .navbar-nav .nav-item .nav-link {
|
|
|
+ padding: 15px;
|
|
|
+ // text-align: center;
|
|
|
+ height: 20px;
|
|
|
+ vertical-align: middle;
|
|
|
+ color: inherit;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link > span {
|
|
|
+ /* font-size: 1.2rem; */
|
|
|
+ height: 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
</style>
|