├── .gitignore ├── README.md ├── Vue.config.js ├── babel.config.js ├── bilibili.gif ├── http.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── 404_2.png ├── bannerTopImg.png ├── defaultImg.jpg ├── fonts │ ├── demo.css │ ├── demo_index.html │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.json │ ├── iconfont.svg │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 ├── notFound.png └── styles │ └── normalize.css ├── components ├── BackTop │ └── index.vue ├── Cover │ └── index.vue ├── Login │ ├── LoginBtn.vue │ ├── LoginText.vue │ └── LoginTop.vue └── NavBar │ └── index.vue ├── main.js ├── router ├── detail.js ├── edit.js ├── home.js ├── index.js ├── login.js ├── notfound.js ├── register.js └── userinfo.js ├── store └── index.js └── views ├── Detail ├── Comment.vue ├── CommentTitle.vue ├── Detail.vue ├── Reply.vue └── VideoInfo.vue ├── Edit ├── Edit.vue ├── EditBanner.vue └── EditButtom.vue ├── Home └── Home.vue ├── Login └── Login.vue ├── Notfound └── Notfound.vue ├── Register └── Register.vue └── UserInfo ├── UserArticle.vue ├── UserDetail.vue └── UserInfo.vue /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-bilibili 2 | 3 | 仿b站移动端开发，使用vue-cli4.x脚手架创建项目 4 | 5 | 技术栈 vue2.6 + vue-router + axios + ES6 + less + flex + vant 6 | 7 | vue路由采用history模式和懒加载的方式 8 | 9 | 使用vw单位实现自适应布局 10 | 11 | 使用阿里妈妈矢量图标库（iconfont） 12 | 13 | 14 | 15 | 16 | ## 项目大致效果动图 17 | ![image](https://github.com/Purelangzi/vue-bilibili/blob/master/bilibili.gif) 18 | 19 | 20 | ## 功能 21 | - [x] 登录功能 22 | - [x] 注册功能 23 | - [x] 权限验证 24 | - [x] 筛选分类 25 | - [x] 上传头像 26 | - [x] 编辑个人信息 27 | - [x] 下拉加载 28 | - [x] 返回顶部 29 | - [x] 视频播放 30 | - [x] 推荐视频 31 | - [x] 收藏视频 32 | - [x] 关注用户 33 | - [x] 盖楼评论 34 | - [x] 发表评论 35 | 36 | 37 | 38 | 接口（已过期） 39 | 40 | http://112.74.99.5:3000/web/api 41 | 42 | 43 | ## Project setup 44 | ``` 45 | npm install 46 | ``` 47 | 48 | ### Compiles and hot-reloads for development 49 | ``` 50 | npm run serve 51 | ``` 52 | 53 | ### Compiles and minifies for production 54 | ``` 55 | npm run build 56 | ``` -------------------------------------------------------------------------------- /Vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 基本路径 3 | publicPath: '/vue-bilibili/', 4 | // 输出文件目录 5 | outputDir: 'dist', 6 | // eslint-loader 是否在保存的时候检查 7 | //lintOnSave: true, 8 | // webpack配置 9 | // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 10 | chainWebpack: () => { }, 11 | configureWebpack: () => { }, 12 | // 生产环境是否生成 sourceMap 文件 13 | productionSourceMap: true, 14 | // css相关配置 15 | css: { 16 | // 是否使用css分离插件 ExtractTextPlugin 17 | extract: true, 18 | // 开启 CSS source maps? 19 | sourceMap: false, 20 | // css预设器配置项 21 | loaderOptions: {}, 22 | // 启用 CSS modules for all css / pre-processor files. 23 | requireModuleExtension: true 24 | }, 25 | // use thread-loader for babel & TS in production build 26 | // enabled by default if the machine has more than 1 cores 27 | parallel: require('os').cpus().length > 1, 28 | // webpack-dev-server 相关配置 29 | devServer: { 30 | open: true, 31 | host: 'localhost', 32 | port: 8080, 33 | https: false, 34 | hotOnly: false, 35 | // proxy: {// 设置代理 36 | // }, 37 | before: app => { } 38 | }, 39 | // 第三方插件配置 40 | pluginOptions: { 41 | // ... 42 | } 43 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /bilibili.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/bilibili.gif -------------------------------------------------------------------------------- /http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import router from './src/router' 3 | import Vue from 'vue' 4 | // 使用自定义配置创建axios实例 5 | const http = axios.create({ 6 | // 基础地址 http://112.74.99.5:3000/web/api 7 | baseURL: 'http://112.74.99.5:3000/web/api' 8 | }) 9 | 10 | // 添加一个请求拦截器 11 | http.interceptors.request.use(function (config) { 12 | // 在请求发送之前判断本地存储是否有token和id 13 | if (localStorage.getItem('token') && localStorage.getItem('id')) { 14 | //配置请求头 15 | config.headers.Authorization = 'Bearer ' + localStorage.getItem('token') 16 | } 17 | return config; 18 | }, function (error) { 19 | // 请求错误怎么办 20 | return Promise.reject(error); 21 | }); 22 | 23 | // 添加一个响应拦截器 24 | http.interceptors.response.use(function (response) { 25 | return response; 26 | }, function (error) { 27 | // 判断响应错误对象的状态码是否401或402 28 | if (error.response.status == 401 || error.response.status == 402) { 29 | // 提示用户登录 30 | router.push('/login') 31 | Vue.prototype.$msg.fail(error.response.data.message) 32 | } 33 | return Promise.reject(error); 34 | }); 35 | 36 | export default http -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-bilibili", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.19.2", 11 | "core-js": "^3.6.5", 12 | "vant": "^2.8.5", 13 | "vue": "^2.6.11", 14 | "vue-router": "^3.2.0", 15 | "vuex": "^3.4.0" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~4.4.0", 19 | "@vue/cli-plugin-router": "~4.4.0", 20 | "@vue/cli-plugin-vuex": "~4.4.0", 21 | "@vue/cli-service": "~4.4.0", 22 | "less": "^3.0.4", 23 | "less-loader": "^5.0.0", 24 | "vue-template-compiler": "^2.6.11" 25 | }, 26 | "browserslist": [ 27 | "> 1%", 28 | "last 2 versions", 29 | "not dead" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <%= htmlWebpackPlugin.options.title %> 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /src/assets/404_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/404_2.png -------------------------------------------------------------------------------- /src/assets/bannerTopImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/bannerTopImg.png -------------------------------------------------------------------------------- /src/assets/defaultImg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/defaultImg.jpg -------------------------------------------------------------------------------- /src/assets/fonts/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/assets/fonts/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 | 25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    返回顶部 (4)
    36 |
    &#xe64b;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    关注 (1)
    42 |
    &#xe61d;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    禁止
    48 |
    &#xe6aa;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    点赞
    54 |
    &#xe60c;
    55 |
    • 56 | 57 |
  • 58 | 59 |
    file-text
    60 |
    &#xe600;
    61 |
    • 62 | 63 |
  • 64 | 65 |
    CN_bilibili B
    66 |
    &#xe64e;
    67 |
    • 68 | 69 |
  • 70 | 71 |
    UP主_32
    72 |
    &#xe665;
    73 |
    • 74 | 75 |
  • 76 | 77 |
    BILIBILI_LOGO
    78 |
    &#xe6b4;
    79 |
    • 80 | 81 |
  • 82 | 83 |
    播放
    84 |
    &#xe624;
    85 |
    • 86 | 87 |
  • 88 | 89 |
    Star
    90 |
    &#xe6c3;
    91 |
    • 92 | 93 |
  • 94 | 95 |
    分享
    96 |
    &#xe625;
    97 |
    • 98 | 99 |
  • 100 | 101 |
    点赞
    102 |
    &#xe644;
    103 |
    • 104 | 105 |
  • 106 | 107 |
    下载2
    108 |
    &#xe8ae;
    109 |
    • 110 | 111 |
  • 112 | 113 |
    search
    114 |
    &#xe7c4;
    115 |
    • 116 | 117 |
