style: adjust

src/app/Landing/EnjoyDev/OurWay/BgShapes.tsx

@@ -1,3 +1,6 @@
+import GtdWipSVG from '~/icons/GtdWip'
+import TagSVG from '~/icons/HashTagBold'
+
 import CurveLine1SVG from '../../styles/enjoy_dev/bg_shapes/CurveLine1'
 import CurveLine2SVG from '../../styles/enjoy_dev/bg_shapes/CurveLine2'
 import CurveLine3SVG from '../../styles/enjoy_dev/bg_shapes/CurveLine3'
@@ -15,6 +18,21 @@ export default () => {
 
   return (
     <div className={s.wrapper}>
+      <div className={s.wipItem}>
+        <GtdWipSVG className={cn(s.wipIcon, 'animate-spin')} />
+        <div className={s.wipText}>进行中</div>
+
+        <TwoLineSVG className={s.waweLine} />
+      </div>
+
+      <div className={s.topicItem}>
+        <TagSVG className={s.wipIcon} />
+        <div className={s.wipText}>使用分享</div>
+      </div>
+
+      <div className={s.versionText}>v 1.4.2</div>
+      <div className={s.thxText}>感谢，已解决!</div>
+
       <CurveLine1SVG className={s.curveLineTL} />
       <CurveLine3SVG className={s.curveLineBL} />
 
@@ -24,7 +42,9 @@ export default () => {
       <ShapeCross2SVG className={cn(s.shapeIcon, s.fillGreen, 'bottom-36 right-60')} />
       <ShapeCross2SVG className={cn(s.shapeIcon, s.fillOrange, 'bottom-24 right-52 opacity-20')} />
 
-      <ShapeCircleSVG className={cn(s.shapeIcon, s.fillGreen, 'size-8 top-14 left-40')} />
+      <ShapeCircleSVG
+        className={cn(s.shapeIcon, s.fillGreen, 'size-8 top-14 left-40 opacity-20')}
+      />
 
       <ShapeCircleHalfSVG
         className={cn(s.shapeIcon, s.fillOrange, 'size-14 top-14 right-32 -rotate-12')}
@@ -37,8 +57,8 @@ export default () => {
         )}
       />
 
-      <div className={cn(s.squareIcon, 'bottom-36 left-28 opacity-15')} />
-      <div className={cn(s.squareIcon, 'bottom-48 left-20')} />
+      <div className={cn(s.squareIcon, 'bottom-48 left-28')} />
+      <div className={cn(s.circleIcon, 'bottom-24 left-36')} />
     </div>
   )
 }

src/app/Landing/EnjoyDev/OurWay/Fans.tsx

