首次提交

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

+# nuxt2_xf_intro
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+
+## Special Directories
+
+You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
+
+### `assets`
+
+The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
+
+### `components`
+
+The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
+
+### `layouts`
+
+Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
+
+
+### `pages`
+
+This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
+
+### `plugins`
+
+The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
+
+### `static`
+
+This directory contains your static files. Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
+
+### `store`
+
+This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).

+.animateDownloadHandIn {
+  -webkit-animation: animateDownloadHandIn 0.6s;
+  animation: animateDownloadHandIn 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+.animateDownloadHandOut {
+  -webkit-animation: animateDownloadHandOut 0.4s;
+  animation: animateDownloadHandOut 0.4s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+
+@keyframes animateDownloadHandIn {
+  0% {
+      -webkit-transform: translateX(-100px);
+      transform: translateX(-100px);
+      opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+      -webkit-transform: translateX(0px);
+      transform: translateX(0px);
+      opacity: 1;
+  }
+}
+
+@keyframes animateDownloadHandOut {
+  0% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  90% {
+      opacity: 0;
+  }
+  100% {
+      -webkit-transform: translateX(-100px);
+      transform: translateX(-100px);
+      opacity: 0;
+  }
+}
+
+.animateMobileDownloadButtonIn {
+  -webkit-animation: animateMobileDownloadButtonIn 0.6s;
+  animation: animateMobileDownloadButtonIn 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+.animateMobileDownloadButtonOut {
+  -webkit-animation: animateMobileDownloadButtonOut 0.6s;
+  animation: animateMobileDownloadButtonOut 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+
+@keyframes animateMobileDownloadButtonIn {
+  0% {
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+      -webkit-transform: translateX(0px);
+      transform: translateX(0px);
+      opacity: 1;
+  }
+}
+@keyframes animateMobileDownloadButtonOut {
+  0% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+
+.animateDownloadTextIn {
+  -webkit-animation: animateDownloadTextIn 0.6s;
+  animation: animateDownloadTextIn 0.6s;
+  animation-delay: 0.4s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+.animateDownloadTextOut {
+  -webkit-animation: animateDownloadTextOut 0.4s;
+  animation: animateDownloadTextOut 0.4s;
+  animation-delay: 0.4s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+
+@keyframes animateDownloadTextIn {
+  0% {
+      -webkit-transform: translateX(100px);
+      transform: translateX(100px);
+      opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+      -webkit-transform: translateX(0px);
+      transform: translateX(0px);
+      opacity: 1;
+  }
+}
+
+@keyframes animateDownloadTextOut {
+  0% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  90% {
+      opacity: 0;
+  }
+  100% {
+      -webkit-transform: translateX(100px);
+      transform: translateX(100px);
+      opacity: 0;
+  }
+}
+
+
+/* 第二个页面 */
+.animateTextTitleIn {
+  -webkit-animation: animateTextTitleIn 0.6s;
+  animation: animateTextTitleIn 0.6s;
+  animation-delay: 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+.animateTextTitleOut {
+  -webkit-animation: animateTextTitleOut 0.6s;
+  animation: animateTextTitleOut 0.6s;
+  animation-delay: 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+@keyframes animateTextTitleIn {
+  0% {
+    -webkit-transform: translateX(-50px);
+    transform: translateX(-50px);
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+@keyframes animateTextTitleOut {
+  0% {
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  90% {
+      opacity: 0;
+  }
+  100% {
+      -webkit-transform: translateX(-50px);
+      transform: translateX(-50px);
+      opacity: 0;
+  }
+}
+
+.animateFunction1BookPage1In {
+  -webkit-animation: animateFunction1BookPage1In 0.6s;
+  animation: animateFunction1BookPage1In 0.6s;
+  animation-delay: 0.3s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.33, 1.92);
+  animation-timing-function: cubic-bezier(0.4, 0, 0.33, 1.92);
+}
+.animateFunction1BookPage1Out {
+  -webkit-animation: animateFunction1BookPage1Out 0.6s;
+  animation: animateFunction1BookPage1Out 0.6s;
+  animation-delay: 0.3s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.33, 1.92);
+  animation-timing-function: cubic-bezier(0.4, 0, 0.33, 1.92);
+}
+@keyframes animateFunction1BookPage1In {
+  0% {
+    -webkit-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes animateFunction1BookPage1Out {
+  0% {
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+}
+
+.animateFunction2BookIn {
+  -webkit-animation: animateFunction2BookIn 0.4s;
+  animation: animateFunction2BookIn 0.4s;
+  animation-delay: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+}
+.animateFunction2BookOut {
+  -webkit-animation: animateFunction2BookOut 0.4s;
+  animation: animateFunction2BookOut 0.4s;
+  animation-delay: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+}
+@keyframes animateFunction2BookIn {
+  0% {
+    -webkit-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+      -webkit-transform: scale(1, 1);
+      transform: scale(1, 1);
+      opacity: 1;
+  }
+}
+@keyframes animateFunction2BookOut {
+  0% {
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+}
+
+.animateFunction3BookIn {
+  -webkit-animation: animateFunction3BookIn 0.8s;
+  animation: animateFunction3BookIn 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+  animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+}
+.animateFunction3BookOut {
+  -webkit-animation: animateFunction3BookOut 0.8s;
+  animation: animateFunction3BookOut 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+  animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+}
+
+@keyframes animateFunction3BookIn {
+  0% {
+    -webkit-transform: translateY(100px);
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+      -webkit-transform: translateY(0px);
+      transform: translateY(0px);
+      opacity: 1;
+  }
+}
+@keyframes animateFunction3BookOut {
+  0% {
+    -webkit-transform: translateY(0px);
+      transform: translateY(0px);
+      opacity: 1;
+  }
+  90% {
+      opacity: 0;
+  }
+  100% {
+      
+      -webkit-transform: translateY(100px);
+    transform: translateY(100px);
+    opacity: 0;
+  }
+}
+
+.animateFunction4In {
+  -webkit-animation: animateFunction4In 0.8s;
+  animation: animateFunction4In 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+  animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+}
+.animateFunction4Out {
+  -webkit-animation: animateFunction4Out 0.8s;
+  animation: animateFunction4Out 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+  animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+}
+
+@keyframes animateFunction4In {
+  0% {
+    -webkit-transform: translateY(-50px);
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+      -webkit-transform: translateY(0px);
+      transform: translateY(0px);
+      opacity: 1;
+  }
+}
+@keyframes animateFunction4Out {
+  0% {
+    -webkit-transform: translateY(0px);
+      transform: translateY(0px);
+      opacity: 1;
+  }
+  90% {
+      opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(-50px);
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+}
+
+.animateFunction4BookIn {
+  -webkit-animation: animateFunction4BookIn 0.6s;
+  animation: animateFunction4BookIn 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+  animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+}
+.animateFunction4BookOut {
+  -webkit-animation: animateFunction4BookOut 0.6s;
+  animation: animateFunction4BookOut 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+  animation-timing-function: cubic-bezier(0.25, 0.15, 0, 1);
+}
+
+@keyframes animateFunction4BookIn {
+  0% {
+    -webkit-transform: translateZ(0) scale(.6);
+    transform: translateZ(0) scale(.6);
+    opacity: 0;
+  }
+  90% {
+      opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateZ(0) scale(1);
+    transform: translateZ(0) scale(1);
+      opacity: 1;
+  }
+}
+@keyframes animateFunction4BookOut {
+  0% {
+    -webkit-transform: translateZ(0) scale(1);
+    transform: translateZ(0) scale(1);
+    opacity: 1;
+  }
+  90% {
+      opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0) scale(.6);
+    transform: translateZ(0) scale(.6);
+    opacity: 0;
+  }
+}
+.animateMobileTextIn {
+  -webkit-animation: animateMobileTextIn 0.4s;
+  animation: animateMobileTextIn 0.4s;
+  animation-delay: 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+.animateMobileTextOut {
+  -webkit-animation: animateMobileTextOut 0.4s;
+  animation: animateMobileTextOut 0.4s;
+  animation-delay: 0.8s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+@keyframes animateMobileTextIn {
+  0% {
+    -webkit-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes animateMobileTextOut {
+  0% {
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+}

+
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio:1.5), screen and (-o-min-device-pixel-ratio:1.5), screen and (min-device-pixel-ratio:1.5) {
+  #page_download_hand {
+    background-image: url(../images/download_hand_2x2740d2.png);
+  }
+  #page_download_mobile_iPhone {
+    background-image: url(../images/ui_2x2761ce.png);
+    background-size: 100% 322%;
+  }
+  #page_download_mobile_android {
+    background-image: url(../images/ui_2x2761ce.png);
+    background-size: 100% 322%;
+    background-position: 0 47%;
+  }
+  #page_function1_book_page3 {
+    background-image: url(../images/function1_book_page2_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function1_book_page2 {
+    background-image: url(../images/function1_book_page2_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function1_book_page1 {
+    background-image: url(../images/function1_book_page1_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function2_book_06 {
+    background-image: url(../images/function2_book_06_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function2_book_05 {
+    background-image: url(../images/function2_book_05_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function3_book {
+    background-image: url(../images/function5_book_2x2740d2.png);
+    background-size: 100% 100%;
+  }
+  #page_function4_book {
+    background-image: url(../images/mobile_function4_table_background_4x.png);
+    background-size: 100% 100%;
+  }
+}
+@media (orientation: portrait) and (max-width: 640pt) and (min-width: 360px) and (max-width: 414px) {
+  body {
+    font-size: 84%;
+  }
+  #page_download_button, #page_download_button {
+    width: 56%;
+    margin-left: -28%;
+  }
+}
+
+@media (orientation: portrait) and (max-width: 640pt) {
+  #page_download_button {
+    display: block;
+    position: absolute;
+    bottom: 10%;
+    width: 60%;
+    left: 50%;
+    margin-left: -30%;
+    opacity: 0;
+  }
+  #page_download_button1 {
+    display: block;
+    position: absolute;
+    bottom: 20%;
+    width: 60%;
+    left: 50%;
+    margin-left: -30%;
+    opacity: 0;
+  }
+  #page_download_button_top {
+    width: 100%;
+    padding-bottom: 23.9%;
+    border-radius: 1000px;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+  }
+  .page_download_button_text{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    font-size: 124%;
+    color: white;
+    font-family: download;
+  }
+  .page_download_button_icon{
+    width: 32px;
+    height: 32px;
+    margin-right: 5px;
+  }
+  #page_download_mobile_iPhone {
+    position: absolute;
+    width: 68.2%;
+    height: 62.8%;
+    left: 50%;
+    margin-left: -33.1%;
+    top: 18.6%;
+    display: none;
+  }
+  #page_download_mobile_android {
+    position: absolute;
+    width: 68.2%;
+    height: 62.8%;
+    left: 50%;
+    margin-left: -28.1%;
+    top: 18.6%;
+  }
+  #page_download_hand {
+    position: absolute;
+    left: -5%;
+    top: 30%;
+    width: 80%;
+  }
+  #page_download_hand1 {
+    position: absolute;
+    left: -5%;
+    top: 30%;
+    width: 80%;
+  }
+  #page_download_show {
+    width: 80%;
+    right: 10%;
+    top: 10%;
+    height: 80%;
+  }
+  #page_download_text {
+    left: 0;
+    top: 5%;
+    color: white;
+    font-size: 160%;
+    line-height: 160%;
+    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+    text-align: center;
+  }
+  #page_function1_text, #page_function2_text, #page_function3_text, #page_function4_text {
+    left: 10%;
+    top: 67.5%;
+    width: 80%;
+  }
+  #page_function1_text_title, #page_function2_text_title, #page_function3_text_title, #page_function4_text_title {
+    font-family: title;
+    color: white;
+    font-size: 150%;
+    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    text-align: center;
+  }
+  #page_function1_text_sub, #page_function2_text_sub, #page_function3_text_sub, #page_function4_text_sub {
+    width: 100%;
+    margin-top: 10px;
+    font-family: text;
+    color: white;
+    font-size: 100%;
+    line-height: 160%;
+    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    text-align: center;
+  }
+  #page_function1_show {
+    top: 12.5%;
+    width: 60%;
+    right: 20%;
+    height: 44.1%;
+    -webkit-transform: scale(0.9, 0.9);
+    -ms-transform: scale(0.9, 0.9);
+    transform: scale(0.9, 0.9);
+  }
+  #page_function2_text {
+    left: 10%;
+    top: 67.5%;
+    width: 80%;
+  }
+  #page_function2_show {
+    top: 12.5%;
+    width: 70%;
+    right: 15%;
+    height: 40%;
+    -webkit-transform: scale(0.9, 0.9);
+    -ms-transform: scale(0.9, 0.9);
+    transform: scale(0.9, 0.9);
+  }
+  #page_function3_show, #page_function5_show, #page_function4_show {
+    top: 17.5%;
+    right: 15%;
+    width: 70%;
+    height: 40%;
+    -webkit-transform: scale(0.9, 0.9);
+    -ms-transform: scale(0.9, 0.9);
+    transform: scale(0.9, 0.9);
+  }
+  #page_function3_book, #page_function4_book  {
+    width: 120%;
+    height: 200%;
+    left: 50%;
+    margin-left: -60%;
+    top: -10%;
+  }
+  #page_function4_show_title{
+    width: 133%;
+    margin-left: -18%;
+    margin-top: -20%;
+  }
+}

+@font-face {
+  font-family: download;
+  src: url("fonts/SourceHanSansSC-Regular.eot");
+  src: url("fonts/SourceHanSansSC-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/SourceHanSansSC-Regular.woff") format("woff"), url("fonts/SourceHanSansSC-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: title;
+  src: url("fonts/SourceHanSansSC-Normal.eot");
+  src: url("fonts/SourceHanSansSC-Normal.eot?#iefix") format("embedded-opentype"), url("fonts/SourceHanSansSC-Normal.woff") format("woff"), url("fonts/SourceHanSansSC-Normal.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: text_family;
+  src: url("fonts/SourceHanSansSC-ExtraLight.eot");
+  src: url("fonts/SourceHanSansSC-ExtraLight.eot?#iefix") format("embedded-opentype"), url("fonts/SourceHanSansSC-ExtraLight.woff") format("woff"), url("fonts/SourceHanSansSC-ExtraLight.ttf") format("truetype");
+}
+#pages{
+  position: relative;
+  height: 100vh;
+}
+.page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+
+/* 第一个页面css */
+#page_download {
+  left: 0%;
+  display: block;
+}
+#page_download_hand {
+  position: absolute;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  height: 100%;
+  left: -5%;
+  bottom: -22%;
+  width: 44%;
+  background-image: url(../images/download_hand_2x2740d2.png);
+}
+
+#page_download_show {
+  position: absolute;
+  top: 30%;
+  right: 15%;
+  width: 38.7%;
+}
+#page_download_show_top {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 54.9%;
+}
+
+#page_download_text {
+  width: 100%;
+  font-family: download;
+  text-align: left;
+  line-height: 180%;
+  color: white;
+  font-size: 260%;
+  font-weight: 500;
+  position: absolute;
+  top: 10%;
+  left: 20%;
+  opacity: 0;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media (min-aspect-ratio: 16 / 5) {
+  #page_download_hand {
+    width: 26.4%;
+  }
+  #page_function1_show, #page_function2_show, #page_function3_show {
+    -webkit-transform: scale(0.6, 0.6);
+    -ms-transform: scale(0.6, 0.6);
+    transform: scale(0.6, 0.6);
+  }
+}
+@media (min-aspect-ratio: 16 / 6) and (max-aspect-ratio: 16 / 5) {
+  #page_download_hand {
+      width: 30.8%;
+  }
+  #page_function1_show, #page_function2_show, #page_function3_show {
+    -webkit-transform: scale(0.7, 0.7);
+    -ms-transform: scale(0.7, 0.7);
+    transform: scale(0.7, 0.7);
+  }
+}
+@media (min-aspect-ratio: 16 / 7) and (max-aspect-ratio: 16 / 6) {
+  #page_download_hand {
+      width: 35.2%;
+  }
+  #page_function1_show, #page_function2_show, #page_function3_show {
+    -webkit-transform: scale(0.8, 0.8);
+    -ms-transform: scale(0.8, 0.8);
+    transform: scale(0.8, 0.8);
+  }
+}
+@media (min-aspect-ratio: 16 / 8) and (max-aspect-ratio: 16 / 7) {
+  #page_download_hand {
+    width: 39.6%;
+  }
+  #page_function1_show, #page_function2_show, #page_function3_show {
+    -webkit-transform: scale(0.9, 0.9);
+    -ms-transform: scale(0.9, 0.9);
+    transform: scale(0.9, 0.9);
+  }
+}
+@media screen and (min-device-width: 1366px), screen and (min-device-width: 1366px), screen and (min-device-width: 1366px), screen and (min-device-width: 1366px) {
+  #page_download_hand {
+    background-image: url(../images/download_hand_2x2740d2.png);
+  }
+  #page_function1_book_page3 {
+    background-image: url(../images/function1_book_page2_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function1_book_page2 {
+    background-image: url(../images/function1_book_page2_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function1_book_page1 {
+    background-image: url(../images/function1_book_page1_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function2_book_06 {
+    background-image: url(../images/function2_book_06_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function2_book_05 {
+    background-image: url(../images/function2_book_05_2x2761ce.jpg);
+    background-size: 100% 100%;
+  }
+  #page_function3_book {
+    background-image: url(../images/function5_book_2x2740d2.png);
+    background-size: 100% 100%;
+  }
+  #page_function4_book {
+    background-image: url(../images/function4_table_background_4x2740d2.png) no-repeat;
+    background-size: auto 100%;
+  }
+  #page_function5_book {
+    background-image: url(../images/function3_book_2x2740d2.png);
+    background-size: 100% 100%;
+  }
+}
+
+/* 第二个页面css */
+#page_function1 {
+  left: 0%;
+}
+#page_function1_text {
+  position: absolute;
+  left: 15%;
+  top: 35%;
+  width: 32.2%;
+}
+#page_function1_text_title {
+  font-family: title;
+  color: white;
+  font-weight: 500;
+  font-size: 180%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function1_text_sub {
+  margin-top: 16px;
+  color: white;
+  font-weight: 500;
+  font-size: 130%;
+  line-height: 175%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function1_show {
+  position: absolute;
+  right: 15%;
+  top: 20%;
+  width: 26.1%;
+}
+
+#page_function1_show_top {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 150%;
+}
+#page_function1_book {
+  position: absolute;
+  width: 100%;
+  height: 92%;
+}
+
+#page_function1_book_page3 {
+  position: absolute;
+  height: 79.6%;
+  width: 53.6%;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  background-image: url(../images/function1_book_page2_2x2761ce.jpg);
+  background-size: 100% 100%;
+}
+#page_function1_book_page2 {
+  position: absolute;
+  height: 79.6%;
+  width: 53.6%;
+  left: 0;
+  bottom: 0;
+  opacity: 0;
+  background-image: url(../images/function1_book_page2_2x2761ce.jpg);
+  background-size: 100% 100%;
+}
+
+#page_function1_book_page1 {
+  position: absolute;
+  width: 67.8%;
+  height: 100%;
+  right: 16.1%;
+  bottom: 0;
+  opacity: 0;
+  box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.1);
+  background-image: url(../images/function1_book_page1_2x2761ce.jpg);
+  background-size: 100% 100%;
+}
+
+/* 第三个页面 */
+#page_function2 {
+  left: 0%;
+}
+#page_function2_show {
+  position: absolute;
+  right: 15%;
+  top: 20%;
+  width: 33.7%;
+}
+#page_function2_text {
+  position: absolute;
+  left: 15%;
+  top: 35%;
+  width: 32.2%;
+  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
+}
+#page_function2_text_title {
+  font-family: title;
+  color: white;
+  font-weight: 500;
+  font-size: 180%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function2_text_sub {
+  margin-top: 16px;
+  font-family: text_family;
+  color: white;
+  font-weight: 500;
+  font-size: 130%;
+  line-height: 175%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function2_show_top {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 100%;
+}
+#page_function2_book {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: 0;
+}
+#page_function2_book_06 {
+  position: absolute;
+  width: 40%;
+  height: 54%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  background-image: url(../images/function2_book_06_2x2761ce.jpg);
+  background-size: 100% 100%;
+}
+#page_function2_book_05 {
+  position: absolute;
+  width: 44%;
+  height: 54%;
+  bottom: 0px;
+  right: 0;
+  opacity: 0;
+  background-image: url(../images/function2_book_05_2x2761ce.jpg);
+  background-size: 100% 100%;
+}
+#page_function2_book_04 {
+  color: #fff;
+  font-size: 120%;
+  position: absolute;
+  width: 40%;
+  top: 55%;
+  left: 0;
+  text-align: center;
+  opacity: 0;
+}
+#page_function2_book_03 {
+  color: #fff;
+  font-size: 120%;
+  position: absolute;
+  width: 40%;
+  top: 36%;
+  right: 0;
+  text-align: center;
+  opacity: 0;
+}
+#page_function2_book_01 {
+  font-weight: bold;
+  color: #fff;
+  font-size: 180%;
+  position: absolute;
+  left: 46%;
+  top: 46%;
+  opacity: 0;
+  /* box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1); */
+}
+/* 第四个页面 */
+#page_function3 {
+  left: 0%;
+}
+#page_function3_text {
+  position: absolute;
+  width: 29.3%;
+  left: 15%;
+  top: 35%;
+}
+#page_function3_text_title {
+  font-family: title;
+  color: white;
+  font-weight: 500;
+  font-size: 180%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function3_text_sub {
+  margin-top: 16px;
+  font-family: text;
+  font-weight: 500;
+  color: white;
+  font-size: 130%;
+  line-height: 175%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+
+#page_function3_show {
+  position: absolute;
+  right: 10%;
+  top: 20%;
+  width: 41.5%;
+}
+
+#page_function3_show_top {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 81.1%;
+}
+#page_function3_talk {
+  position: absolute;
+  width: 100%;
+  height: 56.5%;
+}
+#page_function3_book {
+  position: absolute;
+  width: 100%;
+  height: 160%;
+  bottom: -60%;
+  opacity: 0;
+  background-image: url(../images/function5_book_2x2740d2.png);
+  background-size: 100% 100%;
+}
+
+
+
+/* 第五个页面 */
+#page_function5_show {
+  position: absolute;
+  right: 10%;
+  top: 20%;
+  width: 41.5%;
+}
+#page_function5_show_top {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 81.1%;
+}
+#page_function5_talk {
+  position: absolute;
+  width: 100%;
+  height: 56.5%;
+}
+#page_function5_book {
+  position: absolute;
+  width: 100%;
+  height: 80.1%;
+  bottom: -10%;
+  opacity: 0;
+  background-image: url(../images/function3_book_2x2740d2.png);
+  background-size: 100% 100%;
+}
+
+/* 第六个页面 */
+#page_function4 {
+  left: 0%;
+}
+#page_function4_text {
+  position: absolute;
+  left: 15%;
+  width: 34.1%;
+  top: 25%;
+}
+#page_function4_text_title {
+  font-family: title;
+  color: white;
+  font-weight: 500;
+  font-size: 180%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function4_text_sub {
+  margin-top: 16px;
+  font-family: text;
+  color: white;
+  font-weight: 500;
+  font-size: 130%;
+  line-height: 175%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+#page_function4_show {
+  position: absolute;
+  right: 10%;
+  top: 20%;
+  width: 41.5%;
+}
+#page_function4_show_top {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 81.1%;
+}
+#page_function4_talk {
+  position: absolute;
+  width: 100%;
+  height: 56.5%;
+}
+#page_function4_show_title{
+  color: #fff;
+  text-align: center;
+  opacity: 0;
+  width: 80%;
+  margin-left: 10%;
+}
+#page_function4_book {
+  position: absolute;
+  width: 100%;
+  height: 90.1%;
+  right: -20%;
+  bottom: -10%;
+  opacity: 0;
+  background-image: url(../images/function4_table_background_4x2740d2.png);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+}

