ggbwy_onlineTour/scene/src/views/gui/components/layerMap.vue

<!--  -->
<template>
  <div class="layer-box">
    <div class="layer-close" @click="$emit('close')"></div>
    <div class="layer-content">
      <div class="map-content" ref="mapEle">
        <ul class="cell-list">
          <li class="li" :class="{ active: unit == 1 }" @click="changeUnit(1)"><span>第一单元</span></li>
          <li class="li" :class="{ active: unit == 2 }" @click="changeUnit(2)"><span>第二单元</span></li>
        </ul>
        <div class="map-box-main" ref="mapMainEle">
          <div class="map-box" :style="`    transform: translate(-50%, -50%) scale(${0.58 * mapScale});`">
            <div class="map-svg">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="665px" height="963px">
                <!-- <polygon
                  id="_x32_"
                  class="st0"
                  opacity="0.4"
                  fill="rgb(134, 92, 92)"
                  points="208.3,150.5 208.3,0 0,0 0,222 253,222 253,610 0,610 0,846 79.4,846 79.4,672.3 
	315.5,672.3 315.5,150.5 "
                  :class="{ active: unit == 1 }"
                />
                <polygon
                  :class="{ active: unit == 2 }"
                  id="_x31_"
                  class="st0"
                  opacity="0.4"
                  fill="rgb(134, 92, 92)"
                  points="633,846 633,610 380,610 380,222 633,222 633,0 429,0 429,150.5 315.8,150.5 315,672 
	554.2,672 554.2,846 "
                /> -->
                <path :class="{ active: unit == 2 }" fill="rgb(134, 92, 92)" class="st0" d="M333.3-0.2v645.1H113.9v202H0V534.7h255.7v-205H0V-0.2H333.3z" />
                <path :class="{ active: unit == 1 }" fill="rgb(134, 92, 92)" class="st0" d="M333.3-0.2v645.1h221.2v202h109.9V534.7L411.3,535V330l253.1-0.3V-0.2H333.3z" />
              </svg>
              <div class="point-list">
                <div
                  class="tool_map_point"
                  :pano-id="id"
                  @click="goPano(id)"
                  :class="{ current: panoId == id, over: i.over }"
                  :style="`transform:translate(${i.x}px,${i.y}px);`"
                  v-for="(i, id, index) in points"
                >
                  <p class="tips">点位{{ id }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="point-type-list">
          <dl>
            <dt class="over"></dt>
            <dd>已浏览</dd>
          </dl>
          <dl>
            <dt class="no"></dt>
            <dd>未浏览</dd>
          </dl>
          <dl>
            <dt class="now"></dt>
            <dd>当前位置</dd>
          </dl>
        </div>
      </div>

      <div class="desc-box">
        <template v-if="unit == 0">
          <p class="title">前 言</p>
          <div class="des-content">
            <p class="">　　中国古代人物画中既有表现“庙堂仪范”的含淳咏德，“林下风雅”的高蹈优游，更不乏描绘黎民大众日常艰辛劳作、节庆欢愉的人物风俗画。</p>
            <p class="">
              　　远古岩画已有人物风俗画雏形。至西周始有观风与化俗的政治传统，使得历代统治者尤重民风变化。世情之淳薄，殊方之人文，农工之造作，商贾之交易，皆可凭图画的直观性与艺术性而传载。加之画家出于自觉意识对民众生活的关怀与记录，使人物风俗画逐渐成为重要画科。魏晋时已有画田家景物的名家。及至两宋，人物风俗画达到高峰，技法多样，且题材广泛，农桑渔猎、陶冶纺织、月令社庆、村市游戏之芸芸众生相，皆被画家惟妙惟肖地呈现于笔底毫端，令人回味无穷。
            </p>
            <p class="">
              　　本次展览是继“庙堂仪范”“林下风雅”之后，故宫博物院藏历代人物画特展第三期，绘画佳作中人物的举手投足、一颦一笑，皆呈现出生动鲜活、精彩纷呈的众生形象以及古代生活场景。游目于画作，让我们一起领略艺术之美，感悟历史智慧，传扬文化精神。
            </p>
          </div>
        </template>
        <template v-if="unit == 1">
          <p class="title">第一单元 村市生涯</p>
          <div class="des-content">
            <p class="">
              　　“民务稼穑，衣食滋殖”，古代中国以农业立国，人物风俗画的发展中，农人农事一直是主流题材。“一人之身，百工为备”，经济的发展带来了社会分工，工匠为人们提供了丰富多样的物质生活，其身影也常出现在人物画中。“交易而退，各得其所”，随着城市的兴起，商贾成为新兴的形象逐渐进入人物画中，以表现城市经济生活的画作在北宋开始出现，并向着精细化发展，更加注重人物动作神态、衣纹服饰的描绘，题材更为广泛。
            </p>
            <p class="">　　本单元选取描绘农村、城市经济活动的人物风俗画，分为农人、工匠、商贾三个主题，以展示古代劳动者形象及生产交易场景。</p>
          </div>
        </template>
        <template v-if="unit == 2">
          <p class="title">第二单元 太平欢乐</p>
          <div class="des-content">
            <p class="">
              　　古人对于大自然的体认开始于对四季周回的感悟，“七月流火，九月授衣”，时序的变化催生出丰富的岁时风俗。这些风俗活动既饱含对丰收的憧憬，又内蕴对自然的敬畏，是人物风俗画的重要表现内容。“绵绵瓜瓞，民之初生”，多子多福是人们的美好向往。婴戏图以众多婴孩为主角，表现孩童的纯真烂漫，寓意着对生命的崇敬与渴望，是备受欢迎的人物风俗画题材。而春游晚归、游戏杂技，舟桥街巷之拥堵，勾栏瓦肆之欢笑，语默之处，日用之间，无不是人物风俗画表现的对象，充分反映了古人生活的丰富多姿。
            </p>
            <p class="">　　本单元选取描绘民众日常生活的人物风俗画，分为岁时、婴戏、娱乐三部分，以展示古人生活娱乐场景。</p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  // props: ["points"],
  data() {
    //这里存放数据
    return { unit: 0, mapScale: 1 };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters({
      points: "points",
      panoId: "panoId",
    }),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapMutations(["setData"]),
    goPano(id) {
      player.flyToPano({ pano: player.model.panos.get(id) });
      this.panoId = id;
      // if (!this.points[id].over) {
      //   this.points[id].over = true;
      // }
    },
    // getPoints() {
    //   // let w = 633,
    //   //   h = 965;
    //   let w = 665,
    //     h = 963;
    //   let points = manage.initMapPanoPos(w, h);

    //   if (!this.points) {
    //     this.setData({ points });
    //   }
    // },
    initPicSize() {
      try {
        let refW = this.$refs.mapEle.getBoundingClientRect().width;
        let refH = this.$refs.mapMainEle.getBoundingClientRect().height;
        let scaleW = refW / 598;
        let scaleH = refH / 622;
        this.mapScale = scaleW > scaleH ? scaleH : scaleW;
      } catch (err) {
        // console.error(err);
      }
    },
    changeUnit(unit) {
      if (unit == this.unit) {
        this.unit = 0;
      } else {
        this.unit = unit;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener("resize", this.initPicSize);
    this.$nextTick(() => {
      this.initPicSize();
      // this.getPoints();
      // let overList = sessionStorage.getItem("overList");
      // if (overList) {
      //   this.overList = JSON.parse(overList);
      // }
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    window.removeEventListener("resize", this.initPicSize);
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.layer-box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  z-index: 100;
  .layer-close {
    position: absolute;
    width: 56px;
    height: 56px;
    background: url(../../../assets/image/icon/new-icon/icon_close.png) no-repeat;
    background-size: 100%;
    right: 56px;
    top: 56px;
    cursor: pointer;
  }
  .layer-content {
    max-width: 85%;
    margin: 0 auto;
    padding: 60px 0;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    .map-content {
      max-width: 50%;
      max-height: 100%;
      width: 598px;
      height: 788px;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      background-color: hsla(0, 0%, 100%, 0.8);
      animation: ani 0.5s;
      display: flex;
      flex-direction: column;
      .cell-list {
        padding: 25px 0 15px;
        text-align: center;
        font-size: 0;
        line-height: 1;
      }
      .li {
        min-width: 112px;
        height: 40px;
        border: 1px solid rgba(113, 88, 49, 0.8);
        line-height: 38px;
        text-align: center;
        padding: 0 20px;
        font-weight: 700;
        font-size: 18px;
        color: #715831;
        border-radius: 20px;
        display: inline-block;
        margin: 0 10px 10px;
        cursor: pointer;
        &.active {
          border-color: hsla(0, 0%, 100%, 0.8);
          color: #fff;
          background-color: rgba(146, 96, 96, 0.8);
        }
      }
      .map-box-main {
        flex: 1;
        position: relative;
        overflow: hidden;
        .map-box {
          width: 805px;
          height: 1064px;
          transform: translate(-50%, -50%) scale(0.58);
          background-image: url(../../../assets/image/icon/new-icon/map.jpg);
          position: absolute;
          left: 50%;
          top: 50%;
          overflow: hidden;
          .map-svg {
            left: 70px;
            top: 61px;
            position: absolute;

            polygon {
              cursor: pointer;
              opacity: 0 !important;
              &.active {
                opacity: 0.6 !important;
              }
            }
            path {
              cursor: pointer;
              opacity: 0 !important;
              &.active {
                opacity: 0.6 !important;
              }
            }
            .point-list {
              position: absolute;
              z-index: 100;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
              .tool_map_point {
                width: 12px;
                height: 12px;
                background: #dcd1b9;
                border-radius: 50%;
                border: 2px solid #c0a06a;
                position: absolute;
                transform: translate(-50%, -50%);
                cursor: pointer;
                pointer-events: auto;
                z-index: 1;
                &.over {
                  border: none !important;
                  background: url(../../../assets/image/icon/new-icon/red.png) no-repeat 50% / contain;
                }

                &.current {
                  &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 24px;
                    height: 24px;
                    background: url(../../../assets/image/icon/new-icon/blue.png) no-repeat 50% / contain;
                    transform: translate(-50%, -50%);
                  }
                }
                &:hover {
                  background: #814f4f;
                  border-color: #814f4f;
                  z-index: 2;
                  .tips {
                    display: block;
                  }
                }
                .tips {
                  padding: 5px 10px;
                  background: rgba(0, 0, 0, 0.5);
                  border-radius: 6px;
                  position: absolute;
                  left: 50%;
                  bottom: 20px;
                  transform: translateX(-50%);
                  white-space: nowrap;
                  display: none;
                  font-size: 20px;
                  // border: 1px solid #ffffff;
                  z-index: 100;
                  &::after {
                    content: "";
                    position: absolute;
                    border: 6px solid transparent;
                    border-top-color: rgba(0, 0, 0, 0.5);
                    display: inline-block;
                    top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                  }
                }
              }
            }
          }
        }
      }

      .point-type-list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 28px 0 24px;
        dl {
          padding: 0 20px 0;
        }
        dt {
          width: 24px;
          height: 24px;
          background: url(../../../assets/image/icon/new-icon/red.png) no-repeat;
          display: inline-block;
          vertical-align: middle;
          background-size: 100%;
          &.no {
            background: url(../../../assets/image/icon/new-icon/no.png) no-repeat;
            background-size: 100%;
          }
          &.now {
            background: url(../../../assets/image/icon/new-icon/blue.png) no-repeat;
            background-size: 100%;
          }
        }
        dd {
          font-weight: 700;
          font-size: 18px;
          color: #653332;
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
        }
      }
    }
    .desc-box {
      color: #fff;
      max-height: 100%;
      overflow: auto;
      margin-left: 40px;
      flex: 1;
      .title {
        font-weight: 700;
        font-size: 26px;
        line-height: 36px;
        text-align: center;
        margin-bottom: 35px;
      }
      .des-content {
        font-size: 20px;
        line-height: 33px;
        white-space: pre-line;
        text-align: justify;
        p {
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>