fix: treasure

package.json

@@ -26,6 +26,7 @@
         "dayjs": "^1.10.7",
         "echarts": "^5.4.1",
         "element-ui": "^2.15.6",
+        "html2canvas": "^1.4.1",
         "jszip": "^3.10.1",
         "localforage": "^1.7.3",
         "lodash": "^4.17.15",

src/assets/css/treasure/landscape.less → src/assets/css/adventure/landscape.less

@@ -1,6 +1,16 @@
 .m-body {
     padding: 100px 0;
     position: relative;
+    .u-btn {
+        margin: 0 auto;
+        display: block;
+        margin-top: 10px;
+    }
+}
+#capture {
+    padding: 20px 60px;
+    width: max-content;
+    margin: 0 auto;
 }
 .m-content {
     position: relative;
@@ -59,15 +69,6 @@
                 }
             }
         }
-        &.start2 {
-            animation: leftA2 2s forwards;
-            animation-delay: 1s;
-            @keyframes leftA2 {
-                100% {
-                    left: 10%;
-                }
-            }
-        }
     }
     .m-right {
         .reelCss();
@@ -90,15 +91,6 @@
                 }
             }
         }
-        &.start2 {
-            animation: RightA2 2s forwards;
-            animation-delay: 1s;
-            @keyframes RightA2 {
-                100% {
-                    right: 10%;
-                }
-            }
-        }
     }
     &.start {
         animation: Start 1s forwards;
@@ -117,6 +109,16 @@
             }
         }
     }
+    &.over {
+        transform: translateY(0%) rotate(0);
+        opacity: 1;
+        .m-left {
+            left: 0;
+        }
+        .m-right {
+            right: 0;
+        }
+    }
     .m-qy-box {
         margin-top: 88px;
         margin-left: 60px;
@@ -511,6 +513,10 @@
     left: 50%;
     transform: translateX(-50%);
     top: 30px;
+    display: flex;
+    .el-select:not(:first-child) {
+        margin-left: 10px;
+    }
     .u-tip {
         .mb(10px);
         i {
@@ -522,13 +528,11 @@
             box-shadow: 0 1px 0 @color-link;
         }
     }
-
     .el-input__prefix {
         left: 1px;
         top: 1px;
         .r(5px);
     }
-
     .u-prefix {
         .db;
         .h(30px);
@@ -544,9 +548,8 @@
         padding: 0 10px;
         white-space: nowrap;
     }
-
     .el-input--prefix .el-input__inner {
-        padding-left: 75px;
+        padding-left: 85px;
     }
 }
 

src/assets/css/treasure/portrait.less → src/assets/css/adventure/portrait.less

@@ -2,18 +2,27 @@
     overflow: hidden;
 }
 .m-body {
-    padding-top: 100px;
+    padding-top: 130px;
     margin: 0 auto;
     position: relative;
+    .u-btn {
+        display: block;
+        width: 100%;
+        margin-top: 30px;
+    }
 }
 
+#capture{
+    margin: 0 -20px;
+    padding: 0 20px;
+    width: max-content;
+}
 .m-content {
     position: relative;
     background-image: url(../../img/treasure/portrait/bg.png);
     background-size: 100% auto;
     background-position: center;
     width: 900px;
-    margin: 0 auto;
     img {
         display: block;
     }
@@ -33,8 +42,15 @@
         &.start {
             animation: Start 2s forwards;
         }
+        &.over {
+            transform: translateX(-50%);
+            bottom: 0;
+            &::after {
+                display: none;
+            }
+        }
         &::after {
-            content: " ";
+            content: "";
             width: 100%;
             height: 2300px;
             background-color: white;
@@ -418,6 +434,9 @@
     top: 30px;
     .el-select {
         width: 100%;
+        &:not(:first-child) {
+            margin-top: 10px;
+        }
     }
     .u-tip {
         .mb(10px);
@@ -454,7 +473,7 @@
     }
 
     .el-input--prefix .el-input__inner {
-        padding-left: 75px;
+        padding-left: 85px;
     }
 }
 

src/router/adventure.js

@@ -4,10 +4,28 @@ Vue.use(VueRouter);
 
 const List = () => import("@/views/adventure/AdventureList.vue");
 const Single = () => import("@/views/adventure/AdventureSingle.vue");
+const landscape = () => import("@/views/adventure/landscape.vue");
+const portrait = () => import("@/views/adventure/portrait.vue");
 
 const routes = [
     { name: "list", path: "/", component: List },
     { name: "single", path: "/:id(\\d+)", component: Single },
+    {
+        name: "landscape",
+        path: "/treasure/landscape",
+        component: landscape,
+        meta: {
+            name: "横屏",
+        },
+    },
+    {
+        name: "portrait",
+        path: "/treasure/portrait",
+        component: portrait,
+        meta: {
+            name: "竖屏",
+        },
+    },
 ];
 
 const router = new VueRouter({