├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── logo.png │ └── devices.min.css ├── main.js ├── router │ └── index.js ├── pages │ ├── index.vue │ ├── mobile.vue │ └── data.json ├── App.vue └── components │ ├── h5 │ ├── tree-list.vue │ ├── mobile.md │ └── tree.vue │ └── pc │ ├── tree-item.vue │ ├── tree-table.vue │ └── tree-table-bak.vue ├── push.sh ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html ├── dist ├── index.html └── static │ └── js │ ├── app.17679b43112f51b3d0b4.js │ ├── manifest.0db83edb5af4c77cbdde.js │ ├── 4.820537ed60a813e4bf9b.js │ ├── app.17679b43112f51b3d0b4.js.map │ ├── 1.0a60eb5b396c97c904c6.js │ ├── manifest.0db83edb5af4c77cbdde.js.map │ ├── 0.d05f8b57cd90e54f7237.js │ ├── 4.820537ed60a813e4bf9b.js.map │ ├── 1.0a60eb5b396c97c904c6.js.map │ └── 0.d05f8b57cd90e54f7237.js.map ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sijinglei/vue-tree-table/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /push.sh: -------------------------------------------------------------------------------- 1 | read -p "提交注释信息:" val 2 | echo $val 3 | git add --all 4 | git commit -m $val 5 | git pull 6 | git push origin master -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-tree-table 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | components: { App }, 14 | template: '' 15 | }) 16 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | vue-tree-table
-------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | routes: [ 8 | { 9 | path: '/', 10 | name: 'index', 11 | component: resolve => require.ensure([], () => resolve(require('@/pages/index.vue')), 'index') 12 | }, 13 | { 14 | path: '/mobile', 15 | name: 'mobile', 16 | component: resolve => require.ensure([], () => resolve(require('@/pages/mobile.vue')), 'mobile') 17 | } 18 | ] 19 | }) 20 | -------------------------------------------------------------------------------- /dist/static/js/app.17679b43112f51b3d0b4.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([3],{NHnr:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=t("7+uW"),o={render:function(){var n=this.$createElement,e=this._self._c||n;return e("div",{attrs:{id:"app"}},[e("router-view")],1)},staticRenderFns:[]};var u=t("VU/8")({name:"App"},o,!1,function(n){t("a/E0")},null,null).exports,a=t("/ocq");r.a.use(a.a);var c=new a.a({routes:[{path:"/",name:"index",component:function(n){return t.e(1).then(function(){return n(t("2NXm"))}.bind(null,t)).catch(t.oe)}},{path:"/mobile",name:"mobile",component:function(n){return t.e(0).then(function(){return n(t("Eu9t"))}.bind(null,t)).catch(t.oe)}}]});r.a.config.productionTip=!1,new r.a({el:"#app",router:c,components:{App:u},template:""})},"a/E0":function(n,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.17679b43112f51b3d0b4.js.map -------------------------------------------------------------------------------- /dist/static/js/manifest.0db83edb5af4c77cbdde.js: -------------------------------------------------------------------------------- 1 | !function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,a){for(var i,u,f,s=0,l=[];s 2 |
3 |

树表格实现

4 | 5 |
6 | 7 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tree-table", 3 | "version": "1.0.0", 4 | "description": "基于vue.[Cjs的树表格。", 5 | "author": "sijinglei <645001895@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "babel-runtime": "^6.26.0", 14 | "vue": "^2.5.2", 15 | "vue-router": "^3.0.1" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^7.1.2", 19 | "babel-core": "^6.22.1", 20 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 21 | "babel-loader": "^7.1.1", 22 | "babel-plugin-syntax-jsx": "^6.18.0", 23 | "babel-plugin-transform-runtime": "^6.22.0", 24 | "babel-plugin-transform-vue-jsx": "^3.5.0", 25 | "babel-preset-env": "^1.3.2", 26 | "babel-preset-stage-2": "^6.22.0", 27 | "less": "^2.7.2", 28 | "less-loader": "^4.0.5", 29 | "chalk": "^2.0.1", 30 | "copy-webpack-plugin": "^4.0.1", 31 | "css-loader": "^0.28.0", 32 | "extract-text-webpack-plugin": "^3.0.0", 33 | "file-loader": "^1.1.4", 34 | "friendly-errors-webpack-plugin": "^1.6.1", 35 | "html-webpack-plugin": "^2.30.1", 36 | "node-notifier": "^5.1.2", 37 | "optimize-css-assets-webpack-plugin": "^3.2.0", 38 | "ora": "^1.2.0", 39 | "portfinder": "^1.0.13", 40 | "postcss-import": "^11.0.0", 41 | "postcss-loader": "^2.0.8", 42 | "postcss-url": "^7.2.1", 43 | "rimraf": "^2.6.0", 44 | "semver": "^5.3.0", 45 | "shelljs": "^0.7.6", 46 | "uglifyjs-webpack-plugin": "^1.1.1", 47 | "url-loader": "^0.5.8", 48 | "vue-loader": "^13.3.0", 49 | "vue-style-loader": "^3.0.1", 50 | "vue-template-compiler": "^2.5.2", 51 | "webpack": "^3.6.0", 52 | "webpack-bundle-analyzer": "^2.9.0", 53 | "webpack-dev-server": "^2.9.1", 54 | "webpack-merge": "^4.1.0" 55 | }, 56 | "engines": { 57 | "node": ">= 6.0.0", 58 | "npm": ">= 3.0.0" 59 | }, 60 | "browserslist": [ 61 | "> 1%", 62 | "last 2 versions", 63 | "not ie <= 8" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 89 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | // Paths 43 | assetsRoot: path.resolve(__dirname, '../dist'), 44 | assetsSubDirectory: 'static', 45 | assetsPublicPath: './', 46 | 47 | /** 48 | * Source Maps 49 | */ 50 | 51 | productionSourceMap: true, 52 | // https://webpack.js.org/configuration/devtool/#production 53 | devtool: '#source-map', 54 | 55 | // Gzip off by default as many popular static hosts such as 56 | // Surge or Netlify already gzip all static assets for you. 57 | // Before setting to `true`, make sure to: 58 | // npm install --save-dev compression-webpack-plugin 59 | productionGzip: false, 60 | productionGzipExtensions: ['js', 'css'], 61 | 62 | // Run the build command with an extra argument to 63 | // View the bundle analyzer report after build finishes: 64 | // `npm run build --report` 65 | // Set to `true` or `false` to always turn it on or off 66 | bundleAnalyzerReport: process.env.npm_config_report 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/pages/mobile.vue: -------------------------------------------------------------------------------- 1 | 32 | 54 | 90 | -------------------------------------------------------------------------------- /dist/static/js/4.820537ed60a813e4bf9b.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([4],{"4SXU":function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{class:e.tdClass},[0!==e.root&&1!==e.nodes?s("span",{staticClass:"before-line",style:{left:e.model.bLeft+"px"}}):e._e(),e._v(" "),s("table",[s("tr",[s("td",{attrs:{colspan:e.colSpan}},[s("table",[s("tr",{staticClass:"leve",class:e.levelClass},[s("td",{staticClass:"td1"},[s("div",{staticClass:"td-title",on:{dblclick:function(t){e.handlerExpand(e.model)}}},[e.model.children.length>0?s("span",{staticClass:"tree-close",class:{"tree-open":e.model.isExpand},on:{click:function(t){e.handlerExpand(e.model)}}}):e._e(),e._v(" "),s("a",{staticClass:"ellipsis"},[s("i",{staticClass:"t-icon m-dep"}),e._v(" "),s("span",{attrs:{title:e.model.ObjectName}},[e._v(e._s(e.model.ObjectName))])])])]),e._v(" "),s("td",{staticClass:"td2"},[e._v("\n "+e._s(e.model.ResponsibleName)+"\n ")]),e._v(" "),s("td",{staticClass:"td3"},[e._v(e._s(e._f("formatDate")(e.model.CreateTime)))]),e._v(" "),s("td",{staticClass:"td4"},[s("span",{staticClass:"ellipsis",attrs:{title:e.model.Experience}},[e._v(e._s(e.model.Experience))])]),e._v(" "),s("td",{staticClass:"td5"},[e._v(e._s(e.model.BelongTo)+"天")]),e._v(" "),s("td",{staticClass:"td6"},[s("a",{staticClass:"reset",attrs:{href:"javascript:;"},on:{click:function(t){e.actionFunc(e.model)}}},[e._v("编辑")]),e._v(" "),s("i",{staticClass:"line"}),e._v(" "),s("a",{staticClass:"delete",attrs:{href:"javascript:;"},on:{click:function(t){e.deleteFunc(e.model)}}},[e._v("删除")])])])])])])]),e._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:e.model.isExpand,expression:"model.isExpand"}],staticClass:"other-node",class:e.otherNodeClass},e._l(e.model.children,function(t,n){return s("tree-item",{key:String("child_node"+n),attrs:{num:n,root:1,nodes:e.model.children.length,trees:e.trees,model:t},on:{actionFunc:e.actionFunc,deleteFunc:e.deleteFunc,handlerExpand:e.handlerExpand,"update:nodes":function(t){e.$set(e.model.children,"length",t)},"update:trees":function(t){e.trees=t},"update:model":function(e){t=e}}})}))])},staticRenderFns:[]},l=s("VU/8")({name:"treeItem",props:["model","num","nodes","root","trees"],data:function(){return{parentNodeModel:null}},computed:{colSpan:function(){return 0===this.root?"":6},tdClass:function(){return 0===this.root?"td-border":"not-border"},levelClass:function(){return this.model?"leve-"+this.model.level:""},childNodeClass:function(){return 0===this.root?"":"child-node"},otherNodeClass:function(){return this.model?"other-node-"+this.model.level:""}},watch:{},methods:{getParentNode:function(e){var t=this;!function s(n,l){n.forEach(function(n){n.id===e.id&&(t.parentNodeModel=l),n.children&&s(n.children,n)})}(this.trees,this.trees)},handlerExpand:function(e){this.$emit("handlerExpand",e)},deleteFunc:function(e){this.$emit("deleteFunc",e)},actionFunc:function(e){this.$emit("actionFunc",e)}},filters:{formatDate:function(e){return e}}},n,!1,null,null,null);t.default=l.exports}}); 2 | //# sourceMappingURL=4.820537ed60a813e4bf9b.js.map -------------------------------------------------------------------------------- /src/components/h5/tree-list.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 60 | 61 | 126 | -------------------------------------------------------------------------------- /src/components/h5/mobile.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 3 | > 前些日子做了一个pc端[树形表格](https://github.com/sijinglei/vue-tree-table)的功能，由于项目需要，移动端也要一个树形展示，虽然很不情愿，个人觉得在移动端做多级树结构不是不合理，操作也不方便，但是没办法，给产品交（si）流（bi）很久还是乖乖去做。 4 | #### 主要技术点：`vue子组件的递归实现及相关样式的实现` 5 | 话不多说，先看效果图（[在线预览](https://sijinglei.github.io/vue-tree-table/dist/#/mobile)）（数据和树表格是同一个）： 6 | *** 7 | ![](https://user-gold-cdn.xitu.io/2018/8/31/1658eaf2f154a5df?w=474&h=877&f=gif&s=311068) 8 | *** 9 | `注：上面这个iPhoneX效果图是用`[Devices.css](https://picturepan2.github.io/devices.css/)`实现的，模拟手机上显示效果。` 10 | #### 代码实现 11 | 12 | > tree-list.vue页面负责接收主页面传递的数据，然后将数据通过initTreeData方法组合成树结构需要的格式。 13 | ```bash 14 | initTreeData() { 15 | // 临时储存数据 16 | let tempData = JSON.parse(JSON.stringify(this.list)) 17 | let reduceDataFunc = (data, level) => { 18 | data.map((m, i) => { 19 | m.isExpand = m.isExpand || false 20 | m.children = m.children || [] 21 | m.level = level 22 | if (m.children.length > 0) { 23 | reduceDataFunc(m.children, level + 1) 24 | } 25 | }) 26 | } 27 | reduceDataFunc(tempData, 1) 28 | this.treeDataSource = tempData 29 | } 30 | ``` 31 | > tree.vue子组件用于组件循环嵌套 32 | ```html 33 | 69 | ``` 70 | `root=0`是代表第一级，`root=1`是表示非第一级
71 | `nodes`是表示子级的条数，这里主要用于一些样式（那条竖线）的控制
72 | `isExpand`是否展开/折叠树` 默认false`。此属性是在上述`initTreeData`方法中默认添加的
73 | `openExpand`方法是用于处理树的展开/折叠
74 | `delAction`方法用于删除（`暂时没有实现`）
75 | `HasChild `是验证当前数据层级是否还有子级数据
76 | `isOpenOrClose`根据当前`isExpand`返回是否展开/折叠后的样式名`open`or`close` 77 | ```bash 78 | computed: { 79 | HasChild() { 80 | return this.model.children.length > 0 81 | }, 82 | isOpenOrClose() { 83 | return this.model.isExpand ? 'open' : 'close' 84 | } 85 | } 86 | ``` 87 | 更多代码请查阅[ue-tree-table](https://github.com/sijinglei/vue-tree-table/blob/master/src/components/h5/mobile.md)，有不懂的可以留言。 88 | #### 后续扩展 89 | - 实现[滑块效果](https://github.com/sijinglei/vue-touch-test)，增加相关操作。 90 | - 实现下拉刷新，上拉加载更多。 91 | - 欢迎star，~~~ 92 | -------------------------------------------------------------------------------- /src/components/pc/tree-item.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 127 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 基于vue.js实现树形表格的封装（vue-tree-table） 2 | 3 | # 前言 4 | 5 | > 由于公司产品（基于vue.js）需要，要实现一个[树形表格](https://github.com/sijinglei/vue-tree-table)的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个，还望大家多多指教。 6 | #### 主要技术点：`vue子组件的递归实现及相关样式的实现` 7 | 8 | ## 树形表格实现 9 | 10 | - 效果图([Demo](https://sijinglei.github.io/vue-tree-table/dist/#/)) 11 | ![](https://user-gold-cdn.xitu.io/2018/7/24/164cb313dcbb3e95?w=1492&h=998&f=gif&s=1120746) 12 | - 主要代码 13 | > index.vue页面实现业务逻辑代码，比如树表格上面的一些操作按钮的实现及数据获取。 14 | > 15 | ``` html 16 | 26 | 52 | ``` 53 | ``` bash 54 | 原始数据`list`：是不包含子数据的数据结构，即没有层级结构，例如： 55 | [{id:111,parentId:0,name:'父及'},{id:111,parentId:111,name:'子级'}...]，通过parentId来获取对应父子层级结构 56 | `treeDataSource`：是树表格需要的数据结构，例如： 57 | [{id:0,name:'父及',children:[{id:10,name:'子级',children:[]}]},...] 58 | ``` 59 | > 如果后台返回给你的是原始数据格式，就可以用下面方法封装成树表格可以使用的数据结构： 60 | ``` bash 61 | getTreeData() { 62 | // 取父节点 63 | let parentArr = this.list.filter(l => l.parentId === 0) 64 | this.treeDataSource = this.getTreeData(this.list, parentArr) 65 | }, 66 | // 这里处理没有children结构的数据 67 | getTreeData(list, dataArr) { 68 | dataArr.map((pNode, i) => { 69 | let childObj = [] 70 | list.map((cNode, j) => { 71 | if (pNode.Id === cNode.parentId) { 72 | childObj.push(cNode) 73 | } 74 | }) 75 | pNode.children = childObj 76 | if (childObj.length > 0) { 77 | this.getTreeData(list, childObj) 78 | } 79 | }) 80 | return dataArr 81 | } 82 | ``` 83 | > tree-table.vue页面。此页面是实现树表格的关健页面。主要代码如下： 84 | ``` html 85 | 130 | ``` 131 | 首先这里的子组件`tree-item`没有在页面上有引入，但是也可以正常使用。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。代码如下（由于代码太多，先贴图说明吧，[点击这里](https://github.com/sijinglei/vue-tree-table/blob/master/src/components/tree-table.vue)可以看源码）： 132 | 133 | ![](https://user-gold-cdn.xitu.io/2018/7/24/164cb5dddee5b208?w=672&h=862&f=png&s=48872) 134 | 135 | 这里子组件看起来是不是挺奇怪的，但是为了递归他本身，暂时也只想到这种办法。如果有更好的办法，欢迎留言指正。
136 | 那么，树表格的结构实现在哪里呢？？对，就是在子组件的模版(`template`)里面，这里就不贴代码了，可以移步到[源码](https://github.com/sijinglei/vue-tree-table/blob/master/src/components/tree-table.vue)查看。
137 | - 感谢 138 | > 收到[favourli](https://juejin.im/user/5b0d3e2d5188251558575c17)的指正，现已将原有写法更新,采用[递归组件](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8)来实现，这样页面看起来就更清晰。 139 | ``` html 140 | components: { 141 | treeItem: () => import('./tree-item.vue') 142 | } 143 | ``` 144 | ---- 145 | > 补充一点：不要只看js部分，css部分才是这个树表格的关健所在。当然里面我采用了大量的计算属性去判断各种样式的展示，还有一种方法，就是在`initTreeData`方法里面去实现，这个方法就是处理或添加一些我们树表格所使用的信息。比如我现在在里面实现的层级线的偏移量`m.bLeft = level === 1 ? 34 : (level - 2) * 16 + 34` 这个计算如果没有看明白，可以留言。 146 | 147 | 最后，此篇乃我的开篇之作，如有问题，还请多多包含，多多指教！！！顺便给我好久没有更新的博客打个广告, 148 | 欢迎点击（[一座城池](http://yizuocity.com/)） 149 | - 源码地址[github](https://github.com/sijinglei/vue-tree-table)，欢迎star。 150 | > 参考资源[隔壁家的老黄](https://www.cnblogs.com/ychl/p/6075106.html) 151 | 152 | 153 | 154 | 155 | ## Build Setup 156 | 157 | ``` bash 158 | # install dependencies 159 | npm install 160 | 161 | # serve with hot reload at localhost:8080 162 | npm run dev 163 | 164 | # build for production with minification 165 | npm run build 166 | 167 | # build for production and view the bundle analyzer report 168 | npm run build --report 169 | ``` 170 | 171 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 172 | -------------------------------------------------------------------------------- /src/components/h5/tree.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 76 | 77 | 138 | -------------------------------------------------------------------------------- /dist/static/js/app.17679b43112f51b3d0b4.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/App.vue?5815","webpack:///./src/App.vue","webpack:///src/App.vue","webpack:///./src/router/index.js","webpack:///./src/main.js"],"names":["selectortype_template_index_0_src_App","render","_h","this","$createElement","_c","_self","attrs","id","staticRenderFns","src_App","__webpack_require__","normalizeComponent","name","ssrContext","vue_esm","use","vue_router_esm","router","routes","path","component","resolve","e","then","bind","catch","oe","config","productionTip","el","components","App","template"],"mappings":"qHAGAA,GADiBC,OAFjB,WAA0B,IAAaC,EAAbC,KAAaC,eAA0BC,EAAvCF,KAAuCG,MAAAD,IAAAH,EAAwB,OAAAG,EAAA,OAAiBE,OAAOC,GAAA,SAAYH,EAAA,oBAE5GI,oBCCjB,IAuBAC,EAvBAC,EAAA,OAcAC,ECTAC,KAAA,ODWAb,GATA,EAVA,SAAAc,GACAH,EAAA,SAaA,KAEA,MAUA,oBEvBAI,EAAA,EAAIC,IAAIC,EAAA,GAER,IAAAC,EAAA,IAAmBD,EAAA,GACjBE,SAEIC,KAAM,IACNP,KAAM,QACNQ,UAAY,SAAAC,GAAA,OAAWX,EAAAY,EAAA,GAAAC,KAAA,WAAmB,OAAMF,EAAQX,EAAQ,UAAzCc,KAAA,KAAAd,IAAAe,MAAAf,EAAAgB,OAGvBP,KAAM,UACNP,KAAM,SACNQ,UAAY,SAAAC,GAAA,OAAWX,EAAAY,EAAA,GAAAC,KAAA,WAAmB,OAAMF,EAAQX,EAAQ,UAAzCc,KAAA,KAAAd,IAAAe,MAAAf,EAAAgB,SCT7BZ,EAAA,EAAIa,OAAOC,eAAgB,EAG3B,IAAId,EAAA,GACFe,GAAI,OACJZ,SACAa,YAAcC,IAAAtB,GACduB,SAAU","file":"static/js/app.17679b43112f51b3d0b4.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('router-view')],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-edfea876\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-edfea876\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-edfea876\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","import Vue from 'vue'\nimport Router from 'vue-router'\n\nVue.use(Router)\n\nexport default new Router({\n routes: [\n {\n path: '/',\n name: 'index',\n component: resolve => require.ensure([], () => resolve(require('@/pages/index.vue')), 'index')\n },\n {\n path: '/mobile',\n name: 'mobile',\n component: resolve => require.ensure([], () => resolve(require('@/pages/mobile.vue')), 'mobile')\n }\n ]\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/router/index.js","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\nimport router from './router'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n router,\n components: { App },\n template: ''\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/1.0a60eb5b396c97c904c6.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"2NXm":function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=t("dQKT"),a=t.n(i),r=t("mvHQ"),c=t.n(r),o={name:"treeTable",props:["list"],data:function(){return{isDesc:!1,treeDataSource:[]}},watch:{list:{handler:function(){console.log("ddddd"),this.initTreeData()},deep:!0},isDesc:function(e,n){this.$emit("orderByFunc",e)}},computed:{},methods:{initTreeData:function(){console.log("处理前的:",JSON.parse(c()(this.list)));var e=JSON.parse(c()(this.list));!function e(n,t){n.map(function(n,i){n.isExpand=!1,n.children=n.children||[],n.level=t,n.bLeft=1===t?34:16*(t-2)+34,n.Experience=n.Experience||"无",n.children.length>0&&e(n.children,t+1)})}(e,1),console.log("处理后的:",e),this.treeDataSource=e},getMore:function(){alert("滚动到底部加载更多"),$("#scrollWrap").mCustomScrollbar("scrollTo","top",{scrollInertia:0})},actionFunc:function(e){this.$emit("actionFunc",e)},deleteFunc:function(e){this.$emit("deleteFunc",e)},handlerExpand:function(e){this.$emit("handlerExpand",e)}},components:{treeItem:function(){return t.e(4).then(t.bind(null,"4SXU"))}},mounted:function(){var e=this;e.$nextTick(function(){e.initTreeData()})}},l={render:function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"tree-table"},[t("div",{staticClass:"tree-head"},[t("table",[t("tr",[t("td",{staticClass:"td1"},[e._v("职位名称")]),e._v(" "),t("td",{staticClass:"td2"},[e._v("负责人")]),e._v(" "),t("td",{staticClass:"td3",on:{click:function(n){e.isDesc=!e.isDesc}}},[e._v("\n\t\t\t\t\t\t创建时间\n\t\t\t\t\t\t"),t("div",{staticClass:"arrow"},[t("span",{staticClass:"up-arrow",class:{sort:e.isDesc}}),e._v(" "),t("span",{staticClass:"down-arrow",class:{sort:!e.isDesc}})])]),e._v(" "),t("td",{staticClass:"td4"},[e._v("工作经验")]),e._v(" "),t("td",{staticClass:"td5"},[e._v("发布时间")]),e._v(" "),t("td",{staticClass:"td6"},[e._v("操作")])])])]),e._v(" "),t("div",{staticClass:"tree-wrap",attrs:{id:"scrollWrap"}},[t("div",{staticClass:"tree-body"},[e.treeDataSource.length>0?t("table",[t("tbody",[t("tr",[t("td",e._l(e.treeDataSource,function(n,i){return t("tree-item",{key:"root_node_"+i,attrs:{root:0,num:i,nodes:e.treeDataSource.length,trees:e.treeDataSource,model:n},on:{actionFunc:e.actionFunc,deleteFunc:e.deleteFunc,handlerExpand:e.handlerExpand,"update:trees":function(n){e.treeDataSource=n},"update:model":function(e){n=e}}})}))])])]):e._e()])])])},staticRenderFns:[]};var s={data:function(){return{treeDataSource:a.a}},components:{treeTable:t("VU/8")(o,l,!1,function(e){t("QPCH")},null,null).exports},methods:{orderByFunc:function(e){alert("排序"),alert(e)},actionFunc:function(e){alert("编辑")},deleteFunc:function(e){alert("删除")},handlerExpand:function(e){console.log("展开/收缩"),e.isExpand=!e.isExpand}}},d={render:function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"contains"},[t("h1",[e._v("树表格实现")]),e._v(" "),t("tree-table",{ref:"recTree",attrs:{list:e.treeDataSource},on:{"update:list":function(n){e.treeDataSource=n},actionFunc:e.actionFunc,deleteFunc:e.deleteFunc,handlerExpand:e.handlerExpand,orderByFunc:e.orderByFunc}})],1)},staticRenderFns:[]};var m=t("VU/8")(s,d,!1,function(e){t("qmJQ")},null,null);n.default=m.exports},FeBl:function(e,n){var t=e.exports={version:"2.5.7"};"number"==typeof __e&&(__e=t)},QPCH:function(e,n){},dQKT:function(e,n){e.exports=[{Id:1,ObjectName:"技术",BelongTo:26,CreateTime:"2018/07/24",ResponsibleName:"刘备",Experience:"不要求",children:[{Id:2,ObjectName:"后端开发",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"关羽",Experience:"5-10年",children:[{Id:2,ObjectName:"java",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"典韦",Experience:"3-5年",children:[]},{Id:2,ObjectName:"数据挖掘",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"吕布",Experience:"5-10年",children:[]},{Id:2,ObjectName:"C#",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"马可波罗",Experience:"5-10年",children:[]}]},{Id:3,ObjectName:"前端开发",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"赵云",Experience:"3-5年",children:[{Id:2,ObjectName:"web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"武则天",Experience:"3-5年",children:[{Id:2,ObjectName:"初级web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"王昭君",Experience:"3年以下",children:[]},{Id:2,ObjectName:"中级web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"王昭君",Experience:"3-5年",children:[]},{Id:2,ObjectName:"高级web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"王昭君",Experience:"5-10年",children:[]}]},{Id:2,ObjectName:"html5",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"小乔",Experience:"5-10年",children:[]},{Id:2,ObjectName:"javascript",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"女娲",Experience:"5-10年",children:[]}]},{Id:9,ObjectName:"测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"张飞",Experience:"3年以下",children:[{Id:2,ObjectName:"测试工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"大乔",Experience:"3-5年",children:[]},{Id:2,ObjectName:"自动化测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"蔡文姬",Experience:"5-10年",children:[]},{Id:2,ObjectName:"功能测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"妲己",Experience:"5-10年",children:[]},{Id:2,ObjectName:"性能测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"刘婵",Experience:"5-10年",children:[]}]},{Id:12,ObjectName:"运维",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"诸葛亮",Experience:"10年以上",children:[{Id:2,ObjectName:"运维工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"后羿",Experience:"3-5年",children:[]},{Id:2,ObjectName:"运维开发工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"鲁班",Experience:"5-10年",children:[]},{Id:2,ObjectName:"系统工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"黄忠",Experience:"5-10年",children:[]},{Id:2,ObjectName:"网络安全",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"孙尚香",Experience:"5-10年",children:[]}]}]},{Id:13,ObjectName:"设计",BelongTo:10,CreateTime:"2018/07/24",ResponsibleName:"曹操",Experience:"不要求",children:[{Id:14,ObjectName:"视觉设计",BelongTo:11,CreateTime:"2018/07/24",ResponsibleName:"花木兰",Experience:"5-10年",children:[{Id:15,ObjectName:"视觉设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"露娜",Experience:"5-10年",children:[]},{Id:15,ObjectName:"网页设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"不知火舞",Experience:"5-10年",children:[]}]},{Id:16,ObjectName:"交互设计",BelongTo:11,CreateTime:"2018/07/24",ResponsibleName:"阿珂",Experience:"3-5年",children:[{Id:15,ObjectName:"交互设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"李白",Experience:"5-10年",children:[]},{Id:15,ObjectName:"无线交互设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"兰陵王",Experience:"5-10年",children:[]}]},{Id:17,ObjectName:"用户研究",BelongTo:11,CreateTime:"2018/07/24",ResponsibleName:"韩信",Experience:"3-5年",children:[{Id:15,ObjectName:"数据分析师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"百里玄策 ",Experience:"3-5年",children:[]},{Id:15,ObjectName:"用户研究员",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"宫本武藏",Experience:"3-5年",children:[]}]}]}]},mvHQ:function(e,n,t){e.exports={default:t("qkKv"),__esModule:!0}},qkKv:function(e,n,t){var i=t("FeBl"),a=i.JSON||(i.JSON={stringify:JSON.stringify});e.exports=function(e){return a.stringify.apply(a,arguments)}},qmJQ:function(e,n){}}); 2 | //# sourceMappingURL=1.0a60eb5b396c97c904c6.js.map -------------------------------------------------------------------------------- /dist/static/js/manifest.0db83edb5af4c77cbdde.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap 33052fd296e25c2f21e7"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","5","exports","module","l","e","installedChunkData","Promise","resolve","promise","reject","head","document","getElementsByTagName","script","createElement","type","charset","async","timeout","nc","setAttribute","src","p","0","1","4","setTimeout","onScriptComplete","onerror","onload","clearTimeout","chunk","Error","undefined","appendChild","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAA,SAAApB,GACA,IAAAqB,EAAAhB,EAAAL,GACA,OAAAqB,EACA,WAAAC,QAAA,SAAAC,GAA0CA,MAI1C,GAAAF,EACA,OAAAA,EAAA,GAIA,IAAAG,EAAA,IAAAF,QAAA,SAAAC,EAAAE,GACAJ,EAAAhB,EAAAL,IAAAuB,EAAAE,KAEAJ,EAAA,GAAAG,EAGA,IAAAE,EAAAC,SAAAC,qBAAA,WACAC,EAAAF,SAAAG,cAAA,UACAD,EAAAE,KAAA,kBACAF,EAAAG,QAAA,QACAH,EAAAI,OAAA,EACAJ,EAAAK,QAAA,KAEArB,EAAAsB,IACAN,EAAAO,aAAA,QAAAvB,EAAAsB,IAEAN,EAAAQ,IAAAxB,EAAAyB,EAAA,aAAAtC,EAAA,KAAwEuC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,wBAAiFzC,GAAA,MACzJ,IAAAkC,EAAAQ,WAAAC,EAAA,MAEA,SAAAA,IAEAd,EAAAe,QAAAf,EAAAgB,OAAA,KACAC,aAAAZ,GACA,IAAAa,EAAA1C,EAAAL,GACA,IAAA+C,IACAA,GACAA,EAAA,OAAAC,MAAA,iBAAAhD,EAAA,aAEAK,EAAAL,QAAAiD,GAKA,OAfApB,EAAAe,QAAAf,EAAAgB,OAAAF,EAaAjB,EAAAwB,YAAArB,GAEAL,GAIAX,EAAAsC,EAAAxC,EAGAE,EAAAuC,EAAArC,EAGAF,EAAAwC,EAAA,SAAApC,EAAAqC,EAAAC,GACA1C,EAAA2C,EAAAvC,EAAAqC,IACA/C,OAAAkD,eAAAxC,EAAAqC,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMA1C,EAAAgD,EAAA,SAAA3C,GACA,IAAAqC,EAAArC,KAAA4C,WACA,WAA2B,OAAA5C,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAwC,EAAAE,EAAA,IAAAA,GACAA,GAIA1C,EAAA2C,EAAA,SAAAO,EAAAC,GAAsD,OAAAzD,OAAAC,UAAAC,eAAAC,KAAAqD,EAAAC,IAGtDnD,EAAAyB,EAAA,KAGAzB,EAAAoD,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.0db83edb5af4c77cbdde.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t5: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = \"text/javascript\";\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"d05f8b57cd90e54f7237\",\"1\":\"0a60eb5b396c97c904c6\",\"4\":\"820537ed60a813e4bf9b\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 33052fd296e25c2f21e7"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/0.d05f8b57cd90e54f7237.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{Eu9t:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n("dQKT"),a=n.n(i),s=n("mvHQ"),o=n.n(s),l={name:"treeItem",props:["model","num","nodes","root"],data:function(){return{treeDataSource:[]}},watch:{model:{handler:function(){console.log("监听子组件：",this.model)},deep:!0}},computed:{HasChild:function(){return this.model.children.length>0},isOpenOrClose:function(){return this.model.isExpand?"open":"close"}},methods:{openExpand:function(e){console.log(e),this.$emit("openExpand",e)},delAction:function(e){this.$emit("delAction",e)}}},r={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",{staticClass:"node list-item",attrs:{"data-type":"0"}},[0!==e.root&&1!==e.nodes?[n("span",{staticClass:"line"})]:e._e(),e._v(" "),n("div",{staticClass:"contanier flex"},[n("div",{staticClass:"small-panel flex"},[n("span",{staticClass:"label"},[e._v("[负责人]")]),e._v(" "),n("span",{staticClass:"txt"},[e._v(e._s(e.model.ResponsibleName))])]),e._v(" "),n("div",{staticClass:"body-panel flex"},[n("div",{staticClass:"title"},[e.HasChild?n("i",{staticClass:"arrow",class:e.isOpenOrClose,on:{click:function(t){e.openExpand(e.model)}}}):e._e(),e._v(" "),n("i",{staticClass:"t-icon m-dep"}),e._v("\n "+e._s(e.model.ObjectName)+"\n ")]),e._v(" "),n("div",{staticClass:"time"},[e._v(e._s(e.model.BelongTo)+"天前")])]),e._v(" "),n("div",{staticClass:"bottom-panel flex"},[n("div",{staticClass:"left-wrap flex"},[n("span",{staticClass:"label"},[e._v("[工作经验]")]),e._v("\n |\n "),n("span",{staticClass:"txt"},[e._v(e._s(e.model.Experience))])]),e._v(" "),n("div",{staticClass:"right-wrap"},[n("span",{staticClass:"txt"},[e._v(e._s(e.model.CreateTime))])])])]),e._v(" "),e.HasChild&&this.model.isExpand?[n("ul",{staticClass:"box"},e._l(e.model.children,function(t,i){return n("tree-item",{key:String("child_node"+i),attrs:{num:i,root:1,nodes:e.model.children.length,model:t},on:{openExpand:e.openExpand,delAction:e.delAction,"update:nodes":function(t){e.$set(e.model.children,"length",t)},"update:model":function(e){t=e}}})}))]:e._e()],2)},staticRenderFns:[]};var c=n("VU/8")(l,r,!1,function(e){n("Kjok")},null,null).exports,d={props:{list:Array},data:function(){return{treeDataSource:[]}},components:{treeItem:c},created:function(){this.getList()},mounted:function(){},methods:{delAction:function(){},getList:function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.initTreeData()},initTreeData:function(){var e=JSON.parse(o()(this.list));!function e(t,n){t.map(function(t,i){t.isExpand=t.isExpand||!1,t.children=t.children||[],t.level=n,t.children.length>0&&e(t.children,n+1)})}(e,1),this.treeDataSource=e},openExpand:function(e){console.log(e),e.isExpand=!e.isExpand}}},m={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"recoveryPage"},[n("div",{staticClass:"tree-main"},[n("ul",{staticClass:"tree-wrap"},e._l(e.treeDataSource,function(t,i){return n("tree-item",{key:"root_"+i,attrs:{root:0,num:i,nodes:e.treeDataSource.length,model:t},on:{openExpand:e.openExpand,delAction:e.delAction,"update:model":function(e){t=e}}})}))])])},staticRenderFns:[]};var p={data:function(){return{treeDataSource:a.a}},computed:{},created:function(){},methods:{},components:{treeList:n("VU/8")(d,m,!1,function(e){n("G+yi")},null,null).exports}},h={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"marvel-device iphone-x"},[e._m(0),e._v(" "),n("div",{staticClass:"top-bar"}),e._v(" "),n("div",{staticClass:"sleep"}),e._v(" "),n("div",{staticClass:"bottom-bar"}),e._v(" "),n("div",{staticClass:"volume"}),e._v(" "),e._m(1),e._v(" "),n("div",{staticClass:"inner-shadow"}),e._v(" "),n("div",{staticClass:"screen"},[n("div",{staticClass:"container"},[e._m(2),e._v(" "),n("ul",{staticClass:"tree-wrap"},[n("tree-list",{attrs:{list:e.treeDataSource}})],1)])])])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"notch"},[t("div",{staticClass:"camera"}),this._v(" "),t("div",{staticClass:"speaker"})])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"overflow"},[t("div",{staticClass:"shadow shadow--tr"}),this._v(" "),t("div",{staticClass:"shadow shadow--tl"}),this._v(" "),t("div",{staticClass:"shadow shadow--br"}),this._v(" "),t("div",{staticClass:"shadow shadow--bl"})])},function(){var e=this.$createElement,t=this._self._c||e;return t("header",{staticClass:"header"},[t("div",[this._v("我是移动端树\n "),t("a",{attrs:{href:"https://sijinglei.github.io/vue-tree-table/dist/#/"}},[this._v("（pc端vue-tree-table）")])])])}]};var u=n("VU/8")(p,h,!1,function(e){n("d3db")},null,null);t.default=u.exports},FeBl:function(e,t){var n=e.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},"G+yi":function(e,t){},Kjok:function(e,t){},d3db:function(e,t){},dQKT:function(e,t){e.exports=[{Id:1,ObjectName:"技术",BelongTo:26,CreateTime:"2018/07/24",ResponsibleName:"刘备",Experience:"不要求",children:[{Id:2,ObjectName:"后端开发",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"关羽",Experience:"5-10年",children:[{Id:2,ObjectName:"java",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"典韦",Experience:"3-5年",children:[]},{Id:2,ObjectName:"数据挖掘",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"吕布",Experience:"5-10年",children:[]},{Id:2,ObjectName:"C#",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"马可波罗",Experience:"5-10年",children:[]}]},{Id:3,ObjectName:"前端开发",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"赵云",Experience:"3-5年",children:[{Id:2,ObjectName:"web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"武则天",Experience:"3-5年",children:[{Id:2,ObjectName:"初级web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"王昭君",Experience:"3年以下",children:[]},{Id:2,ObjectName:"中级web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"王昭君",Experience:"3-5年",children:[]},{Id:2,ObjectName:"高级web前端",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"王昭君",Experience:"5-10年",children:[]}]},{Id:2,ObjectName:"html5",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"小乔",Experience:"5-10年",children:[]},{Id:2,ObjectName:"javascript",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"女娲",Experience:"5-10年",children:[]}]},{Id:9,ObjectName:"测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"张飞",Experience:"3年以下",children:[{Id:2,ObjectName:"测试工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"大乔",Experience:"3-5年",children:[]},{Id:2,ObjectName:"自动化测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"蔡文姬",Experience:"5-10年",children:[]},{Id:2,ObjectName:"功能测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"妲己",Experience:"5-10年",children:[]},{Id:2,ObjectName:"性能测试",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"刘婵",Experience:"5-10年",children:[]}]},{Id:12,ObjectName:"运维",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"诸葛亮",Experience:"10年以上",children:[{Id:2,ObjectName:"运维工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"后羿",Experience:"3-5年",children:[]},{Id:2,ObjectName:"运维开发工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"鲁班",Experience:"5-10年",children:[]},{Id:2,ObjectName:"系统工程师",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"黄忠",Experience:"5-10年",children:[]},{Id:2,ObjectName:"网络安全",BelongTo:24,CreateTime:"2018/07/24",ResponsibleName:"孙尚香",Experience:"5-10年",children:[]}]}]},{Id:13,ObjectName:"设计",BelongTo:10,CreateTime:"2018/07/24",ResponsibleName:"曹操",Experience:"不要求",children:[{Id:14,ObjectName:"视觉设计",BelongTo:11,CreateTime:"2018/07/24",ResponsibleName:"花木兰",Experience:"5-10年",children:[{Id:15,ObjectName:"视觉设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"露娜",Experience:"5-10年",children:[]},{Id:15,ObjectName:"网页设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"不知火舞",Experience:"5-10年",children:[]}]},{Id:16,ObjectName:"交互设计",BelongTo:11,CreateTime:"2018/07/24",ResponsibleName:"阿珂",Experience:"3-5年",children:[{Id:15,ObjectName:"交互设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"李白",Experience:"5-10年",children:[]},{Id:15,ObjectName:"无线交互设计师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"兰陵王",Experience:"5-10年",children:[]}]},{Id:17,ObjectName:"用户研究",BelongTo:11,CreateTime:"2018/07/24",ResponsibleName:"韩信",Experience:"3-5年",children:[{Id:15,ObjectName:"数据分析师",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"百里玄策 ",Experience:"3-5年",children:[]},{Id:15,ObjectName:"用户研究员",BelongTo:12,CreateTime:"2018/07/24",ResponsibleName:"宫本武藏",Experience:"3-5年",children:[]}]}]}]},mvHQ:function(e,t,n){e.exports={default:n("qkKv"),__esModule:!0}},qkKv:function(e,t,n){var i=n("FeBl"),a=i.JSON||(i.JSON={stringify:JSON.stringify});e.exports=function(e){return a.stringify.apply(a,arguments)}}}); 2 | //# sourceMappingURL=0.d05f8b57cd90e54f7237.js.map -------------------------------------------------------------------------------- /src/pages/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Id": 1, 4 | "ObjectName": "技术", 5 | "BelongTo": 26, 6 | "CreateTime": "2018/07/24", 7 | "ResponsibleName": "刘备", 8 | "Experience": "不要求", 9 | "children": [ 10 | { 11 | "Id": 2, 12 | "ObjectName": "后端开发", 13 | "BelongTo": 24, 14 | "CreateTime": "2018/07/24", 15 | "ResponsibleName": "关羽", 16 | "Experience": "5-10年", 17 | "children": [ 18 | { 19 | "Id": 2, 20 | "ObjectName": "java", 21 | "BelongTo": 24, 22 | "CreateTime": "2018/07/24", 23 | "ResponsibleName": "典韦", 24 | "Experience": "3-5年", 25 | "children": [] 26 | }, 27 | { 28 | "Id": 2, 29 | "ObjectName": "数据挖掘", 30 | "BelongTo": 24, 31 | "CreateTime": "2018/07/24", 32 | "ResponsibleName": "吕布", 33 | "Experience": "5-10年", 34 | "children": [] 35 | }, 36 | { 37 | "Id": 2, 38 | "ObjectName": "C#", 39 | "BelongTo": 24, 40 | "CreateTime": "2018/07/24", 41 | "ResponsibleName": "马可波罗", 42 | "Experience": "5-10年", 43 | "children": [] 44 | } 45 | ] 46 | }, 47 | { 48 | "Id": 3, 49 | "ObjectName": "前端开发", 50 | "BelongTo": 24, 51 | "CreateTime": "2018/07/24", 52 | "ResponsibleName": "赵云", 53 | "Experience": "3-5年", 54 | "children": [ 55 | { 56 | "Id": 2, 57 | "ObjectName": "web前端", 58 | "BelongTo": 24, 59 | "CreateTime": "2018/07/24", 60 | "ResponsibleName": "武则天", 61 | "Experience": "3-5年", 62 | "children": [ 63 | { 64 | "Id": 2, 65 | "ObjectName": "初级web前端", 66 | "BelongTo": 24, 67 | "CreateTime": "2018/07/24", 68 | "ResponsibleName": "王昭君", 69 | "Experience": "3年以下", 70 | "children": [] 71 | }, 72 | { 73 | "Id": 2, 74 | "ObjectName": "中级web前端", 75 | "BelongTo": 24, 76 | "CreateTime": "2018/07/24", 77 | "ResponsibleName": "王昭君", 78 | "Experience": "3-5年", 79 | "children": [] 80 | }, 81 | { 82 | "Id": 2, 83 | "ObjectName": "高级web前端", 84 | "BelongTo": 24, 85 | "CreateTime": "2018/07/24", 86 | "ResponsibleName": "王昭君", 87 | "Experience": "5-10年", 88 | "children": [] 89 | } 90 | ] 91 | }, 92 | { 93 | "Id": 2, 94 | "ObjectName": "html5", 95 | "BelongTo": 24, 96 | "CreateTime": "2018/07/24", 97 | "ResponsibleName": "小乔", 98 | "Experience": "5-10年", 99 | "children": [] 100 | }, 101 | { 102 | "Id": 2, 103 | "ObjectName": "javascript", 104 | "BelongTo": 24, 105 | "CreateTime": "2018/07/24", 106 | "ResponsibleName": "女娲", 107 | "Experience": "5-10年", 108 | "children": [] 109 | } 110 | ] 111 | }, 112 | { 113 | "Id": 9, 114 | "ObjectName": "测试", 115 | "BelongTo": 24, 116 | "CreateTime": "2018/07/24", 117 | "ResponsibleName": "张飞", 118 | "Experience": "3年以下", 119 | "children": [ 120 | { 121 | "Id": 2, 122 | "ObjectName": "测试工程师", 123 | "BelongTo": 24, 124 | "CreateTime": "2018/07/24", 125 | "ResponsibleName": "大乔", 126 | "Experience": "3-5年", 127 | "children": [] 128 | }, 129 | { 130 | "Id": 2, 131 | "ObjectName": "自动化测试", 132 | "BelongTo": 24, 133 | "CreateTime": "2018/07/24", 134 | "ResponsibleName": "蔡文姬", 135 | "Experience": "5-10年", 136 | "children": [] 137 | }, 138 | { 139 | "Id": 2, 140 | "ObjectName": "功能测试", 141 | "BelongTo": 24, 142 | "CreateTime": "2018/07/24", 143 | "ResponsibleName": "妲己", 144 | "Experience": "5-10年", 145 | "children": [] 146 | }, 147 | { 148 | "Id": 2, 149 | "ObjectName": "性能测试", 150 | "BelongTo": 24, 151 | "CreateTime": "2018/07/24", 152 | "ResponsibleName": "刘婵", 153 | "Experience": "5-10年", 154 | "children": [] 155 | } 156 | ] 157 | }, 158 | { 159 | "Id": 12, 160 | "ObjectName": "运维", 161 | "BelongTo": 24, 162 | "CreateTime": "2018/07/24", 163 | "ResponsibleName": "诸葛亮", 164 | "Experience": "10年以上", 165 | "children": [ 166 | { 167 | "Id": 2, 168 | "ObjectName": "运维工程师", 169 | "BelongTo": 24, 170 | "CreateTime": "2018/07/24", 171 | "ResponsibleName": "后羿", 172 | "Experience": "3-5年", 173 | "children": [] 174 | }, 175 | { 176 | "Id": 2, 177 | "ObjectName": "运维开发工程师", 178 | "BelongTo": 24, 179 | "CreateTime": "2018/07/24", 180 | "ResponsibleName": "鲁班", 181 | "Experience": "5-10年", 182 | "children": [] 183 | }, 184 | { 185 | "Id": 2, 186 | "ObjectName": "系统工程师", 187 | "BelongTo": 24, 188 | "CreateTime": "2018/07/24", 189 | "ResponsibleName": "黄忠", 190 | "Experience": "5-10年", 191 | "children": [] 192 | }, 193 | { 194 | "Id": 2, 195 | "ObjectName": "网络安全", 196 | "BelongTo": 24, 197 | "CreateTime": "2018/07/24", 198 | "ResponsibleName": "孙尚香", 199 | "Experience": "5-10年", 200 | "children": [] 201 | } 202 | ] 203 | } 204 | ] 205 | }, 206 | { 207 | "Id": 13, 208 | "ObjectName": "设计", 209 | "BelongTo": 10, 210 | "CreateTime": "2018/07/24", 211 | "ResponsibleName": "曹操", 212 | "Experience": "不要求", 213 | "children": [ 214 | { 215 | "Id": 14, 216 | "ObjectName": "视觉设计", 217 | "BelongTo": 11, 218 | "CreateTime": "2018/07/24", 219 | "ResponsibleName": "花木兰", 220 | "Experience": "5-10年", 221 | "children": [ 222 | { 223 | "Id": 15, 224 | "ObjectName": "视觉设计师", 225 | "BelongTo": 12, 226 | "CreateTime": "2018/07/24", 227 | "ResponsibleName": "露娜", 228 | "Experience": "5-10年", 229 | "children": [] 230 | }, 231 | { 232 | "Id": 15, 233 | "ObjectName": "网页设计师", 234 | "BelongTo": 12, 235 | "CreateTime": "2018/07/24", 236 | "ResponsibleName": "不知火舞", 237 | "Experience": "5-10年", 238 | "children": [] 239 | } 240 | ] 241 | }, 242 | { 243 | "Id": 16, 244 | "ObjectName": "交互设计", 245 | "BelongTo": 11, 246 | "CreateTime": "2018/07/24", 247 | "ResponsibleName": "阿珂", 248 | "Experience": "3-5年", 249 | "children": [ 250 | { 251 | "Id": 15, 252 | "ObjectName": "交互设计师", 253 | "BelongTo": 12, 254 | "CreateTime": "2018/07/24", 255 | "ResponsibleName": "李白", 256 | "Experience": "5-10年", 257 | "children": [] 258 | }, 259 | { 260 | "Id": 15, 261 | "ObjectName": "无线交互设计师", 262 | "BelongTo": 12, 263 | "CreateTime": "2018/07/24", 264 | "ResponsibleName": "兰陵王", 265 | "Experience": "5-10年", 266 | "children": [] 267 | } 268 | ] 269 | }, 270 | { 271 | "Id": 17, 272 | "ObjectName": "用户研究", 273 | "BelongTo": 11, 274 | "CreateTime": "2018/07/24", 275 | "ResponsibleName": "韩信", 276 | "Experience": "3-5年", 277 | "children": [ 278 | { 279 | "Id": 15, 280 | "ObjectName": "数据分析师", 281 | "BelongTo": 12, 282 | "CreateTime": "2018/07/24", 283 | "ResponsibleName": "百里玄策 ", 284 | "Experience": "3-5年", 285 | "children": [] 286 | }, 287 | { 288 | "Id": 15, 289 | "ObjectName": "用户研究员", 290 | "BelongTo": 12, 291 | "CreateTime": "2018/07/24", 292 | "ResponsibleName": "宫本武藏", 293 | "Experience": "3-5年", 294 | "children": [] 295 | } 296 | ] 297 | } 298 | ] 299 | } 300 | ] 301 | -------------------------------------------------------------------------------- /src/components/pc/tree-table.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 125 | 126 | 361 | 362 | -------------------------------------------------------------------------------- /dist/static/js/4.820537ed60a813e4bf9b.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///src/components/pc/tree-item.vue","webpack:///./src/components/pc/tree-item.vue?01ee","webpack:///./src/components/pc/tree-item.vue"],"names":["pc_tree_item","render","_vm","this","_h","$createElement","_c","_self","class","tdClass","root","nodes","staticClass","style","left","model","bLeft","_e","_v","attrs","colspan","colSpan","levelClass","on","dblclick","$event","handlerExpand","children","length","tree-open","isExpand","click","title","ObjectName","_s","ResponsibleName","_f","CreateTime","Experience","BelongTo","href","actionFunc","deleteFunc","directives","name","rawName","value","expression","otherNodeClass","_l","m","i","key","String","num","trees","update:nodes","$set","update:trees","update:model","staticRenderFns","Component","__webpack_require__","normalizeComponent","props","data","parentNodeModel","computed","level","childNodeClass","watch","methods","getParentNode","_this","recurFunc","list","forEach","l","id","$emit","filters","formatDate","date","__webpack_exports__"],"mappings":"uGAqDA,IClDAA,GADiBC,OAFjB,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,MAAAN,EAAAO,UAAkB,IAAAP,EAAAQ,MAAA,IAAAR,EAAAS,MAAAL,EAAA,QAAiDM,YAAA,cAAAC,OAAkCC,KAAAZ,EAAAa,MAAAC,MAAA,QAAgCd,EAAAe,KAAAf,EAAAgB,GAAA,KAAAZ,EAAA,SAAAA,EAAA,MAAAA,EAAA,MAAqDa,OAAOC,QAAAlB,EAAAmB,WAAuBf,EAAA,SAAAA,EAAA,MAAuBM,YAAA,OAAAJ,MAAAN,EAAAoB,aAAwChB,EAAA,MAAWM,YAAA,QAAkBN,EAAA,OAAYM,YAAA,WAAAW,IAA2BC,SAAA,SAAAC,GAA4BvB,EAAAwB,cAAAxB,EAAAa,WAA+Bb,EAAAa,MAAAY,SAAAC,OAAA,EAAAtB,EAAA,QAA6CM,YAAA,aAAAJ,OAAgCqB,YAAA3B,EAAAa,MAAAe,UAA+BP,IAAKQ,MAAA,SAAAN,GAAyBvB,EAAAwB,cAAAxB,EAAAa,WAA+Bb,EAAAe,KAAAf,EAAAgB,GAAA,KAAAZ,EAAA,KAA+BM,YAAA,aAAuBN,EAAA,KAAUM,YAAA,iBAA2BV,EAAAgB,GAAA,KAAAZ,EAAA,QAAyBa,OAAOa,MAAA9B,EAAAa,MAAAkB,cAA8B/B,EAAAgB,GAAAhB,EAAAgC,GAAAhC,EAAAa,MAAAkB,qBAAA/B,EAAAgB,GAAA,KAAAZ,EAAA,MAAoEM,YAAA,QAAkBV,EAAAgB,GAAA,qBAAAhB,EAAAgC,GAAAhC,EAAAa,MAAAoB,iBAAA,sBAAAjC,EAAAgB,GAAA,KAAAZ,EAAA,MAA2GM,YAAA,QAAkBV,EAAAgB,GAAAhB,EAAAgC,GAAAhC,EAAAkC,GAAA,aAAAlC,GAAAa,MAAAsB,gBAAAnC,EAAAgB,GAAA,KAAAZ,EAAA,MAAoFM,YAAA,QAAkBN,EAAA,QAAaM,YAAA,WAAAO,OAA8Ba,MAAA9B,EAAAa,MAAAuB,cAA8BpC,EAAAgB,GAAAhB,EAAAgC,GAAAhC,EAAAa,MAAAuB,iBAAApC,EAAAgB,GAAA,KAAAZ,EAAA,MAAgEM,YAAA,QAAkBV,EAAAgB,GAAAhB,EAAAgC,GAAAhC,EAAAa,MAAAwB,UAAA,OAAArC,EAAAgB,GAAA,KAAAZ,EAAA,MAAgEM,YAAA,QAAkBN,EAAA,KAAUM,YAAA,QAAAO,OAA2BqB,KAAA,gBAAsBjB,IAAKQ,MAAA,SAAAN,GAAyBvB,EAAAuC,WAAAvC,EAAAa,WAA4Bb,EAAAgB,GAAA,QAAAhB,EAAAgB,GAAA,KAAAZ,EAAA,KAAqCM,YAAA,SAAmBV,EAAAgB,GAAA,KAAAZ,EAAA,KAAsBM,YAAA,SAAAO,OAA4BqB,KAAA,gBAAsBjB,IAAKQ,MAAA,SAAAN,GAAyBvB,EAAAwC,WAAAxC,EAAAa,WAA4Bb,EAAAgB,GAAA,oBAAAhB,EAAAgB,GAAA,KAAAZ,EAAA,OAAmDqC,aAAaC,KAAA,OAAAC,QAAA,SAAAC,MAAA5C,EAAAa,MAAA,SAAAgC,WAAA,mBAAoFnC,YAAA,aAAAJ,MAAAN,EAAA8C,gBAAoD9C,EAAA+C,GAAA/C,EAAAa,MAAA,kBAAAmC,EAAAC,GAA2C,OAAA7C,EAAA,aAAuB8C,IAAAC,OAAA,aAAAF,GAAAhC,OAAkCmC,IAAAH,EAAAzC,KAAA,EAAAC,MAAAT,EAAAa,MAAAY,SAAAC,OAAA2B,MAAArD,EAAAqD,MAAAxC,MAAAmC,GAA+E3B,IAAKkB,WAAAvC,EAAAuC,WAAAC,WAAAxC,EAAAwC,WAAAhB,cAAAxB,EAAAwB,cAAA8B,eAAA,SAAA/B,GAA0HvB,EAAAuD,KAAAvD,EAAAa,MAAAY,SAAA,SAAAF,IAA+CiC,eAAA,SAAAjC,GAAiCvB,EAAAqD,MAAA9B,GAAiBkC,eAAA,SAAAlC,GAAiCyB,EAAAzB,YAElwEmC,oBCYjBC,EAdAC,EAAA,OAcAC,EFwCAnB,KAAA,WACAoB,OAAA,sCACAC,KAHA,WAIA,OACAC,gBAAA,OAGAC,UACA9C,QADA,WAEA,WAAAlB,KAAAO,KAAA,MAEAD,QAJA,WAKA,WAAAN,KAAAO,KAAA,0BAEAY,WAPA,WAQA,OAAAnB,KAAAY,MAAA,QAAAZ,KAAAY,MAAAqD,MAAA,IAEAC,eAVA,WAWA,WAAAlE,KAAAO,KAAA,iBAEAsC,eAbA,WAcA,OAAA7C,KAAAY,MAAA,cAAAZ,KAAAY,MAAAqD,MAAA,KAGAE,SAQAC,SACAC,cADA,SACAtB,GAAA,IAAAuB,EAAAtE,MAEA,SAAAuE,EAAAT,EAAAU,GACAV,EAAAW,QAAA,SAAAC,GACAA,EAAAC,KAAA5B,EAAA4B,KAAAL,EAAAP,gBAAAS,GACAE,EAAAlD,UACA+C,EAAAG,EAAAlD,SAAAkD,KAIAH,CAAAvE,KAAAoD,MAAApD,KAAAoD,QAEA7B,cAbA,SAaAwB,GACA/C,KAAA4E,MAAA,gBAAA7B,IAEAR,WAhBA,SAgBAQ,GACA/C,KAAA4E,MAAA,aAAA7B,IAWAT,WA5BA,SA4BAS,GACA/C,KAAA4E,MAAA,aAAA7B,KAGA8B,SACAC,WAAA,SAAAC,GAEA,OAAAA,KEzGAlF,GATA,EAEA,KAEA,KAEA,MAUAmF,EAAA,QAAAtB,EAAA","file":"static/js/4.820537ed60a813e4bf9b.js","sourcesContent":["\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/pc/tree-item.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.tdClass},[(_vm.root !== 0 && _vm.nodes !== 1)?_c('span',{staticClass:\"before-line\",style:({'left':_vm.model.bLeft + 'px'})}):_vm._e(),_vm._v(\" \"),_c('table',[_c('tr',[_c('td',{attrs:{\"colspan\":_vm.colSpan}},[_c('table',[_c('tr',{staticClass:\"leve\",class:_vm.levelClass},[_c('td',{staticClass:\"td1\"},[_c('div',{staticClass:\"td-title\",on:{\"dblclick\":function($event){_vm.handlerExpand(_vm.model)}}},[(_vm.model.children.length > 0)?_c('span',{staticClass:\"tree-close\",class:{'tree-open':_vm.model.isExpand},on:{\"click\":function($event){_vm.handlerExpand(_vm.model)}}}):_vm._e(),_vm._v(\" \"),_c('a',{staticClass:\"ellipsis\"},[_c('i',{staticClass:\"t-icon m-dep\"}),_vm._v(\" \"),_c('span',{attrs:{\"title\":_vm.model.ObjectName}},[_vm._v(_vm._s(_vm.model.ObjectName))])])])]),_vm._v(\" \"),_c('td',{staticClass:\"td2\"},[_vm._v(\"\\n \"+_vm._s(_vm.model.ResponsibleName)+\"\\n \")]),_vm._v(\" \"),_c('td',{staticClass:\"td3\"},[_vm._v(_vm._s(_vm._f(\"formatDate\")(_vm.model.CreateTime)))]),_vm._v(\" \"),_c('td',{staticClass:\"td4\"},[_c('span',{staticClass:\"ellipsis\",attrs:{\"title\":_vm.model.Experience}},[_vm._v(_vm._s(_vm.model.Experience))])]),_vm._v(\" \"),_c('td',{staticClass:\"td5\"},[_vm._v(_vm._s(_vm.model.BelongTo)+\"天\")]),_vm._v(\" \"),_c('td',{staticClass:\"td6\"},[_c('a',{staticClass:\"reset\",attrs:{\"href\":\"javascript:;\"},on:{\"click\":function($event){_vm.actionFunc(_vm.model)}}},[_vm._v(\"编辑\")]),_vm._v(\" \"),_c('i',{staticClass:\"line\"}),_vm._v(\" \"),_c('a',{staticClass:\"delete\",attrs:{\"href\":\"javascript:;\"},on:{\"click\":function($event){_vm.deleteFunc(_vm.model)}}},[_vm._v(\"删除\")])])])])])])]),_vm._v(\" \"),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.model.isExpand),expression:\"model.isExpand\"}],staticClass:\"other-node\",class:_vm.otherNodeClass},_vm._l((_vm.model.children),function(m,i){return _c('tree-item',{key:String('child_node'+i),attrs:{\"num\":i,\"root\":1,\"nodes\":_vm.model.children.length,\"trees\":_vm.trees,\"model\":m},on:{\"actionFunc\":_vm.actionFunc,\"deleteFunc\":_vm.deleteFunc,\"handlerExpand\":_vm.handlerExpand,\"update:nodes\":function($event){_vm.$set(_vm.model.children, \"length\", $event)},\"update:trees\":function($event){_vm.trees=$event},\"update:model\":function($event){m=$event}}})}))])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-ab4e4a78\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/pc/tree-item.vue\n// module id = null\n// module chunks = ","var normalizeComponent = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree-item.vue\"\nimport __vue_script__ from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree-item.vue\"\n/* template */\nimport __vue_template__ from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-ab4e4a78\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./tree-item.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = null\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/pc/tree-item.vue\n// module id = null\n// module chunks = "],"sourceRoot":""} -------------------------------------------------------------------------------- /src/components/pc/tree-table-bak.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 260 | 261 | 496 | 497 | -------------------------------------------------------------------------------- /dist/static/js/1.0a60eb5b396c97c904c6.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///src/components/pc/tree-table.vue","webpack:///./src/components/pc/tree-table.vue?4f29","webpack:///./src/components/pc/tree-table.vue","webpack:///src/pages/index.vue","webpack:///./src/pages/index.vue?3b06","webpack:///./src/pages/index.vue","webpack:///./node_modules/core-js/library/modules/_core.js","webpack:///./src/pages/data.json","webpack:///./node_modules/babel-runtime/core-js/json/stringify.js","webpack:///./node_modules/core-js/library/fn/json/stringify.js"],"names":["tree_table","name","props","data","isDesc","treeDataSource","watch","list","handler","console","log","this","initTreeData","deep","nelVal","oldVal","$emit","computed","methods","JSON","parse","stringify_default","tempData","reduceDataFunc","level","map","m","i","isExpand","children","bLeft","Experience","length","getMore","alert","$","mCustomScrollbar","scrollInertia","actionFunc","deleteFunc","handlerExpand","components","treeItem","__webpack_require__","e","then","bind","mounted","vm","$nextTick","pc_tree_table","render","_vm","_h","$createElement","_c","_self","staticClass","_v","on","click","$event","class","sort","attrs","id","_l","model","key","root","num","nodes","trees","update:trees","update:model","_e","staticRenderFns","pages","data_default","a","treeTable","normalizeComponent","ssrContext","orderByFunc","val","selectortype_template_index_0_src_pages","ref","update:list","pages_Component","pages_normalizeComponent","__webpack_exports__","core","module","exports","version","__e","Id","ObjectName","BelongTo","CreateTime","ResponsibleName","default","__esModule","$JSON","stringify","it","apply","arguments"],"mappings":"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","file":"static/js/1.0a60eb5b396c97c904c6.js","sourcesContent":["\n\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/pc/tree-table.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"tree-table\"},[_c('div',{staticClass:\"tree-head\"},[_c('table',[_c('tr',[_c('td',{staticClass:\"td1\"},[_vm._v(\"职位名称\")]),_vm._v(\" \"),_c('td',{staticClass:\"td2\"},[_vm._v(\"负责人\")]),_vm._v(\" \"),_c('td',{staticClass:\"td3\",on:{\"click\":function($event){_vm.isDesc=!_vm.isDesc}}},[_vm._v(\"\\n\\t\\t\\t\\t\\t\\t创建时间\\n\\t\\t\\t\\t\\t\\t\"),_c('div',{staticClass:\"arrow\"},[_c('span',{staticClass:\"up-arrow\",class:{'sort':_vm.isDesc}}),_vm._v(\" \"),_c('span',{staticClass:\"down-arrow\",class:{'sort':!_vm.isDesc}})])]),_vm._v(\" \"),_c('td',{staticClass:\"td4\"},[_vm._v(\"工作经验\")]),_vm._v(\" \"),_c('td',{staticClass:\"td5\"},[_vm._v(\"发布时间\")]),_vm._v(\" \"),_c('td',{staticClass:\"td6\"},[_vm._v(\"操作\")])])])]),_vm._v(\" \"),_c('div',{staticClass:\"tree-wrap\",attrs:{\"id\":\"scrollWrap\"}},[_c('div',{staticClass:\"tree-body\"},[(_vm.treeDataSource.length>0)?_c('table',[_c('tbody',[_c('tr',[_c('td',_vm._l((_vm.treeDataSource),function(model,i){return _c('tree-item',{key:'root_node_'+i,attrs:{\"root\":0,\"num\":i,\"nodes\":_vm.treeDataSource.length,\"trees\":_vm.treeDataSource,\"model\":model},on:{\"actionFunc\":_vm.actionFunc,\"deleteFunc\":_vm.deleteFunc,\"handlerExpand\":_vm.handlerExpand,\"update:trees\":function($event){_vm.treeDataSource=$event},\"update:model\":function($event){model=$event}}})}))])])]):_vm._e()])])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-27486f29\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/pc/tree-table.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-27486f29\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./tree-table.vue\")\n}\nvar normalizeComponent = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree-table.vue\"\nimport __vue_script__ from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree-table.vue\"\n/* template */\nimport __vue_template__ from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-27486f29\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./tree-table.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/pc/tree-table.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/pages/index.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"contains\"},[_c('h1',[_vm._v(\"树表格实现\")]),_vm._v(\" \"),_c('tree-table',{ref:\"recTree\",attrs:{\"list\":_vm.treeDataSource},on:{\"update:list\":function($event){_vm.treeDataSource=$event},\"actionFunc\":_vm.actionFunc,\"deleteFunc\":_vm.deleteFunc,\"handlerExpand\":_vm.handlerExpand,\"orderByFunc\":_vm.orderByFunc}})],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-7c5a939b\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/pages/index.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-7c5a939b\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./index.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./index.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-7c5a939b\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./index.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/pages/index.vue\n// module id = null\n// module chunks = ","var core = module.exports = { version: '2.5.7' };\nif (typeof __e == 'number') __e = core; // eslint-disable-line no-undef\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/library/modules/_core.js\n// module id = FeBl\n// module chunks = 0 1","module.exports = [{\"Id\":1,\"ObjectName\":\"技术\",\"BelongTo\":26,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"刘备\",\"Experience\":\"不要求\",\"children\":[{\"Id\":2,\"ObjectName\":\"后端开发\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"关羽\",\"Experience\":\"5-10年\",\"children\":[{\"Id\":2,\"ObjectName\":\"java\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"典韦\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"数据挖掘\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"吕布\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"C#\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"马可波罗\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":3,\"ObjectName\":\"前端开发\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"赵云\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":2,\"ObjectName\":\"web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"武则天\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":2,\"ObjectName\":\"初级web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"王昭君\",\"Experience\":\"3年以下\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"中级web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"王昭君\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"高级web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"王昭君\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":2,\"ObjectName\":\"html5\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"小乔\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"javascript\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"女娲\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":9,\"ObjectName\":\"测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"张飞\",\"Experience\":\"3年以下\",\"children\":[{\"Id\":2,\"ObjectName\":\"测试工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"大乔\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"自动化测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"蔡文姬\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"功能测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"妲己\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"性能测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"刘婵\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":12,\"ObjectName\":\"运维\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"诸葛亮\",\"Experience\":\"10年以上\",\"children\":[{\"Id\":2,\"ObjectName\":\"运维工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"后羿\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"运维开发工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"鲁班\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"系统工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"黄忠\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"网络安全\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"孙尚香\",\"Experience\":\"5-10年\",\"children\":[]}]}]},{\"Id\":13,\"ObjectName\":\"设计\",\"BelongTo\":10,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"曹操\",\"Experience\":\"不要求\",\"children\":[{\"Id\":14,\"ObjectName\":\"视觉设计\",\"BelongTo\":11,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"花木兰\",\"Experience\":\"5-10年\",\"children\":[{\"Id\":15,\"ObjectName\":\"视觉设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"露娜\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":15,\"ObjectName\":\"网页设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"不知火舞\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":16,\"ObjectName\":\"交互设计\",\"BelongTo\":11,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"阿珂\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":15,\"ObjectName\":\"交互设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"李白\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":15,\"ObjectName\":\"无线交互设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"兰陵王\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":17,\"ObjectName\":\"用户研究\",\"BelongTo\":11,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"韩信\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":15,\"ObjectName\":\"数据分析师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"百里玄策 \",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":15,\"ObjectName\":\"用户研究员\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"宫本武藏\",\"Experience\":\"3-5年\",\"children\":[]}]}]}]\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/pages/data.json\n// module id = dQKT\n// module chunks = 0 1","module.exports = { \"default\": require(\"core-js/library/fn/json/stringify\"), __esModule: true };\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/babel-runtime/core-js/json/stringify.js\n// module id = mvHQ\n// module chunks = 0 1","var core = require('../../modules/_core');\nvar $JSON = core.JSON || (core.JSON = { stringify: JSON.stringify });\nmodule.exports = function stringify(it) { // eslint-disable-line no-unused-vars\n return $JSON.stringify.apply($JSON, arguments);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/library/fn/json/stringify.js\n// module id = qkKv\n// module chunks = 0 1"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/0.d05f8b57cd90e54f7237.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///src/components/h5/tree.vue","webpack:///./src/components/h5/tree.vue?e5a2","webpack:///./src/components/h5/tree.vue","webpack:///src/components/h5/tree-list.vue","webpack:///./src/components/h5/tree-list.vue?5062","webpack:///./src/components/h5/tree-list.vue","webpack:///src/pages/mobile.vue","webpack:///./src/pages/mobile.vue?be56","webpack:///./src/pages/mobile.vue","webpack:///./node_modules/core-js/library/modules/_core.js","webpack:///./src/pages/data.json","webpack:///./node_modules/babel-runtime/core-js/json/stringify.js","webpack:///./node_modules/core-js/library/fn/json/stringify.js"],"names":["tree","name","props","data","treeDataSource","watch","model","handler","console","log","this","deep","computed","HasChild","children","length","isOpenOrClose","isExpand","methods","openExpand","m","$emit","delAction","h5_tree","render","_vm","_h","$createElement","_c","_self","staticClass","attrs","data-type","root","nodes","_e","_v","_s","ResponsibleName","class","on","click","$event","ObjectName","BelongTo","Experience","CreateTime","_l","i","key","String","num","update:nodes","$set","update:model","staticRenderFns","components_h5_tree","__webpack_require__","normalizeComponent","ssrContext","tree_list","list","Array","components","treeItem","created","getList","mounted","arguments","undefined","initTreeData","tempData","JSON","parse","stringify_default","reduceDataFunc","level","map","h5_tree_list","mobile","data_default","a","treeList","tree_list_normalizeComponent","pages_mobile","_m","href","mobile_Component","mobile_normalizeComponent","__webpack_exports__","core","module","exports","version","__e","Id","default","__esModule","$JSON","stringify","it","apply"],"mappings":"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","file":"static/js/0.d05f8b57cd90e54f7237.js","sourcesContent":["\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/h5/tree.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:\"node list-item\",attrs:{\"data-type\":\"0\"}},[(_vm.root !==0 && _vm.nodes !== 1)?[_c('span',{staticClass:\"line\"})]:_vm._e(),_vm._v(\" \"),_c('div',{staticClass:\"contanier flex\"},[_c('div',{staticClass:\"small-panel flex\"},[_c('span',{staticClass:\"label\"},[_vm._v(\"[负责人]\")]),_vm._v(\" \"),_c('span',{staticClass:\"txt\"},[_vm._v(_vm._s(_vm.model.ResponsibleName))])]),_vm._v(\" \"),_c('div',{staticClass:\"body-panel flex\"},[_c('div',{staticClass:\"title\"},[(_vm.HasChild)?_c('i',{staticClass:\"arrow\",class:_vm.isOpenOrClose,on:{\"click\":function($event){_vm.openExpand(_vm.model)}}}):_vm._e(),_vm._v(\" \"),_c('i',{staticClass:\"t-icon m-dep\"}),_vm._v(\"\\n \"+_vm._s(_vm.model.ObjectName)+\"\\n \")]),_vm._v(\" \"),_c('div',{staticClass:\"time\"},[_vm._v(_vm._s(_vm.model.BelongTo)+\"天前\")])]),_vm._v(\" \"),_c('div',{staticClass:\"bottom-panel flex\"},[_c('div',{staticClass:\"left-wrap flex\"},[_c('span',{staticClass:\"label\"},[_vm._v(\"[工作经验]\")]),_vm._v(\"\\n |\\n \"),_c('span',{staticClass:\"txt\"},[_vm._v(_vm._s(_vm.model.Experience))])]),_vm._v(\" \"),_c('div',{staticClass:\"right-wrap\"},[_c('span',{staticClass:\"txt\"},[_vm._v(_vm._s(_vm.model.CreateTime))])])])]),_vm._v(\" \"),(_vm.HasChild && this.model.isExpand)?[_c('ul',{staticClass:\"box\"},_vm._l((_vm.model.children),function(m,i){return _c('tree-item',{key:String('child_node'+i),attrs:{\"num\":i,\"root\":1,\"nodes\":_vm.model.children.length,\"model\":m},on:{\"openExpand\":_vm.openExpand,\"delAction\":_vm.delAction,\"update:nodes\":function($event){_vm.$set(_vm.model.children, \"length\", $event)},\"update:model\":function($event){m=$event}}})}))]:_vm._e()],2)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-8fa27eac\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/h5/tree.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8fa27eac\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./tree.vue\")\n}\nvar normalizeComponent = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree.vue\"\nimport __vue_script__ from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree.vue\"\n/* template */\nimport __vue_template__ from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-8fa27eac\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./tree.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/h5/tree.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/components/h5/tree-list.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"recoveryPage\"},[_c('div',{staticClass:\"tree-main\"},[_c('ul',{staticClass:\"tree-wrap\"},_vm._l((_vm.treeDataSource),function(model,i){return _c('tree-item',{key:'root_'+i,attrs:{\"root\":0,\"num\":i,\"nodes\":_vm.treeDataSource.length,\"model\":model},on:{\"openExpand\":_vm.openExpand,\"delAction\":_vm.delAction,\"update:model\":function($event){model=$event}}})}))])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-f02d56a0\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/h5/tree-list.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-f02d56a0\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./tree-list.vue\")\n}\nvar normalizeComponent = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree-list.vue\"\nimport __vue_script__ from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./tree-list.vue\"\n/* template */\nimport __vue_template__ from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-f02d56a0\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./tree-list.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/h5/tree-list.vue\n// module id = null\n// module chunks = ","\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/pages/mobile.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"marvel-device iphone-x\"},[_vm._m(0),_vm._v(\" \"),_c('div',{staticClass:\"top-bar\"}),_vm._v(\" \"),_c('div',{staticClass:\"sleep\"}),_vm._v(\" \"),_c('div',{staticClass:\"bottom-bar\"}),_vm._v(\" \"),_c('div',{staticClass:\"volume\"}),_vm._v(\" \"),_vm._m(1),_vm._v(\" \"),_c('div',{staticClass:\"inner-shadow\"}),_vm._v(\" \"),_c('div',{staticClass:\"screen\"},[_c('div',{staticClass:\"container\"},[_vm._m(2),_vm._v(\" \"),_c('ul',{staticClass:\"tree-wrap\"},[_c('tree-list',{attrs:{\"list\":_vm.treeDataSource}})],1)])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"notch\"},[_c('div',{staticClass:\"camera\"}),_vm._v(\" \"),_c('div',{staticClass:\"speaker\"})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"overflow\"},[_c('div',{staticClass:\"shadow shadow--tr\"}),_vm._v(\" \"),_c('div',{staticClass:\"shadow shadow--tl\"}),_vm._v(\" \"),_c('div',{staticClass:\"shadow shadow--br\"}),_vm._v(\" \"),_c('div',{staticClass:\"shadow shadow--bl\"})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',{staticClass:\"header\"},[_c('div',[_vm._v(\"我是移动端树\\n \"),_c('a',{attrs:{\"href\":\"https://sijinglei.github.io/vue-tree-table/dist/#/\"}},[_vm._v(\"（pc端vue-tree-table）\")])])])}]\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-1c65ae44\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/pages/mobile.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1c65ae44\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./mobile.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./mobile.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./mobile.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1c65ae44\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./mobile.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/pages/mobile.vue\n// module id = null\n// module chunks = ","var core = module.exports = { version: '2.5.7' };\nif (typeof __e == 'number') __e = core; // eslint-disable-line no-undef\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/library/modules/_core.js\n// module id = FeBl\n// module chunks = 0 1","module.exports = [{\"Id\":1,\"ObjectName\":\"技术\",\"BelongTo\":26,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"刘备\",\"Experience\":\"不要求\",\"children\":[{\"Id\":2,\"ObjectName\":\"后端开发\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"关羽\",\"Experience\":\"5-10年\",\"children\":[{\"Id\":2,\"ObjectName\":\"java\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"典韦\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"数据挖掘\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"吕布\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"C#\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"马可波罗\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":3,\"ObjectName\":\"前端开发\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"赵云\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":2,\"ObjectName\":\"web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"武则天\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":2,\"ObjectName\":\"初级web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"王昭君\",\"Experience\":\"3年以下\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"中级web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"王昭君\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"高级web前端\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"王昭君\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":2,\"ObjectName\":\"html5\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"小乔\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"javascript\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"女娲\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":9,\"ObjectName\":\"测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"张飞\",\"Experience\":\"3年以下\",\"children\":[{\"Id\":2,\"ObjectName\":\"测试工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"大乔\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"自动化测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"蔡文姬\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"功能测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"妲己\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"性能测试\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"刘婵\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":12,\"ObjectName\":\"运维\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"诸葛亮\",\"Experience\":\"10年以上\",\"children\":[{\"Id\":2,\"ObjectName\":\"运维工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"后羿\",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"运维开发工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"鲁班\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"系统工程师\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"黄忠\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":2,\"ObjectName\":\"网络安全\",\"BelongTo\":24,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"孙尚香\",\"Experience\":\"5-10年\",\"children\":[]}]}]},{\"Id\":13,\"ObjectName\":\"设计\",\"BelongTo\":10,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"曹操\",\"Experience\":\"不要求\",\"children\":[{\"Id\":14,\"ObjectName\":\"视觉设计\",\"BelongTo\":11,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"花木兰\",\"Experience\":\"5-10年\",\"children\":[{\"Id\":15,\"ObjectName\":\"视觉设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"露娜\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":15,\"ObjectName\":\"网页设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"不知火舞\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":16,\"ObjectName\":\"交互设计\",\"BelongTo\":11,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"阿珂\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":15,\"ObjectName\":\"交互设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"李白\",\"Experience\":\"5-10年\",\"children\":[]},{\"Id\":15,\"ObjectName\":\"无线交互设计师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"兰陵王\",\"Experience\":\"5-10年\",\"children\":[]}]},{\"Id\":17,\"ObjectName\":\"用户研究\",\"BelongTo\":11,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"韩信\",\"Experience\":\"3-5年\",\"children\":[{\"Id\":15,\"ObjectName\":\"数据分析师\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"百里玄策 \",\"Experience\":\"3-5年\",\"children\":[]},{\"Id\":15,\"ObjectName\":\"用户研究员\",\"BelongTo\":12,\"CreateTime\":\"2018/07/24\",\"ResponsibleName\":\"宫本武藏\",\"Experience\":\"3-5年\",\"children\":[]}]}]}]\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/pages/data.json\n// module id = dQKT\n// module chunks = 0 1","module.exports = { \"default\": require(\"core-js/library/fn/json/stringify\"), __esModule: true };\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/babel-runtime/core-js/json/stringify.js\n// module id = mvHQ\n// module chunks = 0 1","var core = require('../../modules/_core');\nvar $JSON = core.JSON || (core.JSON = { stringify: JSON.stringify });\nmodule.exports = function stringify(it) { // eslint-disable-line no-unused-vars\n return $JSON.stringify.apply($JSON, arguments);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/library/fn/json/stringify.js\n// module id = qkKv\n// module chunks = 0 1"],"sourceRoot":""} -------------------------------------------------------------------------------- /src/assets/devices.min.css: -------------------------------------------------------------------------------- 1 | .marvel-device{display:inline-block;position:relative;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;z-index:3;background:white;overflow:hidden;display:block;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8 .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8 .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;border-radius:100%}.marvel-device.iphone8 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:white}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{padding:24px 105px;height:375px;width:667px}.marvel-device.iphone8.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:22px}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8plus:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8plus:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8plus .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8plus .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8plus .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8plus .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8plus .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8plus .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:29px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8plus .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:54px;left:154px;z-index:3;border-radius:100%}.marvel-device.iphone8plus .speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:white}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{padding:26px 112px;height:414px;width:736px}.marvel-device.iphone8plus.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8plus.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8plus.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8plus.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:24px}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8plus.landscape .camera{left:calc(100% - 29px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s,.marvel-device.iphone5c{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;content:'';left:4px;border-radius:46px;background:#1e1e1e;z-index:1}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#282727}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#282727}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;left:0px;top:-75px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:32px;left:50%;margin-left:-5px;border-radius:5px;z-index:3}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;top:60px;left:160px;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{background:#292728;width:64px;height:10px;position:absolute;top:60px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{padding:22px 105px;height:320px;width:568px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{width:35px;height:4px;top:0px;right:-75px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{height:64px;width:10px;left:calc(100% - 60px);top:50%;margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s .home{border-radius:36px;width:68px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.marvel-device.iphone5s .top-bar{top:70px;position:absolute;left:0}.marvel-device.iphone5s .bottom-bar{bottom:70px;position:absolute;left:0}.marvel-device.iphone5s.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{left:70px;top:0px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;left:auto;bottom:0px;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:white}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{background:#242324;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px}.marvel-device.iphone5c .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone5c.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{content:'';width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;border-radius:50px;background:#1e1e1e}.marvel-device.iphone4s .top-bar{top:60px;position:absolute;left:0}.marvel-device.iphone4s .bottom-bar{bottom:90px;position:absolute;left:0}.marvel-device.iphone4s .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.iphone4s .speaker{background:#292728;width:64px;height:10px;position:absolute;top:72px;left:50%;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone4s .sensor{background:#292728;width:40px;height:10px;position:absolute;top:36px;left:50%;z-index:3;margin-left:-20px;border-radius:5px}.marvel-device.iphone4s .home{background:#242324;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px}.marvel-device.iphone4s .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#4D4D4D}.marvel-device.iphone4s .volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#4D4D4D}.marvel-device.iphone4s .volume:before{position:absolute;left:0px;top:-70px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s.landscape{padding:27px 129px;height:320px;width:480px}.marvel-device.iphone4s.landscape .bottom-bar{left:90px;bottom:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .top-bar{left:calc(100% - 60px);top:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 72px);width:10px;height:64px}.marvel-device.iphone4s.landscape .sensor{height:40px;width:10px;left:calc(100% - 36px);top:50%;margin-left:0;margin-top:-20px}.marvel-device.iphone4s.landscape .home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.marvel-device.iphone4s.landscape .sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{right:-70px;left:auto;top:0px;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{width:27px;height:4px;bottom:0px;left:-64px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{padding:50px 15px 50px 15px;width:320px;height:568px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px;background:#181818}.marvel-device.nexus5 .top-bar:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.0%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:'';display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{padding:60px 18px;border-radius:42px;width:320px;height:568px;background:#bcbcbc}.marvel-device.s5:before,.marvel-device.s5:after{width:calc(100% - 52px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:center;z-index:2;position:absolute}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{width:calc(100% - 48px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{width:3px;position:absolute;left:-3px;top:100px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{width:68px;height:8px;position:absolute;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .camera{display:block;position:absolute;top:24px;right:42px;background:black;border-radius:100%;width:10px;height:10px;z-index:3}.marvel-device.s5 .camera:before{width:4px;height:4px;background:#3c3d3d;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-2px;margin-left:-2px}.marvel-device.s5 .home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}.marvel-device.s5.landscape{padding:18px 60px;height:320px;width:568px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{height:calc(100% - 52px);width:26px;border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;left:auto;right:-7px}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{right:-7px;top:50%;left:auto}.marvel-device.s5.landscape .top-bar:after{left:-7px;top:50%;right:auto}.marvel-device.s5.landscape .sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.marvel-device.s5.landscape .sensor{right:20px;top:calc(100% - 110px)}.marvel-device.s5.landscape .sensor:after{left:-12px;right:0px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:black}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{padding:80px 35px 125px 35px;background:#ffdd00;width:320px;height:533px;border-radius:40px / 3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;border-radius:24px;background:black;z-index:1}.marvel-device.lumia920 .top-bar:before{background:#1e1e1e;display:block;content:'';width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;border-radius:22px}.marvel-device.lumia920 .volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{width:3px;position:absolute;top:190px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:after{width:3px;position:absolute;top:460px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:34px;right:130px;z-index:5;border-radius:5px}.marvel-device.lumia920 .speaker{background:#292728;width:64px;height:10px;position:absolute;top:38px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.lumia920.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;border-radius:2px / 100px}.marvel-device.lumia920.landscape .top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.marvel-device.lumia920.landscape .volume{height:3px;right:130px;width:100px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{height:3px;right:190px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{height:3px;right:430px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{right:30px;top:calc(100% - 140px)}.marvel-device.lumia920.landscape .speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}.marvel-device.lumia920.black{background:black}.marvel-device.lumia920.white{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#CC3E32}.marvel-device.htc-one{padding:72px 25px 100px 25px;width:320px;height:568px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);position:absolute;top:2px;left:2px;background:#adadad;border-radius:32px}.marvel-device.htc-one:after{content:'';display:block;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;background:#eeeeee;border-radius:30px}.marvel-device.htc-one .top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px}.marvel-device.htc-one .top-bar:before{content:'';position:absolute;width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0px;z-index:1;left:2px}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{height:16px;width:216px;display:block;position:absolute;top:22px;z-index:2;left:50%;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0,radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-size:4px 4px;background-position:top left}.marvel-device.htc-one .speaker:after{content:'';height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}.marvel-device.htc-one .camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;border-radius:100%;width:24px;height:24px;z-index:3}.marvel-device.htc-one .camera:before{width:8px;height:8px;background:black;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-4px;margin-left:-4px}.marvel-device.htc-one .sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one.landscape{padding:25px 72px 25px 100px;height:320px;width:568px}.marvel-device.htc-one.landscape .top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.marvel-device.htc-one.landscape .speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0px;margin-top:-108px}.marvel-device.htc-one.landscape .speaker:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}.marvel-device.htc-one.landscape .camera{right:18px;top:calc(100% - 38px)}.marvel-device.htc-one.landscape .sensor{left:calc(100% - 29px);top:60px}.marvel-device.htc-one.landscape .sensor :after{right:0;top:-12px}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;border-radius:44px}.marvel-device.ipad:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:44px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .home{background:#242324;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px}.marvel-device.ipad .home:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%}.marvel-device.ipad.landscape{height:576px;width:768px;padding:25px 90px}.marvel-device.ipad.landscape .camera{left:calc(100% - 44px);top:50%;margin-left:0;margin-top:-5px}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-left:0;margin-top:-25px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:30px;background:#1e1e1e}.marvel-device.macbook .top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:'';display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6)}.marvel-device.macbook .top-bar:before{width:100%;height:24px;content:'';display:block;top:0;left:0;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;position:relative}.marvel-device.macbook .top-bar:after{width:16%;height:14px;content:'';display:block;top:0;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;left:0;right:0;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999}.marvel-device.macbook .bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:'';display:block;top:680px;left:-70px}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{height:calc(100% - 2px);width:80px;content:'';display:block;top:0;position:absolute}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:375px;height:812px;padding:26px;background:#fdfdfd;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black;border-radius:66px}.marvel-device.iphone-x .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:66px;overflow:hidden}.marvel-device.iphone-x .shadow{border-radius:100%;width:90px;height:90px;position:absolute;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%)}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{bottom:-20px;right:-20px}.marvel-device.iphone-x:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:'';left:5px;border-radius:61px;background:black;z-index:1}.marvel-device.iphone-x .inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);z-index:1}.marvel-device.iphone-x .inner-shadow:before{-webkit-box-shadow:inset 0 0 20px 0 #FFFFFF;box-shadow:inset 0 0 20px 0 #FFFFFF;width:100%;height:116%;position:absolute;top:-8%;content:'';left:0;border-radius:200px / 112px;z-index:2}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{width:100%;position:absolute;height:8px;background:rgba(0,0,0,0.1);left:0}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{width:3px;background:#b5b5b5;position:absolute}.marvel-device.iphone-x .volume{left:-3px;top:116px;height:32px}.marvel-device.iphone-x .volume:before{height:62px;top:62px;content:'';left:0}.marvel-device.iphone-x .volume:after{height:62px;top:140px;content:'';left:0}.marvel-device.iphone-x .sleep{height:96px;top:200px;right:-3px}.marvel-device.iphone-x .camera{width:6px;height:6px;top:9px;border-radius:100%;position:absolute;left:154px;background:#0d4d71}.marvel-device.iphone-x .speaker{height:6px;width:60px;left:50%;position:absolute;top:9px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;width:210px;height:30px;top:26px;left:108px;z-index:4;background:black;border-bottom-left-radius:24px;border-bottom-right-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{content:'';height:8px;position:absolute;top:0;width:8px}.marvel-device.iphone-x .notch:after{background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);left:-8px}.marvel-device.iphone-x .notch:before{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);right:-8px}.marvel-device.iphone-x.landscape{height:375px;width:812px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{width:8px;height:100%;top:0}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{height:100%;width:116%;left:-8%;top:0;border-radius:112px / 200px}.marvel-device.iphone-x.landscape .volume{bottom:-3px;top:auto;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{width:62px;left:62px;top:0}.marvel-device.iphone-x.landscape .volume:after{width:62px;left:140px;top:0}.marvel-device.iphone-x.landscape .sleep{width:96px;left:200px;top:-3px;right:auto}.marvel-device.iphone-x.landscape .camera{left:9px;bottom:154px;top:auto}.marvel-device.iphone-x.landscape .speaker{width:6px;height:60px;left:9px;top:50%;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{height:210px;width:30px;left:26px;bottom:108px;top:auto;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);bottom:-8px;top:auto}.marvel-device.iphone-x.landscape .notch:before{background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);top:-8px}.marvel-device.note8{width:400px;height:822px;background:black;border-radius:34px;padding:45px 10px}.marvel-device.note8 .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:34px;overflow:hidden}.marvel-device.note8 .speaker{height:8px;width:56px;left:50%;position:absolute;top:25px;margin-left:-28px;background:#171818;z-index:1;border-radius:8px}.marvel-device.note8 .camera{height:18px;width:18px;left:86px;position:absolute;top:18px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .camera:before{content:'';height:8px;width:8px;left:-22px;position:absolute;top:5px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .sensors{height:10px;width:10px;left:120px;position:absolute;top:22px;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .sensors:before{content:'';height:10px;width:10px;left:18px;position:absolute;top:0;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors{height:16px;width:16px;left:285px;position:absolute;top:18px;background:#33244a;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.1);box-shadow:0 0 0 2px rgba(255,255,255,0.1);z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors:before{content:'';height:11px;width:11px;left:40px;position:absolute;top:4px;background:#214a61;z-index:1;border-radius:100%}.marvel-device.note8 .sleep{width:2px;height:56px;background:black;position:absolute;top:288px;right:-2px}.marvel-device.note8 .volume{width:2px;height:120px;background:black;position:absolute;top:168px;left:-2px}.marvel-device.note8 .volume:before{content:'';top:168px;width:2px;position:absolute;left:0;background:black;height:56px}.marvel-device.note8 .inner{width:100%;height:calc(100% - 8px);position:absolute;top:2px;content:'';left:0px;border-radius:34px;border-top:2px solid #9fa0a2;border-bottom:2px solid #9fa0a2;background:black;z-index:1;-webkit-box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5)}.marvel-device.note8 .shadow{-webkit-box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);height:101%;position:absolute;top:-0.5%;content:'';width:calc(100% - 20px);left:10px;border-radius:38px;z-index:5;pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{height:400px;width:822px;padding:10px 45px}.marvel-device.note8.landscape .speaker{height:56px;width:8px;top:50%;margin-top:-28px;margin-left:0;right:25px;left:auto}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{bottom:-2px;top:auto;right:288px;width:56px;height:2px}.marvel-device.note8.landscape .volume{width:120px;height:2px;top:-2px;right:168px;left:auto}.marvel-device.note8.landscape .volume:before{right:168px;left:auto;top:0;width:56px;height:2px}.marvel-device.note8.landscape .inner{height:100%;width:calc(100% - 8px);left:2px;top:0;border-top:0;border-bottom:0;border-left:2px solid #9fa0a2;border-right:2px solid #9fa0a2}.marvel-device.note8.landscape .shadow{width:101%;height:calc(100% - 20px);left:-0.5%;top:10px} 2 | --------------------------------------------------------------------------------