118 |
119 |

Unicode 引用

120 |
121 | 122 |

Unicode 是字体在网页端最原始的应用方式，特点是：

123 |
    124 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 125 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 126 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 127 |
128 |
129 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

130 |
131 |

Unicode 使用步骤如下：

132 |

第一步：拷贝项目下面生成的 @font-face

133 | 
@font-face {
135 |   font-family: 'iconfont';
136 |   src: url('iconfont.eot');
137 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
138 |       url('iconfont.woff2') format('woff2'),
139 |       url('iconfont.woff') format('woff'),
140 |       url('iconfont.ttf') format('truetype'),
141 |       url('iconfont.svg#iconfont') format('svg');
142 | }
143 |
144 |

第二步：定义使用 iconfont 的样式

145 | 
.iconfont {
147 |   font-family: "iconfont" !important;
148 |   font-size: 16px;
149 |   font-style: normal;
150 |   -webkit-font-smoothing: antialiased;
151 |   -moz-osx-font-smoothing: grayscale;
152 | }
153 |
154 |

第三步：挑选相应图标并获取字体编码，应用于页面

155 | 
156 | <span class="iconfont">&#x33;</span>
158 |
159 |
160 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

161 |
162 |
163 |
164 |
165 |
    166 | 167 |
  • 168 | 169 |
    170 | 返回顶部 (4) 171 |
    172 |
    .icon-fanhuidingbu4 173 |
    174 |
    • 175 | 176 |
  • 177 | 178 |
    179 | 关注 (1) 180 |
    181 |
    .icon-guanzhu1 182 |
    183 |
    • 184 | 185 |
  • 186 | 187 |
    188 | 禁止 189 |
    190 |
    .icon-Group- 191 |
    192 |
    • 193 | 194 |
  • 195 | 196 |
    197 | 点赞 198 |
    199 |
    .icon-dianzan 200 |
    201 |
    • 202 | 203 |
  • 204 | 205 |
    206 | file-text 207 |
    208 |
    .icon-file-text 209 |
    210 |
    • 211 | 212 |
  • 213 | 214 |
    215 | CN_bilibili B 216 |
    217 |
    .icon-CN_bilibiliB 218 |
    219 |
    • 220 | 221 |
  • 222 | 223 |
    224 | UP主_32 225 |
    226 |
    .icon-UPzhu 227 |
    228 |
    • 229 | 230 |
  • 231 | 232 |
    233 | BILIBILI_LOGO 234 |
    235 |
    .icon-bilibili 236 |
    237 |
    • 238 | 239 |
  • 240 | 241 |
    242 | 播放 243 |
    244 |
    .icon-bofang 245 |
    246 |
    • 247 | 248 |
  • 249 | 250 |
    251 | Star 252 |
    253 |
    .icon-Star 254 |
    255 |
    • 256 | 257 |
  • 258 | 259 |
    260 | 分享 261 |
    262 |
    .icon-arrow- 263 |
    264 |
    • 265 | 266 |
  • 267 | 268 |
    269 | 点赞 270 |
    271 |
    .icon-dianzan1 272 |
    273 |
    • 274 | 275 |
  • 276 | 277 |
    278 | 下载2 279 |
    280 |
    .icon-xiazai 281 |
    282 |
    • 283 | 284 |
  • 285 | 286 |
    287 | search 288 |
    289 |
    .icon-search 290 |
    291 |
    • 292 | 293 |