+img {
+    border: 0 none;
+}
+
+#logo_ie {
+    position: fixed;
+    z-index: 1000;
+    left: 64px;
+    width: 169px;
+    height: 40px;
+    top: 22px;
+    cursor: pointer;
+}
+
+#logo {
+    display: none;
+}
+
+#page_download_hand {
+    display: none;
+}
+
+#page_download_hand_ie {
+    position: absolute;
+    width: 38%;
+    bottom: -5%;
+    left: 0;
+}
+
+#background {
+    display: none;
+}
+
+#background_ie {
+    position: absolute;
+    height: 100%;
+}
+
+#nav_iPhone {
+    border: none\9;
+    width: 123px;
+    opacity: 0.6\9;
+    background-image: url("../images/ie/ie_navbtn2761ce.png");
+    filter: alpha(opacity=60);
+}
+
+#ie_nav_iPhone_img {
+    position: absolute;
+    left: 16px;
+    top: 7px;
+}
+
+#nav_android {
+    border: none\9;
+    width: 123px;
+    opacity: 0.6\9;
+    background-image: url("../images/ie/ie_navbtn2761ce.png");
+    filter: alpha(opacity=60);
+}
+
+#ie_nav_android_img {
+    position: absolute;
+    left: 14px;
+    top: 4px;
+}
+
+#nav_QRCode {
+    opacity: 0.6\9;
+    width: 123px;
+    border: none\9;
+    cursor: pointer;
+    background-image: url("../images/ie/ie_navbtn2761ce.png");
+    filter: alpha(opacity=60);
+}
+
+#ie_nav_QRCode_img {
+    position: absolute;
+    left: 17px;
+    top: 7px;
+}
+
+#arrow_right {
+    opacity: 1;
+}
+
+#nav_QRCode_hover {
+    background: url(about:blank);
+}
+
+#nav_QRCode_hover_border {
+    border: 1px solid white;
+    display: none;
+    opacity: 0\9;
+    filter: alpha(opacity=0);
+}
+
+#nav_QRCode_hover_img {
+    opacity: 0\9;
+    filter: alpha(opacity=0);
+}
+
+#page_download_hand {
+    opacity: 1;
+}
+
+#page_download_text {
+    opacity: 1;
+}
+
+#page_function1_text_title {
+    opacity: 1;
+}
+
+#page_function1_text_sub {
+    opacity: 1;
+}
+
+#page_function2_text_title {
+    opacity: 1;
+}
+
+#page_function2_text_sub {
+    opacity: 1;
+}
+
+#page_function3_text_title {
+    opacity: 1;
+}
+
+#page_function3_text_sub {
+    opacity: 1;
+}
+
+#page_function4_text_title {
+    opacity: 1;
+}
+
+#page_function4_text_sub {
+    opacity: 1;
+}
+
+#page_function1_book_page1 {
+    opacity: 1;
+}
+
+#page_function1_book_page2 {
+    opacity: 1;
+}
+
+#page_function1_book_page3 {
+    opacity: 1;
+}
+
+#page_function1_skin {
+    opacity: 1;
+}
+
+#page_function1_font {
+    opacity: 1;
+}
+
+#page_function2_face_left {
+    opacity: 1;
+}
+
+#page_function2_face_right {
+    opacity: 1;
+}
+
+#page_function2_face_main {
+    opacity: 1;
+}
+
+#page_function2_face_text {
+    opacity: 1;
+}
+
+#page_function2_book_01 {
+    opacity: 1;
+}
+
+#page_function2_book_02 {
+    opacity: 1;
+}
+
+#page_function2_book_03 {
+    opacity: 1;
+}
+
+#page_function2_book_04 {
+    opacity: 1;
+}
+
+#page_function2_book_05 {
+    opacity: 1;
+}
+
+#page_function2_book_06 {
+    opacity: 1;
+}
+
+#page_function2_book_07 {
+    opacity: 1;
+}
+
+#page_function3_talk_01 {
+    opacity: 1;
+}
+
+#page_function3_talk_02 {
+    opacity: 1;
+}
+
+#page_function3_talk_03 {
+    opacity: 1;
+}
+
+#page_function3_talk_04 {
+    opacity: 1;
+}
+
+#page_function3_talk_05 {
+    opacity: 1;
+}
+
+#page_function3_talk_06 {
+    opacity: 1;
+}
+
+#page_function3_book {
+    opacity: 1;
+}
+
+#page_function4_table_background {
+    opacity: 1;
+}
+
+#page_function4_table_column_01 {
+    opacity: 1;
+}
+
+#page_function4_table_column_02 {
+    opacity: 1;
+}
+
+#page_function4_table_column_03 {
+    opacity: 1;
+}
+
+#page_function4_table_column_04 {
+    opacity: 1;
+}
+
+#page_function4_table_column_05 {
+    opacity: 1;
+}
+
+#page_function4_table_face_01 {
+    opacity: 1;
+}
+
+#page_function4_table_face_02 {
+    opacity: 1;
+}
+
+#page_function4_table_face_03 {
+    opacity: 1;
+}
+
+#page_function4_table_face_04 {
+    opacity: 1;
+}
+
+#page_function4_table_face_05 {
+    opacity: 1;
+}
+
+#page_function4_table_time_01 {
+    opacity: 1;
+}
+
+#page_function4_table_time_02 {
+    opacity: 1;
+}
+
+#page_function4_table_time_03 {
+    opacity: 1;
+}
+
+#page_function4_table_time_04 {
+    opacity: 1;
+}
+
+#page_function4_table_time_05 {
+    opacity: 1;
+}
+
+#pageControl {
+    opacity: 1;
+}
+
+.pageControl {
+    background-color: transparent;
+    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="./demo/290/images/ie/ie_pageControl.png")alpha(opacity=40);
+}
+
+#page_function1 {
+    display: block;
+    margin-left: 100%;
+    position: absolute;
+}
+
+#page_function2 {
+    display: block;
+    margin-left: 200%;
+    position: absolute;
+}
+
+#page_function3 {
+    display: block;
+    margin-left: 300%;
+    position: absolute;
+}
+
+#page_function4 {
+    display: block;
+    margin-left: 400%;
+    position: absolute;
+}
+
+#arrow_left {
+    opacity: 1;
+    -ms-transform: scaleX(1)\9\0;
+}

