├── README.md ├── assets └── iconfont │ ├── iconfont.eot │ ├── iconfont.ttf │ ├── iconfont.woff │ ├── iconfont.css │ ├── demo.css │ ├── demo_fontclass.html │ ├── demo_unicode.html │ ├── demo_symbol.html │ └── iconfont.svg ├── components ├── Detail │ ├── index.scss │ └── index.js ├── Film │ ├── Comingsoon │ │ ├── index.scss │ │ └── index.js │ ├── Nowplaying │ │ ├── index.scss │ │ └── index.js │ ├── index.scss │ └── index.js ├── App │ ├── index.scss │ └── index.js ├── Common │ ├── Navbar │ │ ├── index.scss │ │ └── index.js │ └── Sidebar │ │ ├── index.scss │ │ └── index.js ├── Card │ └── index.js └── Home │ └── index.js ├── index.js ├── index.html ├── Redux ├── Reducer │ └── index.js └── Store │ └── index.js ├── package.json ├── router └── index.js └── webpack.config.js /README.md: -------------------------------------------------------------------------------- 1 | # React-https-m.maizuo.com-v4- 2 | 用React构造的https://m.maizuo.com/v4/卖座电影网 3 | -------------------------------------------------------------------------------- /assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/React-https-m.maizuo.com-v4-/HEAD/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/React-https-m.maizuo.com-v4-/HEAD/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/React-https-m.maizuo.com-v4-/HEAD/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /components/Detail/index.scss: -------------------------------------------------------------------------------- 1 | #nowplaying{ 2 | ul{ 3 | li{ 4 | overflow:hidden; 5 | padding:10px; 6 | img{ 7 | float:left; 8 | width: 100px; 9 | } 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /components/Film/Comingsoon/index.scss: -------------------------------------------------------------------------------- 1 | #comingsoon{ 2 | ul{ 3 | li{ 4 | overflow:hidden; 5 | padding:10px; 6 | img{ 7 | float:left; 8 | width: 100px; 9 | } 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /components/Film/Nowplaying/index.scss: -------------------------------------------------------------------------------- 1 | #nowplaying{ 2 | ul{ 3 | li{ 4 | overflow:hidden; 5 | padding:10px; 6 | img{ 7 | float:left; 8 | width: 100px; 9 | } 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /components/Film/index.scss: -------------------------------------------------------------------------------- 1 | #film{ 2 | ul.filmheader{ 3 | display: flex; 4 | li{ 5 | flex:1; 6 | height: 40px; 7 | line-height: 40px; 8 | text-align: center; 9 | list-style: none; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /components/App/index.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0px; 3 | padding:0px; 4 | } 5 | 6 | html,body{ 7 | width:100%; 8 | height:100%; 9 | } 10 | 11 | 12 | .active{ 13 | background:red; 14 | } 15 | 16 | section{ 17 | padding-top:50px; 18 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // 入口文件 2 | // 可以将每个组将引入放入这个文件 但是不方便管理 我们将路由都放route/index.js 组件放components 3 | import React,{Component} from "react"; 4 | import ReactDOM from "react-dom"; 5 | import router from "./router"; 6 | 7 | ReactDOM.render(router,document.getElementById("box")); -------------------------------------------------------------------------------- /components/Common/Navbar/index.scss: -------------------------------------------------------------------------------- 1 | nav{ 2 | 3 | position: fixed; 4 | width:100%; 5 | height:50px; 6 | top:0px; 7 | left:0px; 8 | background:#282828; 9 | line-height:50px; 10 | color:white; 11 | .left{ 12 | float:left; 13 | } 14 | 15 | .right{ 16 | float:right; 17 | } 18 | } -------------------------------------------------------------------------------- /components/Card/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | 4 | class Card extends React.Component{ 5 | constructor(){ 6 | super(); 7 | this.state={ 8 | 9 | } 10 | } 11 | 12 | render(){ 13 | return
14 | 15 | card 16 |
17 | } 18 | } 19 | 20 | export default Card; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | test 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /components/Film/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | import {NavLink } from "react-router-dom"; 4 | 5 | class Film extends React.Component{ 6 | constructor(){ 7 | super(); 8 | this.state={ 9 | 10 | } 11 | } 12 | 13 | render(){ 14 | return
15 | 16 | 24 | 25 | { 26 | this.props.children 27 | } 28 |
29 | } 30 | } 31 | 32 | export default Film; -------------------------------------------------------------------------------- /components/Common/Sidebar/index.scss: -------------------------------------------------------------------------------- 1 | aside{ 2 | 3 | background:#282828; 4 | position:fixed; 5 | width:50%; 6 | height:100%; 7 | left:0px; 8 | top:50px; 9 | z-index:10; 10 | ul{ 11 | li{ 12 | list-style: none; 13 | } 14 | } 15 | } 16 | 17 | 18 | 19 | .example-enter { 20 | opacity: 0.01; 21 | transform: translateX(-100%); 22 | } 23 | 24 | .example-enter.example-enter-active { 25 | opacity: 1; 26 | transform: translateX(0px); 27 | transition: all 500ms ease-in; 28 | } 29 | 30 | .example-leave { 31 | opacity: 1; 32 | transform: translateX(0px); 33 | } 34 | 35 | .example-leave.example-leave-active { 36 | opacity: 0.01; 37 | transform: translateX(-100%); 38 | transition: all 300ms ease-in; 39 | } 40 | -------------------------------------------------------------------------------- /Redux/Reducer/index.js: -------------------------------------------------------------------------------- 1 | // 2. 定义老的数据 retu新的数据 2 | // default 没有状态值的时候是默认值 有值的时候会被覆盖 3 | const reducer = (state="卖座电影",info)=>{ 4 | // es6的结构赋值 payload是新数据 5 | // type是详情页return的type:"changeTitleReducer", 6 | let {type,payload}=info; 7 | switch (type) { 8 | case "changeTitleReducer": 9 | return payload; 10 | default: 11 | return state; 12 | } 13 | return state; 14 | } 15 | 16 | 17 | const comingsoonreducer = (state=[],info)=>{ 18 | let {type,payload} =info; 19 | switch(type){ 20 | case "comingsoonlist": 21 | 22 | return [...payload]; 23 | default : 24 | return state; 25 | } 26 | 27 | } 28 | 29 | 30 | 31 | export {reducer,comingsoonreducer}; 32 | 33 | 34 | // reducer 的设计必须是一个纯函数 35 | // 36 | // 只要每次给定相同的输入值，就一定会得到相同的输出值: 例如传入1与2，就一定会得到3 37 | // 不会改变原始输入参数，或是外部的环境，所以没有副作用 38 | // 不依頼其他外部的状态，变量或常量 39 | 40 | -------------------------------------------------------------------------------- /components/Common/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | import "../../../assets/iconfont/iconfont.css"; //引入iconfont css 4 | 5 | // 5 6 | import {connect} from "react-redux"; 7 | class Navbar extends React.Component{ 8 | constructor(){ 9 | super(); 10 | this.state={ 11 | 12 | } 13 | } 14 | 15 | render(){ 16 | return 28 | } 29 | 30 | handleClick(){ 31 | //调用父组件的回调函数 32 | this.props.event(); 33 | } 34 | } 35 | 36 | export default connect( 37 | (state)=>{ 38 | console.log(state); 39 | return { 40 | title:state.title 41 | 42 | } 43 | }, 44 | null 45 | )(Navbar); -------------------------------------------------------------------------------- /components/App/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | 4 | // App里引入Common里的组件 5 | import Navbar from "../Common/Navbar"; 6 | import Sidebar from "../Common/Sidebar"; 7 | 8 | class App extends React.Component{ 9 | constructor(){ 10 | super(); 11 | this.state={ 12 | show:false 13 | } 14 | } 15 | 16 | render(){ 17 | return
18 | {/*渲染Navbar组件*/} 19 | { 20 | //console.log("11111"); 21 | //更改state的状态 22 | this.setState({ 23 | show:!this.state.show 24 | }) 25 | }}> 26 | 27 | { 28 | //console.log("11111"); 29 | //默认为false隐藏 30 | this.setState({ 31 | show:false 32 | }) 33 | }}> 34 | 35 | { 36 | //下面就是子组件加载的位置， 37 | } 38 | 39 |
40 | { 41 | this.props.children 42 | } 43 |
44 |
45 | } 46 | } 47 | 48 | export default App; -------------------------------------------------------------------------------- /components/Common/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | import {NavLink} from "react-router-dom"; 4 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6 5 | class Sidebar extends React.Component{ 6 | constructor(){ 7 | super(); 8 | this.state={ 9 | 10 | } 11 | } 12 | 13 | render(){ 14 | return
15 | 19 | { 20 | this.props.isshow? 21 | 36 | :null 37 | } 38 | 39 |
40 | } 41 | } 42 | 43 | export default Sidebar; -------------------------------------------------------------------------------- /components/Film/Nowplaying/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | 4 | class Nowplaying extends React.Component{ 5 | constructor(){ 6 | super(); 7 | this.state={ 8 | datalist:[] 9 | } 10 | } 11 | 12 | 13 | componentDidMount() { 14 | axios.get("/v4/api/film/now-playing?__t=1511330734392&page=1&count=5").then(res=>{ 15 | console.log(res.data); 16 | this.setState({ 17 | datalist:res.data.data.films 18 | }) 19 | }) 20 | } 21 | 22 | render(){ 23 | return
24 | { 25 | /*遍历数组 onClick={this.handleClick.bind(this,item.id)}点击进行跳转 26 | bind第一个参数是绑定对象 第二个参数构成绑定函数的参数 27 | */ 28 | } 29 | 42 |
43 | } 44 | 45 | handleClick(id){ 46 | //编程式导航 跳转到detail组件 连同每个详情页的id 47 | this.props.history.push(`/detail/${id}`); 48 | } 49 | } 50 | 51 | export default Nowplaying; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --inline --hot", 9 | "build": " webpack --progress --hide-modules" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.23.1", 15 | "babel-loader": "^6.4.0", 16 | "babel-preset-env": "^1.6.1", 17 | "babel-preset-react": "^6.23.0", 18 | "css-loader": "^0.26.2", 19 | "extract-text-webpack-plugin": "^2.1.2", 20 | "file-loader": "^0.10.1", 21 | "node-sass": "^4.5.3", 22 | "path": "^0.12.7", 23 | "react": "^15.4.2", 24 | "react-dom": "^15.4.2", 25 | "react-router": "^4.2.0", 26 | "react-router-dom": "^4.2.2", 27 | "redux": "^3.7.2", 28 | "redux-promise": "^0.5.3", 29 | "redux-thunk": "^2.2.0", 30 | "sass-loader": "^6.0.6", 31 | "style-loader": "^0.13.2", 32 | "webpack": "^2.7.0", 33 | "webpack-dev-server": "^2.9.4" 34 | }, 35 | "dependencies": { 36 | "axios": "^0.16.2", 37 | "react-addons-css-transition-group": "^15.6.0", 38 | "react-redux": "^5.0.6", 39 | "redux": "^3.7.2", 40 | "swiper": "^3.4.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /components/Detail/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | // 1.(1) 4 | import { connect } from "react-redux"; 5 | class Detail extends React.Component{ 6 | constructor(){ 7 | super(); 8 | this.state={ 9 | filminfo:null 10 | } 11 | } 12 | 13 | componentWillMount() { 14 | // 在React插件 state->params->chenzhenid 有id值 15 | console.log(this.props.match.params.chenzhenid); 16 | // 每次请求不同的id 17 | axios.get(`/v4/api/film/${this.props.match.params.chenzhenid}?`).then(res=>{ 18 | console.log(res.data); 19 | this.setState({ 20 | filminfo:res.data.data.film 21 | }) 22 | // 1.（3） 23 | this.props.changeTitle(res.data.data.film.name); 24 | }) 25 | } 26 | 27 | render(){ 28 | return( 29 |
30 | { 31 | this.state.filminfo? 32 |
33 | 34 |

{this.state.filminfo.name}

35 |

{this.state.filminfo.synopsis}

36 |
37 | :null 38 | } 39 |
40 | ) 41 | } 42 | } 43 | // 1。(1) 44 | export default connect( 45 | null, 46 | { 47 | changeTitle:(name)=>{ 48 | //1. 自动进行dispatch 到 reducer 49 | return { 50 | type:"changeTitleReducer", 51 | payload:name 52 | } 53 | } 54 | } 55 | )(Detail); -------------------------------------------------------------------------------- /Redux/Store/index.js: -------------------------------------------------------------------------------- 1 | // 在store里建立联系 监听 2 | // import {createStore} from "redux"; 3 | 4 | // import reducer from "../Reducer"; 5 | // const store = createStore(reducer); 6 | 7 | 8 | // export default store; 9 | 10 | // import {createStore} from "redux"; 11 | // // thunK是redux异步的中间键 处理异步action 12 | // import thunk from 'redux-thunk'; 13 | // import {applyMiddleware} from "redux"; 14 | 15 | // import reducer from "../Reducer"; 16 | // // 使用thunk 17 | // const store = createStore(reducer,applyMiddleware(thunk)); 18 | 19 | // export default store; 20 | import {createStore,combineReducers} from "redux"; 21 | import thunk from 'redux-thunk'; //处理异步action 22 | // import reduxpromsie from "redux-promise"; 23 | import {applyMiddleware} from "redux"; 24 | 25 | import {reducer,comingsoonreducer} from "../Reducer"; 26 | 27 | 28 | // const composeEnhancers = 29 | // typeof window === 'object' && 30 | // window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? 31 | // window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ 32 | // // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize... 33 | // }) : compose; 34 | 35 | // const enhancer = composeEnhancers( 36 | // applyMiddleware(thunk,reduxpromsie), 37 | // // other store enhancers if any 38 | // ); //开发阶段 调试redux 工具要加的话 39 | 40 | 41 | 42 | const store = createStore(combineReducers({ 43 | title:reducer, 44 | list:comingsoonreducer 45 | }),applyMiddleware(thunk)); 46 | 47 | 48 | export default store; 49 | //combineReducers:把多个reducer ,合并成一个大的 Reducer -------------------------------------------------------------------------------- /components/Film/Comingsoon/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | // connect 连接React组件与redux-state 也就是说要先将组件与state进行连接 4 | import {connect} from "react-redux"; 5 | class Comingsoon extends React.Component{ 6 | constructor(){ 7 | super(); 8 | this.state={ 9 | datalist:[] 10 | } 11 | } 12 | 13 | 14 | componentDidMount() { 15 | this.props.getComingsoon(); 16 | } 17 | 18 | render(){ 19 | return
20 | { 21 | /*遍历数组 onClick={this.handleClick.bind(this,item.id)}点击进行跳转 22 | bind第一个参数是绑定对象 第二个参数构成绑定函数的参数 23 | */ 24 | } 25 | 38 |
39 | } 40 | 41 | handleClick(id){ 42 | //编程式导航 跳转到detail组件 连同每个详情页的id 43 | this.props.history.push(`/detail/${id}`); 44 | } 45 | } 46 | 47 | export default connect( 48 | (state)=>{ 49 | console.log(state.list); 50 | return { 51 | datalist:state.list 52 | } 53 | }, 54 | { 55 | getComingsoon:()=>{ 56 | //异步action 借助 redux-promise 中间件实现 57 | return (dispatch)=>{ 58 | axios.get("/v4/api/film/coming-soon?__t=1511419368580&page=1&count=7").then(res=>{ 59 | console.log(res.data); 60 | // 此时就异步拿到了数据 61 | dispatch ({ 62 | type:"comingsoonlist", 63 | payload:res.data.data.films 64 | }) 65 | }) 66 | } 67 | } 68 | } 69 | )(Comingsoon); -------------------------------------------------------------------------------- /router/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { 3 | // HashRouter ==vue hash #/home 4 | // BrowserRouter ==vue history /home 5 | // 6 | // Router包围所有组件 7 | // Route包围每一个组件 8 | HashRouter as Router, 9 | Route, 10 | // 重定向 11 | Redirect, 12 | Switch 13 | } from 'react-router-dom' 14 | import App from "../components/App"; 15 | import Home from "../components/Home"; 16 | import Card from "../components/Card"; 17 | import Film from "../components/Film"; 18 | // 引入film的子组件 19 | import Nowplaying from "../components/Film/Nowplaying"; 20 | import Comingsoon from "../components/Film/Comingsoon"; 21 | // 引入详情页 22 | import Detail from "../components/Detail"; 23 | //4. 引入Provider 24 | import {Provider} from "react-redux"; 25 | import store from "../Redux/Store"; 26 | //配置 27 | const router = ( 28 | 29 | 30 | {/*Router只能包围一个组件 解决方案就是建个App组件包围所有组件*/} 31 | 32 | 33 | { 34 | //switch配合redirect重定向使用（重定向会使路径都回到重定向页面 35 | //switch只加载匹配路径的第一个孩子就可以使得路径有目的的跳转） 36 | } 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | }/> 50 | {/*跳转详情页 /:chenzhenid占位符 必须要带上*/} 51 | 52 | {/*重定向*/} 53 | 54 | 55 | 56 | 57 | 58 | ) 59 | 60 | 61 | export default router; -------------------------------------------------------------------------------- /components/Home/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.scss"; 3 | 4 | // 引入axios进行轮播图的数据请求 5 | import axios from "axios"; 6 | // 引入react-swipe 7 | import ReactSwipe from 'react-swipe'; 8 | class Home extends React.Component{ 9 | constructor(){ 10 | super(); 11 | this.state={ 12 | looplist:[], 13 | nowlist:[] 14 | } 15 | } 16 | 17 | componentWillMount() { 18 | axios.get("/v4/api/billboard/home").then(res=>{ 19 | console.log(res.data); 20 | {/**/} 21 | this.setState({ 22 | looplist:res.data.data.billboards 23 | }) 24 | }) 25 | 26 | axios.get("/v4/api/film/now-playing?__t=1511356868700&page=1&count=5").then(res=>{ 27 | console.log(res.data.data.films); 28 | {/**/} 29 | this.setState({ 30 | nowlist:res.data.data.films 31 | }) 32 | }) 33 | } 34 | 35 | render(){ 36 | return( 37 |
38 | {/*continuous是否轮播 加key值是因为利用diff算法进行判断 如果图片的数量改变就进行一次diff*/} 39 | 40 | { 41 | this.state.looplist.map(item=> 42 | 43 | ) 44 | } 45 | 46 | 47 | { 48 | this.state.nowlist? 49 |
50 | {this.state.nowlist.map(item=> 51 |
  • 52 | 53 |

    {item.name}

    54 |
    • 55 | )} 56 |
    :null 57 | 58 | } 59 | 60 |
    61 | ) 62 | } 63 | } 64 | 65 | export default Home; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack =require("webpack"); 2 | var path = require("path"); 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | 5 | module.exports = { 6 | devtool:"source-map", 7 | entry: { 8 | index:path.join(__dirname , "index.js") 9 | }, //已多次提及的唯一入口文件 10 | output: { 11 | path: path.join(__dirname ,"dist"), //打包后的文件存放的地方 12 | filename: "[name].bundle.js",//打包后输出文件的文件名 13 | publicPath:"/dist/" //webpack output is served from 14 | }, 15 | 16 | devServer: { 17 | inline:true, 18 | contentBase: "./", //content not from webpack is serverd 19 | port: '8088', 20 | historyApiFallback: true, 21 | 22 | proxy:{ 23 | '/v4/api/*': { 24 | target: 'https://m.maizuo.com', 25 | host: 'm.maizuo.com', 26 | changeOrigin:true 27 | } 28 | } 29 | 30 | }, 31 | 32 | 33 | module:{ 34 | loaders:[ 35 | 36 | { 37 | test: /\.css$/, 38 | loader: 'style-loader!css-loader'//添加对样式表的处理,内联样式 39 | // loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })//外部样式 40 | }, 41 | 42 | { 43 | test: /\.scss$/, 44 | loader: 'style-loader!css-loader!sass-loader'//添加对样式表的处理,内联样式 45 | // loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' })//外部样式 46 | }, 47 | 48 | { 49 | test:/\.js$/, //随便起的test 名字 50 | exclude: /node_modules/, //排除一个 51 | // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？ 52 | loader:'babel-loader', 53 | query:{ 54 | presets:['env','react'] 55 | } 56 | 57 | }, 58 | 59 | { 60 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 61 | loader: 'file-loader', 62 | options: { 63 | name: 'fonts/[name].[ext]?[hash]' //目标文件夹 64 | } 65 | }, //添加对字体文件的支持。 66 | 67 | { 68 | test: /\.(png|jpg|gif|svg|webM)$/, 69 | loader: 'file-loader', 70 | options: { 71 | name: 'img/[name].[ext]' 72 | } 73 | } 74 | 75 | ] 76 | }, 77 | 78 | resolve: { 79 | alias: { 80 | '@': path.resolve("src") 81 | } 82 | //起一个别名@assets 83 | }, 84 | 85 | plugins:[ 86 | new webpack.ProvidePlugin({ 87 | axios: 'axios' //各个模块都可以使用axios 88 | }) 89 | // new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }) 90 | // 解决通用引入问题 将引入变为全局引入 就不需要每个都进行引入 91 | ] 92 | } 93 | -------------------------------------------------------------------------------- /assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1493196342498'); /* IE9*/ 4 | src: url('iconfont.eot?t=1493196342498#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1493196342498') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1493196342498') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1493196342498#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-all:before { content: "\e696"; } 19 | 20 | .icon-back:before { content: "\e697"; } 21 | 22 | .icon-cart:before { content: "\e698"; } 23 | 24 | .icon-category:before { content: "\e699"; } 25 | 26 | .icon-close:before { content: "\e69a"; } 27 | 28 | .icon-comments:before { content: "\e69b"; } 29 | 30 | .icon-cry:before { content: "\e69c"; } 31 | 32 | .icon-delete:before { content: "\e69d"; } 33 | 34 | .icon-edit:before { content: "\e69e"; } 35 | 36 | .icon-email:before { content: "\e69f"; } 37 | 38 | .icon-favorite:before { content: "\e6a0"; } 39 | 40 | .icon-folder:before { content: "\e6a1"; } 41 | 42 | .icon-form:before { content: "\e6a2"; } 43 | 44 | .icon-help:before { content: "\e6a3"; } 45 | 46 | .icon-information:before { content: "\e6a4"; } 47 | 48 | .icon-less:before { content: "\e6a5"; } 49 | 50 | .icon-moreunfold:before { content: "\e6a6"; } 51 | 52 | .icon-more:before { content: "\e6a7"; } 53 | 54 | .icon-pic:before { content: "\e6a8"; } 55 | 56 | .icon-qrcode:before { content: "\e6a9"; } 57 | 58 | .icon-refresh:before { content: "\e6aa"; } 59 | 60 | .icon-rfq:before { content: "\e6ab"; } 61 | 62 | .icon-search:before { content: "\e6ac"; } 63 | 64 | .icon-selected:before { content: "\e6ad"; } 65 | 66 | .icon-set:before { content: "\e6ae"; } 67 | 68 | .icon-smile:before { content: "\e6af"; } 69 | 70 | .icon-success:before { content: "\e6b1"; } 71 | 72 | .icon-survey:before { content: "\e6b2"; } 73 | 74 | .icon-training:before { content: "\e6b3"; } 75 | 76 | .icon-viewgallery:before { content: "\e6b4"; } 77 | 78 | .icon-viewlist:before { content: "\e6b5"; } 79 | 80 | .icon-warning:before { content: "\e6b6"; } 81 | 82 | .icon-wrong:before { content: "\e6b7"; } 83 | 84 | .icon-account:before { content: "\e6b8"; } 85 | 86 | .icon-add:before { content: "\e6b9"; } 87 | 88 | .icon-atm:before { content: "\e6ba"; } 89 | 90 | .icon-clock:before { content: "\e6bb"; } 91 | 92 | .icon-remind:before { content: "\e6bc"; } 93 | 94 | .icon-calendar:before { content: "\e6bf"; } 95 | 96 | .icon-attachment:before { content: "\e6c0"; } 97 | 98 | .icon-3column:before { content: "\e6c3"; } 99 | 100 | .icon-4column:before { content: "\e6c4"; } 101 | 102 | .icon-discount:before { content: "\e6c5"; } 103 | 104 | .icon-service:before { content: "\e6c7"; } 105 | 106 | .icon-print:before { content: "\e6c9"; } 107 | 108 | .icon-box:before { content: "\e6cb"; } 109 | 110 | .icon-process:before { content: "\e6ce"; } 111 | 112 | .icon-bags:before { content: "\e6d1"; } 113 | 114 | .icon-beauty:before { content: "\e6d2"; } 115 | 116 | .icon-electrical:before { content: "\e6d4"; } 117 | 118 | .icon-electronics:before { content: "\e6da"; } 119 | 120 | .icon-gifts:before { content: "\e6db"; } 121 | 122 | .icon-apparel:before { content: "\e6dc"; } 123 | 124 | .icon-atmaway:before { content: "\e6e9"; } 125 | 126 | .icon-rfq1:before { content: "\e6eb"; } 127 | 128 | .icon-scanning:before { content: "\e6ec"; } 129 | 130 | .icon-filter:before { content: "\e6f1"; } 131 | 132 | .icon-pin:before { content: "\e6f2"; } 133 | 134 | .icon-history:before { content: "\e6f3"; } 135 | 136 | .icon-productfeatures:before { content: "\e6f4"; } 137 | 138 | .icon-supplierfeatures:before { content: "\e6f5"; } 139 | 140 | .icon-similarproduct:before { content: "\e6f6"; } 141 | 142 | .icon-link:before { content: "\e6f7"; } 143 | 144 | .icon-cut:before { content: "\e6f8"; } 145 | 146 | .icon-navlist:before { content: "\e6fa"; } 147 | 148 | .icon-imagetext:before { content: "\e6fb"; } 149 | 150 | .icon-text:before { content: "\e6fc"; } 151 | 152 | .icon-move:before { content: "\e6fd"; } 153 | 154 | .icon-subtract:before { content: "\e6fe"; } 155 | 156 | .icon-dollar:before { content: "\e702"; } 157 | 158 | .icon-raw:before { content: "\e704"; } 159 | 160 | .icon-office:before { content: "\e705"; } 161 | 162 | .icon-agriculture:before { content: "\e707"; } 163 | 164 | .icon-machinery:before { content: "\e709"; } 165 | 166 | .icon-assessedbadge:before { content: "\e70a"; } 167 | 168 | .icon-gerenzhongxin:before { content: "\e70b"; } 169 | 170 | .icon-jifen:before { content: "\e70c"; } 171 | 172 | .icon-operation:before { content: "\e70e"; } 173 | 174 | .icon-remind1:before { content: "\e713"; } 175 | 176 | .icon-icondownload:before { content: "\e714"; } 177 | 178 | .icon-map:before { content: "\e715"; } 179 | 180 | .icon-good:before { content: "\e717"; } 181 | 182 | .icon-skip:before { content: "\e718"; } 183 | 184 | .icon-iconfontplay2:before { content: "\e719"; } 185 | 186 | .icon-iconfontstop:before { content: "\e71a"; } 187 | 188 | .icon-compass:before { content: "\e71b"; } 189 | 190 | .icon-security:before { content: "\e71c"; } 191 | 192 | .icon-share:before { content: "\e71d"; } 193 | 194 | .icon-store:before { content: "\e722"; } 195 | 196 | .icon-rejectedorder:before { content: "\e724"; } 197 | 198 | .icon-phone:before { content: "\e725"; } 199 | 200 | .icon-bussinessman:before { content: "\e726"; } 201 | 202 | .icon-mobilephone:before { content: "\e72a"; } 203 | 204 | .icon-emailfilling:before { content: "\e72d"; } 205 | 206 | .icon-favoritesfilling:before { content: "\e730"; } 207 | 208 | .icon-accountfilling:before { content: "\e732"; } 209 | 210 | .icon-creditlevelfilling:before { content: "\e736"; } 211 | 212 | .icon-exl:before { content: "\e73f"; } 213 | 214 | .icon-pdf:before { content: "\e740"; } 215 | 216 | .icon-zip:before { content: "\e741"; } 217 | 218 | .icon-sorting:before { content: "\e743"; } 219 | 220 | .icon-copy:before { content: "\e744"; } 221 | 222 | .icon-hot:before { content: "\e756"; } 223 | 224 | .icon-trade:before { content: "\e758"; } 225 | 226 | .icon-component:before { content: "\e75e"; } 227 | 228 | .icon-color:before { content: "\e760"; } 229 | 230 | .icon-color-filling:before { content: "\e7cd"; } 231 | 232 | .icon-favorites:before { content: "\e7ce"; } 233 | 234 | .icon-RFQ:before { content: "\e803"; } 235 | 236 | .icon-originalimage:before { content: "\e806"; } 237 | 238 | .icon-logistic:before { content: "\e811"; } 239 | 240 | .icon-video:before { content: "\e820"; } 241 | 242 | -------------------------------------------------------------------------------- /assets/iconfont/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /assets/iconfont/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
    12 |

    IconFont 图标

    13 |
      14 | 15 |
    • 16 | 17 |
      all
      18 |
      .icon-all
      19 |
      • 20 | 21 |
    • 22 | 23 |
      back
      24 |
      .icon-back
      25 |
      • 26 | 27 |
    • 28 | 29 |
      cart
      30 |
      .icon-cart
      31 |
      • 32 | 33 |
    • 34 | 35 |
      Category
      36 |
      .icon-category
      37 |
      • 38 | 39 |
    • 40 | 41 |
      close
      42 |
      .icon-close
      43 |
      • 44 | 45 |
    • 46 | 47 |
      comments
      48 |
      .icon-comments
      49 |
      • 50 | 51 |
    • 52 | 53 |
      cry
      54 |
      .icon-cry
      55 |
      • 56 | 57 |
    • 58 | 59 |
      delete
      60 |
      .icon-delete
      61 |
      • 62 | 63 |
    • 64 | 65 |
      edit
      66 |
      .icon-edit
      67 |
      • 68 | 69 |
    • 70 | 71 |
      email
      72 |
      .icon-email
      73 |
      • 74 | 75 |
    • 76 | 77 |
      favorite
      78 |
      .icon-favorite
      79 |
      • 80 | 81 |
    • 82 | 83 |
      folder
      84 |
      .icon-folder
      85 |
      • 86 | 87 |
    • 88 | 89 |
      form
      90 |
      .icon-form
      91 |
      • 92 | 93 |
    • 94 | 95 |
      help
      96 |
      .icon-help
      97 |
      • 98 | 99 |
    • 100 | 101 |
      information
      102 |
      .icon-information
      103 |
      • 104 | 105 |
    • 106 | 107 |
      less
      108 |
      .icon-less
      109 |
      • 110 | 111 |
    • 112 | 113 |
      more_unfold
      114 |
      .icon-moreunfold
      115 |
      • 116 | 117 |
    • 118 | 119 |
      more
      120 |
      .icon-more
      121 |
      • 122 | 123 |
    • 124 | 125 |
      pic
      126 |
      .icon-pic
      127 |
      • 128 | 129 |
    • 130 | 131 |
      QRCode
      132 |
      .icon-qrcode
      133 |
      • 134 | 135 |
    • 136 | 137 |
      refresh
      138 |
      .icon-refresh
      139 |
      • 140 | 141 |
    • 142 | 143 |
      RFQ
      144 |
      .icon-rfq
      145 |
      • 146 | 147 |
    • 148 | 149 |
      search
      150 |
      .icon-search
      151 |
      • 152 | 153 |
    • 154 | 155 |
      selected
      156 |
      .icon-selected
      157 |
      • 158 | 159 |
    • 160 | 161 |
      set
      162 |
      .icon-set
      163 |
      • 164 | 165 |
    • 166 | 167 |
      Smile
      168 |
      .icon-smile
      169 |
      • 170 | 171 |
    • 172 | 173 |
      success
      174 |
      .icon-success
      175 |
      • 176 | 177 |
    • 178 | 179 |
      survey
      180 |
      .icon-survey
      181 |
      • 182 | 183 |
    • 184 | 185 |
      training
      186 |
      .icon-training
      187 |
      • 188 | 189 |
    • 190 | 191 |
      ViewGallery
      192 |
      .icon-viewgallery
      193 |
      • 194 | 195 |
    • 196 | 197 |
      Viewlist
      198 |
      .icon-viewlist
      199 |
      • 200 | 201 |
    • 202 | 203 |
      warning
      204 |
      .icon-warning
      205 |
      • 206 | 207 |
    • 208 | 209 |
      wrong
      210 |
      .icon-wrong
      211 |
      • 212 | 213 |
    • 214 | 215 |
      account
      216 |
      .icon-account
      217 |
      • 218 | 219 |
    • 220 | 221 |
      add
      222 |
      .icon-add
      223 |
      • 224 | 225 |
    • 226 | 227 |
      atm
      228 |
      .icon-atm
      229 |
      • 230 | 231 |
    • 232 | 233 |
      clock
      234 |
      .icon-clock
      235 |
      • 236 | 237 |
    • 238 | 239 |
      remind
      240 |
      .icon-remind
      241 |
      • 242 | 243 |
    • 244 | 245 |
      calendar
      246 |
      .icon-calendar
      247 |
      • 248 | 249 |
    • 250 | 251 |
      attachment
      252 |
      .icon-attachment
      253 |
      • 254 | 255 |
    • 256 | 257 |
      3column
      258 |
      .icon-3column
      259 |
      • 260 | 261 |
    • 262 | 263 |
      4column
      264 |
      .icon-4column
      265 |
      • 266 | 267 |
    • 268 | 269 |
      discount
      270 |
      .icon-discount
      271 |
      • 272 | 273 |
    • 274 | 275 |
      service
      276 |
      .icon-service
      277 |
      • 278 | 279 |
    • 280 | 281 |
      print
      282 |
      .icon-print
      283 |
      • 284 | 285 |
    • 286 | 287 |
      box
      288 |
      .icon-box
      289 |
      • 290 | 291 |
    • 292 | 293 |
      process
      294 |
      .icon-process
      295 |
      • 296 | 297 |
    • 298 | 299 |
      bags
      300 |
      .icon-bags
      301 |
      • 302 | 303 |
    • 304 | 305 |
      beauty
      306 |
      .icon-beauty
      307 |
      • 308 | 309 |
    • 310 | 311 |
      electrical
      312 |
      .icon-electrical
      313 |
      • 314 | 315 |
    • 316 | 317 |
      electronics
      318 |
      .icon-electronics
      319 |
      • 320 | 321 |
    • 322 | 323 |
      gifts
      324 |
      .icon-gifts
      325 |
      • 326 | 327 |
    • 328 | 329 |
      apparel
      330 |
      .icon-apparel
      331 |
      • 332 | 333 |
    • 334 | 335 |
      atm-away
      336 |
      .icon-atmaway
      337 |
      • 338 | 339 |
    • 340 | 341 |
      rfq
      342 |
      .icon-rfq1
      343 |
      • 344 | 345 |
    • 346 | 347 |
      scanning
      348 |
      .icon-scanning
      349 |
      • 350 | 351 |
    • 352 | 353 |
      filter
      354 |
      .icon-filter
      355 |
      • 356 | 357 |
    • 358 | 359 |
      pin
      360 |
      .icon-pin
      361 |
      • 362 | 363 |
    • 364 | 365 |
      history
      366 |
      .icon-history
      367 |
      • 368 | 369 |
    • 370 | 371 |
      product-features
      372 |
      .icon-productfeatures
      373 |
      • 374 | 375 |
    • 376 | 377 |
      supplier-features
      378 |
      .icon-supplierfeatures
      379 |
      • 380 | 381 |
    • 382 | 383 |
      similar-product
      384 |
      .icon-similarproduct
      385 |
      • 386 | 387 |
    • 388 | 389 |
      link
      390 |
      .icon-link
      391 |
      • 392 | 393 |
    • 394 | 395 |
      cut
      396 |
      .icon-cut
      397 |
      • 398 | 399 |
    • 400 | 401 |
      nav-list
      402 |
      .icon-navlist
      403 |
      • 404 | 405 |
    • 406 | 407 |
      image-text
      408 |
      .icon-imagetext
      409 |
      • 410 | 411 |
    • 412 | 413 |
      text
      414 |
      .icon-text
      415 |
      • 416 | 417 |
    • 418 | 419 |
      move
      420 |
      .icon-move
      421 |
      • 422 | 423 |
    • 424 | 425 |
      subtract
      426 |
      .icon-subtract
      427 |
      • 428 | 429 |
    • 430 | 431 |
      dollar
      432 |
      .icon-dollar
      433 |
      • 434 | 435 |
    • 436 | 437 |
      raw
      438 |
      .icon-raw
      439 |
      • 440 | 441 |
    • 442 | 443 |
      office
      444 |
      .icon-office
      445 |
      • 446 | 447 |
    • 448 | 449 |
      agriculture
      450 |
      .icon-agriculture
      451 |
      • 452 | 453 |
    • 454 | 455 |
      machinery
      456 |
      .icon-machinery
      457 |
      • 458 | 459 |
    • 460 | 461 |
      assessed-Badge
      462 |
      .icon-assessedbadge
      463 |
      • 464 | 465 |
    • 466 | 467 |
      personal-center
      468 |
      .icon-gerenzhongxin
      469 |
      • 470 | 471 |
    • 472 | 473 |
      integral
      474 |
      .icon-jifen
      475 |
      • 476 | 477 |
    • 478 | 479 |
      operation
      480 |
      .icon-operation
      481 |
      • 482 | 483 |
    • 484 | 485 |
      remind
      486 |
      .icon-remind1
      487 |
      • 488 | 489 |
    • 490 | 491 |
      download
      492 |
      .icon-icondownload
      493 |
      • 494 | 495 |
    • 496 | 497 |
      map
      498 |
      .icon-map
      499 |
      • 500 | 501 |
    • 502 | 503 |
      good
      504 |
      .icon-good
      505 |
      • 506 | 507 |
    • 508 | 509 |
      skip
      510 |
      .icon-skip
      511 |
      • 512 | 513 |
    • 514 | 515 |
      play
      516 |
      .icon-iconfontplay2
      517 |
      • 518 | 519 |
    • 520 | 521 |
      stop
      522 |
      .icon-iconfontstop
      523 |
      • 524 | 525 |
    • 526 | 527 |
      compass
      528 |
      .icon-compass
      529 |
      • 530 | 531 |
    • 532 | 533 |
      security
      534 |
      .icon-security
      535 |
      • 536 | 537 |
    • 538 | 539 |
      share
      540 |
      .icon-share
      541 |
      • 542 | 543 |
    • 544 | 545 |
      store
      546 |
      .icon-store
      547 |
      • 548 | 549 |
    • 550 | 551 |
      rejected-order
      552 |
      .icon-rejectedorder
      553 |
      • 554 | 555 |
    • 556 | 557 |
      phone
      558 |
      .icon-phone
      559 |
      • 560 | 561 |
    • 562 | 563 |
      bussiness-man
      564 |
      .icon-bussinessman
      565 |
      • 566 | 567 |
    • 568 | 569 |
      Mobile-phone
      570 |
      .icon-mobilephone
      571 |
      • 572 | 573 |
    • 574 | 575 |
      email-filling
      576 |
      .icon-emailfilling
      577 |
      • 578 | 579 |
    • 580 | 581 |
      favorites-filling
      582 |
      .icon-favoritesfilling
      583 |
      • 584 | 585 |
    • 586 | 587 |
      account-filling
      588 |
      .icon-accountfilling
      589 |
      • 590 | 591 |
    • 592 | 593 |
      credit-level-filling
      594 |
      .icon-creditlevelfilling
      595 |
      • 596 | 597 |
    • 598 | 599 |
      exl
      600 |
      .icon-exl
      601 |
      • 602 | 603 |
    • 604 | 605 |
      pdf
      606 |
      .icon-pdf
      607 |
      • 608 | 609 |
    • 610 | 611 |
      zip
      612 |
      .icon-zip
      613 |
      • 614 | 615 |
    • 616 | 617 |
      sorting
      618 |
      .icon-sorting
      619 |
      • 620 | 621 |
    • 622 | 623 |
      copy
      624 |
      .icon-copy
      625 |
      • 626 | 627 |
    • 628 | 629 |
      hot
      630 |
      .icon-hot
      631 |
      • 632 | 633 |
    • 634 | 635 |
      trade
      636 |
      .icon-trade
      637 |
      • 638 | 639 |
    • 640 | 641 |
      component
      642 |
      .icon-component
      643 |
      • 644 | 645 |
    • 646 | 647 |
      color
      648 |
      .icon-color
      649 |
      • 650 | 651 |
    • 652 | 653 |
      color-filling
      654 |
      .icon-color-filling
      655 |
      • 656 | 657 |
    • 658 | 659 |
      favorites
      660 |
      .icon-favorites
      661 |
      • 662 | 663 |
    • 664 | 665 |
      RFQ
      666 |
      .icon-RFQ
      667 |
      • 668 | 669 |
    • 670 | 671 |
      original-image
      672 |
      .icon-originalimage
      673 |
      • 674 | 675 |
    • 676 | 677 |
      logistic
      678 |
      .icon-logistic
      679 |
      • 680 | 681 |
    • 682 | 683 |
      video
      684 |
      .icon-video
      685 |
      • 686 | 687 |
    688 | 689 |

    font-class引用

    690 |
    691 | 692 |

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

    693 |

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

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

    使用步骤如下：

    701 |

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

    702 | 703 | 704 | 
    <link rel="stylesheet" type="text/css" href="./iconfont.css">
    705 |

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

    706 | 
    <i class="iconfont icon-xxx"></i>
    707 |
    708 |

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

    709 |
    710 |
    711 | 712 | 713 | -------------------------------------------------------------------------------- /assets/iconfont/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
    32 |

    IconFont 图标

    33 |
      34 | 35 |
    • 36 | 37 |
      all
      38 |
      &#xe696;
      39 |
      • 40 | 41 |
    • 42 | 43 |
      back
      44 |
      &#xe697;
      45 |
      • 46 | 47 |
    • 48 | 49 |
      cart
      50 |
      &#xe698;
      51 |
      • 52 | 53 |
    • 54 | 55 |
      Category
      56 |
      &#xe699;
      57 |
      • 58 | 59 |
    • 60 | 61 |
      close
      62 |
      &#xe69a;
      63 |
      • 64 | 65 |
    • 66 | 67 |
      comments
      68 |
      &#xe69b;
      69 |
      • 70 | 71 |
    • 72 | 73 |
      cry
      74 |
      &#xe69c;
      75 |
      • 76 | 77 |
    • 78 | 79 |
      delete
      80 |
      &#xe69d;
      81 |
      • 82 | 83 |
    • 84 | 85 |
      edit
      86 |
      &#xe69e;
      87 |
      • 88 | 89 |
    • 90 | 91 |
      email
      92 |
      &#xe69f;
      93 |
      • 94 | 95 |
    • 96 | 97 |
      favorite
      98 |
      &#xe6a0;
      99 |
      • 100 | 101 |
    • 102 | 103 |
      folder
      104 |
      &#xe6a1;
      105 |
      • 106 | 107 |
    • 108 | 109 |
      form
      110 |
      &#xe6a2;
      111 |
      • 112 | 113 |
    • 114 | 115 |
      help
      116 |
      &#xe6a3;
      117 |
      • 118 | 119 |
    • 120 | 121 |
      information
      122 |
      &#xe6a4;
      123 |
      • 124 | 125 |
    • 126 | 127 |
      less
      128 |
      &#xe6a5;
      129 |
      • 130 | 131 |
    • 132 | 133 |
      more_unfold
      134 |
      &#xe6a6;
      135 |
      • 136 | 137 |
    • 138 | 139 |
      more
      140 |
      &#xe6a7;
      141 |
      • 142 | 143 |
    • 144 | 145 |
      pic
      146 |
      &#xe6a8;
      147 |
      • 148 | 149 |
    • 150 | 151 |
      QRCode
      152 |
      &#xe6a9;
      153 |
      • 154 | 155 |
    • 156 | 157 |
      refresh
      158 |
      &#xe6aa;
      159 |
      • 160 | 161 |
    • 162 | 163 |
      RFQ
      164 |
      &#xe6ab;
      165 |
      • 166 | 167 |
    • 168 | 169 |
      search
      170 |
      &#xe6ac;
      171 |
      • 172 | 173 |
    • 174 | 175 |
      selected
      176 |
      &#xe6ad;
      177 |
      • 178 | 179 |
    • 180 | 181 |
      set
      182 |
      &#xe6ae;
      183 |
      • 184 | 185 |
    • 186 | 187 |
      Smile
      188 |
      &#xe6af;
      189 |
      • 190 | 191 |
    • 192 | 193 |
      success
      194 |
      &#xe6b1;
      195 |
      • 196 | 197 |
    • 198 | 199 |
      survey
      200 |
      &#xe6b2;
      201 |
      • 202 | 203 |
    • 204 | 205 |
      training
      206 |
      &#xe6b3;
      207 |
      • 208 | 209 |
    • 210 | 211 |
      ViewGallery
      212 |
      &#xe6b4;
      213 |
      • 214 | 215 |
    • 216 | 217 |
      Viewlist
      218 |
      &#xe6b5;
      219 |
      • 220 | 221 |
    • 222 | 223 |
      warning
      224 |
      &#xe6b6;
      225 |
      • 226 | 227 |
    • 228 | 229 |
      wrong
      230 |
      &#xe6b7;
      231 |
      • 232 | 233 |
    • 234 | 235 |
      account
      236 |
      &#xe6b8;
      237 |
      • 238 | 239 |
    • 240 | 241 |
      add
      242 |
      &#xe6b9;
      243 |
      • 244 | 245 |
    • 246 | 247 |
      atm
      248 |
      &#xe6ba;
      249 |
      • 250 | 251 |
    • 252 | 253 |
      clock
      254 |
      &#xe6bb;
      255 |
      • 256 | 257 |
    • 258 | 259 |
      remind
      260 |
      &#xe6bc;
      261 |
      • 262 | 263 |
    • 264 | 265 |
      calendar
      266 |
      &#xe6bf;
      267 |
      • 268 | 269 |
    • 270 | 271 |
      attachment
      272 |
      &#xe6c0;
      273 |
      • 274 | 275 |
    • 276 | 277 |
      3column
      278 |
      &#xe6c3;
      279 |
      • 280 | 281 |
    • 282 | 283 |
      4column
      284 |
      &#xe6c4;
      285 |
      • 286 | 287 |
    • 288 | 289 |
      discount
      290 |
      &#xe6c5;
      291 |
      • 292 | 293 |
    • 294 | 295 |
      service
      296 |
      &#xe6c7;
      297 |
      • 298 | 299 |
    • 300 | 301 |
      print
      302 |
      &#xe6c9;
      303 |
      • 304 | 305 |
    • 306 | 307 |
      box
      308 |
      &#xe6cb;
      309 |
      • 310 | 311 |
    • 312 | 313 |
      process
      314 |
      &#xe6ce;
      315 |
      • 316 | 317 |
    • 318 | 319 |
      bags
      320 |
      &#xe6d1;
      321 |
      • 322 | 323 |
    • 324 | 325 |
      beauty
      326 |
      &#xe6d2;
      327 |
      • 328 | 329 |
    • 330 | 331 |
      electrical
      332 |
      &#xe6d4;
      333 |
      • 334 | 335 |
    • 336 | 337 |
      electronics
      338 |
      &#xe6da;
      339 |
      • 340 | 341 |
    • 342 | 343 |
      gifts
      344 |
      &#xe6db;
      345 |
      • 346 | 347 |
    • 348 | 349 |
      apparel
      350 |
      &#xe6dc;
      351 |
      • 352 | 353 |
    • 354 | 355 |
      atm-away
      356 |
      &#xe6e9;
      357 |
      • 358 | 359 |
    • 360 | 361 |
      rfq
      362 |
      &#xe6eb;
      363 |
      • 364 | 365 |
    • 366 | 367 |
      scanning
      368 |
      &#xe6ec;
      369 |
      • 370 | 371 |
    • 372 | 373 |
      filter
      374 |
      &#xe6f1;
      375 |
      • 376 | 377 |
    • 378 | 379 |
      pin
      380 |
      &#xe6f2;
      381 |
      • 382 | 383 |
    • 384 | 385 |
      history
      386 |
      &#xe6f3;
      387 |
      • 388 | 389 |
    • 390 | 391 |
      product-features
      392 |
      &#xe6f4;
      393 |
      • 394 | 395 |
    • 396 | 397 |
      supplier-features
      398 |
      &#xe6f5;
      399 |
      • 400 | 401 |
    • 402 | 403 |
      similar-product
      404 |
      &#xe6f6;
      405 |
      • 406 | 407 |
    • 408 | 409 |
      link
      410 |
      &#xe6f7;
      411 |
      • 412 | 413 |
    • 414 | 415 |
      cut
      416 |
      &#xe6f8;
      417 |
      • 418 | 419 |
    • 420 | 421 |
      nav-list
      422 |
      &#xe6fa;
      423 |
      • 424 | 425 |
    • 426 | 427 |
      image-text
      428 |
      &#xe6fb;
      429 |
      • 430 | 431 |
    • 432 | 433 |
      text
      434 |
      &#xe6fc;
      435 |
      • 436 | 437 |
    • 438 | 439 |
      move
      440 |
      &#xe6fd;
      441 |
      • 442 | 443 |
    • 444 | 445 |
      subtract
      446 |
      &#xe6fe;
      447 |
      • 448 | 449 |
    • 450 | 451 |
      dollar
      452 |
      &#xe702;
      453 |
      • 454 | 455 |
    • 456 | 457 |
      raw
      458 |
      &#xe704;
      459 |
      • 460 | 461 |
    • 462 | 463 |
      office
      464 |
      &#xe705;
      465 |
      • 466 | 467 |
    • 468 | 469 |
      agriculture
      470 |
      &#xe707;
      471 |
      • 472 | 473 |
    • 474 | 475 |
      machinery
      476 |
      &#xe709;
      477 |
      • 478 | 479 |
    • 480 | 481 |
      assessed-Badge
      482 |
      &#xe70a;
      483 |
      • 484 | 485 |
    • 486 | 487 |
      personal-center
      488 |
      &#xe70b;
      489 |
      • 490 | 491 |
    • 492 | 493 |
      integral
      494 |
      &#xe70c;
      495 |
      • 496 | 497 |
    • 498 | 499 |
      operation
      500 |
      &#xe70e;
      501 |
      • 502 | 503 |
    • 504 | 505 |
      remind
      506 |
      &#xe713;
      507 |
      • 508 | 509 |
    • 510 | 511 |
      download
      512 |
      &#xe714;
      513 |
      • 514 | 515 |
    • 516 | 517 |
      map
      518 |
      &#xe715;
      519 |
      • 520 | 521 |
    • 522 | 523 |
      good
      524 |
      &#xe717;
      525 |
      • 526 | 527 |
    • 528 | 529 |
      skip
      530 |
      &#xe718;
      531 |
      • 532 | 533 |
    • 534 | 535 |
      play
      536 |
      &#xe719;
      537 |
      • 538 | 539 |
    • 540 | 541 |
      stop
      542 |
      &#xe71a;
      543 |
      • 544 | 545 |
    • 546 | 547 |
      compass
      548 |
      &#xe71b;
      549 |
      • 550 | 551 |
    • 552 | 553 |
      security
      554 |
      &#xe71c;
      555 |
      • 556 | 557 |
    • 558 | 559 |
      share
      560 |
      &#xe71d;
      561 |
      • 562 | 563 |
    • 564 | 565 |
      store
      566 |
      &#xe722;
      567 |
      • 568 | 569 |
    • 570 | 571 |
      rejected-order
      572 |
      &#xe724;
      573 |
      • 574 | 575 |
    • 576 | 577 |
      phone
      578 |
      &#xe725;
      579 |
      • 580 | 581 |
    • 582 | 583 |
      bussiness-man
      584 |
      &#xe726;
      585 |
      • 586 | 587 |
    • 588 | 589 |
      Mobile-phone
      590 |
      &#xe72a;
      591 |
      • 592 | 593 |
    • 594 | 595 |
      email-filling
      596 |
      &#xe72d;
      597 |
      • 598 | 599 |
    • 600 | 601 |
      favorites-filling
      602 |
      &#xe730;
      603 |
      • 604 | 605 |
    • 606 | 607 |
      account-filling
      608 |
      &#xe732;
      609 |
      • 610 | 611 |
    • 612 | 613 |
      credit-level-filling
      614 |
      &#xe736;
      615 |
      • 616 | 617 |
    • 618 | 619 |
      exl
      620 |
      &#xe73f;
      621 |
      • 622 | 623 |
    • 624 | 625 |
      pdf
      626 |
      &#xe740;
      627 |
      • 628 | 629 |
    • 630 | 631 |
      zip
      632 |
      &#xe741;
      633 |
      • 634 | 635 |
    • 636 | 637 |
      sorting
      638 |
      &#xe743;
      639 |
      • 640 | 641 |
    • 642 | 643 |
      copy
      644 |
      &#xe744;
      645 |
      • 646 | 647 |
    • 648 | 649 |
      hot
      650 |
      &#xe756;
      651 |
      • 652 | 653 |
    • 654 | 655 |
      trade
      656 |
      &#xe758;
      657 |
      • 658 | 659 |
    • 660 | 661 |
      component
      662 |
      &#xe75e;
      663 |
      • 664 | 665 |
    • 666 | 667 |
      color
      668 |
      &#xe760;
      669 |
      • 670 | 671 |
    • 672 | 673 |
      color-filling
      674 |
      &#xe7cd;
      675 |
      • 676 | 677 |
    • 678 | 679 |
      favorites
      680 |
      &#xe7ce;
      681 |
      • 682 | 683 |
    • 684 | 685 |
      RFQ
      686 |
      &#xe803;
      687 |
      • 688 | 689 |
    • 690 | 691 |
      original-image
      692 |
      &#xe806;
      693 |
      • 694 | 695 |
    • 696 | 697 |
      logistic
      698 |
      &#xe811;
      699 |
      • 700 | 701 |
    • 702 | 703 |
      video
      704 |
      &#xe820;
      705 |
      • 706 | 707 |
    708 |

    unicode引用

    709 |
    710 | 711 |

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

    712 |
      713 |
    • 兼容性最好，支持ie6+，及所有现代浏览器。
      • 714 |
    • 支持按字体的方式去动态调整图标大小，颜色等等。
      • 715 |
    • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
      • 716 |
    717 |
    718 |

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

    719 |
    720 |

    unicode使用步骤如下：

    721 |

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

    722 | 
    @font-face {
723 |   font-family: 'iconfont';
724 |   src: url('iconfont.eot');
725 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
726 |   url('iconfont.woff') format('woff'),
727 |   url('iconfont.ttf') format('truetype'),
728 |   url('iconfont.svg#iconfont') format('svg');
729 | }
730 |
    731 |

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

    732 | 
    .iconfont{
733 |   font-family:"iconfont" !important;
734 |   font-size:16px;font-style:normal;
735 |   -webkit-font-smoothing: antialiased;
736 |   -webkit-text-stroke-width: 0.2px;
737 |   -moz-osx-font-smoothing: grayscale;
738 | }
739 |
    740 |

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

    741 | 
    <i class="iconfont">&#x33;</i>
    742 | 743 |
    744 |

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

    745 |
    746 |
    747 | 748 | 749 | 750 | 751 | -------------------------------------------------------------------------------- /assets/iconfont/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
    27 |

    IconFont 图标

    28 |
      29 | 30 |
    • 31 | 34 |
      all
      35 |
      #icon-all
      36 |
      • 37 | 38 |
    • 39 | 42 |
      back
      43 |
      #icon-back
      44 |
      • 45 | 46 |
    • 47 | 50 |
      cart
      51 |
      #icon-cart
      52 |
      • 53 | 54 |
    • 55 | 58 |
      Category
      59 |
      #icon-category
      60 |
      • 61 | 62 |
    • 63 | 66 |
      close
      67 |
      #icon-close
      68 |
      • 69 | 70 |
    • 71 | 74 |
      comments
      75 |
      #icon-comments
      76 |
      • 77 | 78 |
    • 79 | 82 |
      cry
      83 |
      #icon-cry
      84 |
      • 85 | 86 |
    • 87 | 90 |
      delete
      91 |
      #icon-delete
      92 |
      • 93 | 94 |
    • 95 | 98 |
      edit
      99 |
      #icon-edit
      100 |
      • 101 | 102 |
    • 103 | 106 |
      email
      107 |
      #icon-email
      108 |
      • 109 | 110 |
    • 111 | 114 |
      favorite
      115 |
      #icon-favorite
      116 |
      • 117 | 118 |
    • 119 | 122 |
      folder
      123 |
      #icon-folder
      124 |
      • 125 | 126 |
    • 127 | 130 |
      form
      131 |
      #icon-form
      132 |
      • 133 | 134 |
    • 135 | 138 |
      help
      139 |
      #icon-help
      140 |
      • 141 | 142 |
    • 143 | 146 |
      information
      147 |
      #icon-information
      148 |
      • 149 | 150 |
    • 151 | 154 |
      less
      155 |
      #icon-less
      156 |
      • 157 | 158 |
    • 159 | 162 |
      more_unfold
      163 |
      #icon-moreunfold
      164 |
      • 165 | 166 |
    • 167 | 170 |
      more
      171 |
      #icon-more
      172 |
      • 173 | 174 |
    • 175 | 178 |
      pic
      179 |
      #icon-pic
      180 |
      • 181 | 182 |
    • 183 | 186 |
      QRCode
      187 |
      #icon-qrcode
      188 |
      • 189 | 190 |
    • 191 | 194 |
      refresh
      195 |
      #icon-refresh
      196 |
      • 197 | 198 |
    • 199 | 202 |
      RFQ
      203 |
      #icon-rfq
      204 |
      • 205 | 206 |
    • 207 | 210 |
      search
      211 |
      #icon-search
      212 |
      • 213 | 214 |
    • 215 | 218 |
      selected
      219 |
      #icon-selected
      220 |
      • 221 | 222 |
    • 223 | 226 |
      set
      227 |
      #icon-set
      228 |
      • 229 | 230 |
    • 231 | 234 |
      Smile
      235 |
      #icon-smile
      236 |
      • 237 | 238 |
    • 239 | 242 |
      success
      243 |
      #icon-success
      244 |
      • 245 | 246 |
    • 247 | 250 |
      survey
      251 |
      #icon-survey
      252 |
      • 253 | 254 |
    • 255 | 258 |
      training
      259 |
      #icon-training
      260 |
      • 261 | 262 |
    • 263 | 266 |
      ViewGallery
      267 |
      #icon-viewgallery
      268 |
      • 269 | 270 |
    • 271 | 274 |
      Viewlist
      275 |
      #icon-viewlist
      276 |
      • 277 | 278 |
    • 279 | 282 |
      warning
      283 |
      #icon-warning
      284 |
      • 285 | 286 |
    • 287 | 290 |
      wrong
      291 |
      #icon-wrong
      292 |
      • 293 | 294 |
    • 295 | 298 |
      account
      299 |
      #icon-account
      300 |
      • 301 | 302 |
    • 303 | 306 |
      add
      307 |
      #icon-add
      308 |
      • 309 | 310 |
    • 311 | 314 |
      atm
      315 |
      #icon-atm
      316 |
      • 317 | 318 |
    • 319 | 322 |
      clock
      323 |
      #icon-clock
      324 |
      • 325 | 326 |
    • 327 | 330 |
      remind
      331 |
      #icon-remind
      332 |
      • 333 | 334 |
    • 335 | 338 |
      calendar
      339 |
      #icon-calendar
      340 |
      • 341 | 342 |
    • 343 | 346 |
      attachment
      347 |
      #icon-attachment
      348 |
      • 349 | 350 |
    • 351 | 354 |
      3column
      355 |
      #icon-3column
      356 |
      • 357 | 358 |
    • 359 | 362 |
      4column
      363 |
      #icon-4column
      364 |
      • 365 | 366 |
    • 367 | 370 |
      discount
      371 |
      #icon-discount
      372 |
      • 373 | 374 |
    • 375 | 378 |
      service
      379 |
      #icon-service
      380 |
      • 381 | 382 |
    • 383 | 386 |
      print
      387 |
      #icon-print
      388 |
      • 389 | 390 |
    • 391 | 394 |
      box
      395 |
      #icon-box
      396 |
      • 397 | 398 |
    • 399 | 402 |
      process
      403 |
      #icon-process
      404 |
      • 405 | 406 |
    • 407 | 410 |
      bags
      411 |
      #icon-bags
      412 |
      • 413 | 414 |
    • 415 | 418 |
      beauty
      419 |
      #icon-beauty
      420 |
      • 421 | 422 |
    • 423 | 426 |
      electrical
      427 |
      #icon-electrical
      428 |
      • 429 | 430 |
    • 431 | 434 |
      electronics
      435 |
      #icon-electronics
      436 |
      • 437 | 438 |
    • 439 | 442 |
      gifts
      443 |
      #icon-gifts
      444 |
      • 445 | 446 |
    • 447 | 450 |
      apparel
      451 |
      #icon-apparel
      452 |
      • 453 | 454 |
    • 455 | 458 |
      atm-away
      459 |
      #icon-atmaway
      460 |
      • 461 | 462 |
    • 463 | 466 |
      rfq
      467 |
      #icon-rfq1
      468 |
      • 469 | 470 |
    • 471 | 474 |
      scanning
      475 |
      #icon-scanning
      476 |
      • 477 | 478 |
    • 479 | 482 |
      filter
      483 |
      #icon-filter
      484 |
      • 485 | 486 |
    • 487 | 490 |
      pin
      491 |
      #icon-pin
      492 |
      • 493 | 494 |
    • 495 | 498 |
      history
      499 |
      #icon-history
      500 |
      • 501 | 502 |
    • 503 | 506 |
      product-features
      507 |
      #icon-productfeatures
      508 |
      • 509 | 510 |
    • 511 | 514 |
      supplier-features
      515 |
      #icon-supplierfeatures
      516 |
      • 517 | 518 |
    • 519 | 522 |
      similar-product
      523 |
      #icon-similarproduct
      524 |
      • 525 | 526 |
    • 527 | 530 |
      link
      531 |
      #icon-link
      532 |
      • 533 | 534 |
    • 535 | 538 |
      cut
      539 |
      #icon-cut
      540 |
      • 541 | 542 |
    • 543 | 546 |
      nav-list
      547 |
      #icon-navlist
      548 |
      • 549 | 550 |
    • 551 | 554 |
      image-text
      555 |
      #icon-imagetext
      556 |
      • 557 | 558 |
    • 559 | 562 |
      text
      563 |
      #icon-text
      564 |
      • 565 | 566 |
    • 567 | 570 |
      move
      571 |
      #icon-move
      572 |
      • 573 | 574 |
    • 575 | 578 |
      subtract
      579 |
      #icon-subtract
      580 |
      • 581 | 582 |
    • 583 | 586 |
      dollar
      587 |
      #icon-dollar
      588 |
      • 589 | 590 |
    • 591 | 594 |
      raw
      595 |
      #icon-raw
      596 |
      • 597 | 598 |
    • 599 | 602 |
      office
      603 |
      #icon-office
      604 |
      • 605 | 606 |
    • 607 | 610 |
      agriculture
      611 |
      #icon-agriculture
      612 |
      • 613 | 614 |
    • 615 | 618 |
      machinery
      619 |
      #icon-machinery
      620 |
      • 621 | 622 |
    • 623 | 626 |
      assessed-Badge
      627 |
      #icon-assessedbadge
      628 |
      • 629 | 630 |
    • 631 | 634 |
      personal-center
      635 |
      #icon-gerenzhongxin
      636 |
      • 637 | 638 |
    • 639 | 642 |
      integral
      643 |
      #icon-jifen
      644 |
      • 645 | 646 |
    • 647 | 650 |
      operation
      651 |
      #icon-operation
      652 |
      • 653 | 654 |
    • 655 | 658 |
      remind
      659 |
      #icon-remind1
      660 |
      • 661 | 662 |
    • 663 | 666 |
      download
      667 |
      #icon-icondownload
      668 |
      • 669 | 670 |
    • 671 | 674 |
      map
      675 |
      #icon-map
      676 |
      • 677 | 678 |
    • 679 | 682 |
      good
      683 |
      #icon-good
      684 |
      • 685 | 686 |
    • 687 | 690 |
      skip
      691 |
      #icon-skip
      692 |
      • 693 | 694 |
    • 695 | 698 |
      play
      699 |
      #icon-iconfontplay2
      700 |
      • 701 | 702 |
    • 703 | 706 |
      stop
      707 |
      #icon-iconfontstop
      708 |
      • 709 | 710 |
    • 711 | 714 |
      compass
      715 |
      #icon-compass
      716 |
      • 717 | 718 |
    • 719 | 722 |
      security
      723 |
      #icon-security
      724 |
      • 725 | 726 |
    • 727 | 730 |
      share
      731 |
      #icon-share
      732 |
      • 733 | 734 |
    • 735 | 738 |
      store
      739 |
      #icon-store
      740 |
      • 741 | 742 |
    • 743 | 746 |
      rejected-order
      747 |
      #icon-rejectedorder
      748 |
      • 749 | 750 |
    • 751 | 754 |
      phone
      755 |
      #icon-phone
      756 |
      • 757 | 758 |
    • 759 | 762 |
      bussiness-man
      763 |
      #icon-bussinessman
      764 |
      • 765 | 766 |
    • 767 | 770 |
      Mobile-phone
      771 |
      #icon-mobilephone
      772 |
      • 773 | 774 |
    • 775 | 778 |
      email-filling
      779 |
      #icon-emailfilling
      780 |
      • 781 | 782 |
    • 783 | 786 |
      favorites-filling
      787 |
      #icon-favoritesfilling
      788 |
      • 789 | 790 |
    • 791 | 794 |
      account-filling
      795 |
      #icon-accountfilling
      796 |
      • 797 | 798 |
    • 799 | 802 |
      credit-level-filling
      803 |
      #icon-creditlevelfilling
      804 |
      • 805 | 806 |
    • 807 | 810 |
      exl
      811 |
      #icon-exl
      812 |
      • 813 | 814 |
    • 815 | 818 |
      pdf
      819 |
      #icon-pdf
      820 |
      • 821 | 822 |
    • 823 | 826 |
      zip
      827 |
      #icon-zip
      828 |
      • 829 | 830 |
    • 831 | 834 |
      sorting
      835 |
      #icon-sorting
      836 |
      • 837 | 838 |
    • 839 | 842 |
      copy
      843 |
      #icon-copy
      844 |
      • 845 | 846 |
    • 847 | 850 |
      hot
      851 |
      #icon-hot
      852 |
      • 853 | 854 |
    • 855 | 858 |
      trade
      859 |
      #icon-trade
      860 |
      • 861 | 862 |
    • 863 | 866 |
      component
      867 |
      #icon-component
      868 |
      • 869 | 870 |
    • 871 | 874 |
      color
      875 |
      #icon-color
      876 |
      • 877 | 878 |
    • 879 | 882 |
      color-filling
      883 |
      #icon-color-filling
      884 |
      • 885 | 886 |
    • 887 | 890 |
      favorites
      891 |
      #icon-favorites
      892 |
      • 893 | 894 |
    • 895 | 898 |
      RFQ
      899 |
      #icon-RFQ
      900 |
      • 901 | 902 |
    • 903 | 906 |
      original-image
      907 |
      #icon-originalimage
      908 |
      • 909 | 910 |
    • 911 | 914 |
      logistic
      915 |
      #icon-logistic
      916 |
      • 917 | 918 |
    • 919 | 922 |
      video
      923 |
      #icon-video
      924 |
      • 925 | 926 |
    927 | 928 | 929 |

    symbol引用

    930 |
    931 | 932 |

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

    934 |
      935 |
    • 支持多色图标了，不再受单色限制。
      • 936 |
    • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
      • 937 |
    • 兼容性较差，支持 ie9+,及现代浏览器。
      • 938 |
    • 浏览器渲染svg的性能一般，还不如png。
      • 939 |
    940 |

    使用步骤如下：

    941 |

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

    942 | 
    <script src="./iconfont.js"></script>
    943 |

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

    944 | 
    <style type="text/css">
945 | .icon {
946 |    width: 1em; height: 1em;
947 |    vertical-align: -0.15em;
948 |    fill: currentColor;
949 |    overflow: hidden;
950 | }
951 | </style>
    952 |

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

    953 | 
    <svg class="icon" aria-hidden="true">
954 |   <use xlink:href="#icon-xxx"></use>
955 | </svg>
956 |
    957 |
    958 | 959 | 960 | -------------------------------------------------------------------------------- /assets/iconfont/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Wed Apr 26 16:45:42 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 43 | 45 | 49 | 52 | 54 | 59 | 64 | 68 | 71 | 74 | 82 | 85 | 89 | 93 | 97 | 99 | 101 | 103 | 107 | 112 | 116 | 120 | 125 | 127 | 135 | 140 | 144 | 149 | 154 | 159 | 165 | 169 | 173 | 176 | 178 | 182 | 186 | 190 | 197 | 201 | 204 | 207 | 210 | 216 | 220 | 224 | 229 | 234 | 238 | 244 | 247 | 253 | 257 | 263 | 266 | 271 | 274 | 280 | 285 | 292 | 297 | 303 | 308 | 311 | 316 | 323 | 331 | 336 | 338 | 343 | 349 | 356 | 364 | 370 | 375 | 380 | 385 | 390 | 395 | 398 | 403 | 408 | 411 | 415 | 419 | 423 | 426 | 430 | 434 | 438 | 443 | 446 | 450 | 452 | 455 | 457 | 459 | 463 | 468 | 473 | 475 | 480 | 486 | 491 | 499 | 506 | 511 | 514 | 519 | 524 | 530 | 533 | 534 | 535 | --------------------------------------------------------------------------------