| | |
| | | <public-tabs :storagePlaceId="storagePlaceId"></public-tabs> |
| | | </template> |
| | | <template v-slot:publicPart> |
| | | <div class="publicPart"> |
| | | <div class="public-part"> |
| | | <span></span> |
| | | <span></span> |
| | | <span></span> |
| | |
| | | }, |
| | | data () { |
| | | return { |
| | | activeName: 'first', |
| | | currentTab: RealData, |
| | | active: '0', |
| | | displayContentTable: '', |
| | | flag: false, |
| | | tabTaggle (taggleMenu, num) { |
| | | this.currentTab = taggleMenu |
| | | this.active = num |
| | | } |
| | | activeName: 'first' |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.$nextTick(() => { |
| | | this.refsData() |
| | | }) |
| | | }, |
| | | methods: { |
| | | handleClick (tab, event) { |
| | | console.log(tab, event) |
| | | }, |
| | | refsData () { |
| | | // 请求数据需要携带的参数 |
| | | // const data = this.EpsGisMonPointId |
| | | this.$refs.refsTabsData.refsDataTabs() |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .public-bounced { |
| | | z-index: 2000; |
| | | position: absolute; |
| | | top: 35%; |
| | | left: 20%; |
| | | |
| | | .public-bounced-title { |
| | | cursor: move; |
| | | height: 0.1rem; |
| | | padding: 10px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | span { |
| | | color: #f4f7ff; |
| | | margin: 0 15px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | i { |
| | | color: #C0C4CC; |
| | | margin: 0 15px; |
| | | font-size: 22px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | i:hover { |
| | | color: #00fff6; |
| | | } |
| | | } |
| | | |
| | | .public-bounced-content { |
| | | padding: 0.1rem; |
| | | display: flex; |
| | | //align-items: center; |
| | | //justify-content: space-around; |
| | | |
| | | .public-bounced-content-left { |
| | | //width: 4.8rem; |
| | | } |
| | | |
| | | .public-bounced-content-right { |
| | | //width: 3rem; |
| | | margin-left: 0.1rem; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .publicPart { |
| | | .public-part { |
| | | position: relative; |
| | | margin-bottom: 0.1rem; |
| | | background-color: @background-color; |
| | |
| | | border: 1px solid #396d83; |
| | | } |
| | | |
| | | .publicPart span:nth-child(1) { |
| | | .public-part span:nth-child(1) { |
| | | position: absolute; |
| | | left: -2px; |
| | | top: -2px; |
| | |
| | | border-width: 2px 0 0 2px; |
| | | } |
| | | |
| | | .publicPart span:nth-child(2) { |
| | | .public-part span:nth-child(2) { |
| | | position: absolute; |
| | | right: -2px; |
| | | top: -2px; |
| | |
| | | border-width: 2px 2px 0 0; |
| | | } |
| | | |
| | | .publicPart span:nth-child(3) { |
| | | .public-part span:nth-child(3) { |
| | | position: absolute; |
| | | right: -2px; |
| | | bottom: -2px; |
| | |
| | | border-width: 0 2px 2px 0; |
| | | } |
| | | |
| | | .publicPart span:nth-child(4) { |
| | | .public-part span:nth-child(4) { |
| | | position: absolute; |
| | | left: -2px; |
| | | bottom: -2px; |
| | |
| | | border-style: solid; |
| | | border-color: #02a6b5; |
| | | border-width: 0 0 2px 2px; |
| | | } |
| | | |
| | | .win { |
| | | position: relative; |
| | | background: @background-color; |
| | | border: 0.8px solid #396d83; |
| | | } |
| | | |
| | | .border_corner { |
| | | z-index: 999; |
| | | position: absolute; |
| | | width: 10px; |
| | | height: 10px; |
| | | background: rgba(0, 0, 0, 0); |
| | | border: 1.5px solid #47d5ea; |
| | | } |
| | | |
| | | .border_corner_left_top { |
| | | top: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .border_corner_right_top { |
| | | top: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .border_corner_left_bottom { |
| | | bottom: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-top: none; |
| | | } |
| | | |
| | | .border_corner_right_bottom { |
| | | bottom: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-top: none; |
| | | } |
| | | |
| | | .tab { |
| | | display: flex; |
| | | border-bottom: 1px solid #396d83; |
| | | padding: 0.02rem 0.04rem; |
| | | } |
| | | |
| | | .tab li { |
| | | background-color: #243a55; |
| | | line-height: 0.15rem; |
| | | height: 0.15rem; |
| | | text-align: center; |
| | | border-radius: 5px; |
| | | margin-right: 0.04rem; |
| | | padding: 0 0.04rem; |
| | | } |
| | | |
| | | .tab li.hover, |
| | | .tab li:hover { |
| | | background-color: #0e639e; |
| | | color: #fff; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .legend { |
| | | position: absolute; |
| | | top: 0.05rem; |
| | | right: 0; |
| | | display: flex; |
| | | justify-items: center; |
| | | } |
| | | |
| | | .legend i { |
| | | display: block; |
| | | width: 0.2rem; |
| | | height: 0.09rem; |
| | | margin: 0 0.1rem 0 0.05rem; |
| | | border-radius: 0.02rem; |
| | | } |
| | | |
| | | .legend span { |
| | | line-height: 0.09rem; |
| | | height: 0.09rem; |
| | | font-size: 0.06rem; |
| | | } |
| | | |
| | | </style> |