CjyTravel/subPageA/scenic/gonglve/gonglve.vue

<template>
  <div class="m-content">
    <view class="top-nav">
      <view
        @click="scrollToPosition(1)"
        :class="['nav-item', choose == 1 ? 'active' : '']"
        >实用服务</view
      >
      <view
        @click="scrollToPosition(2)"
        :class="['nav-item', choose == 2 ? 'active' : '']"
        >景点简介</view
      >
    </view>
    <scroll-view
      class="scrol-box"
      scroll-y="true"
      :scroll-into-view="scrollIntoView"
      style="height: 100vh"
    >
      <view id="position1">
        <view class="m-card">
          <view class="m-title"> 实用服务 </view>
          <view class="m-content">
            <view class="m-row">
              <view class="m-mi-title time"> 开放时间</view>
              <view class="m-mi-content">{{ data.playtime || "暂无信息" }}</view>
            </view>
            <view class="m-row">
              <view class="m-mi-title tel"> 景区热线</view>
              <view class="m-mi-content">{{ data.smobile || "暂无信息" }}</view>
            </view>
            <view class="m-row">
              <view class="m-mi-title yhzc"> 优惠政策</view>
              <u-parse class="m-mi-content" :content="data.tips || '暂无信息'" />
            </view>
          </view>
        </view>
      </view>
      <view id="position2">
        <view class="m-card">
          <view class="m-title"> 景点简介 </view>
          <view class="m-content">
            <u-parse :content="data.sdescribe || '暂无信息'" />
          </view>
        </view>
      </view>
    </scroll-view>
  </div>
</template>

<script>
import uParse from "../../components/gaoyia-parse/parse.vue";

export default {
  components: {
    uParse,
  },
  data() {
    return {
      choose: 1,
      scrollIntoView: "",
      data: {},
    };
  },
  computed: {},
  methods: {
    scrollToPosition(val) {
      this.choose = val;
      // 这里假设你要滚动到位置2
      if (val == 1) {
        this.scrollIntoView = "position1";
      }
      if (val == 2) {
        this.scrollIntoView = "position2";
      }
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(option) {
    console.log(option.data);
    this.data = JSON.parse(decodeURIComponent(option.data));
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.m-content {
  background-color: #fff;
  padding: 25rpx 0;

  .top-nav {
    background-color: #F5F5F5;
    width: 100%;
    display: flex;
    padding: 20rpx 0 5rpx;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    z-index: 9;
    box-shadow: 0px 4px 12px 0px #e0e0e0;

    .nav-item {
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #1b1b1b;
      padding-bottom: 10rpx;
      position: relative;

      &::before {
        content: "";
        width: 50rpx;
        height: 6rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 3rpx;
      }
    }
    .nav-item.active::before {
      background: linear-gradient(-90deg, #0983ff, #57abff);
    }
  }

  .scrol-box {
    margin-top: 65rpx;

    #position1 {
      .m-content {
        .m-row {
          display: flex;
          flex-direction: column;
          margin-bottom: 20rpx;

          .m-mi-title {
            font-family: Source Han Sans SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #1b1b1b;
            position: relative;
            padding-left: 40rpx;

            &::after {
              content: "";
              width: 32rpx;
              height: 32rpx;
              position: absolute;
              left: 5rpx;
              top: 50%;
              transform: translateY(-50%);
              background-position: center;
              background-repeat: no-repeat;
              background-size: contain;
            }
          }
          .time::after {
            background-image: url(../../animg/time_ico.png);
          }
          .tel::after {
            background-image: url(../../animg/tel_ico.png);
          }
          .yhzc::after {
            background-image: url(../../animg/san_ico.png);
          }
          .m-mi-content {
            padding-left: 40rpx;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            margin-top: 5rpx;
          }
        }
      }
    }
  }

  .m-card {
    padding: 0 40rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    .m-title {
      width: fit-content;
      position: relative;
      padding-left: 40rpx;
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 40rpx;
      color: #1b1b1b;

      &::after {
        content: "";
        width: 30rpx;
        height: 20rpx;
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
        background-image: url(../../animg/mini_ico.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>