uniapp APP 初始横屏样式错误，求大佬忙指点一下，十分感谢？

Question

中标题 uniapp中做了一个pad项目，设置了初始横屏，样式错乱，必须竖屏后再切回横屏才正常，求大佬们帮忙解答一下，十分感谢，具体就是样式高度没有占满，宽度和实际也有差别

<template>
  <view class="default-layout" :class="currentDevice">
    <view class="default-layout__tab">
      <view class="circle-breath" :class="formatConnect"></view>

      <view class="tab--list">
        <view
          class="tab--item"
          :class="{ active: item.value === currentTab }"
          v-for="item in tabSetting"
          :key="item.value"
          @click="handleJumpPage(item)">
          <image :src="getTabIcon(item)" mode=""></image>
        </view>
      </view>

      <view class="language--btn" @click="handleLanguageChange()">
        <image src="/src/static/status/language-C.png" mode=""></image>
      </view>
    </view>
    <view class="default-layout__content">
      <slot>
        <!-- <view class="default-message">请选择一个选项以查看详细内容</view> -->
      </slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;
}
.default-layout {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  align-items: flex-start;

  &.mobile {
    .tab--list {
      padding: 22rpx 0rpx !important;
      justify-content: center;
    }
    .tab--item {
      margin: 0rpx !important;
      flex: 1;
      display: flex;
      align-items: center;
    }
  }

  &__tab {
    width: 34rpx;
    height: 100%;
    flex-shrink: 0;
    position: relative;

    .tab--list {
      top: 0;
      left: 0;
      z-index: 9;
      position: absolute;
      width: 46rpx;
      height: 100%;
      display: flex;
      overflow: hidden;
      align-items: center;
      background-color: #fff;
      flex-direction: column;
      justify-content: center;
      border-radius: 0rpx 12rpx 12rpx 0rpx;
      box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(6, 39, 170, 0.1);
    }

    .tab--item {
      margin-bottom: 56rpx;
    }
    .tab--item:last-child {
      margin-bottom: 0rpx;
    }

    img,
    image {
      width: 18rpx;
      height: 18rpx;
    }

    .language--btn {
      img,
      image {
        width: 22rpx;
        height: 22rpx;
      }
      z-index: 9;
      position: absolute;
      bottom: 4rpx;
      left: 11rpx;
    }

    .circle-breath {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      z-index: 10;
      position: absolute;
      top: 12rpx;
      left: 16rpx;
    }
    @keyframes donghuaSuccess {
      0% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0 #69d9b0;
      }
      60% {
        transform: scale(1);
        box-shadow: 0 0 0 10rpx rgba(183, 3, 39, 0%);
      }
      100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0 rgba(183, 3, 39, 0%);
      }
    }

    @keyframes donghuaError {
      0% {
        transform: scale(0.6);
        /* 注意rgba中的a的设置 */
        box-shadow: 0 0 0 0 #b70327;
      }

      60% {
        transform: scale(1);
        box-shadow: 0 0 0 10rpx rgba(183, 3, 39, 0%);
      }

      100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0 gba(183, 3, 39, 0%);
      }
    }
    @keyframes donghuaWarning {
      0% {
        transform: scale(0.6);
        /* 注意rgba中的a的设置 */
        box-shadow: 0 0 0 0 #ffa45c;
      }

      60% {
        transform: scale(1);
        box-shadow: 0 0 0 10rpx rgba(183, 3, 39, 0%);
      }

      100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0 gba(183, 3, 39, 0%);
      }
    }
    .circle-breath.success {
      background: #69d9b0;
      box-shadow: 0 0 0 0 #69d9b0;
      animation: donghuaSuccess 2s infinite;
    }
    .circle-breath.error {
      background: #b70327;
      box-shadow: 0 0 0 0 #b70327;
      animation: donghuaError 2s infinite;
    }
    .circle-breath.warning {
      background: #ffa45c;
      box-shadow: 0 0 0 0 #ffa45c;
      animation: donghuaWarning 2s infinite;
    }
  }

  &__content {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #f1f7f9;

    :deep(.default-container) {
      width: 100%;
      height: 100%;

      > view {
        padding-left: 12rpx;
      }
    }
  }
}
</style>

有在APP.vue中写竖屏转横屏但是设计不想要，也监听过页面高度宽度设置动态，也没有很大作用

Answer 1

可以把屏幕锁定方向 plus.screen.lockOrientation('portrait-primary');