├── docs ├── .nojekyll ├── _coverpage.md └── index.html ├── src ├── stylesheets │ ├── _base.scss │ ├── _mixins.scss │ ├── main.scss │ ├── _commons.scss │ └── _reset.scss ├── store │ ├── myCar │ │ ├── state.js │ │ ├── const.js │ │ ├── mutations.js │ │ ├── index.js │ │ ├── getters.js │ │ └── actions.js │ ├── myNum │ │ ├── state.js │ │ ├── getters.js │ │ ├── const.js │ │ ├── index.js │ │ ├── mutations.js │ │ └── actions.js │ └── index.js ├── assets │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.png │ ├── 404.jpg │ ├── logo.png │ ├── loading.gif │ ├── ic_scan_gray.png │ ├── ic_settings.png │ ├── shoppingcar.png │ ├── ic_search_gray.png │ ├── ic_tab_audio_active.png │ ├── ic_tab_audio_normal.png │ ├── ic_tab_group_active.png │ ├── ic_tab_group_normal.png │ ├── ic_tab_home_active.png │ ├── ic_tab_home_normal.png │ ├── ic_tab_mine_active.png │ ├── ic_tab_mine_normal.png │ ├── ic_status_search_user.png │ ├── ic_actionbar_search_icon.png │ ├── ic_tab_broadcast_active.png │ ├── ic_tab_broadcast_normal.png │ ├── ic_create_group_chat_blue.png │ └── index.svg ├── router │ ├── home.js │ ├── audio.js │ ├── group.js │ ├── city.js │ ├── broadcast.js │ ├── moviedetail.js │ ├── mine.js │ └── index.js ├── store.js ├── modules │ ├── rem.js │ ├── directive.js │ └── getImg.js ├── views │ ├── Notfound │ │ └── index.vue │ ├── Group │ │ ├── index.vue │ │ ├── MovieBox.vue │ │ └── MovieItem.vue │ ├── Audio │ │ ├── index.vue │ │ ├── MovieBox.vue │ │ └── MovieItem.vue │ ├── Broadcast │ │ ├── index.vue │ │ ├── MovieBox.vue │ │ └── MovieItem.vue │ ├── Mine │ │ ├── List-1.vue │ │ ├── List.vue │ │ ├── index.vue │ │ └── Car.vue │ ├── Home │ │ ├── Backtop.vue │ │ ├── MovieBox.vue │ │ ├── index.vue │ │ ├── MovieItem.vue │ │ └── MovieDetail.vue │ └── City │ │ └── index.vue ├── App.vue ├── main.js └── components │ ├── Tabbar │ ├── TabItem.vue │ └── index.vue │ ├── DetailBanner │ └── index.vue │ ├── Swiper │ └── index.vue │ ├── Header │ └── index.vue │ └── Banner │ └── index.vue ├── public ├── favicon.ico ├── shoppingcar.png ├── iconfont │ ├── iconfont.eot │ ├── iconfont.ttf │ ├── iconfont.woff │ ├── iconfont.woff2 │ ├── iconfont.css │ ├── iconfont.svg │ ├── iconfont.js │ ├── demo_index.html │ └── demo.css ├── font-awesome │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── less │ │ ├── screen-reader.less │ │ ├── fixed-width.less │ │ ├── larger.less │ │ ├── list.less │ │ ├── core.less │ │ ├── stacked.less │ │ ├── font-awesome.less │ │ ├── bordered-pulled.less │ │ ├── rotated-flipped.less │ │ ├── path.less │ │ ├── animated.less │ │ ├── mixins.less │ │ └── variables.less │ ├── scss │ │ ├── _fixed-width.scss │ │ ├── _screen-reader.scss │ │ ├── _larger.scss │ │ ├── _list.scss │ │ ├── _core.scss │ │ ├── font-awesome.scss │ │ ├── _stacked.scss │ │ ├── _bordered-pulled.scss │ │ ├── _rotated-flipped.scss │ │ ├── _path.scss │ │ ├── _animated.scss │ │ └── _mixins.scss │ └── HELP-US-OUT.txt ├── index.html └── api │ ├── banners.json │ └── goods.json ├── babel.config.js ├── .gitignore ├── package.json └── Vue.config.js /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/stylesheets/_base.scss: -------------------------------------------------------------------------------- 1 | $bg-color:#fff; 2 | -------------------------------------------------------------------------------- /src/store/myCar/state.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | cars:[] 3 | } -------------------------------------------------------------------------------- /src/store/myNum/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | num:0 3 | } -------------------------------------------------------------------------------- /src/store/myCar/const.js: -------------------------------------------------------------------------------- 1 | const SYNC_UPDATE = "SYNC_UPDATE" 2 | export { SYNC_UPDATE } -------------------------------------------------------------------------------- /src/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/1.jpg -------------------------------------------------------------------------------- /src/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/2.jpg -------------------------------------------------------------------------------- /src/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/3.jpg -------------------------------------------------------------------------------- /src/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/4.jpg -------------------------------------------------------------------------------- /src/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/5.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/404.jpg -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /public/shoppingcar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/shoppingcar.png -------------------------------------------------------------------------------- /src/assets/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/loading.gif -------------------------------------------------------------------------------- /src/assets/ic_scan_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_scan_gray.png -------------------------------------------------------------------------------- /src/assets/ic_settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_settings.png -------------------------------------------------------------------------------- /src/assets/shoppingcar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/shoppingcar.png -------------------------------------------------------------------------------- /public/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/iconfont/iconfont.eot -------------------------------------------------------------------------------- /public/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /public/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/ic_search_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_search_gray.png -------------------------------------------------------------------------------- /src/store/myNum/getters.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | doubleNum(state){ 3 | return state.num*2 4 | } 5 | } -------------------------------------------------------------------------------- /public/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /src/stylesheets/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin border-radius{ 2 | border-radius:10px; 3 | -webkit-border-radius:10px; 4 | } -------------------------------------------------------------------------------- /src/assets/ic_tab_audio_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_audio_active.png -------------------------------------------------------------------------------- /src/assets/ic_tab_audio_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_audio_normal.png -------------------------------------------------------------------------------- /src/assets/ic_tab_group_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_group_active.png -------------------------------------------------------------------------------- /src/assets/ic_tab_group_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_group_normal.png -------------------------------------------------------------------------------- /src/assets/ic_tab_home_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_home_active.png -------------------------------------------------------------------------------- /src/assets/ic_tab_home_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_home_normal.png -------------------------------------------------------------------------------- /src/assets/ic_tab_mine_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_mine_active.png -------------------------------------------------------------------------------- /src/assets/ic_tab_mine_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_mine_normal.png -------------------------------------------------------------------------------- /src/router/home.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | name:"home", 3 | path:"/home", 4 | component:()=>import("@/views/Home") 5 | } -------------------------------------------------------------------------------- /src/store/myNum/const.js: -------------------------------------------------------------------------------- 1 | const CHANGE_NUM = "CHANGE_NUM" 2 | const RANDOM_NUM = "RANDOM_NUM" 3 | export { CHANGE_NUM,RANDOM_NUM} -------------------------------------------------------------------------------- /src/assets/ic_status_search_user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_status_search_user.png -------------------------------------------------------------------------------- /src/router/audio.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | name:"audio", 3 | path:"/audio", 4 | component:()=>import("@/views/Audio") 5 | } -------------------------------------------------------------------------------- /src/router/group.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | name:"group", 3 | path:"/group", 4 | component:()=>import("@/views/Group") 5 | } -------------------------------------------------------------------------------- /src/stylesheets/main.scss: -------------------------------------------------------------------------------- 1 | @import "_base.scss"; 2 | @import "_mixins.scss"; 3 | @import "_reset.scss"; 4 | @import "_commons.scss"; -------------------------------------------------------------------------------- /src/assets/ic_actionbar_search_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_actionbar_search_icon.png -------------------------------------------------------------------------------- /src/assets/ic_tab_broadcast_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_broadcast_active.png -------------------------------------------------------------------------------- /src/assets/ic_tab_broadcast_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_tab_broadcast_normal.png -------------------------------------------------------------------------------- /src/router/city.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "city", 3 | path: "/city", 4 | component: () => import("@/views/City"), 5 | } -------------------------------------------------------------------------------- /public/font-awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/font-awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/ic_create_group_chat_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/src/assets/ic_create_group_chat_blue.png -------------------------------------------------------------------------------- /src/router/broadcast.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | name:"broadcast", 3 | path:"/broadcast", 4 | component:()=>import("@/views/Broadcast") 5 | } -------------------------------------------------------------------------------- /public/font-awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/font-awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /public/font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /public/font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /public/font-awesome/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hanxueqing/Douban-Movie/HEAD/public/font-awesome/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/router/moviedetail.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name:"moviedetail", 3 | path:"/moviedetail/:id", 4 | component:()=>import("@/views/Home/MovieDetail") 5 | } -------------------------------------------------------------------------------- /src/store/myCar/mutations.js: -------------------------------------------------------------------------------- 1 | import { SYNC_UPDATE} from "./const" 2 | export default{ 3 | [SYNC_UPDATE](state,newCar){ 4 | state.cars = newCar; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /public/font-awesome/less/screen-reader.less: -------------------------------------------------------------------------------- 1 | // Screen Readers 2 | // ------------------------- 3 | 4 | .sr-only { .sr-only(); } 5 | .sr-only-focusable { .sr-only-focusable(); } 6 | -------------------------------------------------------------------------------- /public/font-awesome/less/fixed-width.less: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .@{fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Screen Readers 2 | // ------------------------- 3 | 4 | .sr-only { @include sr-only(); } 5 | .sr-only-focusable { @include sr-only-focusable(); } 6 | -------------------------------------------------------------------------------- /src/store/myNum/index.js: -------------------------------------------------------------------------------- 1 | import state from "./state" 2 | import mutations from "./mutations" 3 | import actions from "./actions" 4 | import getters from "./getters" 5 | export default{ 6 | state,mutations,actions,getters 7 | } -------------------------------------------------------------------------------- /src/store/myCar/index.js: -------------------------------------------------------------------------------- 1 | import state from "./state" 2 | import mutations from "./mutations" 3 | import actions from "./actions" 4 | import getters from "./getters" 5 | 6 | export default{ 7 | state,mutations,actions,getters 8 | } -------------------------------------------------------------------------------- /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/store/myNum/mutations.js: -------------------------------------------------------------------------------- 1 | import {CHANGE_NUM,RANDOM_NUM} from "./const" 2 | export default { 3 | [CHANGE_NUM](state) { 4 | state.num++ 5 | }, 6 | [RANDOM_NUM](state,randomNum) { 7 | state.num = randomNum 8 | } 9 | } -------------------------------------------------------------------------------- /src/modules/rem.js: -------------------------------------------------------------------------------- 1 | document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + "px" 2 | 3 | window.onresize = function(){ 4 | document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + "px" 5 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ], 5 | "presets": ["@babel/preset-env"], 6 | "plugins": [ 7 | "@babel/plugin-proposal-object-rest-spread", 8 | "@babel/plugin-transform-runtime", 9 | "@babel/plugin-syntax-dynamic-import" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/modules/directive.js: -------------------------------------------------------------------------------- 1 | //v-backtop 就可以实现返回顶部功能 2 | import Vue from "vue" 3 | Vue.directive("backtop",{ 4 | bind(el,binding,vnode){ 5 | let eventType = binding.arg || "click"; 6 | el.addEventListener(eventType,e=>{ 7 | window.scrollTo(0,0) 8 | }) 9 | } 10 | }) -------------------------------------------------------------------------------- /docs/_coverpage.md: -------------------------------------------------------------------------------- 1 | ![logo](https://docsify.js.org/_media/icon.svg) 2 | 3 | # 豆瓣影音 4 | 5 | > 使用Vue全家桶+Node.js搭建的小型全栈项目. 6 | 7 | * 前端框架：vue-cli、vue-router、axios、vuex 8 | * UI类库：Mint-UI、Vant 9 | * 后端数据接口：Express、MongoDB 10 | 11 | [GitHub](https://github.com/Hanxueqing/Douban-Movie.git) 12 | [Get Started](#quick-start) -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/store/myNum/actions.js: -------------------------------------------------------------------------------- 1 | import {RANDOM_NUM} from "./const" 2 | export default { 3 | //异步请求来实现数据模拟 4 | getNumFromBackend(store){ 5 | setTimeout(()=>{ 6 | //获取一个随机数 7 | let randomNum = Math.floor(Math.random()*100) 8 | store.commit(RANDOM_NUM,randomNum)//把参数传回给mutations 9 | },1000) 10 | } 11 | } -------------------------------------------------------------------------------- /src/views/Notfound/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 17 | -------------------------------------------------------------------------------- /public/font-awesome/HELP-US-OUT.txt: -------------------------------------------------------------------------------- 1 | I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project, 2 | Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome, 3 | comprehensive icon sets or copy and paste your own. 4 | 5 | Please. Check it out. 6 | 7 | -Dave Gandy 8 | -------------------------------------------------------------------------------- /src/router/mine.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | // name:"mine", 3 | path:"/mine", 4 | component:()=>import("@/views/Mine"), 5 | //配置二级路由 6 | children:[ 7 | {path:"",redirect:"list"}, 8 | {path:"list",component:()=>import("@/views/Mine/List"),name:"list"}, 9 | {path:"car",component:()=>import("@/views/Mine/Car"),name:"car"}, 10 | ] 11 | } -------------------------------------------------------------------------------- /src/stylesheets/_commons.scss: -------------------------------------------------------------------------------- 1 | button{ 2 | @include border-radius; 3 | } 4 | 5 | .pt60{ 6 | padding-top:50px; 7 | } 8 | 9 | .loading{ 10 | background:url(../assets/index.svg) no-repeat center; 11 | background-size:10%; 12 | height:2.4rem 13 | } 14 | body{ 15 | font-family: Microsoft YaHei,Tahoma,Helvetica,Arial,sans-serif; 16 | color: #2c3e50; 17 | } -------------------------------------------------------------------------------- /public/font-awesome/less/larger.less: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .@{fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .@{fa-css-prefix}-2x { font-size: 2em; } 11 | .@{fa-css-prefix}-3x { font-size: 3em; } 12 | .@{fa-css-prefix}-4x { font-size: 4em; } 13 | .@{fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /src/store/myCar/getters.js: -------------------------------------------------------------------------------- 1 | export default{ 2 | computedTotal(state){ 3 | let cars = state.cars;//在同一个module里面可以直接state.cars获取 4 | let total = {price:0,num:0} //声明一个total对象存放总价和数量 5 | cars.forEach(item=>{ 6 | total.price += item.price * item.num; //总价等于商品价格乘以数量 7 | total.num += item.num //总数累加 8 | }) 9 | total.price = total.price.toFixed(2)*100//向上取整，并保留两位小数 10 | return total //返回total对象 11 | } 12 | } -------------------------------------------------------------------------------- /src/views/Group/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /public/font-awesome/less/list.less: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: @fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .@{fa-css-prefix}-li { 11 | position: absolute; 12 | left: -@fa-li-width; 13 | width: @fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.@{fa-css-prefix}-lg { 17 | left: (-@fa-li-width + (4em / 14)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/modules/getImg.js: -------------------------------------------------------------------------------- 1 | export default (_url) => { 2 | if (_url !== undefined) { 3 | let _u = _url.substring(7); 4 | return 'https://images.weserv.nl/?url=' + _u; 5 | } 6 | return true 7 | } 8 | 9 | // var util = { 10 | // getImages: function (_url){ 11 | // if (_url !== undefined) { 12 | // let _u = _url.substring(7); 13 | // return 'https://images.weserv.nl/?url=' + _u; 14 | // } 15 | // } 16 | // } 17 | // export default util; -------------------------------------------------------------------------------- /public/font-awesome/less/core.less: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /public/font-awesome/scss/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "animated"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | @import "screen-reader"; 19 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | /* import state from "./state" 7 | import getters from "./getters" 8 | import mutations from "./mutations" 9 | import actions from "./actions" 10 | export default new Vuex.Store({ 11 | state, 12 | getters, 13 | mutations, 14 | actions 15 | }) */ 16 | 17 | import myNum from "./myNum" 18 | import myCar from "./myCar" 19 | export default new Vuex.Store({ 20 | modules:{ 21 | myNum, 22 | myCar 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /public/font-awesome/less/stacked.less: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; } 21 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /public/font-awesome/less/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables.less"; 7 | @import "mixins.less"; 8 | @import "path.less"; 9 | @import "core.less"; 10 | @import "larger.less"; 11 | @import "fixed-width.less"; 12 | @import "list.less"; 13 | @import "bordered-pulled.less"; 14 | @import "animated.less"; 15 | @import "rotated-flipped.less"; 16 | @import "stacked.less"; 17 | @import "icons.less"; 18 | @import "screen-reader.less"; 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | 25 | 29 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | import home from "./home" 7 | import audio from "./audio" 8 | import broadcast from "./broadcast" 9 | import group from "./group" 10 | import mine from "./mine" 11 | import city from "./city" 12 | import moviedetail from "./moviedetail" 13 | 14 | export default new Router({ 15 | routes: [ 16 | { path: "/", redirect: "/home" }, 17 | home, audio, broadcast, group, mine, city, moviedetail, 18 | // { path: "/notfound", component: () => import("@/views/Notfound") }, 19 | { path: "*", redirect: "/notfound" }, 20 | ] 21 | }) 22 | -------------------------------------------------------------------------------- /public/font-awesome/less/bordered-pulled.less: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em @fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .@{fa-css-prefix}-pull-left { float: left; } 11 | .@{fa-css-prefix}-pull-right { float: right; } 12 | 13 | .@{fa-css-prefix} { 14 | &.@{fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.@{fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .@{fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /public/font-awesome/less/rotated-flipped.less: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } 7 | 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } 9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .@{fa-css-prefix}-rotate-90, 15 | :root .@{fa-css-prefix}-rotate-180, 16 | :root .@{fa-css-prefix}-rotate-270, 17 | :root .@{fa-css-prefix}-flip-horizontal, 18 | :root .@{fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .#{$fa-css-prefix}-pull-left { float: left; } 11 | .#{$fa-css-prefix}-pull-right { float: right; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .#{$fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /src/stylesheets/_reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | 4 | body,h1,h3,h2,h4,h5,h6,p,dl,dd,ul,li,ol,td,form,input,fieldset,legend{ 5 | margin:0; padding:0; 6 | } 7 | 8 | li{list-style:none;} 9 | 10 | a{text-decoration:none; font-size:12px; color:#333;} 11 | 12 | body{ 13 | font-size:14px; 14 | font-family:"微软雅黑"; 15 | color:#666; 16 | background:$bg-color; 17 | } 18 | 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | img{ display:block; border:none;} 24 | 25 | a,input{outline:none;} 26 | 27 | em,i{font-style:normal;} 28 | 29 | b,strong,h1,h2,h3,h4,h5,h6{font-weight:normal;} 30 | 31 | .clear:after{content:""; display:block; clear:both; height:0; visibility:hidden;} 32 | 33 | table{border-collapse:collapse;} 34 | 35 | .border0{border:none;} 36 | 37 | .fl{float:left;} 38 | 39 | .fr{float:right;} 40 | 41 | -------------------------------------------------------------------------------- /src/views/Audio/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /src/views/Broadcast/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /public/font-awesome/less/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 8 | url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), 9 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 10 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 11 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), 9 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 10 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 11 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /public/font-awesome/less/animated.less: -------------------------------------------------------------------------------- 1 | // Animated Icons 2 | // -------------------------- 3 | 4 | .@{fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .@{fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_animated.scss: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .#{$fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .#{$fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 豆瓣影音开发文档 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store/index' 5 | 6 | Vue.config.productionTip = false 7 | 8 | //引入main.scss文件 9 | import "./stylesheets/main.scss" 10 | 11 | //引入rem.js文件 12 | import "./modules/rem.js" 13 | 14 | //引入swiper.min.css样式文件 15 | import 'swiper/dist/css/swiper.min.css' 16 | 17 | //引入axios 18 | import axios from "axios" 19 | Vue.prototype.$http = axios; 20 | 21 | //引入mint-ui相关的模块 22 | import {Lazyload,InfiniteScroll,Header,Button,Tabbar,TabItem,Cell} from "mint-ui" 23 | Vue.use(Lazyload); 24 | Vue.use(InfiniteScroll); 25 | Vue.component("mt-header",Header); 26 | Vue.component("mt-button",Button); 27 | Vue.component("mt-tabbar", Tabbar); 28 | Vue.component("mt-tab-item", TabItem); 29 | Vue.component("mt-cell", Cell); 30 | 31 | import { Card, SubmitBar } from 'vant'; 32 | Vue.use(Card); 33 | Vue.use(SubmitBar); 34 | 35 | //引入directive 36 | import "./modules/directive" 37 | 38 | new Vue({ 39 | router, 40 | store, 41 | render: h => h(App) 42 | }).$mount('#app') 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "douban", 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 | "@babel/runtime": "^7.0.0", 11 | "axios": "^0.19.0", 12 | "core-js": "^2.6.5", 13 | "mint-ui": "^2.2.13", 14 | "swiper": "^4.5.0", 15 | "vant": "^2.0.9", 16 | "vue": "^2.6.10", 17 | "vue-router": "^3.0.3", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.5.5", 22 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0", 23 | "@babel/plugin-transform-runtime": "^7.1.0", 24 | "@babel/preset-env": "^7.1.0", 25 | "@vue/cli-plugin-babel": "^3.9.0", 26 | "@vue/cli-service": "^3.9.0", 27 | "babel-loader": "^8.0.2", 28 | "babel-plugin-component": "^1.1.1", 29 | "node-sass": "^4.9.0", 30 | "sass-loader": "^7.1.0", 31 | "vue-template-compiler": "^2.6.10" 32 | }, 33 | "postcss": { 34 | "plugins": { 35 | "autoprefixer": {} 36 | } 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | douban 21 | 22 | 23 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /public/api/banners.json: -------------------------------------------------------------------------------- 1 | { 2 | "Banners":[ 3 | { "id": 1, "src": "https://static.maizuo.com/v5/upload/17330a7f4602b83174896e0d3940a753.jpg?x-oss-process=image/quality,Q_70"}, 4 | { "id": 2, "src":"https://static.maizuo.com/v5/upload/7b4f508e093892475b184bc8774a8589.jpg?x-oss-process=image/quality,Q_70"}, 5 | { "id": 3, "src": "https://static.maizuo.com/v5/upload/4950f737d1329d022ec3697339e14193.jpg?x-oss-process=image/quality,Q_70" }, 6 | { 7 | "id": 4, 8 | "src": "https://static.maizuo.com/v5/upload/380df84504794c64258e151e29e075ba.jpg?x-oss-process=image/quality,Q_70" 9 | }, 10 | { 11 | "id": 5, 12 | "src": "https://static.maizuo.com/v5/upload/b6e287b84806d6f8ce8852eed9c9bc52.jpg?x-oss-process=image/quality,Q_70" 13 | }, 14 | { 15 | "id": 6, 16 | "src": "https://static.maizuo.com/b03a32d20eac5438d8d130714d4141b9.jpg?x-oss-process=image/quality,Q_70" 17 | }, 18 | { 19 | "id": 7, 20 | "src": "https://static.maizuo.com/v5/upload/ec395ca4ed8e69b964ca3af2cd89a99d.jpg?x-oss-process=image/quality,Q_70" 21 | }, 22 | { 23 | "id": 8, 24 | "src": "https://static.maizuo.com/v5/upload/95fc33cf5aece0ecb10e09d85d6e26ac.jpg?x-oss-process=image/quality,Q_70" 25 | } 26 | ] 27 | } 28 | 29 | -------------------------------------------------------------------------------- /src/components/Tabbar/TabItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 40 | 41 | -------------------------------------------------------------------------------- /src/store/myCar/actions.js: -------------------------------------------------------------------------------- 1 | import { SYNC_UPDATE } from "./const" 2 | export default { 3 | initCar(store){ 4 | //获取购物车 5 | let cars = getCar() 6 | store.commit(SYNC_UPDATE,cars) 7 | }, 8 | addGoodInCar(store,goodInfo){//添加商品到购物车 9 | setTimeout(()=>{ 10 | //获取后台返回来的购物车 11 | let cars = getCar();//[{}] 12 | let isHas = cars.some(item => {//判断原来的购物车是否有这个商品 13 | if (item.dealId === goodInfo.dealId){//如果相等代表添加进来的是同一个商品 14 | item.num++//商品数++ 15 | return true;} 16 | }) 17 | if (!isHas) {//说明购物车没有此商品 18 | goodInfo.num = 1;//商品数赋值为1 19 | cars.push(goodInfo)//将商品添加到cars数据中 20 | } 21 | //通知后台更改cars 22 | localStorage.cars = JSON.stringify(cars) 23 | //前段需要通过mutations具体的方法去更改state里面的cars 24 | store.commit(SYNC_UPDATE, cars) 25 | },1000) 26 | }, 27 | reduceGoodInCar(store,goodInfo){ 28 | //获取后台返回来的购物车 29 | let cars = getCar(); 30 | cars = cars.filter(item=>{ 31 | if (item.dealId === goodInfo.dealId){ 32 | item.num-- 33 | if(item.num<=0) return false 34 | } 35 | return true; 36 | }) 37 | //通知后台更改cars 38 | localStorage.cars = JSON.stringify(cars) 39 | //前段需要通过mutations具体的方法去更改state里面的cars 40 | store.commit(SYNC_UPDATE, cars) 41 | } 42 | 43 | } 44 | 45 | function getCar(){ 46 | return JSON.parse(localStorage.cars ? localStorage.cars : "[]") 47 | } -------------------------------------------------------------------------------- /src/components/DetailBanner/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 37 | 38 | 58 | -------------------------------------------------------------------------------- /src/views/Mine/List-1.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 59 | 60 | 63 | -------------------------------------------------------------------------------- /src/components/Swiper/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 41 | 42 | 66 | -------------------------------------------------------------------------------- /public/font-awesome/less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | 14 | .fa-icon-rotate(@degrees, @rotation) { 15 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; 16 | -webkit-transform: rotate(@degrees); 17 | -ms-transform: rotate(@degrees); 18 | transform: rotate(@degrees); 19 | } 20 | 21 | .fa-icon-flip(@horiz, @vert, @rotation) { 22 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)"; 23 | -webkit-transform: scale(@horiz, @vert); 24 | -ms-transform: scale(@horiz, @vert); 25 | transform: scale(@horiz, @vert); 26 | } 27 | 28 | 29 | // Only display content to screen readers. A la Bootstrap 4. 30 | // 31 | // See: http://a11yproject.com/posts/how-to-hide-content/ 32 | 33 | .sr-only() { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0,0,0,0); 41 | border: 0; 42 | } 43 | 44 | // Use in conjunction with .sr-only to only display content when it's focused. 45 | // 46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 47 | // 48 | // Credit: HTML5 Boilerplate 49 | 50 | .sr-only-focusable() { 51 | &:active, 52 | &:focus { 53 | position: static; 54 | width: auto; 55 | height: auto; 56 | margin: 0; 57 | overflow: visible; 58 | clip: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /public/font-awesome/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | @mixin fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | 14 | @mixin fa-icon-rotate($degrees, $rotation) { 15 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; 16 | -webkit-transform: rotate($degrees); 17 | -ms-transform: rotate($degrees); 18 | transform: rotate($degrees); 19 | } 20 | 21 | @mixin fa-icon-flip($horiz, $vert, $rotation) { 22 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; 23 | -webkit-transform: scale($horiz, $vert); 24 | -ms-transform: scale($horiz, $vert); 25 | transform: scale($horiz, $vert); 26 | } 27 | 28 | 29 | // Only display content to screen readers. A la Bootstrap 4. 30 | // 31 | // See: http://a11yproject.com/posts/how-to-hide-content/ 32 | 33 | @mixin sr-only { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0,0,0,0); 41 | border: 0; 42 | } 43 | 44 | // Use in conjunction with .sr-only to only display content when it's focused. 45 | // 46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 47 | // 48 | // Credit: HTML5 Boilerplate 49 | 50 | @mixin sr-only-focusable { 51 | &:active, 52 | &:focus { 53 | position: static; 54 | width: auto; 55 | height: auto; 56 | margin: 0; 57 | overflow: visible; 58 | clip: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/views/Home/Backtop.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 47 | 48 | 67 | -------------------------------------------------------------------------------- /public/api/goods.json: -------------------------------------------------------------------------------- 1 | { 2 | "dealList":[ 3 | { 4 | "firstTitle": "单人", 5 | "title":"46oz原味爆米花1桶+22oz可乐1杯", 6 | "price": 33, 7 | "dealId": 100154273, 8 | "imageUrl":"https://p0.meituan.net/movie/5c30ed6dc1e3b99345c18454f69c4582176824.jpg@388w_388h_1e_1c", 9 | "curNumberDesc": "已售379" 10 | }, 11 | { 12 | "firstTitle": "单人", 13 | "title": "46oz原味爆米花1桶+22oz雪碧1杯", 14 | "price": 33, 15 | "dealId": 100223426, 16 | "imageUrl": "https://p0.meituan.net/movie/5c30ed6dc1e3b99345c18454f69c4582176824.jpg@388w_388h_1e_1c", 17 | "curNumberDesc": "已售12" 18 | }, 19 | { 20 | "firstTitle": "单人", 21 | "title": "进口食品1份", 22 | "price": 8.89, 23 | "dealId": 100212615, 24 | "imageUrl": "https://p1.meituan.net/movie/21f1d203838577db9ef915b980867acc203978.jpg@750w_750h_1e_1c", 25 | "curNumberDesc": "已售8" 26 | }, 27 | { 28 | "firstTitle": "双人", 29 | "title": "85oz原味爆米花1桶+22oz可乐两杯", 30 | "price": 44, 31 | "dealId": 100152611, 32 | "imageUrl": "https://p0.meituan.net/movie/bf014964c24ca2ef107133eaed75a6e5191344.jpg@388w_388h_1e_1c", 33 | "curNumberDesc": "已售647" 34 | }, 35 | { 36 | "firstTitle": "双人", 37 | "title": "85oz原味爆米花1桶+22oz雪碧两杯", 38 | "price": 44, 39 | "dealId": 100223425, 40 | "imageUrl": "https://p0.meituan.net/movie/bf014964c24ca2ef107133eaed75a6e5191344.jpg@388w_388h_1e_1c", 41 | "curNumberDesc": "已售6" 42 | }, 43 | { 44 | "firstTitle": "多人", 45 | "title": "85oz原味爆米花1桶+22oz可乐2杯+冰川时代水1瓶", 46 | "price": 55, 47 | "dealId": 100152612, 48 | "imageUrl": "https://p1.meituan.net/movie/c89df7bf2b1b02cbb326b06ecbbf1ddf203619.jpg@388w_388h_1e_1c", 49 | "curNumberDesc": "已售89" 50 | } 51 | 52 | ] 53 | } -------------------------------------------------------------------------------- /Vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 基本路径 3 | publicPath: '/', 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 | modules: false 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 | "/api":{ 37 | target:"http://47.96.0.211:9000", //目标域名 38 | changeOrigin:true,//是否改变域名 39 | pathRewrite:{//以什么开头 40 | "^/api":"" 41 | } 42 | }, 43 | "/data": { 44 | target: "http://118.31.109.254:8088", //目标域名 45 | changeOrigin: true,//是否改变域名 46 | pathRewrite: {//以什么开头 47 | "^/data": "" 48 | } 49 | }, 50 | "/douban": { 51 | target: "http://39.96.84.220:9000", //目标域名 52 | changeOrigin: true,//是否改变域名 53 | pathRewrite: {//以什么开头 54 | "^/douban": "" 55 | } 56 | } 57 | }, // 设置代理 58 | before: app => { } 59 | }, 60 | // 第三方插件配置 61 | pluginOptions: { 62 | // ... 63 | } 64 | } -------------------------------------------------------------------------------- /src/assets/index.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Header/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 61 | 62 | 87 | -------------------------------------------------------------------------------- /src/components/Banner/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 70 | 71 | 88 | -------------------------------------------------------------------------------- /public/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1559377954151'); /* IE9 */ 3 | src: url('iconfont.eot?t=1559377954151#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUAAAsAAAAACigAAAS0AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqHPIZOATYCJAMUCwwABCAFhG0HUhvkCBHVo2GQ/SywY9pEWDbUnoxobGdO3+iRtO+LeOj/3rzz3+x2amClCmzK8Vi4lAoWS9AiHOAAhfan96w3mXQv7RLqEk5XOJrB+QtSAGzO9cBGRagnsujRF9KN08sy/J9jpsu0zfK/N59LRtsuGuTeBM/OKlIwEk/UzyQ8e5n0UIXMOpgA2vTYQLuh0clAIQltoOm6oqwAqJwN2cIMlFGqZsME9A0CVDVGXAXw5T8+/sApKICKoIA41F5pSDEEPFN8ZoTp/7RsTAO9Ow+Gm4ECrIAE8VjruwYc51Yw0TxDCgBYZCgEYlfT6T7Tf2b0/z9UF2QQyX94ICEEDKIOQtcl7FqbN06uZaleFxYBvT4sKuiNoPd40bUN2sAAxBwgfkCYRrucgSRCJClvIwO/pYxQvpiyjJZMiiIo7MuD3BuTzKWazpNeqMFOpC3WSpPbe1SH5Pm0JdrjamaIYZLxkhPm8uuOaRIShFU4LhW5LNJk2RTB8uNtLZJY0vG3HJd+njNaw4edYw1XMpl1p8xZgiSc30KVbSzQOgeZcc5rOZLw9vO1jjJAa25LwpBMd0wzXau50LOMwSo25AKfvP+45MTEMfpoamo0rrOk7StoxmcTprOMKSUJV7WyFYgOr089lRbZBepofuH+EExL6ny1EzxqfC3P+89TTZk3sUVSyzhRhFS1RfXy83YWdiB3a9AJNDSZqM4mTMSV2i/UjYlNpnNXFa6iWbHl1R+1BsUmxOwFoHgVfsk186cQZq6dCcJ/IHuC8IuK1ZBpItYarP4YWz4LXQX4jEFlpShGWsrKjBeVlqXtpaUxwSfj4nW0tdDJnfHx2jrlXn+O59+/JKmPD8zHi9T9ScW0o9CvZpqBVnURO98+Mcpzt1n/pkqvRYXfrLdxz+70yduVGVZ1gZpmwR7RKyEXb3v2dBu5laTV8ba8mJXgciDBYrGjo1iMPcHBIdeuY/AoRE56u8qhSkpW58vVyNCetjrKG2AVqBtB2dSFWXs7n7e4TXJoFB//cx7mY6TVkAMxVjiWq2lKldoMW/HTp9iot8G6Faca8jTF2AH4rFXvPkpOtDdrCMDLrt1ajKX56q3Yg5dfpZ2GQKf9bxOXuw+P6JfpKy2SEFt34iE8aFkS3I9ZxCAxNDu0A2Bzq+zHCZ57rJzFgeZTRWqCULhdbuLEX+3fwKnyvTd58j5fKWkSAL8aGUaIbI4l8HTw09MDW/4blTNH5UIp7LWc9dWyGbumCeSftOLn2PXLDPU83o1hyG4kUFRTqEyjCwXFBJlYG6iR5gJ1FH9osxa2eYeyRsBQCgEsDEWAKNgBBDknAFNwDUliH4GAmrcgRSEwiKQi5R1KMws6WtwYlaAF3UJkKHfKKYvQ/MagTBVnlZ7zRy6iJGyW62LxhTnyLlYpqmAr4sAxZfCMDodpSuCZYjSyDEX8dbVydfe0NJT1FoIZlaAF3UJkKHe2tyxK7//GoEwVt/Q7F/0jF9HUYbNcM5AvXc7q91Q6iyrYCmUcuGEjZfAkD6YyR+Dr54vRyDLcIOOvKxrPcXXLwxuy51j+DxlQnEsQBMKIRAIkBcKPKA/aUuVqXJNFlSf6yDxrbHWnos2p1wM=') format('woff2'), 5 | url('iconfont.woff?t=1559377954151') format('woff'), 6 | url('iconfont.ttf?t=1559377954151') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1559377954151#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-yingyuana:before { 19 | content: "\e61d"; 20 | } 21 | 22 | .icon-wodea:before { 23 | content: "\e61f"; 24 | } 25 | 26 | .icon-yingpiana:before { 27 | content: "\e622"; 28 | } 29 | 30 | .icon-xiazai17:before { 31 | content: "\e611"; 32 | } 33 | 34 | -------------------------------------------------------------------------------- /src/views/Mine/List.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 41 | 42 | 113 | -------------------------------------------------------------------------------- /src/views/Group/MovieBox.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 110 | 111 | 118 | -------------------------------------------------------------------------------- /src/views/Home/MovieBox.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 111 | 112 | 119 | -------------------------------------------------------------------------------- /src/views/Broadcast/MovieBox.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 111 | 112 | 119 | -------------------------------------------------------------------------------- /src/views/Audio/MovieBox.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 113 | 114 | 121 | -------------------------------------------------------------------------------- /src/views/City/index.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 92 | 93 | 142 | -------------------------------------------------------------------------------- /src/components/Tabbar/index.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 77 | 78 | 93 | -------------------------------------------------------------------------------- /src/views/Home/index.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 97 | 164 | -------------------------------------------------------------------------------- /src/views/Broadcast/MovieItem.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 62 | 63 | -------------------------------------------------------------------------------- /src/views/Home/MovieItem.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 65 | 66 | -------------------------------------------------------------------------------- /src/views/Group/MovieItem.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 62 | 63 | -------------------------------------------------------------------------------- /src/views/Mine/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 45 | 46 | 66 | -------------------------------------------------------------------------------- /src/views/Audio/MovieItem.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 64 | 65 | -------------------------------------------------------------------------------- /public/iconfont/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 | -------------------------------------------------------------------------------- /public/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(l){var t,n='',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(c=t,o=l.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(a,50)}n()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())});function n(){i||(i=!0,c())}var c,o,i,a}(function(){var t,e;(t=document.createElement("div")).innerHTML=n,n=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(t,e){e.firstChild?function(t,e){e.parentNode.insertBefore(t,e)}(t,e.firstChild):e.appendChild(t)}(e,document.body))})}(window); -------------------------------------------------------------------------------- /public/iconfont/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 |
    影院A
    34 |
    &#xe61d;
    35 |
    • 36 | 37 |
  • 38 | 39 |
    我的A
    40 |
    &#xe61f;
    41 |
    • 42 | 43 |
  • 44 | 45 |
    影片A
    46 |
    &#xe622;
    47 |
    • 48 | 49 |
  • 50 | 51 |
    搜索
    52 |
    &#xe611;
    53 |
    • 54 | 55 |
