兼容mate x2折叠屏

.idea/watcherTasks.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>

app/src/page/appoint.vue

@@ -786,7 +786,24 @@
 
   @media (min-width: 481px) and (max-width: 640px) {
     .context {
-      top: 230px;
+      position: fixed;
+      /*top: 230px;*/
+    }
+  }
+
+  @media (min-width: 641px) and (max-width: 2481px) {
+    .context {
+      position: fixed;
+      top: 38%;
+      /*top: 230px;*/
+    }
+  }
+
+  @media (min-width: 2482px) and (max-width: 3841px) {
+    .context {
+      position: fixed;
+      top: 60%;
+      /*top: 230px;*/
     }
   }
 </style>

package.json

@@ -1,5 +1,9 @@
 {
   "dependencies": {
     "vue-cropper": "^0.5.6"
+  },
+  "devDependencies": {
+    "node-sass": "^5.0.0",
+    "sass-loader": "^11.0.1"
   }
 }