diff --git a/apis/add-paper.js b/apis/add-paper.js
index 172a6fc..6fc62a1 100644
--- a/apis/add-paper.js
+++ b/apis/add-paper.js
@@ -62,3 +62,10 @@ export function getStoreList(data) {
 		data
 	})
 }
+//获取店铺信息（供应商端）
+export function storeDetail(data) {
+	return http.get({
+		url: '/base-paper-trading/get/store-detail/for/supplier?supplierId='+data,
+		data
+	})
+}
diff --git a/pages/mall/index.vue b/pages/mall/index.vue
index e8e9a25..60071f8 100644
--- a/pages/mall/index.vue
+++ b/pages/mall/index.vue
@@ -1,417 +1,446 @@
 <template>
-  <view class="wrapper">
-    <uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
-      <view slot="left" class="left-title">纸商城</view>
-      <view slot="right" class="right-title" @tap="shareTap">分享</view>
-    </uni-nav-bar>
-    <view class="top-box">
-      <view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
-      <view class="center">
-        <view class="title">{{ storeInformation.name }}</view>
-        <view class="desc">全部商品 39 &nbsp; | &nbsp;上新 9</view>
-      </view>
-      <view class="right">
-        <view class="cut" @click="checkMall()">
-          切换商城
-          <image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
-        </view>
-        <view class="set" @click="setting">设置</view>
-      </view>
-    </view>
-    <uGap></uGap>
-    <view class="" v-if="pageShow">
-      <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff">
-        <view v-for="(item, index) in listData" :key="index">
-          <view class="content" @click="detailInfo(item)">
-            <image class="image" :src="item.litPicUrl" mode=""></image>
-            <view class="" style="width: 100%">
-              <view class="title">
-                <view class="">{{ item.brandName }}</view>
-                <view class="">
-                  <image
-                    class="icon"
-                    :src="item.status === 30111 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'"
-                    mode=""
-                  ></image>
-                </view>
-              </view>
-              <view class="sub-title">{{ item.categoryName }}/{{ item.name }}/{{ item.manufacturerName }}</view>
-              <view class="desc">
-                克重(价格)：
-                <text v-for="(sku, index) in item.skuList" :key="index">{{ sku.weight }}({{ sku.listPrice }})</text>
-              </view>
-            </view>
-          </view>
-          <view class="other">
-            <view class="time">{{ item.updateTime | timeFilter }}</view>
-            <view class="btn">
-              <view class="" @click="editPaper(item)" v-if="item.status === 30112">编辑</view>
-              <view class="divide"></view>
-              <view class="" @click="productStatusChange(item)">{{ item.status === 30111 ? '下架' : '上架' }}</view>
-            </view>
-          </view>
-          <uGap></uGap>
-        </view>
-      </scroll-list>
-    </view>
-    <view>
-      <view class="offer-prices" @click="nativeTo()"><image class="my-image" src="../../static/imgs/trade/camera.png" mode=""></image></view>
-    </view>
-    <no-data v-if="!pageShow"></no-data>
-  </view>
+	<view class="wrapper">
+		<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
+			<view slot="left" class="left-title">纸商城</view>
+			<view slot="right" class="right-title" @tap="shareTap">分享</view>
+		</uni-nav-bar>
+		<view class="top-box" :style="backgroundStyle">
+			<view class=""><image class="image" :src="logo" mode=""></image></view>
+			<view class="center">
+				<view class="title">{{ storeInformation.name }}</view>
+				<view class="desc">全部商品 {{ storeInformation.productNumber }} &nbsp; | &nbsp;上新 {{ storeInformation.currentProductNumber }}</view>
+			</view>
+			<view class="right">
+				<view class="cut" @click="checkMall()">
+					切换商城
+					<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
+				</view>
+				<view class="set" @click="setting">设置</view>
+			</view>
+		</view>
+		<uGap></uGap>
+		<view class="" v-if="pageShow">
+			<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff">
+				<view v-for="(item, index) in listData" :key="index">
+					<view class="content" @click="detailInfo(item)">
+						<image class="image" :src="item.litPicUrl" mode=""></image>
+						<view class="" style="width: 100%">
+							<view class="title">
+								<view class="">{{ item.brandName }}</view>
+								<view class="">
+									<image
+										class="icon"
+										:src="item.status === 30111 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'"
+										mode=""
+									></image>
+								</view>
+							</view>
+							<view class="sub-title">{{ item.categoryName }}/{{ item.name }}/{{ item.manufacturerName }}</view>
+							<view class="desc">
+								克重(价格)：
+								<text v-for="(sku, index) in item.skuList" :key="index">{{ sku.weight }}({{ sku.listPrice }})</text>
+							</view>
+						</view>
+					</view>
+					<view class="other">
+						<view class="time">{{ item.updateTime | timeFilter }}</view>
+						<view class="btn">
+							<view class="" @click="editPaper(item)" v-if="item.status === 30112">编辑</view>
+							<view class="divide"></view>
+							<view class="" @click="productStatusChange(item)">{{ item.status === 30111 ? '下架' : '上架' }}</view>
+						</view>
+					</view>
+					<uGap></uGap>
+				</view>
+			</scroll-list>
+		</view>
+		<view>
+			<view class="offer-prices" @click="nativeTo()"><image class="my-image" src="../../static/imgs/trade/camera.png" mode=""></image></view>
+		</view>
+		<no-data v-if="!pageShow"></no-data>
+	</view>
 </template>
 
 <script>
 import uGap from '@/components/u-gap/u-gap.vue'
 import { back, go2, loginGo2 } from '@/utils/hook.js'
