mjz update
This commit is contained in:
mjz
@@ -0,0 +1,193 @@
|
||||
---
|
||||
title: 布局
|
||||
date: 2023-05-28 10:34:38
|
||||
permalink: /pages/basics/layout
|
||||
article: false
|
||||
---
|
||||
|
||||
## Flex布局
|
||||
父级容器的 `class` 需要加入 `flex`
|
||||
|
||||
### 固定尺寸
|
||||
> css
|
||||
```css
|
||||
.basis-xs 所占比例 20%
|
||||
.basis-sm 所占比例 40%
|
||||
.basis-sub 所占比例 50%
|
||||
.basis-lg 所占比例 60%
|
||||
.basis-xl 所占比例 80%
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="flex flex-wrap">
|
||||
<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
|
||||
<view class="basis-df"></view>
|
||||
<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
|
||||
<view class="basis-df"></view>
|
||||
<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
|
||||
<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
|
||||
<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
### 比例布局
|
||||
> css
|
||||
```css
|
||||
.flex-sub 所占比例 1
|
||||
.flex-twice 所占比例 2
|
||||
.flex-treble 所占比例 3
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<!-- 1:1 -->
|
||||
<view class="flex">
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
</view>
|
||||
<!-- 1:2 -->
|
||||
<view class="flex p-xs margin-bottom-sm mb-sm">
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
|
||||
</view>
|
||||
<!-- 1:2:3 -->
|
||||
<view class="flex p-xs margin-bottom-sm mb-sm">
|
||||
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
|
||||
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
|
||||
<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
### 水平对齐
|
||||
父容器的 class 中加入 `justify-start|end|center|between|around`
|
||||
|
||||
> css
|
||||
```css
|
||||
.justify-start 对齐方式 从行首开始排列
|
||||
.justify-end 对齐方式 从行尾开始排列
|
||||
.justify-center 对齐方式 居中排列
|
||||
.justify-between 对齐方式 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
|
||||
.justify-around 对齐方式 均匀排列每个元素，每个元素之间的间隔相等
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="flex solid-bottom padding justify-start">
|
||||
<view class="bg-grey padding-sm margin-xs radius">start</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">start</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-end">
|
||||
<view class="bg-grey padding-sm margin-xs radius">end</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">end</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-center">
|
||||
<view class="bg-grey padding-sm margin-xs radius">center</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">center</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-between">
|
||||
<view class="bg-grey padding-sm margin-xs radius">between</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">between</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-around">
|
||||
<view class="bg-grey padding-sm margin-xs radius">around</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">around</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
### 垂直对齐
|
||||
父容器的 class 中加入 `align-start|end|center`
|
||||
> css
|
||||
```css
|
||||
.align-start 对齐方式 元素位于容器的开头，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
|
||||
.align-end 对齐方式 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
|
||||
.align-center 对齐方式 元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="flex solid-bottom padding align-start">
|
||||
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">start</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding align-end">
|
||||
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">end</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding align-center">
|
||||
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
|
||||
<view class="bg-grey padding-sm margin-xs radius">center</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## Grid布局
|
||||
|
||||
### 等分列
|
||||
class 加入 `grid col-1|2|3|...`
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
|
||||
<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
### 等高
|
||||
在 class 中加入 `grid col-4|5|... grid-square`
|
||||
|
||||
```vue
|
||||
<view class="grid col-4 grid-square">
|
||||
<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
|
||||
</view>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 辅助布局
|
||||
|
||||
### 浮动
|
||||
在 class 加入 `fl|fr`，在父容器 class 加入 `cf`
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cf padding-sm">
|
||||
<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
|
||||
<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
### 内外边距
|
||||
`size=xs|sm|默认|lg|xl`，属性后面没有跟上 size 就是默认
|
||||
|
||||
| 属性 | 值 |
|
||||
| ---- | :--- |
|
||||
| xs | `10upx` |
|
||||
| sm | `20upx` |
|
||||
| 默认 | `30upx` |
|
||||
| lg | `40upx` |
|
||||
| xl | `50upx` |
|
||||
|
||||
| 内容 | css 属性 |
|
||||
| ---- | :--- |
|
||||
| 外边距 | `margin-{size}` |
|
||||
| 内边距 | `padding-{size}` |
|
||||
| 水平方向外边距 | `margin-lr-{size}` |
|
||||
| 水平方向内边距 | `padding-lr-{size}` |
|
||||
| 垂直方向外边距 | `margin-tb-{size}` |
|
||||
| 垂直方向内边距 | `padding-tb-{size}` |
|
||||
| 上外边距 | `margin-top-{size}` |
|
||||
| 上内边距 | `padding-top-{size}` |
|
||||
| 右外边距 | `margin-right-{size}` |
|
||||
| 右内边距 | `padding-right-{size}` |
|
||||
| 下外边距 | `margin-bottom-{size}` |
|
||||
| 下内边距 | `padding-bottom-{size}` |
|
||||
| 左外边距 | `margin-left-{size}` |
|
||||
| 左内边距 | `padding-left-{size}` |
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
title: 背景
|
||||
date: 2023-05-28 10:55:38
|
||||
permalink: /pages/basics/background
|
||||
article: false
|
||||
---
|
||||
|
||||
## 深色背景
|
||||
在 class 中加入 `bg-Red|Orange|...`
|
||||
|
||||
```css
|
||||
.bg-red /* 嫣红 #e54d42 */
|
||||
.bg-orange /* 桔橙 #f37b1d */
|
||||
.bg-yellow /* 明黄 #fbbd08 */
|
||||
.bg-olive /* 橄榄 #8dc63f */
|
||||
.bg-green /* 森绿 #39b54a */
|
||||
.bg-cyan /* 天青 #1cbbb4 */
|
||||
.bg-blue /* 海蓝 #0081ff */
|
||||
.bg-purple /* 姹紫 #6739b6 */
|
||||
.bg-mauve /* 木槿 #9c26b0 */
|
||||
.bg-pink /* 桃粉 #e03997 */
|
||||
.bg-brown /* 棕褐 #a5673f */
|
||||
.bg-grey /* 玄灰 #8799a3 */
|
||||
.bg-gray /* 草灰 #aaaaaa */
|
||||
.bg-black /* 墨黑 #333333 */
|
||||
.bg-white /* 雅白 #ffffff */
|
||||
```
|
||||
|
||||
## 浅色背景
|
||||
在 class 中加入 `bg-Red|Orange|...`
|
||||
在 class 中再加入 `light`
|
||||
|
||||
```css
|
||||
.light .bg-red /* 嫣红 #e54d42 */
|
||||
.light .bg-orange /* 桔橙 #f37b1d */
|
||||
.light .bg-yellow /* 明黄 #fbbd08 */
|
||||
.light .bg-olive /* 橄榄 #8dc63f */
|
||||
.light .bg-green /* 森绿 #39b54a */
|
||||
.light .bg-cyan /* 天青 #1cbbb4 */
|
||||
.light .bg-blue /* 海蓝 #0081ff */
|
||||
.light .bg-purple /* 姹紫 #6739b6 */
|
||||
.light .bg-mauve /* 木槿 #9c26b0 */
|
||||
.light .bg-pink /* 桃粉 #e03997 */
|
||||
.light .bg-brown /* 棕褐 #a5673f */
|
||||
.light .bg-grey /* 玄灰 #8799a3 */
|
||||
```
|
||||
|
||||
## 渐变背景
|
||||
在 class 中加入 `bg-gradual-red|orange|...`
|
||||
|
||||
```css
|
||||
.bg-gradual-red /* 魅红 #f43f3b - #ec008c */
|
||||
.bg-gradual-orange /* 鎏金 #ff9700 - #ed1c24 */
|
||||
.bg-gradual-green /* 翠柳 #39b54a - #8dc63f */
|
||||
.bg-gradual-blue /* 靛青 #0081ff - #1cbbb4 */
|
||||
.bg-gradual-purple /* 惑紫 #9000ff - #5e00ff */
|
||||
.bg-gradual-pink /* 霞彩 #ec008c - #6739b6 */
|
||||
```
|
||||
|
||||
## 图片背景
|
||||
在 class 中加入 `bg-img bg-mask`
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.bg-img 把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
|
||||
.bg-mask 在背景图片加一层黑色遮罩
|
||||
|
||||
.bg-shadeTop 背景图片加一层黑色遮罩上面开始
|
||||
.bg-shadeBottom 背景图片加一层黑色遮罩下面开始
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
|
||||
<view class="padding-xl text-white">
|
||||
<view class="padding-xs text-xxl text-bold">
|
||||
钢铁之翼
|
||||
</view>
|
||||
<view class="padding-xs text-lg">
|
||||
Only the guilty need fear me.
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 透明背景（文字层）
|
||||
|
||||
在 class 中加入 `bg-shadeBottom|shadeTop`
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
|
||||
<view class="bg-shadeTop padding padding-bottom-xl">
|
||||
上面开始
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
|
||||
<view class="bg-shadeBottom padding padding-top-xl flex-sub">
|
||||
下面开始
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
@@ -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>
|
||||
```
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: 图标
|
||||
date: 2023-05-28 15:16:38
|
||||
permalink: /pages/basics/icon
|
||||
article: false
|
||||
---
|
||||
|
||||
::: tip 温馨提示
|
||||
点击右侧图标页面，对应的图标，即可复制类名：`cuIcon-图标名称`
|
||||
:::
|
||||
|
||||
|
||||
|
||||
## 引入样式
|
||||
|
||||
编辑 `App.vue`文件在`<style>` 项引入 `icon.css`
|
||||
|
||||
```vue
|
||||
<style>
|
||||
@import "colorui/main.css";
|
||||
@import "colorui/icon.css";
|
||||
</style>
|
||||
```
|
||||
|
||||
## 使用语法
|
||||
|
||||
```html
|
||||
<标签 class="cuIcon-图标名称"></标签>
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
title: 按钮
|
||||
date: 2023-05-28 15:20:38
|
||||
permalink: /pages/basics/button
|
||||
article: false
|
||||
---
|
||||
|
||||
## 按钮形状
|
||||
> css 代码
|
||||
```css
|
||||
.cu-btn 默认
|
||||
.cu-btn round 圆角
|
||||
.cu-btn cuIcon 图标按钮
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn">默认</button>
|
||||
<button class="cu-btn round">圆角</button>
|
||||
<!-- 图标按钮 -->
|
||||
<button class="cu-btn cuIcon">
|
||||
<text class="cuIcon-emojifill"></text>
|
||||
</button>
|
||||
```
|
||||
|
||||
## 按钮尺寸
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.cu-btn sm 小尺寸
|
||||
.cu-btn 默认
|
||||
.cu-btn lg 大尺寸
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn round sm">小尺寸</button>
|
||||
<button class="cu-btn round">默认</button>
|
||||
<button class="cu-btn round lg">大尺寸</button>
|
||||
```
|
||||
|
||||
## 按钮颜色
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.bg-red 背景颜色 | .bg-...
|
||||
.shadow 阴影
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn round bg-red shadow">按钮</button>
|
||||
```
|
||||
|
||||
## 镂空按钮
|
||||
`.bg-` 换成 `.line-`
|
||||
|
||||
```css
|
||||
.lines-red|... 边框深（大）
|
||||
.line-red|... 边框浅（小）
|
||||
```
|
||||
|
||||
## 块状按钮
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.cu-btn lg
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn bg-grey lg">玄灰</button>
|
||||
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
|
||||
```
|
||||
|
||||
## 无效状态
|
||||
|
||||
加上 `disabled` 属性即可
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
|
||||
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
|
||||
```
|
||||
|
||||
## 按钮加图标
|
||||
`button` 标签里加入**图标+文字**即可，需要加载状态，加上属性 `loading`
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn block line-orange lg">
|
||||
<text class="cuIcon-upload"></text> 图标
|
||||
</button>
|
||||
<button class="cu-btn block bg-blue margin-tb-sm lg">
|
||||
<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
|
||||
</button>
|
||||
<button class="cu-btn block bg-black margin-tb-sm lg" loading>
|
||||
原生加载
|
||||
</button>
|
||||
```
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: 标签
|
||||
date: 2023-05-28 15:20:38
|
||||
permalink: /pages/basics/tag
|
||||
article: false
|
||||
---
|
||||
|
||||
## 标签
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/tag`
|
||||
```vue
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: 头像
|
||||
date: 2023-05-28 16:15:38
|
||||
permalink: /pages/basics/avatar
|
||||
article: false
|
||||
---
|
||||
|
||||
## 头像
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/avatar`
|
||||
```vue
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: 进度条
|
||||
date: 2023-05-28 16:16:38
|
||||
permalink: /pages/basics/progress
|
||||
article: false
|
||||
---
|
||||
|
||||
## 进度条
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/progress`
|
||||
```vue
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: 边框阴影
|
||||
date: 2023-05-28 15:20:38
|
||||
permalink: /pages/basics/shadow
|
||||
article: false
|
||||
---
|
||||
|
||||
## 边框阴影
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/shadow`
|
||||
```vue
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: 加载
|
||||
date: 2023-05-28 15:20:38
|
||||
permalink: /pages/basics/loading
|
||||
article: false
|
||||
---
|
||||
|
||||
## 加载
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/loading`
|
||||
```vue
|
||||
```
|
||||
:::
|
||||
Reference in New Issue
Block a user