feat: add compatible desktop solutions

add compatible desktop solutions

README.md

@@ -46,6 +46,7 @@ h5-webpack-starter
  │   ├─preloader/              # Preloader component folder
  │   ├─theme/                  # Global and public styles
  │   ├─shared/                 # Public component or method
+ │   ├─setting.config.json     # Global setting config
  │   └─...
  ├─mock/                       # Mock data entry folder
  │   ├─api/

app/pages/backCover/backCover.scss

@@ -16,3 +16,22 @@
   font-size: $fontL;
   line-height: calcVW(80);
 }
+
+:global(.desktop) {
+  $radius: calcPX(7.5);
+  $space: calcPX(15);
+
+  .thanks {
+    font-size: calcPX(48);
+  }
+
+  .backBtn {
+    height: calcPX(80);
+    padding: 0 $space * 1.6;
+    margin: calcPX(50) 0;
+
+    border-width: calcPX(2);
+    border-radius: $radius;
+    line-height: calcPX(80);
+  }
+}

app/pages/basedOn/basedOn.scss

@@ -17,3 +17,9 @@
     @include bg-image-full(url("../../../static/images/icon-core.svg"));
   }
 }
+
+:global(.desktop) {
+  .title {
+    font-size: calcPX(48);
+  }
+}

app/pages/common.scss

@@ -37,3 +37,27 @@
     @include bg-image-full(url('../../static/images/icon-link.svg'));
   }
 }
+
+:global(.desktop) {
+  .pointsWrapper {
+    width: calcPX(500);
+    padding: calcPX(20);
+    margin-bottom: calcPX(80);
+
+    > li {
+      padding: calcPX(10);
+      font-size: calcPX(36);
+    }
+  }
+
+  .icon {
+    width: calcPX(36);
+    height: calcPX(36);
+    margin: 0 calcPX(10);
+
+    &::before {
+      width: calcPX(30);
+      height: calcPX(30);
+    }
+  }
+}

app/pages/cover/cover.scss

@@ -64,3 +64,35 @@ $picH: calcVW(240);
     background-color: $fontColor;
   }
 }
+
+:global(.desktop) {
+  $space: calcPX(15);
+  $radius: calcPX(7.5);
+
+  .title {
+    font-size: calcPX(48);
+  }
+
+  $picH: calcPX(240);
+  .logoWrap {
+    height: $picH;
+    width: $picH;
+    margin-bottom: $picH / 6;
+  }
+
+  .logo {
+    &::before {
+      perspective: $picH / 6;
+    }
+  }
+
+  .gotoGithub {
+    margin-top: $space * 2;
+    padding: 0 $space * 1.6;
+    height: calcPX(80);
+
+    border-width: calcPX(2);
+    border-radius: $radius;
+    line-height: calcPX(80);
+  }
+}

app/pages/features/features.scss

@@ -11,3 +11,9 @@
     list-style: decimal;
   }
 }
+
+:global(.desktop) {
+  .title {
+    font-size: calcPX(48);
+  }
+}

app/pages/nestedSwiperDemo/nestedSwiperDemo.scss

@@ -31,3 +31,22 @@
     background: lighten($bgc, 10%);
   }
 }
+
+:global(.desktop) {
+  .title {
+    font-size: calcPX(48);
+  }
+
+  .container {
+    width: calcPX(600);
+    height: calcPX(450);
+    margin: calcPX(40) auto;
+  }
+
+  .content1,
+  .content2,
+  .content3,
+  .content4 {
+    font-size: calcPX(36);
+  }
+}

app/pages/otherRecommended/otherRecommended.scss

@@ -11,3 +11,9 @@
     list-style: disc;
   }
 }
+
+:global(.desktop) {
+  .title {
+    font-size: calcPX(48);
+  }
+}

app/pages/pageX/pageX.scss

@@ -5,3 +5,9 @@
   font-size: calcVW(48);
   font-weight: bold;
 }
+
+:global(.desktop) {
+  .tip {
+    font-size: calcPX(48);
+  }
+}

app/pages/popupDemo/popupDemo.scss

@@ -16,3 +16,22 @@
   font-size: $fontL;
   line-height: calcVW(80);
 }
+
+:global(.desktop) {
+  $radius: calcPX(7.5);
+  $space: calcPX(15);
+
+  .title {
+    font-size: calcPX(48);
+  }
+
+  .popupBtn {
+    height: calcPX(80);
+    padding: 0 $space * 1.6;
+    margin: calcPX(50) 0;
+
+    border-width: calcPX(2);
+    border-radius: $radius;
+    line-height: calcPX(80);
+  }
+}

app/pages/root.scss

@@ -2,7 +2,21 @@
 @import "../theme/utilities";
 
 .root {
-  background-color: $bgc;
+  background-color: darken($bgc, 3%);
+
+  > :global(.swiper-container) {
+    background-color: $bgc;
+  }
+
+  &:global(.desktop) {
+    > :global(.swiper-container) {
+      width: $pcRootWidth;
+      max-height: round($pcRootWidth * $designDrawingBestHeight / $designDrawingWidth);
+      overflow: hidden;
+
+      @include fix-center(0);
+    }
+  }
 }
 
 .pagination {

app/popups/popupX/popupX.scss

@@ -48,3 +48,31 @@ $popupXFontSize: calcVW(30);
   line-height: $popupXFontSize * 1.5;
 }
 
