mjz update

2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
@@ -0,0 +1,120 @@
+---
+title: 文本
+date: 2023-05-28 14:05:38
+permalink: /pages/basics/text
+article: false
+---
+
+## 文字大小
+```css
+.text-xsl  文字大小 60px 用于图标、数字等特大显示
+.text-sl   文字大小 40px 用于图标、数字等较大显示
+.text-xxl  文字大小 22px 用于金额数字等信息
+.text-xl   文字大小 18px 页面大标题，用于结果页等单一信息页
+.text-lg   文字大小 16px 页面小标题，首要层级显示内容
+.text-df   文字大小 14px 页面默认字号，用于摘要或阅读文本
+.text-sm   文字大小 12px 页面辅助信息，次级内容等
+.text-xs   文字大小 10px 说明文本，标签文字等关注度低的文字
+```
+
+## 文字颜色
+```css
+.text-red  /* 嫣红 #e54d42 */
+.text-orange  /* 桔橙 #f37b1d */
+.text-yellow  /* 明黄 #fbbd08 */
+.text-olive  /* 橄榄 #8dc63f */
+.text-green  /* 森绿 #39b54a */
+.text-cyan  /* 天青 #1cbbb4 */
+.text-blue  /* 海蓝 #0081ff */
+.text-purple  /* 姹紫 #6739b6 */
+.text-mauve  /* 木槿 #9c26b0 */
+.text-pink  /* 桃粉 #e03997 */
+.text-brown  /* 棕褐 #a5673f */
+.text-grey  /* 玄灰 #8799a3 */
+.text-gray  /* 草灰 #aaaaaa */
+.text-black  /* 墨黑 #333333 */
+.text-white  /* 雅白 #ffffff */
+```
+
+## 文字阴影
+```css
+.text-shadow  {
+     /* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */
+    text-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);
+}
+```
+
+## 文字截断
+> css 代码
+```css
+.text-cut  定义文字容器宽度，超出截断
+```
+
+> 演示代码
+```vue
+<template>
+    <view class="padding bg-white">
+        <view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+    </view>
+</template>
+```
+
+## 文字对齐
+> css 代码
+```css
+.text-left  左对齐
+.text-center  居中对齐
+.text-right  右对齐
+```
+
+> 演示代码
+```vue
+<template>
+    <view class="padding bg-white">
+        <view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+        <view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+        <view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
+    </view>
+</template>
+```
+
+## 特殊文字
+> css 代码
+```css
+.text-price  价格文本，利用伪元素添加"¥"符号
+.text-Abc  英文单词首字母大写
+.text-ABC  全部字母大写
+.text-abc  全部字母小写
+```
+
+> 演示代码
+```vue
+<template>
+    <view class="padding text-center">
+        <view class="padding-lr bg-white">
+            <view class="solid-bottom padding">
+                <text class="text-price">80.00</text>
+            </view>
+            <view class="padding">价格文本，利用伪元素添加"¥"符号</view>
+        </view>
+        <view class="padding-lr bg-white margin-top">
+            <view class="solid-bottom padding">
+                <text class="text-Abc">color Ui</text>
+            </view>
+            <view class="padding">英文单词首字母大写</view>
+        </view>
+        <view class="padding-lr bg-white margin-top">
+            <view class="solid-bottom padding">
+                <text class="text-ABC">color Ui</text>
+            </view>
+            <view class="padding">全部字母大写</view>
+        </view>
+        <view class="padding-lr bg-white margin-top">
+            <view class="solid-bottom padding">
+                <text class="text-abc">color Ui</text>
+            </view>
+            <view class="padding">全部字母小写</view>
+        </view>
+    </view>
+</template>
+```