56 |
57 |

Unicode 引用

58 |
59 | 60 |

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

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

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

68 |
69 |

Unicode 使用步骤如下：

70 |

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

71 | 
@font-face {
 73 |   font-family: 'iconfont';
 74 |   src: url('iconfont.eot');
 75 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 76 |       url('iconfont.woff2') format('woff2'),
 77 |       url('iconfont.woff') format('woff'),
 78 |       url('iconfont.ttf') format('truetype'),
 79 |       url('iconfont.svg#iconfont') format('svg');
 80 | }
 81 |
82 |

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

83 | 
.iconfont {
 85 |   font-family: "iconfont" !important;
 86 |   font-size: 16px;
 87 |   font-style: normal;
 88 |   -webkit-font-smoothing: antialiased;
 89 |   -moz-osx-font-smoothing: grayscale;
 90 | }
 91 |
92 |

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

93 | 
 94 | <span class="iconfont">&#x33;</span>
 96 |
97 |
98 |

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

99 |
100 |
101 |
102 |
103 |
    104 | 105 |
  • 106 | 107 |
    108 | 影院A 109 |
    110 |
    .icon-yingyuana 111 |
    112 |
    • 113 | 114 |
  • 115 | 116 |
    117 | 我的A 118 |
    119 |
    .icon-wodea 120 |
    121 |
    • 122 | 123 |
  • 124 | 125 |
    126 | 影片A 127 |
    128 |
    .icon-yingpiana 129 |
    130 |
    • 131 | 132 |
  • 133 | 134 |
    135 | 搜索 136 |
    137 |
    .icon-xiazai17 138 |
    139 |
    • 140 | 141 |
