<!-- * @Author: your name * @Date: 2022-04-20 09:01:12 * @LastEditTime: 2022-04-21 17:25:32 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Right/One.vue --> <template> <div class="one-wrapper all-flex-h"> <div class="top-title">重点工程项目</div> <div class="middle flex"> <div class="left"> <div>新建/改扩建<span class="text">场站数量</span>、投资额</div> </div> <div class="right"> <div>新建/改扩建<span class="text">管道长度</span>、投资额</div> </div> </div> <div class="bottom flex"> <div class="left"> <div><span class="text">{{numMap.zhanNum}}</span> 个、<span>{{numMap.moneyZhan}}</span>万元</div> </div> <div class="right"> <div><span class="text">{{numMap.pipeNum}}</span> 米、<span>{{numMap.moneyPipe}}</span>万元</div> </div> </div> </div> </template> <script> import { selectNum} from "@/api/regulation/project"; export default { name: "", data() { return { numMap:{} }; }, created(){ this.getMap(); }, methods: { getMap(){ selectNum().then(response => { this.numMap = response.data; }) } }, }; </script> <style lang="scss" scoped> .one-wrapper { height: 100%; width: 100%; box-sizing: border-box; padding-top: 10px; padding-bottom:5px; .top-title { font-size: 16px; padding-left: 19px; margin-bottom: 10px; font-weight: 600; } .middle,.bottom { > div { flex: 1; display: flex; justify-content: center; font-size: 13px; .text { color: #1a91ff; font-size: 14px; } } } .bottom{ display: flex; align-items: center; flex:1; >div{ .text{ font-size: 18px; } } } } </style>