294 |
295 |

font-class 引用

296 |
297 | 298 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

299 |

与 Unicode 使用方式相比，具有如下特点：

300 |
    301 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 302 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 303 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 304 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 305 |
306 |

使用步骤如下：

307 |

第一步：引入项目下面生成的 fontclass 代码：

308 | 
<link rel="stylesheet" href="./iconfont.css">
309 |
310 |

第二步：挑选相应图标并获取类名，应用于页面：

311 | 
<span class="iconfont icon-xxx"></span>
312 |
313 |
314 |

" 315 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

316 |
317 |
318 |
319 |
320 |
    321 | 322 |
  • 323 | 326 |
    返回顶部 (4)
    327 |
    #icon-fanhuidingbu4
    328 |
    • 329 | 330 |
  • 331 | 334 |
    关注 (1)
    335 |
    #icon-guanzhu1
    336 |
    • 337 | 338 |
  • 339 | 342 |
    禁止
    343 |
    #icon-Group-
    344 |
    • 345 | 346 |
  • 347 | 350 |
    点赞
    351 |
    #icon-dianzan
    352 |
    • 353 | 354 |
  • 355 | 358 |
    file-text
    359 |
    #icon-file-text
    360 |
    • 361 | 362 |
  • 363 | 366 |
    CN_bilibili B
    367 |
    #icon-CN_bilibiliB
    368 |
    • 369 | 370 |
  • 371 | 374 |
    UP主_32
    375 |
    #icon-UPzhu
    376 |
    • 377 | 378 |
  • 379 | 382 |
    BILIBILI_LOGO
    383 |
    #icon-bilibili
    384 |
    • 385 | 386 |
  • 387 | 390 |
    播放
    391 |
    #icon-bofang
    392 |
    • 393 | 394 |
  • 395 | 398 |
    Star
    399 |
    #icon-Star
    400 |
    • 401 | 402 |
  • 403 | 406 |
    分享
    407 |
    #icon-arrow-
    408 |
    • 409 | 410 |
  • 411 | 414 |
    点赞
    415 |
    #icon-dianzan1
    416 |
    • 417 | 418 |
  • 419 | 422 |
    下载2
    423 |
    #icon-xiazai
    424 |
    • 425 | 426 |
  • 427 | 430 |
    search
    431 |
    #icon-search
    432 |
    • 433 | 434 |
