fix: 抽离swiper样式

c6b873ac · 郝聪敏 · 92e2f74b · c6b873ac · c6b873ac · c6b873ac
Commit c6b873ac authored Mar 30, 2021 by 郝聪敏
Show whitespace changes
Inline Side-by-side

Showing with 145 additions and 7 deletions

index.vue app/web/component/layout/activity/index.vue +141 -3

package-lock.json package-lock.json +3 -3

package.json package.json +1 -1

No files found.
--- a/app/web/component/layout/activity/index.vue
+++ b/app/web/component/layout/activity/index.vue
@@ -7,8 +7,8 @@
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-      <link rel="stylesheet" href="/public/asset/css/index.css">
-      <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css">
+      <link rel="stylesheet" href="/public/asset/css/reset.css">
+      <!-- <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css"> -->
    </head>
    <body>
      <div class="mainload">
@@ -28,3 +28,141 @@
  </div>
 </template>
 <script lang="ts" src="./index.ts"></script>
+<style>
+  html {
+    font-size: 10vw !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  .cr-popup .cr-notify {
+    font-size: 14px;
+  }
+
+  .cr-toast .cr-toast--inner {
+    box-sizing: content-box;
+  }
+
+  @media screen and (min-width: 769Px) {
+    html {
+      font-size: 37.5Px !important;
+    }
+    body {
+      max-width: 375Px;
+      /*max-height: 667Px;*/
+      margin: 0 auto !important;
+    }
+  }
+
+  .mainload {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    background-color: #fff;
+  }
+  .mainload .container {
+    text-align: center;
+  }
+  .mainload p {
+    font-size: 16px;
+    color: #666;
+    margin-top: 10px;
+  }
+  .mainload .circular {
+    height: 36px;
+    width: 36px;
+    animation: loading-rotate 2s linear infinite;
+  }
+  .mainload .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: 0;
+    stroke-width: 3;
+    stroke: #ec3333;
+    stroke-linecap: round;
+  }
+  @keyframes loading-rotate {
+    to {
+      transform: rotate(1turn)
+    }
+  }
+  @keyframes loading-dash {
+    0% {
+      stroke-dasharray: 1,200;
+      stroke-dashoffset: 0
+    }
+    50% {
+      stroke-dasharray: 90,150;
+      stroke-dashoffset: -40px
+    }
+    to {
+      stroke-dasharray: 90,150;
+      stroke-dashoffset: -120px
+    }
+  }
+
+  .swiper-container {
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    /* Fix of Webkit flickering */
+    z-index: 1;
+  }
+  .swiper-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    -o-transition-property: transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+  .swiper-container-android .swiper-slide,
+  .swiper-wrapper {
+    -webkit-transform: translate3d(0px, 0, 0);
+    transform: translate3d(0px, 0, 0);
+  }
+  .swiper-container-multirow > .swiper-wrapper {
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+  }
+  .swiper-slide {
+    -webkit-flex-shrink: 0;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    -o-transition-property: transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+  }
+  .swiper-slide-invisible-blank {
+    visibility: hidden;
+  }
+</style>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
@@ -1609,9 +1609,9 @@
      }
    },
    "@qg/citrus-ui": {
-      "version": "0.0.50",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.50.tgz",
-      "integrity": "sha512-rws0modT35uFdnFhkJKngXyqSk64TnZe0ou9mPSJKTW5+hC+CdMeeA+yMFCTiETi9kFx/ru8KCD9sQa5gMs4zg==",
+      "version": "0.0.51",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.51.tgz",
+      "integrity": "sha512-Xp1yZ0jvejk1iO6tIa3bTmTM61oFvrPLFRlKbA0XUulbZmSlIOK9W49TZTUb2D/jxGZaGYrNd/raD8/Cr99/xg==",
      "requires": {
        "@better-scroll/core": "^2.1.1",
        "@qg/cherry-ui": "^2.20.5",

--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
  "dependencies": {
    "@better-scroll/core": "^2.0.5",
    "@qg/cherry-ui": "^2.20.6",
-    "@qg/citrus-ui": "0.0.50",
+    "@qg/citrus-ui": "0.0.51",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "egg": "^2.3.0",
    "egg-bin": "^4.9.0",