适配刘海屏

src/components/BigImgCell/index.vue

@@ -14,8 +14,8 @@
     </template>
     <view class="tag-row">
         <view class="demo-uni-col dark tag-list">
-          <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+          <uni-tag text="标签" class="game-tag" inverted="true" type="warning"></uni-tag>
-          <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+          <uni-tag text="标签" class="game-tag" inverted="true" type="warning"></uni-tag>
         </view>
     </view>
     <view class="demo-uni-row price-row">
@@ -175,4 +175,7 @@ uni-tag {
 .uni-card__content {
   padding-top: 5px;
 }
+.game-tag text {
+  padding: 2px 5px!important;
+}
 </style>

src/pages/index/index.vue

@@ -1,5 +1,8 @@
 <template>
   <view class="container">
+    <view class="status_bar">
+      <!-- 这里是状态栏 -->
+    </view>
     <uni-list>
       <uni-list-item v-for="item in games" >
         <big-img-cell :g-data="item" v-on:cellClicked = 'onClick'></big-img-cell>
@@ -25,6 +28,7 @@ export default class extends Vue{
   private games: IGameInfo[] = []
 
   onLoad() {
+    console.log(uni.getSystemInfoSync().statusBarHeight)
     for (let i = 0; i < 10; i++) {
       this.games.push({
         gameId: i + '',
@@ -52,15 +56,16 @@ export default class extends Vue{
 </script>
 
 <style>
-.container {
-  overflow: hidden;
-}
 big-img-cell {
   width: 100%;
 }
 .uni-list-item-box {
   padding: 0!important;
 }
+.status_bar {
+  height: var(--status-bar-height);
+  width: 100%;
+}
 
 
 </style>

src/pages/info/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <navigator class="nav-bar" open-type="navigateBack">
+    <navigator class="nav-bar" :style="{ top: iStatusBarHeight + 'px'}" open-type="navigateBack">
       <uni-icons type="left" size="30"></uni-icons>
     </navigator>
     <!-- 幻灯 -->
@@ -9,7 +9,7 @@
       <uni-title type ="h1" title="游戏中文名"></uni-title>
       <uni-title type="h2"  title="游戏E文名"></uni-title>
       <view class="tag-list">
-        <uni-tag v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
+        <uni-tag v-for="tag in tagList" class="game-tag" :text="tag" inverted="true" type="error"></uni-tag>
       </view>
       <view class="info-content">
         <text>
@@ -58,8 +58,10 @@ export default class extends Vue{
   private tagList: string[] = ['fc', 'nb']
   private priceList: string[] = ['1', '2', '3']
   private dlcList: string[] = ['1', '2', '3']
+  private iStatusBarHeight = 0
 
   onLoad() {
+    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
     for (let i = 0; i< 4 ;i ++) {
       this.imgSwiperData.push('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg')
     }
@@ -128,4 +130,7 @@ price-cell {
 dlc-cell {
   width: 100%;
 }
+.game-tag text {
+  padding: 2px 5px!important;
+}
 </style>