142 |
143 |

font-class 引用

144 |
145 | 146 |

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

147 |

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

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

使用步骤如下：

155 |

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

156 | 
<link rel="stylesheet" href="./iconfont.css">
157 |
158 |

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

159 | 
<span class="iconfont icon-xxx"></span>
160 |
161 |
162 |

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

164 |
165 |
166 |
167 |
168 |
    169 | 170 |
  • 171 | 174 |
    影院A
    175 |
    #icon-yingyuana
    176 |
    • 177 | 178 |
  • 179 | 182 |
    我的A
    183 |
    #icon-wodea
    184 |
    • 185 | 186 |
  • 187 | 190 |
    影片A
    191 |
    #icon-yingpiana
    192 |
    • 193 | 194 |
  • 195 | 198 |
    搜索
    199 |
    #icon-xiazai17
    200 |
    • 201 | 202 |
203 |
204 |

Symbol 引用

205 |
206 | 207 |

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

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

使用步骤如下：

216 |

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

217 | 
<script src="./iconfont.js"></script>
218 |
219 |

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

220 | 
<style>
221 | .icon {
222 |   width: 1em;
223 |   height: 1em;
224 |   vertical-align: -0.15em;
225 |   fill: currentColor;
226 |   overflow: hidden;
227 | }
228 | </style>
229 |
230 |

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