+#mobile_view{
+    position: relative;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    height: 100vh;
+    background-color: #2f2318;
+}
+@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio:1.5), screen and (-o-min-device-pixel-ratio:1.5), screen and (min-device-pixel-ratio:1.5) {
+    #logo {
+        background-image: url(../images/logo_2x279486.png);
+    }
+    #arrow_down {
+        background-image: url(../images/ui_2x2761ce.png);
+        background-size: 659.6% 884.6%;
+        background-position: 18.4% 73%;
+    }
+}
+@media (orientation: portrait) and (max-width: 640pt) and (min-width: 360px) and (max-width: 414px) {
+    body {
+        font-size: 84%;
+    }
+}
+#background {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 500%;
+    background-image: url(../images/mobile_background2740d2.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    transition: all 0.6s;
+}
+#logo {
+    position: fixed;
+    z-index: 1000;
+    display: block;
+    width: 105px;
+    height: 24px;
+    left: 24px;
+    top: 12px;
+    background-image: url(../images/logo_2x279486.png);
+    background-size: 100% 100%;
+    cursor: pointer;
+}
+
+#arrow_down {
+    position: fixed;
+    display: block;
+    z-index: 1000;
+    width: 23.5px;
+    height: 13.5px;
+    bottom: 2.5%;
+    left: 50%;
+    margin-left: -12px;
+    opacity: 0.8;
+    background-image: url(../images/ui_2x2761ce.png);
+    background-size: 659.6% 884.6%;
+    background-position: 18.4% 73%;
+}
+.animateArrowDown {
+    -webkit-animation: animateArrowDown 1.5s;
+    animation: animateArrowDown 1.5s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+@keyframes animateArrowDown {
+    0% {
+        opacity: 0.5;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    33% {
+        opacity: 0.5;
+        -webkit-transform: translateY(-5px);
+        transform: translateY(-5px);
+    }
+    100% {
+        opacity: 0.5;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+}

+
+  body {
+    overflow: hidden;
+    background-color: #2f2318;
+  }
+
+  @media (min-width: 1680px) and (max-width: 1921px) {
+    body {
+      font-size: 135%;
+    }
+  }
+  @media (min-width: 1440px) and (max-width: 1680px) {
+    body {
+      font-size: 112%;
+    }
+  }
+  @media (min-width: 1366px) and (max-width: 1440px) {
+    body {
+      font-size: 100%;
+    }
+  }
+  @media (min-width: 1280px) and (max-width: 1366px) {
+    body {
+      font-size: 90%;
+    }
+  }
+  @media (min-width: 1024px) and (max-width: 1280px) {
+    body {
+      font-size: 86%;
+    }
+  }
+  .view {
+    position: relative;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    background-color: #2f2318;
+  }
+  #background {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 1000%;
+    background-image: url(../images/background2740d2.jpg);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    transition: all 0.6s;
+  }
+  @media screen and (min-device-width: 1366px),
+    screen and (min-device-width: 1366px),
+    screen and (min-device-width: 1366px),
+    screen and (min-device-width: 1366px) {
+    #background {
+      background-image: url(../images/background2740d2.jpg);
+      background-size: auto 100%;
+      background-repeat: no-repeat;
+    }
+    #logo {
+      background-image: url(../images/logo279486.png);
+    }
+    #nav_iPhone_img {
+      background-image: url(../images/nav279486.png);
+      background-size: 108px 172px;
+    }
+    #nav_android_img {
+      background-image: url(../images/nav279486.png);
+      background-size: 108px 172px;
+      background-position: 0 -21px;
+    }
+    #nav_QRCode_img {
+      background-image: url(../images/nav279486.png);
+      background-size: 108px 172px;
+      background-position: 0 -44px;
+    }
+    #nav_QRCode_hover_img {
+        background-image: url(../images/nav279486.png);
+        background-size: 108px 172px;
+        background-position: 0 100%;
+        background-repeat: no-repeat;
+    }
+  }
+  #logo {
+    position: fixed;
+    z-index: 1000;
+    display: block;
+    left: 64px;
+    width: 169px;
+    height: 40px;
+    top: 22px;
+    background-size: 100% 100%;
+    cursor: pointer;
+    background-image: url(../images/logo279486.png);
+  }
+  #nav_iPhone {
+    position: fixed;
+    z-index: 1000;
+    width: 124px;
+    height: 34px;
+    border-radius: 40px;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    top: 22px;
+    right: 340px;
+    opacity: 0.6;
+    transition: opacity 0.4s;
+    animation: moveOpcityIn 2.3s;
+  }
+  @keyframes moveOpcityIn {
+    0%{
+      opacity: 0;
+    }
+    90%{
+      opacity: 0.6;
+    }
+    100%{
+      opacity: 0.6;
+    }
+  }
+  #nav_iPhone:hover {
+    opacity: 1;
+  }
+  #nav_iPhone_img {
+    position: absolute;
+    left: 16px;
+    top: 7px;
+    width: 93px;
+    height: 21px;
+    cursor: pointer;
+    background-image: url(../images/nav279486.png);
+    background-size: 108px 172px;
+  }
+  #nav_android {
+    position: fixed;
+    z-index: 1000;
+    width: 124px;
+    height: 34px;
+    border-radius: 40px;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    top: 22px;
+    right: 196px;
+    opacity: 0.6;
+    transition: opacity 0.4s;
+    animation: moveOpcityIn 2.3s;
+  }
+  #nav_android:hover {
+    opacity: 1;
+  }
+  #nav_android_img {
+    position: absolute;
+    left: 17px;
+    top: 6px;
+    width: 93px;
+    height: 23px;
+    cursor: pointer;
+    background-image: url(../images/nav279486.png);
+    background-size: 108px 172px;
+    background-position: 0 -21px;
+  }
+  #nav_QRCode {
+    position: fixed;
+    z-index: 1000;
+    width: 124px;
+    height: 34px;
+    border-radius: 40px;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    top: 22px;
+    right: 52px;
+    opacity: 0.6;
+    transition: opacity 0.4s;
+    animation: moveOpcityIn 2.3s;
+  }
+  #nav_QRCode:hover {
+    opacity: 1;
+  }
+  #nav_QRCode:hover #nav_QRCode_hover {
+    opacity: 1;
+    transform: translateY(20px);
+  }
+  #nav_QRCode_img {
+    position: absolute;
+    left: 17px;
+    top: 7px;
+    width: 93px;
+    height: 20px;
+    cursor: pointer;
+    background-image: url(../images/nav279486.png);
+    background-size: 108px 172px;
+    background-position: 0 -44px;
+  }
+
+  #nav_QRCode_hover {
+    cursor: default;
+    top: 25px;
+    left: -1px;
+    padding-top: 40px;
+    margin-top: -40px;
+    right: -1px;
+    position: absolute;
+    opacity: 0;
+    transition: all 0.4s;
+}
+ #nav_QRCode_hover_border {
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    width: 108px;
+    height: 108px;
+    padding: 8px;
+}
+#nav_QRCode_hover_img {
+    width: 108px;
+    height: 108px;
+    position: absolute;
+    opacity: 1;
+    background-image: url(../images/nav279486.png);
+    background-size: 108px 172px;
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+}

