├── public
    ├── favicon.ico
    ├── img
    │   ├── app.png
    │   ├── logo.png
    │   ├── login_bg.jpg
    │   ├── download_pattern_left.png
    │   └── download_pattern_right.png
    ├── config.js
    └── index.html
├── babel.config.js
├── src
    ├── plugins
    │   ├── element.js
    │   ├── myPlugin.js
    │   └── http
    │   │   ├── http.js
    │   │   └── axios.js
    ├── App.vue
    ├── style
    │   ├── variables.scss
    │   └── main.scss
    ├── store
    │   └── store.js
    ├── main.js
    ├── views
    │   ├── main
    │   │   ├── Main.vue
    │   │   ├── HeadBar.vue
    │   │   └── Login.vue
    │   ├── appDetail
    │   │   ├── AppVersionEdit.vue
    │   │   ├── AppVersions.vue
    │   │   └── Preview.vue
    │   └── appList
    │   │   ├── AppUploadDialog.vue
    │   │   └── AppList.vue
    ├── util
    │   ├── loginUtil.js
    │   └── constant.js
    ├── router
    │   └── router.js
    └── components
    │   ├── VmSelectInput.vue
    │   ├── VmSearch.vue
    │   └── VmTable.vue
├── .npmrc
├── alias.config.js
├── .gitignore
├── vue.config.js
├── Dockerfile
├── nginx.conf
├── readme.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liu-xinhui/appPublishFront/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liu-xinhui/appPublishFront/HEAD/public/img/app.png


--------------------------------------------------------------------------------
/public/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liu-xinhui/appPublishFront/HEAD/public/img/logo.png


--------------------------------------------------------------------------------
/public/img/login_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liu-xinhui/appPublishFront/HEAD/public/img/login_bg.jpg


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     "@vue/cli-plugin-babel/preset",
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import Element from "element-ui";
3 | 
4 | Vue.use(Element, {size: "medium"});
5 | 


--------------------------------------------------------------------------------
/public/img/download_pattern_left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liu-xinhui/appPublishFront/HEAD/public/img/download_pattern_left.png


--------------------------------------------------------------------------------
/public/img/download_pattern_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liu-xinhui/appPublishFront/HEAD/public/img/download_pattern_right.png


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
2 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
3 | registry=https://registry.npm.taobao.org
4 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 |   #app {
 9 |     height: 100vh;
10 |   }
11 | </style>
12 | 


