init
This commit is contained in:
commit
9f109f598f
29
App.vue
Normal file
29
App.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
@import url('static/iconfont/iconfont.css');
|
||||
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.flex-center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.justify-between{
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
20
index.html
Normal file
20
index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
50
main.js
Normal file
50
main.js
Normal file
@ -0,0 +1,50 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
|
||||
try {
|
||||
function isPromise(obj) {
|
||||
return (
|
||||
!!obj &&
|
||||
(typeof obj === "object" || typeof obj === "function") &&
|
||||
typeof obj.then === "function"
|
||||
);
|
||||
}
|
||||
|
||||
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
|
||||
uni.addInterceptor({
|
||||
returnValue(res) {
|
||||
if (!isPromise(res)) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (res[0]) {
|
||||
reject(res[0]);
|
||||
} else {
|
||||
resolve(res[1]);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
} catch (error) { }
|
||||
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
72
manifest.json
Normal file
72
manifest.json
Normal file
@ -0,0 +1,72 @@
|
||||
{
|
||||
"name" : "waimai-app",
|
||||
"appid" : "",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
56
pages.json
Normal file
56
pages.json
Normal file
@ -0,0 +1,56 @@
|
||||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
}
|
||||
}, {
|
||||
"path": "pages/order/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/user/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "我爱外卖",
|
||||
"navigationBarBackgroundColor": "#ff5801",
|
||||
"backgroundColor": "#ff5801"
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"color": "#8a8a8a",
|
||||
"selectedColor": "#ea5a2a",
|
||||
"borderStyle": "#dddddd",
|
||||
"backgroundColor": "#ffffff",
|
||||
"height": "54px",
|
||||
"fontSize": "13px",
|
||||
"spacing": "3px",
|
||||
"list": [{
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "static/images/icons/cart.png",
|
||||
"selectedIconPath": "static/images/icons/cart_select.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/order/index",
|
||||
"iconPath": "static/images/icons/order.png",
|
||||
"selectedIconPath": "static/images/icons/order_select.png",
|
||||
"text": "订单"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/user/index",
|
||||
"iconPath": "static/images/icons/user.png",
|
||||
"selectedIconPath": "static/images/icons/user_select.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
157
pages/index/index.vue
Normal file
157
pages/index/index.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="my-location flex-center">
|
||||
<text class="icon-location iconfont"></text>
|
||||
<text class="address">通力大厦</text>
|
||||
</view>
|
||||
<view class="search-box">
|
||||
<view class="search-input-wrapper flex-center">
|
||||
<text class="iconfont icon-search"></text>
|
||||
<input class="input" type="text" :placeholder="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foods-category">
|
||||
<view class="category-item" v-for="c in categroyList" @click="loadFoodByCid(c.id)" :key="c.id">
|
||||
<view class="cover">
|
||||
<image :src="c.cover" mode=""></image>
|
||||
</view>
|
||||
<view class="title">{{c.id}}{{c.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foods-list">
|
||||
<view class="foods-item" v-for="f in foodsList">
|
||||
<image :src="f.cover" mode=""></image>
|
||||
<view class="foods-name">{{f.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { API_URL } from "../../service/api";
|
||||
|
||||
const foodsList = ref([])
|
||||
|
||||
const categroyList = ref<{
|
||||
id : number; title : string; cover : string
|
||||
}[]>([])
|
||||
|
||||
|
||||
uni.request({
|
||||
url: API_URL + '/api/category',
|
||||
success(ret) {
|
||||
categroyList.value = ret.data.data
|
||||
// console.log(ret.data.data)
|
||||
}
|
||||
})
|
||||
uni.request({
|
||||
url: API_URL + '/api/food/recommend',
|
||||
success(ret) {
|
||||
foodsList.value = ret.data.data
|
||||
// console.log(ret.data.data)
|
||||
}
|
||||
})
|
||||
|
||||
function loadFoodByCid(cid) {
|
||||
uni.request({
|
||||
url: API_URL + '/api/food/category/' + cid,
|
||||
success(ret) {
|
||||
foodsList.value = ret.data.data
|
||||
// console.log(ret.data.data)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
const foodsName = '鱼香肉丝,鱼香茄子,烂肉豇豆,麻婆豆腐'.split(',');
|
||||
const placeholder = ref('搜索 鱼香肉丝 试试')
|
||||
|
||||
|
||||
let timer : any, foodsIndex = 1;
|
||||
onMounted(() => {
|
||||
timer = setInterval(() => {
|
||||
placeholder.value = `搜索 ${foodsName[foodsIndex]} 试试`
|
||||
foodsIndex++;
|
||||
if (foodsIndex >= foodsName.length) {
|
||||
foodsIndex = 0;
|
||||
}
|
||||
}, 5000)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
background-color: $uni-color-primary;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.my-location {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50px;
|
||||
padding: 0px 10rpx;
|
||||
font-size: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-left: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
transform: translateY(1px);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
height: 30px;
|
||||
margin-left: 15px;
|
||||
padding: 0 15px 0 5px;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 分类
|
||||
.foods-category {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
pages/order/index.vue
Normal file
143
pages/order/index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="my-location flex-center">
|
||||
<text class="icon-location iconfont"></text>
|
||||
<text class="address">通力大厦</text>
|
||||
</view>
|
||||
<view class="search-box">
|
||||
<view class="search-input-wrapper flex-center">
|
||||
<text class="iconfont icon-search"></text>
|
||||
<input class="input" type="text" :placeholder="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foods-category">
|
||||
<view class="category-item" v-for="c in categroyList">
|
||||
<view class="cover">
|
||||
<image :src="c.cover" mode=""></image>
|
||||
</view>
|
||||
<view class="title">{{c.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foods-list">
|
||||
<view class="foods-item" v-for="f in foodsList">
|
||||
<image :src="f.cover" mode=""></image>
|
||||
<view class="foods-name">{{f.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { API_URL } from "../../service/api";
|
||||
|
||||
const foodsList = ref([])
|
||||
|
||||
const categroyList = ref<{
|
||||
id : number; title : string; cover : string
|
||||
}[]>([])
|
||||
|
||||
|
||||
uni.request({
|
||||
url: API_URL + '/api/category',
|
||||
success(ret) {
|
||||
categroyList.value = ret.data.data
|
||||
// console.log(ret.data.data)
|
||||
}
|
||||
})
|
||||
uni.request({
|
||||
url: API_URL + '/api/food/recommend',
|
||||
success(ret) {
|
||||
foodsList.value = ret.data.data
|
||||
// console.log(ret.data.data)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const foodsName = '鱼香肉丝,鱼香茄子,烂肉豇豆,麻婆豆腐'.split(',');
|
||||
const placeholder = ref('搜索 鱼香肉丝 试试')
|
||||
|
||||
|
||||
let timer : any, foodsIndex = 1;
|
||||
onMounted(() => {
|
||||
timer = setInterval(() => {
|
||||
placeholder.value = `搜索 ${foodsName[foodsIndex]} 试试`
|
||||
foodsIndex++;
|
||||
if (foodsIndex >= foodsName.length) {
|
||||
foodsIndex = 0;
|
||||
}
|
||||
}, 5000)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
background-color: $uni-color-primary;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.my-location {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50px;
|
||||
padding: 0px 10rpx;
|
||||
font-size: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-left: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
transform: translateY(1px);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
height: 30px;
|
||||
margin-left: 15px;
|
||||
padding: 0 15px 0 5px;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
// 分类
|
||||
.foods-category{
|
||||
overflow: hidden;
|
||||
}
|
||||
.category-item{
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
image{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
pages/user/index.vue
Normal file
19
pages/user/index.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
1
service/api.ts
Normal file
1
service/api.ts
Normal file
@ -0,0 +1 @@
|
||||
export const API_URL = 'http://localhost:8080'
|
||||
539
static/iconfont/demo.css
Normal file
539
static/iconfont/demo.css
Normal file
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
947
static/iconfont/demo_index.html
Normal file
947
static/iconfont/demo_index.html
Normal file
@ -0,0 +1,947 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3988070" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">add</div>
|
||||
<div class="code-name">&#xe6df;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">addition</div>
|
||||
<div class="code-name">&#xe6e2;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">browse_fill</div>
|
||||
<div class="code-name">&#xe6e4;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">browse</div>
|
||||
<div class="code-name">&#xe6e5;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">businesscard</div>
|
||||
<div class="code-name">&#xe6e6;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">camera_fill</div>
|
||||
<div class="code-name">&#xe6e7;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">camera</div>
|
||||
<div class="code-name">&#xe6e8;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">clock_fill</div>
|
||||
<div class="code-name">&#xe6e9;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">clock</div>
|
||||
<div class="code-name">&#xe6ea;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">close</div>
|
||||
<div class="code-name">&#xe6eb;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">coordinates_fill</div>
|
||||
<div class="code-name">&#xe6ec;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">coordinates</div>
|
||||
<div class="code-name">&#xe6ed;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">delete_fill</div>
|
||||
<div class="code-name">&#xe6f2;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">empty</div>
|
||||
<div class="code-name">&#xe6f7;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">empty_fill</div>
|
||||
<div class="code-name">&#xe6f8;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">enterinto</div>
|
||||
<div class="code-name">&#xe6f9;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">enterinto_fill</div>
|
||||
<div class="code-name">&#xe6fa;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">mobilephone</div>
|
||||
<div class="code-name">&#xe70f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">offline_fill</div>
|
||||
<div class="code-name">&#xe712;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">offline</div>
|
||||
<div class="code-name">&#xe713;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">other</div>
|
||||
<div class="code-name">&#xe714;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">redpacket_fill</div>
|
||||
<div class="code-name">&#xe71d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">redpacket</div>
|
||||
<div class="code-name">&#xe71e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">packup</div>
|
||||
<div class="code-name">&#xe749;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">unfold</div>
|
||||
<div class="code-name">&#xe74a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">addition_fill</div>
|
||||
<div class="code-name">&#xe6e0;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">coupon_fill</div>
|
||||
<div class="code-name">&#xe78c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">telephone</div>
|
||||
<div class="code-name">&#xe680;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">user</div>
|
||||
<div class="code-name">&#xe682;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Buy</div>
|
||||
<div class="code-name">&#xe619;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cart-search-fill</div>
|
||||
<div class="code-name">&#xe826;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">order-success-fill</div>
|
||||
<div class="code-name">&#xe833;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">location</div>
|
||||
<div class="code-name">&#xe83d;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1680225819133') format('woff2'),
|
||||
url('iconfont.woff?t=1680225819133') format('woff'),
|
||||
url('iconfont.ttf?t=1680225819133') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-add"></span>
|
||||
<div class="name">
|
||||
add
|
||||
</div>
|
||||
<div class="code-name">.icon-add
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-addition"></span>
|
||||
<div class="name">
|
||||
addition
|
||||
</div>
|
||||
<div class="code-name">.icon-addition
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-browse_fill"></span>
|
||||
<div class="name">
|
||||
browse_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-browse_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-browse"></span>
|
||||
<div class="name">
|
||||
browse
|
||||
</div>
|
||||
<div class="code-name">.icon-browse
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-businesscard"></span>
|
||||
<div class="name">
|
||||
businesscard
|
||||
</div>
|
||||
<div class="code-name">.icon-businesscard
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-camera_fill"></span>
|
||||
<div class="name">
|
||||
camera_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-camera_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-camera"></span>
|
||||
<div class="name">
|
||||
camera
|
||||
</div>
|
||||
<div class="code-name">.icon-camera
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-clock_fill"></span>
|
||||
<div class="name">
|
||||
clock_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-clock_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-clock"></span>
|
||||
<div class="name">
|
||||
clock
|
||||
</div>
|
||||
<div class="code-name">.icon-clock
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-close"></span>
|
||||
<div class="name">
|
||||
close
|
||||
</div>
|
||||
<div class="code-name">.icon-close
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-coordinates_fill"></span>
|
||||
<div class="name">
|
||||
coordinates_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-coordinates_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-coordinates"></span>
|
||||
<div class="name">
|
||||
coordinates
|
||||
</div>
|
||||
<div class="code-name">.icon-coordinates
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-delete_fill"></span>
|
||||
<div class="name">
|
||||
delete_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-delete_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-empty"></span>
|
||||
<div class="name">
|
||||
empty
|
||||
</div>
|
||||
<div class="code-name">.icon-empty
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-empty_fill"></span>
|
||||
<div class="name">
|
||||
empty_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-empty_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-enterinto"></span>
|
||||
<div class="name">
|
||||
enterinto
|
||||
</div>
|
||||
<div class="code-name">.icon-enterinto
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-enterinto_fill"></span>
|
||||
<div class="name">
|
||||
enterinto_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-enterinto_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-mobilephone"></span>
|
||||
<div class="name">
|
||||
mobilephone
|
||||
</div>
|
||||
<div class="code-name">.icon-mobilephone
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-offline_fill"></span>
|
||||
<div class="name">
|
||||
offline_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-offline_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-offline"></span>
|
||||
<div class="name">
|
||||
offline
|
||||
</div>
|
||||
<div class="code-name">.icon-offline
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-other"></span>
|
||||
<div class="name">
|
||||
other
|
||||
</div>
|
||||
<div class="code-name">.icon-other
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-redpacket_fill"></span>
|
||||
<div class="name">
|
||||
redpacket_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-redpacket_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-redpacket"></span>
|
||||
<div class="name">
|
||||
redpacket
|
||||
</div>
|
||||
<div class="code-name">.icon-redpacket
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-packup"></span>
|
||||
<div class="name">
|
||||
packup
|
||||
</div>
|
||||
<div class="code-name">.icon-packup
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-unfold"></span>
|
||||
<div class="name">
|
||||
unfold
|
||||
</div>
|
||||
<div class="code-name">.icon-unfold
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-addition_fill"></span>
|
||||
<div class="name">
|
||||
addition_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-addition_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-coupon_fill"></span>
|
||||
<div class="name">
|
||||
coupon_fill
|
||||
</div>
|
||||
<div class="code-name">.icon-coupon_fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-telephone"></span>
|
||||
<div class="name">
|
||||
telephone
|
||||
</div>
|
||||
<div class="code-name">.icon-telephone
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-user"></span>
|
||||
<div class="name">
|
||||
user
|
||||
</div>
|
||||
<div class="code-name">.icon-user
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-Buy"></span>
|
||||
<div class="name">
|
||||
Buy
|
||||
</div>
|
||||
<div class="code-name">.icon-Buy
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-cart-search-fill"></span>
|
||||
<div class="name">
|
||||
cart-search-fill
|
||||
</div>
|
||||
<div class="code-name">.icon-cart-search-fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-order-success-fill"></span>
|
||||
<div class="name">
|
||||
order-success-fill
|
||||
</div>
|
||||
<div class="code-name">.icon-order-success-fill
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-location"></span>
|
||||
<div class="name">
|
||||
location
|
||||
</div>
|
||||
<div class="code-name">.icon-location
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-add"></use>
|
||||
</svg>
|
||||
<div class="name">add</div>
|
||||
<div class="code-name">#icon-add</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-addition"></use>
|
||||
</svg>
|
||||
<div class="name">addition</div>
|
||||
<div class="code-name">#icon-addition</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-browse_fill"></use>
|
||||
</svg>
|
||||
<div class="name">browse_fill</div>
|
||||
<div class="code-name">#icon-browse_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-browse"></use>
|
||||
</svg>
|
||||
<div class="name">browse</div>
|
||||
<div class="code-name">#icon-browse</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-businesscard"></use>
|
||||
</svg>
|
||||
<div class="name">businesscard</div>
|
||||
<div class="code-name">#icon-businesscard</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-camera_fill"></use>
|
||||
</svg>
|
||||
<div class="name">camera_fill</div>
|
||||
<div class="code-name">#icon-camera_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-camera"></use>
|
||||
</svg>
|
||||
<div class="name">camera</div>
|
||||
<div class="code-name">#icon-camera</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-clock_fill"></use>
|
||||
</svg>
|
||||
<div class="name">clock_fill</div>
|
||||
<div class="code-name">#icon-clock_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-clock"></use>
|
||||
</svg>
|
||||
<div class="name">clock</div>
|
||||
<div class="code-name">#icon-clock</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-close"></use>
|
||||
</svg>
|
||||
<div class="name">close</div>
|
||||
<div class="code-name">#icon-close</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-coordinates_fill"></use>
|
||||
</svg>
|
||||
<div class="name">coordinates_fill</div>
|
||||
<div class="code-name">#icon-coordinates_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-coordinates"></use>
|
||||
</svg>
|
||||
<div class="name">coordinates</div>
|
||||
<div class="code-name">#icon-coordinates</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-delete_fill"></use>
|
||||
</svg>
|
||||
<div class="name">delete_fill</div>
|
||||
<div class="code-name">#icon-delete_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-empty"></use>
|
||||
</svg>
|
||||
<div class="name">empty</div>
|
||||
<div class="code-name">#icon-empty</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-empty_fill"></use>
|
||||
</svg>
|
||||
<div class="name">empty_fill</div>
|
||||
<div class="code-name">#icon-empty_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-enterinto"></use>
|
||||
</svg>
|
||||
<div class="name">enterinto</div>
|
||||
<div class="code-name">#icon-enterinto</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-enterinto_fill"></use>
|
||||
</svg>
|
||||
<div class="name">enterinto_fill</div>
|
||||
<div class="code-name">#icon-enterinto_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-mobilephone"></use>
|
||||
</svg>
|
||||
<div class="name">mobilephone</div>
|
||||
<div class="code-name">#icon-mobilephone</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-offline_fill"></use>
|
||||
</svg>
|
||||
<div class="name">offline_fill</div>
|
||||
<div class="code-name">#icon-offline_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-offline"></use>
|
||||
</svg>
|
||||
<div class="name">offline</div>
|
||||
<div class="code-name">#icon-offline</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-other"></use>
|
||||
</svg>
|
||||
<div class="name">other</div>
|
||||
<div class="code-name">#icon-other</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-redpacket_fill"></use>
|
||||
</svg>
|
||||
<div class="name">redpacket_fill</div>
|
||||
<div class="code-name">#icon-redpacket_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-redpacket"></use>
|
||||
</svg>
|
||||
<div class="name">redpacket</div>
|
||||
<div class="code-name">#icon-redpacket</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-packup"></use>
|
||||
</svg>
|
||||
<div class="name">packup</div>
|
||||
<div class="code-name">#icon-packup</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-unfold"></use>
|
||||
</svg>
|
||||
<div class="name">unfold</div>
|
||||
<div class="code-name">#icon-unfold</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-addition_fill"></use>
|
||||
</svg>
|
||||
<div class="name">addition_fill</div>
|
||||
<div class="code-name">#icon-addition_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-coupon_fill"></use>
|
||||
</svg>
|
||||
<div class="name">coupon_fill</div>
|
||||
<div class="code-name">#icon-coupon_fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-telephone"></use>
|
||||
</svg>
|
||||
<div class="name">telephone</div>
|
||||
<div class="code-name">#icon-telephone</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-user"></use>
|
||||
</svg>
|
||||
<div class="name">user</div>
|
||||
<div class="code-name">#icon-user</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-Buy"></use>
|
||||
</svg>
|
||||
<div class="name">Buy</div>
|
||||
<div class="code-name">#icon-Buy</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-cart-search-fill"></use>
|
||||
</svg>
|
||||
<div class="name">cart-search-fill</div>
|
||||
<div class="code-name">#icon-cart-search-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-order-success-fill"></use>
|
||||
</svg>
|
||||
<div class="name">order-success-fill</div>
|
||||
<div class="code-name">#icon-order-success-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-location"></use>
|
||||
</svg>
|
||||
<div class="name">location</div>
|
||||
<div class="code-name">#icon-location</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
151
static/iconfont/iconfont.css
Normal file
151
static/iconfont/iconfont.css
Normal file
@ -0,0 +1,151 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3988070 */
|
||||
src: url('iconfont.woff2?t=1680227907085') format('woff2'),
|
||||
url('iconfont.woff?t=1680227907085') format('woff'),
|
||||
url('iconfont.ttf?t=1680227907085') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e6e1";
|
||||
}
|
||||
|
||||
.icon-add:before {
|
||||
content: "\e6df";
|
||||
}
|
||||
|
||||
.icon-addition:before {
|
||||
content: "\e6e2";
|
||||
}
|
||||
|
||||
.icon-browse_fill:before {
|
||||
content: "\e6e4";
|
||||
}
|
||||
|
||||
.icon-browse:before {
|
||||
content: "\e6e5";
|
||||
}
|
||||
|
||||
.icon-businesscard:before {
|
||||
content: "\e6e6";
|
||||
}
|
||||
|
||||
.icon-camera_fill:before {
|
||||
content: "\e6e7";
|
||||
}
|
||||
|
||||
.icon-camera:before {
|
||||
content: "\e6e8";
|
||||
}
|
||||
|
||||
.icon-clock_fill:before {
|
||||
content: "\e6e9";
|
||||
}
|
||||
|
||||
.icon-clock:before {
|
||||
content: "\e6ea";
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: "\e6eb";
|
||||
}
|
||||
|
||||
.icon-coordinates_fill:before {
|
||||
content: "\e6ec";
|
||||
}
|
||||
|
||||
.icon-coordinates:before {
|
||||
content: "\e6ed";
|
||||
}
|
||||
|
||||
.icon-delete_fill:before {
|
||||
content: "\e6f2";
|
||||
}
|
||||
|
||||
.icon-empty:before {
|
||||
content: "\e6f7";
|
||||
}
|
||||
|
||||
.icon-empty_fill:before {
|
||||
content: "\e6f8";
|
||||
}
|
||||
|
||||
.icon-enterinto:before {
|
||||
content: "\e6f9";
|
||||
}
|
||||
|
||||
.icon-enterinto_fill:before {
|
||||
content: "\e6fa";
|
||||
}
|
||||
|
||||
.icon-mobilephone:before {
|
||||
content: "\e70f";
|
||||
}
|
||||
|
||||
.icon-offline_fill:before {
|
||||
content: "\e712";
|
||||
}
|
||||
|
||||
.icon-offline:before {
|
||||
content: "\e713";
|
||||
}
|
||||
|
||||
.icon-other:before {
|
||||
content: "\e714";
|
||||
}
|
||||
|
||||
.icon-redpacket_fill:before {
|
||||
content: "\e71d";
|
||||
}
|
||||
|
||||
.icon-redpacket:before {
|
||||
content: "\e71e";
|
||||
}
|
||||
|
||||
.icon-packup:before {
|
||||
content: "\e749";
|
||||
}
|
||||
|
||||
.icon-unfold:before {
|
||||
content: "\e74a";
|
||||
}
|
||||
|
||||
.icon-addition_fill:before {
|
||||
content: "\e6e0";
|
||||
}
|
||||
|
||||
.icon-coupon_fill:before {
|
||||
content: "\e78c";
|
||||
}
|
||||
|
||||
.icon-telephone:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.icon-user:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.icon-Buy:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.icon-cart-search-fill:before {
|
||||
content: "\e826";
|
||||
}
|
||||
|
||||
.icon-order-success-fill:before {
|
||||
content: "\e833";
|
||||
}
|
||||
|
||||
.icon-location:before {
|
||||
content: "\e83d";
|
||||
}
|
||||
|
||||
1
static/iconfont/iconfont.js
Normal file
1
static/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
240
static/iconfont/iconfont.json
Normal file
240
static/iconfont/iconfont.json
Normal file
@ -0,0 +1,240 @@
|
||||
{
|
||||
"id": "3988070",
|
||||
"name": "waimai",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "7008886",
|
||||
"name": "add",
|
||||
"font_class": "add",
|
||||
"unicode": "e6df",
|
||||
"unicode_decimal": 59103
|
||||
},
|
||||
{
|
||||
"icon_id": "7008888",
|
||||
"name": "addition",
|
||||
"font_class": "addition",
|
||||
"unicode": "e6e2",
|
||||
"unicode_decimal": 59106
|
||||
},
|
||||
{
|
||||
"icon_id": "7008895",
|
||||
"name": "browse_fill",
|
||||
"font_class": "browse_fill",
|
||||
"unicode": "e6e4",
|
||||
"unicode_decimal": 59108
|
||||
},
|
||||
{
|
||||
"icon_id": "7008896",
|
||||
"name": "browse",
|
||||
"font_class": "browse",
|
||||
"unicode": "e6e5",
|
||||
"unicode_decimal": 59109
|
||||
},
|
||||
{
|
||||
"icon_id": "7008900",
|
||||
"name": "businesscard",
|
||||
"font_class": "businesscard",
|
||||
"unicode": "e6e6",
|
||||
"unicode_decimal": 59110
|
||||
},
|
||||
{
|
||||
"icon_id": "7008901",
|
||||
"name": "camera_fill",
|
||||
"font_class": "camera_fill",
|
||||
"unicode": "e6e7",
|
||||
"unicode_decimal": 59111
|
||||
},
|
||||
{
|
||||
"icon_id": "7008902",
|
||||
"name": "camera",
|
||||
"font_class": "camera",
|
||||
"unicode": "e6e8",
|
||||
"unicode_decimal": 59112
|
||||
},
|
||||
{
|
||||
"icon_id": "7008903",
|
||||
"name": "clock_fill",
|
||||
"font_class": "clock_fill",
|
||||
"unicode": "e6e9",
|
||||
"unicode_decimal": 59113
|
||||
},
|
||||
{
|
||||
"icon_id": "7008904",
|
||||
"name": "clock",
|
||||
"font_class": "clock",
|
||||
"unicode": "e6ea",
|
||||
"unicode_decimal": 59114
|
||||
},
|
||||
{
|
||||
"icon_id": "7008905",
|
||||
"name": "close",
|
||||
"font_class": "close",
|
||||
"unicode": "e6eb",
|
||||
"unicode_decimal": 59115
|
||||
},
|
||||
{
|
||||
"icon_id": "7008910",
|
||||
"name": "coordinates_fill",
|
||||
"font_class": "coordinates_fill",
|
||||
"unicode": "e6ec",
|
||||
"unicode_decimal": 59116
|
||||
},
|
||||
{
|
||||
"icon_id": "7008911",
|
||||
"name": "coordinates",
|
||||
"font_class": "coordinates",
|
||||
"unicode": "e6ed",
|
||||
"unicode_decimal": 59117
|
||||
},
|
||||
{
|
||||
"icon_id": "7008918",
|
||||
"name": "delete_fill",
|
||||
"font_class": "delete_fill",
|
||||
"unicode": "e6f2",
|
||||
"unicode_decimal": 59122
|
||||
},
|
||||
{
|
||||
"icon_id": "7008928",
|
||||
"name": "empty",
|
||||
"font_class": "empty",
|
||||
"unicode": "e6f7",
|
||||
"unicode_decimal": 59127
|
||||
},
|
||||
{
|
||||
"icon_id": "7008929",
|
||||
"name": "empty_fill",
|
||||
"font_class": "empty_fill",
|
||||
"unicode": "e6f8",
|
||||
"unicode_decimal": 59128
|
||||
},
|
||||
{
|
||||
"icon_id": "7008931",
|
||||
"name": "enterinto",
|
||||
"font_class": "enterinto",
|
||||
"unicode": "e6f9",
|
||||
"unicode_decimal": 59129
|
||||
},
|
||||
{
|
||||
"icon_id": "7008932",
|
||||
"name": "enterinto_fill",
|
||||
"font_class": "enterinto_fill",
|
||||
"unicode": "e6fa",
|
||||
"unicode_decimal": 59130
|
||||
},
|
||||
{
|
||||
"icon_id": "7008970",
|
||||
"name": "mobilephone",
|
||||
"font_class": "mobilephone",
|
||||
"unicode": "e70f",
|
||||
"unicode_decimal": 59151
|
||||
},
|
||||
{
|
||||
"icon_id": "7008973",
|
||||
"name": "offline_fill",
|
||||
"font_class": "offline_fill",
|
||||
"unicode": "e712",
|
||||
"unicode_decimal": 59154
|
||||
},
|
||||
{
|
||||
"icon_id": "7008974",
|
||||
"name": "offline",
|
||||
"font_class": "offline",
|
||||
"unicode": "e713",
|
||||
"unicode_decimal": 59155
|
||||
},
|
||||
{
|
||||
"icon_id": "7008977",
|
||||
"name": "other",
|
||||
"font_class": "other",
|
||||
"unicode": "e714",
|
||||
"unicode_decimal": 59156
|
||||
},
|
||||
{
|
||||
"icon_id": "7008992",
|
||||
"name": "redpacket_fill",
|
||||
"font_class": "redpacket_fill",
|
||||
"unicode": "e71d",
|
||||
"unicode_decimal": 59165
|
||||
},
|
||||
{
|
||||
"icon_id": "7008993",
|
||||
"name": "redpacket",
|
||||
"font_class": "redpacket",
|
||||
"unicode": "e71e",
|
||||
"unicode_decimal": 59166
|
||||
},
|
||||
{
|
||||
"icon_id": "7009048",
|
||||
"name": "packup",
|
||||
"font_class": "packup",
|
||||
"unicode": "e749",
|
||||
"unicode_decimal": 59209
|
||||
},
|
||||
{
|
||||
"icon_id": "7009049",
|
||||
"name": "unfold",
|
||||
"font_class": "unfold",
|
||||
"unicode": "e74a",
|
||||
"unicode_decimal": 59210
|
||||
},
|
||||
{
|
||||
"icon_id": "7008887",
|
||||
"name": "addition_fill",
|
||||
"font_class": "addition_fill",
|
||||
"unicode": "e6e0",
|
||||
"unicode_decimal": 59104
|
||||
},
|
||||
{
|
||||
"icon_id": "10241512",
|
||||
"name": "coupon_fill",
|
||||
"font_class": "coupon_fill",
|
||||
"unicode": "e78c",
|
||||
"unicode_decimal": 59276
|
||||
},
|
||||
{
|
||||
"icon_id": "15838544",
|
||||
"name": "telephone",
|
||||
"font_class": "telephone",
|
||||
"unicode": "e680",
|
||||
"unicode_decimal": 59008
|
||||
},
|
||||
{
|
||||
"icon_id": "15838547",
|
||||
"name": "user",
|
||||
"font_class": "user",
|
||||
"unicode": "e682",
|
||||
"unicode_decimal": 59010
|
||||
},
|
||||
{
|
||||
"icon_id": "23929675",
|
||||
"name": "Buy",
|
||||
"font_class": "Buy",
|
||||
"unicode": "e619",
|
||||
"unicode_decimal": 58905
|
||||
},
|
||||
{
|
||||
"icon_id": "34452803",
|
||||
"name": "cart-search-fill",
|
||||
"font_class": "cart-search-fill",
|
||||
"unicode": "e826",
|
||||
"unicode_decimal": 59430
|
||||
},
|
||||
{
|
||||
"icon_id": "34452929",
|
||||
"name": "order-success-fill",
|
||||
"font_class": "order-success-fill",
|
||||
"unicode": "e833",
|
||||
"unicode_decimal": 59443
|
||||
},
|
||||
{
|
||||
"icon_id": "34453026",
|
||||
"name": "location",
|
||||
"font_class": "location",
|
||||
"unicode": "e83d",
|
||||
"unicode_decimal": 59453
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
static/iconfont/iconfont.ttf
Normal file
BIN
static/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
static/iconfont/iconfont.woff
Normal file
BIN
static/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
static/iconfont/iconfont.woff2
Normal file
BIN
static/iconfont/iconfont.woff2
Normal file
Binary file not shown.
BIN
static/images/icons/cart.png
Normal file
BIN
static/images/icons/cart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/images/icons/cart_select.png
Normal file
BIN
static/images/icons/cart_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
static/images/icons/order.png
Normal file
BIN
static/images/icons/order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/images/icons/order_select.png
Normal file
BIN
static/images/icons/order_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/images/icons/user.png
Normal file
BIN
static/images/icons/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
static/images/icons/user_select.png
Normal file
BIN
static/images/icons/user_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/logo.png
Normal file
BIN
static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
76
uni.scss
Normal file
76
uni.scss
Normal file
@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #ff5801;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
Loading…
x
Reference in New Issue
Block a user