@@ -19,11 +19,11 @@ export default () => {
         <Img src={users[6].avatar} className={cn(s.avatar, 'size-7')} />
       </div>
 
-      <div className={cn(s.userWrapper, s.borderOrange, 'bottom-32 right-40')}>
+      <div className={cn(s.userWrapper, s.borderOrange, 'bottom-32 right-40 opacity-65')}>
         <Img src={users[6].avatar} className={cn(s.avatar)} />
       </div>
 
-      <div className={cn(s.userWrapper, s.borderBlue, 'bottom-24 right-80')}>
+      <div className={cn(s.userWrapper, s.borderGreen, 'bottom-24 right-80 opacity-80')}>
         <Img src={users[0].avatar} className={cn(s.avatar, 'size-6')} />
       </div>
 
@@ -36,7 +36,7 @@ export default () => {
         <Facepile users={users.slice(0, 2)} left={2} className="scale-90 gap-x-1" />
       </div>
 
-      <div className={cn(s.commentsGroup, 'bottom-20 left-16')}>
+      <div className={cn(s.commentsGroup, 'bottom-20 left-80 ml-10')}>
         <Img src="icons/emotion/heart.png" className={s.emoji} />
         <Facepile users={users.slice(2, 5)} left={2} className="scale-90 gap-x-1" />
       </div>

src/app/Landing/styles/enjoy_dev/bg_shapes/index.ts

@@ -11,6 +11,33 @@ export default () => {
 
   return {
     wrapper: cn('absolute w-full h-full top-0 left-0'),
+    wipItem: cn(
+      'row-center absolute left-1/2 top-28 -ml-32 rotate-3',
+      rainbow(COLOR_NAME.GREEN, 'fg'),
+    ),
+    wipText: cn('text-lg bold opacity-30 ml-1', rainbow(COLOR_NAME.GREEN, 'fg')),
+    wipIcon: cn('size-4 opacity-50 -mt-0.5', rainbow(COLOR_NAME.GREEN, 'fill')),
+
+    versionText: cn(
+      'absolute top-28 right-72 text-base bold opacity-40 -rotate-2',
+      rainbow(COLOR_NAME.GREEN, 'fg'),
+    ),
+
+    thxText: cn(
+      'absolute bottom-36 left-1/2 -ml-32 text-base bold opacity-25 rotate-2',
+      rainbow(COLOR_NAME.GREEN, 'fg'),
+    ),
+
+    topicItem: cn(
+      'row-center absolute left-20 bottom-32 -rotate-3',
+      rainbow(COLOR_NAME.GREEN, 'fg'),
+    ),
+
+    waweLine: cn(
+      'size-10 absolute -bottom-8 right-0 rotate-12 opacity-20 scale-y-50',
+      rainbow(COLOR_NAME.ORANGE, 'fill'),
+    ),
+
     curveLineTL: cn('absolute size-80 top-24 left-60', turnning),
     curveLineBL: cn('absolute size-80 bottom-20 left-60 ml-2', turnning),
     //
@@ -23,6 +50,11 @@ export default () => {
     fillGreen: rainbow(COLOR_NAME.GREEN, 'fill'),
     fillRed: rainbow(COLOR_NAME.RED, 'fill'),
     fillOrange: rainbow(COLOR_NAME.ORANGE, 'fill'),
-    squareIcon: cn('size-4 absolute rounded rotate-45 opacity-30', rainbow(COLOR_NAME.GREEN, 'bg')),
+    fillBlue: rainbow(COLOR_NAME.BLUE, 'fill'),
+    squareIcon: cn('size-4 absolute rounded rotate-45 opacity-20', rainbow(COLOR_NAME.GREEN, 'bg')),
+    circleIcon: cn(
+      'size-4 circle border-4 absolute opacity-10',
+      rainbow(COLOR_NAME.GREEN, 'border'),
+    ),
   }
 }

src/app/Landing/styles/enjoy_dev/high_way/block.ts

@@ -17,7 +17,7 @@ export default () => {
     buildIcon: 'text-xs opacity-65',
     text: cn('text-sm ml-1.5', fg('text.digest')),
     textRed: rainbow(COLOR_NAME.RED, 'fg'),
-    graveIcon: cn('size-4 opacity-65', rainbow(COLOR_NAME.BLACK, 'fill')),
+    graveIcon: cn('size-4 opacity-65', rainbow(COLOR_NAME.PINK, 'fill')),
     launchIcon: cn('size-3', fill('text.digest')),
   }
 }

src/app/Landing/styles/enjoy_dev/index.ts

@@ -14,7 +14,7 @@ export default () => {
     title: cn('text-3xl bold-sm opacity-70', fg('text.title'), global('text-shadow')),
     desc: cn('text-lg mt-3', fg('text.digest')),
     //
-    ourWall: cn('relative column-align-both w-full h-auto overflow-hidden'),
+    ourWall: cn('relative column-align-both w-full h-auto pl-10 overflow-hidden'),
     ourWallBg: cn('absolute top-0 left-0 w-full h-full rotate-180', global('gradient-green')),
     ourlabel: cn(
       'row-center absolute right-16 top-0 text-lg px-3 py-1 rounded-b-xl',

src/globals.css

@@ -321,11 +321,11 @@
   }
 
   .gradient-red {
-    background: linear-gradient(45deg, #ffede478 0%, #ffdcdcc9 100%);
+    background: linear-gradient(6deg, #ffede478 0%, #ffdcdcc9 100%);
   }
 
   .gradient-red-dark {
-    background: linear-gradient(45deg, #ffe4e424 0%, #ffdcdcc9 100%);
+    background: linear-gradient(6deg, #ffe4e424 0%, #ffdcdcc9 100%);
   }
 
   .gradient-black {