├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── iconfont │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.js │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── image │ │ ├── 200x100.png │ │ ├── 300x450.png │ │ ├── 300x700.png │ │ ├── 3eede7.png │ │ ├── 700x400.png │ │ ├── 80x80.png │ │ ├── banner_1.jpg │ │ ├── banner_2.jpg │ │ ├── f3f9f1.png │ │ ├── loading.gif │ │ ├── 展示1.png │ │ ├── 展示10.png │ │ ├── 展示2.png │ │ ├── 展示3.png │ │ ├── 展示4.png │ │ ├── 展示5.png │ │ ├── 展示6.png │ │ ├── 展示7.png │ │ ├── 展示8.png │ │ └── 展示9.png │ └── styl │ │ ├── base.styl │ │ ├── index.styl │ │ └── mixin.styl ├── components │ ├── head-search.vue │ ├── list │ │ └── list.vue │ ├── mask │ │ └── mask.vue │ ├── mint-ui-index.js │ ├── popup │ │ └── popup.vue │ ├── scroll │ │ ├── bubble.vue │ │ ├── loading.vue │ │ └── scroll.vue │ ├── scrollTab │ │ └── scroll-tab.vue │ ├── slider │ │ └── slide.vue │ └── ydui-index.js ├── lib │ ├── plugins │ │ ├── refresh-rem.js │ │ └── vue-global.js │ └── svg-icon │ │ ├── index.vue │ │ ├── svg-icon.js │ │ └── svg │ │ └── 1.svg ├── main.js ├── router.js ├── store.js ├── util │ └── assist.js └── views │ ├── index.vue │ ├── me.vue │ ├── search.vue │ ├── small-video.vue │ ├── test.vue │ └── watermelon-video.vue └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | "arrow-parens": 0, 14 | "generator-star-spacing": 0, 15 | "space-before-function-paren": 0, 16 | "spaced-comment": 0, 17 | "indent": 0, 18 | "no-tabs": 0 19 | }, 20 | parserOptions: { 21 | parser: 'babel-eslint' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-toutiaoApp # 2 | 3 | > 这是用 **vue.js 3.0** 仿 **今日头条** 的移动端项目，结合了原生app的部分功能。 4 | ## 前言 ## 5 | 本人平时喜欢看 *今日头条* ，看到里面不错的动画和交互效果，想模仿一下，也是对自己学习成果的检验。 6 | ### 技术栈 ### 7 | 1. vue.js 3.0全家桶（vue/cli、vueX、vue-router） 8 | 2. axios、 9 | 3. YDUI、 10 | 4. better-scroll、flexible.js 11 | 12 | ### 在线地址 ### 13 | > 暂无 14 | 15 | ### 项目效果图 ### 16 | ![加载错误，请在src/assets/image中查看](./src/assets/image/展示1.png) ![加载错误，请在src/assets/image中查看](./src/assets/image/展示2.png) 17 | ![加载错误，请在src/assets/image中查看](./src/assets/image/展示3.png) ![加载错误，请在src/assets/image中查看](./src/assets/image/展示4.png) 18 | ![加载错误，请在src/assets/image中查看](./src/assets/image/展示5.png) ![加载错误，请在src/assets/image中查看](./src/assets/image/展示6.png) 19 | ![加载错误，请在src/assets/image中查看](./src/assets/image/展示7.png) ![加载错误，请在src/assets/image中查看](./src/assets/image/展示8.png) 20 | ![加载错误，请在src/assets/image中查看](./src/assets/image/展示9.png) ![加载错误，请在src/assets/image中查看](./src/assets/image/展示10.png) 21 | ### 说明 ### 22 | 5. 因为暂时不会写接口；**数据都是自己模拟的**。 23 | 6. 此项目主要是对于vue.js的运用，在样式上无法完全还原app，可能有些地方稍微丑陋，望请谅解！ 24 | 7. 项目会一直更新，完善更多的功能。 25 | ### 安装 ### 26 | npm install 27 | ### 运行### 28 | npm run serve 29 | 30 | ### 感谢 ### 31 | 如果感觉项目对您有所帮助，麻烦给个star吧，嘿嘿^_^，谢谢！！！ 32 | ---------- 33 | **5-30 更新** 34 | 35 | 1. 模块页面和功能完善； 36 | ---------- 37 | **5-19 更新** 38 | 39 | 1. 小视频推荐页更新； 40 | ---------- 41 | **5-15 更新** 42 | 43 | 1. 首页推荐部分更新； 44 | 45 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "better-scroll": "~1.8.0", 12 | "core-js": "^2.6.5", 13 | "socket.io-client": "^2.2.0", 14 | "vue": "^2.6.10", 15 | "vue-router": "^3.0.3", 16 | "vue-socket.io": "^3.0.7", 17 | "vue-video-player": "^5.0.2", 18 | "vue-ydui": "^1.2.6", 19 | "vuex": "^3.0.1" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.6.0", 23 | "@vue/cli-plugin-eslint": "^3.6.0", 24 | "@vue/cli-service": "^3.6.0", 25 | "@vue/eslint-config-standard": "^4.0.0", 26 | "babel-eslint": "^10.0.1", 27 | "eslint": "^5.16.0", 28 | "eslint-plugin-vue": "^5.0.0", 29 | "mint-ui": "^2.2.13", 30 | "stylus": "^0.54.5", 31 | "stylus-loader": "^3.0.2", 32 | "vue-template-compiler": "^2.5.21" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | vue-app 13 | 14 | 15 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 53 | 75 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1559103678087'); /* IE9 */ 3 | src: url('iconfont.eot?t=1559103678087#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('iconfont.woff?t=1559103678087') format('woff'), 6 | url('iconfont.ttf?t=1559103678087') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1559103678087#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | [class^="icon-"], [class*=" icon-"] { 11 | font-family:"iconfont" !important; 12 | font-size:0.40rem; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-fashipin:before { 19 | content: "\e601"; 20 | } 21 | 22 | .icon-baoliao:before { 23 | content: "\e600"; 24 | } 25 | 26 | .icon-62:before { 27 | content: "\e64b"; 28 | } 29 | 30 | .icon-bofang:before { 31 | content: "\e613"; 32 | } 33 | 34 | .icon-xiguashipin:before { 35 | content: "\e66a"; 36 | } 37 | 38 | .icon-tuwen:before { 39 | content: "\e638"; 40 | } 41 | 42 | .icon-tiwen:before { 43 | content: "\e642"; 44 | } 45 | 46 | .icon-profile:before { 47 | content: "\e608"; 48 | } 49 | 50 | .icon-delete:before { 51 | content: "\e6c6"; 52 | } 53 | 54 | .icon-shuaxin:before { 55 | content: "\e650"; 56 | } 57 | 58 | .icon-home:before { 59 | content: "\e604"; 60 | } 61 | 62 | .icon-homesel:before { 63 | content: "\e606"; 64 | } 65 | 66 | .icon-lishijilu1:before { 67 | content: "\e61d"; 68 | } 69 | 70 | .icon-guanbi:before { 71 | content: "\e677"; 72 | } 73 | 74 | .icon-youjiantou:before { 75 | content: "\e64c"; 76 | } 77 | 78 | .icon-video:before { 79 | content: "\e614"; 80 | } 81 | 82 | .icon-dianzan1:before { 83 | content: "\e61a"; 84 | } 85 | 86 | .icon-xiaoshipin:before { 87 | content: "\e64e"; 88 | } 89 | 90 | .icon-lishijilu:before { 91 | content: "\e6b9"; 92 | } 93 | 94 | .icon-paixiaoshipin:before { 95 | content: "\e6e2"; 96 | } 97 | 98 | .icon-more:before { 99 | content: "\e674"; 100 | } 101 | 102 | .icon-kaizhibo:before { 103 | content: "\e65b"; 104 | } 105 | 106 | .icon-jiahao:before { 107 | content: "\e626"; 108 | } 109 | 110 | .icon-shoucang:before { 111 | content: "\e60d"; 112 | } 113 | 114 | .icon-pinglun1:before { 115 | content: "\e763"; 116 | } 117 | 118 | .icon-arrow-up:before { 119 | content: "\e602"; 120 | } 121 | 122 | .icon-zhuanfa:before { 123 | content: "\e609"; 124 | } 125 | 126 | .icon-arrow-down:before { 127 | content: "\e615"; 128 | } 129 | 130 | .icon-search:before { 131 | content: "\e851"; 132 | } 133 | 134 | .icon-shanchu:before { 135 | content: "\e668"; 136 | } 137 | 138 | .icon-fabu:before { 139 | content: "\e678"; 140 | } 141 | 142 | .icon-pinglun:before { 143 | content: "\e60c"; 144 | } 145 | 146 | .icon-type:before { 147 | content: "\e71b"; 148 | } 149 | 150 | .icon-xingxing:before { 151 | content: "\e870"; 152 | } 153 | 154 | .icon-profilesel:before { 155 | content: "\e852"; 156 | } 157 | 158 | .icon-xiguashipinsel:before { 159 | content: "\e853"; 160 | } 161 | 162 | .icon-xiaoshipinsel:before { 163 | content: "\e854"; 164 | } 165 | 166 | .icon-dianzan:before { 167 | content: "\e855"; 168 | } 169 | 170 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(e){var c,o='',l=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(l&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()};document.addEventListener("DOMContentLoaded",l,!1)}else document.attachEvent&&(t=c,i=e.document,a=!1,(h=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(h,50)}o()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,o())});function o(){a||(a=!0,t())}var t,i,a,h}(function(){var c,l;(c=document.createElement("div")).innerHTML=o,o=null,(l=c.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",function(c,l){l.firstChild?function(c,l){l.parentNode.insertBefore(c,l)}(c,l.firstChild):l.appendChild(c)}(l,document.body))})}(window); -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/image/200x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/200x100.png -------------------------------------------------------------------------------- /src/assets/image/300x450.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/300x450.png -------------------------------------------------------------------------------- /src/assets/image/300x700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/300x700.png -------------------------------------------------------------------------------- /src/assets/image/3eede7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/3eede7.png -------------------------------------------------------------------------------- /src/assets/image/700x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/700x400.png -------------------------------------------------------------------------------- /src/assets/image/80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/80x80.png -------------------------------------------------------------------------------- /src/assets/image/banner_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/banner_1.jpg -------------------------------------------------------------------------------- /src/assets/image/banner_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/banner_2.jpg -------------------------------------------------------------------------------- /src/assets/image/f3f9f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/f3f9f1.png -------------------------------------------------------------------------------- /src/assets/image/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/loading.gif -------------------------------------------------------------------------------- /src/assets/image/展示1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示1.png -------------------------------------------------------------------------------- /src/assets/image/展示10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示10.png -------------------------------------------------------------------------------- /src/assets/image/展示2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示2.png -------------------------------------------------------------------------------- /src/assets/image/展示3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示3.png -------------------------------------------------------------------------------- /src/assets/image/展示4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示4.png -------------------------------------------------------------------------------- /src/assets/image/展示5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示5.png -------------------------------------------------------------------------------- /src/assets/image/展示6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示6.png -------------------------------------------------------------------------------- /src/assets/image/展示7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示7.png -------------------------------------------------------------------------------- /src/assets/image/展示8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示8.png -------------------------------------------------------------------------------- /src/assets/image/展示9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TendernessPP/vue-toutiaoApp/bcf95c651651c4b55e342f4a88421ca772fae978/src/assets/image/展示9.png -------------------------------------------------------------------------------- /src/assets/styl/base.styl: -------------------------------------------------------------------------------- 1 | html, body { 2 | border: 0; 3 | font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif 4 | line-height: 1; 5 | margin: 0; 6 | padding: 0; 7 | height: 100% 8 | width : 100% 9 | } 10 | 11 | div, span, object, iframe, img, table, caption, thead, tbody, 12 | tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu, 13 | nav, footer, header, section, summary, mark, audio, video { 14 | border: 0; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | 19 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, 20 | del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, 21 | ol, ul, li, fieldset, legend, label { 22 | border: 0; 23 | font-size: 100%; 24 | vertical-align: baseline; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | article, aside, canvas, figure, figure img, figcaption, hgroup, 30 | footer, header, nav, section, audio, video { 31 | display: block; 32 | } 33 | 34 | li { 35 | list-style: none; 36 | } 37 | a { 38 | cursor: pointer; 39 | text-decoration: none; 40 | } 41 | a img { 42 | border: 0; 43 | } 44 | 45 | img { 46 | vertical-align: top; 47 | } 48 | 49 | * { 50 | -webkit-box-sizing: border-box; 51 | -moz-box-sizing: border-box; 52 | box-sizing: border-box; 53 | } 54 | 55 | 56 | @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) 57 | .border-1px 58 | &::after 59 | -webkit-transform: scaleY(0.7) 60 | transform: scaleY(0.7) 61 | 62 | @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) 63 | .border-1px 64 | &::after 65 | -webkit-transform: scaleY(0.5) 66 | transform: scaleY(0.5) 67 | -------------------------------------------------------------------------------- /src/assets/styl/index.styl: -------------------------------------------------------------------------------- 1 | @import './mixin.styl' 2 | @import './base.styl' 3 | 4 | -------------------------------------------------------------------------------- /src/assets/styl/mixin.styl: -------------------------------------------------------------------------------- 1 | border-1px($color) 2 | position: relative 3 | &:after 4 | display: block 5 | position: absolute 6 | left: 0 7 | bottom: 0 8 | border-top 1px solid $color 9 | width: 100% 10 | content: '' 11 | 12 | border-none() 13 | &:after 14 | display: none 15 | 16 | bg-image($url) 17 | background-image url($url + "@2x.png") 18 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio) 19 | background-image url($url + "@3x.png") 20 | 21 | // 多行文本溢出显示省略号 22 | // line-height:0.38rem----------------------------------------------------------------------------- 23 | . 24 | line-clamp($line) 25 | overflow: hidden 26 | display: -webkit-box 27 | -webkit-line-clamp: $line 28 | -webkit-box-orient: vertical 29 | word-break: break-all 30 | text-overflow: ellipsis 31 | 32 | //line-height: $line-height; 33 | //max-height: $line-height * $line + .2rem; 34 | 35 | // 单行文本溢出显示省略号 36 | // @align: justify----------------------------------------------------------------------------- 37 | . 38 | text-overflow($align) 39 | word-wrap: normal 40 | text-overflow: ellipsis 41 | white-space: nowrap 42 | overflow: hidden 43 | text-align: $align 44 | 45 | // 一像素边框 46 | // ----------------------------------------------------------------------------- 47 | //.top-line(@color, @zindex: 0) { 48 | // content: ''; 49 | // position: absolute; 50 | // z-index: @zindex; 51 | // top: -1px; 52 | // left: 0; 53 | // width: 100%; 54 | // height: 1px; 55 | // background-image: linear-gradient(0deg, @color 50%, transparent 50%); 56 | //} 57 | // 58 | //.bottom-line(@color, @zindex: 0) { 59 | // height: 1px; 60 | // position: absolute; 61 | // z-index: @zindex; 62 | // bottom: 0; 63 | // left: 0; 64 | // content: ''; 65 | // width: 100%; 66 | // background-image: linear-gradient(0deg, @color 50%, transparent 50%); 67 | //} 68 | // 69 | //.left-line(@color, @zindex: 0) { 70 | // content: ''; 71 | // position: absolute; 72 | // z-index: @zindex; 73 | // top: 0; 74 | // left: 0; 75 | // width: 1px; 76 | // height: 100%; 77 | // background-image: linear-gradient(to left, @color 50%, transparent 50%); 78 | //} 79 | // 80 | //.right-line(@color, @zindex: 0) { 81 | // content: ''; 82 | // position: absolute; 83 | // z-index: @zindex; 84 | // top: 0; 85 | // right: 0; 86 | // width: 1px; 87 | // height: 100%; 88 | // background-image: linear-gradient(to right, @color 50%, transparent 50%); 89 | //} 90 | -------------------------------------------------------------------------------- /src/components/head-search.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 93 | 94 | 154 | -------------------------------------------------------------------------------- /src/components/list/list.vue: -------------------------------------------------------------------------------- 1 | 108 | 109 | 129 | 130 | 718 | -------------------------------------------------------------------------------- /src/components/mask/mask.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 68 | 69 | 83 | -------------------------------------------------------------------------------- /src/components/mint-ui-index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Switch, Cell, Radio, Spinner, Loadmore, Actionsheet, DatetimePicker, Field, Button, Search } from 'mint-ui' 3 | 4 | // Vue.component('check-box', require('./checkBox.vue').default) 5 | // mint里的组件使用注册 6 | var mintComponent = { 7 | 'mint-switch': Switch, 8 | 'mint-cell': Cell, 9 | 'mint-radio': Radio, 10 | 'mint-spinner': Spinner, 11 | 'mint-loadmore': Loadmore, 12 | 'mint-actionsheet': Actionsheet, 13 | 'mint-date': DatetimePicker, 14 | 'mint-field': Field, 15 | 'mint-button': Button, 16 | 'mint-search': Search 17 | } 18 | for (let key in mintComponent) { 19 | Vue.component(key, mintComponent[key]) 20 | } 21 | -------------------------------------------------------------------------------- /src/components/popup/popup.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 87 | 88 | 101 | -------------------------------------------------------------------------------- /src/components/scroll/bubble.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 123 | -------------------------------------------------------------------------------- /src/components/scroll/loading.vue: -------------------------------------------------------------------------------- 1 | 6 | 12 | 19 | -------------------------------------------------------------------------------- /src/components/scroll/scroll.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 306 | 307 | 368 | -------------------------------------------------------------------------------- /src/components/scrollTab/scroll-tab.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 159 | 160 | 197 | -------------------------------------------------------------------------------- /src/components/slider/slide.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 211 | 212 | 254 | -------------------------------------------------------------------------------- /src/components/ydui-index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import { ActionSheet } from 'vue-ydui/dist/lib.rem/actionsheet' 4 | import { Button, ButtonGroup } from 'vue-ydui/dist/lib.rem/button' 5 | import { TabBar, TabBarItem } from 'vue-ydui/dist/lib.rem/tabbar' 6 | import { Icons } from 'vue-ydui/dist/lib.rem/icons' 7 | import { RollNotice, RollNoticeItem } from 'vue-ydui/dist/lib.rem/rollnotice' 8 | import { Tab, TabPanel } from 'vue-ydui/dist/lib.rem/tab' 9 | import { Badge } from 'vue-ydui/dist/lib.rem/badge' 10 | import { Popup } from 'vue-ydui/dist/lib.rem/popup' 11 | import { Slider, SliderItem } from 'vue-ydui/dist/lib.rem/slider' 12 | import { Input } from 'vue-ydui/dist/lib.rem/input' 13 | import { Search } from 'vue-ydui/dist/lib.rem/search' 14 | import { CellGroup, CellItem } from 'vue-ydui/dist/lib.rem/cell' 15 | Vue.component(Button.name, Button) 16 | Vue.component(ButtonGroup.name, ButtonGroup) 17 | Vue.component(ActionSheet.name, ActionSheet) 18 | Vue.component(TabBar.name, TabBar) 19 | Vue.component(TabBarItem.name, TabBarItem) 20 | Vue.component(Icons.name, Icons) 21 | Vue.component(RollNotice.name, RollNotice) 22 | Vue.component(RollNoticeItem.name, RollNoticeItem) 23 | Vue.component(Tab.name, Tab) 24 | Vue.component(TabPanel.name, TabPanel) 25 | Vue.component(Badge.name, Badge) 26 | Vue.component(Popup.name, Popup) 27 | Vue.component(Slider.name, Slider) 28 | Vue.component(SliderItem.name, SliderItem) 29 | Vue.component(Input.name, Input) 30 | Vue.component(Search.name, Search) 31 | Vue.component(CellGroup.name, CellGroup); 32 | Vue.component(CellItem.name, CellItem); 33 | -------------------------------------------------------------------------------- /src/lib/plugins/refresh-rem.js: -------------------------------------------------------------------------------- 1 | // let refreshRem = function (doc, win) { 2 | // let docEl = doc.documentElement, recalc, 3 | // resizeEvt = 'orientationchange' in window 4 | // ? 'orientationchange' 5 | // : 'resize' 6 | // recalc = () => { 7 | // let clientWidth = docEl.clientWidth 8 | // if (!clientWidth) return 9 | // docEl.style.fontSize = clientWidth / 750 * 100 + 'px' 10 | // // else if (clientWidth <= 320) 11 | // // docEl.style.fontSize = 85.333 + 'px'; 12 | // // else if (clientWidth >= 540) 13 | // // docEl.style.fontSize = '144px'; 14 | // // else 15 | // // docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'; 16 | // } 17 | // if (!doc.addEventListener) return 18 | // win.addEventListener(resizeEvt, recalc, false) 19 | // doc.addEventListener('DOMContentLoaded', recalc, false) 20 | // } 21 | // refreshRem(document, window) 22 | // export default refreshRem 23 | /** 24 | * YDUI 可伸缩布局方案 25 | * rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem 26 | */ 27 | !function (window) { 28 | 29 | /* 设计图文档宽度 */ 30 | var docWidth = 750 31 | 32 | var doc = window.document, 33 | docEl = doc.documentElement, 34 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' 35 | 36 | var recalc = (function refreshRem () { 37 | var clientWidth = docEl.getBoundingClientRect().width 38 | 39 | /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */ 40 | docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px' 41 | 42 | return refreshRem 43 | })() 44 | 45 | /* 添加倍屏标识，安卓倍屏为1 */ 46 | docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1) 47 | 48 | if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { 49 | /* 添加IOS标识 */ 50 | doc.documentElement.classList.add('ios') 51 | /* IOS8以上给html添加hairline样式，以便特殊处理 */ 52 | if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) { 53 | doc.documentElement.classList.add('hairline') 54 | } 55 | } 56 | 57 | if (!doc.addEventListener) return 58 | window.addEventListener(resizeEvt, recalc, false) 59 | doc.addEventListener('DOMContentLoaded', recalc, false) 60 | 61 | }(window) 62 | -------------------------------------------------------------------------------- /src/lib/plugins/vue-global.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog' 3 | 4 | export function init () { 5 | Vue.prototype.$goRoute = function (pageRoute, openInNewTab = false) { 6 | if (openInNewTab) { 7 | let href = this.$router.resolve(pageRoute).href 8 | window.open(href, '_blank') 9 | } else { 10 | if (pageRoute) { 11 | this.$router.push(pageRoute) 12 | } 13 | } 14 | } 15 | Vue.prototype.$dialog = { 16 | confirm: Confirm, 17 | alert: Alert, 18 | toast: Toast, 19 | notify: Notify, 20 | loading: Loading 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/lib/svg-icon/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 35 | 44 | -------------------------------------------------------------------------------- /src/lib/svg-icon/svg-icon.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import SvgIcon from './index.vue';// svg组件 3 | 4 | // register globally 5 | Vue.component('svg-icon', SvgIcon); 6 | 7 | const requireAll = requireContext => requireContext.keys().map(requireContext); 8 | const req = require.context('./svg', false, /\.svg$/); 9 | const iconMap = requireAll(req); 10 | // console.log(iconMap) -------------------------------------------------------------------------------- /src/lib/svg-icon/svg/1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 16 | 34 | 35 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | import 'vue-ydui/dist/ydui.base.css' 6 | // register components 7 | import './components/mint-ui-index' 8 | import './components/ydui-index' 9 | // refreshRem 10 | import '../src/lib/plugins/refresh-rem' 11 | import '../src/assets/iconfont/iconfont.css' 12 | import VueVideoPlayer from 'vue-video-player' 13 | import 'video.js/dist/video-js.css' 14 | import 'vue-video-player/src/custom-theme.css' 15 | Vue.use(VueVideoPlayer/* { 16 | options: global default options, 17 | events: global videojs events 18 | } */) 19 | //vue-socket.io 20 | // import VueSocketio from 'vue-socket.io' 21 | // import socketio from 'socket.io-client' 22 | // Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store)//xxx填后台给的socket地址 23 | // 全局配置 24 | require('@/lib/plugins/vue-global').init() 25 | 26 | Vue.config.productionTip = false 27 | 28 | new Vue({ 29 | router, 30 | store, 31 | render: h => h(App) 32 | }).$mount('#app') 33 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | mode: 'history', 8 | base: process.env.BASE_URL, 9 | routes: [ 10 | { 11 | path: '/index', 12 | name: 'index', 13 | component: () => import(/* webpackChunkName: "about" */ './views/index.vue') 14 | }, 15 | { 16 | path: '/test', 17 | component: () => import(/* webpackChunkName: "about" */ './views/test.vue') 18 | }, 19 | { 20 | path: '/watermelonVideo', 21 | name: 'watermelonVideo', 22 | component: () => import(/* webpackChunkName: "about" */ './views/watermelon-video.vue') 23 | }, 24 | { 25 | path: '/smallVideo', 26 | name: 'smallVideo', 27 | component: () => import(/* webpackChunkName: "about" */ './views/small-video.vue') 28 | }, 29 | { 30 | path: '/search', 31 | name: 'search', 32 | component: () => import(/* webpackChunkName: "about" */ './views/search.vue') 33 | }, 34 | { 35 | path: '/me', 36 | name: 'me', 37 | component: () => import(/* webpackChunkName: "about" */ './views/me.vue') 38 | }, 39 | { 40 | path: '/*', 41 | redirect: '/index' 42 | } 43 | ] 44 | }) 45 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | 9 | }, 10 | mutations: { 11 | 12 | }, 13 | actions: { 14 | 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /src/util/assist.js: -------------------------------------------------------------------------------- 1 | const isColor = function (value) { 2 | const colorReg = /^#([a-fA-F0-9]){3}(([a-fA-F0-9]){3})?$/ 3 | const rgbaReg = /^[rR][gG][bB][aA]\(\s*((25[0-5]|2[0-4]\d|1?\d{1,2})\s*,\s*){3}\s*(\.|\d+\.)?\d+\s*\)$/ 4 | const rgbReg = /^[rR][gG][bB]\(\s*((25[0-5]|2[0-4]\d|1?\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1?\d{1,2})\s*\)$/ 5 | 6 | return colorReg.test(value) || rgbaReg.test(value) || rgbReg.test(value) 7 | } 8 | 9 | const isIOS = !!(window.navigator && window.navigator.userAgent || '').match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 10 | 11 | const pageScroll = (function () { 12 | const fn = function (e) { 13 | e.preventDefault() 14 | e.stopPropagation() 15 | } 16 | let islock = false 17 | 18 | return { 19 | lock(el) { 20 | if (islock) return 21 | islock = true; 22 | (el || document).addEventListener('touchmove', fn) 23 | }, 24 | unlock(el) { 25 | islock = false; 26 | (el || document).removeEventListener('touchmove', fn) 27 | } 28 | } 29 | })() 30 | 31 | const getScrollview = function (el) { 32 | let currentNode = el 33 | while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) { 34 | let overflowY = document.defaultView.getComputedStyle(currentNode).overflowY 35 | if (overflowY === 'scroll' || overflowY === 'auto') { 36 | return currentNode 37 | } 38 | currentNode = currentNode.parentNode 39 | } 40 | return window 41 | } 42 | 43 | const preventScroll = (function () { 44 | return { 45 | lock(el) { 46 | isIOS && addClass(el || document.body, 'g-fix-ios-prevent-scroll') 47 | }, 48 | unlock(el) { 49 | isIOS && removeClass(el || document.body, 'g-fix-ios-prevent-scroll') 50 | } 51 | } 52 | })() 53 | 54 | const hasClass = function (elem, cls) { 55 | cls = cls || '' 56 | if (cls.replace(/\s/g, '').length === 0 || !elem) return false 57 | return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ') 58 | } 59 | 60 | const addClass = function (ele, cls) { 61 | if (!hasClass(ele, cls)) { 62 | ele.className = ele.className === '' ? cls : ele.className + ' ' + cls 63 | } 64 | } 65 | 66 | const removeClass = function (ele, cls) { 67 | if (hasClass(ele, cls)) { 68 | let newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ' 69 | while (newClass.indexOf(' ' + cls + ' ') >= 0) { 70 | newClass = newClass.replace(' ' + cls + ' ', ' ') 71 | } 72 | ele.className = newClass.replace(/^\s+|\s+$/g, '') 73 | } 74 | } 75 | 76 | const getRect = (el) => { 77 | if (el instanceof window.SVGElement) { 78 | let rect = el.getBoundingClientRect() 79 | return { 80 | top: rect.top, 81 | left: rect.left, 82 | width: rect.width, 83 | height: rect.height 84 | } 85 | } 86 | else { 87 | return { 88 | top: el.offsetTop, 89 | left: el.offsetLeft, 90 | width: el.offsetWidth, 91 | height: el.offsetHeight 92 | } 93 | } 94 | } 95 | 96 | export { isColor, addClass, removeClass, getScrollview, isIOS, preventScroll, pageScroll, getRect } 97 | -------------------------------------------------------------------------------- /src/views/me.vue: -------------------------------------------------------------------------------- 1 | 104 | 105 | 126 | 127 | 201 | -------------------------------------------------------------------------------- /src/views/search.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 88 | 89 | 215 | -------------------------------------------------------------------------------- /src/views/small-video.vue: -------------------------------------------------------------------------------- 1 | 118 | 119 | 869 | 870 | 931 | -------------------------------------------------------------------------------- /src/views/test.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 107 | 108 | 137 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | const path = require('path') 3 | 4 | module.exports = { 5 | // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致 6 | publicPath: './', 7 | // 输出文件目录 8 | outputDir: 'dist', 9 | // eslint-loader 是否在保存的时候检查 10 | lintOnSave: true, 11 | // 是否使用包含运行时编译器的 Vue 构建版本 12 | runtimeCompiler: false, 13 | // 生产环境是否生成 sourceMap 文件 14 | productionSourceMap: false, 15 | // 生成的 HTML 中的 和