mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-17 16:13:48 +08:00
添加面包屑以及其它
This commit is contained in:
952108534@qq.com
250
rc-busness/components/tabs.vue
Normal file
250
rc-busness/components/tabs.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="crumbs" v-if="showTab">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to=item.path v-for="(item, index) in titleLists"
|
||||
:key="index">{{ item.meta.title }}</el-breadcrumb-item>
|
||||
<!-- <el-breadcrumb-item>商品管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>商品分类</el-breadcrumb-item> -->
|
||||
</el-breadcrumb>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
path: "",
|
||||
titleLists: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
meta:{
|
||||
title: '首页',
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
showTab: true,
|
||||
isShow: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
watch: {
|
||||
$route() {
|
||||
this.setTitle();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle();
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(["changemessage",'selectMenu']),
|
||||
setTitle() {
|
||||
console.log(this.$route.matched);
|
||||
console.log(this.titleLists);
|
||||
let userinfo=[]
|
||||
|
||||
|
||||
let saveUserInfo={
|
||||
path:'admin',
|
||||
name:'1',
|
||||
meta:'b341181c-aced-11e9-89bf-00163e0e8daf',
|
||||
|
||||
}
|
||||
userinfo.push(this.$route.matched);
|
||||
let list=[];
|
||||
console.log(userinfo);
|
||||
userinfo.map(item=>{
|
||||
console.log(item);
|
||||
list=item;
|
||||
})
|
||||
console.log(list);
|
||||
let anlist={
|
||||
path:'admin',
|
||||
name:'1',
|
||||
meta:'b341181c-aced-11e9-89bf-00163e0e8daf',
|
||||
}
|
||||
list.forEach(element=>{
|
||||
console.log(element);
|
||||
anlist=element
|
||||
})
|
||||
for(let i in list){
|
||||
saveUserInfo.path=list[i].path;
|
||||
saveUserInfo.name=list[i].name;
|
||||
saveUserInfo.meta=list[i].meta;
|
||||
}
|
||||
console.log(saveUserInfo);
|
||||
// store.commit('se', current.name);
|
||||
this.selectMenu({ data: saveUserInfo });
|
||||
console.log(this.$store.state.tabsList);
|
||||
this.titleLists=this.$store.state.tabsList;
|
||||
// console.log(userlisa);
|
||||
console.log(this.titleLists);
|
||||
},
|
||||
},
|
||||
// created(){
|
||||
// let user=this.$store.state.tabsList;
|
||||
// this.tags=user;
|
||||
// console.log(this.tags);
|
||||
// console.log(user);
|
||||
// console.log(this.$store.state.tabsList)
|
||||
// },
|
||||
|
||||
// mounted(){
|
||||
|
||||
// }
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.crumbs{
|
||||
width: 93%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
.tags-scroll-content {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
// padding: 0 66px 0 21px;
|
||||
}
|
||||
.tabs {
|
||||
user-select: none;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
|
||||
height: 43px;
|
||||
top: 60px;
|
||||
height: 42px;
|
||||
background: white;
|
||||
.tag {
|
||||
display: inline-block;
|
||||
height: 43px;
|
||||
// position: absolute;
|
||||
padding-right: 40px;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tags-scroll-content > i {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-icon-arrow-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 21px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(70, 70, 70, 0.32);
|
||||
}
|
||||
.el-icon-arrow-right {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
width: 21px;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: black;
|
||||
background: white;
|
||||
height: 40px;
|
||||
padding-left: 15px;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
border-left: 1px solid #f1f1f1 !important;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-tag--dark {
|
||||
background: white;
|
||||
em {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 5px;
|
||||
margin-right: 7px;
|
||||
width: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #85ef47 !important;
|
||||
box-shadow: 0 0 7px #b7eb8f;
|
||||
}
|
||||
}
|
||||
.el-tag--dark {
|
||||
color: #323233 !important;
|
||||
.el-icon-close {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
.el-tag {
|
||||
.el-icon-close {
|
||||
font-size: 16px;
|
||||
&:hover {
|
||||
color: red !important;
|
||||
background: white !important;
|
||||
}
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
// width: 140px;
|
||||
em {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 5px;
|
||||
margin-right: 7px;
|
||||
width: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
}
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
color: #969799;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
> span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
.el-tag__close {
|
||||
right: 0px;
|
||||
color: #777777;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.el-xie{
|
||||
list-style: none;
|
||||
font-style: normal;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
rc-busness/components/unlogin.vue
Normal file
86
rc-busness/components/unlogin.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="rc-login">
|
||||
<div class="userunlogin" v-show="userunlogin" @click="userlogin">
|
||||
<div class="user-left">
|
||||
<img src="../assets/image/rc-people.png" alt="">
|
||||
<span>
|
||||
登录/注册
|
||||
</span>
|
||||
</div>
|
||||
<div class="user-right">
|
||||
<img src="../assets/image/rc-left.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
userunlogin:false,
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//用户登录
|
||||
userlogin(){
|
||||
this.$router.push({
|
||||
path: "/userlogin/login",
|
||||
query: {
|
||||
stype: 1,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
//获取缓存是否登录
|
||||
let islogin=JSON.parse(localStorage.getItem("userInfo"));
|
||||
console.log(islogin);
|
||||
if(islogin==null){
|
||||
this.userunlogin=true;
|
||||
console.log(this.userunlogin);
|
||||
}
|
||||
if(islogin==null ||islogin==undefined){
|
||||
this.userunlogin=true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped >
|
||||
.rc-login{
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.70rem;
|
||||
.userunlogin{
|
||||
width: 100%;
|
||||
height: 0.60rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.user-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
display: block;
|
||||
}
|
||||
span{
|
||||
color: #444444;
|
||||
font-size: 0.16rem;
|
||||
margin-left: 0.06rem;
|
||||
}
|
||||
}
|
||||
.user-right{
|
||||
img{
|
||||
width: 0.08rem;
|
||||
height: 0.16rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user