Merge pull request 'fix ui' (#17) from lisa into main

Reviewed-on: http://gitea.xhzone.cn/felix/miniprogram-1/pulls/17

miniprogram/pages/upload/upload.wxml

@@ -114,5 +114,34 @@
         </view>
       </view>
     </view> -->
+    <view class="card-wrapper">
+      <view class="card-normal">
+        <image class="card-image" src="/static/sun-2.png" />
+      </view>
+      <view class="card-ascii">
+        <view class="ascii-content">
+          // compiled preview • scanner demo /* generated for visual effect 
+– not executed */ const SCAN_WIDTH = 8; const FADE_ZONE = 35; cons
+t MAX_PARTICLES = 2500; const TRANSITION = 0.05; function clamp(n,
+ a, b) { return Math.max(a, Math.min(b, n)); } function lerp(a, b,
+ t) { return a + (b - a) * t; } const now = () => performance.now(
+); function rng(min, max) { return Math.random() * (max - min) + m
+in; } class Particle0 { constructor(x, y, vx, vy, r, a) { this.x =
+ x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a
+; } step(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } }
+ class Particle1 { constructor(x, y, vx, vy, r, a) { this.x = x; t
+his.y = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a; } s
+tep(dt) { this.x += this.vx * dt; this.y += this.vy * dt; } } clas
+s Particle2 { constructor(x, y, vx, vy, r, a) { this.x = x; this.y
+ = y; this.vx = vx; this.vy = vy; this.r = r; this.a = a; } step(d
+t) { this.x += this.vx * dt; this.y += this.vy * dt; } } const sca
+nner = { x: Math.floor(window.innerWidth / 2), width: SCAN_WIDTH, 
+glow: 3.5, }; function drawParticle(ctx, p) { ctx.globalAlpha = cl
+amp(p.a, 0, 1); ctx.drawImage(gradient, p.x - p.r, p.y - p.r, p.r 
+* 2, p.r * 2); } function tick(t)
+        </view>
+      </view>
+      <view class="scanner"></view>
+    </view>
   </view>
 </view>

miniprogram/pages/upload/upload.wxss

@@ -979,7 +979,7 @@ position:relative;
   height: 100%;
 }
 
-.lens-outer{
+/* .lens-outer{
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
@@ -1137,4 +1137,107 @@ position:relative;
   right: 8rpx;
   clip: rect(0em, 80rpx, 344.88rpx, 0em);
   box-shadow: 0 2rpx 0 #4c2f4d, -24rpx 20rpx 32rpx #442149, 0 80rpx 0 #7a21a3,inset 0 -2rpx 2rpx #200526;
-}
+} */
+
+.card-wrapper{
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  width: 80%;
+  height: 80%;
+  flex-shrink: 0;
+}
+
+.card-normal {
+  background: transparent;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0;
+  color: white;
+  z-index: 2;
+  position: relative;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16rpx;
+  clip-path: inset(30% 0 0 0);
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 15px;
+  transition: all 0.3s ease;
+  filter: brightness(1.1) contrast(1.1);
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.card-ascii {
+  background: transparent;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.ascii-content {
+  position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: rgba(220, 210, 255, 0.6);
+    font-family: "Courier New", monospace;
+    font-size: 36rpx;
+    overflow: hidden;
+    white-space: pre;
+    animation: glitch 0.1s infinite linear alternate-reverse;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    vertical-align: top;
+    box-sizing: border-box;
+    clip-path: inset(0 0 30% 0);
+    /* mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.2) 100%); */
+    mask-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0.2) 100%);
+}
+
+.scanner {
+position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4rpx;
+  /* background: linear-gradient(90deg, transparent, #74b9ff, transparent);
+  box-shadow: 0 0 16rpx #74b9ff, 0 0 60px #74b9ff;
+  border-radius: 8rpx;
+  opacity: 0;
+  transition: transform 0s linear, opacity 0.3s ease; */
+  background: linear-gradient(180deg, transparent 89%, rgba(0, 255, 255, 0.5) 1%, transparent);
+  border-radius: 20rpx;
+  animation: scan-animation 5s infinite;
+  background-size: 200% 200%;
+  box-shadow: inset 0 0px 15rpx 1rpx cyan;
+  /* animation: scan-animation 3s linear infinite; */
+  z-index: 3;
+}
+
+@keyframes scan-animation {
+  0%, 100% {
+    top: 0%;
+    opacity: 0.9;
+  }
+  50% {
+    top: 100%;
+    opacity: 0.9;
+  }
+}