<!-- * @Author: your name * @Date: 2022-01-26 20:07:52 * @LastEditTime: 2022-03-08 16:16:39 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /test/hello-world/src/views/components/deviceA.vue --> <template> <div class="devicea-wrapper"> <div class="title"> {{ deviceData.enterpriseName }} </div> <div class="close" @click="close"> <img src="@/assets/bigWindowOld/mapImages/closeBtn.png" alt="" /> </div> <div class="top flex"> <div class="group"> <div class="left">企业名称:</div> <div class="right zzz">{{ deviceData.enterpriseName }}</div> </div> <div class="group"> <div class="left">法定代表人:</div> <div v-unValue class="right zzz"> {{ deviceData.legalRepresentative }} </div> </div> <div class="group"> <div class="left">经营区域:</div> <div v-unValue :title="deviceData.businessArea" class="right last zzz"> {{ deviceData.businessArea }} </div> </div> </div> <div class="middle"> <div class="left"> <div>注册地址:</div> </div> <div v-unValue title="123" class="right"> {{ deviceData.registerAddress }} </div> </div> <div class="middle"> <div class="left"> <div>备注信息:</div> </div> <div v-unValue title="123" class="right"> {{ deviceData.remarks }} </div> </div> </div> </template> <script> import { companyType, deviceType } from "@/utils/mapClassForBigOld/config.js"; export default { data() { return { companyType, deviceType, profile: "暂无备注", }; }, computed: { prodTest() { return this.vueRoot.$store.state.user.systemSetting.prod_test; }, company() { return this.vueRoot.$store.state.bigWindowCompany.company; }, }, mounted() { // 如果不是测试,而是真数据,就要用帧数据的东西 if (this.prodTest != "test") { this.companyType = {}; this.company.forEach((item) => { this.companyType[item.conpanyId] = item.companyName; }); } console.log(this.deviceData); }, methods: { close() { this.mapClass.infowindowClose(); }, btnClick() { // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows); }, }, }; </script> <style lang="scss" scoped> .devicea-wrapper { background-color: rgba(9, 18, 32, 0.6); padding: 10px; position: relative; width: 700px; .title { // padding-top: 10px; // padding-left: 10px; font-size: 14px; line-height: 14px; color: #ffffff; } .close { position: absolute; right: 10px; top: 5px; cursor: pointer; } .top { margin-top: 10px; // margin-bottom: 10px; border: 1px solid #cccccc; box-sizing: border-box; .group { height: 30px; flex: 1; display: flex; justify-content: space-between; box-sizing: border-box; div { flex: 1; box-sizing: border-box; border-right: 1px solid #cccccc; text-align: center; font-size: 14px; color: #ffffff; line-height: 30px; padding: 0 5px; &.last { border-right: none; } } .left { text-align: right; background-color: rgba(255, 255, 255, 0.1); } } } .middle { display: flex; border: 1px solid #cccccc; border-top: none; & > div { box-sizing: border-box; border-right: 1px solid #cccccc; text-align: center; font-size: 14px; color: #ffffff; line-height: 30px; padding: 0 5px; &.left { width: 113px; display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.1); div { text-align: right; flex: 1; } } &.right { border: none; flex: 1; text-align: left; text-indent: 2em; line-height: normal; padding: 5px; } } } .foot { width: 100%; padding: 5px; border: 1px solid #ffffff; box-sizing: border-box; font-size: 14px; color: #ffffff; text-indent: 2em; margin-bottom: 10px; } .flex { display: flex; justify-content: space-between; } } </style>