435 |
436 |

Symbol 引用

437 |
438 | 439 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 440 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

441 |
    442 |
  • 支持多色图标了，不再受单色限制。
    • 443 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 444 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 445 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 446 |
447 |

使用步骤如下：

448 |

第一步：引入项目下面生成的 symbol 代码：

449 | 
<script src="./iconfont.js"></script>
450 |
451 |

第二步：加入通用 CSS 代码（引入一次就行）：

452 | 
<style>
453 | .icon {
454 |   width: 1em;
455 |   height: 1em;
456 |   vertical-align: -0.15em;
457 |   fill: currentColor;
458 |   overflow: hidden;
459 | }
460 | </style>
461 |
462 |

第三步：挑选相应图标并获取类名，应用于页面：

463 | 
<svg class="icon" aria-hidden="true">
464 |   <use xlink:href="#icon-xxx"></use>
465 | </svg>
466 |
467 |
468 |
469 | 470 |
471 |
472 | 491 | 492 | 493 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1592989714174'); /* IE9 */ 3 | src: url('iconfont.eot?t=1592989714174#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=1592989714174') format('woff'), 6 | url('iconfont.ttf?t=1592989714174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1592989714174#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-fanhuidingbu4:before { 19 | content: "\e64b"; 20 | } 21 | 22 | .icon-guanzhu1:before { 23 | content: "\e61d"; 24 | } 25 | 26 | .icon-Group-:before { 27 | content: "\e6aa"; 28 | } 29 | 30 | .icon-dianzan:before { 31 | content: "\e60c"; 32 | } 33 | 34 | .icon-file-text:before { 35 | content: "\e600"; 36 | } 37 | 38 | .icon-CN_bilibiliB:before { 39 | content: "\e64e"; 40 | } 41 | 42 | .icon-UPzhu:before { 43 | content: "\e665"; 44 | } 45 | 46 | .icon-bilibili:before { 47 | content: "\e6b4"; 48 | } 49 | 50 | .icon-bofang:before { 51 | content: "\e624"; 52 | } 53 | 54 | .icon-Star:before { 55 | content: "\e6c3"; 56 | } 57 | 58 | .icon-arrow-:before { 59 | content: "\e625"; 60 | } 61 | 62 | .icon-dianzan1:before { 63 | content: "\e644"; 64 | } 65 | 66 | .icon-xiazai:before { 67 | content: "\e8ae"; 68 | } 69 | 70 | .icon-search:before { 71 | content: "\e7c4"; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(c){var t,l,e,i,a,o,h,n='',s=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(s&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function d(){o||(o=!0,i())}l=function(){var c,t,l,e,i,a=document.createElement("div");a.innerHTML=n,n=null,(c=a.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",t=c,(l=document.body).firstChild?(e=t,(i=l.firstChild).parentNode.insertBefore(e,i)):l.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),l()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=l,a=c.document,o=!1,(h=function(){try{a.documentElement.doScroll("left")}catch(c){return void setTimeout(h,50)}d()})(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,d())})}(window); -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "1886602", 3 | "name": "bilibili", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "729522", 10 | "name": "返回顶部 (4)", 11 | "font_class": "fanhuidingbu4", 12 | "unicode": "e64b", 13 | "unicode_decimal": 58955 14 | }, 15 | { 16 | "icon_id": "887909", 17 | "name": "关注 (1)", 18 | "font_class": "guanzhu1", 19 | "unicode": "e61d", 20 | "unicode_decimal": 58909 21 | }, 22 | { 23 | "icon_id": "4685772", 24 | "name": "禁止", 25 | "font_class": "Group-", 26 | "unicode": "e6aa", 27 | "unicode_decimal": 59050 28 | }, 29 | { 30 | "icon_id": "579286", 31 | "name": "点赞", 32 | "font_class": "dianzan", 33 | "unicode": "e60c", 34 | "unicode_decimal": 58892 35 | }, 36 | { 37 | "icon_id": "1199104", 38 | "name": "file-text", 39 | "font_class": "file-text", 40 | "unicode": "e600", 41 | "unicode_decimal": 58880 42 | }, 43 | { 44 | "icon_id": "2041685", 45 | "name": "CN_bilibili B", 46 | "font_class": "CN_bilibiliB", 47 | "unicode": "e64e", 48 | "unicode_decimal": 58958 49 | }, 50 | { 51 | "icon_id": "2154214", 52 | "name": "UP主_32", 53 | "font_class": "UPzhu", 54 | "unicode": "e665", 55 | "unicode_decimal": 58981 56 | }, 57 | { 58 | "icon_id": "2306764", 59 | "name": "BILIBILI_LOGO", 60 | "font_class": "bilibili", 61 | "unicode": "e6b4", 62 | "unicode_decimal": 59060 63 | }, 64 | { 65 | "icon_id": "2674474", 66 | "name": "播放", 67 | "font_class": "bofang", 68 | "unicode": "e624", 69 | "unicode_decimal": 58916 70 | }, 71 | { 72 | "icon_id": "7471008", 73 | "name": "Star", 74 | "font_class": "Star", 75 | "unicode": "e6c3", 76 | "unicode_decimal": 59075 77 | }, 78 | { 79 | "icon_id": "7939955", 80 | "name": "分享", 81 | "font_class": "arrow-", 82 | "unicode": "e625", 83 | "unicode_decimal": 58917 84 | }, 85 | { 86 | "icon_id": "9121572", 87 | "name": "点赞", 88 | "font_class": "dianzan1", 89 | "unicode": "e644", 90 | "unicode_decimal": 58948 91 | }, 92 | { 93 | "icon_id": "9646608", 94 | "name": "下载2", 95 | "font_class": "xiazai", 96 | "unicode": "e8ae", 97 | "unicode_decimal": 59566 98 | }, 99 | { 100 | "icon_id": "14342009", 101 | "name": "search", 102 | "font_class": "search", 103 | "unicode": "e7c4", 104 | "unicode_decimal": 59332 105 | } 106 | ] 107 | } 108 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/fonts/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/notFound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Purelangzi/vue-bilibili/c312abf14c39b426ba762e6e8591b2bafecbc341/src/assets/notFound.png -------------------------------------------------------------------------------- /src/assets/styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /src/components/BackTop/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/Cover/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /src/components/Login/LoginBtn.vue: -------------------------------------------------------------------------------- 1 | s 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Login/LoginText.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/Login/LoginTop.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/NavBar/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 28 | 29 | -------------------------------------------------------------------------------- /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 | 6 | // 引入初始化样式 7 | import './assets/styles/normalize.css' 8 | 9 | // 导入所有vant组件 10 | import Vant from 'vant'; 11 | import 'vant/lib/index.css'; 12 | //导入vant中的Toast轻提示组件 13 | import {Toast} from 'vant'; 14 | // 引入封装的axios请求配置 15 | import http from '../http' 16 | // 引入字体图标样式 17 | import '@/assets/fonts/iconfont.css' 18 | 19 | // 挂载到vue原型上，方便使用 20 | Vue.prototype.$http = http 21 | Vue.prototype.$msg = Toast 22 | 23 | 24 | Vue.use(Vant); 25 | 26 | Vue.config.productionTip = false 27 | 28 | 29 | new Vue({ 30 | router, 31 | store, 32 | render: h => h(App) 33 | }).$mount('#app') 34 | -------------------------------------------------------------------------------- /src/router/detail.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name:'detail', 3 | path:'/detail/:id', 4 | component: () => import('@/views/Detail/Detail') 5 | } -------------------------------------------------------------------------------- /src/router/edit.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'edit', 3 | path: '/edit', 4 | meta: { 5 | isToken: true 6 | }, 7 | component: () => import('@/views/Edit/Edit') 8 | } -------------------------------------------------------------------------------- /src/router/home.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name:'home', 3 | path:'/home', 4 | meta:{ 5 | keepAlive:true 6 | }, 7 | component:()=>import('@/views/Home/Home') 8 | } -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | 5 | Vue.use(VueRouter) 6 | 7 | // 解决vue-router在3.0版本以上重复点菜单报错的问题 8 | const originalPush = VueRouter.prototype.push 9 | VueRouter.prototype.push = function push(location) { 10 | return originalPush.call(this, location).catch(err => err) 11 | } 12 | 13 | import register from './register' 14 | import login from './login' 15 | import userinfo from './userinfo' 16 | import edit from './edit' 17 | import home from './home' 18 | import notfound from './notfound' 19 | import detail from './detail' 20 | 21 | const routes = [ 22 | { path: '/', redirect: 'home' }, 23 | register, login, userinfo, edit, home, notfound,detail, 24 | { path: '*', redirect: 'notfound' } 25 | ] 26 | 27 | const router = new VueRouter({ 28 | // 上线环境下需要配置跳转的基础路径 29 | base:'/vue-bilibili/', 30 | mode: 'history', 31 | routes 32 | }) 33 | 34 | //全局前置路由守卫，控制访问权限 35 | router.beforeEach((to, from, next) => { 36 | // 判断是否有isToken同时本地存储里是否有token和id还有页面访问是否不用登录 37 | if (!localStorage.getItem('token') && !localStorage.getItem('id') && to.meta.isToken == true) { 38 | router.push('/login') 39 | Vue.prototype.$msg.fail('请重新登录') 40 | return 41 | } 42 | // 有就放行 43 | next() 44 | }) 45 | 46 | 47 | 48 | export default router 49 | -------------------------------------------------------------------------------- /src/router/login.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'login', 3 | path: '/login', 4 | component: () => import('@/views/Login/Login') 5 | } -------------------------------------------------------------------------------- /src/router/notfound.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name:'notfound', 3 | path:'/notfound', 4 | component:()=>import('@/views/Notfound/Notfound') 5 | } -------------------------------------------------------------------------------- /src/router/register.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'register', 3 | path: '/register', 4 | component: () => import('@/views/Register/Register') 5 | } -------------------------------------------------------------------------------- /src/router/userinfo.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'userinfo', 3 | path: '/userinfo', 4 | // 设置meta字段 5 | meta:{ 6 | // 是否需要权限 7 | isToken:true 8 | }, 9 | component: () => import('@/views/UserInfo/UserInfo') 10 | } -------------------------------------------------------------------------------- /src/store/index.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 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /src/views/Detail/Comment.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 86 | 87 | -------------------------------------------------------------------------------- /src/views/Detail/CommentTitle.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 65 | 66 | -------------------------------------------------------------------------------- /src/views/Detail/Detail.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 247 | 248 | -------------------------------------------------------------------------------- /src/views/Detail/Reply.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 57 | 58 | -------------------------------------------------------------------------------- /src/views/Detail/VideoInfo.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 45 | 46 | -------------------------------------------------------------------------------- /src/views/Edit/Edit.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 147 | 148 | -------------------------------------------------------------------------------- /src/views/Edit/EditBanner.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /src/views/Edit/EditButtom.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /src/views/Home/Home.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 125 | -------------------------------------------------------------------------------- /src/views/Login/Login.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 67 | 68 | -------------------------------------------------------------------------------- /src/views/Notfound/Notfound.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 27 | 28 | -------------------------------------------------------------------------------- /src/views/Register/Register.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 71 | 72 | -------------------------------------------------------------------------------- /src/views/UserInfo/UserArticle.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /src/views/UserInfo/UserDetail.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 52 | 53 | -------------------------------------------------------------------------------- /src/views/UserInfo/UserInfo.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 37 | 38 | --------------------------------------------------------------------------------