+:global(.desktop) {
+  $popupXFontSize: calcPX(30);
+  $radius: calcPX(7.5);
+  $space: calcPX(15);
+
+  .box {
+    width: calcPX(340);
+    padding: calcPX(40);
+
+    border-width: calcPX(2);
+    border-radius: $radius * 2;
+    font-size: $popupXFontSize;
+  }
+
+  .info {
+    font-size: $popupXFontSize;
+    margin-bottom: $space;
+  }
+
+  .closeBtn {
+    padding: $space * 1.5;
+
+    border-width: calcVW(2);
+    border-radius: $radius;
+    font-size: $popupXFontSize;
+    line-height: $popupXFontSize * 1.5;
+  }
+}

app/popups/promptMobile/promptMobile.component.ins.js

@@ -1,10 +1,23 @@
-import { Popup } from '@cycjimmy/h5-pages';
+import { h5Pages, Popup } from '@cycjimmy/h5-pages';
 import isMobile from '@cycjimmy/awesome-js-funcs/esm/handheld/isMobile';
 import functionToPromise from '@cycjimmy/awesome-js-funcs/esm/typeConversion/functionToPromise';
+import debounce from '@cycjimmy/awesome-js-funcs/esm/event/debounce';
 
 import template from './promptMobile.pug';
 import _style from './promptMobile.scss';
 import QRCodeImg from '../../../static/images/QRCode.png';
+import { needSupportDesktop } from '../../setting.config.json';
+
+/**
+ * createQRCodeDesktop
+ * @returns {Promise<unknown>}
+ */
+const createQRCodeDesktop = () => Promise.resolve()
+  .then(() => functionToPromise(() => {
+    const QRCodeEl = document.createElement('div');
+    QRCodeEl.classList.add(_style.QRCodeDesktop);
+    h5Pages.root.appendChild(QRCodeEl);
+  }));
 
 export default new class extends Popup {
   constructor() {
@@ -13,27 +26,49 @@ export default new class extends Popup {
   }
 
   load() {
-    if (isMobile()) {
-      this.isMobile = true;
-      return Promise.resolve();
-    }
+    return Promise.resolve()
+      .then(() => createQRCodeDesktop())
+      .then(() => this._render())
+      .then(() => this._eventBind());
+  }
 
-    this.isMobile = false;
+  getIsMobile() {
+    return this.isMobile;
+  }
 
+  _render() {
     return Promise.resolve()
       .then(() => functionToPromise(() => {
-        this.isMobile = false;
-        this.popup.classList.add(_style.wrapper);
+        this.isMobile = isMobile();
       }))
-      .then(() => this.render(template({
-        _style,
-        QRCodeImg,
-        suggest: 'Scan code for better experience.',
-      })))
-      .then(() => Promise.reject(new Error('not mobile device')));
+      .then(() => {
+        if (this.isMobile) {
+          h5Pages.root.classList.remove('desktop');
+          return Promise.resolve();
+        }
+
+        if (needSupportDesktop) {
+          h5Pages.root.classList.add('desktop');
+          return Promise.resolve();
+        }
+
+        return Promise.resolve()
+          .then(() => functionToPromise(() => {
+            this.popup.classList.add(_style.wrapper);
+          }))
+          .then(() => this.render(template({
+            _style,
+            QRCodeImg,
+            suggest: 'Scan code for better experience.',
+          })))
+          .then(() => Promise.reject(new Error('not mobile device')));
+      });
   }
 
-  getIsMobile() {
-    return this.isMobile;
+  _eventBind() {
+    window.addEventListener(
+      'resize',
+      () => debounce(() => this._render(), 100)(),
+    );
   }
 }();

app/popups/promptMobile/promptMobile.scss

@@ -23,3 +23,36 @@ $promptMobileFontColor: $fontColor;
   font-size: 14px;
 }
 
+$QRCodeDesktopWidth: 100px;
+
+.QRCodeDesktop {
+  @extend %abs;
+  width: 0;
+  height: 0;
+  display: none;
+  @include fix-center(0);
+
+  &::before {
+    content: "";
+    display: block;
+    @extend %abs;
+    left: round($pcRootWidth * .5 + 20);
+    top: - round($pcRootWidth * .3 + $QRCodeDesktopWidth * .5);
+    width: $QRCodeDesktopWidth;
+    height: $QRCodeDesktopWidth;
+
+    border: 2px solid darken($bgc, 5%);
+    border-radius: 12px;
+    overflow: hidden;
+    @include bg-image-full(url("../../../static/images/QRCode.png"));
+  }
+}
+
+:global(.desktop) {
+  @media screen and (min-width: $pcRootWidth * 1.5) {
+    .QRCodeDesktop {
+      display: block;
+    }
+  }
+}
+

app/popups/promptOrientation/promptOrientation.scss

@@ -40,3 +40,9 @@ $lockOrientation: portrait;
   }
 }
 
+:global(.desktop) {
+  .wrapper {
+    display: none;
+  }
+}
+