Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

解決style设置为 scoped样式错位

Browse Source
This commit is contained in:
WangHao 2020-10-04 03:09:05 +08:00
parent 37b7bcd66c
commit 92c5d1a6e4
4 changed files with 104 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ruoyi-ui/src/assets/styles/base.css
View File

@ -6,14 +6,15 @@
.dropdownList{ .dropdownList{
font-size: 22px!important; font-size: 22px!important;
} }
} }
/* ipad pro >>lg*/ /* ipad pro >>lg*/
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.header-listtxet{ /*.header-listtxet{*/
display: none; /* display: none;*/
} /*}*/
.main-right{ .main-right{
width: 250px; width: 250px;
} }
@ -23,13 +24,17 @@
.sousouright-icon{ .sousouright-icon{
margin-right: 18px; margin-right: 18px;
} }
.logoname span{
font-size: 18px;
}
} }
/* >>> md*/ /* >>> md*/
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.el-dropdown-link span{
.dropdownList span{
display: none; display: none;
} }
@ -73,6 +78,7 @@
margin-left: 0px!important; margin-left: 0px!important;
} }
} }
/* iphone6 7 8 plus */ /* iphone6 7 8 plus */
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {

32
ruoyi-ui/src/router/index.js
View File

@ -33,14 +33,14 @@ import index3 from '@/views/bookmark/index';
breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示 breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示
} }
*/ */
//书签路由bookmark // //书签路由bookmark
export const bookmark = [ // export const bookmark = [
{ // {
path: '/index2', // path: '/index2',
component: bookmarkmenu, // component: bookmarkmenu,
hidden: true // hidden: true
}, // },
] // ]
// 公共路由 // 公共路由
@ -137,15 +137,16 @@ export const constantRoutes = [
} }
] ]
}, },
{ // {
path: '/index2', // path: '/index2',
component: bookmarkmenu, // component: bookmarkmenu,
//
}, // },
{ {
path: '/index3', path: '/index3',
component: index3, component: index3,
meta:{ meta:{
title: '书签管理',icon:'user',
requireAuth: false, requireAuth: false,
}, },
children: [ children: [
@ -157,6 +158,7 @@ export const constantRoutes = [
t:Date.now(), t:Date.now(),
}, },
meta:{ meta:{
title: '书签页面',icon:'user',
requireAuth: false,//加该字段,表示进入这个路由是需要登录的true requireAuth: false,//加该字段,表示进入这个路由是需要登录的true
}, },
},{ },{
@ -164,6 +166,7 @@ export const constantRoutes = [
name: 'UserTagAll', name: 'UserTagAll',
component: resolve => require(['../views/bookmark/common/UserTagAll.vue'], resolve), component: resolve => require(['../views/bookmark/common/UserTagAll.vue'], resolve),
meta:{ meta:{
title: '用户标签',icon:'user',
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
}, },
},{ },{
@ -171,6 +174,7 @@ export const constantRoutes = [
name: 'importHtml', name: 'importHtml',
component: resolve => require(['../views/bookmark/common/ImportHtml.vue'], resolve), component: resolve => require(['../views/bookmark/common/ImportHtml.vue'], resolve),
meta:{ meta:{
title: '导入书签',icon:'user',
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
}, },
},{ },{
@ -178,12 +182,14 @@ export const constantRoutes = [
name: 'ceshi', name: 'ceshi',
component: resolve => require(['../views/bookmark/ceshi/index.vue'], resolve), component: resolve => require(['../views/bookmark/ceshi/index.vue'], resolve),
meta:{ meta:{
title: '测试页面',icon:'user',
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
}, },
} }
], ],
}, },
] ]
export default new Router({ export default new Router({

13
ruoyi-ui/src/views/bookmark/bookmark/index.vue
View File

@ -683,6 +683,12 @@
.bookmarktag { .bookmarktag {
margin-right: 5px; margin-right: 5px;
} }
.bookmark-official {
float: left;
}
.info {
font-size: 12px;
}
.bookmark-icon { .bookmark-icon {
float: left; float: left;
@ -768,7 +774,7 @@
margin-left: 4px; margin-left: 4px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
margin-top: 2px; margin-top: -2px;
border-radius: 1px; border-radius: 1px;
color: #7794D8; color: #7794D8;
background-color: #FFFFFF; background-color: #FFFFFF;
@ -786,10 +792,13 @@
font-weight: 600; font-weight: 600;
} }
.bookmark-title:hover{ .bookmark-title:hover{
color: #3C4DAC; color: #3C4DAC;
} }
.description{ .description{
color: #9EABB3; color: #9EABB3;
margin-top: 5px;
margin-bottom: 5px;
} }
.info-wrap{ .info-wrap{
color: #9EABB3; color: #9EABB3;
@ -807,6 +816,8 @@
/*超出部分隐藏*/ /*超出部分隐藏*/
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
margin-top: 2px;
margin-bottom: 2px;
} }
.description { .description {

126
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@ -88,26 +88,21 @@
</div> </div>
<div class="sousou-input"> <div class="sousou-input">
<el-popover <!-- <el-popover-->
placement="bottom" <!-- placement="bottom"-->
width="400" <!-- width="400"-->
trigger="click" <!-- trigger="click"-->
:visible-arrow="false" <!-- :visible-arrow="false"-->
popper-class="popover-suosou" <!-- popper-class="popover-suosou"-->
> <!-- >-->
<!-- <div v-for="o in 4" :key="o">-->
<div v-for="o in 4" :key="o"> <!-- {{'列表内容 ' + o }}-->
{{'列表内容 ' + o }} <!-- </div>-->
</div>
<el-input slot="reference" placeholder="请输入书签名字" v-model="sousou" size="small"> <el-input slot="reference" placeholder="请输入书签名字" v-model="sousou" size="small">
<i slot="prefix" class="el-input__icon el-icon-search"></i> <i slot="prefix" class="el-input__icon el-icon-search"></i>
<!-- <el-button slot="append" icon="el-icon-search"></el-button>--> <!-- <el-button slot="append" icon="el-icon-search"></el-button>-->
</el-input> </el-input>
<!-- </el-popover>-->
</el-popover>
</div> </div>
<div class="sousouright-icon"> <div class="sousouright-icon">
@ -115,7 +110,7 @@
</el-badge> </el-badge>
</div> </div>
<div class="sousouright-icon"> <div class="sousouright-iconadd">
<el-dropdown trigger="click" size="small" :hide-on-click="false"> <el-dropdown trigger="click" size="small" :hide-on-click="false">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<i class="el-icon-plus" style="font-size: 18px;"/> <i class="el-icon-plus" style="font-size: 18px;"/>
@ -127,8 +122,6 @@
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d">导入书签</el-dropdown-item> <el-dropdown-item class="filter-item" icon="el-icon-plus" command="d">导入书签</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
@ -287,7 +280,7 @@
</template> </template>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style scoped src="../ztree/demo.css"/>
<script > <script >
// 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用 // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
import {addBookmark} from "@/api/bookmark/bookmark"; import {addBookmark} from "@/api/bookmark/bookmark";
@ -295,9 +288,9 @@
import {listMenu, getMenu, delMenu, addMenu, updateMenu, exportMenu} from "@/api/bookmark/menu"; import {listMenu, getMenu, delMenu, addMenu, updateMenu, exportMenu} from "@/api/bookmark/menu";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "../ztree/jquery-1.4.4.min.js" // import "../ztree/jquery-1.4.4.min.js"
import "../ztree/jquery.ztree.core.js" import "../ztree/jquery.ztree.core.js"
import "../ztree/demo.css" // import "../ztree/demo.css"
import "../ztree/zTreeStyle.css" import "../ztree/zTreeStyle.css"
import "../ztree/jquery.ztree.exedit.js" import "../ztree/jquery.ztree.exedit.js"
import {listMenuByUserId} from "@/api/bookmark/menu"; import {listMenuByUserId} from "@/api/bookmark/menu";
@ -1590,11 +1583,12 @@
.reminder { .reminder {
margin-left: 27px;
color: #878787; color: #878787;
opacity: 0.6; opacity: 0.7;
font-size: 14px; font-size: 14px!important;
font-weight: 500; font-weight: 500!important;
margin-left: 27px!important;
} }
.aside-navigation { .aside-navigation {
@ -1650,11 +1644,13 @@
.header-sousou { .header-sousou {
display: flex; display: flex;
align-items: center;
justify-content: center;
} }
.header-sousou input { .header-sousou input {
margin-top: 8px; margin-top: 9px;
border: 0px; border: 0px;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 0 !important; border-radius: 0 !important;
@ -1678,17 +1674,20 @@
.sousou-input { .sousou-input {
width: 82.5%; width: 100%;
margin-right: 15px;
} }
.header-list { .header-list {
/*line-height: 50px;*/ display: flex;
margin-top: 10px; justify-content: center;
/*align-content: center;*/ align-items: center;
/*justify-content: center;*/ width: 35px;
margin-top: 9px!important;
} }
.header-list:hover { .header-list:hover {
@ -1727,14 +1726,8 @@
.bookmark-official {
float: left;
}
/*.info {*/
/* font-size: 12px;*/
/*}*/
@ -1743,13 +1736,7 @@
.sousouleft-switch { .sousouleft-switch {
margin-top: 4px!important;
width: 30px;
height: 30px;
line-height: 50px;
margin-top: 3px;
margin-right: 5px;
} }
.sousouleft-switch i { .sousouleft-switch i {
@ -1759,26 +1746,27 @@
} }
.sousou-left { .sousou-left {
display: flex; width: 50px!important;
height: 50px;
margin-top: 12px!important;
} }
.sousou-leftico { .sousou-leftico {
display: flex;
align-items: center;
justify-content: center;
width: 30px; width: 30px;
height: 30px; height: 30px;
border: #d1e9ff solid 1px; border-radius: 3px;
border-radius: 5px; border: 1px solid #e6e6e6 !important;
opacity: 0.7; margin-top: 9px!important;
text-align: center;
line-height: 30px;
margin-top: 9px; }
margin-right: 12px; .sousou-leftico img{
} }
.sousou-leftico img {
margin-top: 5px;
}
.filter-item:hover { .filter-item:hover {
background-color: #E5E5E5 !important; background-color: #E5E5E5 !important;
@ -1789,10 +1777,22 @@
.sousouright-icon { .sousouright-icon {
margin-right: 24px; display: flex;
margin-top: 10px; justify-content: center;
align-items: center;
width: 50px;
margin-top: 7px!important;
} }
.sousouright-iconadd {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
margin-top: 7px!important;
}
.sq-dropdown { .sq-dropdown {
top: 33px !important; top: 33px !important;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2) !important; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2) !important;
@ -1933,9 +1933,9 @@
} }
.popover-suosou { .popover-suosou {
width: 70% !important; /*width: 85% ;*/
top: 40px; top: 40px;
left: 72px; /*left: 72px;*/
} }
/* 拖拽相关样式 */ /* 拖拽相关样式 */
/*包围div样式*/ /*包围div样式*/