@@ -129,15 +129,15 @@ | |||||
.flexIble { | .flexIble { | ||||
z-index: 4; | z-index: 4; | ||||
width: 20px; | |||||
height: 20px; | |||||
width: 22px; | |||||
height: 22px; | |||||
background: url('./close.png'); | background: url('./close.png'); | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
} | } | ||||
.flexIble_open { | .flexIble_open { | ||||
width: 20px; | |||||
height: 20px; | |||||
width: 22px; | |||||
height: 22px; | |||||
background: url('./open.png') !important; | background: url('./open.png') !important; | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
} | } | ||||
@@ -1,6 +1,7 @@ | |||||
<div class="pannel" :style="style" :class="[bkClass]"> | <div class="pannel" :style="style" :class="[bkClass]"> | ||||
<div class="header_box"> | <div class="header_box"> | ||||
<div class="light"></div> | |||||
<div class="header row"> | <div class="header row"> | ||||
<div v-if="title" class="title_bk"> | <div v-if="title" class="title_bk"> | ||||
<!-- <i class="icon"></i>--> | <!-- <i class="icon"></i>--> | ||||
@@ -11,7 +12,6 @@ | |||||
<div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div> | <div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="light"></div> | |||||
</div> | </div> | ||||
<div class="body"> | <div class="body"> | ||||
<div> | <div> | ||||
@@ -36,7 +36,7 @@ export default { | |||||
style: function () { | style: function () { | ||||
return { | return { | ||||
height: this.height + 'px', | height: this.height + 'px', | ||||
width: this.isOpen ? 1000 + 'px' : this.width + 'px' | |||||
width: this.isOpen ? 1400 + 'px' : this.width + 'px' | |||||
}; | }; | ||||
} | } | ||||
}, | }, | ||||
@@ -35,7 +35,6 @@ | |||||
background: #01142c url("header_bg.png") no-repeat -8px center; | background: #01142c url("header_bg.png") no-repeat -8px center; | ||||
background-size: auto auto; | background-size: auto auto; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
align-items: baseline; | |||||
.title_bk { | .title_bk { | ||||
// font-style: italic; | // font-style: italic; | ||||
@@ -60,6 +59,9 @@ | |||||
.more { | .more { | ||||
margin-right: 20px; | margin-right: 20px; | ||||
margin-top: 10px; | |||||
position: absolute; | |||||
right: 0; | |||||
} | } | ||||
} | } | ||||
@@ -82,7 +84,7 @@ | |||||
width: 100%; | width: 100%; | ||||
position: relative; | position: relative; | ||||
flex: 1; | flex: 1; | ||||
background-color: #01142c; | |||||
background-color: rgba(1,20,44,.6); | |||||
overflow: hidden; | overflow: hidden; | ||||
.bottom_line { | .bottom_line { | ||||
@@ -118,15 +120,15 @@ | |||||
.flexIble { | .flexIble { | ||||
z-index: 4; | z-index: 4; | ||||
width: 16px; | |||||
height: 16px; | |||||
width: 22px; | |||||
height: 22px; | |||||
background: url('./close.png'); | background: url('./close.png'); | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
} | } | ||||
.flexIble_open { | .flexIble_open { | ||||
width: 16px; | |||||
height: 16px; | |||||
width: 22px; | |||||
height: 22px; | |||||
background: url('./open.png') !important; | background: url('./open.png') !important; | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
} | } | ||||
@@ -14,4 +14,4 @@ | |||||
flex: 1; | flex: 1; | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
} | |||||
} |
@@ -39,7 +39,7 @@ | |||||
z-index: 1; | z-index: 1; | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左 | |||||
box-shadow: inset 150px 0px 150px 0px RGBA(3, 12, 27, 1), inset -150px 0 150px 0px RGBA(3, 12, 27, 1); // 左 | |||||
/* 四周黑色 */ | /* 四周黑色 */ | ||||
pointer-events: none; | pointer-events: none; | ||||
/* 允许地图事件穿透 */ | /* 允许地图事件穿透 */ | ||||