| | |
| | | <template> |
| | | <div class="public-bounced" v-show="flag"> |
| | | <div class="popup_title">{{ displayContent.Name }}</div> |
| | | <div class="popup_bottom"> |
| | | <button @click="closePopup">确定</button> |
| | | <div class="public-bounced" v-draw v-show="flag"> |
| | | <div class="public-bounced-title"> |
| | | <span>{{ displayContent.Name }}</span> |
| | | <i class="el-icon-circle-close" @click="closePopup"></i> |
| | | </div> |
| | | <div class="public-bounced-content"> |
| | | <div class="public-bounced-content-left"> |
| | | <GasTab :displayContent="displayContent"></GasTab> |
| | | <PublicTable v-if="value === 'gufei'" :requestSolidWasteData="displayContent.StoragePlaceId"></PublicTable> |
| | | <GasECharts v-else></GasECharts> |
| | | </div> |
| | | <div class="public-bounced-content-right"> |
| | | <GasVideo></GasVideo> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import '@/components/BaseNav/SolidWaste/directive/dir' |
| | | import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab' |
| | | import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable' |
| | | import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts' |
| | | import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo' |
| | | |
| | | export default { |
| | | name: 'PublicBounced', |
| | | components: { |
| | | GasTab, |
| | | PublicTable, |
| | | GasECharts, |
| | | GasVideo |
| | | }, |
| | | data () { |
| | | return { |
| | | displayContent: [], |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | setData (data) { |
| | | setData (data, value) { |
| | | this.displayContent = data |
| | | this.flag = true |
| | | this.value = value |
| | | }, |
| | | closePopup () { |
| | | this.flag = false |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | <style lang="less" scoped> |
| | | .public-bounced { |
| | | width: 80%; |
| | | z-index: 499; |
| | | width: 75%; |
| | | z-index: 999; |
| | | position: absolute; |
| | | top: 15%; |
| | | left: 10%; |
| | | background-color: rgba(128, 128, 128, 0.507); |
| | | padding: 1%; |
| | | border-radius: 20px; |
| | | margin: 10% auto; |
| | | } |
| | | bottom: 5%; |
| | | left: 15%; |
| | | background-color: #002432; |
| | | border: 1px #9fc5c8 solid; |
| | | |
| | | .popup_title { |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 30px; |
| | | } |
| | | .public-bounced-title { |
| | | border: 1px #a4c0d8 solid; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 5px 0; |
| | | |
| | | .popup_center { |
| | | padding: 10%; |
| | | font-size: 20px; |
| | | } |
| | | span { |
| | | color: #f4f7ff; |
| | | margin: 0 15px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .popup_bottom { |
| | | display: flex; |
| | | justify-content: space-around; |
| | | } |
| | | i { |
| | | color: white; |
| | | margin: 0 15px; |
| | | font-size: 22px; |
| | | } |
| | | } |
| | | |
| | | button { |
| | | width: 25%; |
| | | height: 20%; |
| | | padding: 2%; |
| | | border: 1px solid gray; |
| | | border-radius: 10px; |
| | | } |
| | | .public-bounced-content { |
| | | margin: 15px auto; |
| | | display: flex; |
| | | //align-items: center; |
| | | justify-content: space-around; |
| | | padding: 10px; |
| | | |
| | | button:nth-child(1) { |
| | | background-color: orangered; |
| | | color: white; |
| | | font-size: 20px; |
| | | } |
| | | .public-bounced-content-left { |
| | | flex: 3; |
| | | height: 100%; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | button:nth-child(2) { |
| | | background-color: gray; |
| | | color: black; |
| | | font-size: 20px; |
| | | .public-bounced-content-right { |
| | | flex: 2; |
| | | //width: 48%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | </style> |