+@media screen and (min-device-width: 1366px), screen and (min-device-width: 1366px), screen and (min-device-width: 1366px), screen and (min-device-width: 1366px) {
+  #arrow_right_height, #arrow_left_height {
+    background-image: url(../images/ui_2x2761ce.png);
+    background-size: 738.1% 284.0%;
+    background-position: 0 97%;
+  }
+}
+
+#pageControl {
+  position: fixed;
+  width: 198px;
+  height: 10px;
+  bottom: 5%;
+  left: 50%;
+  z-index: 1500;
+  margin-left: -75px;
+}
+.pageControl {
+  float: left;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: white;
+  opacity: 0.4;
+  margin-left: 20px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.activeControl{
+  opacity: 1;
+  transform: scale(1.2, 1.2);
+}
+.pageControl:first-child {
+  margin-left: 0;
+}
+
+#arrow_right {
+  position: fixed;
+  z-index: 1000;
+  width: 2%;
+  height: 12%;
+  right: 2.5%;
+  max-width: 33px;
+  max-height: 64px;
+  top: 50%;
+  margin-top: -3.3%;
+  cursor: pointer;
+}
+#arrow_right_height, #arrow_left_height {
+  background-image: url(../images/ui_2x2761ce.png);
+  background-size: 738.1% 284.0%;
+  background-position: 0 97%;
+  width: 100%;
+  height: 100%;
+}
+
+#arrow_left {
+  position: fixed;
+  z-index: 1000;
+  width: 2%;
+  height: 12%;
+  left: 2.5%;
+  max-width: 33px;
+  max-height: 64px;
+  top: 50%;
+  margin-top: -3.3%;
+  cursor: pointer;
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+
+.animateBaseIn {
+  -webkit-animation: animateBaseIn 0.6s;
+  animation: animateBaseIn 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+.animateBaseOut {
+  -webkit-animation: animateBaseOut 0.4s;
+  animation: animateBaseOut 0.4s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+
+@keyframes animateBaseIn {
+  0%{
+    opacity: 0;
+  }
+  90%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+
+@keyframes animateBaseOut {
+  0%{
+    opacity: 1;
+  }
+  90%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 0;
+  }
+}

+<template>
+  <div class="view">
+    <!-- 背景 -->
+    <div
+      id="background"
+      :style="`transform: translateX(${translateDistance})`"
+    ></div>
+    <!-- logo -->
+    <h1 id="logo"></h1>
+    <!-- 头部导航 -->
+    <div id="nav">
+      <a href="#" id="nav_iPhone" @click.stop="downloadAppStore">
+        <div id="nav_iPhone_img"></div>
+      </a>
+      <a
+        href="http://xfappht.crgx.net/profile/upload/2023/09/01/xf_app_2023090101_20230901163308A004.apk"
+        id="nav_android"
+      >
+        <div id="nav_android_img"></div>
+      </a>
+      <div id="nav_QRCode">
+        <div id="nav_QRCode_img"></div>
+        <div id="nav_QRCode_hover">
+          <div id="nav_QRCode_hover_border">
+            <div id="nav_QRCode_hover_img"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="pages">
+      <div v-show="current == 0" class="page">
+        <div
+          class="table_data"
+          :class="[current == 0 ? 'tableIn' : 'tableOut']"
+        >
+          <h2 class="table_title">消防维保助手私有化租用价格表</h2>
+          <a
+            href="https://xfwbtg.crgx.net/xfwb_quotation.pdf"
+            download="消防维保公网报价单.pdf"
+            class="table_download"
+          >
+            <img
+              class="imgdown"
+              src="../assets/images/download.png"
+              alt="下载"
+            />
+            点击下载查看完整报价
+          </a>
+          <el-table
+            :data="tableData"
+            border
+            style="width: 100%"
+            :header-cell-style="{
+              color: '#fff',
+              fontSize: '14px',
+              textAlign: 'center',
+            }"
+            @cell-mouse-enter="handleCellMouseEnter"
+            @cell-mouse-leave="rowCurrent = 0"
+          >
+            <el-table-column
+              prop="index"
+              label="序号"
+              align="center"
+              width="60"
+            >
+              <template #default="{ row }">
+                <span
+                  class="table_text"
+                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
+                  >{{ row.index }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="产品名称"
+              align="center"
+              width="180"
+              prop="productName"
+            >
+              <template #default="{ row }">
+                <el-popover placement="top-start" trigger="hover">
+                  <span style="max-width: 600px">{{ row.productName }}</span>
+                  <span
+                    slot="reference"
+                    class="table_text"
+                    :style="{
+                      color: row.index == rowCurrent ? '#000' : '#fff',
+                    }"
+                    >{{ row.productName }}</span
+                  >
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="quantity"
+              align="center"
+              label="数量"
+              width="60"
+            >
+              <template #default="{ row }">
+                <span
+                  class="table_text"
+                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
+                  >{{ row.quantity }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column prop="unitPrice" label="单价" width="130">
+              <template #default="{ row }">
+                <span
+                  class="table_text"
+                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
+                  >{{ row.unitPrice }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column prop="totalPrice" label="总价" width="130">
+              <template #default="{ row }">
+                <span
+                  class="table_text"
+                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
+                  >{{ row.totalPrice }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column label="参数" align="center" prop="params">
+              <template #default="{ row }">
+                <el-popover placement="top-start" trigger="hover">
+                  <div style="max-width: 600px">{{ row.params }}</div>
+                  <span
+                    slot="reference"
+                    class="table_text"
+                    :style="{
+                      color: row.index == rowCurrent ? '#000' : '#fff',
+                    }"
+                    >{{ row.params }}</span
+                  >
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="180"
+              show-overflow-tooltip
+            >
+              <template #default="{ row }">
+                <span
+                  class="table_text"
+                  :style="{ color: row.index == rowCurrent ? '#000' : '#fff' }"
+                  >{{ row.remark }}</span
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div v-show="current == 1" class="page" id="page_download">
+        <div
+          class="img"
+          :class="[
+            current == 1 ? 'animateDownloadHandIn' : 'animateDownloadHandOut',
+          ]"
+          id="page_download_hand"
+        ></div>
+        <div id="page_download_show">
+          <div id="page_download_show_top">
+            <div
+              id="page_download_text"
+              :class="[
+                current == 1
+                  ? 'animateDownloadTextIn'
+                  : 'animateDownloadTextOut',
+              ]"
+            >
+              消防维保助手
+              <div>即时同步新地标规范，强制约束规范填写</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 2" class="page" id="page_function1">
+        <div id="page_function1_text">
+          <h1
+            id="page_function1_text_title"
+            :class="[
+              current == 2 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            维保原始记录电子化
+          </h1>
+          <h2
+            id="page_function1_text_sub"
+            :class="[
+              current == 2 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            实时记录，远程可查。精心打磨，只为你极速体验。
+          </h2>
+        </div>
+        <div id="page_function1_show">
+          <div id="page_function1_show_top">
+            <div id="page_function1_book">
+              <div
+                id="page_function1_book_page3"
+                :class="[
+                  current == 2
+                    ? 'animateDownloadTextIn'
+                    : 'animateDownloadTextOut',
+                ]"
+              ></div>
+              <div
+                id="page_function1_book_page2"
+                :class="[
+                  current == 2
+                    ? 'animateDownloadHandIn'
+                    : 'animateDownloadHandOut',
+                ]"
+              ></div>
+              <div
+                id="page_function1_book_page1"
+                :class="[
+                  current == 2
+                    ? 'animateFunction1BookPage1In'
+                    : 'animateFunction1BookPage1Out',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 3" class="page" id="page_function2">
+        <div id="page_function2_text">
+          <h1
+            id="page_function2_text_title"
+            :class="[
+              current == 3 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            电子签名
+          </h1>
+          <h2
+            id="page_function2_text_sub"
+            :class="[
+              current == 3 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            甲乙双方共通约束，省时省力节约时间
+          </h2>
+        </div>
+        <div id="page_function2_show">
+          <div id="page_function2_show_top">
+            <div id="page_function2_book">
+              <div
+                id="page_function2_book_06"
+                :class="[
+                  current == 3
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              ></div>
+              <div
+                id="page_function2_book_05"
+                :class="[
+                  current == 3
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              ></div>
+              <div
+                id="page_function2_book_04"
+                :class="[
+                  current == 3
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              >
+                传统手写
+              </div>
+              <div
+                id="page_function2_book_03"
+                :class="[
+                  current == 3
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              >
+                智能签名
+              </div>
+              <div
+                id="page_function2_book_01"
+                :class="[
+                  current == 3
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              >
+                VS
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 4" class="page" id="page_function3">
+        <div id="page_function3_text">
+          <h1
+            id="page_function3_text_title"
+            :class="[
+              current == 4 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            资质证明
+          </h1>
+          <h2
+            id="page_function3_text_sub"
+            :class="[
+              current == 4 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            已取得著作权证书，放心使用
+          </h2>
+        </div>
+        <div id="page_function3_show">
+          <div id="page_function3_show_top">
+            <div id="page_function3_talk">
+              <div
+                id="page_function3_book"
+                :class="[
+                  current == 4
+                    ? 'animateFunction3BookIn'
+                    : 'animateFunction3BookOut',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 5" class="page" id="page_function3">
+        <div id="page_function3_text">
+          <h1
+            id="page_function3_text_title"
+            :class="[
+              current == 5 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            随时打印
+          </h1>
+          <h2
+            id="page_function3_text_sub"
+            :class="[
+              current == 5 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            纸质文档随时打印，按需留档
+          </h2>
+        </div>
+        <div id="page_function5_show">
+          <div id="page_function5_show_top">
+            <div id="page_function5_talk">
+              <div
+                id="page_function5_book"
+                :class="[
+                  current == 5
+                    ? 'animateFunction3BookIn'
+                    : 'animateFunction3BookOut',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 6" class="page" id="page_function4">
+        <div id="page_function4_text">
+          <h1
+            id="page_function4_text_title"
+            :class="[
+              current == 6 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            联系我们
+          </h1>
+          <h2
+            id="page_function4_text_sub"
+            :class="[
+              current == 6 ? 'animateTextTitleIn' : 'animateTextTitleOut',
+            ]"
+          >
+            <p>广西世纪创软信息技术有限公司</p>
+            <p>邮箱：weiyi@crgx.net</p>
+            <p>非©广西消防救援总队出品</p>
+          </h2>
+        </div>
+        <div id="page_function4_show">
+          <div id="page_function4_show_top">
+            <div id="page_function4_talk">
+              <div
+                id="page_function4_show_title"
+                :class="[
+                  current == 6 ? 'animateFunction4In' : 'animateFunction4In',
+                ]"
+              >
+                广西壮族自治区南宁市青秀万达银座520室
+              </div>
+              <div
+                id="page_function4_book"
+                :class="[
+                  current == 6
+                    ? 'animateFunction4BookIn'
+                    : 'animateFunction4BookOut',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 左右箭头 -->
+    <div
+      v-show="current !== 6"
+      id="arrow_right"
+      @click="toggleCurrent(current + 1)"
+    >
+      <div id="arrow_right_height"></div>
+    </div>
+    <div
+      v-show="current !== 0"
+      id="arrow_left"
+      :class="{ animateBaseIn: current !== 0, animateBaseOut: current === 0 }"
+      @click="toggleCurrent(current - 1)"
+    >
+      <div id="arrow_left_height"></div>
+    </div>
+    <!-- 按钮 -->
+    <div id="pageControl">
+      <div
+        v-for="(item, index) in 7"
+        :key="item"
+        :class="{ activeControl: current == index }"
+        class="pageControl"
+        id="pageControl_button"
+        @click="toggleCurrent(index)"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HomePage",
+  data() {
+    return {
+      current: 0,
+      rowCurrent: 0,
+      translateDistance: "0%",
+      tableData: [
+        {
+          index: 1,
+          productName:
+            "维保助手后台端服务（电脑端）（包含公司端、工程师端、后台监管端）",
+          quantity: 1,
+          unit: "年",
+          unitPrice: "￥80,000.00",
+          totalPrice: "￥80,000.00",
+          params:
+            "企业管理功能：管理产品注册入驻的消防技术服务机构，包含：公司名称、省、市、县、地址、营业执照代码、审核状态查询，可对注册的技术服务机构信息进行管理、对企业增删改查，人员管理：管理产品中入驻的人员信息、包含：姓名、邮箱、性别、出生日期、证件号码、手机号码、审核状态查询；及增删改查、证书管理：对产品中可选择性证书；证书类型、证书名称、级别进行管理包含：证书类型、证书名称、证书级别进行筛选查询及增删改查；消防 app：管理 app 版本及发布 app 更新；可对 app 版本进行增删改查、企业人员管理：对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告管理：包含发布通知公告，电脑端、安卓端、小程序端、苹果手机端接收；包含对公告标题、操作人员、类型、公告状态条件查询、用户管理模块：分级分权用户管理模块，可对用户账号、用户昵称、openid、邮箱、手机号、状态、创建时间进行查询，对用户进行增删改查；角色管理模块、配置产品内用户角色，对角色进行增删改查、包含角色名称、权限字符、角色状态、创建时间进行查询；、菜单管理：管理人员权限菜单模块，包含：菜单名称、状态查询、对菜单进行进行增删改查。部门管理模块：用户部门管理、用于管理系统操作部门权限区分；包哈；部门名称、状态查询、对部门进行增删改查、岗位管理：用户岗位管理，用于管理系统岗位、进行权限区分、包含：岗位编码、岗位名称、状态查询，对岗位进行增删改查；字典管理：对系统参数进行管理，包含字典名称、字典类型、状态、创建时间进行查询；参数设置：用于管理系统参数，包含参数名称、参数键名、系统内置、创建时间查询，对参数增删改查；日志管理：对系统的操作进行日志查询、登录日志：对系统用户登录记录进行查询、系统监控：在线用户：对系统在线用户进行查询、定时任务：系统定时任务设定，对系统执行定时任务、包含对任务名称、任务组名、任务状态进行查询，包含对任务的增删改查、缓存监控：对系统 redis 版本进行展示监控、查询内存消耗、缓存列表：输出缓存列表内容配置缓存内容、维保工具箱：维保系统配置、对维保系统进行配置，包含系统名称、类型、版本号配置查询，对维保系统进行增删改查；检查项目配置：对维保系统检查项目进行配置，对项目名称、项目英文名称、排序、合并行数、是否展示项目名称进行查询，可对维保检查项目进行增删改查。",
+          remark:
+            "版权租用单价 1 年期（必选项），包含 2022 年发布新地标原始记录表内容",
+        },
+        {
+          index: 2,
+          productName: "小程序端（包含公司端、工程师端、监管端）",
+          quantity: 1,
+          unit: "年",
+          unitPrice: "￥50,000.00",
+          totalPrice: "￥50,000.00",
+          params:
+            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息监管端：参考电脑端版本，无详细系统管理功能",
+          remark: "版权租用单价 1 年期",
+        },
+        {
+          index: 3,
+          productName: "安卓app 端（包含公司端、工程师端、监管端）",
+          quantity: 1,
+          unit: "年",
+          unitPrice: "￥50,000.00",
+          totalPrice: "￥50,000.00",
+          params:
+            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息监管端：参考电脑端版本，无详细系统管理功能",
+          remark: "版权租用单价 1 年期",
+        },
+        {
+          index: 4,
+          productName: "苹果app 端（包含公司端、工程师端、监管端）",
+          quantity: 1,
+          unit: "年",
+          unitPrice: "￥50,000.00",
+          totalPrice: "￥50,000.00",
+          params:
+            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息监管端：参考电脑端版本，无详细系统管理功能",
+          remark: "版权租用单价 1 年期",
+        },
+        {
+          index: 5,
+          productName: "鸿蒙端app",
+          quantity: 1,
+          unit: "年",
+          unitPrice: "￥50,000.00",
+          totalPrice: "￥50,000.00",
+          params:
+            "公司端：企业人员管理，管理自公司入职人员、对企业人员进行管理，包含：企业、个人、状态（在职、离职）查询及增删改查、设备管理：管理设备所属公司、规格型号、生产厂家、购买时间、有效期、校准检定证书编号，状态进行增删改查，包含：设备名称、所属公司、规格型号、生产厂家、状态、购买时间、有效期开始时间、有效期结束时间、备注、校准检定证书编号查询、对设备信息进行增删改查；维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询。通知公告：查询发布的通知公告。工程师端：个人中心：个人信息编辑、包含证书、基础信息，维保原始记录：对维保原始记录进行增删改查、导出操作，包含：项目名称、原始记录编号、维护保养企业、原始记录类型、状态、消防设施使用管理单位、现场维保日期查询；通知公告：查询后台发送的通知公告信息",
+          remark: "版权租用单价 1 年期",
+        },
+        {
+          index: 6,
+          productName: "维护维保服务",
+          quantity: 1,
+          unit: "年",
+          unitPrice: "￥50,000.00",
+          totalPrice: "￥50,000.00",
+          params:
+            "维护维保服务，故障处理，应用答疑，bug 修复，不包含新增功能项，包含全端",
+          remark:
+            "维护维保服务，故障处理，应用答疑，bug 修复，不包含新增功能项，包含全端",
+        },
+      ],
+    };
+  },
+  methods: {
+    toggleCurrent(index) {
+      this.translateDistance = `-${index * 7.3}%`;
+      if (index === 6) {
+        this.translateDistance = `-3400px`;
+      }
+      this.current = index;
+    },
+    handleCellMouseEnter({ index }) {
+      this.rowCurrent = index;
+    },
+    downloadAppStore() {
+      this.$message({
+        message: "ios版本正在开发中",
+        type: "info",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/*最外层透明*/
+:deep(.el-table) {
+  background-color: transparent;
+}
+:deep(.el-table__expanded-cell) {
+  background-color: transparent;
+}
+:deep(.el-table th) {
+  background-color: transparent;
+}
+:deep(.el-table tr) {
+  background-color: transparent;
+}
+:deep(.el-table td) {
+  background-color: transparent;
+}
+
+.table_data {
+  position: absolute;
+  top: 52%;
+  left: 50%;
+  width: 80%;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.6s;
+}
+.tableIn {
+  -webkit-animation: tableIn 0.6s;
+  animation: tableIn 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+.tableOut {
+  -webkit-animation: tableOut 0.6s;
+  animation: tableOut 0.6s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+}
+@keyframes tableIn {
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes tableOut {
+  0% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.table_title {
+  font-family: download;
+  text-align: left;
+  color: white;
+  font-weight: 500;
+  font-size: 120%;
+  text-align: center;
+  border: 1px solid #fff;
+  margin: 0;
+  padding: 10px;
+  border-bottom: 0;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+.table_download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: download;
+  text-align: left;
+  color: white;
+  font-weight: 500;
+  font-size: 100%;
+  text-align: center;
+  border: 1px solid #fff;
+  padding: 10px;
+  border-bottom: 0;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+  text-decoration: none;
+}
+.imgdown {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+.table_text {
+  font-family: download;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-align: left;
+  color: white;
+  width: 100%;
+  height: 40px;
+  font-size: 90%;
+  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+</style>

+<template>
+  <div id="mobile_view">
+    <!-- 背景 -->
+    <div
+      id="background"
+      :style="`transform: translateY(${translateDistance}%)`"
+    ></div>
+    <!-- logo -->
+    <h1 id="logo"></h1>
+    <!-- 页面 -->
+    <div id="pages">
+      <div v-show="current == 0" class="page" id="page_download">
+        <div
+          class="img"
+          :class="[
+            current == 0 ? 'animateDownloadHandIn' : 'animateDownloadHandOut',
+          ]"
+          id="page_download_hand"
+        ></div>
+        <div id="page_download_show">
+          <div id="page_download_show_top">
+            <div
+              id="page_download_text"
+              :class="[
+                current == 0
+                  ? 'animateDownloadTextIn'
+                  : 'animateDownloadTextOut',
+              ]"
+            >
+              消防维保助手
+              <div>即时同步新地标规范，强制约束规范填写</div>
+            </div>
+          </div>
+        </div>
+        <a
+          href="https://xfwbtg.crgx.net/xfwb_quotation.pdf"
+          download="消防维保公网报价单.pdf"
+          id="page_download_button1"
+          :class="[
+            current == 0
+              ? 'animateMobileDownloadButtonIn'
+              : 'animateMobileDownloadButtonOut',
+          ]"
+        >
+          <div id="page_download_button_top" style="position: relative">
+            <div class="page_download_button_text">
+              <img
+                class="page_download_button_icon"
+                src="../assets/images/download.png"
+                alt="查看报价"
+              />
+              <span>查看完整报价</span>
+            </div>
+          </div>
+        </a>
+        <a
+          href="http://xfappgt.crgx.net/profile/upload/2023/09/01/xf_app_2023090101_20230901163308A004.apk"
+          id="page_download_button"
+          :class="[
+            current == 0
+              ? 'animateMobileDownloadButtonIn'
+              : 'animateMobileDownloadButtonOut',
+          ]"
+        >
+          <div id="page_download_button_top">
+            <div id="page_download_mobile_iPhone"></div>
+            <div id="page_download_mobile_android"></div>
+          </div>
+        </a>
+      </div>
+      <div v-show="current == 1" class="page" id="page_function1">
+        <div id="page_function1_text">
+          <h1
+            id="page_function1_text_title"
+            :class="[
+              current == 1 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            维保原始记录电子化
+          </h1>
+          <h2
+            id="page_function1_text_sub"
+            :class="[
+              current == 1 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            实时记录，远程可查。精心打磨，只为你极速体验。
+          </h2>
+        </div>
+        <div id="page_function1_show">
+          <div id="page_function1_show_top">
+            <div id="page_function1_book">
+              <div
+                id="page_function1_book_page3"
+                :class="[
+                  current == 1
+                    ? 'animateDownloadTextIn'
+                    : 'animateDownloadTextOut',
+                ]"
+              ></div>
+              <div
+                id="page_function1_book_page2"
+                :class="[
+                  current == 1
+                    ? 'animateDownloadHandIn'
+                    : 'animateDownloadHandOut',
+                ]"
+              ></div>
+              <div
+                id="page_function1_book_page1"
+                :class="[
+                  current == 1
+                    ? 'animateFunction1BookPage1In'
+                    : 'animateFunction1BookPage1Out',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 2" class="page" id="page_function2">
+        <div id="page_function2_text">
+          <h1
+            id="page_function2_text_title"
+            :class="[
+              current == 2 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            电子签名
+          </h1>
+          <h2
+            id="page_function2_text_sub"
+            :class="[
+              current == 2 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            甲乙双方共通约束，省时省力节约时间
+          </h2>
+        </div>
+        <div id="page_function2_show">
+          <div id="page_function2_show_top">
+            <div id="page_function2_book">
+              <div
+                id="page_function2_book_06"
+                :class="[
+                  current == 2
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              ></div>
+              <div
+                id="page_function2_book_05"
+                :class="[
+                  current == 2
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              ></div>
+              <div
+                id="page_function2_book_04"
+                :class="[
+                  current == 2
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              >
+                传统手写
+              </div>
+              <div
+                id="page_function2_book_03"
+                :class="[
+                  current == 2
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              >
+                智能签名
+              </div>
+              <div
+                id="page_function2_book_01"
+                :class="[
+                  current == 2
+                    ? 'animateFunction2BookIn'
+                    : 'animateFunction2BookOut',
+                ]"
+              >
+                VS
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 3" class="page" id="page_function3">
+        <div id="page_function3_text">
+          <h1
+            id="page_function3_text_title"
+            :class="[
+              current == 3 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            资质证明
+          </h1>
+          <h2
+            id="page_function3_text_sub"
+            :class="[
+              current == 3 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            已取得著作权证书，放心使用
+          </h2>
+        </div>
+        <div id="page_function3_show">
+          <div id="page_function3_show_top">
+            <div id="page_function3_talk">
+              <div
+                id="page_function3_book"
+                :class="[
+                  current == 3
+                    ? 'animateFunction3BookIn'
+                    : 'animateFunction3BookOut',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 4" class="page" id="page_function3">
+        <div id="page_function3_text">
+          <h1
+            id="page_function3_text_title"
+            :class="[
+              current == 4 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            随时打印
+          </h1>
+          <h2
+            id="page_function3_text_sub"
+            :class="[
+              current == 4 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            纸质文档随时打印，按需留档
+          </h2>
+        </div>
+        <div id="page_function5_show">
+          <div id="page_function5_show_top">
+            <div id="page_function5_talk">
+              <div
+                id="page_function5_book"
+                :class="[
+                  current == 4
+                    ? 'animateFunction3BookIn'
+                    : 'animateFunction3BookOut',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-show="current == 5" class="page" id="page_function4">
+        <div id="page_function4_text">
+          <h1
+            id="page_function4_text_title"
+            :class="[
+              current == 5 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            联系我们
+          </h1>
+          <h2
+            id="page_function4_text_sub"
+            :class="[
+              current == 5 ? 'animateMobileTextIn' : 'animateMobileTextOut',
+            ]"
+          >
+            <p>广西世纪创软信息技术有限公司</p>
+            <p>邮箱：weiyi@crgx.net</p>
+            <p>非©广西消防救援总队出品</p>
+          </h2>
+        </div>
+        <div id="page_function4_show">
+          <div id="page_function4_show_top">
+            <div id="page_function4_talk">
+              <div
+                id="page_function4_show_title"
+                :class="[
+                  current == 5 ? 'animateFunction4In' : 'animateFunction4In',
+                ]"
+              >
+                广西壮族自治区南宁市青秀万达银座520室
+              </div>
+              <div
+                id="page_function4_book"
+                :class="[
+                  current == 5
+                    ? 'animateFunction4BookIn'
+                    : 'animateFunction4BookOut',
+                ]"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 向下箭头 -->
+    <div v-show="current < 5" class="animateArrowDown" id="arrow_down"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MobileHomePage",
+  data() {
+    return {
+      current: 0,
+      startScreen: 0,
+      isScroll: true,
+      translateDistance: 0,
+    };
+  },
+  mounted() {
+    document.addEventListener("touchstart", (e) => {
+      this.startScreen = e.changedTouches[0].screenY;
+    });
+    document.addEventListener("touchmove", (e) => {
+      if (this.startScreen - e.changedTouches[0].screenY > 10) {
+        if (this.isScroll) {
+          this.isScroll = false;
+          this.current++;
+          if (this.current > 5) {
+            this.current = 5;
+          }
+          this.translateDistance = -this.current * 16;
+          const timer = setTimeout(() => {
+            this.isScroll = true;
+            clearTimeout(timer);
+          }, 600);
+        }
+      } else if (this.startScreen - e.changedTouches[0].screenY < -10) {
+        if (this.isScroll) {
+          this.isScroll = false;
+          this.current--;
+          if (this.current < 0) {
+            this.current = 0;
+          }
+          this.translateDistance = -this.current * 16;
+          const timer = setTimeout(() => {
+            this.isScroll = true;
+            clearTimeout(timer);
+          }, 600);
+        }
+      }
+    });
+  },
+  beforeUnmount() {
+    document.removeEventListener("touchstart", () => {});
+    document.removeEventListener("touchmove", () => {});
+  },
+};
+</script>
+<style scoped>
+@import "../assets/css/index-mobile.css";
+@import "../assets/css/home-mobile.css";
+</style>

