北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2024-11-18 9a57dec9a7b520f349781991eb2bf3c1b294825f
src/components/poplayer/poplayer.vue
@@ -4,13 +4,16 @@
      <div class="close" @click.stop="closehandle"></div>
      <!-- <div class="title">点位详情</div> -->
      <div class="content">
        <div class="ssdw">{{ state.list[KEY["所属单位"]] }}</div>
        <!-- <div class="ssdw">{{ state.list[KEY["所属单位"]] }}</div>
        <div class="lxr">联系人:{{ state.list[KEY["联系人"]] }}</div>
        <div class="dz">地址:{{ state.list[KEY["地址"]] }}</div>
        <!-- <div class="con-item" v-for="(item, index) in KEY" :key="index">
          <span class="name">{{ index }}:</span>
          <span class="value">{{ state.list[item] }}</span>
        </div> -->
        <div class="dz">地址:{{ state.list[KEY["地址"]] }}</div> -->
        <div class="con-item" v-for="(val, key, i) in list" :key="i">
          <span class="name">{{ key }}:{{ val }}</span>
        </div>
        <div class="ssdw" v-if="list['信用等级'] || list['风险等级']">
          <a :href="'https://qylweb.bda.gov.cn/alldetails/#/newEnterprisedetails?uscc=' + list['信用代码']"
            target="_blank">查看企业画像</a>
        </div>
      </div>
    </div>
  </div>
@@ -18,14 +21,14 @@
<script>
import store from "@/utils/store";
import keys from "@/utils/poiKeys";
// import keys from "@/utils/poiKeys";
export default {
  name: "Main",
  components: {},
  props: {
    keys: {
      type: Object,
    },
    // keys: {
    //   type: Object,
    // },
    list: {
      type: Object,
    },
@@ -38,14 +41,16 @@
  },
  computed: {},
  mounted() {
    if (this.list) {
      this.state.list = this.list;
    }
    this.KEY = keys[this.state.list.POITYPE];
    // this.KEY = keys[this.state.list.POITYPE];
  },
  watch: {
    "state.list": function (val) {
      this.KEY = keys[val.POITYPE];
      // console.log(val);
      // this.KEY = keys[val.POITYPE];
    },
  },
  methods: {
@@ -79,8 +84,8 @@
  z-index: 999;
  color: #fff;
  font-family: SourceHanSansSC-R;
  /* padding: 20px; */
  padding: 10px 5px 10px 5px;
  padding: 20px;
  /* padding: 10px 5px 10px 5px; */
  box-sizing: border-box;
  font-size: 16px;
  pointer-events: all;
@@ -104,15 +109,15 @@
} */
.close {
  position: absolute;
  pointer-events: all;
  right: 15px;
  top: 24px;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("./img/close.png");
  float: right;
  margin-top: 8px;
  margin-right: 15px;
  cursor: pointer;
}
@@ -131,22 +136,31 @@
}
.name {
  /* min-width: 100px; */
  float: left;
  margin: 13px auto 0;
  max-width: 80%;
  text-align: center;
  color: #fff;
  font: bold 15px sans-serif;
}
.value {
  max-width: 400px;
  float: left;
  color: aqua;
  color: #fff;
}
.ssdw {
  width: 94%;
  margin: 20px auto 0;
  text-align: center;
  color: #f2be10;
  font: bold 18px sans-serif;
  text-align: end;
  /* font: bold 18px sans-serif; */
}
.ssdw a{
  color: #f2be10;
}
.lxr {
  margin: 13px auto 0;
  max-width: 80%;
@@ -154,6 +168,7 @@
  color: #fff;
  font: bold 15px sans-serif;
}
.dz {
  margin: 13px auto 20px;
  max-width: 80%;