diff --git a/App.vue b/App.vue
index 4c403fe98b8b833ba4d40734bfec57264bfeb506..92f22dd56937ce5f0304d78aa2a96ef6504ad0b6 100644
--- a/App.vue
+++ b/App.vue
@@ -14,5 +14,6 @@
 
 <style lang="scss">
 	/*每个页面公共css */
+	@import "styles/style.css";
 	@import "styles/demo.scss";
 </style>
diff --git a/README.md b/README.md
index 5e0bfb644debd514f76e755bf967aa3e0a56f100..88d5d0ec2384fc3360977eb08e5df182021e3d4c 100644
--- a/README.md
+++ b/README.md
@@ -49,9 +49,9 @@ Vue.use(ldcake);
 	"easycom": {
 		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
 		// npm安装方式
-		"^ldc-(.*)": "ldcake-ui/components/ldc-$1/ldc-$1.vue"
+		"^c-(.*)": "ldcake-ui/components/c-$1/c-$1.vue"
 		// 下载安装方式
-		// "^ldc-(.*)": "@/ldcake-ui/components/ldc-$1/ldc-$1.vue"
+		// "^c-(.*)": "@/ldcake-ui/components/c-$1/c-$1.vue"
 	},
 	// 此为本身已有的内容
 	"pages": [
@@ -65,7 +65,7 @@ Vue.use(ldcake);
 
 ```html
 <template>
-	<ldc-button>按钮</ldc-button>
+	<c-date-picker></c-date-picker>
 </template>
 ```
 
diff --git a/components/subsection/subsection.vue b/components/subsection/subsection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1db0a46b40c7191b079e3bc801c2af4da8c92b99
--- /dev/null
+++ b/components/subsection/subsection.vue
@@ -0,0 +1,27 @@
+<template>
+	<view class="c-subsection flex justify-around mt-20">
+		<view class="flex-sub flex justify-center align-center text-df"
+			  :class="[index===value?'bg-white':'']"
+			  v-for="(item,index) in list" :key="index"
+			  @click="toggle(index)">{{item.name}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"subsection",
+		props:{
+			list: Array,
+			value: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods:{
+			toggle(val){
+				this.$emit("input", val)
+				this.$emit("change", val)
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/ldcake-ui/README.md b/ldcake-ui/README.md
index 5e0bfb644debd514f76e755bf967aa3e0a56f100..88d5d0ec2384fc3360977eb08e5df182021e3d4c 100644
--- a/ldcake-ui/README.md
+++ b/ldcake-ui/README.md
@@ -49,9 +49,9 @@ Vue.use(ldcake);
 	"easycom": {
 		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
 		// npm安装方式
-		"^ldc-(.*)": "ldcake-ui/components/ldc-$1/ldc-$1.vue"
+		"^c-(.*)": "ldcake-ui/components/c-$1/c-$1.vue"
 		// 下载安装方式
-		// "^ldc-(.*)": "@/ldcake-ui/components/ldc-$1/ldc-$1.vue"
+		// "^c-(.*)": "@/ldcake-ui/components/c-$1/c-$1.vue"
 	},
 	// 此为本身已有的内容
 	"pages": [
@@ -65,7 +65,7 @@ Vue.use(ldcake);
 
 ```html
 <template>
-	<ldc-button>按钮</ldc-button>
+	<c-date-picker></c-date-picker>
 </template>
 ```
 
diff --git a/ldcake-ui/components/ldc-date-picker/ldc-date-picker.vue b/ldcake-ui/components/c-date-picker/c-date-picker.vue
similarity index 89%
rename from ldcake-ui/components/ldc-date-picker/ldc-date-picker.vue
rename to ldcake-ui/components/c-date-picker/c-date-picker.vue
index 90b33099534304f5e4de8854b66830ede3933952..234479e6dadf05460c8b1dc081ae6d2518d58541 100644
--- a/ldcake-ui/components/ldc-date-picker/ldc-date-picker.vue
+++ b/ldcake-ui/components/c-date-picker/c-date-picker.vue
@@ -1,34 +1,34 @@
 <template>
-	<view class="ldc-datetime-picker">
+	<view class="c-datetime-picker">
 		<view :class="{'datetimePickerMask':showPicker}" @click="maskClose" @touchmove.stop.prevent="returnHandle">
-			<view class="ldc-datetime-picker__content" :class="{'datetimePickerShow':showPicker}">
-				<view class="ldc-datetime-picker__header" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
+			<view class="c-datetime-picker__content" :class="{'datetimePickerShow':showPicker}">
+				<view class="c-datetime-picker__header" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
 					<input type="text" disabled placeholder="开始时间" :value="startDate" 
 						   :style="{color:dateType=='startDate'?(themeColor||defaultColor):'#282828','border-color':dateType=='startDate'?(themeColor||defaultColor):'transparent'}"
 						   @tap="changeDateType('startDate')">
-					<view class="ldc-datetime-picker__header-center">
+					<view class="c-datetime-picker__header-center">
 						至
 					</view>
 					<input type="text" disabled placeholder="结束时间" 
 						   :style="{color:dateType=='endDate'?(themeColor||defaultColor):'#282828','border-color':dateType=='endDate'?(themeColor||defaultColor):'transparent'}"
 						   :value="endDate" @tap="changeDateType('endDate')">
 				</view>
-				<picker-view indicator-class="ldc-datetime-picker__view-indicator" class="ldc-datetime-picker__view" :value="pickerValue" @change="pickerChangeValue">
+				<picker-view indicator-class="c-datetime-picker__view-indicator" class="c-datetime-picker__view" :value="pickerValue" @change="pickerChangeValue">
 					<template>
 						<picker-view-column>
-							<view class="ldc-datetime-picker__view-item" v-for="(item,index) in yearArr" :key="index">{{item}}</view>
+							<view class="c-datetime-picker__view-item" v-for="(item,index) in yearArr" :key="index">{{item}}</view>
 						</picker-view-column>
 						<picker-view-column v-if="fields!='year'">
-							<view class="ldc-datetime-picker__view-item" v-for="(item,index) in monthArr" :key="index">{{item}}</view>
+							<view class="c-datetime-picker__view-item" v-for="(item,index) in monthArr" :key="index">{{item}}</view>
 						</picker-view-column>
 						<picker-view-column v-if="fields=='day'">
-							<view class="ldc-datetime-picker__view-item" v-for="(item,index) in dayArr" :key="index">{{item}}</view>
+							<view class="c-datetime-picker__view-item" v-for="(item,index) in dayArr" :key="index">{{item}}</view>
 						</picker-view-column>
 					</template>
 				</picker-view>
-				<view class="ldc-datetime-picker__footer" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
-					<view class="ldc-datetime-picker__footer-cancel" @click="reset">重置</view>
-					<view class="ldc-datetime-picker__footer-confirm" :style="[{backgroundColor: themeColor||defaultColor}]" @click="confirm">确认</view>
+				<view class="c-datetime-picker__footer" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
+					<view class="c-datetime-picker__footer-cancel" @click="reset">重置</view>
+					<view class="c-datetime-picker__footer-confirm" :style="[{backgroundColor: themeColor||defaultColor}]" @click="confirm">确认</view>
 				</view>
 			</view>
 		</view>
@@ -45,10 +45,10 @@
 	 * @property {String} themeColor 主题色
 	 * @property {Boolean} isMaskClose 是否允许通过点击遮罩关闭Picker
 	 * @event {Function()} confirm 确认选择
-	 * @example  <ldc-date-picker :is-show="true"></ldc-date-picker>
+	 * @example  <c-date-picker :is-show="true"></c-date-picker>
 	 */
 	export default {
-		name: 'LdcDatePicker',
+		name: 'c-date-picker',
 		props: {
 			// 颗粒度，可选值：day、month、year 
 			fields: {
@@ -135,7 +135,7 @@
 			}
 		},
 		created() {
-			this.defaultColor = this.$ldc.color.primary;
+			this.defaultColor = this.$c.color.primary;
 			this.init();
 		},
 		methods: {
@@ -340,7 +340,7 @@
 </script>
 
 <style lang="scss">
-	.ldc-datetime-picker {
+	.c-datetime-picker {
 		&__content{
 			position: fixed;
 			bottom: 0;
@@ -361,7 +361,7 @@
 			font-size: 32rpx;
 			align-items: center;
 			color: #282828;
-			border-bottom: 1rpx solid $ldc-border-color;
+			border-bottom: 1rpx solid $c-border-color;
 			
 			&-center {
 				display: flex;
diff --git a/ldcake-ui/components/c-spin/c-spin.vue b/ldcake-ui/components/c-spin/c-spin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a37d3a3a1d46b596ae123dae7a1f58e48369e54
--- /dev/null
+++ b/ldcake-ui/components/c-spin/c-spin.vue
@@ -0,0 +1,136 @@
+<template>
+	<view class="c-spin" :class="computedClass" :style="computedStyle">
+	  <view class="c-spin-main">
+	    <view class="c-spin-dot"></view>
+	    <view class="c-spin-text">
+	      <slot></slot>
+	    </view>
+	  </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "c-spin",
+		props: {
+			size: {
+				type: String,
+				default: 'default'
+			},
+			isFix: {
+				type: Boolean,
+				default: false
+			},
+			isFullscreen: {
+				type: Boolean,
+				default: false
+			},
+			isCustom: {
+				type: Boolean,
+				default: false
+			},
+			opacity: {
+				type: Number,
+				default: 0.9
+			},
+		},
+		computed:{
+			computedClass(){
+				let _class = [`c-spin-${this.size}`]
+				if(this.isFix) 
+					_class.push('c-spin-fix')
+				if(this.isCustom)
+					_class.push('c-spin-show-text')
+				if(this.isFullscreen)
+					_class.push('c-spin-fullscreen')
+				return _class
+			},
+			computedStyle(){
+				return [{'backgroundColor': `rgba(255,255,255,${this.opacity})`}]
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.c-spin {
+		color: $c-type-primary;
+		vertical-align: middle;
+		text-align: center;
+		
+		&-dot {
+			position: relative;
+			display: block;
+			border-radius: 50%;
+			background-color: $c-type-primary;
+			width: 20px;
+			height: 20px;
+			animation: ani-spin-bounce 1s 0s ease-in-out infinite;
+		}
+		
+		&-large &-dot {
+			width: 32px;
+			height: 32px;
+		}
+		
+		&-small &-dot {
+			width: 12px;
+			height: 12px;
+		}
+		
+		&-fix {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 8;
+			width: 100%;
+			height: 100%;
+			background-color: rgba(255, 255, 255, 0.9);
+		}
+		
+		&-fullscreen {
+			z-index: 2010;
+		}
+		
+		&-fullscreen-wrapper {
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+		}
+		
+		&-fix &-main {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			-ms-transform: translate(-50%, -50%);
+			transform: translate(-50%, -50%);
+		}
+		
+		&-fix &-dot {
+			display: inline-block;
+		}
+		
+		&-show-text &-dot,
+		&-text {
+			display: none;
+		}
+		
+		&-show-text &-text {
+			display: block;
+			font-size: 14px;
+		}
+	}
+
+	@keyframes ani-spin-bounce {
+		0% {
+			transform: scale(0);
+		}
+
+		100% {
+			transform: scale(1);
+			opacity: 0;
+		}
+	}
+</style>
diff --git a/ldcake-ui/index.js b/ldcake-ui/index.js
index 8878385a48f5fc265f3e04894f41b40f7a3ca92d..8550f08e2eec424904de5ccc0559a1404b0f51e3 100644
--- a/ldcake-ui/index.js
+++ b/ldcake-ui/index.js
@@ -2,13 +2,13 @@
 import isEmpty from './libs/utils/isEmpty.js'
 import color from './libs/config/color.js'
 
-const $ldc = {
+const $c = {
 	isEmpty,
 	color,
 }
 
 const install = Vue => {
-	Vue.prototype.$ldc = $ldc
+	Vue.prototype.$c = $c
 }
 
 export default {
diff --git a/ldcake-ui/package.json b/ldcake-ui/package.json
index da7c5bed5ee33ef723a1463c1af75ea2934d919f..3854ebb8584e3dd0045a1c382d389b236fecceee 100644
--- a/ldcake-ui/package.json
+++ b/ldcake-ui/package.json
@@ -1,6 +1,6 @@
 {
 		"name": "ldcake-ui",
-		"version": "1.0.4",
+		"version": "1.0.5",
 		"description": "基于uni-app的UI组件库",
 		"main": "index.js",
 		"scripts": {
diff --git a/ldcake-ui/theme.scss b/ldcake-ui/theme.scss
index b7ce9d99a51f0171aa13eddc686819da371ff120..df97fc4455713192d4a3f45c7fd097167a80e055 100644
--- a/ldcake-ui/theme.scss
+++ b/ldcake-ui/theme.scss
@@ -2,37 +2,37 @@
 // uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
 // 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
 
-$ldc-main-color: #303133;
-$ldc-content-color: #606266;
-$ldc-tips-color: #909399;
-$ldc-light-color: #c0c4cc;
-$ldc-border-color: #F2F2F2;
-$ldc-bg-color: #f3f4f6;
+$c-main-color: #303133;
+$c-content-color: #606266;
+$c-tips-color: #909399;
+$c-light-color: #c0c4cc;
+$c-border-color: #F2F2F2;
+$c-bg-color: #f3f4f6;
 
-$ldc-type-primary: #2979ff;
-$ldc-type-primary-light: #ecf5ff;
-$ldc-type-primary-dark: #2b85e4;
-$ldc-type-primary-disabled: #a0cfff;
+$c-type-primary: #2979ff;
+$c-type-primary-light: #ecf5ff;
+$c-type-primary-dark: #2b85e4;
+$c-type-primary-disabled: #a0cfff;
 
-$ldc-type-warning: #ff9900;
-$ldc-type-warning-light: #fdf6ec;
-$ldc-type-warning-dark: #fcbd71;
-$ldc-type-warning-disabled: #ffd283;
+$c-type-warning: #ff9900;
+$c-type-warning-light: #fdf6ec;
+$c-type-warning-dark: #fcbd71;
+$c-type-warning-disabled: #ffd283;
 
-$ldc-type-success: #19be6b;
-$ldc-type-success-disabled: #71d5a1;
-$ldc-type-success-dark: #18b566;
-$ldc-type-success-light: #dbf1e1;
+$c-type-success: #19be6b;
+$c-type-success-disabled: #71d5a1;
+$c-type-success-dark: #18b566;
+$c-type-success-light: #dbf1e1;
 
-$ldc-type-error: #fa3534;
-$ldc-type-error-disabled: #fab6b6;
-$ldc-type-error-dark: #dd6161;
-$ldc-type-error-light: #fef0f0;
+$c-type-error: #fa3534;
+$c-type-error-disabled: #fab6b6;
+$c-type-error-dark: #dd6161;
+$c-type-error-light: #fef0f0;
 
-$ldc-type-info: #909399;
-$ldc-type-info-disabled: #c8c9cc;
-$ldc-type-info-dark: #82848a;
-$ldc-type-info-light: #f4f4f5;
+$c-type-info: #909399;
+$c-type-info-disabled: #c8c9cc;
+$c-type-info-dark: #82848a;
+$c-type-info-light: #f4f4f5;
 
-$ldc-form-item-height: 70rpx;
-$ldc-form-item-border-color: #dcdfe6;
+$c-form-item-height: 70rpx;
+$c-form-item-border-color: #dcdfe6;
diff --git a/manifest.json b/manifest.json
index c7538b86f3c261f9c432f1917628dc3d219c040a..2128b54787cae80c8f34ab08e37cede9a810797e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -72,7 +72,13 @@
         "title" : "绿豆糕组件库",
         "domain" : "",
         "router" : {
-            "base" : "/ldcake-ui/"
+            "base" : "/ldcake-ui/",
+            "mode" : "hash"
+        },
+        "optimization" : {
+            "treeShaking" : {
+                "enable" : false
+            }
         }
     }
 }
diff --git a/pages.json b/pages.json
index 19701b135e7115050a8cb411a6249a9910e1d6e1..be2883f973e05a2ac118d00e997c71904cb3542d 100644
--- a/pages.json
+++ b/pages.json
@@ -1,6 +1,6 @@
 {
 	"easycom": {
-		"^ldc-(.*)": "@/ldcake-ui/components/ldc-$1/ldc-$1.vue"
+		"^c-(.*)": "@/ldcake-ui/components/c-$1/c-$1.vue"
 	},
 	"pages": [
 		{
@@ -18,6 +18,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/components/spin/spin",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "Spin 加载中",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/components/date-picker/date-picker.vue b/pages/components/date-picker/date-picker.vue
index f9b7265d16d4de3fb84fa575ce49f226b7b38715..868d17e8c14d2fd507679ba61bb82092f2f3ca72 100644
--- a/pages/components/date-picker/date-picker.vue
+++ b/pages/components/date-picker/date-picker.vue
@@ -1,12 +1,12 @@
 <template>
-	<view class="ldc-demo">
-		<view class="ldc-demo-wrap">
-			<view class="ldc-demo-title">演示效果</view>
-			<view class="ldc-demo-area">
-				<view class="ldc-demo-result-line" @click="isShow=true">date-picker值：{{ result }}</view>
+	<view class="c-demo">
+		<view class="c-demo-wrap">
+			<view class="c-demo-title">演示效果</view>
+			<view class="c-demo-area">
+				<view class="c-demo-result-line" @click="isShow=true">date-picker值：{{ result }}</view>
 			</view>
 		</view>
-		<ldc-date-picker :default-value="result" v-model="isShow" :is-mask-close="false" @confirm="confirm"></ldc-date-picker>
+		<c-date-picker :default-value="result" v-model="isShow" :is-mask-close="false" @confirm="confirm"></c-date-picker>
 	</view>
 </template>
 
diff --git a/pages/components/spin/spin.vue b/pages/components/spin/spin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61fb1c9fa4a7563b9881fb9e8666f047e4427b74
--- /dev/null
+++ b/pages/components/spin/spin.vue
@@ -0,0 +1,71 @@
+<template>
+	<view class="c-demo">
+		<view class="c-demo-wrap">
+			<view class="c-demo-title">演示效果</view>
+			<view class="c-demo-area">
+				<view class="c-demo-result-line" :class="[{'spin': !isFullscreen}]">
+					<view class="flex justify-center">《鸟鸣涧》</view>
+					<view>
+						人闲桂花落，夜静春山空。
+					</view>
+					<view>
+						月出惊山鸟，时鸣春涧中。
+					</view>
+					<c-spin isFix :isFullscreen="isFullscreen" v-if="isShow"></c-spin>
+				</view>
+			</view>
+		</view>
+		<view class="c-item-title mt-20">状态切换</view>
+		<subsection :list="list" v-model="current" @change="handleChange"></subsection>
+
+		<view class="c-item-title mt-20">是否全屏</view>
+		<subsection :list="fullscreenList" v-model="fullscreenCurrent" @change="handleFullscreen"></subsection>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						name: '显示'
+					},
+					{
+						name: '隐藏'
+					}
+				],
+				fullscreenList: [
+					{
+						name: '否'
+					},
+					{
+						name: '是'
+					}
+				],
+				current: 0,
+				fullscreenCurrent: 0,
+				isShow: true,
+				isFullscreen: false
+			};
+		},
+		methods: {
+			handleChange(val) {
+				this.isShow = !val
+			},
+			handleFullscreen(val) {
+				this.isFullscreen = val === 0 ? false : true
+				setTimeout(() => {
+					this.isFullscreen = false
+					this.fullscreenCurrent = 0
+				}, 3000)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.spin {
+		position: relative;
+	}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index a2c22dd9b878c877dba918ae612df0e80b09b495..0966122468d033dce148e1bb1523d5345e3ed2d7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,22 @@
 <template>
-	<view>
+	<view class="index">
+		<view class="flex">
+			<view class="flex flex-direction justify-center">
+				<view class="flex align-center">
+					<image class="index-logo" src="/static/logo.png" mode=""></image>
+					<view class="index-title text-bold">Ldcake UI</view>
+				</view>
+				<view class="text-df text-grey mt-10">基于uni-app的轻量、可靠UI组件库</view>
+			</view>
+		</view>
+		<view class="index__content">
+			<view class="text-gray text-df mb-20">基础组件</view>
+			<navigator class="index__content-cell" :url="item.url"
+					v-for="(item,index) in baseList" :key="index">
+				<text>{{item.name}}</text>
+				<text class="index__content-arrow"></text>
+			</navigator>
+		</view>
 	</view>
 </template>
 
@@ -7,12 +24,65 @@
 	export default {
 		data() {
 			return {
-				
+				baseList: [
+					{
+						name: '日期选择器（date-picker）',
+						url: '/pages/components/date-picker/date-picker'
+					},
+					{
+						name: '加载中（spin）',
+						url: '/pages/components/spin/spin'
+					},
+				]
 			}
 		}
 	}
 </script>
 
-<style>
-	
+<style lang="scss">
+	.index {
+		padding: 80rpx 50rpx;
+
+		&-logo {
+			height: 80rpx;
+			width: 80rpx;
+		}
+
+		&-title {
+			font-size: 60rpx;
+			margin-left: 20rpx;
+		}
+
+		&__content {
+			margin-top: 60rpx;
+			
+			&-cell {
+				position: relative;
+				display: -webkit-box;
+				display: -webkit-flex;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin: 0 0 20rpx;
+				padding: 0 30rpx;
+				color: #323233;
+				font-weight: 600;
+				font-size: 28rpx;
+				line-height: 80rpx;
+				background: #f7f8fa;
+				border-radius: 99rpx;
+				-webkit-transition: background 0.3s;
+				transition: background 0.3s;
+			}
+			
+			&-arrow{
+				right: 30rpx;
+				width:18rpx;
+				height: 18rpx;
+				border-right: 1rpx solid #999;
+				border-bottom: 1rpx solid #999;
+				-webkit-transform: rotate(-45deg);
+			}
+		}
+	}
 </style>
diff --git a/static/logo.png b/static/logo.png
index b5771e209bb677e2ebd5ff766ad5ee11790f305a..b9c7e57406f7d49500c01ead7b8d3f69d6381093 100644
Binary files a/static/logo.png and b/static/logo.png differ
diff --git a/styles/demo.scss b/styles/demo.scss
index ac3520f9b70d7c964ad5243213641e48d61373a8..3000d517cdde562922ec7ef5bd27fe272eaf0400 100644
--- a/styles/demo.scss
+++ b/styles/demo.scss
@@ -6,11 +6,11 @@ text {
 /* #endif */
 
 /* start--演示页面使用的统一样式--start */
-.ldc-demo {
+.c-demo {
 	padding: 25px 20px;
 }
 
-.ldc-demo-wrap {
+.c-demo-wrap {
 	border-width: 1px;
 	border-color: #ddd;
 	border-style: dashed;
@@ -19,16 +19,16 @@ text {
 	border-radius: 3px;
 }
 
-.ldc-demo-area {
+.c-demo-area {
 	text-align: center;
 }
 
-.ldc-no-demo-here {
-	color: $ldc-tips-color;
+.c-no-demo-here {
+	color: $c-tips-color;
 	font-size: 13px;
 }
 
-.ldc-demo-result-line {
+.c-demo-result-line {
 	border-width: 1px;
 	border-color: #ddd;
 	border-style: dashed;
@@ -36,34 +36,34 @@ text {
 	margin-top: 30px;
 	border-radius: 5px;
 	background-color: rgb(240, 240, 240);
-	color: $ldc-content-color;
+	color: $c-content-color;
 	font-size: 16px;
 	/* #ifndef APP-NVUE */
 	word-break: break-word;
 	display: inline-block;
 	/* #endif */
 	text-align: left;
-	
+
 }
 
-.ldc-demo-title,
-.ldc-config-title {
+.c-demo-title,
+.c-config-title {
 	text-align: center;
 	font-size: 16px;
 	font-weight: bold;
 	margin-bottom: 20px;
 }
 
-.ldc-config-item {
+.c-config-item {
 	margin-top: 25px;
 }
 
-.ldc-config-title {
+.c-config-title {
 	margin-top: 20px;
 	padding-bottom: 5px;
 }
 
-.ldc-item-title {
+.c-item-title {
 	position: relative;
 	font-size: 15px;
 	padding-left: 8px;
@@ -71,7 +71,7 @@ text {
 	margin-bottom: 11px;
 }
 
-.ldc-item-title:after {
+.c-item-title:after {
 	position: absolute;
 	width: 4px;
 	top: -1px;
@@ -81,6 +81,13 @@ text {
 	/* #endif */
 	left: 0;
 	border-radius: 10px;
-	background-color: $ldc-content-color;
+	background-color: $c-content-color;
+}
+
+.c-subsection{
+	height: 25px;
+	background-color: rgb(238, 238, 239);
+	padding: 3px;
+	border-radius: 5px;
 }
 /* end--演示页面使用的统一样式--end */
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..3122b624821c99c527450f057b7d6d80e62b14c3
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,988 @@
+::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+	color: transparent;
+}
+
+.ellipsis {
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+.ellipsis-l2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis-l3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+/* 内外边距 */
+.m-30, .margin-30 {
+  margin: 30rpx !important;
+}
+
+.margin-top-30, .mt-30 {
+  margin-top: 30rpx !important;
+}
+
+.margin-right-30, .mr-30 {
+  margin-right: 30rpx !important;
+}
+
+.margin-bottom-30, .mb-30 {
+  margin-bottom: 30rpx !important;
+}
+
+.margin-left-30, .ml-30 {
+  margin-left: 30rpx !important;
+}
+
+.p-30, .padding-30 {
+  padding: 30rpx !important;
+}
+
+.padding-top-30, .pt-30 {
+  padding-top: 30rpx !important;
+}
+
+.padding-right-30, .pr-30 {
+  padding-right: 30rpx !important;
+}
+
+.padding-bottom-30, .pb-30 {
+  padding-bottom: 30rpx !important;
+}
+
+.padding-left-30, .pl-30 {
+  padding-left: 30rpx !important;
+}
+
+.m-25, .margin-25 {
+  margin: 25rpx !important;
+}
+
+.margin-top-25, .mt-25 {
+  margin-top: 25rpx !important;
+}
+
+.margin-right-25, .mr-25 {
+  margin-right: 25rpx !important;
+}
+
+.margin-bottom-25, .mb-25 {
+  margin-bottom: 25rpx !important;
+}
+
+.margin-left-25, .ml-25 {
+  margin-left: 25rpx !important;
+}
+
+.p-25, .padding-25 {
+  padding: 25rpx !important;
+}
+
+.padding-top-25, .pt-25 {
+  padding-top: 25rpx !important;
+}
+
+.padding-right-25, .pr-25 {
+  padding-right: 25rpx !important;
+}
+
+.padding-bottom-25, .pb-25 {
+  padding-bottom: 25rpx !important;
+}
+
+.padding-left-25, .pl-25 {
+  padding-left: 25rpx !important;
+}
+
+.m-20, .margin-20 {
+  margin: 20rpx !important;
+}
+
+.margin-top-20, .mt-20 {
+  margin-top: 20rpx !important;
+}
+
+.margin-right-20, .mr-20 {
+  margin-right: 20rpx !important;
+}
+
+.margin-bottom-20, .mb-20 {
+  margin-bottom: 20rpx !important;
+}
+
+.margin-left-20, .ml-20 {
+  margin-left: 20rpx !important;
+}
+
+.p-20, .padding-20 {
+  padding: 20rpx !important;
+}
+
+.padding-top-20, .pt-20 {
+  padding-top: 20rpx !important;
+}
+
+.padding-right-20, .pr-20 {
+  padding-right: 20rpx !important;
+}
+
+.padding-bottom-20, .pb-20 {
+  padding-bottom: 20rpx !important;
+}
+
+.padding-left-20, .pl-20 {
+  padding-left: 20rpx !important;
+}
+
+.m-15, .margin-15 {
+  margin: 15rpx !important;
+}
+
+.margin-top-15, .mt-15 {
+  margin-top: 15rpx !important;
+}
+
+.margin-right-15, .mr-15 {
+  margin-right: 15rpx !important;
+}
+
+.margin-bottom-15, .mb-15 {
+  margin-bottom: 15rpx !important;
+}
+
+.margin-left-15, .ml-15 {
+  margin-left: 15rpx !important;
+}
+
+.p-15, .padding-15 {
+  padding: 15rpx !important;
+}
+
+.padding-top-15, .pt-15 {
+  padding-top: 15rpx !important;
+}
+
+.padding-right-15, .pr-15 {
+  padding-right: 15rpx !important;
+}
+
+.padding-bottom-15, .pb-15 {
+  padding-bottom: 15rpx !important;
+}
+
+.padding-left-15, .pl-15 {
+  padding-left: 15rpx !important;
+}
+
+.m-10, .margin-10 {
+  margin: 10rpx !important;
+}
+
+.margin-top-10, .mt-10 {
+  margin-top: 10rpx !important;
+}
+
+.margin-right-10, .mr-10 {
+  margin-right: 10rpx !important;
+}
+
+.margin-bottom-10, .mb-10 {
+  margin-bottom: 10rpx !important;
+}
+
+.margin-left-10, .ml-10 {
+  margin-left: 10rpx !important;
+}
+
+.p-10, .padding-10 {
+  padding: 10rpx !important;
+}
+
+.padding-top-10, .pt-10 {
+  padding-top: 10rpx !important;
+}
+
+.padding-right-10, .pr-10 {
+  padding-right: 10rpx !important;
+}
+
+.padding-bottom-10, .pb-10 {
+  padding-bottom: 10rpx !important;
+}
+
+.padding-left-10, .pl-10 {
+  padding-left: 10rpx !important;
+}
+
+.m-5, .margin-5 {
+  margin: 5rpx !important;
+}
+
+.margin-top-5, .mt-5 {
+  margin-top: 5rpx !important;
+}
+
+.margin-right-5, .mr-5 {
+  margin-right: 5rpx !important;
+}
+
+.margin-bottom-5, .mb-5 {
+  margin-bottom: 5rpx !important;
+}
+
+.margin-left-5, .ml-5 {
+  margin-left: 5rpx !important;
+}
+
+.p-5, .padding-5 {
+  padding: 5rpx !important;
+}
+
+.padding-top-5, .pt-5 {
+  padding-top: 5rpx !important;
+}
+
+.padding-right-5, .pr-5 {
+  padding-right: 5rpx !important;
+}
+
+.padding-bottom-5, .pb-5 {
+  padding-bottom: 5rpx !important;
+}
+
+.padding-left-5, .pl-5 {
+  padding-left: 5rpx !important;
+}
+
+.m-0, .margin-0 {
+  margin: 0rpx !important;
+}
+
+.margin-top-0, .mt-0 {
+  margin-top: 0rpx !important;
+}
+
+.margin-right-0, .mr-0 {
+  margin-right: 0rpx !important;
+}
+
+.margin-bottom-0, .mb-0 {
+  margin-bottom: 0rpx !important;
+}
+
+.margin-left-0, .ml-0 {
+  margin-left: 0rpx !important;
+}
+
+.p-0, .padding-0 {
+  padding: 0rpx !important;
+}
+
+.padding-top-0, .pt-0 {
+  padding-top: 0rpx !important;
+}
+
+.padding-right-0, .pr-0 {
+  padding-right: 0rpx !important;
+}
+
+.padding-bottom-0, .pb-0 {
+  padding-bottom: 0rpx !important;
+}
+
+.padding-left-0, .pl-0 {
+  padding-left: 0rpx !important;
+}
+
+/* /.内外边距 */
+
+/* flex弹性布局 */
+
+.flex {
+  display: flex;
+}
+
+.basis-xs {
+  flex-basis: 20%;
+}
+
+.basis-sm {
+  flex-basis: 40%;
+}
+
+.basis-df {
+  flex-basis: 50%;
+}
+
+.basis-lg {
+  flex-basis: 60%;
+}
+
+.basis-xl {
+  flex-basis: 80%;
+}
+
+.flex-sub {
+  flex: 1;
+}
+
+.flex-twice {
+  flex: 2;
+}
+
+.flex-treble {
+  flex: 3;
+}
+
+.flex-direction {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-center {
+  align-self: flex-center;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid.grid-square {
+  overflow: hidden;
+}
+
+.grid.grid-square>view {
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  border-radius: 6rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+.grid.grid-square>view.bg-img image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.grid.col-1.grid-square>view {
+  padding-bottom: 100%;
+  height: 0;
+  margin-right: 0;
+}
+
+.grid.col-2.grid-square>view {
+  padding-bottom: calc((100% - 20rpx)/2);
+  height: 0;
+  width: calc((100% - 20rpx)/2);
+}
+
+.grid.col-3.grid-square>view {
+  padding-bottom: calc((100% - 40rpx)/3);
+  height: 0;
+  width: calc((100% - 40rpx)/3);
+}
+
+.grid.col-4.grid-square>view {
+  padding-bottom: calc((100% - 60rpx)/4);
+  height: 0;
+  width: calc((100% - 60rpx)/4);
+}
+
+.grid.col-5.grid-square>view {
+  padding-bottom: calc((100% - 80rpx)/5);
+  height: 0;
+  width: calc((100% - 80rpx)/5);
+}
+
+.grid.col-2.grid-square>view:nth-child(2n),
+.grid.col-3.grid-square>view:nth-child(3n),
+.grid.col-4.grid-square>view:nth-child(4n),
+.grid.col-5.grid-square>view:nth-child(5n) {
+  margin-right: 0;
+}
+
+.grid.col-1>view {
+  width: 100%;
+}
+
+.grid.col-2>view {
+  width: 50%;
+}
+
+.grid.col-3>view {
+  width: 33.33%;
+}
+
+.grid.col-4>view {
+  width: 25%;
+}
+
+.grid.col-5>view {
+  width: 20%;
+}
+
+/* -- 阴影 -- */
+
+.shadow[class*='white'] {
+  box-shadow: 0 1rpx 6rpx;
+}
+
+.shadow-lg {
+  box-shadow: 100rpx 40rpx 100rpx 0rpx;
+}
+
+.shadow-warp {
+  position: relative;
+  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+}
+
+.shadow-warp:before, .shadow-warp:after {
+  position: absolute;
+  content: "";
+  top: 20rpx;
+  bottom: 30rpx;
+  left: 20rpx;
+  width: 50%;
+  box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
+  transform: rotate(-3deg);
+  z-index: -1;
+}
+
+.shadow-warp:after {
+  right: 20rpx;
+  left: auto;
+  transform: rotate(3deg);
+}
+
+.shadow-blur {
+  position: relative;
+}
+
+.shadow-blur::before {
+  content: "";
+  display: block;
+  background: inherit;
+  filter: blur(10rpx);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 10rpx;
+  left: 10rpx;
+  z-index: -1;
+  opacity: 0.4;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  transform: scale(1, 1);
+}
+
+.bg-red {
+  background-color: #e54d42;
+  color: #fff;
+}
+
+.bg-orange {
+  background-color: #ff9702;
+  color: #fff;
+}
+
+.bg-yellow {
+  background-color: #f9da65;
+  color: #fff;
+}
+
+.bg-olive {
+  background-color: #8dc63f;
+  color: #fff;
+}
+
+.bg-green {
+  background-color: #39b54a;
+  color: #fff;
+}
+
+.bg-cyan {
+  background-color: #1cbbb4;
+  color: #fff;
+}
+
+.bg-blue {
+  background-color: #387dff;
+  color: #fff;
+}
+
+.bg-purple {
+  background-color: #8950ff;
+  color: #fff;
+}
+
+.bg-mauve {
+  background-color: #9c26b0;
+  color: #fff;
+}
+
+.bg-pink {
+  background-color: #ff42a6;
+  color: #fff;
+}
+
+.bg-brown {
+  background-color: #a5673f;
+  color: #fff;
+}
+
+.bg-grey {
+  background-color: #8799a3;
+  color: #fff;
+}
+
+.bg-gray {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.bg-black {
+  background-color: #333;
+  color: #fff;
+}
+
+.bg-white {
+  background-color: #fff;
+  color: #666;
+}
+
+.bg-shadeTop {
+  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
+  color: #fff;
+}
+
+.bg-shadeBottom {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
+  color: #fff;
+}
+
+.bg-red.light {
+  color: #e54d42;
+  background-color: #fadbd9;
+}
+
+.bg-orange.light {
+  color: #f37b1d;
+  background-color: #fde6d2;
+}
+
+.bg-yellow.light {
+  color: #fbbd08;
+  background-color: #fef2ced2;
+}
+
+.bg-olive.light {
+  color: #8dc63f;
+  background-color: #e8f4d9;
+}
+
+.bg-green.light {
+  color: #39b54a;
+  background-color: #d7f0dbff;
+}
+
+.bg-cyan.light {
+  color: #1cbbb4;
+  background-color: #d2f1f0;
+}
+
+.bg-blue.light {
+  color: #387dff;
+  background-color: #cce6ff;
+}
+
+.bg-purple.light {
+  color: #6739b6;
+  background-color: #e1d7f0;
+}
+
+.bg-mauve.light {
+  color: #9c26b0;
+  background-color: #ebd4ef;
+}
+
+.bg-pink.light {
+  color: #e03997;
+  background-color: #f9d7ea;
+}
+
+.bg-brown.light {
+  color: #a5673f;
+  background-color: #ede1d9;
+}
+
+.bg-grey.light {
+  color: #8799a3;
+  background-color: #e7ebed;
+}
+
+.bg-gradual-red {
+  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
+  color: #fff;
+}
+
+.bg-gradual-yellow {
+  background-image: linear-gradient(45deg, #ffd05d, #ffba35);
+  color: #000;
+}
+
+.bg-gradual-orange {
+  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
+  color: #fff;
+}
+
+.bg-gradual-green {
+  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
+  color: #fff;
+}
+
+.bg-gradual-purple {
+  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
+  color: #fff;
+}
+
+.bg-gradual-pink {
+  background-image: linear-gradient(45deg, #ec008c, #6739b6);
+  color: #fff;
+}
+
+.bg-gradual-blue {
+  background-image: linear-gradient(45deg, #387dff, #1cbbb4);
+  color: #fff;
+}
+
+.shadow[class*="-red"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2);
+}
+
+.shadow[class*="-orange"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2);
+}
+
+.shadow[class*="-yellow"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2);
+}
+
+.shadow[class*="-olive"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2);
+}
+
+.shadow[class*="-green"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2);
+}
+
+.shadow[class*="-cyan"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2);
+}
+
+.shadow[class*="-blue"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2);
+}
+
+.shadow[class*="-purple"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2);
+}
+
+.shadow[class*="-mauve"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2);
+}
+
+.shadow[class*="-pink"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2);
+}
+
+.shadow[class*="-brown"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2);
+}
+
+.shadow[class*="-grey"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2);
+}
+
+.shadow[class*="-gray"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2);
+}
+
+.shadow[class*="-black"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
+}
+
+.shadow[class*="-white"] {
+  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
+}
+
+/*边框样式*/
+
+.border-l {
+  border-left: 1rpx solid #f0f0f0 !important;
+}
+
+.border-r {
+  border-right: 1rpx solid #f0f0f0 !important;
+}
+
+.border-t {
+  border-top: 1rpx solid #f0f0f0 !important;
+}
+
+.border-t-0 {
+  border-top: 0 !important;
+}
+
+.border-b {
+  border-bottom: 1rpx solid #f0f0f0 !important;
+}
+
+.border-b-0 {
+  border-bottom: 0 !important;
+}
+
+.border {
+  border: 1rpx solid #f0f0f0 !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.dashed-l {
+  border-left: 2rpx dashed #f0f0f0 !important;
+}
+
+.dashed-r {
+  border-right: 2rpx dashed #f0f0f0 !important;
+}
+
+.dashed-t {
+  border-top: 2rpx dashed #f0f0f0 !important;
+}
+
+.dashed-b {
+  border-bottom: 2rpx dashed #f0f0f0 !important;
+}
+
+.dashed {
+  border: 2rpx dashed #f0f0f0 !important;
+}
+
+.text-xxs {
+  font-size: 16rpx;
+}
+
+.text-xs {
+  font-size: 20rpx;
+}
+
+.text-sm {
+  font-size: 24rpx;
+}
+
+.text-df {
+  font-size: 28rpx;
+}
+
+.text-lg {
+  font-size: 32rpx;
+}
+
+.text-xl {
+  font-size: 36rpx;
+}
+
+.text-xxl {
+  font-size: 44rpx;
+}
+
+.text-sl {
+  font-size: 80rpx;
+}
+
+.text-xsl {
+  font-size: 120rpx;
+}
+
+.text-Abc {
+  text-transform: Capitalize;
+}
+
+.text-ABC {
+  text-transform: Uppercase;
+}
+
+.text-abc {
+  text-transform: Lowercase;
+}
+
+.text-price::before {
+  content: "¥";
+  font-size: 80%;
+  margin-right: 4rpx;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-content {
+  line-height: 1.6;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-red {
+  color: #e54d42;
+}
+
+.text-orange {
+  color: #f37b1d;
+}
+
+.text-yellow {
+  color: #f9d964;
+}
+
+.text-viridity{
+  color:#01c732
+}
+
+.text-olive {
+  color: #8dc63f;
+}
+
+.text-green {
+  color: #39b54a;
+}
+
+.text-cyan {
+  color: #1cbbb4;
+}
+
+.text-blue {
+  color: #387dff;
+}
+
+.text-purple {
+  color: #6739b6;
+}
+
+.text-mauve {
+  color: #9c26b0;
+}
+
+.text-pink {
+  color: #e03997;
+}
+
+.text-brown {
+  color: #a5673f;
+}
+
+.text-grey {
+  color: #8799a3;
+}
+
+.text-gray {
+  color: #75777c;
+}
+
+.text-black {
+  color: #333;
+}
+
+.text-white {
+  color: #fff;
+}
+
+.divider:not(:last-child)::after {
+  content: "｜";
+  padding: 0 0 0 5px;
+  margin-bottom: 2px;
+  color: #DCDFE6;
+  text-align: center;
+}
\ No newline at end of file