feat: 样式更新

pages/calibrator/calibrator.js

@@ -47,14 +47,12 @@ Component({
             lineStyle: `top: ${top}px;`,
             pendingStart: Date.now(),
           });
-        } else if (Date.now() - this.data.pendingStart > 750) {
+        } else if (Date.now() - this.data.pendingStart > 500) {
           this.setData({
             lineStyle: `top: ${top}px;`,
             success: true,
           });
-          setTimeout(() => {
           this.triggerEvent("success");
-          }, 500);
         } else {
           this.setData({
             lineStyle: `top: ${top}px;`,

pages/index/index.wxml

@@ -1,5 +1,5 @@
 <view>
-  <camera wx:if="{{resolution}}" mode="scanCode" device-position="back" flash="{{flash}}" frame-size="{{frameSize}}" style="z-index:0;position:fixed;top:0;width:100%;height:100%;" binderror="handleNoCamera" resolution="{{resolution}}">
+  <camera wx:if="{{resolution}}" mode="normal" device-position="back" flash="{{flash}}" frame-size="{{frameSize}}" style="z-index:0;position:fixed;top:0;width:100%;height:100%;" binderror="handleNoCamera" resolution="{{resolution}}">
   </camera>
   <canvas bindtap="clickScreen" style="z-index:1;position:fixed;top:0;width:100%;height:100%;" type="webgl" id="webgl" canvas-id="webgl"></canvas>
 </view>
@@ -52,20 +52,12 @@
   </view>
 </view>
 <view wx:if="{{(state===states.startScan||state===states.fail5s)}}" class="scan-modal">
-  <image class="corner" src="./corner.png"></image>
-  <image class="corner lb" src="./corner.png"></image>
-  <image class="corner tl" src="./corner.png"></image>
-  <image class="corner tr" src="./corner.png"></image>
-  <view class="scaner">
-    <view class="bg"></view>
+  <view class="meta"> {{state===states.startScan?'校准请左右缓慢移动手机':'继续定位中，请换个场景试试'}}</view>
+  <view class="rect">
+    <view class="line"></view>
+    <image src="./p1.png" class="phone" mode="" />
   </view>
-  <view class="title">
-    {{state===states.startScan?'开始定位':'努力定位中'}}
-  </view>
-  <view class="meta">
-    {{state===states.startScan?'请缓慢扫描周围店铺名称':'请扫描其他区域试试'}}
-  </view>
-  <view class="btn" bindtap="exit">返回</view>
+  <view class="btn" bindtap="exit">取消导航</view>
 </view>
 <calibrator wx:if="{{state===states.calibrating}}" bindsuccess="requestLocation"></calibrator>
 <prompt wx:if="{{!!promptStateMap[state]}}" icon="{{promptStateMap[state].icon}}" title="{{state===states.arriveElevator?'请乘坐直梯至'+nextFloor.name:state ===states.arriveEscalator?'请乘坐扶梯至'+nextFloor.name:promptStateMap[state].title}}" meta="{{(state===states.arriveElevator||state===states.arriveEscalator)&&(nextFloor.name==='-3F'||nextFloor.name==='-2F'||nextFloor.name==='-1F')?'离开电梯厅后重新扫描':promptStateMap[state].meta}}" btn1="{{((state===states.arriveElevator||state ===states.arriveEscalator)&&nextNextFloor)?'已到达目标'+(nextNextFloor.isPark?'停车场':'商场'):promptStateMap[state].btn1}}" btn2="{{promptStateMap[state].btn2}}" btn3="{{promptStateMap[state].btn3}}" bindbtn="handlePromptBtn"></prompt>

pages/index/index.wxss

@@ -277,119 +277,76 @@
   bottom: 0;
   left: 0;
   right: 0;
-  margin: auto;
-  width: calc(100vw - 36px - 36px);
-  height: calc(100vw - 36px - 36px);
-  border-radius: 16px;
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
-  z-index: 10 !important;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.8);
 }
-
-.scan-modal > .corner {
+.scan-modal > .meta {
   position: absolute;
-  z-index: 1;
-  width: 32px;
-  height: 32px;
-  bottom: -16px;
-  right: -16px;
-}
-
-.corner.lb {
-  bottom: -16px;
-  left: -16px;
-  transform: rotate(90deg);
+  left: 0;
+  right: 0;
+  top: calc(50vh - 40px - 192px - 34px);
+  margin: auto;
+  color: var(--T-G1, #eee9de);
+  text-align: center;
+  font-family: "PingFang SC";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  z-index: 2;
 }
-
-.corner.tl {
-  top: -16px;
-  left: -16px;
-  transform: rotate(180deg);
+.rect {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: calc(50vh - 40px);
+  width: 100vw;
+  height: 80px;
+  background: rgba(238, 233, 222, 0.3);
+  backdrop-filter: blur(3px);
 }
-
-.corner.tr {
-  top: -16px;
-  right: -16px;
-  transform: rotate(270deg);
+.rect > .line {
+  position: absolute;
+  bottom: 25px;
+  left: 14px;
+  right: 14px;
+  border-top: 2px dashed #ffdb00;
 }
-
-@keyframes scan {
+@keyframes phone {
   0% {
-    height: 100%;
+    left: 47px;
+  }
+  50% {
+    left: calc(100vw - 47px - 21px);
   }
-
   100% {
-    height: 0;
+    left: 47px;
   }
 }
-
-.scan-modal > .scaner {
-  position: absolute;
-  top: -16px;
-  bottom: -16px;
-  left: -16px;
-  right: -16px;
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.scan-modal > .scaner > .bg {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.48) 0.2%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  animation: 1s scan infinite ease-in-out;
-}
-
-.scan-modal > .title {
+.rect > .phone {
   position: absolute;
-  bottom: -68px;
-  left: 0;
-  right: 0;
-  height: 34px;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 24px;
-  line-height: 34px;
-  text-align: center;
-  letter-spacing: 1px;
-  color: #eee9de;
-}
-
-.scan-modal > .meta {
-  position: absolute;
-  bottom: -97px;
-  left: 0;
-  right: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-  color: #b3aea7;
+  bottom: 16px;
+  width: 21px;
+  height: 40px;
+  animation: phone 3s ease-in-out infinite;
 }
-
 .scan-modal > .btn {
   position: absolute;
-  bottom: -170px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 180px;
-  font-family: PingFang SC;
-  font-style: normal;
-  font-weight: 900;
+  left: 53px;
+  right: 53px;
+  bottom: 80px;
+  border-radius: 100px;
+  background: var(--V-Y1, #ffdb00);
+  color: var(--T-_, #333);
+  text-align: center;
+  font-family: "Noto IKEA Simplified Chinese";
   font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
   line-height: 50px;
   height: 50px;
-  text-align: center;
-  color: #333333;
-  background: #ffdb00;
-  border-radius: 63px;
 }
 
 .success-prompt {