| @@ -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; | ||||
| /* 允许地图事件穿透 */ | /* 允许地图事件穿透 */ | ||||