-import { SupplierList, productStatus } from '@/apis/add-paper.js'
+import { SupplierList, productStatus, storeDetail } from '@/apis/add-paper.js'
 import { getTimer } from '@/utils/index.js'
 import noData from './no-data.vue'
 export default {
-  components: { uGap, noData },
-  filters: {
-    timeFilter(value) {
-      var abs = ''
-      if (value) {
-        abs = getTimer(value)
-      }
-      return abs
-    }
-  },
-  data() {
-    return {
-      pageShow: true,
-      storeInformation: {
-        supplierId: null,
-        name: null
-      },
-      option: {
-        size: 10,
-        auto: true,
-        emptyText: '暂无数据~',
-        background: '#F7F8FA',
-        disabled: false
-      },
-      pattern: {
-        backgroundColor: '#007AFF',
-        buttonColor: '#007AFF'
-      },
-      content: [],
-      horizontal: 'right',
-      vertical: 'bottom',
-      direction: 'vertical',
-      orderPagination: {
-        pageNum: 0, // 初始会执行一次下拉加载
-        pageSize: 10,
-        storeId: null,
-        name: null,
-        supplierId: this.$store.state.supplierInfo.supplierId
-      },
-      listData: []
-    }
-  },
-  onShow() {
-    this.storeInformation = {
-      supplierId: this.$store.state.supplierInfo.supplierId,
-      name: this.$store.state.supplierInfo.name
-    }
-    this.quertData()
-  },
-  onLoad() {
-    this.quertData()
-  },
-  methods: {
-    back,
-
-    // 获取纸品列表 pageShow
-    quertData() {
-      return new Promise((resolve, reject) => {
-        SupplierList({ ...this.orderPagination })
-          .then((res) => {
-            if (res) {
-              if (res.records.length === 0) {
-                this.pageShow = false
-                return
-              }
-              if (this.orderPagination.pageNum == 1) {
-                this.listData = res.records
-              } else {
-                this.listData = this.listData.concat(res.records)
-              }
-              resolve({ list: this.listData, total: res.total })
-            }
-          })
-          .catch((err) => {
-            reject(err)
-          })
-      })
-    },
-    downCallback() {
-      this.orderPagination.pageNum = 1
-      this.quertData()
-        .then(({ list, total }) => {
-          this.$refs.list.refreshSuccess({ list, total })
-        })
-        .catch(() => {
-          this.$refs.list.refreshFail()
-        })
-    },
-    upCallback() {
-      this.orderPagination.pageNum++
-      this.quertData()
-        .then(({ list, total }) => {
-          this.$refs.list.loadSuccess({ list, total })
-        })
-        .catch(() => {
-          this.$refs.list.loadFail()
-        })
-    },
-    // 切换商城按钮
-    checkMall() {
-      go2('switching-mall', { supplierId: this.storeInformation.supplierId })
-    },
-    // 按钮点击事件
-    nativeTo() {
-      var params = {
-        title: '添加纸品'
-      }
-      go2('add-paper', params)
-    },
-    // 编辑事件
-    editPaper(item) {
-      var params = {
-        ...item,
-        title: '编辑纸品'
-      }
-      go2('add-paper', params)
-    },
-    // 店铺设置按钮
-    setting(item) {
-      go2('store-settings')
-    },
-    // 详情点击事件
-    detailInfo(item) {
-      loginGo2('paper-detail', item)
-    },
-    // 上下架事件
-    productStatusChange(item) {
-      var params = {
-        id: item.id,
-        status: item.status === 30111 ? 30112 : 30111
-      }
-      productStatus(params).then((res) => {
-        if (res) {
-          uni.showToast({
-            title: '状态修改成功',
-            icon: 'success'
-          })
-          setTimeout(() => {
-            this.orderPagination.pageNum = 1
-            this.quertData()
-          }, 500)
-        }
-      })
-    },
-    // 分享
-    shareTap() {
-      uni.share({
-        provider: 'weixin',
-        scene: 'WXSceneSession',
-        type: 0,
-        href: 'http://uniapp.dcloud.io/',
-        title: 'uni-app分享',
-        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
-        imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
-        success: function (res) {
-          console.log('success:' + JSON.stringify(res))
-        },
-        fail: function (err) {
-          console.log('fail:' + JSON.stringify(err))
-        }
-      })
-    }
-  }
+	components: { uGap, noData },
+	filters: {
+		timeFilter(value) {
+			var abs = ''
+			if (value) {
+				abs = getTimer(value)
+			}
+			return abs
+		}
+	},
+	data() {
+		return {
+			pageShow: true,
+			storeInformation: {
+				supplierId: null,
+				name: null,
+				productNumber: 0,
+				currentProductNumber: 0
+			},
+			option: {
+				size: 10,
+				auto: true,
+				emptyText: '暂无数据~',
+				background: '#F7F8FA',
+				disabled: false
+			},
+			pattern: {
+				backgroundColor: '#007AFF',
+				buttonColor: '#007AFF'
+			},
+			content: [],
+			horizontal: 'right',
+			vertical: 'bottom',
+			direction: 'vertical',
+			orderPagination: {
+				pageNum: 0, // 初始会执行一次下拉加载
+				pageSize: 10,
+				storeId: null,
+				name: null,
+				supplierId: this.$store.state.supplierInfo.supplierId
+			},
+			listData: [],
+			logo:'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif',
+			backgroundStyle:'background: url("/static/imgs/mall/zsc-bg-icon.png") no-repeat;'
+		}
+	},
+	onShow() {
+		this.storeInformation = {
+			supplierId: this.$store.state.supplierInfo.supplierId,
+			name: this.$store.state.supplierInfo.name
+		}
+		this.quertData()
+		this.getSuliper(this.$store.state.supplierInfo.supplierId)
+	},
+	onLoad() {
+		this.quertData()
+	},
+	methods: {
+		back,
+		// 获取上新商品数量
+		getSuliper(id) {
+			storeDetail(id)
+				.then(res => {
+					if (res) {
+						this.$set(this.storeInformation, 'productNumber', res.productNumber)
+						this.$set(this.storeInformation, 'currentProductNumber', res.currentProductNumber)
+						if(res.logo === ""){
+							this.logo = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'
+						}else{
+							this.logo = res.logo
+						}
+						if(res.backgroundImg === ""){
+							this.backgroundStyle = 'background: url("/static/imgs/mall/zsc-bg-icon.png") no-repeat;'
+						}else{
+							this.backgroundStyle = 'background: url('+res.backgroundImg+') no-repeat;'
+						}
+						
+						
+					}
+				})
+				.catch(err => {
+					reject(err)
+				})
+		},
+		// 获取纸品列表 pageShow
+		quertData() {
+			return new Promise((resolve, reject) => {
+				SupplierList({ ...this.orderPagination })
+					.then(res => {
+						if (res) {
+							if (res.records.length === 0) {
+								this.pageShow = false
+								return
+							}
+							if (this.orderPagination.pageNum == 1) {
+								this.listData = res.records
+							} else {
+								this.listData = this.listData.concat(res.records)
+							}
+							resolve({ list: this.listData, total: res.total })
+						}
+					})
+					.catch(err => {
+						reject(err)
+					})
+			})
+		},
+		downCallback() {
+			this.orderPagination.pageNum = 1
+			this.quertData()
+				.then(({ list, total }) => {
+					this.$refs.list.refreshSuccess({ list, total })
+				})
+				.catch(() => {
+					this.$refs.list.refreshFail()
+				})
+		},
+		upCallback() {
+			this.orderPagination.pageNum++
+			this.quertData()
+				.then(({ list, total }) => {
+					this.$refs.list.loadSuccess({ list, total })
+				})
+				.catch(() => {
+					this.$refs.list.loadFail()
+				})
+		},
+		// 切换商城按钮
+		checkMall() {
+			go2('switching-mall', { supplierId: this.storeInformation.supplierId })
+		},
+		// 按钮点击事件
+		nativeTo() {
+			var params = {
+				title: '添加纸品'
+			}
+			go2('add-paper', params)
+		},
+		// 编辑事件
+		editPaper(item) {
+			var params = {
+				...item,
+				title: '编辑纸品'
+			}
+			go2('add-paper', params)
+		},
+		// 店铺设置按钮
+		setting(item) {
+			go2('store-settings')
+		},
+		// 详情点击事件
+		detailInfo(item) {
+			loginGo2('paper-detail', item)
+		},
+		// 上下架事件
+		productStatusChange(item) {
+			var params = {
+				id: item.id,
+				status: item.status === 30111 ? 30112 : 30111
+			}
+			productStatus(params).then(res => {
+				if (res) {
+					uni.showToast({
+						title: '状态修改成功',
+						icon: 'success'
+					})
+					setTimeout(() => {
+						this.orderPagination.pageNum = 1
+						this.quertData()
+					}, 500)
+				}
+			})
+		},
+		// 分享
+		shareTap() {
+			uni.share({
+				provider: 'weixin',
+				scene: 'WXSceneSession',
+				type: 0,
+				href: 'http://uniapp.dcloud.io/',
+				title: 'uni-app分享',
+				summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
+				imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
+				success: function(res) {
+					console.log('success:' + JSON.stringify(res))
+				},
+				fail: function(err) {
+					console.log('fail:' + JSON.stringify(err))
+				}
+			})
+		}
+	}
 }
 </script>
 
 <style lang="scss">
 .wrapper {
-  width: 750rpx;
-  overflow: hidden;
-  .left-title {
-    font-size: 40rpx;
-    color: #000000;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .right-title {
-    font-size: 28rpx;
-    color: #007aff;
-    text-align: right;
-    font-weight: 500;
-  }
-  .top-box {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    height: 180rpx;
-    background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat;
-    background-size: 100%;
-    .image {
-      width: 100rpx;
-      height: 100rpx;
-      border-radius: 50%;
-    }
-    .right {
-      width: 140rpx;
-    }
-    .center {
-      position: relative;
-      left: -20rpx;
-    }
-    .title {
-      font-size: 34rpx;
-      color: #ffffff;
-      letter-spacing: 2rpx;
-      font-weight: 600;
-      margin-bottom: 12rpx;
-    }
-    .desc {
-      opacity: 0.75;
-      font-size: 28rpx;
-      color: #ffffff;
-      letter-spacing: 0;
-      font-weight: 500;
-      padding-right: 32rpx;
-    }
-    .cut {
-      display: flex;
-      align-items: center;
-      font-size: 24rpx;
-      color: #ffffff;
-      letter-spacing: 0;
-      text-align: center;
-      font-weight: 400;
-      .cut-icon {
-        width: 29.42rpx;
-        height: 26.67rpx;
-        margin-left: 10rpx;
-      }
-    }
-    .set {
-      opacity: 0.75;
-      font-size: 28rpx;
-      color: #ffffff;
-      letter-spacing: 0;
-      font-weight: 500;
-      position: relative;
-      top: 39rpx;
-      left: 60rpx;
-    }
-  }
-  .content {
-    background: #ffffff;
-    border-bottom: 2rpx solid #dddddd;
-    display: flex;
-    flex-direction: row;
-    padding: 24rpx 0rpx 24rpx 32rpx;
-    .image {
-      width: 100rpx;
-      height: 100rpx;
-      flex: 0 0 100rpx;
-      margin-right: 18rpx;
-    }
-    .title {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      font-size: 32rpx;
-      color: #333333;
-      letter-spacing: 0;
-      font-weight: 500;
-      .icon {
-        position: relative;
-        top: -22rpx;
-        width: 150rpx;
-        height: 50rpx;
-      }
-    }
-    .sub-title {
-      position: relative;
-      font-size: 28rpx;
-      color: #333333;
-      letter-spacing: 0;
-      font-weight: 400;
-      top: -4rpx;
-    }
-    .desc {
-      font-size: 28rpx;
-      color: #555555;
-      letter-spacing: 0;
-      font-weight: 400;
-      padding-top: 10rpx;
-      line-height: 1.4;
-    }
-  }
-  .other {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 80rpx;
-    background: #ffffff;
-    padding: 0rpx 32rpx;
-    .time {
-      font-size: 28rpx;
-      color: #888888;
-      letter-spacing: 0;
-      font-weight: 400;
-    }
-    .btn {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 28rpx;
-      color: #007aff;
-      letter-spacing: 0;
-      text-align: right;
-      font-weight: 400;
-    }
-    .divide {
-      width: 2rpx;
-      height: 32rpx;
-      background: #d8d8d8;
-      margin: 0 32rpx;
-    }
-    .icon {
-      width: 24rpx;
-      height: 24rpx;
-      margin-left: 6rpx;
-    }
-  }
-  .offer-prices {
-    position: absolute;
-    z-index: 9999;
-    right: 32rpx;
-    bottom: 122rpx;
-    background-color: #007aff;
-    border-radius: 50%;
-    padding: 10rpx;
-    text-align: center;
-    width: 110rpx;
-    height: 110rpx;
-    border: 2rpx solid #f9f9f9;
-    box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .my-image {
-    width: 100rpx;
-    height: 100rpx;
-  }
+	width: 750rpx;
+	overflow: hidden;
+	.left-title {
+		font-size: 40rpx;
+		color: #000000;
+		letter-spacing: 0;
+		font-weight: 500;
+	}
+	.right-title {
+		font-size: 28rpx;
+		color: #007aff;
+		text-align: right;
+		font-weight: 500;
+	}
+	.top-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+		height: 180rpx;
+	
+		background-size: 100%;
+		.image {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+		}
+		.right {
+			width: 140rpx;
+		}
+		.center {
+			position: relative;
+			left: -20rpx;
+		}
+		.title {
+			font-size: 34rpx;
+			color: #ffffff;
+			letter-spacing: 2rpx;
+			font-weight: 600;
+			margin-bottom: 12rpx;
+		}
+		.desc {
+			opacity: 0.75;
+			font-size: 28rpx;
+			color: #ffffff;
+			letter-spacing: 0;
+			font-weight: 500;
+			padding-right: 32rpx;
+		}
+		.cut {
+			display: flex;
+			align-items: center;
+			font-size: 24rpx;
+			color: #ffffff;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+			.cut-icon {
+				width: 29.42rpx;
+				height: 26.67rpx;
+				margin-left: 10rpx;
+			}
+		}
+		.set {
+			opacity: 0.75;
+			font-size: 28rpx;
+			color: #ffffff;
+			letter-spacing: 0;
+			font-weight: 500;
+			position: relative;
+			top: 39rpx;
+			left: 60rpx;
+		}
+	}
+	.content {
+		background: #ffffff;
+		border-bottom: 2rpx solid #dddddd;
+		display: flex;
+		flex-direction: row;
+		padding: 24rpx 0rpx 24rpx 32rpx;
+		.image {
+			width: 100rpx;
+			height: 100rpx;
+			flex: 0 0 100rpx;
+			margin-right: 18rpx;
+		}
+		.title {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			font-size: 32rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 500;
+			.icon {
+				position: relative;
+				top: -22rpx;
+				width: 150rpx;
+				height: 50rpx;
+			}
+		}
+		.sub-title {
+			position: relative;
+			font-size: 28rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 400;
+			top: -4rpx;
+		}
+		.desc {
+			font-size: 28rpx;
+			color: #555555;
+			letter-spacing: 0;
+			font-weight: 400;
+			padding-top: 10rpx;
+			line-height: 1.4;
+		}
+	}
+	.other {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		height: 80rpx;
+		background: #ffffff;
+		padding: 0rpx 32rpx;
+		.time {
+			font-size: 28rpx;
+			color: #888888;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
+		.btn {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 28rpx;
+			color: #007aff;
+			letter-spacing: 0;
+			text-align: right;
+			font-weight: 400;
+		}
+		.divide {
+			width: 2rpx;
+			height: 32rpx;
+			background: #d8d8d8;
+			margin: 0 32rpx;
+		}
+		.icon {
+			width: 24rpx;
+			height: 24rpx;
+			margin-left: 6rpx;
+		}
+	}
+	.offer-prices {
+		position: absolute;
+		z-index: 9999;
+		right: 32rpx;
+		bottom: 122rpx;
+		background-color: #007aff;
+		border-radius: 50%;
+		padding: 10rpx;
+		text-align: center;
+		width: 110rpx;
+		height: 110rpx;
+		border: 2rpx solid #f9f9f9;
+		box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.my-image {
+		width: 100rpx;
+		height: 100rpx;
+	}
 }
-</style>
+</style>
diff --git a/pages/start-page/index.vue b/pages/start-page/index.vue
index 8183fd0..d4f8f04 100644
--- a/pages/start-page/index.vue
+++ b/pages/start-page/index.vue
@@ -1,22 +1,185 @@
 <template>
-	<view>
-		
+	<view class="">
+		<view class="start-page">
+			<view class="view-lineHight"><image class="topImage" src="../../static/imgs/start-page/bkTop.png" mode=""></image></view>
+			<view class="page-jump" @click="jumpLogin"><text>跳过</text></view>
+			<view class="page1">
+				<swiper
+					class="swiper"
+					:current="current"
+					@change="currentChange"
+					:style="pageHight"
+					:indicator-dots="indicatorDots"
+					:autoplay="autoplay"
+					:interval="interval"
+					:duration="duration"
+				>
+					<swiper-item v-for="(swiper, swiperIndex) in pageText" :key="swiperIndex">
+						<view class="swiper-item uni-bg-red">
+							<view class="page-top">
+								<view class="page-text">
+									<text>{{ swiper.text }}</text>
+								</view>
+								<view class="page-title">
+									<text>{{ swiper.title }}</text>
+								</view>
+								<view class="page-subtitle">
+									<text>{{ swiper.subTitle }}</text>
+								</view>
+								<image class="" :src="swiper.image" mode=""></image>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+				<view class="index-point"><view v-for="(items, index) in pageText" :class="current === index ? 'indexs-check' : 'indexs-nocheck'"></view></view>
+				<view class="page-btn-class" v-if="current === pageText.length - 1"><button @click="jumpLogin" class="page-btn" type="default">立即开启</button></view>
+			</view>
+
+			<view class="view-lineHight"><image class="topImage bottom-image" src="../../static/imgs/start-page/bkBottom.png" mode=""></image></view>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
+	import { back, go2, uploadFile } from '@/utils/hook.js'
+export default {
+	data() {
+		return {
+			current: 0,
+			mode: 'round',
+			pageHight: 0,
+			background: ['color1', 'color2', 'color3'],
+			indicatorDots: false,
+			autoplay: false,
+			interval: 2000,
+			duration: 500,
+			pageText: [
+				{
+					text: '',
+					title: '账期订单融资',
+					subTitle: '给客户更便宜的价格，更大的销售额',
+					image: '../../static/imgs/start-page/rz.png'
+				},
+				{
+					text: '',
+					title: '征信管理',
+					subTitle: '具有客户更丰富多维的征信数据',
+					image: '../../static/imgs/start-page/zx.png'
+				},
+				{
+					text: '',
+					title: '电子签约',
+					subTitle: '避免交易过程可能的纠纷',
+					image: '../../static/imgs/start-page/dzqy.png'
+				},
+				{
+					text: '全新纸掌柜',
+					title: '智能合同',
+					subTitle: '实现合同同步的财务履约能力',
+					image: '../../static/imgs/start-page/ht.png'
+				}
+			]
+		}
+	},
+	methods: {
+		currentChange(item) {
+			this.current = item.detail.current
 		},
-		methods: {
-			
+		jumpLogin(){
+			go2('login')
 		}
+	},
+	onLoad() {
+		this.pageHight = 'height:' + (window.screen.height - 60) + 'px'
+		console.log(this.pageHight)
 	}
+}
 </script>
 
-<style>
-
+<style lang="scss">
+.start-page {
+	.topImage {
+		width: 100%;
+		height: 72rpx;
+	}
+	.view-lineHight {
+		line-height: 0rpx;
+	}
+	.bottom-image {
+		position: absolute;
+		bottom: 0rpx;
+	}
+	.page1 {
+		background-color: #e7eeff;
+		text-align: center;
+	}
+	.page-title {
+		font-size: 100rpx;
+		color: #2143af;
+		text-align: center;
+		font-weight: 600;
+		margin: 32rpx 0rpx;
+	}
+	.page-text {
+		font-size: 80rpx;
+		color: #2143af;
+		font-weight: 400;
+	}
+	.page-top {
+		padding-top: 20%;
+	}
+	.page-subtitle {
+		font-size: 32rpx;
+		color: #333333;
+		font-weight: 400;
+		margin: 32rpx 0rpx;
+	}
+	.page-jump {
+		position: absolute;
+		padding: 12rpx;
+		border: 2rpx solid #979797;
+		border-radius: 38rpx;
+		width: 122rpx;
+		text-align: center;
+		right: 54rpx;
+		font-size: 24rpx;
+		color: #333333;
+		font-weight: 400;
+		z-index: 9999;
+	}
+	.indexs-check {
+		background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
+		border-radius: 12rpx;
+		width: 54rpx;
+		height: 12rpx;
+		margin-left: 10rpx;
+	}
+	.indexs-nocheck {
+		width: 12rpx;
+		height: 12rpx;
+		background-color: #58c4fd;
+		margin-left: 10rpx;
+		border-radius: 10rpx;
+	}
+	.index-point {
+		position: absolute;
+		top: 70%;
+		left: 40%;
+		display: flex;
+	}
+	.page-btn {
+		background-image: linear-gradient(90deg, #047fff 0%, #00b4fa 100%);
+		border-radius: 8rpx;
+		font-size: 32rpx;
+		color: #FFFFFF;
+		font-weight: 500;
+		width: 400rpx;
+	}
+	.page-btn-class {
+		position: absolute;
+		top: 73%;
+		left: 0;
+		right: 0;
+	}
+}
 </style>
diff --git a/static/imgs/start-page/bkBottom.png b/static/imgs/start-page/bkBottom.png
new file mode 100644
index 0000000..96eb7be
Binary files /dev/null and b/static/imgs/start-page/bkBottom.png differ
diff --git a/static/imgs/start-page/bkTop.png b/static/imgs/start-page/bkTop.png
new file mode 100644
index 0000000..8cc8f80
Binary files /dev/null and b/static/imgs/start-page/bkTop.png differ
diff --git a/static/imgs/start-page/dzqy.png b/static/imgs/start-page/dzqy.png
new file mode 100644
index 0000000..a9d006f
Binary files /dev/null and b/static/imgs/start-page/dzqy.png differ
diff --git a/static/imgs/start-page/ht.png b/static/imgs/start-page/ht.png
new file mode 100644
index 0000000..7b01b90
Binary files /dev/null and b/static/imgs/start-page/ht.png differ
diff --git a/static/imgs/start-page/qd1.png b/static/imgs/start-page/qd1.png
new file mode 100644
index 0000000..455434d
Binary files /dev/null and b/static/imgs/start-page/qd1.png differ
diff --git a/static/imgs/start-page/rz.png b/static/imgs/start-page/rz.png
new file mode 100644
index 0000000..d804885
Binary files /dev/null and b/static/imgs/start-page/rz.png differ
diff --git a/static/imgs/start-page/zx.png b/static/imgs/start-page/zx.png
new file mode 100644
index 0000000..bdc2ae8
Binary files /dev/null and b/static/imgs/start-page/zx.png differ
diff --git a/uni_modules/uni-scss/changelog.md b/uni_modules/uni-scss/changelog.md
index 7e3d755..b863bb0 100644
--- a/uni_modules/uni-scss/changelog.md
+++ b/uni_modules/uni-scss/changelog.md
@@ -1,6 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
 ## 1.0.2（2021-11-22）
 - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
-## 1.0.1（2021-11-22）
-- 修复 vue3中scss语法兼容问题
-## 1.0.0（2021-11-18）
-- init
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init
diff --git a/uni_modules/uni-scss/index.scss b/uni_modules/uni-scss/index.scss
index 5d43f7f..1744a5f 100644
--- a/uni_modules/uni-scss/index.scss
+++ b/uni_modules/uni-scss/index.scss
@@ -1 +1 @@
-@import './styles/index.scss';
+@import './styles/index.scss';
diff --git a/uni_modules/uni-scss/package.json b/uni_modules/uni-scss/package.json
index ee71935..7cc0ccb 100644
--- a/uni_modules/uni-scss/package.json
+++ b/uni_modules/uni-scss/package.json
@@ -1,82 +1,82 @@
-{
-  "id": "uni-scss",
-  "displayName": "uni-scss 辅助样式",
-  "version": "1.0.2",
-  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
-  "keywords": [
-    "uni-scss",
-    "uni-ui",
-    "辅助样式"
-],
-  "repository": "https://github.com/dcloudio/uni-ui",
-  "engines": {
-    "HBuilderX": "^3.1.0"
-  },
-  "dcloudext": {
-    "category": [
-        "uni-app前端模板",
-        "前端页面模板"
-    ],
-    "sale": {
-      "regular": {
-        "price": "0.00"
-      },
-      "sourcecode": {
-        "price": "0.00"
-      }
-    },
-    "contact": {
-      "qq": ""
-    },
-    "declaration": {
-      "ads": "无",
-      "data": "无",
-      "permissions": "无"
-    },
-    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
-  },
-  "uni_modules": {
-    "dependencies": [],
-    "encrypt": [],
-    "platforms": {
-      "cloud": {
-        "tcb": "y",
-        "aliyun": "y"
-      },
-      "client": {
-        "App": {
-          "app-vue": "y",
-          "app-nvue": "u"
-        },
-        "H5-mobile": {
-          "Safari": "y",
-          "Android Browser": "y",
-          "微信浏览器(Android)": "y",
-          "QQ浏览器(Android)": "y"
-        },
-        "H5-pc": {
-          "Chrome": "y",
-          "IE": "y",
-          "Edge": "y",
-          "Firefox": "y",
-          "Safari": "y"
-        },
-        "小程序": {
-          "微信": "y",
-          "阿里": "y",
-          "百度": "y",
-          "字节跳动": "y",
-          "QQ": "y"
-        },
-        "快应用": {
-          "华为": "n",
-          "联盟": "n"
-        },
-        "Vue": {
-            "vue2": "y",
-            "vue3": "y"
-        }
-      }
-    }
-  }
-}
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-scss/styles/index.scss b/uni_modules/uni-scss/styles/index.scss
index 2106dd1..ffac4fe 100644
--- a/uni_modules/uni-scss/styles/index.scss
+++ b/uni_modules/uni-scss/styles/index.scss
@@ -1,7 +1,7 @@
-@import './setting/_variables.scss';
-@import './setting/_border.scss';
-@import './setting/_color.scss';
-@import './setting/_space.scss';
-@import './setting/_radius.scss';
-@import './setting/_text.scss';
-@import './setting/_styles.scss';
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';
diff --git a/uni_modules/uni-scss/styles/setting/_border.scss b/uni_modules/uni-scss/styles/setting/_border.scss
index 781df64..12a11c3 100644
--- a/uni_modules/uni-scss/styles/setting/_border.scss
+++ b/uni_modules/uni-scss/styles/setting/_border.scss
@@ -1,3 +1,3 @@
-.uni-border {
-	border: 1px $uni-border-1 solid;
+.uni-border {
+	border: 1px $uni-border-1 solid;
 }
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/setting/_color.scss b/uni_modules/uni-scss/styles/setting/_color.scss
index 595f5ed..1ededd9 100644
--- a/uni_modules/uni-scss/styles/setting/_color.scss
+++ b/uni_modules/uni-scss/styles/setting/_color.scss
@@ -1,66 +1,66 @@
-
-// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
-// @mixin get-styles($k,$c) {
-// 	@if $k == size or $k == weight{
-// 		font-#{$k}:#{$c}
-// 	}@else{
-// 		#{$k}:#{$c}
-// 	}
-// }
-$uni-ui-color:(
-	// 主色
-	primary: $uni-primary,
-	primary-disable: $uni-primary-disable,
-	primary-light: $uni-primary-light,
-	// 辅助色
-	success: $uni-success,
-	success-disable: $uni-success-disable,
-	success-light: $uni-success-light,
-	warning: $uni-warning,
-	warning-disable: $uni-warning-disable,
-	warning-light: $uni-warning-light,
-	error: $uni-error,
-	error-disable: $uni-error-disable,
-	error-light: $uni-error-light,
-	info: $uni-info,
-	info-disable: $uni-info-disable,
-	info-light: $uni-info-light,
-	// 中性色
-	main-color: $uni-main-color,
-	base-color: $uni-base-color,
-	secondary-color: $uni-secondary-color,
-	extra-color: $uni-extra-color,
-	// 背景色
-	bg-color: $uni-bg-color,
-	// 边框颜色
-	border-1: $uni-border-1,
-	border-2: $uni-border-2,
-	border-3: $uni-border-3,
-	border-4: $uni-border-4,
-	// 黑色
-	black:$uni-black,
-	// 白色
-	white:$uni-white,
-	// 透明
-	transparent:$uni-transparent
-) !default;
-@each $key, $child in $uni-ui-color {
-	.uni-#{"" + $key} {
-		color: $child;
-	}
-	.uni-#{"" + $key}-bg {
-		background-color: $child;
-	}
-}
-.uni-shadow-sm {
-	box-shadow: $uni-shadow-sm;
-}
-.uni-shadow-base {
-	box-shadow: $uni-shadow-base;
-}
-.uni-shadow-lg {
-	box-shadow: $uni-shadow-lg;
-}
-.uni-mask {
-	background-color:$uni-mask;
-}
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}
diff --git a/uni_modules/uni-scss/styles/setting/_radius.scss b/uni_modules/uni-scss/styles/setting/_radius.scss
index 8672a69..9a0428b 100644
--- a/uni_modules/uni-scss/styles/setting/_radius.scss
+++ b/uni_modules/uni-scss/styles/setting/_radius.scss
@@ -1,55 +1,55 @@
-@mixin radius($r,$d:null ,$important: false){
-  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
-  // Key exists within the $uni-radius variable
-  @if (map-has-key($uni-radius, $r) and  $d){
-		@if $d == t {
-				border-top-left-radius:$radius-value;
-				border-top-right-radius:$radius-value;
-		}@else if $d == r {
-				border-top-right-radius:$radius-value;
-				border-bottom-right-radius:$radius-value;
-		}@else if $d == b {
-				border-bottom-left-radius:$radius-value;
-				border-bottom-right-radius:$radius-value;
-		}@else if $d == l {
-				border-top-left-radius:$radius-value;
-				border-bottom-left-radius:$radius-value;
-		}@else if $d == tl {
-				border-top-left-radius:$radius-value;
-		}@else if $d == tr {
-				border-top-right-radius:$radius-value;
-		}@else if $d == br {
-				border-bottom-right-radius:$radius-value;
-		}@else if $d == bl {
-				border-bottom-left-radius:$radius-value;
-		}
-  }@else{
-		border-radius:$radius-value;
-  }
-}
-
-@each $key, $child in $uni-radius {
-	@if($key){
-		.uni-radius-#{"" + $key} {
-				@include radius($key)
-		}
-	}@else{
-		.uni-radius {
-				@include radius($key)
-		}
-	}
-}
-
-@each $direction in t, r, b, l,tl, tr, br, bl {
-	@each $key, $child in $uni-radius {
-		@if($key){
-			.uni-radius-#{"" + $direction}-#{"" + $key} {
-				@include radius($key,$direction,false)
-			}
-		}@else{
-			.uni-radius-#{$direction} {
-				@include radius($key,$direction,false)
-			}
-		}
-	}
-}
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}
diff --git a/uni_modules/uni-scss/styles/setting/_space.scss b/uni_modules/uni-scss/styles/setting/_space.scss
index 9c3b17b..3c89528 100644
--- a/uni_modules/uni-scss/styles/setting/_space.scss
+++ b/uni_modules/uni-scss/styles/setting/_space.scss
@@ -1,56 +1,56 @@
-
-@mixin fn($space,$direction,$size,$n) {
-	@if $n {
-		#{$space}-#{$direction}: #{$size*$uni-space-root}px
-	} @else {
-		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
-	}
-}
-@mixin get-styles($direction,$i,$space,$n){
-	@if $direction == t {
-		@include fn($space, top,$i,$n);
-	} 
-	@if $direction == r {
-		@include fn($space, right,$i,$n);
-	} 
-	@if $direction == b {
-		@include fn($space, bottom,$i,$n);
-	} 
-	@if $direction == l {
-	 @include fn($space, left,$i,$n);
-	} 
-	@if $direction == x {
-		@include fn($space, left,$i,$n);
-		@include fn($space, right,$i,$n);
-	} 
-	@if $direction == y {
-		@include fn($space, top,$i,$n);
-		@include fn($space, bottom,$i,$n);
-	} 
-	@if $direction == a {
-		@if $n {
-			#{$space}:#{$i*$uni-space-root}px;
-		} @else {
-			#{$space}:#{-$i*$uni-space-root}px;
-		}
-	} 
-}
-
-@each $orientation in m,p {
-	$space: margin;
-	@if $orientation == m {
-		$space: margin;
-	} @else {
-		$space: padding;
-	}
-	@for $i from 0 through 16 {
-		@each $direction in t, r, b, l, x, y, a {
-			.uni-#{$orientation}#{$direction}-#{$i} { 
-				@include  get-styles($direction,$i,$space,true);
-			} 
-			.uni-#{$orientation}#{$direction}-n#{$i} { 
-				@include  get-styles($direction,$i,$space,false);
-			}
-		}
-	}
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/uni_modules/uni-scss/styles/setting/_styles.scss b/uni_modules/uni-scss/styles/setting/_styles.scss
index 6f882c8..689afec 100644
--- a/uni_modules/uni-scss/styles/setting/_styles.scss
+++ b/uni_modules/uni-scss/styles/setting/_styles.scss
@@ -1,167 +1,167 @@
-/* #ifndef APP-NVUE */
-
-$-color-white:#fff;
-$-color-black:#000;
-@mixin base-style($color) {
-	color: #fff;
-	background-color: $color;
-	border-color: mix($-color-black, $color, 8%);
-	&:not([hover-class]):active {
-		background: mix($-color-black, $color, 10%);
-		border-color: mix($-color-black, $color, 20%);
-		color: $-color-white;
-		outline: none;
-	}
-}
-@mixin is-color($color) {
-	@include base-style($color);
-	&[loading] {
-		@include base-style($color);
-		&::before {
-			margin-right:5px;
-		}
-	}
-	&[disabled] {
-	  &,
-		&[loading],
-	  &:not([hover-class]):active {
-	    color: $-color-white;
-			border-color: mix(darken($color,10%), $-color-white);
-	    background-color: mix($color, $-color-white);
-	  }
-	}
-
-}
-@mixin base-plain-style($color) {
-	color:$color;
-	background-color: mix($-color-white, $color, 90%);
-	border-color: mix($-color-white, $color, 70%);
-	&:not([hover-class]):active {
-	  background: mix($-color-white, $color, 80%);
-	  color: $color;
-	  outline: none;
-		border-color: mix($-color-white, $color, 50%);
-	}
-}
-@mixin is-plain($color){
-	&[plain] {
-		@include base-plain-style($color);
-		&[loading] {
-			@include base-plain-style($color);
-			&::before {
-				margin-right:5px;
-			}
-		}
-		&[disabled] {
-		  &,
-		  &:active {
-		    color: mix($-color-white, $color, 40%);
-		    background-color: mix($-color-white, $color, 90%);
-				border-color: mix($-color-white, $color, 80%);
-		  }
-		}
-	}
-}
-
-
-.uni-btn {
-	margin: 5px;
-	color: #393939;
-	border:1px solid #ccc;
-	font-size: 16px;
-	font-weight: 200;
-	background-color: #F9F9F9;
-	// TODO 暂时处理边框隐藏一边的问题
-	overflow: visible;
-	&::after{
-		border: none;
-	}
-
-	&:not([type]),&[type=default] {
-		color: #999;
-		&[loading] {
-			background: none;
-			&::before {
-				margin-right:5px;
-			}
-		}
-
-
-
-		&[disabled]{
-			color: mix($-color-white, #999, 60%);
-		  &,
-			&[loading],
-		  &:active {
-				color: mix($-color-white, #999, 60%);
-		    background-color: mix($-color-white,$-color-black , 98%);
-				border-color: mix($-color-white,  #999, 85%);
-		  }
-		}
-
-		&[plain] {
-			color: #999;
-			background: none;
-			border-color: $uni-border-1;
-			&:not([hover-class]):active {
-				background: none;
-			  color: mix($-color-white, $-color-black, 80%);
-				border-color: mix($-color-white, $-color-black, 90%);
-			  outline: none;
-			}
-			&[disabled]{
-			  &,
-				&[loading],
-			  &:active {
-			    background: none;
-					color: mix($-color-white, #999, 60%);
-					border-color: mix($-color-white,  #999, 85%);
-			  }
-			}
-		}
-	}
-
-	&:not([hover-class]):active {
-	  color: mix($-color-white, $-color-black, 50%);
-	}
-
-	&[size=mini] {
-		font-size: 16px;
-		font-weight: 200;
-		border-radius: 8px;
-	}
-
-
-
-	&.uni-btn-small {
-		font-size: 14px;
-	}
-	&.uni-btn-mini {
-		font-size: 12px;
-	}
-
-	&.uni-btn-radius {
-		border-radius: 999px;
-	}
-	&[type=primary] {
-		@include is-color($uni-primary);
-		@include is-plain($uni-primary)
-	}
-	&[type=success] {
-		@include is-color($uni-success);
-		@include is-plain($uni-success)
-	}
-	&[type=error] {
-		@include is-color($uni-error);
-		@include is-plain($uni-error)
-	}
-	&[type=warning] {
-		@include is-color($uni-warning);
-		@include is-plain($uni-warning)
-	}
-	&[type=info] {
-		@include is-color($uni-info);
-		@include is-plain($uni-info)
-	}
-}
-/* #endif */
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */
diff --git a/uni_modules/uni-scss/styles/setting/_text.scss b/uni_modules/uni-scss/styles/setting/_text.scss
index 0a89590..a34d08f 100644
--- a/uni_modules/uni-scss/styles/setting/_text.scss
+++ b/uni_modules/uni-scss/styles/setting/_text.scss
@@ -1,24 +1,24 @@
-@mixin get-styles($k,$c) {
-	@if $k == size or $k == weight{
-		font-#{$k}:#{$c}
-	}@else{
-		#{$k}:#{$c}
-	}
-}
-
-@each $key, $child in $uni-headings {
-	/* #ifndef APP-NVUE */
-	.uni-#{$key} {
-		@each $k, $c in $child {
-			@include get-styles($k,$c)
-		}
-	}
-	/* #endif */
-	/* #ifdef APP-NVUE */
-	.container .uni-#{$key} {
-		@each $k, $c in $child {
-			@include get-styles($k,$c)
-		}
-	}
-	/* #endif */
-}
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}
diff --git a/uni_modules/uni-scss/styles/setting/_variables.scss b/uni_modules/uni-scss/styles/setting/_variables.scss
index 651e9be..557d3d7 100644
--- a/uni_modules/uni-scss/styles/setting/_variables.scss
+++ b/uni_modules/uni-scss/styles/setting/_variables.scss
@@ -1,146 +1,146 @@
-// @use "sass:math";
-@import  '../tools/functions.scss';
-// 间距基础倍数
-$uni-space-root: 2 !default;
-// 边框半径默认值
-$uni-radius-root:5px !default;
-$uni-radius: () !default;
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
 // 边框半径断点
-$uni-radius: map-deep-merge(
-  (
+$uni-radius: map-deep-merge(
+  (
     0: 0,
-		// TODO 当前版本暂时不支持 sm 属性
-    // 'sm': math.div($uni-radius-root, 2),
-    null: $uni-radius-root,
-    'lg': $uni-radius-root * 2,
-    'xl': $uni-radius-root * 6,
-    'pill': 9999px,
-    'circle': 50%
-  ),
-  $uni-radius
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
 );
-// 字体家族
-$body-font-family: 'Roboto', sans-serif !default;
-// 文本
-$heading-font-family: $body-font-family !default;
-$uni-headings: () !default;
-$letterSpacing: -0.01562em;
-$uni-headings: map-deep-merge(
-  (
-    'h1': (
-      size: 32px,
-			weight: 300,
-			line-height: 50px,
-			// letter-spacing:-0.01562em
-    ),
-    'h2': (
-      size: 28px,
-      weight: 300,
-      line-height: 40px,
-      // letter-spacing: -0.00833em
-    ),
-    'h3': (
-      size: 24px,
-      weight: 400,
-      line-height: 32px,
-      // letter-spacing: normal
-    ),
-    'h4': (
-      size: 20px,
-      weight: 400,
-      line-height: 30px,
-      // letter-spacing: 0.00735em
-    ),
-    'h5': (
-      size: 16px,
-      weight: 400,
-      line-height: 24px,
-      // letter-spacing: normal
-    ),
-    'h6': (
-      size: 14px,
-      weight: 500,
-      line-height: 18px,
-      // letter-spacing: 0.0125em
-    ),
-    'subtitle': (
-      size: 12px,
-      weight: 400,
-      line-height: 20px,
-      // letter-spacing: 0.00937em
-    ),
-    'body': (
-      font-size: 14px,
-			font-weight: 400,
-			line-height: 22px,
-			// letter-spacing: 0.03125em
-    ),
-    'caption': (
-      'size': 12px,
-      'weight': 400,
-      'line-height': 20px,
-      // 'letter-spacing': 0.03333em,
-      // 'text-transform': false
-    )
-  ),
-  $uni-headings
-);
-
-
-
-// 主色
-$uni-primary: #2979ff !default;
-$uni-primary-disable:lighten($uni-primary,20%) !default;
-$uni-primary-light: lighten($uni-primary,25%) !default;
-
-// 辅助色
-// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
-$uni-success: #18bc37 !default;
-$uni-success-disable:lighten($uni-success,20%) !default;
-$uni-success-light: lighten($uni-success,25%) !default;
-
-$uni-warning: #f3a73f !default;
-$uni-warning-disable:lighten($uni-warning,20%) !default;
-$uni-warning-light: lighten($uni-warning,25%) !default;
-
-$uni-error: #e43d33 !default;
-$uni-error-disable:lighten($uni-error,20%) !default;
-$uni-error-light: lighten($uni-error,25%) !default;
-
-$uni-info: #8f939c !default;
-$uni-info-disable:lighten($uni-info,20%) !default;
-$uni-info-light: lighten($uni-info,25%) !default;
-
-// 中性色
-// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
-$uni-main-color: #3a3a3a !default; 			// 主要文字
-$uni-base-color: #6a6a6a !default;			// 常规文字
-$uni-secondary-color: #909399 !default;	// 次要文字
-$uni-extra-color: #c7c7c7 !default;			// 辅助说明
-
-// 边框颜色
-$uni-border-1: #F0F0F0 !default;
-$uni-border-2: #EDEDED !default;
-$uni-border-3: #DCDCDC !default;
-$uni-border-4: #B9B9B9 !default;
-
-// 常规色
-$uni-black: #000000 !default;
-$uni-white: #ffffff !default;
-$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
-
-// 背景色
-$uni-bg-color: #f7f7f7 !default;
-
-/* 水平间距 */
-$uni-spacing-sm: 8px !default;
-$uni-spacing-base: 15px !default;
-$uni-spacing-lg: 30px !default;
-
-// 阴影
-$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
-$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
-$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
-
-// 蒙版
-$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
diff --git a/uni_modules/uni-scss/styles/tools/functions.scss b/uni_modules/uni-scss/styles/tools/functions.scss
index a71beeb..ac6f63e 100644
--- a/uni_modules/uni-scss/styles/tools/functions.scss
+++ b/uni_modules/uni-scss/styles/tools/functions.scss
@@ -1,19 +1,19 @@
-// 合并 map
-@function map-deep-merge($parent-map, $child-map){
-	$result: $parent-map;
-	@each $key, $child in $child-map {
-		$parent-has-key: map-has-key($result, $key);
-		$parent-value: map-get($result, $key);
-		$parent-type: type-of($parent-value);
-		$child-type: type-of($child);
-		$parent-is-map: $parent-type == map;
-		$child-is-map: $child-type == map;
-			
-		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
-			$result: map-merge($result, ( $key: $child ));
-		}@else {
-			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
-		}
-	}
-	@return $result;
-};
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};
diff --git a/uni_modules/uni-scss/theme.scss b/uni_modules/uni-scss/theme.scss
index 20cdf5e..80ee62f 100644
--- a/uni_modules/uni-scss/theme.scss
+++ b/uni_modules/uni-scss/theme.scss
@@ -1,31 +1,31 @@
-// 间距基础倍数
-$uni-space-root: 2;
-// 边框半径默认值
-$uni-radius-root:5px;
-// 主色
-$uni-primary: #2979ff;
-// 辅助色
-$uni-success: #4cd964;
-// 警告色
-$uni-warning: #f0ad4e;
-// 错误色
-$uni-error: #dd524d;
-// 描述色
-$uni-info: #909399;
-// 中性色
-$uni-main-color: #303133;
-$uni-base-color: #606266;
-$uni-secondary-color: #909399;
-$uni-extra-color: #C0C4CC;
-// 背景色
-$uni-bg-color: #f5f5f5;
-// 边框颜色
-$uni-border-1: #DCDFE6;
-$uni-border-2: #E4E7ED;
-$uni-border-3: #EBEEF5;
-$uni-border-4: #F2F6FC;
-
-// 常规色
-$uni-black: #000000;
-$uni-white: #ffffff;
-$uni-transparent: rgba($color: #000000, $alpha: 0);
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
diff --git a/uni_modules/uni-scss/variables.scss b/uni_modules/uni-scss/variables.scss
index 49a89b6..1c062d4 100644
--- a/uni_modules/uni-scss/variables.scss
+++ b/uni_modules/uni-scss/variables.scss
@@ -1,62 +1,62 @@
-@import './styles/setting/_variables.scss';
-// 间距基础倍数
-$uni-space-root: 2;
-// 边框半径默认值
-$uni-radius-root:5px;
-
-// 主色
-$uni-primary: #2979ff;
-$uni-primary-disable:mix(#fff,$uni-primary,50%);
-$uni-primary-light: mix(#fff,$uni-primary,80%);
-
-// 辅助色
-// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
-$uni-success: #18bc37;
-$uni-success-disable:mix(#fff,$uni-success,50%);
-$uni-success-light: mix(#fff,$uni-success,80%);
-
-$uni-warning: #f3a73f;
-$uni-warning-disable:mix(#fff,$uni-warning,50%);
-$uni-warning-light: mix(#fff,$uni-warning,80%);
-
-$uni-error: #e43d33;
-$uni-error-disable:mix(#fff,$uni-error,50%);
-$uni-error-light: mix(#fff,$uni-error,80%);
-
-$uni-info: #8f939c;
-$uni-info-disable:mix(#fff,$uni-info,50%);
-$uni-info-light: mix(#fff,$uni-info,80%);
-
-// 中性色
-// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
-$uni-main-color: #3a3a3a; 			// 主要文字
-$uni-base-color: #6a6a6a;			// 常规文字
-$uni-secondary-color: #909399;	// 次要文字
-$uni-extra-color: #c7c7c7;			// 辅助说明
-
-// 边框颜色
-$uni-border-1: #F0F0F0;
-$uni-border-2: #EDEDED;
-$uni-border-3: #DCDCDC;
-$uni-border-4: #B9B9B9;
-
-// 常规色
-$uni-black: #000000;
-$uni-white: #ffffff;
-$uni-transparent: rgba($color: #000000, $alpha: 0);
-
-// 背景色
-$uni-bg-color: #f7f7f7;
-
-/* 水平间距 */
-$uni-spacing-sm: 8px;
-$uni-spacing-base: 15px;
-$uni-spacing-lg: 30px;
-
-// 阴影
-$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
-$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
-$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
-
-// 蒙版
-$uni-mask: rgba($color: #000000, $alpha: 0.4);
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);
diff --git a/uni_modules/uni-swiper-dot/changelog.md b/uni_modules/uni-swiper-dot/changelog.md
new file mode 100644
index 0000000..85cf54d
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/changelog.md
@@ -0,0 +1,12 @@
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 clickItem 事件，支持指示点控制轮播
+- 新增 支持 pc 可用
diff --git a/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
new file mode 100644
index 0000000..e66b6c7
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
@@ -0,0 +1,218 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * SwiperDod 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				dots: {
+					width: 6,
+					height: 6,
+					bottom: 10,
+					color: '#fff',
+					backgroundColor: 'rgba(0, 0, 0, .3)',
+					border: '1px rgba(0, 0, 0, .3) solid',
+					selectedBackgroundColor: '#333',
+					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+				this.dots = Object.assign(this.dots, this.dotsStyles)
+			},
+			mode(newVal) {
+				if (newVal === 'indexes') {
+					this.dots.width = 14
+					this.dots.height = 14
+				} else {
+					this.dots.width = 6
+					this.dots.height = 6
+				}
+			}
+
+		},
+		created() {
+			if (this.mode === 'indexes') {
+				this.dots.width = 12
+				this.dots.height = 12
+			}
+			this.dots = Object.assign(this.dots, this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: rgba(0, 0, 0, 0.4);
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 0px;
+		// height: 26px;
+		padding: 8px 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: 14px;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		color: #fff;
+		font-size: 12px;
+		line-height: 14px;
+	}
+</style>
diff --git a/uni_modules/uni-swiper-dot/package.json b/uni_modules/uni-swiper-dot/package.json
new file mode 100644
index 0000000..f2dd8d2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-swiper-dot",
+  "displayName": "uni-swiper-dot 轮播图指示点",
+  "version": "1.2.0",
+  "description": "自定义轮播图指示点组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "轮播图指示点",
+    "dot",
+    "swiper"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-swiper-dot/readme.md b/uni_modules/uni-swiper-dot/readme.md
new file mode 100644
index 0000000..7d397e2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/readme.md
@@ -0,0 +1,11 @@
+
+
+## SwiperDot 轮播图指示点
+> **组件名：uni-swiper-dot**
+> 代码块： `uSwiperDot`
+
+
+自定义轮播图指示点
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file