zhzshszg/src/pages/ruins-detail/index.vue

<!-- 场馆漫游 -->
<template>
  <div class="root">
    <div class="layout" v-if="!isMobile">
      <div class="title">{{ detail.name }}</div>
      <div class="container">
        <img class="pic" :src="detail.detailImg" alt="" />
        <div class="content">
          <div class="txt" v-html="detail.content">
            <!-- {{ detail.content }} -->
          </div>
          <div class="btns">
            <div
              class="btn left-btn"
              @click="handleClickEvent('travelAround', detail)"
            >
              VR云游
            </div>
            <div
              class="btn center-btn"
              @click="handleClickEvent('overLook', detail)"
            >
              VR俯瞰
            </div>
            <div
              class="btn right-btn"
              @click="handleClickEvent('intensiveReading', detail)"
            >
              党史精读
            </div>
          </div>
        </div>
      </div>
      <div class="goBack" @click="goBack()">
        <img src="../../assets/images/goback.png" alt="" />
      </div>
    </div>
    <div v-if="isMobile" class="mobile-layout">
      <div class="mobile-card">
        <div class="mobile-content">
          <div class="pic">
            <img :src="detail.detailImg" alt="" />
          </div>
          <div class="txt">
            <div class="title">{{ detail.name }}</div>
            <div class="con" v-html="detail.content">
              <!-- {{ detail.content }} -->
            </div>
          </div>
          <div class="btns">
            <div
              class="btn left-btn"
              @click="handleClickEvent('travelAround', detail)"
            >
              VR云游
            </div>
            <div
              class="btn center-btn"
              @click="handleClickEvent('overLook', detail)"
            >
              VR俯瞰
            </div>
            <div
              class="btn right-btn"
              @click="handleClickEvent('intensiveReading', detail)"
            >
              党史精读
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import browser from "@/utils/browser.js";
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      detail: null,
      isMobile: browser.mobile,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClickEvent(type, item) {
      switch (type) {
        case "travelAround":
          this.$router.push({
            path: "/travel-around",
            query: { travelAround: item.travelAround },
          });
          break;
        case "overLook":
          if (item.id == "2") {
            window.alert("该红色展馆暂无VR俯瞰");
            break;
          }
          this.$router.push({
            path: "/over-look",
            query: { overLook: item.overLook },
          });
          break;
        case "intensiveReading":
          window.open(item.intensiveReading, "_target");
          break;
        default:
          break;
      }
    },
    goBack() {
        history.go(-1)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.detail = this.$route.query || {};
    console.log("isMobile", this.isMobile);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.root {
  width: 100%;
  height: 100%;
}
// pc端样式
.layout {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/cards-bg.png") center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .goBack {
    position: absolute;
    top: 26px;
    left: 20px;
    cursor: pointer;
  }
  .title {
    width: 1264px;
    text-align: center;
    margin: 0 auto;
    margin-top: 100px;
    box-sizing: border-box;
    height: 32px;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 54px;
    color: #c20e23;
    opacity: 1;
  }
  .container {
    width: 1264px;
    height: 500px;
    background: url("../../assets/images/detail-con-bg.png") center center
      no-repeat;
    background-clip: 100% 100%;
    margin: 50px auto;
    box-sizing: border-box;
    padding: 10px;
    font-size: 0;
    display: flex;
    justify-content: space-between;
    .pic {
      width: 40%;
      height: 100%;
    }
    .content {
      width: 58%;
      font-size: 18px;
      .txt {
        overflow: auto;
        height: 80%;
        padding: 80px 50px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 31px;
        color: #ffffff;
        opacity: 1;
      }
      .btns {
        height: 20%;
        padding: 2vw 6vw;
        display: flex;
        justify-content: space-around;
        .left-btn {
          background: url(../../assets/images/left-btn.png) no-repeat center
            center;
        }
        .center-btn {
          background: url(../../assets/images/center-btn.png) no-repeat center
            center;
        }
        .right-btn {
          background: url(../../assets/images/right-btn.png) no-repeat center
            center;
        }
        .btn {
          width: 160px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          background-size: 100% 100%;
          cursor: pointer;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #c20e23;
          opacity: 1;
        }
      }
    }
  }
}
//移动端样式
@media screen and (max-width: 1024px) {
  .mobile-layout {
    width: 100%;
    height: 100%;
    background: #615310;
    background-size: cover;
    overflow: hidden;
    background-clip: 100% 100%;
    .mobile-card {
      width: 100%;
      height: 100%;
      padding: 3vw;
      .mobile-content {
        width: 100%;
        background: url("../../assets/images/mobile-detail-card-bg.png")
          no-repeat center center;
        height: 100%;
        display: flex;
        flex-direction: column;
        .pic {
          width: 100%;
          height: 40%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .txt {
          width: 100%;
          height: 45%;
          padding: 3vw;
          // background: blue;
          .title {
            height: 15%;
            text-align: center;
            font-size: 5vw;
            font-family: Source Han Sans CN;
            font-weight: bold;
            line-height: 10vw;
            color: #fcd67b;
            opacity: 1;
            // margin: 4vw 0;
          }
          .con {
            padding: 3vw;
            height: 85%;
            font-size: 3.5vw;
            font-family: Source Han Sans CN;
            font-weight: 300;
            line-height: 5.5vw;
            color: #ffffff;
            opacity: 1;
            overflow: auto;
          }
        }
        .btns {
          width: 100%;
          height: 15%;
          padding: 6vw;
          display: flex;
          justify-content: space-between;
          .left-btn {
            background: url(../../assets/images/left-btn.png) no-repeat;
          }
          .center-btn {
            background: url(../../assets/images/center-btn.png) no-repeat;
          }
          .right-btn {
            background: url(../../assets/images/right-btn.png) no-repeat;
          }
          .btn {
            width: 32%;
            height: 10vw;
            line-height: 10vw;
            text-align: center;
            background-size: 100% 100%;
            cursor: pointer;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #6a2121;
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>