231 | 
<svg class="icon" aria-hidden="true">
232 |   <use xlink:href="#icon-xxx"></use>
233 | </svg>
234 |
235 |
236 |
237 | 238 |
239 |
240 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /src/views/Mine/Car.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 66 | 67 | 330 | -------------------------------------------------------------------------------- /public/iconfont/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/views/Home/MovieDetail.vue: -------------------------------------------------------------------------------- 1 | 104 | 105 | 138 | 139 | 423 | -------------------------------------------------------------------------------- /public/font-awesome/less/variables.less: -------------------------------------------------------------------------------- 1 | // Variables 2 | // -------------------------- 3 | 4 | @fa-font-path: "../fonts"; 5 | @fa-font-size-base: 14px; 6 | @fa-line-height-base: 1; 7 | //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts"; // for referencing Bootstrap CDN font files directly 8 | @fa-css-prefix: fa; 9 | @fa-version: "4.7.0"; 10 | @fa-border-color: #eee; 11 | @fa-inverse: #fff; 12 | @fa-li-width: (30em / 14); 13 | 14 | @fa-var-500px: "\f26e"; 15 | @fa-var-address-book: "\f2b9"; 16 | @fa-var-address-book-o: "\f2ba"; 17 | @fa-var-address-card: "\f2bb"; 18 | @fa-var-address-card-o: "\f2bc"; 19 | @fa-var-adjust: "\f042"; 20 | @fa-var-adn: "\f170"; 21 | @fa-var-align-center: "\f037"; 22 | @fa-var-align-justify: "\f039"; 23 | @fa-var-align-left: "\f036"; 24 | @fa-var-align-right: "\f038"; 25 | @fa-var-amazon: "\f270"; 26 | @fa-var-ambulance: "\f0f9"; 27 | @fa-var-american-sign-language-interpreting: "\f2a3"; 28 | @fa-var-anchor: "\f13d"; 29 | @fa-var-android: "\f17b"; 30 | @fa-var-angellist: "\f209"; 31 | @fa-var-angle-double-down: "\f103"; 32 | @fa-var-angle-double-left: "\f100"; 33 | @fa-var-angle-double-right: "\f101"; 34 | @fa-var-angle-double-up: "\f102"; 35 | @fa-var-angle-down: "\f107"; 36 | @fa-var-angle-left: "\f104"; 37 | @fa-var-angle-right: "\f105"; 38 | @fa-var-angle-up: "\f106"; 39 | @fa-var-apple: "\f179"; 40 | @fa-var-archive: "\f187"; 41 | @fa-var-area-chart: "\f1fe"; 42 | @fa-var-arrow-circle-down: "\f0ab"; 43 | @fa-var-arrow-circle-left: "\f0a8"; 44 | @fa-var-arrow-circle-o-down: "\f01a"; 45 | @fa-var-arrow-circle-o-left: "\f190"; 46 | @fa-var-arrow-circle-o-right: "\f18e"; 47 | @fa-var-arrow-circle-o-up: "\f01b"; 48 | @fa-var-arrow-circle-right: "\f0a9"; 49 | @fa-var-arrow-circle-up: "\f0aa"; 50 | @fa-var-arrow-down: "\f063"; 51 | @fa-var-arrow-left: "\f060"; 52 | @fa-var-arrow-right: "\f061"; 53 | @fa-var-arrow-up: "\f062"; 54 | @fa-var-arrows: "\f047"; 55 | @fa-var-arrows-alt: "\f0b2"; 56 | @fa-var-arrows-h: "\f07e"; 57 | @fa-var-arrows-v: "\f07d"; 58 | @fa-var-asl-interpreting: "\f2a3"; 59 | @fa-var-assistive-listening-systems: "\f2a2"; 60 | @fa-var-asterisk: "\f069"; 61 | @fa-var-at: "\f1fa"; 62 | @fa-var-audio-description: "\f29e"; 63 | @fa-var-automobile: "\f1b9"; 64 | @fa-var-backward: "\f04a"; 65 | @fa-var-balance-scale: "\f24e"; 66 | @fa-var-ban: "\f05e"; 67 | @fa-var-bandcamp: "\f2d5"; 68 | @fa-var-bank: "\f19c"; 69 | @fa-var-bar-chart: "\f080"; 70 | @fa-var-bar-chart-o: "\f080"; 71 | @fa-var-barcode: "\f02a"; 72 | @fa-var-bars: "\f0c9"; 73 | @fa-var-bath: "\f2cd"; 74 | @fa-var-bathtub: "\f2cd"; 75 | @fa-var-battery: "\f240"; 76 | @fa-var-battery-0: "\f244"; 77 | @fa-var-battery-1: "\f243"; 78 | @fa-var-battery-2: "\f242"; 79 | @fa-var-battery-3: "\f241"; 80 | @fa-var-battery-4: "\f240"; 81 | @fa-var-battery-empty: "\f244"; 82 | @fa-var-battery-full: "\f240"; 83 | @fa-var-battery-half: "\f242"; 84 | @fa-var-battery-quarter: "\f243"; 85 | @fa-var-battery-three-quarters: "\f241"; 86 | @fa-var-bed: "\f236"; 87 | @fa-var-beer: "\f0fc"; 88 | @fa-var-behance: "\f1b4"; 89 | @fa-var-behance-square: "\f1b5"; 90 | @fa-var-bell: "\f0f3"; 91 | @fa-var-bell-o: "\f0a2"; 92 | @fa-var-bell-slash: "\f1f6"; 93 | @fa-var-bell-slash-o: "\f1f7"; 94 | @fa-var-bicycle: "\f206"; 95 | @fa-var-binoculars: "\f1e5"; 96 | @fa-var-birthday-cake: "\f1fd"; 97 | @fa-var-bitbucket: "\f171"; 98 | @fa-var-bitbucket-square: "\f172"; 99 | @fa-var-bitcoin: "\f15a"; 100 | @fa-var-black-tie: "\f27e"; 101 | @fa-var-blind: "\f29d"; 102 | @fa-var-bluetooth: "\f293"; 103 | @fa-var-bluetooth-b: "\f294"; 104 | @fa-var-bold: "\f032"; 105 | @fa-var-bolt: "\f0e7"; 106 | @fa-var-bomb: "\f1e2"; 107 | @fa-var-book: "\f02d"; 108 | @fa-var-bookmark: "\f02e"; 109 | @fa-var-bookmark-o: "\f097"; 110 | @fa-var-braille: "\f2a1"; 111 | @fa-var-briefcase: "\f0b1"; 112 | @fa-var-btc: "\f15a"; 113 | @fa-var-bug: "\f188"; 114 | @fa-var-building: "\f1ad"; 115 | @fa-var-building-o: "\f0f7"; 116 | @fa-var-bullhorn: "\f0a1"; 117 | @fa-var-bullseye: "\f140"; 118 | @fa-var-bus: "\f207"; 119 | @fa-var-buysellads: "\f20d"; 120 | @fa-var-cab: "\f1ba"; 121 | @fa-var-calculator: "\f1ec"; 122 | @fa-var-calendar: "\f073"; 123 | @fa-var-calendar-check-o: "\f274"; 124 | @fa-var-calendar-minus-o: "\f272"; 125 | @fa-var-calendar-o: "\f133"; 126 | @fa-var-calendar-plus-o: "\f271"; 127 | @fa-var-calendar-times-o: "\f273"; 128 | @fa-var-camera: "\f030"; 129 | @fa-var-camera-retro: "\f083"; 130 | @fa-var-car: "\f1b9"; 131 | @fa-var-caret-down: "\f0d7"; 132 | @fa-var-caret-left: "\f0d9"; 133 | @fa-var-caret-right: "\f0da"; 134 | @fa-var-caret-square-o-down: "\f150"; 135 | @fa-var-caret-square-o-left: "\f191"; 136 | @fa-var-caret-square-o-right: "\f152"; 137 | @fa-var-caret-square-o-up: "\f151"; 138 | @fa-var-caret-up: "\f0d8"; 139 | @fa-var-cart-arrow-down: "\f218"; 140 | @fa-var-cart-plus: "\f217"; 141 | @fa-var-cc: "\f20a"; 142 | @fa-var-cc-amex: "\f1f3"; 143 | @fa-var-cc-diners-club: "\f24c"; 144 | @fa-var-cc-discover: "\f1f2"; 145 | @fa-var-cc-jcb: "\f24b"; 146 | @fa-var-cc-mastercard: "\f1f1"; 147 | @fa-var-cc-paypal: "\f1f4"; 148 | @fa-var-cc-stripe: "\f1f5"; 149 | @fa-var-cc-visa: "\f1f0"; 150 | @fa-var-certificate: "\f0a3"; 151 | @fa-var-chain: "\f0c1"; 152 | @fa-var-chain-broken: "\f127"; 153 | @fa-var-check: "\f00c"; 154 | @fa-var-check-circle: "\f058"; 155 | @fa-var-check-circle-o: "\f05d"; 156 | @fa-var-check-square: "\f14a"; 157 | @fa-var-check-square-o: "\f046"; 158 | @fa-var-chevron-circle-down: "\f13a"; 159 | @fa-var-chevron-circle-left: "\f137"; 160 | @fa-var-chevron-circle-right: "\f138"; 161 | @fa-var-chevron-circle-up: "\f139"; 162 | @fa-var-chevron-down: "\f078"; 163 | @fa-var-chevron-left: "\f053"; 164 | @fa-var-chevron-right: "\f054"; 165 | @fa-var-chevron-up: "\f077"; 166 | @fa-var-child: "\f1ae"; 167 | @fa-var-chrome: "\f268"; 168 | @fa-var-circle: "\f111"; 169 | @fa-var-circle-o: "\f10c"; 170 | @fa-var-circle-o-notch: "\f1ce"; 171 | @fa-var-circle-thin: "\f1db"; 172 | @fa-var-clipboard: "\f0ea"; 173 | @fa-var-clock-o: "\f017"; 174 | @fa-var-clone: "\f24d"; 175 | @fa-var-close: "\f00d"; 176 | @fa-var-cloud: "\f0c2"; 177 | @fa-var-cloud-download: "\f0ed"; 178 | @fa-var-cloud-upload: "\f0ee"; 179 | @fa-var-cny: "\f157"; 180 | @fa-var-code: "\f121"; 181 | @fa-var-code-fork: "\f126"; 182 | @fa-var-codepen: "\f1cb"; 183 | @fa-var-codiepie: "\f284"; 184 | @fa-var-coffee: "\f0f4"; 185 | @fa-var-cog: "\f013"; 186 | @fa-var-cogs: "\f085"; 187 | @fa-var-columns: "\f0db"; 188 | @fa-var-comment: "\f075"; 189 | @fa-var-comment-o: "\f0e5"; 190 | @fa-var-commenting: "\f27a"; 191 | @fa-var-commenting-o: "\f27b"; 192 | @fa-var-comments: "\f086"; 193 | @fa-var-comments-o: "\f0e6"; 194 | @fa-var-compass: "\f14e"; 195 | @fa-var-compress: "\f066"; 196 | @fa-var-connectdevelop: "\f20e"; 197 | @fa-var-contao: "\f26d"; 198 | @fa-var-copy: "\f0c5"; 199 | @fa-var-copyright: "\f1f9"; 200 | @fa-var-creative-commons: "\f25e"; 201 | @fa-var-credit-card: "\f09d"; 202 | @fa-var-credit-card-alt: "\f283"; 203 | @fa-var-crop: "\f125"; 204 | @fa-var-crosshairs: "\f05b"; 205 | @fa-var-css3: "\f13c"; 206 | @fa-var-cube: "\f1b2"; 207 | @fa-var-cubes: "\f1b3"; 208 | @fa-var-cut: "\f0c4"; 209 | @fa-var-cutlery: "\f0f5"; 210 | @fa-var-dashboard: "\f0e4"; 211 | @fa-var-dashcube: "\f210"; 212 | @fa-var-database: "\f1c0"; 213 | @fa-var-deaf: "\f2a4"; 214 | @fa-var-deafness: "\f2a4"; 215 | @fa-var-dedent: "\f03b"; 216 | @fa-var-delicious: "\f1a5"; 217 | @fa-var-desktop: "\f108"; 218 | @fa-var-deviantart: "\f1bd"; 219 | @fa-var-diamond: "\f219"; 220 | @fa-var-digg: "\f1a6"; 221 | @fa-var-dollar: "\f155"; 222 | @fa-var-dot-circle-o: "\f192"; 223 | @fa-var-download: "\f019"; 224 | @fa-var-dribbble: "\f17d"; 225 | @fa-var-drivers-license: "\f2c2"; 226 | @fa-var-drivers-license-o: "\f2c3"; 227 | @fa-var-dropbox: "\f16b"; 228 | @fa-var-drupal: "\f1a9"; 229 | @fa-var-edge: "\f282"; 230 | @fa-var-edit: "\f044"; 231 | @fa-var-eercast: "\f2da"; 232 | @fa-var-eject: "\f052"; 233 | @fa-var-ellipsis-h: "\f141"; 234 | @fa-var-ellipsis-v: "\f142"; 235 | @fa-var-empire: "\f1d1"; 236 | @fa-var-envelope: "\f0e0"; 237 | @fa-var-envelope-o: "\f003"; 238 | @fa-var-envelope-open: "\f2b6"; 239 | @fa-var-envelope-open-o: "\f2b7"; 240 | @fa-var-envelope-square: "\f199"; 241 | @fa-var-envira: "\f299"; 242 | @fa-var-eraser: "\f12d"; 243 | @fa-var-etsy: "\f2d7"; 244 | @fa-var-eur: "\f153"; 245 | @fa-var-euro: "\f153"; 246 | @fa-var-exchange: "\f0ec"; 247 | @fa-var-exclamation: "\f12a"; 248 | @fa-var-exclamation-circle: "\f06a"; 249 | @fa-var-exclamation-triangle: "\f071"; 250 | @fa-var-expand: "\f065"; 251 | @fa-var-expeditedssl: "\f23e"; 252 | @fa-var-external-link: "\f08e"; 253 | @fa-var-external-link-square: "\f14c"; 254 | @fa-var-eye: "\f06e"; 255 | @fa-var-eye-slash: "\f070"; 256 | @fa-var-eyedropper: "\f1fb"; 257 | @fa-var-fa: "\f2b4"; 258 | @fa-var-facebook: "\f09a"; 259 | @fa-var-facebook-f: "\f09a"; 260 | @fa-var-facebook-official: "\f230"; 261 | @fa-var-facebook-square: "\f082"; 262 | @fa-var-fast-backward: "\f049"; 263 | @fa-var-fast-forward: "\f050"; 264 | @fa-var-fax: "\f1ac"; 265 | @fa-var-feed: "\f09e"; 266 | @fa-var-female: "\f182"; 267 | @fa-var-fighter-jet: "\f0fb"; 268 | @fa-var-file: "\f15b"; 269 | @fa-var-file-archive-o: "\f1c6"; 270 | @fa-var-file-audio-o: "\f1c7"; 271 | @fa-var-file-code-o: "\f1c9"; 272 | @fa-var-file-excel-o: "\f1c3"; 273 | @fa-var-file-image-o: "\f1c5"; 274 | @fa-var-file-movie-o: "\f1c8"; 275 | @fa-var-file-o: "\f016"; 276 | @fa-var-file-pdf-o: "\f1c1"; 277 | @fa-var-file-photo-o: "\f1c5"; 278 | @fa-var-file-picture-o: "\f1c5"; 279 | @fa-var-file-powerpoint-o: "\f1c4"; 280 | @fa-var-file-sound-o: "\f1c7"; 281 | @fa-var-file-text: "\f15c"; 282 | @fa-var-file-text-o: "\f0f6"; 283 | @fa-var-file-video-o: "\f1c8"; 284 | @fa-var-file-word-o: "\f1c2"; 285 | @fa-var-file-zip-o: "\f1c6"; 286 | @fa-var-files-o: "\f0c5"; 287 | @fa-var-film: "\f008"; 288 | @fa-var-filter: "\f0b0"; 289 | @fa-var-fire: "\f06d"; 290 | @fa-var-fire-extinguisher: "\f134"; 291 | @fa-var-firefox: "\f269"; 292 | @fa-var-first-order: "\f2b0"; 293 | @fa-var-flag: "\f024"; 294 | @fa-var-flag-checkered: "\f11e"; 295 | @fa-var-flag-o: "\f11d"; 296 | @fa-var-flash: "\f0e7"; 297 | @fa-var-flask: "\f0c3"; 298 | @fa-var-flickr: "\f16e"; 299 | @fa-var-floppy-o: "\f0c7"; 300 | @fa-var-folder: "\f07b"; 301 | @fa-var-folder-o: "\f114"; 302 | @fa-var-folder-open: "\f07c"; 303 | @fa-var-folder-open-o: "\f115"; 304 | @fa-var-font: "\f031"; 305 | @fa-var-font-awesome: "\f2b4"; 306 | @fa-var-fonticons: "\f280"; 307 | @fa-var-fort-awesome: "\f286"; 308 | @fa-var-forumbee: "\f211"; 309 | @fa-var-forward: "\f04e"; 310 | @fa-var-foursquare: "\f180"; 311 | @fa-var-free-code-camp: "\f2c5"; 312 | @fa-var-frown-o: "\f119"; 313 | @fa-var-futbol-o: "\f1e3"; 314 | @fa-var-gamepad: "\f11b"; 315 | @fa-var-gavel: "\f0e3"; 316 | @fa-var-gbp: "\f154"; 317 | @fa-var-ge: "\f1d1"; 318 | @fa-var-gear: "\f013"; 319 | @fa-var-gears: "\f085"; 320 | @fa-var-genderless: "\f22d"; 321 | @fa-var-get-pocket: "\f265"; 322 | @fa-var-gg: "\f260"; 323 | @fa-var-gg-circle: "\f261"; 324 | @fa-var-gift: "\f06b"; 325 | @fa-var-git: "\f1d3"; 326 | @fa-var-git-square: "\f1d2"; 327 | @fa-var-github: "\f09b"; 328 | @fa-var-github-alt: "\f113"; 329 | @fa-var-github-square: "\f092"; 330 | @fa-var-gitlab: "\f296"; 331 | @fa-var-gittip: "\f184"; 332 | @fa-var-glass: "\f000"; 333 | @fa-var-glide: "\f2a5"; 334 | @fa-var-glide-g: "\f2a6"; 335 | @fa-var-globe: "\f0ac"; 336 | @fa-var-google: "\f1a0"; 337 | @fa-var-google-plus: "\f0d5"; 338 | @fa-var-google-plus-circle: "\f2b3"; 339 | @fa-var-google-plus-official: "\f2b3"; 340 | @fa-var-google-plus-square: "\f0d4"; 341 | @fa-var-google-wallet: "\f1ee"; 342 | @fa-var-graduation-cap: "\f19d"; 343 | @fa-var-gratipay: "\f184"; 344 | @fa-var-grav: "\f2d6"; 345 | @fa-var-group: "\f0c0"; 346 | @fa-var-h-square: "\f0fd"; 347 | @fa-var-hacker-news: "\f1d4"; 348 | @fa-var-hand-grab-o: "\f255"; 349 | @fa-var-hand-lizard-o: "\f258"; 350 | @fa-var-hand-o-down: "\f0a7"; 351 | @fa-var-hand-o-left: "\f0a5"; 352 | @fa-var-hand-o-right: "\f0a4"; 353 | @fa-var-hand-o-up: "\f0a6"; 354 | @fa-var-hand-paper-o: "\f256"; 355 | @fa-var-hand-peace-o: "\f25b"; 356 | @fa-var-hand-pointer-o: "\f25a"; 357 | @fa-var-hand-rock-o: "\f255"; 358 | @fa-var-hand-scissors-o: "\f257"; 359 | @fa-var-hand-spock-o: "\f259"; 360 | @fa-var-hand-stop-o: "\f256"; 361 | @fa-var-handshake-o: "\f2b5"; 362 | @fa-var-hard-of-hearing: "\f2a4"; 363 | @fa-var-hashtag: "\f292"; 364 | @fa-var-hdd-o: "\f0a0"; 365 | @fa-var-header: "\f1dc"; 366 | @fa-var-headphones: "\f025"; 367 | @fa-var-heart: "\f004"; 368 | @fa-var-heart-o: "\f08a"; 369 | @fa-var-heartbeat: "\f21e"; 370 | @fa-var-history: "\f1da"; 371 | @fa-var-home: "\f015"; 372 | @fa-var-hospital-o: "\f0f8"; 373 | @fa-var-hotel: "\f236"; 374 | @fa-var-hourglass: "\f254"; 375 | @fa-var-hourglass-1: "\f251"; 376 | @fa-var-hourglass-2: "\f252"; 377 | @fa-var-hourglass-3: "\f253"; 378 | @fa-var-hourglass-end: "\f253"; 379 | @fa-var-hourglass-half: "\f252"; 380 | @fa-var-hourglass-o: "\f250"; 381 | @fa-var-hourglass-start: "\f251"; 382 | @fa-var-houzz: "\f27c"; 383 | @fa-var-html5: "\f13b"; 384 | @fa-var-i-cursor: "\f246"; 385 | @fa-var-id-badge: "\f2c1"; 386 | @fa-var-id-card: "\f2c2"; 387 | @fa-var-id-card-o: "\f2c3"; 388 | @fa-var-ils: "\f20b"; 389 | @fa-var-image: "\f03e"; 390 | @fa-var-imdb: "\f2d8"; 391 | @fa-var-inbox: "\f01c"; 392 | @fa-var-indent: "\f03c"; 393 | @fa-var-industry: "\f275"; 394 | @fa-var-info: "\f129"; 395 | @fa-var-info-circle: "\f05a"; 396 | @fa-var-inr: "\f156"; 397 | @fa-var-instagram: "\f16d"; 398 | @fa-var-institution: "\f19c"; 399 | @fa-var-internet-explorer: "\f26b"; 400 | @fa-var-intersex: "\f224"; 401 | @fa-var-ioxhost: "\f208"; 402 | @fa-var-italic: "\f033"; 403 | @fa-var-joomla: "\f1aa"; 404 | @fa-var-jpy: "\f157"; 405 | @fa-var-jsfiddle: "\f1cc"; 406 | @fa-var-key: "\f084"; 407 | @fa-var-keyboard-o: "\f11c"; 408 | @fa-var-krw: "\f159"; 409 | @fa-var-language: "\f1ab"; 410 | @fa-var-laptop: "\f109"; 411 | @fa-var-lastfm: "\f202"; 412 | @fa-var-lastfm-square: "\f203"; 413 | @fa-var-leaf: "\f06c"; 414 | @fa-var-leanpub: "\f212"; 415 | @fa-var-legal: "\f0e3"; 416 | @fa-var-lemon-o: "\f094"; 417 | @fa-var-level-down: "\f149"; 418 | @fa-var-level-up: "\f148"; 419 | @fa-var-life-bouy: "\f1cd"; 420 | @fa-var-life-buoy: "\f1cd"; 421 | @fa-var-life-ring: "\f1cd"; 422 | @fa-var-life-saver: "\f1cd"; 423 | @fa-var-lightbulb-o: "\f0eb"; 424 | @fa-var-line-chart: "\f201"; 425 | @fa-var-link: "\f0c1"; 426 | @fa-var-linkedin: "\f0e1"; 427 | @fa-var-linkedin-square: "\f08c"; 428 | @fa-var-linode: "\f2b8"; 429 | @fa-var-linux: "\f17c"; 430 | @fa-var-list: "\f03a"; 431 | @fa-var-list-alt: "\f022"; 432 | @fa-var-list-ol: "\f0cb"; 433 | @fa-var-list-ul: "\f0ca"; 434 | @fa-var-location-arrow: "\f124"; 435 | @fa-var-lock: "\f023"; 436 | @fa-var-long-arrow-down: "\f175"; 437 | @fa-var-long-arrow-left: "\f177"; 438 | @fa-var-long-arrow-right: "\f178"; 439 | @fa-var-long-arrow-up: "\f176"; 440 | @fa-var-low-vision: "\f2a8"; 441 | @fa-var-magic: "\f0d0"; 442 | @fa-var-magnet: "\f076"; 443 | @fa-var-mail-forward: "\f064"; 444 | @fa-var-mail-reply: "\f112"; 445 | @fa-var-mail-reply-all: "\f122"; 446 | @fa-var-male: "\f183"; 447 | @fa-var-map: "\f279"; 448 | @fa-var-map-marker: "\f041"; 449 | @fa-var-map-o: "\f278"; 450 | @fa-var-map-pin: "\f276"; 451 | @fa-var-map-signs: "\f277"; 452 | @fa-var-mars: "\f222"; 453 | @fa-var-mars-double: "\f227"; 454 | @fa-var-mars-stroke: "\f229"; 455 | @fa-var-mars-stroke-h: "\f22b"; 456 | @fa-var-mars-stroke-v: "\f22a"; 457 | @fa-var-maxcdn: "\f136"; 458 | @fa-var-meanpath: "\f20c"; 459 | @fa-var-medium: "\f23a"; 460 | @fa-var-medkit: "\f0fa"; 461 | @fa-var-meetup: "\f2e0"; 462 | @fa-var-meh-o: "\f11a"; 463 | @fa-var-mercury: "\f223"; 464 | @fa-var-microchip: "\f2db"; 465 | @fa-var-microphone: "\f130"; 466 | @fa-var-microphone-slash: "\f131"; 467 | @fa-var-minus: "\f068"; 468 | @fa-var-minus-circle: "\f056"; 469 | @fa-var-minus-square: "\f146"; 470 | @fa-var-minus-square-o: "\f147"; 471 | @fa-var-mixcloud: "\f289"; 472 | @fa-var-mobile: "\f10b"; 473 | @fa-var-mobile-phone: "\f10b"; 474 | @fa-var-modx: "\f285"; 475 | @fa-var-money: "\f0d6"; 476 | @fa-var-moon-o: "\f186"; 477 | @fa-var-mortar-board: "\f19d"; 478 | @fa-var-motorcycle: "\f21c"; 479 | @fa-var-mouse-pointer: "\f245"; 480 | @fa-var-music: "\f001"; 481 | @fa-var-navicon: "\f0c9"; 482 | @fa-var-neuter: "\f22c"; 483 | @fa-var-newspaper-o: "\f1ea"; 484 | @fa-var-object-group: "\f247"; 485 | @fa-var-object-ungroup: "\f248"; 486 | @fa-var-odnoklassniki: "\f263"; 487 | @fa-var-odnoklassniki-square: "\f264"; 488 | @fa-var-opencart: "\f23d"; 489 | @fa-var-openid: "\f19b"; 490 | @fa-var-opera: "\f26a"; 491 | @fa-var-optin-monster: "\f23c"; 492 | @fa-var-outdent: "\f03b"; 493 | @fa-var-pagelines: "\f18c"; 494 | @fa-var-paint-brush: "\f1fc"; 495 | @fa-var-paper-plane: "\f1d8"; 496 | @fa-var-paper-plane-o: "\f1d9"; 497 | @fa-var-paperclip: "\f0c6"; 498 | @fa-var-paragraph: "\f1dd"; 499 | @fa-var-paste: "\f0ea"; 500 | @fa-var-pause: "\f04c"; 501 | @fa-var-pause-circle: "\f28b"; 502 | @fa-var-pause-circle-o: "\f28c"; 503 | @fa-var-paw: "\f1b0"; 504 | @fa-var-paypal: "\f1ed"; 505 | @fa-var-pencil: "\f040"; 506 | @fa-var-pencil-square: "\f14b"; 507 | @fa-var-pencil-square-o: "\f044"; 508 | @fa-var-percent: "\f295"; 509 | @fa-var-phone: "\f095"; 510 | @fa-var-phone-square: "\f098"; 511 | @fa-var-photo: "\f03e"; 512 | @fa-var-picture-o: "\f03e"; 513 | @fa-var-pie-chart: "\f200"; 514 | @fa-var-pied-piper: "\f2ae"; 515 | @fa-var-pied-piper-alt: "\f1a8"; 516 | @fa-var-pied-piper-pp: "\f1a7"; 517 | @fa-var-pinterest: "\f0d2"; 518 | @fa-var-pinterest-p: "\f231"; 519 | @fa-var-pinterest-square: "\f0d3"; 520 | @fa-var-plane: "\f072"; 521 | @fa-var-play: "\f04b"; 522 | @fa-var-play-circle: "\f144"; 523 | @fa-var-play-circle-o: "\f01d"; 524 | @fa-var-plug: "\f1e6"; 525 | @fa-var-plus: "\f067"; 526 | @fa-var-plus-circle: "\f055"; 527 | @fa-var-plus-square: "\f0fe"; 528 | @fa-var-plus-square-o: "\f196"; 529 | @fa-var-podcast: "\f2ce"; 530 | @fa-var-power-off: "\f011"; 531 | @fa-var-print: "\f02f"; 532 | @fa-var-product-hunt: "\f288"; 533 | @fa-var-puzzle-piece: "\f12e"; 534 | @fa-var-qq: "\f1d6"; 535 | @fa-var-qrcode: "\f029"; 536 | @fa-var-question: "\f128"; 537 | @fa-var-question-circle: "\f059"; 538 | @fa-var-question-circle-o: "\f29c"; 539 | @fa-var-quora: "\f2c4"; 540 | @fa-var-quote-left: "\f10d"; 541 | @fa-var-quote-right: "\f10e"; 542 | @fa-var-ra: "\f1d0"; 543 | @fa-var-random: "\f074"; 544 | @fa-var-ravelry: "\f2d9"; 545 | @fa-var-rebel: "\f1d0"; 546 | @fa-var-recycle: "\f1b8"; 547 | @fa-var-reddit: "\f1a1"; 548 | @fa-var-reddit-alien: "\f281"; 549 | @fa-var-reddit-square: "\f1a2"; 550 | @fa-var-refresh: "\f021"; 551 | @fa-var-registered: "\f25d"; 552 | @fa-var-remove: "\f00d"; 553 | @fa-var-renren: "\f18b"; 554 | @fa-var-reorder: "\f0c9"; 555 | @fa-var-repeat: "\f01e"; 556 | @fa-var-reply: "\f112"; 557 | @fa-var-reply-all: "\f122"; 558 | @fa-var-resistance: "\f1d0"; 559 | @fa-var-retweet: "\f079"; 560 | @fa-var-rmb: "\f157"; 561 | @fa-var-road: "\f018"; 562 | @fa-var-rocket: "\f135"; 563 | @fa-var-rotate-left: "\f0e2"; 564 | @fa-var-rotate-right: "\f01e"; 565 | @fa-var-rouble: "\f158"; 566 | @fa-var-rss: "\f09e"; 567 | @fa-var-rss-square: "\f143"; 568 | @fa-var-rub: "\f158"; 569 | @fa-var-ruble: "\f158"; 570 | @fa-var-rupee: "\f156"; 571 | @fa-var-s15: "\f2cd"; 572 | @fa-var-safari: "\f267"; 573 | @fa-var-save: "\f0c7"; 574 | @fa-var-scissors: "\f0c4"; 575 | @fa-var-scribd: "\f28a"; 576 | @fa-var-search: "\f002"; 577 | @fa-var-search-minus: "\f010"; 578 | @fa-var-search-plus: "\f00e"; 579 | @fa-var-sellsy: "\f213"; 580 | @fa-var-send: "\f1d8"; 581 | @fa-var-send-o: "\f1d9"; 582 | @fa-var-server: "\f233"; 583 | @fa-var-share: "\f064"; 584 | @fa-var-share-alt: "\f1e0"; 585 | @fa-var-share-alt-square: "\f1e1"; 586 | @fa-var-share-square: "\f14d"; 587 | @fa-var-share-square-o: "\f045"; 588 | @fa-var-shekel: "\f20b"; 589 | @fa-var-sheqel: "\f20b"; 590 | @fa-var-shield: "\f132"; 591 | @fa-var-ship: "\f21a"; 592 | @fa-var-shirtsinbulk: "\f214"; 593 | @fa-var-shopping-bag: "\f290"; 594 | @fa-var-shopping-basket: "\f291"; 595 | @fa-var-shopping-cart: "\f07a"; 596 | @fa-var-shower: "\f2cc"; 597 | @fa-var-sign-in: "\f090"; 598 | @fa-var-sign-language: "\f2a7"; 599 | @fa-var-sign-out: "\f08b"; 600 | @fa-var-signal: "\f012"; 601 | @fa-var-signing: "\f2a7"; 602 | @fa-var-simplybuilt: "\f215"; 603 | @fa-var-sitemap: "\f0e8"; 604 | @fa-var-skyatlas: "\f216"; 605 | @fa-var-skype: "\f17e"; 606 | @fa-var-slack: "\f198"; 607 | @fa-var-sliders: "\f1de"; 608 | @fa-var-slideshare: "\f1e7"; 609 | @fa-var-smile-o: "\f118"; 610 | @fa-var-snapchat: "\f2ab"; 611 | @fa-var-snapchat-ghost: "\f2ac"; 612 | @fa-var-snapchat-square: "\f2ad"; 613 | @fa-var-snowflake-o: "\f2dc"; 614 | @fa-var-soccer-ball-o: "\f1e3"; 615 | @fa-var-sort: "\f0dc"; 616 | @fa-var-sort-alpha-asc: "\f15d"; 617 | @fa-var-sort-alpha-desc: "\f15e"; 618 | @fa-var-sort-amount-asc: "\f160"; 619 | @fa-var-sort-amount-desc: "\f161"; 620 | @fa-var-sort-asc: "\f0de"; 621 | @fa-var-sort-desc: "\f0dd"; 622 | @fa-var-sort-down: "\f0dd"; 623 | @fa-var-sort-numeric-asc: "\f162"; 624 | @fa-var-sort-numeric-desc: "\f163"; 625 | @fa-var-sort-up: "\f0de"; 626 | @fa-var-soundcloud: "\f1be"; 627 | @fa-var-space-shuttle: "\f197"; 628 | @fa-var-spinner: "\f110"; 629 | @fa-var-spoon: "\f1b1"; 630 | @fa-var-spotify: "\f1bc"; 631 | @fa-var-square: "\f0c8"; 632 | @fa-var-square-o: "\f096"; 633 | @fa-var-stack-exchange: "\f18d"; 634 | @fa-var-stack-overflow: "\f16c"; 635 | @fa-var-star: "\f005"; 636 | @fa-var-star-half: "\f089"; 637 | @fa-var-star-half-empty: "\f123"; 638 | @fa-var-star-half-full: "\f123"; 639 | @fa-var-star-half-o: "\f123"; 640 | @fa-var-star-o: "\f006"; 641 | @fa-var-steam: "\f1b6"; 642 | @fa-var-steam-square: "\f1b7"; 643 | @fa-var-step-backward: "\f048"; 644 | @fa-var-step-forward: "\f051"; 645 | @fa-var-stethoscope: "\f0f1"; 646 | @fa-var-sticky-note: "\f249"; 647 | @fa-var-sticky-note-o: "\f24a"; 648 | @fa-var-stop: "\f04d"; 649 | @fa-var-stop-circle: "\f28d"; 650 | @fa-var-stop-circle-o: "\f28e"; 651 | @fa-var-street-view: "\f21d"; 652 | @fa-var-strikethrough: "\f0cc"; 653 | @fa-var-stumbleupon: "\f1a4"; 654 | @fa-var-stumbleupon-circle: "\f1a3"; 655 | @fa-var-subscript: "\f12c"; 656 | @fa-var-subway: "\f239"; 657 | @fa-var-suitcase: "\f0f2"; 658 | @fa-var-sun-o: "\f185"; 659 | @fa-var-superpowers: "\f2dd"; 660 | @fa-var-superscript: "\f12b"; 661 | @fa-var-support: "\f1cd"; 662 | @fa-var-table: "\f0ce"; 663 | @fa-var-tablet: "\f10a"; 664 | @fa-var-tachometer: "\f0e4"; 665 | @fa-var-tag: "\f02b"; 666 | @fa-var-tags: "\f02c"; 667 | @fa-var-tasks: "\f0ae"; 668 | @fa-var-taxi: "\f1ba"; 669 | @fa-var-telegram: "\f2c6"; 670 | @fa-var-television: "\f26c"; 671 | @fa-var-tencent-weibo: "\f1d5"; 672 | @fa-var-terminal: "\f120"; 673 | @fa-var-text-height: "\f034"; 674 | @fa-var-text-width: "\f035"; 675 | @fa-var-th: "\f00a"; 676 | @fa-var-th-large: "\f009"; 677 | @fa-var-th-list: "\f00b"; 678 | @fa-var-themeisle: "\f2b2"; 679 | @fa-var-thermometer: "\f2c7"; 680 | @fa-var-thermometer-0: "\f2cb"; 681 | @fa-var-thermometer-1: "\f2ca"; 682 | @fa-var-thermometer-2: "\f2c9"; 683 | @fa-var-thermometer-3: "\f2c8"; 684 | @fa-var-thermometer-4: "\f2c7"; 685 | @fa-var-thermometer-empty: "\f2cb"; 686 | @fa-var-thermometer-full: "\f2c7"; 687 | @fa-var-thermometer-half: "\f2c9"; 688 | @fa-var-thermometer-quarter: "\f2ca"; 689 | @fa-var-thermometer-three-quarters: "\f2c8"; 690 | @fa-var-thumb-tack: "\f08d"; 691 | @fa-var-thumbs-down: "\f165"; 692 | @fa-var-thumbs-o-down: "\f088"; 693 | @fa-var-thumbs-o-up: "\f087"; 694 | @fa-var-thumbs-up: "\f164"; 695 | @fa-var-ticket: "\f145"; 696 | @fa-var-times: "\f00d"; 697 | @fa-var-times-circle: "\f057"; 698 | @fa-var-times-circle-o: "\f05c"; 699 | @fa-var-times-rectangle: "\f2d3"; 700 | @fa-var-times-rectangle-o: "\f2d4"; 701 | @fa-var-tint: "\f043"; 702 | @fa-var-toggle-down: "\f150"; 703 | @fa-var-toggle-left: "\f191"; 704 | @fa-var-toggle-off: "\f204"; 705 | @fa-var-toggle-on: "\f205"; 706 | @fa-var-toggle-right: "\f152"; 707 | @fa-var-toggle-up: "\f151"; 708 | @fa-var-trademark: "\f25c"; 709 | @fa-var-train: "\f238"; 710 | @fa-var-transgender: "\f224"; 711 | @fa-var-transgender-alt: "\f225"; 712 | @fa-var-trash: "\f1f8"; 713 | @fa-var-trash-o: "\f014"; 714 | @fa-var-tree: "\f1bb"; 715 | @fa-var-trello: "\f181"; 716 | @fa-var-tripadvisor: "\f262"; 717 | @fa-var-trophy: "\f091"; 718 | @fa-var-truck: "\f0d1"; 719 | @fa-var-try: "\f195"; 720 | @fa-var-tty: "\f1e4"; 721 | @fa-var-tumblr: "\f173"; 722 | @fa-var-tumblr-square: "\f174"; 723 | @fa-var-turkish-lira: "\f195"; 724 | @fa-var-tv: "\f26c"; 725 | @fa-var-twitch: "\f1e8"; 726 | @fa-var-twitter: "\f099"; 727 | @fa-var-twitter-square: "\f081"; 728 | @fa-var-umbrella: "\f0e9"; 729 | @fa-var-underline: "\f0cd"; 730 | @fa-var-undo: "\f0e2"; 731 | @fa-var-universal-access: "\f29a"; 732 | @fa-var-university: "\f19c"; 733 | @fa-var-unlink: "\f127"; 734 | @fa-var-unlock: "\f09c"; 735 | @fa-var-unlock-alt: "\f13e"; 736 | @fa-var-unsorted: "\f0dc"; 737 | @fa-var-upload: "\f093"; 738 | @fa-var-usb: "\f287"; 739 | @fa-var-usd: "\f155"; 740 | @fa-var-user: "\f007"; 741 | @fa-var-user-circle: "\f2bd"; 742 | @fa-var-user-circle-o: "\f2be"; 743 | @fa-var-user-md: "\f0f0"; 744 | @fa-var-user-o: "\f2c0"; 745 | @fa-var-user-plus: "\f234"; 746 | @fa-var-user-secret: "\f21b"; 747 | @fa-var-user-times: "\f235"; 748 | @fa-var-users: "\f0c0"; 749 | @fa-var-vcard: "\f2bb"; 750 | @fa-var-vcard-o: "\f2bc"; 751 | @fa-var-venus: "\f221"; 752 | @fa-var-venus-double: "\f226"; 753 | @fa-var-venus-mars: "\f228"; 754 | @fa-var-viacoin: "\f237"; 755 | @fa-var-viadeo: "\f2a9"; 756 | @fa-var-viadeo-square: "\f2aa"; 757 | @fa-var-video-camera: "\f03d"; 758 | @fa-var-vimeo: "\f27d"; 759 | @fa-var-vimeo-square: "\f194"; 760 | @fa-var-vine: "\f1ca"; 761 | @fa-var-vk: "\f189"; 762 | @fa-var-volume-control-phone: "\f2a0"; 763 | @fa-var-volume-down: "\f027"; 764 | @fa-var-volume-off: "\f026"; 765 | @fa-var-volume-up: "\f028"; 766 | @fa-var-warning: "\f071"; 767 | @fa-var-wechat: "\f1d7"; 768 | @fa-var-weibo: "\f18a"; 769 | @fa-var-weixin: "\f1d7"; 770 | @fa-var-whatsapp: "\f232"; 771 | @fa-var-wheelchair: "\f193"; 772 | @fa-var-wheelchair-alt: "\f29b"; 773 | @fa-var-wifi: "\f1eb"; 774 | @fa-var-wikipedia-w: "\f266"; 775 | @fa-var-window-close: "\f2d3"; 776 | @fa-var-window-close-o: "\f2d4"; 777 | @fa-var-window-maximize: "\f2d0"; 778 | @fa-var-window-minimize: "\f2d1"; 779 | @fa-var-window-restore: "\f2d2"; 780 | @fa-var-windows: "\f17a"; 781 | @fa-var-won: "\f159"; 782 | @fa-var-wordpress: "\f19a"; 783 | @fa-var-wpbeginner: "\f297"; 784 | @fa-var-wpexplorer: "\f2de"; 785 | @fa-var-wpforms: "\f298"; 786 | @fa-var-wrench: "\f0ad"; 787 | @fa-var-xing: "\f168"; 788 | @fa-var-xing-square: "\f169"; 789 | @fa-var-y-combinator: "\f23b"; 790 | @fa-var-y-combinator-square: "\f1d4"; 791 | @fa-var-yahoo: "\f19e"; 792 | @fa-var-yc: "\f23b"; 793 | @fa-var-yc-square: "\f1d4"; 794 | @fa-var-yelp: "\f1e9"; 795 | @fa-var-yen: "\f157"; 796 | @fa-var-yoast: "\f2b1"; 797 | @fa-var-youtube: "\f167"; 798 | @fa-var-youtube-play: "\f16a"; 799 | @fa-var-youtube-square: "\f166"; 800 | 801 | --------------------------------------------------------------------------------