nanhuashi_applet/pages/home/home.vue

<template>
  <view class="content">
    <view class="home-img">
      <div class="homeBg">
        <scroll-view :scroll-x="true" class="scrollview-box">
          <div class="img">
            <u--image
              height="calc(100vh - 71px)"
              width="700px"
              mode="heightFix"
              src="/static/img/homeBg.jpg"
            ></u--image>
          </div>
          <div class="list">
            <view
              class="itme"
              :class="{ active: item.id == active }"
              v-for="item in list"
              :key="item.id"
              @click.stop="handleItem(item)"
            >
              <img
                class="bg"
                v-if="item.id == active"
                src="/static/img/tab_active@2x.png"
                alt=""
              />
              <img
                class="bg"
                v-else
                src="/static/img/tab_normal@2x.png"
                alt=""
              />
              <div class="itmeText">{{ item.title }}</div>
              <div class="mypopup">
                <div class="popupImg">
                  <div class="but">可打卡</div>
                  <u--image
                    width="209px"
                    height="131px"
                    radius="10"
                    src="https://4dkk.4dage.com/head/15915816041/head_1722399456050.png"
                  ></u--image>
                  <div class="title">{{ item.title }}</div>
                </div>
                <div
                  class="flex justify-evenly butList content-center"
                  style="line-height: 24px; color: #fff"
                >
                  <div class="flex justify-around content-center" @click="handleRoam">
                    <img src="/static/img/icon_dollhouse_normal@2x.png" />
                    漫游
                  </div>
                  <div class="border"></div>
                  <div class="flex justify-around content-center">
                    <img src="/static/img/icon_dollhouse_normal@2x.png" />
                    导航
                  </div>
                </div>
              </div>
            </view>
          </div>
        </scroll-view>
        <!-- <div >
        </div> -->
      </div>
    </view>
    <!-- <view class="fixed bottom-40 flex w-full justify-around" style="">
      <view class="text-center">
        点亮祈福
        <u-icon
          class="text-center flex-col-reverse"
          name="scan"
          color="#2979ff"
          size="28"
        ></u-icon>
      </view>

      <view class="text-center">
        扫码打卡
        <u-icon
          class="text-center flex-col-reverse"
          name="scan"
          color="#2979ff"
          size="28"
        ></u-icon>
      </view>
    </view> -->
    <tabbar></tabbar>
    <u-popup
      closeIconPos="bottom-right"
      :show="show"
      mode="center"
      round="10"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view>
        <view class="text">
          <u--image
            src="https://4dscene.4dage.com/new4dkk/v2/lang/images/solutions/government/survey1.png"
          ></u--image>
          <text mt-10>出淤泥而不染，濯清涟而不妖</text>
        </view>
        <view 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>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import tabbar from "components/tabbar/index.vue";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      title: "Hello",
      show: false,
      active: null,
      list: [
        {
          id: 1,
          title: "大雄宝殿",
          style: {},
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    handleMap() {
      uni.$u.route("/pages/home/map");
    },
    handleRoam() {
      uni.$u.route("/pages/home/roam");
    },
    handleItem(item) {
      this.active = item.id;
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    open() {},
  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  .right {
    position: fixed;
    left: 20px;
    top: 20px;
  }
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
  padding-bottom: 50%;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.home-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .homeBg {
    .scrollview-box {
      white-space: nowrap; // 滚动必须加的属性
      width: 100%;
    }

    .list {
      .itme {
        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: 18px;
          top: 22px;
          // letter-spacing: normal;
          // display: table-cell;
          // vertical-align: middle;
        }
        .mypopup {
          display: none;
          width: 230px;
          height: 162px;
          position: absolute;
          bottom: 108px;
          background: linear-gradient(
            158deg,
            rgba(193, 149, 97, 0.85) 0%,
            #5b472e 100%
          );
          border: 1px solid;
          left: -95px;
          border-radius: 15px;
          .popupImg {
            letter-spacing: 0;
            width: 209px;
            height: 131px;
            padding: 0 9px;
            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;
            }
            .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 {
        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;
      }
    }
  }
}
.u-popup__content__close {
  right: calc(50% - 4.5px) !important;
  bottom: -40px !important;
  z-index: 10;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 5px;
  color: #fff;
  .u-icon__icon {
    color: #fff !important;
  }
}
</style>