nanhuashi_h5/src/pages/home/index.vue

<template>
  <div class="content">
    <div class="home-img"  id="home-img">
      <div class="homeBg" style="    background-size: auto 930px;
      height: 930px;">
          <div class="list">
            <div
              class="itme"
              :class="{ active: item.id == active }"
              v-for="item in list"
              :style="item.style"
              :key="item.id"
              @click.stop="handleItem(item)"
            >
              <div class="itmeText">{{ item.title }}</div>
              <div class="mypopup" :style="{top: item.title == '宝林道场'?'125px':''}">
                <div class="popupImg">
                  <div class="but">可打卡</div>
                  <img
                    width="209px"
                    height="131px"
                    radius="10"
                    :src="'https://4dscene.4dage.com/new4dkk/deng/static/img/m/cjms.jpg'||item.img"
                  ></img>
                  <div class="title">{{ item.title }}</div>
                </div>
                <div
                  class="flex justify-evenly butList content-center items-center"
                  style="line-height: 24px; color: #fff"
                >
                  <div class="flex justify-around content-center  items-center" @click="handleRoam">
                    <img src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_3d@2x.png" />
                    漫游
                  </div>
                  <!-- <div class="border"></div>
                  <div class="flex justify-around content-center  items-center">
                    <img src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_navigator@2x.png" />
                    导航
                  </div> -->
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <tabbar />
    <!-- <div class="fixed bottom-40 flex w-full justify-around" style="">
      <div class="text-center">
        点亮祈福
        <u-icon
          class="text-center flex-col-reverse"
          name="scan"
          color="#2979ff"
          size="28"
        ></u-icon>
      </div>

      <div class="text-center">
        扫码打卡
        <u-icon
          class="text-center flex-col-reverse"
          name="scan"
          color="#2979ff"
          size="28"
        ></u-icon>
      </div>
    </div> -->
    <!-- <tabbar></tabbar> -->
    <!-- <van-popup
      closeIconPos="bottom-right"
      :show="show"
      mode="center"
      round="10"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <div>
        <div class="text">
          <img
            src="https://4dscene.4dage.com/new4dkk/v2/lang/images/solutions/government/survey1.png"
          ></img>
          <text mt-10>出淤泥而不染，濯清涟而不妖</text>
        </div>
        <div class="butList flex justify-around my-10">
          <u-button
            @click="handleRoam"
            style="width: 60px"
            type="primary"
            plain
            icon="car"
            size="small"
            shape="circle"
            text="漫游"
          ></u-button>
          <u-button
            @click="handleMap"
            style="width: 60px"
            type="primary"
            plain
            icon="map"
            size="small"
            shape="circle"
            text="祈愿地图"
          ></u-button>
          <u-button
            style="width: 60px"
            type="primary"
            plain
            icon="map"
            size="small"
            shape="circle"
            text="导航"
          ></u-button>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>