+export default {
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: '消防维保助手',
+    htmlAttrs: {
+      lang: 'zh-CN'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: '消防维保助手介绍、消防维保助手私有化部署、消防维保助手报价单', content: '' },
+      { name: 'format-detection', content: 'telephone=no' },
+      { name: 'keywords', content: '消防维保助手,消防维保,消防设备维保,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手,消防设备维保助手 '}
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+    'element-ui/lib/theme-chalk/index.css'
+  ],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+    '@/plugins/element-ui'
+  ],
+  server: {
+    port: 3666,
+    host: 'localhost'
+  },
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+  ],
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+  ],
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+    transpile: [/^element-ui/],
+    extractCSS: { allChunks: true }
+  }
+}

+{
+  "name": "nuxt2_xf_intro",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "core-js": "^3.25.3",
+    "element-ui": "^2.15.10",
+    "nuxt": "^2.15.8",
+    "vue": "^2.7.10",
+    "vue-server-renderer": "^2.7.10",
+    "vue-template-compiler": "^2.7.10"
+  },
+  "devDependencies": {}
+}

+<template>
+  <div class="container">
+    <!-- PC端显示 -->
+    <div id="pc_view">
+      <home-page></home-page>
+    </div>
+    <!-- 移动端显示 -->
+    <div id="mobile_view">
+      <mobile-home-page />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IndexPage",
+};
+</script>
+<style>
+@import "../assets/css/index.css";
+@import "../assets/css/swpier.css";
+@import "../assets/css/home.css";
+@import "../assets/css/animate.css";
+* {
+  margin: 0;
+  padding: 0;
+}
+#pc_view {
+  display: block;
+}
+#mobile_view {
+  display: none;
+}
+@media screen and (max-width: 768px) {
+  #mobile_view {
+    display: block;
+  }
+  #pc_view {
+    display: none;
+  }
+}
+</style>

+import Vue from 'vue'
+import Element from 'element-ui'
+import locale from 'element-ui/lib/locale/lang/en'
+
+Vue.use(Element, { locale })

+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).