| | |
| | | <template> |
| | | <div class="column"> |
| | | <div class="column-left"> |
| | | <div class="resize-bar"></div> |
| | | <div class="resize-line"></div> |
| | | <div class="resize-save"> |
| | | <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav> |
| | | </div> |
| | | </div> |
| | | <div class="column-right"> |
| | | <right-side /> |
| | | </div> |
| | | <card-window></card-window> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import LeftNav from "@/components/LeftNav"; |
| | | // import CameraVideo from "./components/Video.vue"; |
| | | import RightSide from "./Searching" |
| | | import CardWindow from "@/components/cardWindow"; |
| | | |
| | | export default { |
| | | name: "SearchPage", |
| | | components: { |
| | | LeftNav, |
| | | RightSide, |
| | | CardWindow |
| | | }, |
| | | data() { |
| | | return { |
| | | screenHeight: 0, |
| | | } |
| | | }, |
| | | created() { |
| | | // this.parseUrl(); |
| | | |
| | | }, |
| | | mounted() { |
| | | this.screenHeight = document.documentElement.clientHeight - 20; |
| | | window.onresize = () => { |
| | | return (() => { |
| | | this.screenHeight = document.documentElement.clientHeight - 20; |
| | | })(); |
| | | }; |
| | | |
| | | }, |
| | | methods: { |
| | | parseUrl() { |
| | | |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" > |
| | | .left-tree-box .local-vedio-area .dev-vedio-list{ |
| | | height: calc(100vh - 130px); |
| | | } |
| | | .left-tree-box .el-tabs--border-card .el-tabs__header{ |
| | | display: block!important; |
| | | margin-bottom: 10px; |
| | | } |
| | | .column { |
| | | overflow: hidden; |
| | | min-width: 1399px; |
| | | height: 100%; |
| | | } |
| | | .column-left { |
| | | background-color: #fff; |
| | | position: relative; |
| | | float: left; |
| | | height: 100vh; |
| | | } |
| | | .column-right { |
| | | height: 100vh; |
| | | background-color: #eee; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | } |
| | | .heigher-index { |
| | | position: absolute; |
| | | top: 0; |
| | | z-index: 10; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .resize-save { |
| | | position: absolute; |
| | | top: 0; |
| | | right: 5px; |
| | | bottom: 0; |
| | | left: 0; |
| | | padding: 16px; |
| | | padding-top: 8px; |
| | | overflow-x: hidden; |
| | | } |
| | | .resize-bar { |
| | | width: 338px; |
| | | height: inherit; |
| | | resize: horizontal; |
| | | cursor: ew-resize; |
| | | opacity: 0; |
| | | overflow: scroll; |
| | | max-width: 500px; //设定最大拉伸长度 |
| | | min-width: 33px; //设定最小宽度 |
| | | } |
| | | /* 拖拽线 */ |
| | | .resize-line { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 0; |
| | | bottom: 0; |
| | | border-right: 2px solid #efefef; |
| | | border-left: 1px solid #e0e0e0; |
| | | pointer-events: none; |
| | | } |
| | | .resize-bar:hover ~ .resize-line, |
| | | .resize-bar:active ~ .resize-line { |
| | | border-left: 1px dashed skyblue; |
| | | } |
| | | .resize-bar::-webkit-scrollbar { |
| | | width: 200px; |
| | | height: inherit; |
| | | } |
| | | |
| | | /* Firefox只有下面一小块区域可以拉伸 */ |
| | | @supports (-moz-user-select: none) { |
| | | .resize-bar:hover ~ .resize-line, |
| | | .resize-bar:active ~ .resize-line { |
| | | border-left: 1px solid #bbb; |
| | | } |
| | | .resize-bar:hover ~ .resize-line::after, |
| | | .resize-bar:active ~ .resize-line::after { |
| | | content: ""; |
| | | position: absolute; |
| | | width: 16px; |
| | | height: 16px; |
| | | bottom: 0; |
| | | right: -8px; |
| | | // background: url(./resize.svg); |
| | | background-size: 100% 100%; |
| | | } |
| | | } |
| | | </style> |
| | | <template>
|
| | | <div class="column">
|
| | | <div class="column-left">
|
| | | <div class="resize-bar"></div>
|
| | | <div class="resize-line"></div>
|
| | | <div class="resize-save">
|
| | | <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav>
|
| | | </div>
|
| | | </div>
|
| | | <div class="column-right">
|
| | | <right-side />
|
| | | </div>
|
| | | <card-window></card-window>
|
| | | </div>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | import LeftNav from "@/components/LeftNav";
|
| | | // import CameraVideo from "./components/Video.vue";
|
| | | import RightSide from "./Searching";
|
| | | import CardWindow from "@/components/cardWindow";
|
| | |
|
| | | export default {
|
| | | name: "SearchPage",
|
| | | components: {
|
| | | LeftNav,
|
| | | RightSide,
|
| | | CardWindow,
|
| | | },
|
| | | data() {
|
| | | return {
|
| | | screenHeight: 0,
|
| | | };
|
| | | },
|
| | | created() {
|
| | | // this.parseUrl();
|
| | | },
|
| | | mounted() {
|
| | | this.screenHeight = document.documentElement.clientHeight - 20;
|
| | | window.onresize = () => {
|
| | | return (() => {
|
| | | this.screenHeight = document.documentElement.clientHeight - 20;
|
| | | })();
|
| | | };
|
| | | },
|
| | | methods: {
|
| | | parseUrl() {},
|
| | | },
|
| | | };
|
| | | </script>
|
| | |
|
| | | <style lang="scss" >
|
| | | .left-tree-box .local-vedio-area .dev-vedio-list {
|
| | | height: calc(100vh - 130px);
|
| | | }
|
| | | .left-tree-box .el-tabs--border-card .el-tabs__header {
|
| | | display: block !important;
|
| | | margin-bottom: 10px;
|
| | | }
|
| | | .column {
|
| | | overflow: hidden;
|
| | | min-width: 1399px;
|
| | | height: 100%;
|
| | | }
|
| | | .column-left {
|
| | | background-color: #fff;
|
| | | position: relative;
|
| | | float: left;
|
| | | height: 100vh;
|
| | | }
|
| | | .column-right {
|
| | | height: 100vh;
|
| | | background-color: #eee;
|
| | | box-sizing: border-box;
|
| | | overflow: hidden;
|
| | | }
|
| | | .heigher-index {
|
| | | position: absolute;
|
| | | top: 0;
|
| | | z-index: 10;
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | }
|
| | | .resize-save {
|
| | | position: absolute;
|
| | | top: 0;
|
| | | right: 5px;
|
| | | bottom: 0;
|
| | | left: 0;
|
| | | padding: 16px;
|
| | | padding-top: 8px;
|
| | | overflow-x: hidden;
|
| | | }
|
| | | .resize-bar {
|
| | | width: 338px;
|
| | | height: inherit;
|
| | | resize: horizontal;
|
| | | cursor: ew-resize;
|
| | | opacity: 0;
|
| | | overflow: scroll;
|
| | | max-width: 500px; //设定最大拉伸长度
|
| | | min-width: 33px; //设定最小宽度
|
| | | }
|
| | | /* 拖拽线 */
|
| | | .resize-line {
|
| | | position: absolute;
|
| | | right: 0;
|
| | | top: 0;
|
| | | bottom: 0;
|
| | | border-right: 2px solid #efefef;
|
| | | border-left: 1px solid #e0e0e0;
|
| | | pointer-events: none;
|
| | | }
|
| | | .resize-bar:hover ~ .resize-line,
|
| | | .resize-bar:active ~ .resize-line {
|
| | | border-left: 1px dashed skyblue;
|
| | | }
|
| | | .resize-bar::-webkit-scrollbar {
|
| | | width: 200px;
|
| | | height: inherit;
|
| | | }
|
| | |
|
| | | /* Firefox只有下面一小块区域可以拉伸 */
|
| | | @supports (-moz-user-select: none) {
|
| | | .resize-bar:hover ~ .resize-line,
|
| | | .resize-bar:active ~ .resize-line {
|
| | | border-left: 1px solid #bbb;
|
| | | }
|
| | | .resize-bar:hover ~ .resize-line::after,
|
| | | .resize-bar:active ~ .resize-line::after {
|
| | | content: "";
|
| | | position: absolute;
|
| | | width: 16px;
|
| | | height: 16px;
|
| | | bottom: 0;
|
| | | right: -8px;
|
| | | // background: url(./resize.svg);
|
| | | background-size: 100% 100%;
|
| | | }
|
| | | }
|
| | | </style>
|