Merge branch 'dev' of https://gitcode.net/dcloud/hello-uni-app-x into dev

AndroidManifest.xml

 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"  package="io.dcloud.hellouniappx">
 
-    <application>
+  <!-- 读取日历权限，用于演示权限申请监听API：uni.createRequestPermissionListener -->
+  <uses-permission android:name="android.permission.READ_CALENDAR"/>
 
-    </application>
+  <application>
 
+  </application>
 
-</manifest>
\ No newline at end of file
+
+</manifest>

components/enum-data/enum-data.vue

@@ -45,7 +45,7 @@
   <view class="uni-list uni-common-pl">
     <radio-group @change="_change">
       <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.name"
-        :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value">
+        :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value + ''">
         {{ item.name }}
       </radio>
     </radio-group>

manifest.json

@@ -2,43 +2,36 @@
   "name": "hello-uniapp x",
   "appid": "__UNI__3584C99",
   "description": "",
-  "versionName": "1.0.16",
-  "versionCode": "10016",
-  "uni-app-x":
-  {
-  },
-    /* 快应用特有相关 */
-  "quickapp":
-  {
-  },
-    /* 小程序特有相关 */
-  "mp-weixin":
-  {
+  "versionName": "1.0.18",
+  "versionCode": "10018",
+  "uni-app-x": {},
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
     "appid": "",
-    "setting":
-    {
+    "setting": {
       "urlCheck": false
     },
     "usingComponents": true
   },
-  "mp-alipay":
-  {
+  "mp-alipay": {
     "usingComponents": true
   },
-  "mp-baidu":
-  {
+  "mp-baidu": {
     "usingComponents": true
   },
-  "mp-toutiao":
-  {
+  "mp-toutiao": {
     "usingComponents": true
   },
-  "uniStatistics":
-  {
+  "uniStatistics": {
     "enable": false
   },
-  "app":
-  {
-  },
-  "vueVersion": "3"
-}
\ No newline at end of file
+  "app": {},
+  "vueVersion": "3",
+  "h5": {
+    "router": {
+      "base": "/web/"
+    }
+  }
+}

pages.json

@@ -63,6 +63,12 @@
         "navigationBarTitleText": "list-view-multiplex"
       }
     },
+    {
+      "path": "pages/component/list-view/list-view-multiplex-video",
+      "style": {
+        "navigationBarTitleText": "list-view-multiplex-video"
+      }
+    },
     {
       "path": "pages/component/sticky-section/sticky-section",
       "style": {

pages/API/create-request-permission-listener/create-request-permission-listener.uvue

@@ -4,8 +4,8 @@
   <!-- #endif -->
     <page-head title="权限申请监听"></page-head>
     <view class="permission-alert" id="permission-alert" :style="{'transform':isPermissionAlertShow ? 'translateY(0)':'translateY(-110px)'}">
-      <text style="font-size: 20px;margin-bottom: 10px;margin-top: 5px;">日历权限申请说明：</text>
-      <text style="color: darkgray;">uni-app x正在申请日历权限，允许或拒绝均不会获取任何隐私信息。</text>
+      <text style="font-size: 20px;margin-bottom: 10px;margin-top: 5px;">访问日历权限申请说明：</text>
+      <text style="color: darkgray;">uni-app x正在申请访问日历权限用于演示，允许或拒绝均不会获取任何隐私信息。</text>
     </view>
     <button type="primary" style="margin: 10px;" @click="requestPermission">点击申请日历权限</button>
 

pages/API/navigator/new-page/onLoad.test.js

@@ -72,7 +72,6 @@ describe("onLoad", () => {
       failureThreshold: 0.05,
       failureThresholdType: "percent",
     });
-    await program.callUniMethod('hideToast')
   });
   it("showLoading", async () => {
     page = await program.reLaunch(INTERMEDIATE_PAGE_PATH);
@@ -91,7 +90,6 @@ describe("onLoad", () => {
       failureThreshold: 0.05,
       failureThresholdType: "percent",
     });
-    await program.callUniMethod('hideLoading')
   });
   it("showModal", async () => {
     page = await program.reLaunch(INTERMEDIATE_PAGE_PATH);

pages/component/button/button.test.js

@@ -56,19 +56,25 @@ describe('Button.uvue', () => {
     expect(await btn.property('size')).toBe('mini')
   })
   it('plain', async () => {
-    const btn = await page.$('.btn')
-    expect(await btn.property('plain')).toBe(false)
+    const btn = await page.$('.btn')
+    // TODO
+    const newValue1 = await btn.property('plain')
+    expect(newValue1.toString()).toBe(false + '')
     await page.setData({
       plain_boolean: true,
-    })
-    expect(await btn.property('plain')).toBe(true)
+    })
+    const newValue2 = await btn.property('plain')
+    expect(newValue2.toString()).toBe(true + '')
   })
   it('disabled', async () => {
-    const btn = await page.$('.btn')
-    expect(await btn.property('disabled')).toBe(false)
+    const btn = await page.$('.btn')
+    // TODO
+    const newValue1 = await btn.property('disabled')
+    expect(newValue1.toString()).toBe(false + '')
     await page.setData({
       disabled_boolean: true,
-    })
-    expect(await btn.property('disabled')).toBe(true)
+    })
+    const newValue2 = await btn.property('disabled')
+    expect(newValue2.toString()).toBe(true + '')
   })
 })