--------------------------------------------------------------------------------
/src/style/variables.scss:
--------------------------------------------------------------------------------
 1 | $header-height: 82px;
 2 | $color-primary: #F8BA0B;
 3 | $border-color: #E6E6E6;
 4 | 
 5 | @mixin gravityCenter {
 6 |   display: flex;
 7 |   align-items: center;
 8 |   justify-content: center;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | 
 3 | export let store = Vue.observable(
 4 |   {
 5 |     breadcrumbs: [],
 6 |   });
 7 | 
 8 | export let mutations = {
 9 |   setBreadcrumbs(breadcrumbs) {
10 |     store.breadcrumbs = breadcrumbs;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/alias.config.js:
--------------------------------------------------------------------------------
 1 | /*此文件未使用，只是为了让idea可以识别实际位置*/
 2 | const path = require("path");
 3 | 
 4 | function resolve(dir) {
 5 |   return path.join(__dirname, dir);
 6 | }
 7 | 
 8 | module.exports = {
 9 |   resolve: {
10 |     alias: {
11 |       "@": resolve("src"),
12 |     },
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | *.iml
24 | *.ipr
25 | *.iws


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "@/router/router";
 4 | import "./plugins/element.js";
 5 | import "./plugins/myPlugin.js";
 6 | import "normalize.css";
 7 | import "./style/main.scss";
 8 | 
 9 | Vue.config.productionTip = false;
10 | 
11 | new Vue({
12 |   router,
13 |   render: h => h(App),
14 | }).$mount("#app");
15 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   productionSourceMap: false,
 3 |   devServer: {
 4 |     port: 8011,
 5 |   },
 6 |   chainWebpack: config => {
 7 |     config
 8 |       .plugin("html")
 9 |       .tap(args => {
10 |         args[0].title = "应用发布";
11 |         return args;
12 |       });
13 |     // 用cdn方式引入
14 |     config.externals({
15 |       "vue": "Vue",
16 |       "vue-router": "VueRouter",
17 |       "element-ui": "ELEMENT",
18 |     });
19 |   },
20 | };


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM nginx:1.17.3-alpine
 2 | 
 3 | MAINTAINER liunewshine@qq.com
 4 | 
 5 | ENV TZ=Asia/Shanghai
 6 | RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && mkdir -p /yanglaojin
 7 | 
 8 | WORKDIR /yanglaojin
 9 | 
10 | ADD /dist/  /usr/share/nginx/html/
11 | # 自定义nginx配置文件，启用gzip
12 | ADD /nginx.conf /etc/nginx/nginx.conf
13 | 
14 | ENV env "test"
15 | 
16 | CMD sed -i "s/vueEnv.active/\"${env}\"/g" /usr/share/nginx/html/config.js && nginx -g 'daemon off;'
17 | 


--------------------------------------------------------------------------------
/src/plugins/myPlugin.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import axios from "./http/axios";
 3 | import http from "./http/http";
 4 | import {Message} from "element-ui";
 5 | 
 6 | Plugin.install = function(Vue) {
 7 |   // 网络请求
 8 |   Vue.prototype.$http = http;
 9 |   Vue.prototype.$axios = axios;
10 |   //全局异常处理
11 |   Vue.config.errorHandler = function(err, vm, info) {
12 |     console.error(err, vm, info);
13 |     Message.error(err);
14 |   };
15 | };
16 | Vue.use(Plugin);
17 | 
18 | export default Plugin;
19 | 


--------------------------------------------------------------------------------
/src/style/main.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 3 |   color: #9b9b9b;
 4 | }
 5 | 
 6 | /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
 7 | ::-webkit-scrollbar {
 8 |   background-color: white;
 9 |   height: 13px;
10 |   width: 13px;
11 | }
12 | 
13 | /*定义滚动条的轨道，内阴影及圆角*/
14 | ::-webkit-scrollbar-track {
15 |   background-color: #f5f5f5;
16 | }
17 | 
18 | /*定义滑块，内阴影及圆角*/
19 | ::-webkit-scrollbar-thumb {
20 |   background-color: #ccc;
21 | }


--------------------------------------------------------------------------------
/public/config.js:
--------------------------------------------------------------------------------
 1 | /*全局配置文件，url类型的必须以"/"结尾*/
 2 | var vueEnv = {
 3 |   //当前激活的环境
 4 |   active: "dev",
 5 |   //开发环境
 6 |   dev: {
 7 |     serverUrl: "http://127.0.0.1:8060/api/",
 8 |   },
 9 |   test: {
10 |     serverUrl: "http://118.25.44.86:8556/api/",
11 |   },
12 |   prod: {
13 |     serverUrl: "/api/",
14 |   },
15 | };
16 | 
17 | switch (vueEnv.active) {
18 |   case "dev":
19 |     window.config = vueEnv.dev;
20 |     break;
21 |   case "test":
22 |     window.config = vueEnv.test;
23 |     break;
24 |   default:
25 |     window.config = vueEnv.prod;
26 |     break;
27 | }


--------------------------------------------------------------------------------
/src/views/main/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vm-main">
 3 |     <head-bar class="vm-main-header"/>
 4 |     <div class="vm-main-page">
 5 |       <router-view class="vm-page"/>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | <script>
10 |   import HeadBar from "./HeadBar.vue";
11 | 
12 |   export default {
13 |     components: {
14 |       HeadBar,
15 |     },
16 |     data() {
17 |       return {};
18 |     },
19 |     methods: {},
20 |   };
21 | </script>
22 | <style lang="scss">
23 |   @import "../../style/variables";
24 | 
25 |   .vm-main {
26 |     .vm-main-page {
27 |       background-color: #F6F6F6;
28 | 
29 |       .vm-page {
30 |         margin: 0 auto;
31 |       }
32 |     }
33 |   }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/util/loginUtil.js:
--------------------------------------------------------------------------------
 1 | const USER_INFO = "hold_user_info";
 2 | const storage = window.localStorage;
 3 | let userInfo = null;
 4 | export default {
 5 |   login(obj) {
 6 |     userInfo = obj;
 7 |     storage.setItem(USER_INFO, JSON.stringify(obj));
 8 |   },
 9 |   logout() {
10 |     userInfo = null;
11 |     storage.clear();
12 |   },
13 |   isLogin() {
14 |     return !!this.getToken();
15 |   },
16 |   getUserInfo() {
17 |     try {
18 |       if (!userInfo) {
19 |         userInfo = JSON.parse(storage.getItem(USER_INFO));
20 |       }
21 |     } catch (err) {
22 |       console.log(err);
23 |     }
24 |     return userInfo || {};
25 |   },
26 |   getToken() {
27 |     return this.getUserInfo().token;
28 |   },
29 |   getUsername() {
30 |     return this.getUserInfo().username;
31 |   },
32 | };
33 | 


--------------------------------------------------------------------------------
/src/util/constant.js:
--------------------------------------------------------------------------------
 1 | //garage类型
 2 | const capStatus = ["0:无效", "1:有效"];
 3 | 
 4 | let exportObj = {
 5 |   capStatus,
 6 | };
 7 | 
 8 | //------------------------------以下部分请勿改动------------------------------
 9 | //转化为object和options
10 | //$options用于获取el-select可用的格式,$object用于根据key取中文描述
11 | for (let key in exportObj) {
12 |   let value = exportObj[key];
13 |   if (Array.isArray(value)) {
14 |     let options = [];
15 |     let object = {};
16 |     value.forEach(item => {
17 |       let itemArr = item.split(":");
18 |       let option = {
19 |         value: itemArr[0],
20 |         label: itemArr[1],
21 |       };
22 |       object[option.value] = option.label;
23 |       options.push(option);
24 |     });
25 |     value.$options = options;
26 |     value.$object = object;
27 |   }
28 | }
29 | export default exportObj;
30 | 


--------------------------------------------------------------------------------
/src/router/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | 
 4 | Vue.use(VueRouter);
 5 | 
 6 | const routes = [
 7 |   {
 8 |     path: "/",
 9 |     meta: {title: "Main中展示的组件"},
10 |     component: () => import("@/views/main/Main"),
11 |     children: [
12 |       {path: "/", meta: {title: "首页"}, component: () => import("@/views/appList/AppList")},
13 |       {path: "apps/:id", meta: {title: "应用动态"}, component: () => import("@/views/appDetail/AppVersions")},
14 |     ],
15 |   },
16 |   {path: "/login", meta: {title: "登录"}, component: () => import("@/views/main/Login")},
17 |   {path: "/:shortCode", meta: {title: "下载页"}, component: () => import("@/views/appDetail/Preview")},
18 | ];
19 | 
20 | const router = new VueRouter({
21 |   mode: "history",
22 |   routes,
23 | });
24 | 
25 | export const toLogin = () => {
26 |   router.push({
27 |     path: "/login",
28 |   });
29 | };
30 | 
31 | export default router;


--------------------------------------------------------------------------------
/nginx.conf:
--------------------------------------------------------------------------------
 1 | 
 2 | user  nginx;
 3 | worker_processes  auto;
 4 | 
 5 | error_log  /var/log/nginx/error.log warn;
 6 | pid        /var/run/nginx.pid;
 7 | 
 8 | 
 9 | events {
10 |     worker_connections  1024;
11 | }
12 | 
13 | 
14 | http {
15 |     include       /etc/nginx/mime.types;
16 |     default_type  application/octet-stream;
17 | 
18 |     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
19 |                       '$status $body_bytes_sent "$http_referer" '
20 |                       '"$http_user_agent" "$http_x_forwarded_for"';
21 | 
22 |     access_log  /var/log/nginx/access.log  main;
23 | 
24 |     sendfile        on;
25 |     #tcp_nopush     on;
26 | 
27 |     keepalive_timeout  65;
28 | 
29 |     gzip  on;
30 |     gzip_vary on;
31 |     gzip_proxied any;
32 |     gzip_comp_level 6;
33 |     gzip_buffers 16 8k;
34 |     gzip_http_version 1.1;
35 |     gzip_min_length 256;
36 |     gzip_types text/plain text/css application/json application/javascript;
37 | 
38 |     include /etc/nginx/conf.d/*.conf;
39 | }
40 | 


--------------------------------------------------------------------------------
/src/plugins/http/http.js:
--------------------------------------------------------------------------------
 1 | import axios from "./axios";
 2 | 
 3 | export default {
 4 |   /**
 5 |    * Get方法获取数据
 6 |    * get(String url,Object params) 示例get('users',{pageNum:1})
 7 |    */
 8 |   get: function(url, params) {
 9 |     return axios({
10 |       url: url,
11 |       method: "get",
12 |       params: params,
13 |     });
14 |   },
15 |   put: function(url, data, params) {
16 |     return axios({
17 |       url: url,
18 |       method: "put",
19 |       data: data,
20 |       params: params,
21 |     });
22 |   },
23 |   post: function(url, data, params) {
24 |     return axios({
25 |       url: url,
26 |       method: "post",
27 |       data: data,
28 |       params: params,
29 |     });
30 |   },
31 |   // 删除,示例delete('users',10)
32 |   delete: (url, id) => {
33 |     return axios({
34 |       url: id ? (url + "/" + id) : url,
35 |       method: "delete",
36 |     });
37 |   },
38 |   //保存，当id大于0时为修改采用put，其他为新增采用post
39 |   save: (url, data) => {
40 |     return axios({
41 |       url: url,
42 |       method: !data.id || data.id === 0 ? "post" : "put",
43 |       data: data,
44 |     });
45 |   },
46 | };
47 | 


--------------------------------------------------------------------------------
/src/components/VmSelectInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-input
 3 |       :clearable="clearable"
 4 |       :maxlength="0"
 5 |       :value="value"
 6 |       class="vm-select-input"
 7 |       placeholder="请选择"
 8 |       @change="change"
 9 |       @clear="clear">
10 |     <div slot="append" class="iconWrapper" @click="onSelect">
11 |       <i class="el-icon-search"/>
12 |     </div>
13 |   </el-input>
14 | </template>
15 | 
16 | <script>
17 |   export default {
18 |     props: {
19 |       value: [String, Number],
20 |       clearable: Boolean,
21 |     },
22 |     methods: {
23 |       onSelect() {
24 |         this.$emit("select");
25 |       },
26 |       change(val) {
27 |         this.$emit("input", val);
28 |       },
29 |       clear() {
30 |         this.$emit("clear");
31 |       },
32 |     },
33 |   };
34 | </script>
35 | 
36 | <style lang="scss">
37 |   .vm-select-input {
38 |     .iconWrapper {
39 |       width: 50px;
40 |       display: flex;
41 |       align-items: center;
42 |       justify-content: center;
43 |       cursor: pointer;
44 |       margin: -20px -20px;
45 |       height: 40px
46 |     }
47 |   }
48 | 
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/VmSearch.vue:
--------------------------------------------------------------------------------
 1 | <!--搜索框，自动添加label-->
 2 | <template>
 3 |   <div class="vm-search-com">
 4 |     <div :style="labelStyle" class="vm-search-label">
 5 |       {{label}}
 6 |     </div>
 7 |     <slot/>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | 
13 |   export default {
14 |     props: {
15 |       label: {
16 |         type: String,
17 |         default: "　",
18 |       },
19 |       labelWidth: {
20 |         type: Number,
21 |         default: 0,
22 |       },
23 |     },
24 |     data() {
25 |       return {
26 |       };
27 |     },
28 |     computed: {
29 |       labelStyle: function() {
30 |         return {
31 |           width: this.labelWidth === 0 ? "auto" : this.labelWidth + "px",
32 |         };
33 |       },
34 |     },
35 |     created() {
36 |     },
37 |   };
38 | </script>
39 | 
40 | <style lang="scss" scoped>
41 |   .vm-search-com {
42 |     display: inline-flex;
43 |     margin: 2px 0;
44 | 
45 |     .vm-search-label {
46 |       box-sizing: border-box;
47 |       display: inline-block;
48 |       font-size: 13px;
49 |       color: #333;
50 |       line-height: 26px;
51 |       padding-left: 10px;
52 |       padding-right: 5px;
53 |       white-space: nowrap;
54 |       text-align: right;
55 |     }
56 | 
57 |     /deep/ .el-select, .el-input {
58 |       flex: 1;
59 |     }
60 |   }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | ## 介绍
 2 | 
 3 | 项目是 `vue` 开发的类似`fir.im`和`蒲公英`的企业 APP 分发平台，提供android app上传功能，以及ios和android二维码合并功能。用过可直接通过微信、浏览器、QQ等扫码下载app。
 4 | 
 5 | 此项目为前后端分离，后端采用spring boot实现，请移步https://github.com/liu-xinhui/appPublish
 6 | 
 7 | <u>**为加快应用下载页访问速度，本项目已启用gzip，vue和element ui相关js采用cdn加载，路由懒加载等优化，和普通多页应用无异**</u>
 8 | 
 9 | ## 效果
10 | 
11 | 样式完全参考http://fir.im
12 | 
13 | 本项目预览地址http://118.25.44.86:8556/
14 | 
15 | 账号：admin
16 | 
17 | 密码：123456
18 | 
19 | ## 部署
20 | 
21 | 本项目已经打包成docker镜像并上传到腾讯云的镜像仓库，可直接pull镜像进行部署，也可拉取代码做适应性修改后重新打包
22 | 
23 | ```dockerfile
24 | #拉取镜像
25 | docker pull ccr.ccs.tencentyun.com/liuxh/app-publish
26 | 
27 | #运行
28 | docker run -itd -p 8060:8060 -v /webapps/appPublish:/my-app/ap --restart=always --name app-publish --env SPRING_PROFILES_ACTIVE=prod ccr.ccs.tencentyun.com/liuxh/app-publish
29 | ```
30 | 
31 | - 项目内部端口为`8060`
32 | - 容器内部数据存储位置`/my-app/ap`，需要做`docker volume`防止容器删除后数据丢失`-v /webapps/appPublish:/my-app/ap`
33 | - 需要设置项目运行环境为`prod`，`--env SPRING_PROFILES_ACTIVE=prod`
34 | 
35 | ## 技术栈
36 | 
37 | - `vue cli4`
38 | - `vue 2.6.11`
39 | - `spring boot 2.3.2.RELEASE`
40 | - `h2数据库` 嵌入式数据库，性能好，部署方便，可与mysql无缝切换
41 | - `mybatis-plus 3.3.2`
42 | 
43 | ## 截图
44 | 
45 | ![应用列表](https://uploader.shimo.im/f/9ReWOLluDSUqzHRY.png)
46 | ![应用版本历史](https://uploader.shimo.im/f/xZaEsvCRnkTgCYAp.png)
47 | ![应用基本信息](https://uploader.shimo.im/f/Hk3NkwSheT6ornG3.png)
48 | ![应用合并](https://uploader.shimo.im/f/ZNeltMJb3VRkNN3M.png)
49 | ![应用下载页](https://uploader.shimo.im/f/ZoKqStY8HH4BU5Qr.png)


--------------------------------------------------------------------------------
/src/plugins/http/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import auth from "@/util/loginUtil";
 3 | import {toLogin} from "@/router/router";
 4 | import {Notification} from "element-ui";
 5 | 
 6 | // axios 配置
 7 | axios.defaults.timeout = 40000;
 8 | axios.defaults.baseURL = window.config.serverUrl;
 9 | // http request 拦截器
10 | axios.interceptors.request.use(
11 |   config => {
12 |     config.headers["Authorization"] = auth.getToken();
13 |     return config;
14 |   },
15 |   err => {
16 |     return Promise.reject(err);
17 |   },
18 | );
19 | 
20 | // http response 拦截器
21 | axios.interceptors.response.use(
22 |   response => {
23 |     return response;
24 |   },
25 |   error => {
26 |     console.log("-------------接口请求错误信息start-------------");
27 |     console.log(error);
28 |     if (error.response) {
29 |       // The request was made and the server responded with a status code
30 |       // that falls out of the range of 2xx
31 |       console.log(error.response.data, error.response.status, error.response.headers);
32 |       Notification.error({title: "提示", message: error.response.data.message});
33 |       if (error.response.status === 401) {
34 |         toLogin();
35 |       }
36 |     } else if (error.request) {
37 |       // The request was made but no response was received
38 |       // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
39 |       // http.ClientRequest in node.js
40 |       console.log(error.request);
41 |       Notification.error({title: "提示", message: "连接服务器失败"});
42 |     } else {
43 |       // Something happened in setting up the request that triggered an Error
44 |       console.log("Error", error.message);
45 |       Notification.error({title: "提示", message: "请求服务器出错"});
46 |     }
47 |     console.log("-------------接口请求错误信息end-------------");
48 |     return Promise.reject(error);
49 |   },
50 | );
51 | 
52 | export default axios;
53 | 


--------------------------------------------------------------------------------
/src/views/appDetail/AppVersionEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |       :close-on-click-modal="false"
 4 |       title="更新日志"
 5 |       :visible.sync="dialogVisible"
 6 |       top="3vh"
 7 |       width="700px">
 8 |     <el-form
 9 |         ref="form"
10 |         class="app-version-edit"
11 |         :model="model"
12 |         label-width="90px">
13 |       <el-form-item label="更新日志">
14 |         <el-input v-model="model.changeLog" placeholder="请输入" type="textarea" :rows="5"/>
15 |       </el-form-item>
16 |     </el-form>
17 |     <span slot="footer">
18 |       <el-button @click="dialogVisible=false">取消</el-button>
19 |       <el-button :loading="submitLoading" type="warning" @click="handleSubmit">保存</el-button>
20 |     </span>
21 |   </el-dialog>
22 | </template>
23 | 
24 | <script>
25 | 
26 |   export default {
27 |     data() {
28 |       return {
29 |         submitLoading: false,
30 |         dialogVisible: false,
31 |         model: {
32 |           id: null,
33 |           changeLog: "",
34 |         },
35 |       };
36 |     },
37 |     methods: {
38 |       open(row) {
39 |         this.dialogVisible = true;
40 |         this.model.id = row.id;
41 |         this.model.changeLog = row.changeLog;
42 |       },
43 |       handleSubmit() {
44 |         this.$refs.form.validate(valid => {
45 |           if (valid) {
46 |             this.submitLoading = true;
47 |             this.$http
48 |               .put("appVersions", this.model)
49 |               .then(() => {
50 |                 this.submitLoading = false;
51 |                 this.dialogVisible = false;
52 |                 this.$emit("save-success");
53 |                 this.$message.success("保存成功");
54 |               })
55 |               .catch(() => {
56 |                 this.submitLoading = false;
57 |               });
58 |           }
59 |         });
60 |       },
61 |     },
62 |   };
63 | </script>
64 | 
65 | <style lang="scss" scoped>
66 | </style>
67 | 
68 | 


--------------------------------------------------------------------------------
/src/views/main/HeadBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header class="header-wrapper">
  3 |     <div class="header">
  4 |       <div class="header-nav">
  5 |         <div style="font-weight: 600;cursor: pointer" @click="goto('/')">应用发布</div>
  6 |         <template v-for="(item,index) in nav">
  7 |           <i :key="index" class="el-icon-arrow-right"/>
  8 |           <div :key="index" :style="{cursor:item.path?'pointer':'auto'}" @click="goto(item.path)">{{item.name}}</div>
  9 |         </template>
 10 |       </div>
 11 |       <div style="flex: 1"/>
 12 |       <div class="avatar">
 13 |         <div class="photo"/>
 14 |         <span class="name">{{username}}</span>
 15 |         <span class="logout" @click="logout">注销</span>
 16 |       </div>
 17 |     </div>
 18 |   </header>
 19 | </template>
 20 | 
 21 | <script>
 22 |   import auth from "@/util/loginUtil";
 23 |   import {store} from "@/store/store";
 24 | 
 25 |   export default {
 26 |     components: {},
 27 |     data() {
 28 |       return {
 29 |         username: auth.getUsername(),
 30 |       };
 31 |     },
 32 |     computed: {
 33 |       nav() {
 34 |         return store.breadcrumbs;
 35 |       },
 36 |     },
 37 |     methods: {
 38 |       logout() {
 39 |         this.$confirm("确定退出登录吗?", "提示", {
 40 |           confirmButtonText: "确定",
 41 |           cancelButtonText: "取消",
 42 |           type: "warning",
 43 |         }).then(() => {
 44 |           auth.logout();
 45 |           this.$router.push({path: "/login"});
 46 |         });
 47 |       },
 48 |       goto(path) {
 49 |         if (path) {
 50 |           this.$router.push({path});
 51 |         }
 52 |       },
 53 |     },
 54 |   };
 55 | </script>
 56 | 
 57 | <style lang="scss" scoped>
 58 | @import "../../style/variables";
 59 | 
 60 | .header-wrapper {
 61 |   border-bottom: 1px solid rgba(208, 208, 208, .3);
 62 | }
 63 | 
 64 | .header {
 65 |   @include gravityCenter;
 66 |   height: $header-height;
 67 |   width: 1024px;
 68 |   margin: 0 auto;
 69 | 
 70 |   .header-nav {
 71 |     @include gravityCenter;
 72 |     color: #9b9b9b;
 73 |     font-size: 20px;
 74 | 
 75 |     i {
 76 |       margin: 0 10px;
 77 |       color: #c6c6c6;
 78 |     }
 79 |   }
 80 | 
 81 |   .avatar {
 82 |     position: relative;
 83 |     width: 155px;
 84 |     height: 80px;
 85 | 
 86 |     .photo {
 87 |       width: 45px;
 88 |       height: 45px;
 89 |       border-radius: 5px;
 90 |       position: absolute;
 91 |       top: 0;
 92 |       bottom: 0;
 93 |       left: 0;
 94 |       margin: auto;
 95 |       background-color: #f7b92d;
 96 |     }
 97 | 
 98 |     span {
 99 |       display: inline-block;
100 |       width: 90px;
101 |       overflow: hidden;
102 |       text-overflow: ellipsis;
103 |       white-space: nowrap;
104 |       word-wrap: normal;
105 |       line-height: 30px;
106 |       position: absolute;
107 |       right: 0;
108 |     }
109 | 
110 |     .name {
111 |       color: #4a4a4a;
112 |       top: 13px;
113 |     }
114 | 
115 |     .logout {
116 |       font-size: 12px;
117 |       color: #9b9b9b;
118 |       bottom: 13px;
119 |       cursor: pointer;
120 |     }
121 |   }
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/views/main/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login" @keydown.enter="login">
  3 |     <div class="login-con">
  4 |       <el-card>
  5 |         <div slot="header">
  6 |           <span>欢迎访问应用发布平台</span>
  7 |         </div>
  8 |         <el-form ref="loginForm" :model="user" :rules="rules">
  9 |           <el-form-item prop="username">
 10 |             <el-input v-model="user.username" placeholder="请输入账号" size="medium">
 11 |               <template slot="prepend">账号</template>
 12 |             </el-input>
 13 |           </el-form-item>
 14 |           <el-form-item prop="password">
 15 |             <el-input v-model="user.password" placeholder="请输入密码" size="medium" show-password>
 16 |               <template slot="prepend">密码</template>
 17 |             </el-input>
 18 |           </el-form-item>
 19 |           <el-button
 20 |               :loading="loading"
 21 |               size="medium"
 22 |               style="width: 100%"
 23 |               type="primary"
 24 |               @click="login">
 25 |             登录
 26 |           </el-button>
 27 |         </el-form>
 28 |       </el-card>
 29 |     </div>
 30 |     <div class="copyright">
 31 |       © 2020-{{new Date().getFullYear()}} 版权所有
 32 |       <a href="http://www.beian.miit.gov.cn/" target="_blank" style="color: #FFF">沪ICP备13031758号</a>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 |   import loginUtil from "@/util/loginUtil";
 39 | 
 40 |   export default {
 41 |     data() {
 42 |       const isDev = process.env.NODE_ENV === "development";
 43 |       return {
 44 |         user: {
 45 |           username: isDev ? "admin" : "",
 46 |           password: isDev ? "123456" : "",
 47 |         },
 48 |         rules: {
 49 |           phone: {required: true, message: "手机号不能为空", trigger: "blur"},
 50 |           password: {required: true, message: "密码不能为空", trigger: "blur"},
 51 |         },
 52 |         loading: false,
 53 |       };
 54 |     },
 55 |     methods: {
 56 |       login() {
 57 |         this.$refs.loginForm.validate(valid => {
 58 |           if (valid) {
 59 |             this.loading = true;
 60 |             this.$http.get("account/login", this.user)
 61 |               .then(res => {
 62 |                 this.loading = false;
 63 |                 loginUtil.login(res.data);
 64 |                 this.$router.push({path: "/"});
 65 |               })
 66 |               .catch(() => {
 67 |                 this.loading = false;
 68 |               });
 69 |           }
 70 |         });
 71 |       },
 72 |     },
 73 |   };
 74 | </script>
 75 | 
 76 | <style lang="scss" scoped>
 77 |   .login {
 78 |     width: 100%;
 79 |     height: 100%;
 80 |     background: url('/img/login_bg.jpg') center;
 81 |     background-size: cover;
 82 |     position: relative;
 83 | 
 84 |     &-con {
 85 |       position: absolute;
 86 |       right: 160px;
 87 |       top: 50%;
 88 |       transform: translateY(-60%);
 89 |       width: 360px;
 90 |     }
 91 | 
 92 |     .copyright {
 93 |       position: absolute;
 94 |       text-align: center;
 95 |       left: 10%;
 96 |       right: 10%;
 97 |       bottom: 5px;
 98 |       color: white;
 99 |       font-size: 14px;
100 |     }
101 |   }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="renderer" content="webkit"/>
 6 |     <meta name="force-rendering" content="webkit"/>
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
 8 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 9 |     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
10 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 |     <!--iconfont图标-->
12 |     <link rel="stylesheet" href="//at.alicdn.com/t/font_1903178_i705xota0lh.css" type="text/css">
13 |     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css">
14 |     <title><%= htmlWebpackPlugin.options.title %></title>
15 |     <style>
16 |       .vm-loading {
17 |         display: flex;
18 |         margin: 100px auto;
19 |         width: 50px;
20 |         height: 60px;
21 |         text-align: center;
22 |       }
23 | 
24 |       .vm-loading > div {
25 |         background-color: #E6A23C;
26 |         height: 100%;
27 |         width: 6px;
28 |         margin-left: 4px;
29 |         -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
30 |         animation: stretchDelay 1.2s infinite ease-in-out;
31 |       }
32 | 
33 |       .vm-loading .rect2 {
34 |         -webkit-animation-delay: -1.1s;
35 |         animation-delay: -1.1s;
36 |       }
37 | 
38 |       .vm-loading .rect3 {
39 |         -webkit-animation-delay: -1.0s;
40 |         animation-delay: -1.0s;
41 |       }
42 | 
43 |       .vm-loading .rect4 {
44 |         -webkit-animation-delay: -0.9s;
45 |         animation-delay: -0.9s;
46 |       }
47 | 
48 |       .vm-loading .rect5 {
49 |         -webkit-animation-delay: -0.8s;
50 |         animation-delay: -0.8s;
51 |       }
52 | 
53 |       @-webkit-keyframes stretchDelay {
54 |         0%, 40%, 100% {
55 |           -webkit-transform: scaleY(0.4)
56 |         }
57 |         20% {
58 |           -webkit-transform: scaleY(1.0)
59 |         }
60 |       }
61 | 
62 |       @keyframes stretchDelay {
63 |         0%, 40%, 100% {
64 |           transform: scaleY(0.4);
65 |           -webkit-transform: scaleY(0.4);
66 |         }
67 |         20% {
68 |           transform: scaleY(1.0);
69 |           -webkit-transform: scaleY(1.0);
70 |         }
71 |       }
72 |     </style>
73 |   </head>
74 |   <body>
75 |     <noscript>
76 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
77 |     </noscript>
78 |     <div id="app">
79 |       <div class="vm-loading">
80 |         <div class="rect1"></div>
81 |         <div class="rect2"></div>
82 |         <div class="rect3"></div>
83 |         <div class="rect4"></div>
84 |         <div class="rect5"></div>
85 |       </div>
86 |     </div>
87 |     <!-- built files will be auto injected -->
88 |     <script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script>
89 |     <script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
90 |     <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
91 |     <!--全局配置文件-->
92 |     <script type="text/javascript" src="<%= BASE_URL %>config.js?time=<%= Math.random()%>"></script>
93 |   </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "yanglaojin",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "scripts": {
  6 |     "serve": "vue-cli-service serve",
  7 |     "build": "vue-cli-service build",
  8 |     "lint": "vue-cli-service lint"
  9 |   },
 10 |   "dependencies": {
 11 |     "@chenfengyuan/vue-qrcode": "^1.0.2",
 12 |     "app-info-parser": "^0.3.10",
 13 |     "axios": "^0.19.2",
 14 |     "core-js": "^3.6.5",
 15 |     "normalize.css": "^8.0.1",
 16 |     "vue": "^2.6.11"
 17 |   },
 18 |   "devDependencies": {
 19 |     "@vue/cli-plugin-babel": "~4.4.0",
 20 |     "@vue/cli-plugin-eslint": "~4.4.0",
 21 |     "@vue/cli-plugin-router": "~4.4.0",
 22 |     "@vue/cli-service": "~4.4.0",
 23 |     "babel-eslint": "^10.1.0",
 24 |     "eslint": "^6.7.2",
 25 |     "eslint-plugin-vue": "^6.2.2",
 26 |     "lint-staged": "^9.5.0",
 27 |     "node-sass": "^4.12.0",
 28 |     "sass-loader": "^8.0.2",
 29 |     "vue-template-compiler": "^2.6.11"
 30 |   },
 31 |   "eslintConfig": {
 32 |     "root": true,
 33 |     "env": {
 34 |       "node": true
 35 |     },
 36 |     "extends": [
 37 |       "plugin:vue/essential",
 38 |       "eslint:recommended"
 39 |     ],
 40 |     "parserOptions": {
 41 |       "parser": "babel-eslint"
 42 |     },
 43 |     "rules": {
 44 |       "no-console": "off",
 45 |       "no-irregular-whitespace": "off",
 46 |       "quotes": [
 47 |         "error",
 48 |         "double"
 49 |       ],
 50 |       "semi": [
 51 |         "error",
 52 |         "always"
 53 |       ],
 54 |       "space-in-parens": [
 55 |         "warn",
 56 |         "never"
 57 |       ],
 58 |       "space-before-function-paren": [
 59 |         "warn",
 60 |         "never"
 61 |       ],
 62 |       "space-before-blocks": [
 63 |         "warn",
 64 |         "always"
 65 |       ],
 66 |       "vue/attribute-hyphenation": "warn",
 67 |       "vue/html-closing-bracket-spacing": [
 68 |         "error",
 69 |         {
 70 |           "selfClosingTag": "never"
 71 |         }
 72 |       ],
 73 |       "vue/html-end-tags": "error",
 74 |       "vue/html-indent": [
 75 |         "warn",
 76 |         2,
 77 |         {
 78 |           "attribute": 2,
 79 |           "baseIndent": 1,
 80 |           "closeBracket": 0,
 81 |           "alignAttributesVertically": true,
 82 |           "ignores": []
 83 |         }
 84 |       ],
 85 |       "vue/script-indent": [
 86 |         "warn",
 87 |         2,
 88 |         {
 89 |           "baseIndent": 1,
 90 |           "switchCase": 1,
 91 |           "ignores": []
 92 |         }
 93 |       ],
 94 |       "vue/html-quotes": "error",
 95 |       "vue/html-self-closing": "error",
 96 |       "vue/max-attributes-per-line": [
 97 |         "warn",
 98 |         {
 99 |           "singleline": 4,
100 |           "multiline": {
101 |             "max": 1,
102 |             "allowFirstLine": false
103 |           }
104 |         }
105 |       ],
106 |       "vue/multiline-html-element-content-newline": "warn",
107 |       "vue/mustache-interpolation-spacing": [
108 |         "error",
109 |         "never"
110 |       ],
111 |       "vue/name-property-casing": "error",
112 |       "vue/no-multi-spaces": "warn",
113 |       "vue/no-spaces-around-equal-signs-in-attribute": "warn",
114 |       "vue/no-template-shadow": "warn",
115 |       "vue/prop-name-casing": "error",
116 |       "vue/require-prop-types": "error",
117 |       "vue/v-bind-style": "warn",
118 |       "vue/v-on-style": "warn",
119 |       "vue/attributes-order": "warn",
120 |       "vue/no-confusing-v-for-v-if": "error",
121 |       "vue/no-v-html": "off",
122 |       "vue/order-in-components": "warn",
123 |       "vue/this-in-template": "error",
124 |       "vue/camelcase": "error",
125 |       "comma-dangle": [
126 |         "error",
127 |         "always-multiline"
128 |       ],
129 |       "vue/component-name-in-template-casing": [
130 |         "warn",
131 |         "kebab-case"
132 |       ],
133 |       "vue/eqeqeq": "warn",
134 |       "vue/match-component-file-name": "error"
135 |     }
136 |   },
137 |   "browserslist": [
138 |     "> 1%",
139 |     "last 2 versions",
140 |     "not dead"
141 |   ],
142 |   "lint-staged": {
143 |     "*.{js,jsx,vue}": [
144 |       "vue-cli-service lint",
145 |       "git add"
146 |     ]
147 |   }
148 | }
149 | 


--------------------------------------------------------------------------------
/src/views/appList/AppUploadDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |       v-el-drag-dialog
  4 |       class="no-padding"
  5 |       :close-on-click-modal="false"
  6 |       :visible.sync="dialogVisible"
  7 |       top="3vh"
  8 |       width="600px">
  9 |     <el-form
 10 |         ref="form"
 11 |         v-loading="contentLoading"
 12 |         size="default"
 13 |         :model="model"
 14 |         :rules="ruleValidate"
 15 |         class="app-upload-dialog"
 16 |         label-width="150px">
 17 |       <div class="title">
 18 |         <img
 19 |             alt="图标"
 20 |             width="100"
 21 |             height="100"
 22 |             :src="model.icon">
 23 |         <div style="margin-left: 35px;padding-top: 10px;width: 100%">
 24 |           <span>{{model.versionName}} (Build {{model.versionCode}}) </span>
 25 |           <el-form-item prop="appName" label-width="0" style="margin-top: 15px">
 26 |             <el-input v-model="model.name"/>
 27 |           </el-form-item>
 28 |         </div>
 29 |       </div>
 30 |       <div style="width: 100%;border-bottom: 1px solid #eee;height: 1px;margin-bottom: 35px"/>
 31 |       <el-form-item label="更新日志" prop="no" style="padding-right: 40px">
 32 |         <el-input v-model="model.changeLog" type="textarea" :rows="7"/>
 33 |       </el-form-item>
 34 |     </el-form>
 35 |     <button class="app-upload-btn" :disabled="uploading" @click="upload">
 36 |       <i class="el-icon-upload"/>{{uploadBtnText}}
 37 |     </button>
 38 |   </el-dialog>
 39 | </template>
 40 | 
 41 | <script>
 42 | 
 43 |   export default {
 44 |     components: {},
 45 |     data() {
 46 |       return {
 47 |         dialogVisible: false,
 48 |         contentLoading: false,
 49 |         uploading: false,
 50 |         uploadBtnText: "开始上传",
 51 |         model: {
 52 |           name: "",
 53 |           packageName: "",
 54 |           versionCode: "",
 55 |           versionName: "",
 56 |           changeLog: "",
 57 |           icon: "",
 58 |         },
 59 |         ruleValidate: {
 60 |           name: {required: true, message: "不能为空", trigger: "blur"},
 61 |         },
 62 |       };
 63 |     },
 64 |     methods: {
 65 |       open(file) {
 66 |         if (this.checkApk(file.name)) {
 67 |           this.dialogVisible = true;
 68 |           this.contentLoading = true;
 69 |           this.model.changeLog = "";
 70 |           this.uploading = false;
 71 |           this.uploadBtnText = "开始上传";
 72 |           let AppInfoParser = require("app-info-parser");
 73 |           let parser = new AppInfoParser(file.raw);
 74 |           parser.parse().then(result => {
 75 |             this.model.name = result.application.label[0];
 76 |             this.model.packageName = result.package;
 77 |             this.model.packageName = result.package;
 78 |             this.model.versionCode = result.versionCode;
 79 |             this.model.versionName = result.versionName;
 80 |             this.model.icon = result.icon;
 81 |             this.$emit("appInfo", this.model);
 82 |             this.contentLoading = false;
 83 |           }).catch(err => {
 84 |             this.contentLoading = false;
 85 |             console.log(err);
 86 |             this.$message.error("apk解析失败");
 87 |           });
 88 |         }
 89 |       },
 90 |       close() {
 91 |         this.dialogVisible = false;
 92 | 
 93 |       },
 94 |       checkApk(fileName) {
 95 |         let pos = fileName.lastIndexOf(".");
 96 |         let lastName = fileName.substring(pos, fileName.length);
 97 |         let isApk = lastName.toLowerCase() === ".apk";
 98 |         if (!isApk) {
 99 |           this.$message.error("请上传.apk类型文件");
100 |         }
101 |         return isApk;
102 |       },
103 |       upload() {
104 |         this.uploading = true;
105 |         this.uploadBtnText = "正在上传 0%";
106 |         this.$emit("upload");
107 |       },
108 |       onProgress(event) {
109 |         this.uploadBtnText = "正在上传 " + event.percent.toFixed(2) + "%";
110 |       },
111 |     },
112 |   };
113 | </script>
114 | 
115 | <style lang="scss" scoped>
116 |   @import "../../style/variables";
117 | 
118 |   .app-upload-dialog {
119 |     color: #9b9b9b;
120 | 
121 |     .title {
122 |       display: flex;
123 |       padding: 40px 40px 25px 40px;
124 |     }
125 |   }
126 | 
127 |   .app-upload-btn {
128 |     @include gravityCenter;
129 |     width: 100%;
130 |     padding: 20px;
131 |     margin-top: 50px;
132 |     background-color: $color-primary;
133 |     border-radius: 10px;
134 |     border: none;
135 |     color: white;
136 |     font-size: 20px;
137 | 
138 |     i {
139 |       font-size: 35px;
140 |       margin-right: 10px;
141 |     }
142 | 
143 |     &:disabled {
144 |       background-color: red;
145 |     }
146 |   }
147 | 
148 | </style>
149 | 


--------------------------------------------------------------------------------
/src/views/appList/AppList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-loading="contentLoading" class="main-home" element-loading-background="rgba(0, 0, 0, 0)">
  3 |     <el-upload
  4 |         ref="upload"
  5 |         class="card upload"
  6 |         drag
  7 |         accept=".apk"
  8 |         :auto-upload="false"
  9 |         :show-file-list="false"
 10 |         :on-change="uploadChange"
 11 |         :on-error="uploadError"
 12 |         :on-progress="uploadProgress"
 13 |         :on-success="uploadSuccess"
 14 |         :data="uploadAppInfo"
 15 |         :headers="auth"
 16 |         :action="uploadUrl">
 17 |       <div class="upload-text">
 18 |         <i class="el-icon-upload"/>
 19 |         <div>将文件拖到此处，或<em>点击上传</em></div>
 20 |       </div>
 21 |     </el-upload>
 22 |     <div v-for="item in appList" :key="item.id" class="card app">
 23 |       <img
 24 |           style="cursor:pointer;"
 25 |           alt="图标"
 26 |           width="100"
 27 |           height="100"
 28 |           :src="item.currentVersion.icon"
 29 |           @click="toVersion(item.id)">
 30 |       <div class="app-name">{{item.name}}</div>
 31 |       <table>
 32 |         <tr>
 33 |           <td>短链接:</td>
 34 |           <td>{{getUrl(item)}}</td>
 35 |         </tr>
 36 |         <tr>
 37 |           <td>PackageName:</td>
 38 |           <td>{{item.packageName}}</td>
 39 |         </tr>
 40 |         <tr>
 41 |           <td>最新版本:</td>
 42 |           <td>{{item.currentVersion.versionName}} (Build {{item.currentVersion.versionCode}})</td>
 43 |         </tr>
 44 |       </table>
 45 |       <div class="app-btn">
 46 |         <el-button icon="el-icon-edit" round @click="toVersion(item.id)">编辑</el-button>
 47 |         <el-button icon="el-icon-view" round style="margin-left: 10px" @click.stop="gotoPreview(item)">预览</el-button>
 48 |       </div>
 49 |     </div>
 50 |     <app-upload-dialog
 51 |         ref="appUploadDialog"
 52 |         @upload="$refs.upload.submit()"
 53 |         @appInfo="onAppInfo"/>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script>
 58 |   import AppUploadDialog from "@/views/appList/AppUploadDialog";
 59 |   import {mutations} from "@/store/store";
 60 |   import auth from "@/util/loginUtil";
 61 | 
 62 |   export default {
 63 |     components: {AppUploadDialog},
 64 |     data() {
 65 |       return {
 66 |         contentLoading: true,
 67 |         appList: [],
 68 |         uploadUrl: window.config.serverUrl + "apps/upload",
 69 |         uploadAppInfo: null,
 70 |         auth: {
 71 |           authorization: auth.getToken(),
 72 |         },
 73 |       };
 74 |     },
 75 |     mounted() {
 76 |       mutations.setBreadcrumbs([{
 77 |         name: "我的应用",
 78 |       }]);
 79 |       this.getAppList();
 80 |     },
 81 |     methods: {
 82 |       getAppList() {
 83 |         this.contentLoading = true;
 84 |         this.$http.get("apps").then(res => {
 85 |           this.appList = res.data;
 86 |           this.contentLoading = false;
 87 |         }).catch(() => {
 88 |           this.contentLoading = false;
 89 |         });
 90 |       },
 91 |       uploadChange(file) {
 92 |         if (file.status === "ready") {
 93 |           this.$refs.appUploadDialog.open(file);
 94 |         }
 95 |       },
 96 |       uploadError() {
 97 |         this.$refs.appUploadDialog.close();
 98 |         this.$message.error("上传失败，请重试");
 99 |       },
100 |       uploadProgress(event) {
101 |         this.$refs.appUploadDialog.onProgress(event);
102 |       },
103 |       uploadSuccess() {
104 |         this.$refs.appUploadDialog.close();
105 |         this.$message.success("上传成功");
106 |         this.getAppList();
107 |       },
108 |       onAppInfo(appInfo) {
109 |         this.uploadAppInfo = appInfo;
110 |       },
111 |       toVersion(id) {
112 |         this.$router.push({
113 |           path: "/apps/" + id,
114 |         });
115 |       },
116 |       gotoPreview(item) {
117 |         window.open("/" + item.shortCode, "_blank");
118 |       },
119 |       getUrl(item) {
120 |         return window.location.protocol + "//" + window.location.host + "/" + item.shortCode;
121 |       },
122 |     },
123 |   };
124 | </script>
125 | 
126 | <style lang="scss" scoped>
127 | @import "../../style/variables";
128 | 
129 | .main-home {
130 |   font-size: 20px;
131 |   display: flex;
132 |   flex-wrap: wrap;
133 |   width: 1020px;
134 |   margin: 0 auto;
135 |   padding: 20px 0;
136 | 
137 |   .card {
138 |     margin: 12px;
139 |     width: 30.5%;
140 |     height: 430px;
141 |     background-color: #fff;
142 |     padding: 0;
143 |     transition: all .25s;
144 | 
145 |     i {
146 |       transition: all .25s;
147 |     }
148 | 
149 |     &:hover {
150 |       transform: translateY(-4px);
151 |       box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
152 | 
153 |       .app-name {
154 |         color: #4a4a4a;
155 |       }
156 | 
157 |       i {
158 |         transform: scale(1.2);
159 |       }
160 |     }
161 |   }
162 | 
163 |   .upload {
164 |     background-color: $color-primary;
165 |     cursor: pointer;
166 | 
167 |     i {
168 |       color: white;
169 |       font-size: 85px;
170 |       margin-bottom: 25px;
171 |     }
172 | 
173 |     .upload-text {
174 |       color: white;
175 |       font-size: 17px;
176 |       margin-top: 135px;
177 |     }
178 |   }
179 | 
180 |   .app {
181 |     position: relative;
182 |     box-sizing: border-box;
183 |     padding: 50px 45px 45px 45px;
184 | 
185 |     .app-name {
186 |       font-size: 18px;
187 |       margin: 25px 0;
188 |     }
189 | 
190 |     table {
191 |       width: 100%;
192 |       font-size: 12px;
193 | 
194 |       td {
195 |         padding: 4px 0;
196 |       }
197 | 
198 |       td:last-child {
199 |         padding-left: 10px;
200 |         color: #1A1A1A;
201 |         word-break: break-all;
202 |       }
203 |     }
204 | 
205 |     .app-btn {
206 |       width: 100%;
207 |       position: absolute;
208 |       text-align: center;
209 |       bottom: 30px;
210 |       left: 0;
211 |     }
212 |   }
213 | }
214 | </style>
215 | <style lang="scss">
216 | .main-home {
217 |   .card {
218 |     .el-upload, .el-upload-dragger {
219 |       width: 100%;
220 |       height: 100%;
221 |     }
222 | 
223 |     .el-upload-dragger {
224 |       background-color: transparent;
225 |       border: none;
226 |     }
227 | 
228 |     .el-upload-dragger.is-dragover {
229 |       background-color: rgba(0, 0, 0, 0.3);
230 |       border-radius: 0;
231 |     }
232 |   }
233 | }
234 | </style>


--------------------------------------------------------------------------------
/src/components/VmTable.vue:
--------------------------------------------------------------------------------
  1 | <!--带有分页逻辑的table-->
  2 | <template>
  3 |   <div class="vm-page-table">
  4 |     <div
  5 |         v-if="$slots.adSearch"
  6 |         ref="adSearch"
  7 |         class="ad-search">
  8 |       <div id="search" class="ad-search_content">
  9 |         <slot name="adSearch"/>
 10 |         <div class="ad-search-btn">
 11 |           <el-button
 12 |               v-if="!hideClear"
 13 |               plain
 14 |               size="mini"
 15 |               style="height: 26px;padding: 0 10px"
 16 |               type="primary"
 17 |               @click="handleClearClick">
 18 |             重置
 19 |           </el-button>
 20 |           <el-button
 21 |               :loading="status==='loading'"
 22 |               size="mini"
 23 |               style="height: 26px;padding: 0 10px"
 24 |               type="primary"
 25 |               @click="handleSearchClick">
 26 |             查询
 27 |           </el-button>
 28 |         </div>
 29 |       </div>
 30 |     </div>
 31 |     <div
 32 |         v-if="$slots.toolbar"
 33 |         class="tools-bar">
 34 |       <slot name="toolbar"/>
 35 |     </div>
 36 |     <div class="wrapper">
 37 |       <el-table
 38 |           ref="elTable"
 39 |           v-loading="status==='loading'&&tableData.length>0"
 40 |           :data="tableData"
 41 |           border
 42 |           stripe
 43 |           v-bind="$attrs"
 44 |           @selection-change="handleSelectionChange"
 45 |           v-on="$listeners">
 46 |         <el-table-column
 47 |             v-if="multiSelection"
 48 |             type="selection"
 49 |             width="55"/>
 50 |         <template slot="empty">
 51 |           <i v-if="status==='loading'" class="el-icon-loading" style="font-size: 18px"/>
 52 |           <el-button v-else-if="status==='error'" @click="handleSearchClick">加载失败，点击重新获取</el-button>
 53 |           <div v-else-if="status==='empty'">暂无数据</div>
 54 |         </template>
 55 |         <el-table-column v-if="showRadio" align="center" width="50">
 56 |           <template slot-scope="scope">
 57 |             <el-checkbox :value="scope.$index===currentRowIndex" @change="onCheckedChange($event,scope.$index)"/>
 58 |           </template>
 59 |         </el-table-column>
 60 |         <slot/>
 61 |       </el-table>
 62 |       <div style="margin-top: 16px;overflow: hidden">
 63 |         <el-pagination
 64 |             background
 65 |             :current-page="currentPage"
 66 |             :total="total"
 67 |             :page-size="pageSize"
 68 |             class="page"
 69 |             layout="total, prev, pager, next"
 70 |             @current-change="handleCurrentChange"/>
 71 |       </div>
 72 |     </div>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script>
 77 |   /*查询条件filter必须使用:filter.sync="filter"传递*/
 78 |   export default {
 79 |     components: {},
 80 |     props: {
 81 |       url: {
 82 |         type: String,
 83 |         required: true,
 84 |       },
 85 |       filter: {
 86 |         type: Object,
 87 |       },
 88 |       //是否显示清空按钮
 89 |       hideClear: {
 90 |         type: Boolean,
 91 |         default: false,
 92 |       },
 93 |       pageSize: {
 94 |         type: Number,
 95 |         default: 10,
 96 |       },
 97 |       multiSelection: {
 98 |         type: Boolean,
 99 |         default: false,
100 |       },
101 |       showRadio: {
102 |         type: Boolean,
103 |         default: false,
104 |       },
105 |       post: {
106 |         type: Boolean,
107 |         default: false,
108 |       },
109 |     },
110 |     data() {
111 |       return {
112 |         status: "loading",//loading error empty
113 |         currentPage: 1,
114 |         total: 0,
115 |         tableData: [],
116 |         //保存一份filter的原始拷贝，用于重置条件
117 |         filterCopy: JSON.stringify(this.filter),
118 |         currentRowIndex: -1,
119 |       };
120 |     },
121 |     mounted() {
122 |       //为所有input框添加enter键搜索事件
123 |       let searchBox = document.getElementById("search");
124 |       if (searchBox) {
125 |         let controls = searchBox.getElementsByTagName("input");
126 |         for (let item of controls) {
127 |           item.onkeydown = event => {
128 |             if (event.key === "Enter") {
129 |               this.getList(1);
130 |             }
131 |           };
132 |         }
133 |       }
134 |     },
135 |     methods: {
136 |       //等于-1表示获取当前页
137 |       getList(pageNo, processor) {
138 |         this.status = "loading";
139 |         if (pageNo > 0) {
140 |           this.currentPage = pageNo;
141 |         }
142 |         let params = Object.assign({pageSize: this.pageSize, pageNo: this.currentPage}, this.filter);
143 |         let http = this.post ? this.$http.post(this.url, params) : this.$http.get(this.url, params);
144 |         http.then(data => {
145 |           if (processor) {
146 |             this.tableData = processor(data.list);
147 |           } else {
148 |             this.tableData = data.list;
149 |           }
150 |           this.total = data.totalCount;
151 |           if (this.total === 0) {
152 |             this.status = "empty";
153 |           } else {
154 |             this.status = "finish";
155 |           }
156 |         }).catch(() => {
157 |           this.status = "error";
158 |         });
159 |       },
160 |       handleCurrentChange(pageNo) {
161 |         this.getList(pageNo);
162 |       },
163 |       handleSearchClick() {
164 |         this.getList(1);
165 |       },
166 |       handleClearClick() {
167 |         this.$emit("update:filter", JSON.parse(this.filterCopy));
168 |         this.$emit("clear");
169 |         this.$nextTick(() => {
170 |           this.getList(1);
171 |         });
172 |       },
173 |       setCurrentRow(row) {
174 |         this.$refs.elTable.setCurrentRow(row);
175 |       },
176 |       onCheckedChange(val, index) {
177 |         this.currentRowIndex = val ? index : -1;
178 |         this.$emit("radio-change", this.tableData[this.currentRowIndex], val);
179 |       },
180 |       getCurrentRow() {
181 |         return this.tableData[this.currentRowIndex];
182 |       },
183 |       handleSelectionChange(val) {
184 |         this.$emit("selection-change", val);
185 |       },
186 |     },
187 |   };
188 | </script>
189 | 
190 | <style lang="scss">
191 |   .vm-page-table {
192 | 
193 |     .tools-bar {
194 |       margin-bottom: 10px;
195 |     }
196 | 
197 |     .ad-search {
198 |       overflow: auto;
199 |       width: auto;
200 |       border: 1px solid #EBEEF5;
201 |       margin-bottom: 10px;
202 |       background-color: #f4f7fa;
203 | 
204 |       .ad-search_content {
205 |         position: relative;
206 |         display: inline-block;
207 |         padding: 8px 133px 8px 10px;
208 | 
209 |         .ad-search-btn {
210 |           position: absolute;
211 |           right: 10px;
212 |           bottom: 11px;
213 |         }
214 |       }
215 |     }
216 | 
217 |     .page {
218 |       float: right;
219 |     }
220 | 
221 |     .el-loading-spinner {
222 |       position: fixed;
223 |       width: 100px;
224 |       top: 50%;
225 |       left: 45%;
226 |     }
227 |   }
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/views/appDetail/AppVersions.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-loading="contentLoading" class="app-versions" element-loading-background="rgba(0, 0, 0, 0)">
  3 |     <div class="top-wrapper">
  4 |       <div class="top" :class="topArrowClass">
  5 |         <img
  6 |             alt="图标"
  7 |             width="100"
  8 |             height="100"
  9 |             style="cursor: pointer"
 10 |             :src="currentVersion.icon||'/img/app.png'"
 11 |             @click="tabActive=0">
 12 |         <div class="info">
 13 |           <el-button size="mini" style="color: #F8BA0B;margin-right: 10px">{{url}}</el-button>
 14 |           <el-button-group>
 15 |             <el-button size="mini">包名</el-button>
 16 |             <el-button size="mini">{{appInfo.packageName}}</el-button>
 17 |           </el-button-group>
 18 |           <el-button-group style="margin-left: 10px">
 19 |             <el-button size="mini">下载次数</el-button>
 20 |             <el-button size="mini">{{appInfo.downloadCount}}</el-button>
 21 |           </el-button-group>
 22 |         </div>
 23 |         <div class="edit">
 24 |           <div class="edit-item" @click="tabActive=1">
 25 |             <i class="el-icon-tickets"/>
 26 |             <div>基本信息</div>
 27 |           </div>
 28 |           <div class="edit-divider"/>
 29 |           <div class="edit-item" @click="tabActive=2">
 30 |             <i class="el-icon-tickets"/>
 31 |             <div>应用合并</div>
 32 |           </div>
 33 |         </div>
 34 |         <el-button
 35 |             size="default"
 36 |             type="success"
 37 |             icon="el-icon-view"
 38 |             class="right-btn"
 39 |             @click="gotoPreview">
 40 |           预览
 41 |         </el-button>
 42 |       </div>
 43 |     </div>
 44 |     <el-form
 45 |         ref="form"
 46 |         :model="appInfo"
 47 |         label-width="80px"
 48 |         class="tab">
 49 |       <div v-if="tabActive===0" class="version-list tab">
 50 |         <el-timeline>
 51 |           <el-timeline-item
 52 |               v-for="item in appInfo.versions"
 53 |               :key="item"
 54 |               :timestamp="item.versionName+'（Build ' +item.versionCode+'）'+item.name"
 55 |               placement="top"
 56 |               color="#9B9B9B">
 57 |             <div>
 58 |               <div class="item-time"><i class="el-icon-date"/>{{item.createTime}}</div>
 59 |               <pre class="change-log">{{item.changeLog}}</pre>
 60 |               <div class="item-btn-wrapper">
 61 |                 <i class="el-icon-edit item-icon" @click="$refs.appVersionEdit.open(item)"/>
 62 |                 <div class="item-icon" style="margin-left: 10px" @click="download(item.id)">
 63 |                   <i class="el-icon-download"/>{{(item.size/1024).toFixed(2)}} MB
 64 |                 </div>
 65 |               </div>
 66 |             </div>
 67 |           </el-timeline-item>
 68 |         </el-timeline>
 69 |       </div>
 70 |       <div v-if="tabActive===1">
 71 |         <el-form-item label="应用名称" prop="name" :rules="ruleNotNull">
 72 |           <el-input v-model="appInfo.name" style="width: 300px"/>
 73 |         </el-form-item>
 74 |         <el-form-item label="短链接" prop="shortCode" :rules="ruleNotNull">
 75 |           <el-input v-model="appInfo.shortCode" style="width: 300px">
 76 |             <template slot="prepend">{{host}}</template>
 77 |           </el-input>
 78 |         </el-form-item>
 79 |         <el-form-item label="应用描述">
 80 |           <el-input v-model="appInfo.description" type="textarea" :rows="4"/>
 81 |         </el-form-item>
 82 |         <el-button :loading="submitLoading" type="warning" class="save-btn" @click="handleSubmit(1)">保存</el-button>
 83 |       </div>
 84 |       <div v-if="tabActive===2">
 85 |         <el-form-item label="ios商店地址" prop="iosUrl" :rules="ruleNotNull" label-width="105px">
 86 |           <el-input v-model="appInfo.iosUrl"/>
 87 |         </el-form-item>
 88 |         <el-button :loading="submitLoading" type="warning" class="save-btn" @click="handleSubmit(2)">保存</el-button>
 89 |       </div>
 90 |     </el-form>
 91 |     <app-version-edit ref="appVersionEdit" @save-success="getAppList"/>
 92 |   </div>
 93 | </template>
 94 | 
 95 | <script>
 96 |   import {mutations} from "@/store/store";
 97 |   import AppVersionEdit from "@/views/appDetail/AppVersionEdit";
 98 | 
 99 |   export default {
100 |     components: {AppVersionEdit},
101 |     data() {
102 |       return {
103 |         contentLoading: true,
104 |         submitLoading: false,
105 |         id: null,
106 |         appInfo: {
107 |           versions: [],
108 |           name: "",
109 |           shortCode: "",
110 |           description: "",
111 |           iosUrl: "",
112 |           downloadCount: 0,
113 |         },
114 |         host: window.location.host,
115 |         tabActive: 0,
116 |         ruleNotNull: {required: true, message: "不能为空"},
117 |       };
118 |     },
119 |     computed: {
120 |       currentVersion() {
121 |         if (this.appInfo && this.appInfo.versions && this.appInfo.versions.length) {
122 |           return this.appInfo.versions[0];
123 |         }
124 |         return {};
125 |       },
126 |       topArrowClass() {
127 |         return {
128 |           topTab1: this.tabActive === 1,
129 |           topTab2: this.tabActive === 2,
130 |         };
131 |       },
132 |       url() {
133 |         let shortCode = this.appInfo.shortCode;
134 |         return shortCode ? (document.location.protocol + "//" + window.location.host + "/" + shortCode) : "";
135 |       },
136 |     },
137 |     mounted() {
138 |       this.id = this.$route.params.id;
139 |       if (this.id) {
140 |         this.getAppList();
141 |       }
142 |     },
143 |     methods: {
144 |       getAppList() {
145 |         this.contentLoading = true;
146 |         this.$http.get(`apps/${this.id}`).then(res => {
147 |           this.contentLoading = false;
148 |           this.appInfo = res.data;
149 |           this.setBreadcrumbs();
150 |         }).catch(() => {
151 |           this.contentLoading = false;
152 |         });
153 |       },
154 |       download(filename) {
155 |         window.open(window.config.serverUrl + "appVersions/downloadApk/" + filename);
156 |       },
157 |       gotoPreview() {
158 |         window.open("/" + this.appInfo.shortCode, "_blank");
159 |       },
160 |       setBreadcrumbs() {
161 |         mutations.setBreadcrumbs([
162 |           {name: "我的应用", path: "/"},
163 |           {name: this.appInfo.name},
164 |         ]);
165 |       },
166 |       handleSubmit(tabActive) {
167 |         this.$refs.form.validate(valid => {
168 |           if (valid) {
169 |             this.submitLoading = true;
170 |             let body = {
171 |               id: this.appInfo.id,
172 |             };
173 |             if (tabActive === 1) {
174 |               body.name = this.appInfo.name;
175 |               body.shortCode = this.appInfo.shortCode;
176 |               body.description = this.appInfo.description;
177 |             } else if (tabActive === 2) {
178 |               body.iosUrl = this.appInfo.iosUrl;
179 |             }
180 |             this.$http
181 |               .put("apps", body)
182 |               .then(() => {
183 |                 this.submitLoading = false;
184 |                 this.$message.success("保存成功");
185 |               })
186 |               .catch(() => {
187 |                 this.submitLoading = false;
188 |               });
189 |           }
190 |         });
191 |       },
192 |     },
193 |   };
194 | </script>
195 | 
196 | <style lang="scss" scoped>
197 |   @import "../../style/variables";
198 | 
199 |   .app-versions {
200 |     .top-wrapper {
201 |       background-color: white;
202 |       border-bottom: 1px solid rgba(208, 208, 208, .5);
203 | 
204 |       .top {
205 |         position: relative;
206 |         margin: 0 auto;
207 |         width: 1020px;
208 |         background-color: white;
209 |         padding: 60px 0 40px 0;
210 | 
211 |         &:before {
212 |           position: absolute;
213 |           bottom: -13px;
214 |           left: 35px;
215 |           z-index: 2;
216 |           width: 24px;
217 |           height: 24px;
218 |           border: 1px solid rgba(208, 208, 208, .5);
219 |           border-right: none;
220 |           border-bottom: none;
221 |           background-color: #F6F6F6;
222 |           content: ' ';
223 |           transition: all .25s;
224 |           transform: rotate(45deg);
225 |         }
226 | 
227 |         .info {
228 |           position: absolute;
229 |           left: 120px;
230 |           display: inline-block;
231 |         }
232 | 
233 |         .edit {
234 |           position: absolute;
235 |           left: 120px;
236 |           top: 115px;
237 |           display: flex;
238 |         }
239 | 
240 |         .edit-item {
241 |           display: flex;
242 |           flex-direction: column;
243 |           justify-content: center;
244 |           align-items: center;
245 |           color: #999;
246 |           font-size: 14px;
247 |           cursor: pointer;
248 | 
249 |           i {
250 |             margin-bottom: 10px;
251 |             font-size: 28px;
252 |           }
253 |         }
254 | 
255 |         .edit-item-active {
256 |           color: #444;
257 |         }
258 | 
259 |         .edit-divider {
260 |           height: 50px;
261 |           border-left: 1px solid #999;
262 |           margin: 3px 25px 0;
263 |         }
264 | 
265 |         .right-btn {
266 |           position: absolute;
267 |           right: 5px;
268 |           width: 120px;
269 |         }
270 |       }
271 | 
272 |       .topTab1 {
273 |         &:before {
274 |           left: 135px;
275 |         }
276 |       }
277 | 
278 |       .topTab2 {
279 |         &:before {
280 |           left: 245px;
281 |         }
282 |       }
283 |     }
284 | 
285 |     .version-list {
286 |       background-color: #F6F6F6;
287 | 
288 |       .item-btn-wrapper {
289 |         margin-top: 10px;
290 | 
291 |         .item-icon {
292 |           display: inline-block;
293 |           border: 1px solid #aaa;
294 |           height: 30px;
295 |           line-height: 31px;
296 |           padding: 0 11px;
297 |           border-radius: 15px;
298 |           cursor: pointer;
299 | 
300 |           &:hover {
301 |             background-color: $color-primary;
302 |             color: white;
303 |             border: 1px solid white;
304 |           }
305 |         }
306 | 
307 |         i {
308 |           margin-right: 4px;
309 |         }
310 |       }
311 | 
312 |       pre {
313 |         display: block;
314 |         font-size: 13px;
315 |         word-break: break-all;
316 |         word-wrap: break-word;
317 |         border-radius: 3px;
318 |         margin: 14px 0;
319 |         padding: 0;
320 |         border: none;
321 |         background-color: transparent;
322 |         color: #4a4a4a;
323 |         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
324 |         line-height: 20px;
325 |       }
326 |     }
327 | 
328 |     .tab {
329 |       width: 1020px;
330 |       margin: 50px auto 0;
331 |       padding-bottom: 50px;
332 |     }
333 | 
334 |     .item-time {
335 |       font-size: 12px;
336 |       color: #9b9b9b;
337 |       margin-top: 15px;
338 | 
339 |       i {
340 |         margin-right: 5px;
341 |       }
342 |     }
343 | 
344 |     .save-btn {
345 |       margin-left: 30px;
346 |     }
347 | 
348 |     /deep/ .el-timeline-item__timestamp {
349 |       font-size: 20px;
350 |       color: #4a4a4a;
351 |     }
352 | 
353 |     /deep/ .el-timeline-item__wrapper {
354 |       top: -20px;
355 |       left: 5px;
356 |       padding-bottom: 50px;
357 |     }
358 |   }
359 | </style>


--------------------------------------------------------------------------------
/src/views/appDetail/Preview.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div v-loading="contentLoading" class="preview" element-loading-background="rgba(0, 0, 0, 0)">
   3 |     <span class="pattern left"><img src="/img/download_pattern_left.png"></span>
   4 |     <span class="pattern right"><img src="/img/download_pattern_right.png"></span>
   5 |     <div class="main">
   6 |       <header>
   7 |         <div class="table-container">
   8 |           <div class="cell-container">
   9 |             <div class="app-brief">
  10 |               <div class="icon-container wrapper">
  11 |                 <i class="icon-icon_path bg-path"/>
  12 |                 <span class="icon">
  13 |                   <img
  14 |                       itemprop="image"
  15 |                       alt="图标"
  16 |                       width="100"
  17 |                       height="100"
  18 |                       :src="appInfo.currentVersion.icon||'/img/app.png'">
  19 |                 </span>
  20 |                 <span class="qrcode" title=""><canvas width="200" height="200" style="display: none;"/>
  21 |                   <qr-code
  22 |                       v-if="url"
  23 |                       :value="url"
  24 |                       :options="qrCodeOptions"/>
  25 |                 </span>
  26 |               </div>
  27 |               <h1 class="name wrapper" style="margin-top: 60px">
  28 |                 <span class="icon-warp">
  29 |                   <i class="icon-android"/>
  30 |                   {{appInfo.name}}
  31 |                 </span>
  32 |               </h1>
  33 |               <p class="scan-tips">
  34 |                 扫描二维码下载<br>或用手机浏览器输入这个网址:&nbsp;&nbsp;<span class="text-black">{{url}}</span>
  35 |               </p>
  36 |               <div class="release-info">
  37 |                 <p itemprop="softwareVersion">
  38 |                   {{appInfo.currentVersion.versionName+"（Build " +appInfo.currentVersion.versionCode+"）-"}}
  39 |                   {{(appInfo.currentVersion.size/1024).toFixed(2)}} MB
  40 |                 </p>
  41 |                 <p>更新于: <span itemprop="datePublished">{{appInfo.currentVersion.createTime}}</span></p>
  42 |               </div>
  43 |               <div id="actions" class="actions type-android">
  44 |                 <button class="install-btn" @click="install">{{installText}}</button>
  45 |               </div>
  46 |             </div>
  47 |           </div>
  48 |         </div>
  49 |       </header>
  50 |       <div v-if="tipShow" class="we-chat-tip">
  51 |         <div class="we-chat-tip-arrow"/>
  52 |         请点击右上角<br>选择"在浏览器打开"
  53 |       </div>
  54 |       <div class="footer">
  55 |         <a href="http://www.beian.miit.gov.cn/" target="_blank" style="color: #A9B1B3">沪ICP备13031758号</a>
  56 |       </div>
  57 |     </div>
  58 |   </div>
  59 | </template>
  60 | <script>
  61 |   import QrCode from "@chenfengyuan/vue-qrcode";
  62 | 
  63 |   const ua = navigator.userAgent.toLowerCase();
  64 | 
  65 |   export default {
  66 |     components: {QrCode},
  67 |     data() {
  68 |       return {
  69 |         contentLoading: true,
  70 |         appInfo: {
  71 |           currentVersion: {
  72 |             versionName: "",
  73 |             versionCode: "",
  74 |             size: 0,
  75 |           },
  76 |         },
  77 |         qrCodeOptions: {
  78 |           width: 100,
  79 |           margin: 0,
  80 |           color: {
  81 |             dark: "#404242",
  82 |             light: "#0000",
  83 |           },
  84 |         },
  85 |         platform: null,
  86 |         isWeChat: null,
  87 |         isQQ: null,
  88 |         tipShow: false,
  89 |         installText: "下载安装",
  90 |       };
  91 |     },
  92 |     computed: {
  93 |       url() {
  94 |         let shortCode = this.appInfo.shortCode;
  95 |         return shortCode ? (document.location.protocol + "//" + window.location.host + "/" + shortCode) : "";
  96 |       },
  97 |     },
  98 |     mounted() {
  99 |       this.getAppInfo(this.$route.params.shortCode);
 100 |       if (/(iphone|ipad|ipod|ios)/i.test(ua)) {
 101 |         this.platform = "ios";
 102 |       } else if (/(android)/i.test(ua)) {
 103 |         this.platform = "android";
 104 |       } else {
 105 |         this.platform = "pc";
 106 |       }
 107 |       if (ua.indexOf("micromessenger") !== -1) {
 108 |         this.isWeChat = true;
 109 |       } else if (ua.match(/qq\/[0-9]/i)) {
 110 |         this.isQQ = true;
 111 |       }
 112 |     },
 113 |     methods: {
 114 |       getAppInfo(shortCode) {
 115 |         this.contentLoading = true;
 116 |         this.$http.get(`apps/shortCode/${shortCode}`).then(res => {
 117 |           this.contentLoading = false;
 118 |           this.appInfo = res.data;
 119 |           document.title = this.appInfo.name;
 120 |         }).catch(() => {
 121 |           this.contentLoading = false;
 122 |         });
 123 |       },
 124 |       install() {
 125 |         if (this.platform === "ios") {
 126 |           let iosUrl = this.appInfo.iosUrl;
 127 |           if (iosUrl) {
 128 |             window.location.href = iosUrl;
 129 |           } else {
 130 |             this.installText = "该app不支持ios";
 131 |           }
 132 |         } else if (this.platform === "android") {
 133 |           if (this.isWeChat || this.isQQ) {
 134 |             this.installText = (this.isWeChat ? "微信" : "QQ") + "中无法下载，请点击右上角选择\"在浏览器打开\"";
 135 |             this.tipShow = true;
 136 |           } else {
 137 |             this.download();
 138 |           }
 139 |         } else {
 140 |           this.download();
 141 |         }
 142 |       },
 143 |       download() {
 144 |         let url = window.config.serverUrl + "appVersions/downloadApk/" + this.appInfo.currentVersion.id;
 145 |         let a = document.createElement("a");
 146 |         a.setAttribute("href", url);
 147 |         document.body.appendChild(a);
 148 |         a.click();
 149 |         document.body.removeChild(a);
 150 |       },
 151 |     },
 152 |   };
 153 | </script>
 154 | <style lang="scss" scoped>
 155 |   .we-chat-tip {
 156 |     position: fixed;
 157 |     top: 10px;
 158 |     right: 10px;
 159 |     background-color: #3ab2a8;
 160 |     border-radius: 8px;
 161 |     text-align: center;
 162 |     color: white;
 163 |     z-index: 1000;
 164 |     padding: 8px 10px;
 165 |     font-size: 17px;
 166 |     line-height: 20px;
 167 |   }
 168 | 
 169 |   .we-chat-tip-arrow {
 170 |     width: 0;
 171 |     height: 0;
 172 |     border: 10px solid transparent;
 173 |     border-bottom-color: #3ab2a8;
 174 |     position: absolute;
 175 |     top: -35%;
 176 |     right: 3%;
 177 |   }
 178 | 
 179 |   .install-btn {
 180 |     font-size: 17px;
 181 |     line-height: 20px;
 182 |   }
 183 | 
 184 |   a, button {
 185 |     cursor: pointer
 186 |   }
 187 | 
 188 |   *, .wechat-tips {
 189 |     box-sizing: border-box
 190 |   }
 191 | 
 192 |   @font-face {
 193 |     font-family: d_icomoon;
 194 |     src: url(https://ali-static.jappstore.com/fonts/d_icomoon.eot?33id3j);
 195 |     src: url(https://ali-static.jappstore.com/fonts/d_icomoon.eot?33id3j#iefix) format("embedded-opentype"), url(https://ali-static.jappstore.com/fonts/d_icomoon.ttf?33id3j) format("truetype"), url(https://ali-static.jappstore.com/fonts/d_icomoon.woff?33id3j) format("woff"), url(https://ali-static.jappstore.com/fonts/d_icomoon.svg?33id3j#d_icomoon) format("svg");
 196 |     font-weight: 400;
 197 |     font-style: normal
 198 |   }
 199 | 
 200 |   [class*=" icon-"], [class^=icon-] {
 201 |     font-family: d_icomoon, serif !important;
 202 |     speak: none;
 203 |     font-style: normal;
 204 |     font-weight: 400;
 205 |     font-variant: normal;
 206 |     text-transform: none;
 207 |     line-height: 1;
 208 |     -webkit-font-smoothing: antialiased;
 209 |     -moz-osx-font-smoothing: grayscale
 210 |   }
 211 | 
 212 |   .desc-section pre, .releases-section .release-view .version-info .changelog .wrapper, body, html {
 213 |     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
 214 |   }
 215 | 
 216 |   .icon-loading:before {
 217 |     content: "\e64d"
 218 |   }
 219 | 
 220 |   .icon-android_store:before {
 221 |     content: "\e600"
 222 |   }
 223 | 
 224 |   .icon-android:before {
 225 |     content: "\e601"
 226 |   }
 227 | 
 228 |   .icon-icon_path:before {
 229 |     content: "\e602"
 230 |   }
 231 | 
 232 |   .icon-ios_store:before {
 233 |     content: "\e603"
 234 |   }
 235 | 
 236 |   .icon-ios:before {
 237 |     content: "\e604"
 238 |   }
 239 | 
 240 |   .icon-qrcode:before {
 241 |     content: "\e605"
 242 |   }
 243 | 
 244 |   .icon-brace-left:before {
 245 |     content: "\e613"
 246 |   }
 247 | 
 248 |   .icon-brace-right:before {
 249 |     content: "\e617"
 250 |   }
 251 | 
 252 |   .icon-comma-eye:before {
 253 |     content: "\e618"
 254 |   }
 255 | 
 256 |   .icon-mouth:before {
 257 |     content: "\e619"
 258 |   }
 259 | 
 260 |   .icon-upload:before {
 261 |     content: "\e631"
 262 |   }
 263 | 
 264 |   .icon-close:before {
 265 |     content: "\e63b"
 266 |   }
 267 | 
 268 |   .icon-Downloading:before {
 269 |     content: "\e900"
 270 |   }
 271 | 
 272 |   .icon-refresh:before {
 273 |     content: "\e901"
 274 |   }
 275 | 
 276 |   .icon-download:before {
 277 |     content: "\e902"
 278 |   }
 279 | 
 280 |   .icon-text:before {
 281 |     content: "\e922"
 282 |   }
 283 | 
 284 |   .icon-plus:before {
 285 |     content: "\e92b"
 286 |   }
 287 | 
 288 |   .icon-pdf:before {
 289 |     content: "\eadf"
 290 |   }
 291 | 
 292 |   .no-scroll {
 293 |     overflow: hidden
 294 |   }
 295 | 
 296 |   .text-center {
 297 |     text-align: center
 298 |   }
 299 | 
 300 |   .text-right {
 301 |     text-align: right
 302 |   }
 303 | 
 304 |   .text-black {
 305 |     color: #505556
 306 |   }
 307 | 
 308 |   .wechat-font, .wechat-font-flex {
 309 |     color: #3ab2a7;
 310 |     font-size: 18px;
 311 |     font-weight: 700
 312 |   }
 313 | 
 314 |   .strong {
 315 |     font-weight: 700
 316 |   }
 317 | 
 318 |   .wechat-font-flex {
 319 |     display: -ms-flexbox;
 320 |     display: flex;
 321 |     -ms-flex-pack: center;
 322 |     justify-content: center;
 323 |     -ms-flex-align: center;
 324 |     align-items: center
 325 |   }
 326 | 
 327 |   .main {
 328 |     display: block;
 329 |     height: 100%;
 330 |     padding-top: 60px;
 331 |     margin: 0 auto;
 332 |     max-width: 94%;
 333 |     width: 700px;
 334 |     color: #A9B1B3;
 335 |     font-size: 14px;
 336 |   }
 337 | 
 338 |   .loading-container h1, .passwd form h4 {
 339 |     font-weight: 400
 340 |   }
 341 | 
 342 |   .wechat-font-flex span {
 343 |     font-size: 30px;
 344 |     color: #000;
 345 |     margin-left: 1%
 346 |   }
 347 | 
 348 |   p {
 349 |     margin-top: 0
 350 |   }
 351 | 
 352 |   a {
 353 |     text-decoration: none
 354 |   }
 355 | 
 356 |   button {
 357 |     padding: 0;
 358 |     border: 1px solid #A9B1B3;
 359 |     background-color: transparent
 360 |   }
 361 | 
 362 |   button:focus {
 363 |     outline: 0
 364 |   }
 365 | 
 366 |   .pattern {
 367 |     position: absolute;
 368 |     top: 0;
 369 |     z-index: 1;
 370 |     max-width: 312px;
 371 |     width: 21.66%;
 372 |     transition: all .5s
 373 |   }
 374 | 
 375 |   .pattern.left {
 376 |     left: 0
 377 |   }
 378 | 
 379 |   .pattern.right {
 380 |     right: 0
 381 |   }
 382 | 
 383 |   .pattern img {
 384 |     width: 100%;
 385 |     transition: all 1s;
 386 |     pointer-events: none
 387 |   }
 388 | 
 389 |   @media (max-width: 1280px) {
 390 |     .pattern {
 391 |       width: 18%
 392 |     }
 393 |   }
 394 | 
 395 |   .combo .pattern {
 396 |     max-width: 220px
 397 |   }
 398 | 
 399 |   @media (min-width: 1280px) {
 400 |     .combo .pattern {
 401 |       max-width: 255px;
 402 |       width: 21%
 403 |     }
 404 |   }
 405 | 
 406 |   .out-container {
 407 |     position: relative;
 408 |     z-index: 2;
 409 |     transition: all .5s
 410 |   }
 411 | 
 412 |   .main .table-container {
 413 |     display: table;
 414 |     width: 100%;
 415 |     height: 100%
 416 |   }
 417 | 
 418 |   .main .cell-container {
 419 |     display: table-cell;
 420 |     height: 100%;
 421 |     vertical-align: middle;
 422 |     text-align: center
 423 |   }
 424 | 
 425 |   .box-game_add {
 426 |     position: fixed;
 427 |     width: 240px;
 428 |     height: 40px;
 429 |     line-height: 40px;
 430 |     top: 1%;
 431 |     right: 2.5%;
 432 |     background: rgba(0, 0, 0, .8);
 433 |     font-size: 14px;
 434 |     color: #fff;
 435 |     z-index: 999;
 436 |     padding-left: 15px;
 437 |     border-radius: 3px
 438 |   }
 439 | 
 440 |   .box-game_add .box-right {
 441 |     position: absolute;
 442 |     right: 15px;
 443 |     top: 5px;
 444 |     width: 60px;
 445 |     height: 30px;
 446 |     color: #000;
 447 |     display: inline-block;
 448 |     text-align: center;
 449 |     line-height: 30px;
 450 |     background-color: #F8CD0B;
 451 |     border-radius: 100px
 452 |   }
 453 | 
 454 |   .notice-wechat {
 455 |     position: absolute;
 456 |     top: 0;
 457 |     left: 0;
 458 |     z-index: 1;
 459 |     width: 100%;
 460 |     height: 0;
 461 |     background-color: #505556;
 462 |     box-shadow: 0 -9px 29px -7px rgba(0, 0, 0, .1) inset;
 463 |     transition: all .5s
 464 |   }
 465 | 
 466 |   .constraint .main header, .expired .main header, .forbidden .main header, .legal_forbidden .main header, .legal_forbidden_bt .main header, .legal_forbidden_download .main header, .legal_forbidden_new .main header, .not_app .main header, .not_find .main header, .not_found .main header {
 467 |     opacity: 1;
 468 |     transition: all .5s;
 469 |     transform: none
 470 |   }
 471 | 
 472 |   .constraint .main header h1, .expired .main header h1, .forbidden .main header h1, .legal_forbidden .main header h1, .legal_forbidden_bt .main header h1, .legal_forbidden_download .main header h1, .legal_forbidden_new .main header h1, .not_app .main header h1, .not_find .main header h1, .not_found .main header h1 {
 473 |     color: #505556;
 474 |     font-weight: 400;
 475 |     font-size: 28px
 476 |   }
 477 | 
 478 |   .constraint .main header h3, .expired .main header h3, .forbidden .main header h3, .legal_forbidden .main header h3, .legal_forbidden_bt .main header h3, .legal_forbidden_download .main header h3, .legal_forbidden_new .main header h3, .not_app .main header h3, .not_find .main header h3, .not_found .main header h3 {
 479 |     font-size: 18px;
 480 |     cursor: default
 481 |   }
 482 | 
 483 |   .constraint .main header h3 label, .expired .main header h3 label, .forbidden .main header h3 label, .legal_forbidden .main header h3 label, .legal_forbidden_bt .main header h3 label, .legal_forbidden_download .main header h3 label, .legal_forbidden_new .main header h3 label, .not_app .main header h3 label, .not_find .main header h3 label, .not_found .main header h3 label {
 484 |     cursor: default
 485 |   }
 486 | 
 487 |   .constraint .main header p, .expired .main header p, .forbidden .main header p, .legal_forbidden .main header p, .legal_forbidden_bt .main header p, .legal_forbidden_download .main header p, .legal_forbidden_new .main header p, .not_app .main header p, .not_find .main header p, .not_found .main header p {
 488 |     font-size: 16px;
 489 |     line-height: 24px
 490 |   }
 491 | 
 492 |   .constraint .main .fade-out, .expired .main .fade-out, .forbidden .main .fade-out, .legal_forbidden .main .fade-out, .legal_forbidden_bt .main .fade-out, .legal_forbidden_download .main .fade-out, .legal_forbidden_new .main .fade-out, .not_app .main .fade-out, .not_find .main .fade-out, .not_found .main .fade-out {
 493 |     opacity: 0;
 494 |     transform: translateY(-40px)
 495 |   }
 496 | 
 497 |   .constraint .pattern img, .expired .pattern img, .forbidden .pattern img, .legal_forbidden .pattern img, .legal_forbidden_bt .pattern img, .legal_forbidden_download .pattern img, .legal_forbidden_new .pattern img, .not_app .pattern img, .not_find .pattern img, .not_found .pattern img {
 498 |     -webkit-filter: grayscale(1)
 499 |   }
 500 | 
 501 |   @media screen and (max-width: 480px) {
 502 |     .constraint .cell-container, .forbidden .cell-container, .legal_forbidden .cell-container, .legal_forbidden_bt .cell-container, .legal_forbidden_download .cell-container, .legal_forbidden_new .cell-container, .not_app .cell-container, .not_find .cell-container, .not_found .cell-container {
 503 |       vertical-align: top
 504 |     }
 505 |   }
 506 | 
 507 |   .error-container {
 508 |     margin: 0 auto;
 509 |     width: 100%;
 510 |     min-width: 320px;
 511 |     max-width: 480px;
 512 |     text-align: left
 513 |   }
 514 | 
 515 |   .error-container pre {
 516 |     line-height: 28px
 517 |   }
 518 | 
 519 |   .error-container h1 {
 520 |     font-size: 16px;
 521 |     margin-bottom: 10px
 522 |   }
 523 | 
 524 |   .error-container .not_app_image {
 525 |     width: 96px;
 526 |     height: 111px
 527 |   }
 528 | 
 529 |   .error-container .sub-header {
 530 |     font-size: 14px
 531 |   }
 532 | 
 533 |   .error-container .sub-header > a {
 534 |     text-decoration: underline;
 535 |     color: #337ab7
 536 |   }
 537 | 
 538 |   @media screen and (max-width: 425px) {
 539 |     .error-container pre, .error-container small {
 540 |       display: none
 541 |     }
 542 |     .error-container {
 543 |       width: 100%;
 544 |       margin-top: 100px;
 545 |       margin-bottom: 50px;
 546 |       text-align: center
 547 |     }
 548 |     .error-container h1 {
 549 |       padding: 0 70px
 550 |     }
 551 |   }
 552 | 
 553 |   .back-btn {
 554 |     position: fixed;
 555 |     top: 28px;
 556 |     left: 28px;
 557 |     z-index: 3;
 558 |     width: 60px;
 559 |     height: 60px;
 560 |     border: 1px solid #BDC6C7;
 561 |     border-radius: 60px;
 562 |     background-color: #fff
 563 |   }
 564 | 
 565 |   .back-btn i {
 566 |     display: block;
 567 |     margin-top: 29px;
 568 |     margin-left: 21px
 569 |   }
 570 | 
 571 |   .back-btn i:after, .back-btn i:before {
 572 |     position: absolute;
 573 |     display: inline-block;
 574 |     width: 16px;
 575 |     height: 1px;
 576 |     background-color: #505556;
 577 |     content: ' ';
 578 |     transform-origin: left
 579 |   }
 580 | 
 581 |   .back-btn i:before {
 582 |     transform: rotateZ(-42deg)
 583 |   }
 584 | 
 585 |   .back-btn i:after {
 586 |     transform: rotateZ(42deg)
 587 |   }
 588 | 
 589 |   .loading-container {
 590 |     position: absolute;
 591 |     top: 50%;
 592 |     left: 0;
 593 |     margin-top: -17px;
 594 |     width: 100%;
 595 |     text-align: center
 596 |   }
 597 | 
 598 |   .combo .main {
 599 |     min-width: 960px;
 600 |     max-width: 100%
 601 |   }
 602 | 
 603 |   .data_error .icon, .error .icon, .forbidden .icon, .passwd .icon {
 604 |     margin-bottom: 40px;
 605 |     width: 120px;
 606 |     height: 120px;
 607 |     border-radius: 22.7px
 608 |   }
 609 | 
 610 |   @media screen and (min-height: 520px) {
 611 |     .data_error form, .error form, .forbidden form, .passwd form {
 612 |       margin-bottom: 100px
 613 |     }
 614 |   }
 615 | 
 616 |   .data_error .main, .error .main, .forbidden .main, .passwd .main {
 617 |     height: 100%
 618 |   }
 619 | 
 620 |   .data_error .main table, .error .main table, .forbidden .main table, .passwd .main table {
 621 |     width: 100%;
 622 |     height: 100%;
 623 |     vertical-align: middle
 624 |   }
 625 | 
 626 |   .data_error .app-brief h1, .error .app-brief h1, .forbidden .app-brief h1, .passwd .app-brief h1 {
 627 |     text-transform: uppercase
 628 |   }
 629 | 
 630 |   .data_error .reload, .error .reload, .forbidden .reload, .passwd .reload {
 631 |     color: #A9B1B3;
 632 |     font-size: 12px;
 633 |     text-decoration: none;
 634 |     border: 1px solid #A9B1B3;
 635 |     background-color: transparent;
 636 |     padding: 6px 12px;
 637 |     border-radius: 40px
 638 |   }
 639 | 
 640 |   .data_error .no-release-tips, .error .no-release-tips, .forbidden .no-release-tips, .passwd .no-release-tips {
 641 |     line-height: 20px;
 642 |     max-width: 80%;
 643 |     margin: 0 auto
 644 |   }
 645 | 
 646 |   .data_error .no-release-tips a, .error .no-release-tips a, .forbidden .no-release-tips a, .passwd .no-release-tips a {
 647 |     text-decoration: underline;
 648 |     color: #9b9b9b
 649 |   }
 650 | 
 651 |   #passwd-wrong {
 652 |     display: none
 653 |   }
 654 | 
 655 |   .passwd form {
 656 |     text-align: center
 657 |   }
 658 | 
 659 |   .passwd form h4 {
 660 |     font-size: 18px
 661 |   }
 662 | 
 663 |   .passwd form button, .passwd form input {
 664 |     padding: 12px 20px;
 665 |     width: 300px;
 666 |     border: 1px solid #F8BA0B;
 667 |     border-radius: 5px;
 668 |     font-size: 16px
 669 |   }
 670 | 
 671 |   .passwd form button:focus, .passwd form input:focus {
 672 |     outline: 0
 673 |   }
 674 | 
 675 |   .passwd form input {
 676 |     color: #F8BA0B;
 677 |     text-align: center
 678 |   }
 679 | 
 680 |   .passwd form button {
 681 |     border-color: #F8BA0B;
 682 |     background-color: #F8BA0B;
 683 |     color: #fff;
 684 |     cursor: pointer
 685 |   }
 686 | 
 687 |   .main .icon-container {
 688 |     position: relative;
 689 |     margin: 0 auto;
 690 |     width: 290px;
 691 |     height: 290px
 692 |   }
 693 | 
 694 |   .main .icon-container .bg-path {
 695 |     position: absolute;
 696 |     top: 4px;
 697 |     left: 4px;
 698 |     z-index: 1;
 699 |     color: #EFF2F2;
 700 |     font-size: 290px
 701 |   }
 702 | 
 703 |   .main .icon-container span {
 704 |     position: absolute;
 705 |     z-index: 2;
 706 |     display: block
 707 |   }
 708 | 
 709 |   .main .icon-container .icon {
 710 |     top: 0;
 711 |     left: 0;
 712 |     padding: 10px;
 713 |     width: 140px;
 714 |     height: 140px;
 715 |     border-radius: 17.54%;
 716 |     background-color: #fff
 717 |   }
 718 | 
 719 |   .main .icon-container .icon img {
 720 |     max-width: 100%;
 721 |     width: 120px;
 722 |     height: 120px;
 723 |     border-radius: 17.54%
 724 |   }
 725 | 
 726 |   .main .icon-container .icon .middle-tip {
 727 |     width: 100px;
 728 |     height: 100px
 729 |   }
 730 | 
 731 |   .main .icon-container .qrcode {
 732 |     right: 0;
 733 |     bottom: 0;
 734 |     width: 140px;
 735 |     height: 140px;
 736 |     border: 20px solid transparent;
 737 |     border-radius: 26px
 738 |   }
 739 | 
 740 |   .main .icon-container .qrcode img {
 741 |     width: 100px;
 742 |     height: 100px
 743 |   }
 744 | 
 745 |   .main .middle-page {
 746 |     width: 100%;
 747 |     padding-top: 120px;
 748 |     text-align: center
 749 |   }
 750 | 
 751 |   .main .middle-page .middle-tip {
 752 |     width: 100px;
 753 |     height: 100px;
 754 |     margin-bottom: 40px
 755 |   }
 756 | 
 757 |   .main .middle-page .middle-desc {
 758 |     font-size: 18px;
 759 |     color: #333
 760 |   }
 761 | 
 762 |   .main .middle-page .middle-action {
 763 |     width: 240px;
 764 |     height: 200px;
 765 |     margin: 0 auto;
 766 |     padding-top: 20px
 767 |   }
 768 | 
 769 |   .main .middle-page .middle-action .middle-btn {
 770 |     width: 240px;
 771 |     height: 40px;
 772 |     line-height: 40px;
 773 |     font-size: 18px;
 774 |     font-weight: 500;
 775 |     color: #fff;
 776 |     border-radius: 4px;
 777 |     background-color: #F8BA0B
 778 |   }
 779 | 
 780 |   .main > header {
 781 |     display: block;
 782 |     min-height: 700px;
 783 |     max-height: 900px;
 784 |     height: 100%
 785 |   }
 786 | 
 787 |   .main > header.ad-app {
 788 |     height: auto
 789 |   }
 790 | 
 791 |   .main > header .wrapper {
 792 |     margin-right: auto;
 793 |     margin-left: auto;
 794 |     width: 290px
 795 |   }
 796 | 
 797 |   .main > header .app-brief {
 798 |     transition: all .5s
 799 |   }
 800 | 
 801 |   .main > header .name, .main > header body.passwd .name {
 802 |     position: relative;
 803 |     margin: 20px auto;
 804 |     width: 290px;
 805 |     color: #505556;
 806 |     text-align: left;
 807 |     font-weight: 400;
 808 |     font-size: 28px
 809 |   }
 810 | 
 811 |   .main > header .name i, .main > header body.passwd .name i {
 812 |     position: absolute;
 813 |     right: 100%;
 814 |     top: 10px;
 815 |     margin-right: 10px;
 816 |     font-size: 26px
 817 |   }
 818 | 
 819 |   .main > header .name span, .main > header body.passwd .name span {
 820 |     display: inline-block;
 821 |     max-width: 100%;
 822 |     overflow: hidden;
 823 |     text-overflow: ellipsis;
 824 |     white-space: nowrap;
 825 |     word-wrap: normal;
 826 |     line-height: 1.6
 827 |   }
 828 | 
 829 |   .main > header .release-type {
 830 |     margin: 24px auto 0;
 831 |     width: 290px;
 832 |     text-align: left
 833 |   }
 834 | 
 835 |   .main > header .scan-tips {
 836 |     margin: 0 auto;
 837 |     width: 290px;
 838 |     text-align: left;
 839 |     white-space: nowrap;
 840 |     line-height: 22px
 841 |   }
 842 | 
 843 |   .main > header .release-info {
 844 |     position: relative;
 845 |     margin-top: 30px;
 846 |     margin-bottom: 30px;
 847 |     padding-top: 30px
 848 |   }
 849 | 
 850 |   .main > header .release-info p {
 851 |     margin-bottom: 4px
 852 |   }
 853 | 
 854 |   .main > header .release-info:before {
 855 |     position: absolute;
 856 |     top: 0;
 857 |     left: 50%;
 858 |     display: block;
 859 |     margin-left: -30%;
 860 |     width: 60%;
 861 |     border-top: 1px solid #DAE2E3;
 862 |     content: ' '
 863 |   }
 864 | 
 865 |   .main > header .ios_inhouse_tip {
 866 |     background: url(https://ali-static.jappstore.com/images/tip_icon.png) left no-repeat;
 867 |     background-size: 12px;
 868 |     padding-left: 16px;
 869 |     color: #28B3A7
 870 |   }
 871 | 
 872 |   .main > header .actions {
 873 |     margin: 30px auto 0;
 874 |     max-width: 290px
 875 |   }
 876 | 
 877 |   .main > header .actions p {
 878 |     line-height: 1.5;
 879 |     padding: 12px;
 880 |     color: #3AB2A7;
 881 |     font-weight: 500;
 882 |     font-size: 16px
 883 |   }
 884 | 
 885 |   .main > header .actions button {
 886 |     position: relative;
 887 |     display: inline-block;
 888 |     padding: 12px 46px;
 889 |     min-width: 200px;
 890 |     border: 1px solid #32B2A7;
 891 |     border-radius: 40px;
 892 |     font-size: 14px;
 893 |     background: #32B2A7;
 894 |     color: #fff
 895 |   }
 896 | 
 897 |   .main > header .actions a {
 898 |     color: #868C8E;
 899 |     font-size: 14px;
 900 |     display: block
 901 |   }
 902 | 
 903 |   .main > header .action-animate, .main > header .action-animate .action-animate-trust {
 904 |     color: #fff;
 905 |     background-color: #32B2A7
 906 |   }
 907 | 
 908 |   .main > header .action-animate {
 909 |     width: 200px;
 910 |     height: 40px;
 911 |     margin: 30px auto 0;
 912 |     line-height: 40px;
 913 |     text-align: center;
 914 |     border-radius: 20px;
 915 |     overflow: hidden;
 916 |     position: relative
 917 |   }
 918 | 
 919 |   .main > header .action-animate .action-animate-text, .main > header .action-animate .action-animate-trust {
 920 |     position: absolute;
 921 |     left: 0;
 922 |     width: 100%;
 923 |     height: 100%;
 924 |     z-index: 2;
 925 |     top: 0
 926 |   }
 927 | 
 928 |   @keyframes example {
 929 |     0% {
 930 |       width: 0
 931 |     }
 932 |     10% {
 933 |       width: 20px
 934 |     }
 935 |     20% {
 936 |       width: 40px
 937 |     }
 938 |     30% {
 939 |       width: 60px
 940 |     }
 941 |     40% {
 942 |       width: 80px
 943 |     }
 944 |     50% {
 945 |       width: 100px
 946 |     }
 947 |     60% {
 948 |       width: 120px
 949 |     }
 950 |     70% {
 951 |       width: 140px
 952 |     }
 953 |     80% {
 954 |       width: 160px
 955 |     }
 956 |     90% {
 957 |       width: 180px
 958 |     }
 959 |     100% {
 960 |       width: 200px
 961 |     }
 962 |   }
 963 | 
 964 |   .main > header .action-animate .action-animate-active {
 965 |     display: none;
 966 |     width: 200px;
 967 |     height: 40px;
 968 |     border-radius: 20px;
 969 |     background-color: #32B2A7;
 970 |     animation: example 10s linear
 971 |   }
 972 | 
 973 |   .main > header .type-ios {
 974 |     display: none
 975 |   }
 976 | 
 977 |   @media only screen and (max-width: 768px) {
 978 |     .main > header {
 979 |       max-height: 100%;
 980 |       height: 100%;
 981 |       min-height: 400px
 982 |     }
 983 |     .main > header.ad-app {
 984 |       min-height: 700px
 985 |     }
 986 |     .main > header .type-ios {
 987 |       display: block
 988 |     }
 989 |   }
 990 | 
 991 |   @media screen and (max-width: 768px) {
 992 |     .main > header {
 993 |       min-height: 400px
 994 |     }
 995 |     .main > header .release-type {
 996 |       display: none
 997 |     }
 998 |     .main > header .release-info {
 999 |       display: block
1000 |     }
1001 |     .main > header .name {
1002 |       text-align: center;
1003 |       font-size: 24px
1004 |     }
1005 |     .main > header .name .icon-warp {
1006 |       position: static;
1007 |       display: inline-block;
1008 |       margin-left: -48px;
1009 |       max-width: 76%
1010 |     }
1011 |     .main > header .name .tip {
1012 |       margin-top: 5px
1013 |     }
1014 |     .main > header .name i {
1015 |       position: static
1016 |     }
1017 |     .main > header .scan-tips {
1018 |       display: none
1019 |     }
1020 |   }
1021 | 
1022 |   .new_layout {
1023 |     display: none;
1024 |     margin-top: -10%;
1025 |     min-height: 100%;
1026 |     padding: 20px;
1027 |     background-color: #ededed
1028 |   }
1029 | 
1030 |   .new_layout .new_layout_head {
1031 |     margin-bottom: 20px;
1032 |     display: -ms-flexbox;
1033 |     display: flex;
1034 |     -ms-flex-pack: justify;
1035 |     justify-content: space-between;
1036 |     font-size: 16px;
1037 |     color: #333
1038 |   }
1039 | 
1040 |   .new_layout .new_layout_head .new_layout_head_exc {
1041 |     background: url(https://ali-static.jappstore.com/images/exchange.png) left no-repeat;
1042 |     background-size: 14px;
1043 |     padding-left: 20px
1044 |   }
1045 | 
1046 |   .new_layout .new_layout_content {
1047 |     display: -ms-flexbox;
1048 |     display: flex;
1049 |     -ms-flex-direction: column;
1050 |     flex-direction: column
1051 |   }
1052 | 
1053 |   .new_layout .new_layout_content .popularize-games {
1054 |     -ms-flex: 0 0 auto;
1055 |     flex: 0 0 auto;
1056 |     background-color: #ededed
1057 |   }
1058 | 
1059 |   .new_layout .new_layout_content .popularize-games .popularize-header {
1060 |     line-height: 50px;
1061 |     padding: 0;
1062 |     -ms-flex-align: center;
1063 |     align-items: center;
1064 |     -ms-flex-pack: center;
1065 |     justify-content: center
1066 |   }
1067 | 
1068 |   @media only screen and (max-width: 991px) and (min-width: 768px) {
1069 |     .new_layout .new_layout_content .popularize-games .popularize-list > li:nth-child(n+5) {
1070 |       display: none
1071 |     }
1072 |     .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game {
1073 |       margin-bottom: 30px !important
1074 |     }
1075 |   }
1076 | 
1077 |   @media only screen and (max-width: 1024px) and (min-width: 991px) {
1078 |     .new_layout .new_layout_content .popularize-games .popularize-list > li:nth-child(n+6) {
1079 |       display: none
1080 |     }
1081 |     .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game {
1082 |       margin-bottom: 30px !important
1083 |     }
1084 |   }
1085 | 
1086 |   .new_layout .new_layout_content .popularize-games .popularize-list {
1087 |     display: -ms-flexbox;
1088 |     display: flex;
1089 |     -ms-flex-wrap: wrap;
1090 |     flex-wrap: wrap;
1091 |     -ms-flex-pack: distribute;
1092 |     justify-content: space-around
1093 |   }
1094 | 
1095 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game {
1096 |     max-width: 180px;
1097 |     width: 45%;
1098 |     box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .1);
1099 |     margin-bottom: 10px;
1100 |     border-radius: 20px;
1101 |     background: #35A89B
1102 |   }
1103 | 
1104 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game .app-download {
1105 |     font-size: 16px;
1106 |     height: 30px;
1107 |     display: -ms-flexbox;
1108 |     display: flex;
1109 |     -ms-flex-align: center;
1110 |     align-items: center;
1111 |     -ms-flex-pack: center;
1112 |     justify-content: center;
1113 |     color: #fff
1114 |   }
1115 | 
1116 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game .popularize-app-game-content {
1117 |     height: 145px;
1118 |     background: #fff;
1119 |     display: -ms-flexbox;
1120 |     display: flex;
1121 |     -ms-flex-direction: column;
1122 |     flex-direction: column;
1123 |     -ms-flex-align: center;
1124 |     align-items: center;
1125 |     border-radius: 20px
1126 |   }
1127 | 
1128 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game .popularize-app-game-content .app-zhibo-icon-img {
1129 |     margin-top: 10px
1130 |   }
1131 | 
1132 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game .popularize-app-game-content .app-zhibo-icon-img > img {
1133 |     border-radius: 5px;
1134 |     height: 50px;
1135 |     width: 50px
1136 |   }
1137 | 
1138 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game .primary-text {
1139 |     max-width: 80%;
1140 |     color: #4A4A4A;
1141 |     text-align: center;
1142 |     font-size: 16px;
1143 |     font-weight: 700
1144 |   }
1145 | 
1146 |   .new_layout .new_layout_content .popularize-games .popularize-list .popularize-app-game .secondary-text {
1147 |     max-width: 80%;
1148 |     height: 32px;
1149 |     overflow: hidden;
1150 |     text-align: center;
1151 |     font-size: 12px;
1152 |     color: rgba(93, 103, 109, .9);
1153 |     padding-bottom: 5px
1154 |   }
1155 | 
1156 |   .master-section {
1157 |     overflow: hidden;
1158 |     padding: 40px 0
1159 |   }
1160 | 
1161 |   @media screen and (max-width: 768px) {
1162 |     .master-section {
1163 |       text-align: center
1164 |     }
1165 |     .master-section .store-link {
1166 |       display: inline-block;
1167 |       float: none;
1168 |       margin-bottom: 0
1169 |     }
1170 |     .master-section p {
1171 |       display: none
1172 |     }
1173 |   }
1174 | 
1175 |   .master-section p {
1176 |     margin: 0;
1177 |     line-height: 21px
1178 |   }
1179 | 
1180 |   .master-section pre {
1181 |     text-align: left;
1182 |     white-space: pre-line;
1183 |     word-wrap: break-word;
1184 |     word-break: break-all;
1185 |     line-height: 22px
1186 |   }
1187 | 
1188 |   .error_money h2, .footer, .per-type-info .info, .releases-section .release-view .qrcode, .section-store-link, .store-section {
1189 |     text-align: center
1190 |   }
1191 | 
1192 |   .store-link-wrapper {
1193 |     display: inline-block;
1194 |     width: 200px;
1195 |     height: 60px
1196 |   }
1197 | 
1198 |   .store-link-wrapper a {
1199 |     display: block;
1200 |     border: 1px solid #505556;
1201 |     border-radius: 5px;
1202 |     text-decoration: none
1203 |   }
1204 | 
1205 |   .store-link-wrapper a i {
1206 |     display: block;
1207 |     padding: 14px 40px;
1208 |     color: #505556;
1209 |     font-size: 33px
1210 |   }
1211 | 
1212 |   .section {
1213 |     position: relative;
1214 |     z-index: 2;
1215 |     padding: 50px 0;
1216 |     border-top: 1px solid #DAE2E3
1217 |   }
1218 | 
1219 |   @media screen and (max-width: 768px) {
1220 |     .section {
1221 |       padding: 50px 20px
1222 |     }
1223 |   }
1224 | 
1225 |   .section h2 {
1226 |     margin: 0 0 40px;
1227 |     color: #505556;
1228 |     font-weight: 400
1229 |   }
1230 | 
1231 |   .error_money h2, .error_money h2 > p > span {
1232 |     font-weight: 400 !important
1233 |   }
1234 | 
1235 |   .store-section .store-link {
1236 |     display: block;
1237 |     margin: 0 auto;
1238 |     padding: 14px 40px 10px;
1239 |     width: 260px;
1240 |     border: 1px solid #505556;
1241 |     border-radius: 5px;
1242 |     background-color: transparent;
1243 |     color: #505556;
1244 |     font-size: 28px
1245 |   }
1246 | 
1247 |   @media screen and (max-width: 768px) {
1248 |     .certification > img {
1249 |       width: 108px;
1250 |       height: 93px
1251 |     }
1252 |     .certification h1 {
1253 |       font-size: 16px !important
1254 |     }
1255 |     .certification h2 {
1256 |       font-size: 14px !important
1257 |     }
1258 |   }
1259 | 
1260 |   .error_money h2 {
1261 |     color: #7E7E7E;
1262 |     margin-top: 50px;
1263 |     font-size: 14px !important
1264 |   }
1265 | 
1266 |   .error_money h2 > p {
1267 |     margin-bottom: 5px
1268 |   }
1269 | 
1270 |   @media screen and (max-width: 768px) {
1271 |     .error_money > img {
1272 |       width: 145px;
1273 |       height: 145px
1274 |     }
1275 |     .error_money h1 {
1276 |       font-size: 16px !important
1277 |     }
1278 |     .error_money h2 {
1279 |       font-size: 14px !important;
1280 |       margin-top: 0
1281 |     }
1282 |     .error_money h2 > p > span {
1283 |       display: block
1284 |     }
1285 |     .error_money h2 > p > span > i {
1286 |       display: none
1287 |     }
1288 |   }
1289 | 
1290 |   .releases-section .release-view {
1291 |     position: relative;
1292 |     z-index: 2;
1293 |     padding-bottom: 80px
1294 |   }
1295 | 
1296 |   .releases-section .release-view:before {
1297 |     position: absolute;
1298 |     top: 0;
1299 |     left: 40px;
1300 |     z-index: 1;
1301 |     height: 100%;
1302 |     border-left: 1px solid;
1303 |     content: ' '
1304 |   }
1305 | 
1306 |   .releases-section .release-view:last-child {
1307 |     padding-bottom: 0
1308 |   }
1309 | 
1310 |   .releases-section .release-view:last-child:before {
1311 |     content: none
1312 |   }
1313 | 
1314 |   .releases-section .release-view .qrcode {
1315 |     position: relative;
1316 |     z-index: 2;
1317 |     float: left;
1318 |     width: 80px;
1319 |     height: 80px;
1320 |     border: 1px solid #A9B1B3;
1321 |     border-radius: 50%;
1322 |     background-color: #fff;
1323 |     cursor: pointer
1324 |   }
1325 | 
1326 |   .releases-section .release-view .qrcode i {
1327 |     display: inline-block;
1328 |     color: #505556;
1329 |     font-size: 30px;
1330 |     line-height: 78px
1331 |   }
1332 | 
1333 |   .releases-section .release-view .qrcode .popup {
1334 |     position: absolute;
1335 |     top: 50%;
1336 |     left: 70px;
1337 |     margin-top: -65px;
1338 |     padding-left: 40px;
1339 |     width: 170px;
1340 |     opacity: 0;
1341 |     transition: all .25s;
1342 |     transform: translateX(20px);
1343 |     pointer-events: none
1344 |   }
1345 | 
1346 |   .releases-section .release-view .qrcode .popup .inner {
1347 |     padding: 20px;
1348 |     border: 1px solid #505556;
1349 |     border-radius: 8px;
1350 |     background-color: #fff
1351 |   }
1352 | 
1353 |   .releases-section .release-view .qrcode .popup .inner img {
1354 |     width: 90px;
1355 |     height: 90px
1356 |   }
1357 | 
1358 |   .releases-section .release-view .qrcode .popup .inner:before {
1359 |     position: absolute;
1360 |     top: 50%;
1361 |     left: 30px;
1362 |     display: inline-block;
1363 |     margin-top: -10px;
1364 |     width: 20px;
1365 |     height: 20px;
1366 |     border: 1px solid #505556;
1367 |     border-top: none;
1368 |     border-right: none;
1369 |     border-bottom-left-radius: 4px;
1370 |     background: #fff;
1371 |     content: ' ';
1372 |     transform: rotateZ(45deg)
1373 |   }
1374 | 
1375 |   .releases-section .release-view .qrcode:hover {
1376 |     border-color: #505556
1377 |   }
1378 | 
1379 |   .releases-section .release-view .qrcode:hover i {
1380 |     color: #505556
1381 |   }
1382 | 
1383 |   .releases-section .release-view .qrcode:hover .popup {
1384 |     opacity: 1;
1385 |     transform: none
1386 |   }
1387 | 
1388 |   .releases-section .release-view .download-btn {
1389 |     position: relative;
1390 |     z-index: 2;
1391 |     display: none;
1392 |     float: left;
1393 |     width: 80px;
1394 |     height: 80px;
1395 |     border: 1px solid #A9B1B3;
1396 |     border-radius: 50%;
1397 |     background-color: #fff;
1398 |     text-align: center;
1399 |     cursor: pointer
1400 |   }
1401 | 
1402 |   .releases-section .release-view .download-btn i {
1403 |     position: relative;
1404 |     display: inline-block;
1405 |     margin-top: 27px;
1406 |     margin-left: 1px;
1407 |     width: 2px;
1408 |     height: 26px;
1409 |     background-color: #505556
1410 |   }
1411 | 
1412 |   .releases-section .release-view .download-btn i:after, .releases-section .release-view .download-btn i:before {
1413 |     position: absolute;
1414 |     bottom: -2px;
1415 |     display: inline-block;
1416 |     width: 2px;
1417 |     height: 16px;
1418 |     background-color: #505556;
1419 |     content: ' '
1420 |   }
1421 | 
1422 |   .releases-section .release-view .download-btn i:before {
1423 |     left: -5px;
1424 |     transform: rotateZ(-42deg)
1425 |   }
1426 | 
1427 |   .releases-section .release-view .download-btn i:after {
1428 |     right: -5px;
1429 |     transform: rotateZ(42deg)
1430 |   }
1431 | 
1432 |   .releases-section .release-view .version-info {
1433 |     padding-left: 120px
1434 |   }
1435 | 
1436 |   .releases-section .release-view .version-info .version {
1437 |     margin-bottom: 10px;
1438 |     color: #535353;
1439 |     font-size: 18px;
1440 |     display: inline-block;
1441 |     max-width: 100%;
1442 |     overflow: hidden;
1443 |     text-overflow: ellipsis;
1444 |     white-space: nowrap;
1445 |     word-wrap: normal
1446 |   }
1447 | 
1448 |   .releases-section .release-view .version-info .extra-info {
1449 |     position: relative;
1450 |     margin-top: 12px;
1451 |     color: #BDC6C7;
1452 |     font-size: 13px
1453 |   }
1454 | 
1455 |   .releases-section .release-view .version-info .extra-info p {
1456 |     margin: 0;
1457 |     line-height: 20px
1458 |   }
1459 | 
1460 |   .releases-section .release-view .version-info .extra-info .changelog-toggle {
1461 |     margin-top: 20px;
1462 |     font-size: 18px;
1463 |     color: #535353;
1464 |     cursor: default;
1465 |     display: inline-block
1466 |   }
1467 | 
1468 |   @media screen and (max-width: 699px) {
1469 |     .releases-section .release-view .version-info .extra-info .changelog-toggle {
1470 |       position: static;
1471 |       display: inline-block;
1472 |       margin-top: 12px
1473 |     }
1474 |     .releases-section .release-view .version-info .changelog:after {
1475 |       left: 33px
1476 |     }
1477 |   }
1478 | 
1479 |   .releases-section .release-view .version-info .changelog {
1480 |     position: relative;
1481 |     padding: 18px 0;
1482 |     border-radius: 5px;
1483 |     color: #BDC6C7;
1484 |     font-size: 13px;
1485 |     line-height: 18px
1486 |   }
1487 | 
1488 |   .releases-section .release-view .version-info .changelog .wrapper {
1489 |     position: relative;
1490 |     z-index: 2;
1491 |     margin: 0;
1492 |     white-space: pre-line;
1493 |     word-wrap: break-word;
1494 |     word-break: break-all
1495 |   }
1496 | 
1497 |   .releases-section .release-view .version-info .changelog b {
1498 |     color: #535353;
1499 |     font-size: 18px;
1500 |     margin-bottom: 10px;
1501 |     display: inline-block;
1502 |     cursor: default
1503 |   }
1504 | 
1505 |   .releases-section .release-view .version-info .changelog:after {
1506 |     position: absolute;
1507 |     top: -6px;
1508 |     right: 33px;
1509 |     z-index: 1;
1510 |     display: inline-block;
1511 |     display: none;
1512 |     width: 22px;
1513 |     height: 22px;
1514 |     border-top-left-radius: 2px;
1515 |     background-color: #505556;
1516 |     content: ' ';
1517 |     transform: rotateZ(45deg)
1518 |   }
1519 | 
1520 |   .releases-section .release-view .version-info .changelog.show {
1521 |     display: block;
1522 |     opacity: 1;
1523 |     transform: scale(1)
1524 |   }
1525 | 
1526 |   @media screen and (max-width: 768px) {
1527 |     .releases-section .release-view .qrcode {
1528 |       display: none
1529 |     }
1530 |     .releases-section .release-view .download-btn {
1531 |       display: block
1532 |     }
1533 |   }
1534 | 
1535 |   :root .combo .releases-section .release-view {
1536 |     max-width: 407px
1537 |   }
1538 | 
1539 |   .releases-section .release-view:nth-child(n+5) {
1540 |     display: none
1541 |   }
1542 | 
1543 |   .releases-section .releases-toggle {
1544 |     display: inline-block;
1545 |     padding: 14px 22px;
1546 |     border: 1px solid #868C8E;
1547 |     border-radius: 40px;
1548 |     color: #868C8E;
1549 |     text-decoration: none;
1550 |     font-size: 12px
1551 |   }
1552 | 
1553 |   .releases-section .releases-toggle .off {
1554 |     display: block
1555 |   }
1556 | 
1557 |   .releases-section .releases-toggle .on {
1558 |     display: none
1559 |   }
1560 | 
1561 |   .releases-section.show-all .release-view:nth-child(n+5) {
1562 |     display: block
1563 |   }
1564 | 
1565 |   .releases-section.show-all .last {
1566 |     padding-bottom: 0
1567 |   }
1568 | 
1569 |   .releases-section.show-all .last:before, .releases-section.show-all .releases-toggle .off {
1570 |     display: none
1571 |   }
1572 | 
1573 |   .releases-section.show-all .releases-toggle .on {
1574 |     display: block
1575 |   }
1576 | 
1577 |   .per-type-info {
1578 |     position: relative;
1579 |     overflow: hidden;
1580 |     padding-top: 0;
1581 |     border-top: 1px solid #DAE2E3
1582 |   }
1583 | 
1584 |   .per-type-info .type {
1585 |     float: left;
1586 |     width: 50%
1587 |   }
1588 | 
1589 |   .per-type-info .type:first-child .releases-section {
1590 |     padding: 70px 70px 0 0
1591 |   }
1592 | 
1593 |   .per-type-info .type .master-section {
1594 |     padding: 70px 0 0;
1595 |     border-top: none
1596 |   }
1597 | 
1598 |   .per-type-info .type .master-section pre {
1599 |     white-space: pre-line
1600 |   }
1601 | 
1602 |   .per-type-info .type:last-child .master-section, .per-type-info .type:last-child .releases-section {
1603 |     padding: 70px 0 0 70px
1604 |   }
1605 | 
1606 |   .per-type-info .type-icon {
1607 |     margin-bottom: 0
1608 |   }
1609 | 
1610 |   .per-type-info .info {
1611 |     padding-top: 50px;
1612 |     font-size: 12px
1613 |   }
1614 | 
1615 |   .per-type-info .info .version {
1616 |     margin-bottom: 20px
1617 |   }
1618 | 
1619 |   .per-type-info .info .type-icon {
1620 |     margin-bottom: 40px
1621 |   }
1622 | 
1623 |   .per-type-info .info i {
1624 |     margin-bottom: 0;
1625 |     color: #505556;
1626 |     font-size: 48px
1627 |   }
1628 | 
1629 |   .per-type-info .info .store-link-wrapper a {
1630 |     width: 200px
1631 |   }
1632 | 
1633 |   .per-type-info .info .store-link-wrapper a i {
1634 |     font-size: 29px
1635 |   }
1636 | 
1637 |   .per-type-info:before {
1638 |     position: absolute;
1639 |     left: 50%;
1640 |     width: 1px;
1641 |     height: 100%;
1642 |     background-color: #DAE2E3;
1643 |     content: ' '
1644 |   }
1645 | 
1646 |   .desc-section pre {
1647 |     white-space: pre-wrap;
1648 |     word-break: break-all;
1649 |     line-height: 22px
1650 |   }
1651 | 
1652 |   .section-store-link a {
1653 |     display: inline-block;
1654 |     border: 1px solid #505556;
1655 |     border-radius: 5px;
1656 |     text-decoration: none
1657 |   }
1658 | 
1659 |   .section-store-link a i {
1660 |     display: block;
1661 |     padding: 14px 40px;
1662 |     color: #505556;
1663 |     font-size: 33px
1664 |   }
1665 | 
1666 |   .screenshots-section {
1667 |     border-bottom: none
1668 |   }
1669 | 
1670 |   .screenshots-section .list-wrapper {
1671 |     overflow-x: scroll;
1672 |     max-width: 100%
1673 |   }
1674 | 
1675 |   .screenshots-section ul {
1676 |     display: block;
1677 |     margin: 0;
1678 |     padding: 0;
1679 |     list-style: none;
1680 |     white-space: nowrap
1681 |   }
1682 | 
1683 |   .screenshots-section ul li {
1684 |     display: inline-block;
1685 |     padding-right: 20px;
1686 |     vertical-align: middle
1687 |   }
1688 | 
1689 |   .screenshots-section ul li img {
1690 |     max-height: 462px
1691 |   }
1692 | 
1693 |   .type:first-child .master-section {
1694 |     padding-right: 5px
1695 |   }
1696 | 
1697 |   .type:last-child .master-section {
1698 |     padding-left: 5px
1699 |   }
1700 | 
1701 |   .combo-screenshots-container {
1702 |     border-top: none
1703 |   }
1704 | 
1705 |   .combo-screenshots-container .type:first-child {
1706 |     padding-right: 50px
1707 |   }
1708 | 
1709 |   .combo-screenshots-container .type:last-child {
1710 |     padding: 50px 0 50px 50px
1711 |   }
1712 | 
1713 |   .combo-screenshots-container .type .list-wrapper {
1714 |     width: 100%
1715 |   }
1716 | 
1717 |   .footer {
1718 |     margin-top: 40px;
1719 |     padding: 20px 20px 90px;
1720 |     border-top: 1px solid #DAE2E3
1721 |   }
1722 | 
1723 |   .footer a {
1724 |     text-decoration: none;
1725 |     color: #F8CD0B
1726 |   }
1727 | 
1728 |   .hide {
1729 |     display: none
1730 |   }
1731 | 
1732 |   .wechat-tips img, .wechat-tips span {
1733 |     display: inline-block;
1734 |     margin-right: 10px;
1735 |     vertical-align: middle
1736 |   }
1737 | 
1738 |   .wechat-tips {
1739 |     position: fixed;
1740 |     top: 10px;
1741 |     z-index: 103;
1742 |     padding-top: 14px;
1743 |     width: 100%;
1744 |     text-align: right
1745 |   }
1746 | 
1747 |   .wechat-tips span {
1748 |     color: #fff;
1749 |     text-align: left;
1750 |     font-weight: 700;
1751 |     font-size: 16px;
1752 |     line-height: 30px
1753 |   }
1754 | 
1755 |   .wechat-tips span.en {
1756 |     width: 240px
1757 |   }
1758 | 
1759 |   .wechat-tips img {
1760 |     margin-bottom: 13px;
1761 |     width: 50px
1762 |   }
1763 | 
1764 |   @media (min-width: 420px) {
1765 |     .wechat-tips span {
1766 |       margin-right: 15px
1767 |     }
1768 |     .wechat-tips span.en {
1769 |       margin-bottom: -20px;
1770 |       width: auto
1771 |     }
1772 |     .wechat-tips img {
1773 |       margin-right: 20px
1774 |     }
1775 |   }
1776 | 
1777 |   .list-unstyled {
1778 |     margin: 0;
1779 |     padding: 0;
1780 |     list-style-type: none
1781 |   }
1782 | 
1783 |   .list-unstyled li:first-child {
1784 |     padding-bottom: 10px
1785 |   }
1786 | 
1787 |   .tip {
1788 |     margin-left: 15px;
1789 |     vertical-align: middle;
1790 |     font-size: 14px;
1791 |     cursor: pointer
1792 |   }
1793 | 
1794 |   .tip.en {
1795 |     margin-left: 5px
1796 |   }
1797 | 
1798 |   .tip img {
1799 |     margin-right: 5px;
1800 |     height: 16px;
1801 |     position: relative;
1802 |     top: 4px
1803 |   }
1804 | 
1805 |   .tip.RISK {
1806 |     color: #d95656
1807 |   }
1808 | 
1809 |   .tip.SCANED {
1810 |     color: #8fbf46
1811 |   }
1812 | 
1813 |   .tip.SCANED img {
1814 |     height: 14px;
1815 |     top: 2px
1816 |   }
1817 | 
1818 |   .tooltip {
1819 |     position: absolute;
1820 |     z-index: 10;
1821 |     display: none;
1822 |     width: 250px;
1823 |     color: #505556;
1824 |     font-size: 0
1825 |   }
1826 | 
1827 |   .tooltip .arraw {
1828 |     display: inline-block;
1829 |     margin-left: 40px;
1830 |     width: 20px;
1831 |     height: 20px;
1832 |     border-top: 1px solid;
1833 |     border-left: 1px solid;
1834 |     background-color: #fff;
1835 |     transform: rotate(45deg)
1836 |   }
1837 | 
1838 |   .tooltip .content {
1839 |     margin-top: -10px;
1840 |     padding: 15px;
1841 |     border: 1px solid;
1842 |     border-radius: 10px;
1843 |     background-color: #fff;
1844 |     font-size: 13px
1845 |   }
1846 | 
1847 |   .tooltip table {
1848 |     width: 100%
1849 |   }
1850 | 
1851 |   .tooltip table .text-result {
1852 |     width: 60px;
1853 |     text-align: left
1854 |   }
1855 | 
1856 |   .tooltip table .logo {
1857 |     width: 40px
1858 |   }
1859 | 
1860 |   .tooltip table .logo img {
1861 |     width: 20px
1862 |   }
1863 | 
1864 |   .tooltip.SCANED .arraw, .tooltip.SCANED .content {
1865 |     border-color: #8fbf46
1866 |   }
1867 | 
1868 |   .tooltip .text-result {
1869 |     color: #d85657
1870 |   }
1871 | 
1872 |   .tooltip .SCANED .text-result {
1873 |     color: #8fbf46
1874 |   }
1875 | 
1876 |   .tooltip.RISK .arraw, .tooltip.RISK .content, .tooltip.VIRUS .arraw, .tooltip.VIRUS .content {
1877 |     border-color: #d85657
1878 |   }
1879 | 
1880 |   @keyframes rotate {
1881 |     0% {
1882 |       transform: rotate(0)
1883 |     }
1884 |     100% {
1885 |       transform: rotate(360deg)
1886 |     }
1887 |   }
1888 | 
1889 |   @keyframes rotate_r {
1890 |     0% {
1891 |       transform: rotate(360deg)
1892 |     }
1893 |     100% {
1894 |       transform: rotate(0)
1895 |     }
1896 |   }
1897 | 
1898 |   #actions {
1899 |     display: none
1900 |   }
1901 | 
1902 |   #actions button {
1903 |     transition: all .25s
1904 |   }
1905 | 
1906 |   #actions button.loading {
1907 |     animation: rotate .6s linear infinite;
1908 |     background: 0 0
1909 |   }
1910 | 
1911 |   #actions button.loading_ten {
1912 |     animation: rotate_r .6s linear infinite;
1913 |     background: 0 0
1914 |   }
1915 | 
1916 |   #actions p {
1917 |     margin-bottom: 0
1918 |   }
1919 | 
1920 |   #actions a {
1921 |     display: inline-block;
1922 |     padding: 12px 46px;
1923 |     min-width: 200px;
1924 |     border: 1px solid #32B2A7;
1925 |     border-radius: 40px;
1926 |     font-size: 14px;
1927 |     background: #fff;
1928 |     color: #32B2A7
1929 |   }
1930 | 
1931 |   @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
1932 |     #actions {
1933 |       display: block
1934 |     }
1935 |   }
1936 | 
1937 |   @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
1938 |     #actions {
1939 |       display: block
1940 |     }
1941 |   }
1942 | 
1943 |   @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
1944 |     #actions {
1945 |       display: block
1946 |     }
1947 |   }
1948 | 
1949 |   @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
1950 |     #actions {
1951 |       display: block
1952 |     }
1953 |   }
1954 | 
1955 |   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
1956 |     #actions {
1957 |       display: block
1958 |     }
1959 |   }
1960 | 
1961 |   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
1962 |     #actions {
1963 |       display: block
1964 |     }
1965 |   }
1966 | 
1967 |   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
1968 |     #actions {
1969 |       display: block
1970 |     }
1971 |   }
1972 | 
1973 |   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
1974 |     #actions {
1975 |       display: block
1976 |     }
1977 |   }
1978 | 
1979 |   @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
1980 |     #actions {
1981 |       display: block
1982 |     }
1983 |   }
1984 | 
1985 |   #actions.type-android {
1986 |     display: block
1987 |   }
1988 | 
1989 |   body.hidden-overflow {
1990 |     overflow: hidden;
1991 |     position: fixed;
1992 |     width: 100%
1993 |   }
1994 | 
1995 |   .main header .app-brief .icon-container .qrcode {
1996 |     background-color: #EFF2F2;
1997 |     transition: all .25s
1998 |   }
1999 | 
2000 |   .main header .app-brief .name .icon-warp {
2001 |     vertical-align: bottom
2002 |   }
2003 | 
2004 |   .main header .app-brief .name > .tip {
2005 |     vertical-align: bottom;
2006 |     position: relative;
2007 |     top: -3px
2008 |   }
2009 | 
2010 |   .main .footer .one-key-report {
2011 |     color: #fff;
2012 |     background-color: #32B2A7;
2013 |     padding: 5px 10px;
2014 |     border-radius: 15px;
2015 |     float: right;
2016 |     margin-top: -5px
2017 |   }
2018 | 
2019 |   .main .not_app .footer .one-key-report, .main .not_find .footer .one-key-report, .main.forbidden .footer .one-key-report, .main.not_found .footer .one-key-report {
2020 |     display: none
2021 |   }
2022 | 
2023 |   .masklayer {
2024 |     position: fixed;
2025 |     width: 100%;
2026 |     height: 100%;
2027 |     left: 0;
2028 |     top: 0;
2029 |     background-color: rgba(0, 0, 0, .5);
2030 |     z-index: 99998
2031 |   }
2032 | 
2033 |   .dialog {
2034 |     position: fixed;
2035 |     width: 390px;
2036 |     background-color: #fff;
2037 |     left: 50%;
2038 |     top: 50%;
2039 |     z-index: 99999;
2040 |     padding: 20px;
2041 |     box-shadow: 0 0 5px rgba(0, 0, 0, .5);
2042 |     transform: translate(-50%, -50%)
2043 |   }
2044 | 
2045 |   .dialog .dialog-close {
2046 |     position: absolute;
2047 |     right: 10px;
2048 |     top: 10px
2049 |   }
2050 | 
2051 |   .dialog .dialog-close i.icon-close {
2052 |     font-size: 18px;
2053 |     font-weight: 700;
2054 |     cursor: pointer
2055 |   }
2056 | 
2057 |   .dialog .dialog-close i.icon-close:hover {
2058 |     color: #333
2059 |   }
2060 | 
2061 |   .dialog .dialog-close .icon-return {
2062 |     display: none;
2063 |     color: #32B2A7
2064 |   }
2065 | 
2066 |   .one-key-report-dialog .report_select {
2067 |     position: relative;
2068 |     width: 100%;
2069 |     height: 50px;
2070 |     border: 1px solid #D6D6D6;
2071 |     font-size: 14px;
2072 |     line-height: 50px;
2073 |     text-indent: 15px;
2074 |     cursor: pointer
2075 |   }
2076 | 
2077 |   .one-key-report-dialog .report_select:hover {
2078 |     background: #F5F5F5
2079 |   }
2080 | 
2081 |   .one-key-report-dialog .report_select .caret {
2082 |     display: inline-block;
2083 |     width: 0;
2084 |     height: 0;
2085 |     vertical-align: middle;
2086 |     border-top: 6px dashed;
2087 |     border-right: 6px solid transparent;
2088 |     border-left: 6px solid transparent;
2089 |     position: absolute;
2090 |     top: 23px;
2091 |     right: 20px
2092 |   }
2093 | 
2094 |   .one-key-report-dialog .report_select.dropup .caret {
2095 |     content: "";
2096 |     border-top: 0;
2097 |     border-bottom: 6px dashed
2098 |   }
2099 | 
2100 |   .one-key-report-dialog .report_select .dropdown-menu {
2101 |     position: absolute;
2102 |     top: 100%;
2103 |     left: 0;
2104 |     z-index: 1000;
2105 |     float: left;
2106 |     width: 100%;
2107 |     padding: 5px 0;
2108 |     margin: 2px 0 5px;
2109 |     font-size: 14px;
2110 |     text-align: left;
2111 |     list-style: none;
2112 |     background-color: #fff;
2113 |     background-clip: padding-box;
2114 |     border: 1px solid rgba(0, 0, 0, .15);
2115 |     border-radius: 4px;
2116 |     box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
2117 |     display: none;
2118 |     clear: left
2119 |   }
2120 | 
2121 |   .one-key-report-dialog .report_select .dropdown-menu > li {
2122 |     line-height: 40px;
2123 |     cursor: pointer
2124 |   }
2125 | 
2126 |   .one-key-report-dialog .report_select .dropdown-menu > li:hover {
2127 |     color: #fff;
2128 |     background: #42B191
2129 |   }
2130 | 
2131 |   .one-key-report-dialog .custom-checkbox {
2132 |     cursor: pointer;
2133 |     display: inline-block;
2134 |     padding: 2px 2px 2px 25px;
2135 |     position: relative;
2136 |     line-height: 24px;
2137 |     text-align: left;
2138 |     margin-right: 20px
2139 |   }
2140 | 
2141 |   .one-key-report-dialog .custom-checkbox:last-child {
2142 |     margin-right: 0
2143 |   }
2144 | 
2145 |   .one-key-report-dialog .custom-checkbox:after, .one-key-report-dialog .custom-checkbox:before {
2146 |     content: ' ';
2147 |     display: block;
2148 |     position: absolute
2149 |   }
2150 | 
2151 |   .one-key-report-dialog .custom-checkbox:after {
2152 |     width: 10px;
2153 |     height: 10px;
2154 |     border-radius: 10px;
2155 |     background-color: #32B2A7;
2156 |     left: 2px;
2157 |     top: 8px;
2158 |     display: none
2159 |   }
2160 | 
2161 |   .one-key-report-dialog .custom-checkbox:before {
2162 |     width: 12px;
2163 |     height: 12px;
2164 |     border-radius: 12px;
2165 |     left: 0;
2166 |     top: 6px;
2167 |     border: 1px solid #32B2A7;
2168 |     background-color: #fff
2169 |   }
2170 | 
2171 |   .one-key-report-dialog .custom-checkbox.active:after {
2172 |     display: block
2173 |   }
2174 | 
2175 |   .one-key-report-dialog .files_content {
2176 |     display: -ms-flexbox !important;
2177 |     display: flex !important;
2178 |     -ms-flex-pack: justify !important;
2179 |     justify-content: space-between !important
2180 |   }
2181 | 
2182 |   .one-key-report-dialog .files_content .files_item {
2183 |     display: -ms-flexbox;
2184 |     display: flex;
2185 |     -ms-flex-align: center;
2186 |     align-items: center
2187 |   }
2188 | 
2189 |   .one-key-report-dialog .files_content .files_item > div {
2190 |     text-align: center;
2191 |     display: -ms-flexbox;
2192 |     display: flex;
2193 |     -ms-flex-direction: column;
2194 |     flex-direction: column;
2195 |     margin-right: 5px;
2196 |     -ms-flex-align: center;
2197 |     align-items: center
2198 |   }
2199 | 
2200 |   .one-key-report-dialog .files_content .files_item > div > img {
2201 |     width: 35px
2202 |   }
2203 | 
2204 |   .one-key-report-dialog .files_content .files_item > div > span {
2205 |     height: 20px;
2206 |     width: 65px;
2207 |     overflow: hidden;
2208 |     text-overflow: ellipsis;
2209 |     white-space: nowrap
2210 |   }
2211 | 
2212 |   .one-key-report-dialog .content-row {
2213 |     display: table;
2214 |     padding: 5px;
2215 |     position: relative;
2216 |     width: 100%
2217 |   }
2218 | 
2219 |   .one-key-report-dialog .content-row .report_upload {
2220 |     cursor: pointer;
2221 |     height: 40px;
2222 |     width: 40px;
2223 |     display: inline-block;
2224 |     text-align: center;
2225 |     line-height: 40px;
2226 |     font-size: 20px;
2227 |     border: 1px dashed #ddd
2228 |   }
2229 | 
2230 |   .one-key-report-dialog .content-row .report_upload:hover {
2231 |     transition: all .5s;
2232 |     border-color: #42B191
2233 |   }
2234 | 
2235 |   .one-key-report-dialog .content-row .report_msg {
2236 |     font-size: 16px;
2237 |     color: #222;
2238 |     margin-bottom: 20px
2239 |   }
2240 | 
2241 |   .one-key-report-dialog .content-row input, .one-key-report-dialog .content-row label {
2242 |     display: block
2243 |   }
2244 | 
2245 |   .one-key-report-dialog .content-row label {
2246 |     color: #666;
2247 |     font-size: 18px;
2248 |     line-height: 34px;
2249 |     margin-right: 30px
2250 |   }
2251 | 
2252 |   .one-key-report-dialog .content-row input {
2253 |     height: 50px;
2254 |     width: 100%;
2255 |     margin-bottom: 10px;
2256 |     padding: 5px 10px;
2257 |     outline: 0;
2258 |     background: #F5F5F5;
2259 |     border: none;
2260 |     font-size: 14px
2261 |   }
2262 | 
2263 |   .one-key-report-dialog .content-row input::-moz-placeholder {
2264 |     font-size: 14px;
2265 |     color: #8B8E93
2266 |   }
2267 | 
2268 |   .one-key-report-dialog .content-row input:-ms-input-placeholder {
2269 |     font-size: 14px;
2270 |     color: #8B8E93
2271 |   }
2272 | 
2273 |   .one-key-report-dialog .content-row input::placeholder {
2274 |     font-size: 14px;
2275 |     color: #8B8E93
2276 |   }
2277 | 
2278 |   .one-key-report-dialog .content-row .report_captcha {
2279 |     display: -ms-flexbox;
2280 |     display: flex
2281 |   }
2282 | 
2283 |   .one-key-report-dialog .content-row .report_captcha input {
2284 |     display: inline-block;
2285 |     width: 190px;
2286 |     margin-right: 20px
2287 |   }
2288 | 
2289 |   .one-key-report-dialog .content-row .report_captcha img {
2290 |     width: 100px;
2291 |     height: 50px;
2292 |     background: #F5F5F5;
2293 |     margin-left: 30px;
2294 |     cursor: pointer
2295 |   }
2296 | 
2297 |   .one-key-report-dialog .content-row .report_phone input {
2298 |     display: inline-block;
2299 |     width: 190px;
2300 |     margin-right: 20px
2301 |   }
2302 | 
2303 |   .one-key-report-dialog .content-row .report_phone .btn {
2304 |     width: 125px;
2305 |     color: #fff;
2306 |     height: 50px;
2307 |     background-color: #42B191;
2308 |     padding: 5px 10px;
2309 |     margin-top: -5px;
2310 |     font-size: 14px
2311 |   }
2312 | 
2313 |   .one-key-report-dialog .content-row .report_phone .btn[disabled] {
2314 |     color: #848383;
2315 |     background: #D3D3D3
2316 |   }
2317 | 
2318 |   .one-key-report-dialog .content-row .report-text {
2319 |     font-size: 14px;
2320 |     color: #8B8E93
2321 |   }
2322 | 
2323 |   .one-key-report-dialog .content-row .checkbox-list {
2324 |     clear: both;
2325 |     width: 100%;
2326 |     padding: 5px 0;
2327 |     text-align: left
2328 |   }
2329 | 
2330 |   .one-key-report-dialog .content-row textarea {
2331 |     width: 100%;
2332 |     height: 80px;
2333 |     resize: none;
2334 |     padding: 10px;
2335 |     outline: 0;
2336 |     color: #A9B1B3;
2337 |     font-size: 14px;
2338 |     background: #F5F5F5;
2339 |     border: none
2340 |   }
2341 | 
2342 |   .one-key-report-dialog .content-row textarea::-moz-placeholder {
2343 |     font-size: 14px;
2344 |     color: #8B8E93
2345 |   }
2346 | 
2347 |   .one-key-report-dialog .content-row textarea:-ms-input-placeholder {
2348 |     font-size: 14px;
2349 |     color: #8B8E93
2350 |   }
2351 | 
2352 |   .one-key-report-dialog .content-row textarea::placeholder {
2353 |     font-size: 14px;
2354 |     color: #8B8E93
2355 |   }
2356 | 
2357 |   .one-key-report-dialog .content-row .btn-report {
2358 |     color: #fff;
2359 |     background-color: #42B191;
2360 |     padding: 5px 10px;
2361 |     margin-top: 5px;
2362 |     width: 190px;
2363 |     height: 50px;
2364 |     display: inline-block;
2365 |     line-height: 40px;
2366 |     font-size: 18px
2367 |   }
2368 | 
2369 |   .one-key-report-dialog .content-row .btn-attachment {
2370 |     color: #fff;
2371 |     background-color: #32B2A7;
2372 |     padding: 5px 40px;
2373 |     border-radius: 5px;
2374 |     margin-top: -5px;
2375 |     margin-left: 10px
2376 |   }
2377 | 
2378 |   .one-key-report-dialog .report-feedback, .one-key-report-dialog .report-form {
2379 |     position: relative;
2380 |     width: 100%;
2381 |     height: 100%
2382 |   }
2383 | 
2384 |   .one-key-report-dialog .report-sending {
2385 |     background-color: rgba(255, 255, 255, .5);
2386 |     color: #000;
2387 |     font-size: 20px;
2388 |     position: absolute;
2389 |     width: 100%;
2390 |     height: 100%;
2391 |     left: 0;
2392 |     top: 0;
2393 |     z-index: 100;
2394 |     text-align: center;
2395 |     line-height: 450px;
2396 |     cursor: default;
2397 |     display: none
2398 |   }
2399 | 
2400 |   .one-key-report-dialog .report-form {
2401 |     display: block
2402 |   }
2403 | 
2404 |   .one-key-report-dialog .report-feedback {
2405 |     display: none;
2406 |     cursor: default
2407 |   }
2408 | 
2409 |   .one-key-report-dialog .report-feedback .feedback-thanks {
2410 |     width: 160px;
2411 |     height: 160px;
2412 |     background-color: #ffd301;
2413 |     border-radius: 20px;
2414 |     margin: 50px auto 20px
2415 |   }
2416 | 
2417 |   .one-key-report-dialog .report-feedback .feedback-thanks .brace-content {
2418 |     margin: 0 auto;
2419 |     padding-top: 30px;
2420 |     color: #000;
2421 |     width: 110px;
2422 |     text-align: center
2423 |   }
2424 | 
2425 |   .one-key-report-dialog .report-feedback .feedback-thanks .thanks {
2426 |     min-height: 22px;
2427 |     letter-spacing: .8px;
2428 |     font-weight: 700;
2429 |     font-size: 16px;
2430 |     font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
2431 |     text-align: center;
2432 |     cursor: default;
2433 |     color: #000;
2434 |     margin: 15px 0 0
2435 |   }
2436 | 
2437 |   .one-key-report-dialog .report-feedback .feedback-thanks .face, .one-key-report-dialog .report-feedback .feedback-thanks .icon-brace-left, .one-key-report-dialog .report-feedback .feedback-thanks .icon-brace-right {
2438 |     display: inline-block;
2439 |     vertical-align: middle
2440 |   }
2441 | 
2442 |   .one-key-report-dialog .report-feedback .feedback-thanks .icon-brace-left, .one-key-report-dialog .report-feedback .feedback-thanks .icon-brace-right {
2443 |     font-size: 80px
2444 |   }
2445 | 
2446 |   .one-key-report-dialog .report-feedback .feedback-thanks .face .icon-comma-eye {
2447 |     margin: 0 4px;
2448 |     font-size: 22px
2449 |   }
2450 | 
2451 |   .one-key-report-dialog .report-feedback .feedback-thanks .face .icon-comma-eye.right {
2452 |     margin-left: 16px;
2453 |     display: inline-block;
2454 |     transform: scaleY(.5)
2455 |   }
2456 | 
2457 |   .one-key-report-dialog .report-feedback .feedback-thanks .face .icon-mouth {
2458 |     display: block;
2459 |     margin-top: 15px;
2460 |     transform: rotateZ(-19deg) translateX(2px)
2461 |   }
2462 | 
2463 |   .one-key-report-dialog .report-feedback .feedback-message {
2464 |     color: #32B2A7;
2465 |     font-size: 30px;
2466 |     text-align: center
2467 |   }
2468 | 
2469 |   .one-key-report-dialog .report-feedback .feedback-content {
2470 |     font-size: 18px;
2471 |     margin-top: 40px;
2472 |     color: #858585
2473 |   }
2474 | 
2475 |   .one-key-report-dialog .report-error {
2476 |     line-height: 34px;
2477 |     color: #FA6E4B;
2478 |     font-size: 14px;
2479 |     cursor: default
2480 |   }
2481 | 
2482 |   .one-key-report-dialog .report-error > div {
2483 |     display: none
2484 |   }
2485 | 
2486 |   .verify-dialog .dialog-title {
2487 |     color: #505556;
2488 |     font-size: 16px
2489 |   }
2490 | 
2491 |   .verify-dialog .form-control {
2492 |     height: 50px;
2493 |     width: 100%;
2494 |     margin-bottom: 10px;
2495 |     padding: 5px 10px;
2496 |     outline: 0;
2497 |     background: #F5F5F5;
2498 |     border: none;
2499 |     font-size: 1rem
2500 |   }
2501 | 
2502 |   .verify-dialog .form-group {
2503 |     display: -ms-flexbox;
2504 |     display: flex;
2505 |     -ms-flex-align: stretch;
2506 |     align-items: stretch;
2507 |     margin-bottom: 10px;
2508 |     height: 50px
2509 |   }
2510 | 
2511 |   .verify-dialog .form-group .form-control {
2512 |     -ms-flex: 1 1 auto;
2513 |     flex: 1 1 auto;
2514 |     margin-bottom: 0
2515 |   }
2516 | 
2517 |   .verify-dialog .form-addon {
2518 |     -ms-flex: 0 0 auto;
2519 |     flex: 0 0 auto;
2520 |     margin-left: 30px;
2521 |     height: 100%;
2522 |     width: 125px
2523 |   }
2524 | 
2525 |   .verify-dialog .form-action {
2526 |     margin-top: 20px
2527 |   }
2528 | 
2529 |   .verify-dialog .captcha-group {
2530 |     position: relative
2531 |   }
2532 | 
2533 |   .verify-dialog .captcha-group.loading .icon-loading {
2534 |     display: block
2535 |   }
2536 | 
2537 |   .verify-dialog .captcha-group .icon-loading {
2538 |     display: none;
2539 |     position: absolute;
2540 |     top: 0;
2541 |     right: 0;
2542 |     left: 0;
2543 |     bottom: 0;
2544 |     background-color: #fff;
2545 |     text-align: center;
2546 |     line-height: 50px;
2547 |     font-size: 30px
2548 |   }
2549 | 
2550 |   .verify-dialog .captcha-group .icon-loading:before {
2551 |     display: inline-block;
2552 |     animation: rotate linear 1s infinite
2553 |   }
2554 | 
2555 |   .verify-dialog .captcha-image {
2556 |     cursor: pointer;
2557 |     width: 100px;
2558 |     height: 100%
2559 |   }
2560 | 
2561 |   .verify-dialog .btn-green {
2562 |     color: #fff;
2563 |     height: 50px;
2564 |     background-color: #42B191;
2565 |     border: none;
2566 |     padding: 5px 10px;
2567 |     font-size: 1rem;
2568 |     width: 100%
2569 |   }
2570 | 
2571 |   .verify-dialog .form-addon .btn-green[disabled] {
2572 |     color: #848383;
2573 |     background: #D3D3D3
2574 |   }
2575 | 
2576 |   .verify-dialog .form-addon.btn-verify-submit {
2577 |     width: 190px
2578 |   }
2579 | 
2580 |   .ios-modal {
2581 |     overflow: auto;
2582 |     overflow-y: scroll;
2583 |     height: 100%;
2584 |     position: fixed;
2585 |     top: 0;
2586 |     left: 0;
2587 |     z-index: 99999;
2588 |     background-color: rgba(0, 0, 0, .6)
2589 |   }
2590 | 
2591 |   .ios-dialog {
2592 |     width: auto;
2593 |     margin: 10px;
2594 |     border-radius: 4px;
2595 |     background-color: #fff
2596 |   }
2597 | 
2598 |   .ios-dialog .ios-dialog-header {
2599 |     position: relative;
2600 |     width: 100%;
2601 |     height: 50px;
2602 |     font-size: 16px;
2603 |     line-height: 50px;
2604 |     text-align: center;
2605 |     color: #fff;
2606 |     border-top-left-radius: 4px;
2607 |     border-top-right-radius: 4px;
2608 |     background-color: #32B2A7
2609 |   }
2610 | 
2611 |   .ios-dialog .ios-dialog-header img {
2612 |     position: absolute;
2613 |     top: 15px;
2614 |     right: 15px;
2615 |     width: 15px
2616 |   }
2617 | 
2618 |   .ios-dialog .ios-dialog-content {
2619 |     padding: 20px;
2620 |     color: #333;
2621 |     border-radius: 4px;
2622 |     background-color: #fff
2623 |   }
2624 | 
2625 |   .ios-dialog .ios-dialog-content .ios-dialog-content-title {
2626 |     font-weight: 700;
2627 |     margin-top: 10px
2628 |   }
2629 | 
2630 |   .ios-dialog .ios-dialog-content .img-block {
2631 |     display: block;
2632 |     margin: 0 auto
2633 |   }
2634 | 
2635 |   .ios-dialog .ios-dialog-content .ios-dialog-content-b1 {
2636 |     width: 80%;
2637 |     margin-top: 5px
2638 |   }
2639 | 
2640 |   .ios-dialog .ios-dialog-content p {
2641 |     margin-top: 10px
2642 |   }
2643 | 
2644 |   .ios-dialog .ios-dialog-footer {
2645 |     background-color: #fff;
2646 |     text-align: right;
2647 |     padding-bottom: 50px;
2648 |     padding-right: 20px;
2649 |     border-radius: 4px
2650 |   }
2651 | 
2652 |   .ios-dialog .ios-dialog-footer span {
2653 |     display: inline-block;
2654 |     background-color: #32B2A7;
2655 |     color: #fff;
2656 |     padding: 10px
2657 |   }
2658 | 
2659 |   .ios-dialog .ios-dialog-footer .ios-dialog-footer-close {
2660 |     padding: 10px 15px;
2661 |     margin-left: 10px
2662 |   }
2663 | 
2664 |   .app_bottom_fixed {
2665 |     position: fixed;
2666 |     bottom: 0;
2667 |     left: 0;
2668 |     right: 0;
2669 |     z-index: 3;
2670 |     font-size: 0;
2671 |     text-align: center;
2672 |     background: 0 0
2673 |   }
2674 | 
2675 |   .app_bottom_fixed img {
2676 |     width: 100%;
2677 |     max-height: 80px
2678 |   }
2679 | 
2680 |   .after-install-fixed, .after-install-games-fixed {
2681 |     position: fixed;
2682 |     z-index: 200;
2683 |     background-color: #F3F3F3;
2684 |     top: 0;
2685 |     bottom: 0;
2686 |     right: 0;
2687 |     left: 0;
2688 |     overflow: auto;
2689 |     display: -ms-flexbox;
2690 |     display: flex;
2691 |     -ms-flex-direction: column;
2692 |     flex-direction: column
2693 |   }
2694 | 
2695 |   .after-install-games-fixed .after-install-header {
2696 |     background: #fff;
2697 |     -ms-flex: 1 0 180px;
2698 |     flex: 1 0 180px
2699 |   }
2700 | 
2701 |   .after-install-games-fixed .after-install-header .waiting {
2702 |     color: #4A4A4A
2703 |   }
2704 | 
2705 |   .after-install-games-fixed .after-install-header a {
2706 |     display: inline-block;
2707 |     padding: 4px 10px;
2708 |     margin-top: 5px;
2709 |     min-width: 100px;
2710 |     font-size: 14px;
2711 |     background: #fff;
2712 |     color: #32B2A7;
2713 |     border: 1px solid #32B2A7
2714 |   }
2715 | 
2716 |   .after-install-games-fixed .popularize-games {
2717 |     -ms-flex: 0 0 auto;
2718 |     flex: 0 0 auto;
2719 |     background-color: #ededed
2720 |   }
2721 | 
2722 |   .after-install-games-fixed .popularize-games .popularize-header {
2723 |     line-height: 50px;
2724 |     padding: 0;
2725 |     -ms-flex-align: center;
2726 |     align-items: center;
2727 |     -ms-flex-pack: center;
2728 |     justify-content: center
2729 |   }
2730 | 
2731 |   @media only screen and (max-width: 991px) and (min-width: 768px) {
2732 |     .after-install-games-fixed .popularize-games .popularize-list > li:nth-child(n+5) {
2733 |       display: none
2734 |     }
2735 |     .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game {
2736 |       margin-bottom: 30px !important
2737 |     }
2738 |   }
2739 | 
2740 |   @media only screen and (max-width: 1024px) and (min-width: 991px) {
2741 |     .after-install-games-fixed .popularize-games .popularize-list > li:nth-child(n+6) {
2742 |       display: none
2743 |     }
2744 |     .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game {
2745 |       margin-bottom: 30px !important
2746 |     }
2747 |   }
2748 | 
2749 |   .after-install-games-fixed .popularize-games .popularize-list {
2750 |     display: -ms-flexbox;
2751 |     display: flex;
2752 |     -ms-flex-wrap: wrap;
2753 |     flex-wrap: wrap;
2754 |     -ms-flex-pack: distribute;
2755 |     justify-content: space-around
2756 |   }
2757 | 
2758 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game {
2759 |     max-width: 180px;
2760 |     width: 45%;
2761 |     box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .1);
2762 |     margin-bottom: 10px;
2763 |     border-radius: 20px;
2764 |     background: #35A89B
2765 |   }
2766 | 
2767 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game .app-download {
2768 |     font-size: 16px;
2769 |     height: 30px;
2770 |     display: -ms-flexbox;
2771 |     display: flex;
2772 |     -ms-flex-align: center;
2773 |     align-items: center;
2774 |     -ms-flex-pack: center;
2775 |     justify-content: center;
2776 |     color: #fff
2777 |   }
2778 | 
2779 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game .popularize-app-game-content {
2780 |     height: 145px;
2781 |     background: #fff;
2782 |     display: -ms-flexbox;
2783 |     display: flex;
2784 |     -ms-flex-direction: column;
2785 |     flex-direction: column;
2786 |     -ms-flex-align: center;
2787 |     align-items: center;
2788 |     border-radius: 20px
2789 |   }
2790 | 
2791 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game .popularize-app-game-content .app-zhibo-icon-img {
2792 |     margin-top: 10px
2793 |   }
2794 | 
2795 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game .popularize-app-game-content .app-zhibo-icon-img > img {
2796 |     border-radius: 5px;
2797 |     height: 50px;
2798 |     width: 50px
2799 |   }
2800 | 
2801 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game .primary-text {
2802 |     max-width: 80%;
2803 |     color: #4A4A4A;
2804 |     text-align: center;
2805 |     font-size: 16px;
2806 |     font-weight: 700
2807 |   }
2808 | 
2809 |   .after-install-games-fixed .popularize-games .popularize-list .popularize-app-game .secondary-text {
2810 |     max-width: 80%;
2811 |     height: 32px;
2812 |     overflow: hidden;
2813 |     text-align: center;
2814 |     font-size: 12px;
2815 |     color: rgba(93, 103, 109, .9);
2816 |     padding-bottom: 5px
2817 |   }
2818 | 
2819 |   .after-install-zhibo-fixed {
2820 |     position: fixed;
2821 |     z-index: 200;
2822 |     background-color: #F3F3F3;
2823 |     top: 0;
2824 |     bottom: 0;
2825 |     right: 0;
2826 |     left: 0;
2827 |     overflow: auto;
2828 |     display: -ms-flexbox;
2829 |     display: flex;
2830 |     -ms-flex-direction: column;
2831 |     flex-direction: column
2832 |   }
2833 | 
2834 |   .after-install-zhibo-fixed .after-install-header {
2835 |     -ms-flex: 1 0 165px;
2836 |     flex: 1 0 165px;
2837 |     margin: 0 10px
2838 |   }
2839 | 
2840 |   .after-install-zhibo-fixed .after-install-header > .icon {
2841 |     margin-bottom: 0
2842 |   }
2843 | 
2844 |   .after-install-zhibo-fixed .after-install-header > .icon > img {
2845 |     width: 60px;
2846 |     height: 60px
2847 |   }
2848 | 
2849 |   .after-install-zhibo-fixed .appInfo {
2850 |     -ms-flex: 1 1 auto;
2851 |     flex: 1 1 auto;
2852 |     margin-left: 10px;
2853 |     text-align: left
2854 |   }
2855 | 
2856 |   .after-install-zhibo-fixed .appInfo .primary-text {
2857 |     color: #4A4A4A;
2858 |     font-size: 20px;
2859 |     font-weight: 700
2860 |   }
2861 | 
2862 |   .after-install-zhibo-fixed .appInfo > h3 {
2863 |     margin: 0
2864 |   }
2865 | 
2866 |   .after-install-zhibo-fixed .info-text {
2867 |     display: block;
2868 |     font-size: 12px;
2869 |     text-align: left
2870 |   }
2871 | 
2872 |   .after-install-zhibo-fixed .after-install-header {
2873 |     display: -ms-flexbox;
2874 |     display: flex;
2875 |     -ms-flex-direction: row;
2876 |     flex-direction: row;
2877 |     -ms-flex-align: center;
2878 |     align-items: center
2879 |   }
2880 | 
2881 |   .after-install-zhibo-fixed .Downloading {
2882 |     margin-left: 10px;
2883 |     width: 45px;
2884 |     display: -ms-flexbox;
2885 |     display: flex;
2886 |     -ms-flex-direction: column;
2887 |     flex-direction: column;
2888 |     -ms-flex-pack: center;
2889 |     justify-content: center;
2890 |     font-size: 14px
2891 |   }
2892 | 
2893 |   .after-install-zhibo-fixed .Downloading > i {
2894 |     font-weight: 700;
2895 |     font-size: 20px;
2896 |     margin-bottom: 10px
2897 |   }
2898 | 
2899 |   .after-install-close {
2900 |     position: fixed;
2901 |     right: 20px;
2902 |     top: 20px;
2903 |     z-index: 201;
2904 |     border: none;
2905 |     background: 0 0;
2906 |     font-size: 16px
2907 |   }
2908 | 
2909 |   .after-install-close:focus, .after-install-close:hover {
2910 |     outline: 0;
2911 |     border: none;
2912 |     background: 0 0
2913 |   }
2914 | 
2915 |   .after-install-header {
2916 |     -ms-flex: 1 0 240px;
2917 |     flex: 1 0 240px;
2918 |     display: -ms-flexbox;
2919 |     display: flex;
2920 |     -ms-flex-direction: column;
2921 |     flex-direction: column;
2922 |     -ms-flex-pack: center;
2923 |     justify-content: center;
2924 |     -ms-flex-align: center;
2925 |     align-items: center;
2926 |     color: #4A4A4A
2927 |   }
2928 | 
2929 |   .popularize-app, .popularize-header {
2930 |     display: -ms-flexbox;
2931 |     text-align: left
2932 |   }
2933 | 
2934 |   .after-install-header > .icon {
2935 |     margin-bottom: 10px;
2936 |     font-size: 0
2937 |   }
2938 | 
2939 |   .after-install-header > .icon img {
2940 |     max-width: 100%;
2941 |     width: 80px;
2942 |     height: 80px;
2943 |     border-radius: 17.54%
2944 |   }
2945 | 
2946 |   .after-install-header .waiting {
2947 |     font-size: 22px;
2948 |     color: #32B2A7;
2949 |     margin: 0;
2950 |     position: relative
2951 |   }
2952 | 
2953 |   .after-install-header .waiting-dot {
2954 |     position: absolute;
2955 |     left: 90px
2956 |   }
2957 | 
2958 |   .popularize {
2959 |     -ms-flex: 0 0 auto;
2960 |     flex: 0 0 auto;
2961 |     background-color: #fff;
2962 |     box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, .08)
2963 |   }
2964 | 
2965 |   .popularize-header {
2966 |     padding: 0 10px;
2967 |     line-height: 60px;
2968 |     font-weight: 700;
2969 |     font-size: 16px;
2970 |     color: #4A4A4A;
2971 |     display: flex;
2972 |     -ms-flex-pack: justify;
2973 |     justify-content: space-between
2974 |   }
2975 | 
2976 |   .popularize-header .refresh {
2977 |     cursor: pointer
2978 |   }
2979 | 
2980 |   .popularize-header > h4 {
2981 |     margin: 0;
2982 |     padding-top: 16px;
2983 |     line-height: 16px
2984 |   }
2985 | 
2986 |   .popularize-header > p {
2987 |     margin: 0;
2988 |     padding-top: 4px;
2989 |     padding-bottom: 6px;
2990 |     font-size: 14px !important;
2991 |     line-height: 14px;
2992 |     font-weight: 400
2993 |   }
2994 | 
2995 |   .popularize-list {
2996 |     margin: 0;
2997 |     padding: 0;
2998 |     list-style-type: none
2999 |   }
3000 | 
3001 |   .popularize-list .popularize-actions {
3002 |     -ms-flex: 0 0 70px;
3003 |     flex: 0 0 70px;
3004 |     border-left: 1px solid #DEDEDE
3005 |   }
3006 | 
3007 |   .popularize-app {
3008 |     margin: 0;
3009 |     border-top: 1px solid #DEDEDE;
3010 |     display: flex;
3011 |     -ms-flex-align: center;
3012 |     align-items: center
3013 |   }
3014 | 
3015 |   .popularize-app > .app-icon {
3016 |     -ms-flex: 0 0 auto;
3017 |     flex: 0 0 auto;
3018 |     padding: 10px;
3019 |     font-size: 0
3020 |   }
3021 | 
3022 |   .popularize-app > .app-icon > img {
3023 |     width: 60px;
3024 |     height: 60px;
3025 |     border-radius: 5px
3026 |   }
3027 | 
3028 |   .popularize-app-zhibo {
3029 |     padding: 10px 15px 15px;
3030 |     border-top: 1px solid #DEDEDE;
3031 |     text-align: left;
3032 |     display: -ms-flexbox;
3033 |     display: flex;
3034 |     -ms-flex-direction: column;
3035 |     flex-direction: column
3036 |   }
3037 | 
3038 |   .popularize-actions, .wechat_tip {
3039 |     text-align: center
3040 |   }
3041 | 
3042 |   .popularize-app-zhibo .secondary-text {
3043 |     overflow: hidden;
3044 |     text-overflow: ellipsis;
3045 |     white-space: normal;
3046 |     margin-bottom: 5px;
3047 |     font-size: 12px;
3048 |     color: rgba(93, 103, 109, .9)
3049 |   }
3050 | 
3051 |   .popularize-app-zhibo .popularize-app-zhibo-content {
3052 |     width: 100%
3053 |   }
3054 | 
3055 |   .popularize-app-zhibo .popularize-app-zhibo-content > a > img {
3056 |     width: 100%;
3057 |     height: 100%
3058 |   }
3059 | 
3060 |   .popularize-app-zhibo .app-zhibo {
3061 |     margin-top: 10px;
3062 |     display: -ms-flexbox;
3063 |     display: flex;
3064 |     -ms-flex-align: center;
3065 |     align-items: center;
3066 |     -ms-flex-pack: justify;
3067 |     justify-content: space-between
3068 |   }
3069 | 
3070 |   .popularize-app-zhibo .app-zhibo .app-zhibo-icon {
3071 |     display: -ms-flexbox;
3072 |     display: flex;
3073 |     -ms-flex-align: center;
3074 |     align-items: center
3075 |   }
3076 | 
3077 |   .popularize-app-zhibo .app-zhibo .app-zhibo-icon .app-zhibo-icon-img {
3078 |     -ms-flex: 0 0 auto;
3079 |     flex: 0 0 auto;
3080 |     font-size: 0
3081 |   }
3082 | 
3083 |   .popularize-app-zhibo .app-zhibo .app-zhibo-icon .app-zhibo-icon-img > img {
3084 |     border-radius: 5px;
3085 |     width: 40px;
3086 |     height: 40px
3087 |   }
3088 | 
3089 |   .popularize-app-zhibo .app-zhibo .app-zhibo-icon .primary-text {
3090 |     margin-left: 5px;
3091 |     color: #4A4A4A;
3092 |     font-size: 15px;
3093 |     font-weight: 700;
3094 |     overflow: hidden;
3095 |     text-overflow: ellipsis;
3096 |     white-space: normal
3097 |   }
3098 | 
3099 |   .popularize-app-zhibo .app-zhibo .app-download {
3100 |     border-radius: 5px;
3101 |     background: #35A89B;
3102 |     color: #fff;
3103 |     width: 90px;
3104 |     height: 35px;
3105 |     display: -ms-flexbox;
3106 |     display: flex;
3107 |     -ms-flex-align: center;
3108 |     align-items: center;
3109 |     -ms-flex-pack: center;
3110 |     justify-content: center
3111 |   }
3112 | 
3113 |   .popularize-app-zhibo .app-zhibo .app-download > a {
3114 |     color: #fff;
3115 |     font-size: 14px;
3116 |     font-weight: 500
3117 |   }
3118 | 
3119 |   .popularize-content {
3120 |     -ms-flex: 1 1 auto;
3121 |     flex: 1 1 auto;
3122 |     margin-right: 10px
3123 |   }
3124 | 
3125 |   .popularize-content > .primary-text {
3126 |     color: #4A4A4A;
3127 |     font-size: 20px;
3128 |     font-weight: 700
3129 |   }
3130 | 
3131 |   .popularize-content > .secondary-text {
3132 |     font-size: 12px;
3133 |     color: rgba(93, 103, 109, .9)
3134 |   }
3135 | 
3136 |   .popularize-content .popularize-content-title {
3137 |     color: #1AA79A;
3138 |     font-size: 16px;
3139 |     font-weight: 700
3140 |   }
3141 | 
3142 |   .popularize-content .popularize-content-download {
3143 |     display: -ms-flexbox;
3144 |     display: flex;
3145 |     -ms-flex-direction: column;
3146 |     flex-direction: column;
3147 |     font-size: 12px;
3148 |     color: rgba(93, 103, 109, .9)
3149 |   }
3150 | 
3151 |   .popularize-actions > .download {
3152 |     height: 40px;
3153 |     line-height: 40px;
3154 |     cursor: pointer;
3155 |     color: #1AA79A;
3156 |     font-size: 20px
3157 |   }
3158 | 
3159 |   .popularize-actions > .download.download-block {
3160 |     background-color: #1AA79A;
3161 |     color: #fff;
3162 |     display: block;
3163 |     height: 50px;
3164 |     line-height: 50px;
3165 |     font-size: 16px;
3166 |     border-radius: 3px;
3167 |     box-shadow: 0 3px 0 0 rgba(0, 0, 0, .1)
3168 |   }
3169 | 
3170 |   .popularize-app-detail {
3171 |     padding: 20px 10px 40px
3172 |   }
3173 | 
3174 |   .popularize-app-detail .popularize-header {
3175 |     line-height: 40px
3176 |   }
3177 | 
3178 |   .popularize-app-detail .popularize-app {
3179 |     border-top: none;
3180 |     margin-bottom: 10px
3181 |   }
3182 | 
3183 |   .popularize-app-detail .popularize-actions {
3184 |     padding: 0 20px
3185 |   }
3186 | 
3187 |   .bottom-popularize {
3188 |     position: fixed;
3189 |     bottom: 0;
3190 |     left: 0;
3191 |     right: 0;
3192 |     z-index: 3;
3193 |     font-size: 0
3194 |   }
3195 | 
3196 |   @media screen and (max-height: 500px) {
3197 |     .bottom-popularize {
3198 |       position: static
3199 |     }
3200 |   }
3201 | 
3202 |   .visiable-moblie {
3203 |     display: none
3204 |   }
3205 | 
3206 |   @media screen and (max-width: 720px) {
3207 |     .main .ad-section {
3208 |       width: 100%
3209 |     }
3210 |   }
3211 | 
3212 |   @media screen and (max-width: 768px) {
3213 |     .combo .main, .main {
3214 |       width: 100%;
3215 |       min-width: 100%
3216 |     }
3217 |     .data_error form, .error form, .forbidden form, .passwd form {
3218 |       margin-bottom: 30px
3219 |     }
3220 |     .main .app-brief {
3221 |       text-align: center
3222 |     }
3223 |     .main .app-brief button {
3224 |       display: inline-block
3225 |     }
3226 |     .main .app-brief .bg-path, .main .app-brief .qrcode {
3227 |       display: none
3228 |     }
3229 |     .main .icon-container {
3230 |       width: 100%;
3231 |       height: auto;
3232 |       text-align: center
3233 |     }
3234 |     .main .icon-container .icon {
3235 |       position: static;
3236 |       display: inline-block
3237 |     }
3238 |     .main .footer .one-key-report {
3239 |       float: none;
3240 |       display: block;
3241 |       width: 80px;
3242 |       margin: 20px auto 0
3243 |     }
3244 |     .dialog {
3245 |       width: 100%;
3246 |       height: 100%;
3247 |       margin: 0;
3248 |       left: 0;
3249 |       top: 0;
3250 |       bottom: 0;
3251 |       border-radius: 0;
3252 |       padding-top: 30px;
3253 |       overflow-y: auto;
3254 |       transform: translate(0, 0)
3255 |     }
3256 |     .dialog.animate {
3257 |       transition: left .5s
3258 |     }
3259 |     .dialog .dialog-close {
3260 |       left: 10px;
3261 |       right: 0
3262 |     }
3263 |     .dialog .dialog-close .icon-close {
3264 |       display: none
3265 |     }
3266 |     .dialog .dialog-close .icon-return {
3267 |       display: block
3268 |     }
3269 |     .one-key-report-dialog .report-form {
3270 |       padding-top: 20px
3271 |     }
3272 |     .one-key-report-dialog .content-row label {
3273 |       margin-right: 10px
3274 |     }
3275 |     .one-key-report-dialog .content-row .custom-checkbox {
3276 |       margin-right: 5px
3277 |     }
3278 |     .one-key-report-dialog .dialog-action {
3279 |       padding-top: 20px;
3280 |       text-align: center
3281 |     }
3282 |     .one-key-report-dialog .dialog-action a.btn-report {
3283 |       float: none
3284 |     }
3285 |   }
3286 | 
3287 |   .wechat_tip, .wechat_tip > i {
3288 |     position: absolute;
3289 |     right: 10px
3290 |   }
3291 | 
3292 |   @media screen and (min-width: 1024px) {
3293 |     .main header .app-brief .icon-container:hover .qrcode {
3294 |       transform: scale(1.6);
3295 |       box-shadow: 0 1px 5px rgba(0, 0, 0, .3)
3296 |     }
3297 |   }
3298 | 
3299 |   .wechat_tip {
3300 |     display: -ms-flexbox;
3301 |     display: flex;
3302 |     -ms-flex-align: center;
3303 |     align-items: center;
3304 |     -ms-flex-pack: center;
3305 |     justify-content: center;
3306 |     background: #3AB2A7;
3307 |     color: #fff;
3308 |     font-size: 14px;
3309 |     font-weight: 500;
3310 |     width: 135px;
3311 |     height: 60px;
3312 |     border-radius: 10px;
3313 |     top: 15px
3314 |   }
3315 | 
3316 |   .wechat_tip > i {
3317 |     top: -10px;
3318 |     width: 0;
3319 |     height: 0;
3320 |     border-left: 6px solid transparent;
3321 |     border-right: 6px solid transparent;
3322 |     border-bottom: 12px solid #3AB2A7
3323 |   }
3324 | </style>
3325 | 


--------------------------------------------------------------------------------