feat(home): add phone preview

src/data/examples.js

@@ -1,7 +1,13 @@
 import { goodNight } from "./gallery/all/good-night";
 import { angry } from "./gallery/all/angry";
 import { EDGNB } from "./gallery/all/edg-nb";
+import { showOff as ShowOff } from "./gallery/all/show-off";
+import { falling as Falling } from "./gallery/all/falling";
+import { tree as Tree } from "./gallery/all/tree";
 
 export const color = EDGNB.options;
 export const pattern = angry.options;
 export const image = goodNight.options;
+export const tree = Tree.options;
+export const falling = Falling.options;
+export const showOff = ShowOff.options;

src/pages/Home.vue

@@ -13,38 +13,68 @@
         </div>
       </div>
       <div class="device-container" ref="deviceContainer">
-        <scale
-          :progress="progress"
-          :from="position.from"
-          :to="position.to"
-          @onResize="handleResize"
-          :fixed="true"
-          :offsetY="progress >= 1 ? 200 : 0"
+        <div
+          class="phone-container"
+          :style="{
+            transform: `scale(0.3, 0.3) translateX(${translateX}px)`,
+            bottom: position.offsetY + 'px',
+            right: -position.offsetX + 'px',
+          }"
         >
-          <device :width="screenSize.width" :height="screenSize.height">
-            <el-carousel
-              :height="screenSize.height + 'px'"
-              :style="{ width: screenSize.width + 'px' }"
-            >
-              <el-carousel-item v-for="example in examples" :key="example.mode">
-                <div
-                  @click="handleSelectExample(example)"
-                  :style="{
-                    cursor: progress >= 1 ? 'pointer' : 'default',
-                  }"
-                >
-                  <wallpaper
-                    :options="example"
-                    :width="screenSize.width"
-                    :height="screenSize.height"
-                  />
-                </div>
-              </el-carousel-item>
-            </el-carousel>
-          </device>
-        </scale>
+          <div class="device device-iphone-x device-spacegray screen-container transition">
+            <div class="device-frame">
+              <el-carousel
+                :height="deviceSize.height + 'px'"
+                :style="{ width: deviceSize.width + 'px' }"
+              >
+                <el-carousel-item v-for="example in phoneExamples" :key="example.mode">
+                  <div
+                    @click="handleSelectExample(example)"
+                    :style="{
+                      cursor: progress >= 1 ? 'pointer' : 'default',
+                    }"
+                  >
+                    <wallpaper
+                      :options="example"
+                      :width="deviceSize.width"
+                      :height="deviceSize.height"
+                    />
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <div class="device-stripe transition"></div>
+            <div class="device-header transition"></div>
+            <div class="device-sensors transition"></div>
+            <div class="device-btns transition"></div>
+            <div class="device-power transition"></div>
+          </div>
+        </div>
       </div>
     </div>
+    <scale
+      :progress="progress"
+      :from="position.from"
+      :to="position.to"
+      @onResize="handleResize"
+      :fixed="true"
+      :offsetY="progress >= 1 ? 200 : 0"
+    >
+      <device :width="screenSize.width" :height="screenSize.height">
+        <el-carousel :height="screenSize.height + 'px'" :style="{ width: screenSize.width + 'px' }">
+          <el-carousel-item v-for="example in examples" :key="example.mode">
+            <div
+              @click="handleSelectExample(example)"
+              :style="{
+                cursor: progress >= 1 ? 'pointer' : 'default',
+              }"
+            >
+              <wallpaper :options="example" :width="screenSize.width" :height="screenSize.height" />
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </device>
+    </scale>
     <gallery v-show="progress > 0" />
   </div>
 </template>
@@ -56,9 +86,11 @@ import Scale from "../components/Scale.vue";
 import { useKeepLiveScrollProgress } from "../mixins/useKeepLiveScrollProgress";
 import { useWindowSize } from "../mixins/useWindowSize";
 import { useElementBox } from "../mixins/useElementBox";
-import { color, pattern, image } from "../data/examples";
+import { color, pattern, image, showOff, falling, tree } from "../data/examples";
 import Gallery from "../components/Gallery.vue";
 import { gotoEditor } from "../utils/gotoEditor";
+import { adaptOptions } from "../utils/adapt";
+import { map } from "../utils/math";
 
 export default {
   components: {
@@ -72,7 +104,12 @@ export default {
     return {
       disabled: false,
       examples: [color, pattern, image],
+      phoneExamples: [showOff, falling, tree].map(adaptOptions),
       screenSize: {},
+      deviceSize: {
+        width: 375,
+        height: 812,
+      },
     };
   },
   mixins: [useKeepLiveScrollProgress(200), useWindowSize(), useElementBox("deviceContainer")],
@@ -116,8 +153,13 @@ export default {
           y: this.deviceContainerY + (this.deviceContainerHeight - deviceHeight) / 2,
           scale: deviceWidth / this.windowWidth,
         },
+        offsetY: (this.deviceContainerHeight - deviceHeight) / 2,
+        offsetX: (this.deviceContainerWidth - deviceWidth) / 2,
       };
     },
+    translateX() {
+      return map(this.progress, 0, 1, 1500, 0);
+    },
   },
   methods: {
     handleResize({ width, height }) {
@@ -178,7 +220,7 @@ export default {
 }
 
 .top-text {
-  margin-left: 100px;
+  margin-left: 80px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -198,8 +240,9 @@ export default {
 }
 
 .device-container {
-  width: 50%;
+  width: 45%;
   height: 100%;
+  position: relative;
 }
 
 .home-container .el-carousel__container {
@@ -212,4 +255,15 @@ export default {
 .home-container .el-carousel__indicator--horizontal {
   display: inline-block !important;
 }
+
+.phone-container {
+  position: absolute;
+  transform-origin: right bottom;
+  z-index: 2000;
+}
+.phone-container .el-carousel {
+  z-index: 0;
+  border-radius: 40px;
+  overflow: hidden;
+}
 </style>

src/utils/adapt.js

@@ -1,6 +1,6 @@
 import { deepCopy, set, get } from "./object";
 
-export function adaptOptions(options, scale) {
+export function adaptOptions(options, scale = 1) {
   const newOptions = deepCopy(options);
   const dy = get(newOptions, "text.dy") || 0;
   set(newOptions, "text.mode", "autoFit");