pages/component/checkbox/checkbox.test.js

@@ -42,11 +42,15 @@ describe('Checkbox.uvue', () => {
   })
   it('checked', async () => {
     const cb = await page.$('.cb')
-    expect(await cb.property('checked')).toBe(true)
+    // TODO
+    const newValue1 = await cb.property('checked')
+    expect(newValue1.toString()).toBe(true + '')
     await page.setData({
       checked: false,
     })
-    expect(await cb.property('checked')).toBe(false)
+    // TODO
+    const newValue2 = await cb.property('checked')
+    expect(newValue2.toString()).toBe(false + '')
   })
   it('color', async () => {
     const cb = await page.$('.cb')

pages/component/list-view/list-view-multiplex-video.uvue

+<template>
+  <list-view class="list">
+    <list-item class="list-item" v-for="(_,index) in 20">
+      <text>第{{index + 1}}个视频</text>
+      <video class="video" :src="src" :controls="true" @pause="onPause"></video>
+    </list-item>
+  </list-view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4'
+      }
+    },
+    methods: {
+      onPause(e : UniEvent) {
+        console.log(JSON.stringify(e));
+      }
+    }
+  }
+</script>
+
+<style>
+  .list {
+    flex: 1;
+  }
+
+  .list-item {
+    background-color: white;
+    margin-bottom: 30px;
+  }
+
+  .video {
+    width: 100%;
+    height: 200px;
+  }
+</style>

pages/component/list-view/list-view.uvue

@@ -193,6 +193,11 @@
           list-view 复用测试（item中嵌入input）
         </button>
       </navigator>
+      <navigator url="/pages/component/list-view/list-view-multiplex-video" hover-class="none">
+        <button type="primary" class="button">
+          list-view 复用测试（item中嵌入video）
+        </button>
+      </navigator>
     </view>
   </scroll-view>
 </template>

pages/component/picker-view/picker-view.test.js

