blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat: add font-family (#3061)

Browse Source
This commit is contained in:
neverland 2020-04-24 22:43:18 +08:00 committed by GitHub
parent eeb03ce246
commit 0e481d51f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/src/Preview.vue
View File

@ -1,9 +1,12 @@
<template> <template>
<div> <div>
<img :class="['preview-image', `preview-image--${imageName}`]" :src="image"> <img
:class="['preview-image', `preview-image--${imageName}`]"
:src="image"
/>
<div class="preview-popup"> <div class="preview-popup">
<div class="preview-content"> <div class="preview-content">
<img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg"> <img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" />
<p>微信扫码体验</p> <p>微信扫码体验</p>
</div> </div>
</div> </div>
@ -33,7 +36,9 @@ export default {
body { body {
margin: 0; margin: 0;
color: #323233; color: #323233;
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
line-height: 1; line-height: 1;
background-color: #f7f8fa; background-color: #f7f8fa;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -57,9 +62,9 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, .95); background-color: rgba(255, 255, 255, 0.95);
opacity: 0; opacity: 0;
transition: .3s; transition: 0.3s;
&:hover { &:hover {
opacity: 1; opacity: 1;

1
example/app.wxss
View File

@ -4,7 +4,6 @@ page {
padding: 0 0 100rpx; padding: 0 0 100rpx;
color: #323233; color: #323233;
font-size: 16px; font-size: 16px;
font-family: 'PingFang SC', Helvetica, Arial, sans-serif;
background: #f7f8fa; background: #f7f8fa;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

9
packages/common/index.less
View File

@ -2,7 +2,8 @@
* Entry of basic styles * Entry of basic styles
*/ */
@import "./style/var.less"; @import './style/var.less';
@import "./style/ellipsis.less"; @import './style/normalize.less';
@import "./style/clearfix.less"; @import './style/ellipsis.less';
@import "./style/hairline.less"; @import './style/clearfix.less';
@import './style/hairline.less';

5
packages/common/style/normalize.less vendored Normal file
View File

@ -0,0 +1,5 @@
@import './var';
page {
font-family: @base-font-family;
}

45
packages/common/style/var.less
View File

@ -23,8 +23,8 @@
// Component Colors // Component Colors
@text-color: @gray-8; @text-color: @gray-8;
@active-color: @gray-2; @active-color: @gray-2;
@active-opacity: .7; @active-opacity: 0.7;
@disabled-opacity: .5; @disabled-opacity: 0.5;
@background-color: @gray-1; @background-color: @gray-1;
@background-color-light: #fafafa; @background-color-light: #fafafa;
@ -42,11 +42,15 @@
@font-size-md: 14px; @font-size-md: 14px;
@font-size-lg: 16px; @font-size-lg: 16px;
@font-weight-bold: 500; @font-weight-bold: 500;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif; @base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
sans-serif;
// Animation // Animation
@animation-duration-base: .3s; @animation-duration-base: 0.3s;
@animation-duration-fast: .2s; @animation-duration-fast: 0.2s;
// Border // Border
@border-color: @gray-3; @border-color: @gray-3;
@ -186,7 +190,7 @@
// Checkbox // Checkbox
@checkbox-size: 20px; @checkbox-size: 20px;
@checkbox-border-color: @gray-5; @checkbox-border-color: @gray-5;
@checkbox-transition-duration: .2s; @checkbox-transition-duration: 0.2s;
@checkbox-label-margin: 10px; @checkbox-label-margin: 10px;
@checkbox-label-color: @text-color; @checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue; @checkbox-checked-icon-color: @blue;
@ -198,7 +202,7 @@
@circle-text-color: @text-color; @circle-text-color: @text-color;
// Collapse // Collapse
@collapse-item-transition-duration: .3s; @collapse-item-transition-duration: 0.3s;
@collapse-item-content-padding: 15px; @collapse-item-content-padding: 15px;
@collapse-item-content-font-size: 13px; @collapse-item-content-font-size: 13px;
@collapse-item-content-line-height: 1.5; @collapse-item-content-line-height: 1.5;
@ -272,7 +276,7 @@
@info-background-color: @red; @info-background-color: @red;
@info-dot-color: @red; @info-dot-color: @red;
@info-dot-size: 8px; @info-dot-size: 8px;
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; @info-font-family: @price-integer-font-family;
// Loading // Loading
@loading-text-color: @gray-6; @loading-text-color: @gray-6;
@ -280,7 +284,7 @@
@loading-text-line-height: 20px; @loading-text-line-height: 20px;
@loading-spinner-color: @gray-5; @loading-spinner-color: @gray-5;
@loading-spinner-size: 30px; @loading-spinner-size: 30px;
@loading-spinner-animation-duration: .8s; @loading-spinner-animation-duration: 0.8s;
// NavBar // NavBar
@nav-bar-height: 44px; @nav-bar-height: 44px;
@ -329,8 +333,8 @@
@picker-option-font-size: @font-size-lg; @picker-option-font-size: @font-size-lg;
@picker-option-text-color: @black; @picker-option-text-color: @black;
@picker-loading-icon-color: @blue; @picker-loading-icon-color: @blue;
@picker-loading-mask-color: rgba(255, 255, 255, .9); @picker-loading-mask-color: rgba(255, 255, 255, 0.9);
@picker-option-disabled-opacity: .3; @picker-option-disabled-opacity: 0.3;
@picker-option-selected-text-color: @text-color; @picker-option-selected-text-color: @text-color;
// Popup // Popup
@ -354,7 +358,7 @@
// Radio // Radio
@radio-size: 20px; @radio-size: 20px;
@radio-border-color: @gray-5; @radio-border-color: @gray-5;
@radio-transition-duration: .2s; @radio-transition-duration: 0.2s;
@radio-label-margin: 10px; @radio-label-margin: 10px;
@radio-label-color: @text-color; @radio-label-color: @text-color;
@radio-checked-icon-color: @blue; @radio-checked-icon-color: @blue;
@ -372,12 +376,13 @@
@switch-node-size: 1em; @switch-node-size: 1em;
@switch-node-z-index: 1; @switch-node-z-index: 1;
@switch-node-background-color: @white; @switch-node-background-color: @white;
@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
@switch-background-color: @white; @switch-background-color: @white;
@switch-on-background-color: @blue; @switch-on-background-color: @blue;
@switch-transition-duration: .3s; @switch-transition-duration: 0.3s;
@switch-disabled-opacity: .4; @switch-disabled-opacity: 0.4;
@switch-border: 1px solid rgba(0, 0, 0, .1); @switch-border: 1px solid rgba(0, 0, 0, 0.1);
// Search // Search
@search-background-color: @gray-1; @search-background-color: @gray-1;
@ -415,7 +420,7 @@
@slider-button-height: 24px; @slider-button-height: 24px;
@slider-button-border-radius: 50%; @slider-button-border-radius: 50%;
@slider-button-background-color: @white; @slider-button-background-color: @white;
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
// Step // Step
@step-text-color: @gray-6; @step-text-color: @gray-6;
@ -494,12 +499,12 @@
@tabs-bottom-bar-color: @tabs-default-color; @tabs-bottom-bar-color: @tabs-default-color;
// Tag // Tag
@tag-padding: .2em .5em; @tag-padding: 0.2em 0.5em;
@tag-font-size: @font-size-xs; @tag-font-size: @font-size-xs;
@tag-medium-font-size: @font-size-sm; @tag-medium-font-size: @font-size-sm;
@tag-large-font-size: @font-size-md; @tag-large-font-size: @font-size-md;
@tag-text-color: @white; @tag-text-color: @white;
@tag-border-radius: .2em; @tag-border-radius: 0.2em;
@tag-round-border-radius: @border-radius-max; @tag-round-border-radius: @border-radius-max;
@tag-dander-color: @red; @tag-dander-color: @red;
@tag-primary-color: @blue; @tag-primary-color: @blue;
@ -514,7 +519,7 @@
@toast-text-color: @white; @toast-text-color: @white;
@toast-line-height: 20px; @toast-line-height: 20px;
@toast-border-radius: @border-radius-md; @toast-border-radius: @border-radius-md;
@toast-background-color: rgba(@text-color, .88); @toast-background-color: rgba(@text-color, 0.88);
@toast-icon-size: 48px; @toast-icon-size: 48px;
@toast-text-min-width: 96px; @toast-text-min-width: 96px;
@toast-text-padding: @padding-xs @padding-sm; @toast-text-padding: @padding-xs @padding-sm;