mbti_uniapp/pages/home/home.vue

<template>
  <view class="content-bottom page-wrap">
    <view class="share-wrap">
      <button open-type="share">
        <view class="share-btn">邀请好友测试</view>
      </button>
    </view>
    <!-- MBTI职业性格测试 -->
    <view class="text">
      <view class="fk"></view>
      <view class="title">
        <text>MBTI职业性格测试</text>
      </view>
    </view>

    <view class="nav mt20">
      <view class="bus box-shadow">
        <view class="img">
          <image src="/static/imgs/mbti1.jpg"></image>
        </view>
        <view class="con">
          <view class="name">简洁版【28道】</view>
          <view class="price">免费</view>
          <button class="btn" type="button" @click="career">立即测试</button>
        </view>
      </view>
    </view>

    <view class="nav mt60">
      <view class="bus box-shadow">
        <view class="img">
          <image src="/static/imgs/mbti2.jpg"></image>
        </view>
        <view class="con">
          <view class="name">完整版【70道】</view>
          <view class="price">免费</view>
          <button class="btn" type="button" @click="career70">立即测试</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  components: {},
  data() {
    return {
      appName: app.globalData.$appInfo.appName,
      pageContentTop: app.globalData.pageContentTop,
    };
  },
  onLoad() {
    app.handleSetNavTitle();
  },
  onShow() {},
  onPullDownRefresh() {},
  onReachBottom() {},
  onShareAppMessage(res) {
    // 如果要自定义分享内容，可以设置shareTicket和query参数
    return {
      title: "免费MBTI人格测试bot，快来试试吧～",
      path: "/pages/home/home",
      desc: "免费MBTI人格测试bot，快来试试吧～",
      imageUrl: '/static/imgs/mbti1.jpg',
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  methods: {
    career(re) {
      uni.navigateTo({
        url: "/pages/career/career",
      });
    },
    career70(re) {
      uni.navigateTo({
        url: "/pages/career70/career70",
      });
    },
    Holland(re) {
      uni.navigateTo({
        url: "/pages/Holland/Holland",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* MBTI职业性格测试 */
.content-bottom {
  min-height: 100vh;
  background-color: #ECF0F3;
}

.fk {
  height: 80rpx;
  width: 16rpx;
  background: linear-gradient(90deg, #FF9048 0%, #fd6a68 100%);
  margin: 20rpx 40rpx;
}

.text {
  display: flex;
  color: #5c616e;
  flex-direction: row;
  /* justify-content: center;左右居中 */
  align-items: center;
  /* 上下居中 */
  position: relative;
  /* border: red solid 1rpx; */
}

.title {
  width: 100%;
  font-weight: bolder;
  font-size: 40rpx;
}

.bus {
  padding-left: 30rpx;
  width: 95%;
  height: 240rpx;
  display: flex;
  justify-content: space-around;
  // border: solid #f65532 2rpx;
  margin: auto auto 16rpx;
  border-radius: 12rpx;
  align-items: center;
}

.bus .img {
  width: 40%;
  height: 80%;
  border: rgb(138, 138, 138) solid 2rpx;
}

.bus .con {
  /* border: red solid 1rpx; */
  width: 60%;
  height: 80%;
  /* 相对定位 */
  position: relative;
  overflow: hidden;
}

.bus image {
  width: 100%;
  height: 100%;
}

.con .name {
  font-size: 32rpx;
  margin-top: 4rpx;
  font-weight: bold;
  padding-left: 40rpx;
  padding-top: 16rpx;
  opacity: 0.8;
}

.con .price {
  margin-top: 60rpx;
  font-size: 24rpx;
  padding-left: 40rpx;
  color: #fc9834;
  margin-bottom: 20rpx;
}

.con .btn {
  width: 36%;
  color: #ffffff;
  background: linear-gradient(90deg, #FF9048 0%, #fd6a68 100%);
  font-size: 24rpx;
  padding: 10rpx 14rpx 10rpx 14rpx;
  display: inline;
  border-radius: 20rpx;
  position: absolute;
  right: 28rpx;
  bottom: 24rpx;
}

/* 分割线 */
.fgx {
  border: 20rpx #f2f2f2 solid;
  margin-top: 30rpx;
}
.mt20 {
  margin-top: 20rpx;
}
.mt60 {
  margin-top: 60rpx;
}
.page-wrap {
  .share-wrap {
    button::after {
      border: none;
    }
    button {
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0px;
      padding-right: 0px;
      box-sizing: border-box;
      text-align: center;
      text-decoration: none;
      line-height: 1.35;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
      color: #000;
      font-size: 32rpx;
      background-color: #fff;
      width: 100%;
      height: 100%;
    }
    .share-btn {
      padding: 15rpx 10rpx;
      background: linear-gradient(90deg, #FF9048 0%, #fd6a68 100%);
      color: #fff;
      font-weight: 600;
      font-size: 26rpx;
      position: fixed;
      right: 0;
      bottom: 20%;
      border-radius: 40rpx 0 0 40rpx;
    }
  }
}
.box-shadow {
      background-color: #fff;
            border-radius: 20px;
            box-shadow:
              inset rgba(0, 0, 0, 0.1) 0 5rpx 12rpx,
              inset rgba(252, 255, 255, 0.5) 0 5rpx 12rpx,
              rgba(0, 0, 0, 0.2) 0 5rpx 12rpx -5rpx;
    }
</style>