@@ -15,15 +15,19 @@ describe('PickerView.uvue', () => {
   it('value', async () => {
     const el = await page.$('.picker-view')
     await page.callMethod('setValue')
-    await page.waitFor(1000)
-    expect(await el.property('value')).toEqual([0, 0, 0])
+    await page.waitFor(1000)
+    const newValue1 = await el.property('value')
+    // TODO
+    expect(newValue1.toString()).toEqual('0,0,0')
     if (process.env.UNI_PLATFORM === 'app-android') {
       expect(await getData('result')).toEqual([0, 0, 0])
     }
 
     await page.callMethod('setValue1')
-    await page.waitFor(1000)
-    expect(await el.property('value')).toEqual([10, 10, 10])
+    await page.waitFor(1000)
+    const newValue2 = await el.property('value')
+    // TODO
+    expect(newValue2.toString()).toEqual('10,10,10')
     if (process.env.UNI_PLATFORM === 'app-android') {
       expect(await getData('result')).toEqual([10, 10, 10])
     }

pages/component/radio/radio.test.js

@@ -40,11 +40,14 @@ describe('Radio.uvue', () => {
   })
   it('checked', async () => {
     const radio = await page.$('.r')
-    expect(await radio.property('checked')).toBe(true)
+    // TODO
+    const newValue1 = await radio.property('checked')
+    expect(newValue1.toString()).toBe(true + '')
     await page.setData({
       checked: false,
     })
-    expect(await radio.property('checked')).toBe(false)
+    const newValue2 = await radio.property('checked')
+    expect(newValue2.toString()).toBe(false + '')
   })
   it('color', async () => {
     const radio = await page.$('.r')

pages/component/slider-100/slider-100.test.js

@@ -15,7 +15,9 @@ describe('slider', () => {
 
     // TODO 暂时仅获取第一个
     const slider1 = await page.$('.slider')
-    expect(await slider1.property('value')).toBe(sliderValue)
+    // TODO
+    const newValue = await slider1.property('value')
+    expect(newValue.toString()).toBe(sliderValue + '')
 
     // const slider100 = await page.$$('.slider')
     // for (let i = 0; i < slider100.length; i++) {

pages/component/slider/slider.test.js

@@ -15,7 +15,9 @@ describe('slider', () => {
       sliderValue: sliderValue,
     })
     await page.waitFor(100)
-    expect(await slider.property('value')).toBe(sliderValue)
+    // TODO
+    const newValue = await slider.property('value')
+    expect(newValue.toString()).toBe(sliderValue + '')
   })
   it('color', async () => {
     const slider = await page.$('.slider-custom-color-and-size')

pages/component/switch/switch.test.js

@@ -29,13 +29,17 @@ describe('switch', () => {
       checked: false,
     })
     await page.waitFor(100)
-    expect(await switch_element.property('checked')).toBe(false)
+    // TODO
+    const newValue1 = await switch_element.property('checked')
+    expect(newValue1.toString()).toBe(false + '')
 
     await page.setData({
       checked: true,
     })
     await page.waitFor(100)
-    expect(await switch_element.property('checked')).toBe(true)
+    // TODO
+    const newValue2 = await switch_element.property('checked')
+    expect(newValue2.toString()).toBe(true + '')
   })
   it('color', async () => {
     const switch_element = await page.$('.switch-color')

pages/template/browser-canvas/browser-canvas.uvue

@@ -13,13 +13,13 @@
     data() {
       return {
         title: '浏览器 canvas',
-        drawing: null as UniElement | null,
+        drawing: null as HTMLElement | null,
         canvasElement: null as HTMLCanvasElement | null,
         canvasContext: null as CanvasRenderingContext2D | null,
       }
     },
     onReady() {
-      this.drawing = this.$refs['drawing'] as UniElement;
+      this.drawing = this.$refs['drawing'] as HTMLElement;
       this.canvasElement = document.createElement('canvas') as HTMLCanvasElement;
       this.canvasElement.className = 'canvas'
       this.drawing!.appendChild(this.canvasElement)

pages/template/drop-card/card/card.uvue

@@ -21,7 +21,7 @@
   export default {
     data() {
       return {
-        $elementMap: new Map<string, Element>(),
+        $elementMap: new Map<string, UniElement>(),
         x: 0 as number,
         y: 0 as number,
         // 飘走的卡片计数
@@ -88,7 +88,7 @@
         } else {
           // console.log('直接拿');
         }
-        element?.style?.setProperty(propertyName, propertyStyle);
+        element.style.setProperty(propertyName, propertyStyle);
       },
       touchstart(e : TouchEvent) {
         // console.log('touchstart')

pages/template/half-screen/half-screen.uvue

@@ -78,7 +78,9 @@
             this.halfOffset = offset;
           }
         }
-        e.preventDefault();
+        // #ifdef WEB
+        e.preventDefault();
+        // #endif
       },
       onHalfTouchEnd(_ : TouchEvent) {
         this.halfScreenY = 0;

pages/template/pull-zoom-image/pull-zoom-image.uvue

@@ -38,7 +38,7 @@
   export default {
     data() {
       return {
-        $elementMap: new Map<string, Element>()
+        $elementMap: new Map<string, UniElement>()
       }
     },
     methods: {
@@ -64,10 +64,10 @@
       },
       // 工具方法，用于快速设置 Element 的 style
       setElementStyle(refName : string, propertyName : string, propertyStyle : any) : void {
-        let element : Element | null = (this.$data['$elementMap'] as Map<string, Element>).get(refName)
+        let element : UniElement | null = (this.$data['$elementMap'] as Map<string, UniElement>).get(refName)
         if (element == null) {
           element = this.$refs[refName] as UniElement;
-          (this.$data['$elementMap'] as Map<string, Element>).set(refName, element)
+          (this.$data['$elementMap'] as Map<string, UniElement>).set(refName, element)
         }
         element.style.setProperty(propertyName, propertyStyle);
       },

pages/template/scroll-fold-nav/scroll-fold-nav.uvue

-<template>
-  <scroll-view @scroll="onScroll" class="scroll-view" rebound="false">
-    <!--#ifdef APP-->
-    <view class="height-seat" style="height: 125px;">
-      <!-- 垫高专用 -->
-    </view>
-    <!--#endif-->
-    <!--#ifdef WEB-->
-    <view class="height-seat" style="height: 90px;">
-      <!-- 垫高专用 -->
-    </view>
-    <!--#endif-->
+<template>
+  <scroll-view @scroll="onScroll" class="page" show-scrollbar="false">
+    <view ref="seatbar" class="seatbar"></view>
 
     <view class="content">
       <view class="content-item">
@@ -23,197 +14,161 @@
       </view>
     </view>
 
-    <view ref="top-box" class="top-box">
-      <view ref="scroll-fold-nav" class="scroll-fold-nav">
-        <view class="nav-title">DCloud 为开发者而生</view>
-      </view>
-      <view @click="back" class="nav-back">
-        <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
-      </view>
-      <view ref="search" class="search" @click="toSearchPage">
-        <view class="search-inner">
-          <image class="search-img" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
-          <text class="search-tip-text">请输入你要搜索的内容</text>
+    <view ref="navigatorbar" class="navigatorbar">
+      <view class="titlebar">
+        <view class="backview" @tap="back">
+          <image class="back" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
         </view>
-        <text class="search-btn">搜索</text>
+        <text ref="title" class="title">DCloud 为开发者而生</text>
       </view>
-    </view>
-
-  </scroll-view>
-</template>
-
+      <view ref="searchbar" class="searchbar" @tap="search">
+        <image class="searchimg" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
+        <text class="searchinput">请输入你要搜索的内容</text>
+        <text class="searchbutton">搜索</text>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
 <script>
-  export default {
-    data() {
+  //导航栏高度
+  const NAVIBARHEIGHT = 88;
+  //搜索栏高度
+  const SEARCHBARHEIGHT = 40;
+  //返回键按钮宽度
+  const BACKWIDTH = 32;
+  export default {
+    data() {
       return {
-        statusBarHeight: 35,
-        scrollTop: 0,
-        searchWidth: 700,
-        searchNode: null as UniElement | null,
-        boxNode: null as UniElement | null,
-        navNode: null as UniElement | null
-      }
+        statusBarHeight: 0,
+        nviBarHeight: 0,
+        naviElement: null as UniElement | null,
+        titleElement: null as UniElement | null,
+        searchElement: null as UniElement | null
+      }
     },
-    onLoad() { },
+    onLoad() {
+      // #ifdef APP
+      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+      // #endif
+      this.nviBarHeight = NAVIBARHEIGHT + this.statusBarHeight;
+    },
     onReady() {
-      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight ?? 35;
-      this.searchNode = this.$refs['search'] as UniElement;
-      this.boxNode = this.$refs['top-box'] as UniElement;
-      this.navNode = this.$refs['scroll-fold-nav'] as UniElement;
-    },
+      this.naviElement = this.$refs['navigatorbar'] as UniElement;
+      this.searchElement = this.$refs['searchbar'] as UniElement;
+      this.titleElement = this.$refs['title'] as UniElement;
+      //适配不同状态栏高度
+      this.naviElement?.style?.setProperty('padding-top', this.statusBarHeight+'px');
+      this.naviElement?.style?.setProperty('height', (NAVIBARHEIGHT+this.statusBarHeight)+'px');
+      let seatElement = this.$refs['seatbar'] as UniElement;
+      seatElement.style.setProperty('height', (NAVIBARHEIGHT+this.statusBarHeight)+'px');
+    },
     methods: {
       onScroll(e : ScrollEvent) {
-        let scrollTop = e.detail.scrollTop
-        // #ifdef APP
-        const originalBoxHeight = 125
-        // #else
-        const originalBoxHeight = 90
-        // #endif
-        this.boxNode?.style?.setProperty('height', (originalBoxHeight - (scrollTop > 35 ? 35 : scrollTop)) + 'px');
-        this.boxNode?.style?.setProperty('background-color', 'rgba(255, 255, 255, ' + (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0 + ')');
-        this.navNode?.style?.setProperty('opacity', 1 - (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0);
-        this.searchNode?.style?.setProperty('width', 700 - (scrollTop > 40 ? 40 : scrollTop) + 'rpx');
-        this.searchNode?.style?.setProperty('top', 0 - (scrollTop > 40 ? 40 : scrollTop) + 'px');
-        this.scrollTop = scrollTop;
+        let offset = e.detail.scrollTop>SEARCHBARHEIGHT?SEARCHBARHEIGHT:e.detail.scrollTop;
+        this.naviElement?.style?.setProperty('height', (this.nviBarHeight -offset)+'px');
+        this.searchElement?.style?.setProperty('left', BACKWIDTH*offset/SEARCHBARHEIGHT+'px');
+        this.titleElement?.style?.setProperty('opacity', (1-offset/SEARCHBARHEIGHT));
       },
       back() {
-        // uni.navigateBack()  // 这么写用不了
-        // 这么写可以用
-        uni.navigateBack({
-          success(result) {
-            console.log('navigateBack success', result.errMsg)
-          },
-          fail(error) {
-            console.log('navigateBack fail', error.errMsg)
-          },
-          complete(result) {
-            console.log('navigateBack complete', result.errMsg)
-          },
-        })
-
-        // uni.switchTab({
-        //   url:'/pages/tabBar/template'
-        // })
-
+        uni.navigateBack();
       },
-      toSearchPage() {
+      search() {
         uni.showToast({
           title: '暂不支持',
           icon: 'none'
         });
-      }
-    },
-
-  }
-</script>
-
+      }
+    }
+  }
+</script>
+
 <style>
-  .page {
-    flex: 1;
-    background-color: #fbdf0d;
-  }
-
-  .scroll-view {
-    flex: 1;
-  }
-
-  .height-seat {
-    height: 110px;
-    /* background-color: #fbdf0d; */
-  }
-
-  .content {
-    padding: 5px 15px;
-    background-color: #f5f5f5;
-  }
-
-  .content-item {
-    padding: 15px;
-    margin: 5px 0;
-    background-color: #fff;
-    border-radius: 5px;
-  }
-
-  .text {
-    font-size: 14px;
-    color: #666;
-    line-height: 20px;
-  }
-
-  .top-box {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    align-items: flex-end;
-    border-bottom: 1px solid #efefef;
-    /* #ifdef APP */
-    height: 125px;
-    padding-top: 35px;
-    /* #else */
-    height: 90px;
-    /* #endif */
-    background-color: rgba(255, 255, 255, 0);
-    background-color: aliceblue;
-  }
-
-  .scroll-fold-nav {
-    height: 44px;
-    width: 100%;
-    justify-content: center;
-  }
-
-  .nav-title {
-    margin-left: 30px;
-  }
-
-  .nav-back {
-    position: absolute;
-    /* #ifdef APP */
-    top: 46px;
-    /* #else */
-    top: 11px;
-    /* #endif */
-    left: 8px;
-  }
-
-  .nav-back .back-img {
-    width: 18px;
-    margin-top: 2px;
-  }
-
-  .search {
-    background-color: #FFFFFF;
-    border: 1px solid #fbdf0d;
-    height: 35px;
-    border-radius: 100px;
-    margin: 0 12px;
-    padding: 8px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 96%;
-    top: 0px;
-  }
-
-  .search-inner {
-    margin-top: 2px;
-    flex-direction: row;
-  }
-
-  .search-inner .search-img {
-    width: 15px;
-  }
-
-  .search-tip-text {
-    font-size: 12px;
-    color: #666;
-  }
-
-  .search-btn {
-    font-size: 12px;
-    background-color: #ff6900;
-    color: #FFF;
-    padding: 5px 8px;
-    border-radius: 100px;
-  }
-</style>
+.page {
+  flex: 1;
+  background-color: #f5f5f5;
+}
+.navigatorbar {
+  position: fixed;
+/* #ifdef APP */
+  padding-top: 35px;
+  height: 124px;
+/* #endif */
+/* #ifdef WEB */
+  height: 88px;
+/* #endif */
+  border-bottom: 1px solid #efefef;
+  width: 100%;
+  background-color: #f5f5f5;
+}
+.titlebar {
+  flex-direction: row;
+  align-items: center;
+  height: 44px;
+}
+.backview {
+  width: 44px;
+  height: 44px;
+  justify-content: center;
+  align-items: center;
+}
+.back {
+  width: 20px;
+}
+.title {
+  margin: 0px 2px;
+}
+.searchbar {
+  position: absolute;
+  bottom: 2px;
+  left: 0px;
+  right: 0px;
+  background-color: #FFFFFF;
+  border: 1px solid #fbdf0d;
+  height: 32px;
+  border-radius: 100px;
+  margin: 6px 12px;
+  padding: 8px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.searchimg {
+  width: 15px;
+}
+.searchinput {
+  flex-grow: 1;
+  font-size: 12px;
+  color: #666;
+}
+.searchbutton {
+  font-size: 12px;
+  background-color: #ff6900;
+  color: #FFF;
+  padding: 5px 8px;
+  border-radius: 100px;
+}
+.seatbar {
+/* #ifdef APP */
+  height: 124px;
+/* #endif */
+/* #ifdef WEB */
+  height: 88px;
+/* #endif */
+}
+.content {
+  padding: 5px 15px;
+}
+.content-item {
+  padding: 15px;
+  margin: 5px 0;
+  background-color: #fff;
+  border-radius: 5px;
+}
+.text {
+  font-size: 14px;
+  color: #666;
+  line-height: 20px;
+}
+
+</style>

pages/template/swiper-vertical-video/swiper-vertical-video.uvue

 <template>
   <view class="page">
-    <view @click="back" class="nav-back">
+    <view ref="back" @click="back" class="nav-back">
       <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
     </view>
     <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange"
@@ -86,7 +86,12 @@
     },
     onReady() {
       // 一启动完成，就播放第一个
-      this.doPlay(0)
+      this.doPlay(0);
+      // #ifdef APP
+      //App端适配不同状态栏高度
+      let backElement = this.$refs['back'] as UniElement;
+      backElement.style.setProperty('top', uni.getSystemInfoSync().statusBarHeight+'px');
+      // #endif
     },
     onShow() {
       currentPageIsShow = true
@@ -257,12 +262,14 @@
 
   .nav-back {
     position: absolute;
-    top: 20px;
-    left: 8px;
+/* #ifdef APP */
+    top: 35px;
+/* #endif */
     background-color: rgba(220, 220, 220, 0.8);
     border-radius: 100px;
-    width: 28px;
-    height: 28px;
+    margin: 6px;
+    width: 32px;
+    height: 32px;
     justify-content: center;
     align-items: center;
     z-index: 10;