<script>
import tabbar from "@/components/tabbar/index.vue";
import { Toast } from 'vant';
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      title: 'Hello',
      show: false,
      codeList: [],
      active: null,
      list: [
        {
          id: 1,
          title: '大雄宝殿',
          m: 'SG-PHP2F5mD35e',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/02.png',
          style: {
            left: '315px',
            top: '326px',
          }
        },{
          id: 8,
          title: '灵照塔',
          m: 'SG-PHP2F5mD35e',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/02.png',
          style: {
            left: '373px',
            top: '260px',
          }
        },
        {
          id: 2,
          title: '宝林道场',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/01.png',
          m: 'SG-OMcbiNUQwPE',
          style: {
            left: '355px',
            top: '114px'
          }
        },
        {
          id: 3,
          title: '琉璃光如来',
          m: 'SG-E3S63H7X7QI',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/03.png',
          style: {
            left: '317px',
            top: '570px'
          }
        },
        {
          id: 4,
          title: '祈福长廊',
          m: 'SG-7uj9R1IZNsp',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/05.png',
          style: {
            left: '354px',
            top: '660px'
          }
        },
        {
          id: 5,
          title: '典藏罗汉像',
          m: 'SG-zlWvkf1WATJ',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/06.png',
          style: {
            left: '349px',
            top: '455px'
          }
        },
        // {
        //   id: 6,
        //   title: '宝林道场',
        //   img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/07.png',
        //   m: 'SG-QHk73u8zRxD',
        //   style: {}
        // },
        {
          id: 7,
          title: '文化长廊',
          m: 'SG-w51bY2f2Ojj',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/11.png',
          style: {
            left: '531px',
            top: '467px',
          }
        },
        {
          id: 9,
          title: '一花五叶',
          m: 'SG-w51bY2f2Ojj',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/11.png',
          style: {    
            left: '353px',
            top: '798px'
          }
        },
        {
          id: 10,
          title: '智药三藏寻源',
          m: 'SG-w51bY2f2Ojj',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/m/11.png',
          style: {    
            left: '323px',
            top: '750px',
            height: '145px',
            paddingTop: '10px'
          }
        },
      ]
    }
  },
  onLoad() {},
  created() {
    this.getRequest('/api/wx/getCode').then((res) => {
      this.codeList = res.data || []
    })
  },
  mounted() {
    // document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
    document.getElementById('home-img').scrollLeft=150;//通过scrollTop设置滚动到200位置
  },
  methods: {
    handleMap() {
      // uni.$u.route("/pages/home/map");
    },
    handleRoam() {
      Toast('功能开发中~');
      // uni.$u.route("/pages/home/roam");
    },
    handleItem(item) {
      // Toast('功能开发中~');
      this.active = item.id
    },
    close() {
      this.show = false
      // console.log('close');
    },
    open() {},
    handleDaka(param) {
      this.getRequest('/api/wx/clockIn', {code: param.m}).then((res) => {
        Toast('打卡成功');
        this.codeList.push(param.m)
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.home-img {
  width: 100vw;
  height: 859px;
  overflow-x: scroll;
  overflow-y: scroll;
  // position: absolute;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  .homeBg {
    width: 200.33333vw;
    background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/homeBg.jpg);
    background-size: 900px 930px;
    height: 930px;
    background-repeat: no-repeat;
    position: relative;
    .list {
      width: 100%;
      height: 100%;
      .itme {
        background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/tab_normal1@2x.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        // border-radius: 50%;
        text-align: center;
        line-height: 30px;
        width: 27px;
        height: 108px;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        // color: #5B472E;
        line-height: 17px;
        text-align: center;
        // letter-spacing: 10px;
        // vertical-align: middle;
        .bg {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: -1;
        }
        .itmeText {
          writing-mode: vertical-rl;
          position: relative;
          left: 5px;
          top: 22px;
          // letter-spacing: normal;
          // display: table-cell;
          // vertical-align: middle;
        }
        .mypopup {
          display: none;
          width: 230px;
          height: 162px;
          position: absolute;
          bottom: 108px;
          background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop3@2x.png) 100% 100% no-repeat;
          background-size: 100%;
          // background: linear-gradient(158deg, rgba(193, 149, 97, 0.85) 0%, #5b472e 100%);
          // border: 1px solid;
          left: -95px;
          border-radius: 15px;
          z-index: 10;
          .popupImg {
            letter-spacing: 0;
            width: 209px;
            height: 131px;
            margin: 0 auto;
            position: relative;
            top: -10px;
            border-radius: 10px;
            overflow: hidden;
            .title {
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              line-height: 16px;
              text-align: center;
              position: absolute;
              bottom: 10px;
              left: 20px;
            }
            img {
              width: 100%;
              height: 131px;
              object-fit: cover;
              border-radius: 10px;
            }
            .but {
              width: 63px;
              height: 25px;
              position: absolute;
              right: 10px;
              top: 10px;
              border-radius: 20px 20px 20px 20px;
              border: 1px solid #fff9b6;
              text-align: center;
              color: #fff9b6;
              line-height: 25px;
              font-weight: 400;
              font-size: 12px;
              color: #fff9b6;
              z-index: 1;
            }
          }
          .butList {
            .border {
              width: 1px;
              height: 26px;
              border-radius: 0px 0px 0px 0px;
              border-left: 1px solid;
              border-image: linear-gradient(
                  180deg,
                  rgba(255, 255, 255, 0),
                  rgba(255, 255, 255, 1),
                  rgba(255, 255, 255, 0)
                )
                1 1;
            }
            img {
              width: 24px;
              height: 24px;
            }
          }
        }
      }
      .active {
        background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/tab_active@2x.png);
        color: #5b472e;
        .mypopup {
          display: block;
        }
      }
    }
    .img {
      height: calc(100vh - 81px);
      position: relative;
      z-index: -1;
      overflow-x: auto;
      width: 700px;
      img {
        height: 100%;
        position: relative;
        z-index: -1;
      }
    }
  }
}
</style>