前端显示完成初步功能，等待后端地址

.hbuilderx/launch.json

@@ -0,0 +1,11 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+            "type": "uniCloud",
+            "default": {
+                "launchtype": "local"
+            }
+        }
+    ]
+}

App.vue

@@ -0,0 +1,17 @@
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	/*每个页面公共css */
+</style>

main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+const app = new Vue({
+    ...App
+})
+app.$mount()

manifest.json

@@ -0,0 +1,71 @@
+{
+    "name" : "trafficAnalysis",
+    "appid" : "__UNI__74AD02B",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+		"nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics": {  
+        "enable": false
+    }
+}

pages.json

@@ -0,0 +1,24 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				// "navigationBarTitleText": "食堂动态监测"
+			}
+		}, {
+			"path": "pages/second/second",
+			"style": {
+				// "navigationBarTitleText": "食堂动态监测",
+				"enablePullDownRefresh": false
+			}
+
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "食堂动态监测",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8",
+		"navigationStyle": "custom"
+	}
+}

pages/index/index.css

@@ -0,0 +1,223 @@
+.color1{
+	background-color: #F88A64 !important;
+}
+
+.color2{
+	background-color: #D0524E !important;
+	
+}
+
+.content{
+	width: 691rpx;
+	height: 1334rpx;
+	margin: 20rpx auto;
+	/* border: 1rpx solid #007AFF; */
+}
+
+/* first */
+.first-line{
+	height: 59rpx;
+	display: flex;
+}
+
+.first-btn{
+	height: 59rpx;
+	width: 107rpx;
+	margin-right: 36rpx;
+	margin-left: 0rpx;
+	background-color: #005BF1;
+	color: #FFFFFF;
+	border-radius: 4rpx;
+	font-size: 22rpx;
+}
+
+.second-btn{
+	height: 59rpx;
+	width: 107rpx;
+	margin: 0rpx;
+	border-radius: 4rpx;
+	border: 1rpx solid #AAAAAA;
+	background-color: #FFFFFF;
+	font-size: 22rpx;
+}
+
+uni-button:after{
+	border: none;
+}
+
+/* second */
+.second-content{
+	margin-top: 24rpx;
+	height: 882rpx;
+	background-image: url(../../static/images/first1.png);
+	background-size: 691rpx;
+}
+
+.sec-first{
+	width: 650rpx;
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	font-size: 25rpx;
+	/* border: 1rpx solid #005BF1; */
+}
+
+.sec-first-one{
+	margin: 0 auto;
+	width: 100rpx;
+	margin-left: 110rpx;
+}
+
+.sec-first-two{
+	margin: 0 auto;
+	width: 100rpx;
+	margin-left: 150rpx;
+}
+
+.sec-second{
+	margin-top: 40rpx;
+	margin-left: 35rpx;
+	/* border: 1rpx solid #005BF1; */
+	height: 618rpx;
+	width: 470rpx;
+	display: flex;
+	justify-content: space-between;
+}
+
+.first-col{
+	width: 200rpx;
+	font-size: 20rpx;
+}
+
+.second-col{
+	margin-top: 17rpx;
+	/* width: 216rpx; */
+	/* border: 1rpx solid #333333; */
+	display: flex;
+}
+
+.second-col-line{
+	/* margin: 0rpx 5rpx; */
+	width: 83rpx;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	/* border: 1rpx solid #4CD964; */
+}
+
+.second-col-item{
+	width: 50rpx;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.col-item{
+	height: 57rpx;
+	border: 3rpx solid #000000;
+}
+
+.shop-btn{
+	height: 57rpx;
+	font-size: 25rpx;
+	text-align: center;
+	padding-top: 10rpx;
+	/* margin: 2rpx 0rpx; */
+	border: 3rpx solid #000000;
+	background-color: #62CA8E;
+	color: #FFFFFF;
+	
+}
+
+.shop-btn:first-child,.col-item:first-child{
+	border-top: 5rpx solid #000000;
+}
+
+.shop-btn:last-child,.col-item:last-child{
+	border-bottom: 5rpx solid #000000;
+}
+
+.shop-text{
+	height: 32rpx;
+}
+
+.sec-third{
+	margin-top: 20rpx;
+	margin-left: 50rpx;
+	/* border: 1rpx solid #DD524D; */
+	width: 600rpx;
+	height: 98rpx;
+	display: flex;
+	align-items: center;
+	font-size: 25rpx;
+}
+
+.sec-third-one{
+	margin: 0 auto;
+	width: 200rpx;
+	padding-left: 110rpx;
+}
+
+.sec-third-two{
+	margin: 0 auto;
+	width: 200rpx;
+	padding-left: 100rpx;
+}
+
+/* third */
+.third-note{
+	margin-top: 27rpx;
+	font-size: 24rpx;
+}
+
+.third-first{
+	color: #333333;
+}
+
+.third-second{
+	margin-top: 19rpx;
+	margin-left: 58rpx;
+}
+
+.one-line{
+	margin-top: 19rpx;
+	display: flex;
+	align-items: center;
+}
+
+.one-block{
+	width: 35rpx;
+	height: 21rpx;
+	background-color: #62CA8E;
+	margin-right: 20rpx;
+}
+
+.tow-line{
+	margin-top: 25rpx;
+	display: flex;
+	align-items: center;
+}
+
+.two-block{
+	width: 35rpx;
+	height: 21rpx;
+	background-color: #F88A64;
+	margin-right: 20rpx;
+}
+
+.three-line{
+	margin-top: 25rpx;
+	display: flex;
+	align-items: center;
+}
+
+.three-block{
+	width: 35rpx;
+	height: 21rpx;
+	background-color: #D0524E;
+	margin-right: 20rpx;
+}
+
+.third-text{
+	font-size: 24rpx;
+}

pages/index/index.vue

@@ -0,0 +1,136 @@
+<template>
+	<view class="content">
+		<view class="first-line">
+			<button class="first-btn">一层</button>
+			<button class="second-btn" @click="navigatorToSec()">二层</button>
+		</view>
+		<view class="second-content">
+			<view class="sec-first">
+				<view class="sec-first-one">配送中心</view>
+				<view class="sec-first-two">盥洗室</view>
+			</view>
+			<view class="sec-second">
+				<view class="first-col">
+					<view class="shop-text" v-for="(name,i) in shopName">
+						{{shopNum[i]}} {{name}}
+					</view>
+				</view>
+				<view class="second-col">
+					<view class="second-col-line">
+						<view class="shop-btn" :class="{'color1':rank[i] == 1,'color2':rank[i] == 2}"
+							v-for="(shop,i) in shopNum1" @click="getInfo(i)">{{shop}}</view>
+					</view>
+					<view class="second-col-item">
+						<view class="col-item" v-for="(shop,i) in shopNum1"></view>
+					</view>
+					<view class="second-col-line">
+						<view class="shop-btn" :class="{'color1':rank[19-i] == 1,'color2':rank[19-i] == 2}"
+							v-for="(shop,i) in shopNum2" @click="getInfo(19-i)">{{shop}}</view>
+					</view>
+				</view>
+			</view>
+			<view class="sec-third">
+				<view class="sec-third-one">黄焖鸡米饭</view>
+				<view class="sec-third-two">包子铺</view>
+			</view>
+		</view>
+		<view class="third-note">
+			<view class="third-first">
+				<span style="color: #FF0000;">*</span>
+				注：点击对应食堂窗口查看实时人数
+			</view>
+			<view class="third-second">
+				<view class="one-line">
+					<view class="one-block"></view>
+					<view class="third-text">
+						窗口人数低于{{minNum}}人
+					</view>
+				</view>
+				<view class="tow-line">
+					<view class="two-block"></view>
+					<view class="third-text">
+						窗口人数高于{{minNum}}人且小于{{maxNum}}人
+					</view>
+				</view>
+				<view class="three-line">
+					<view class="three-block"></view>
+					<view class="third-text">
+						窗口人数高于{{maxNum}}人
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				rank: [], //档口人数级别
+				minNum: 5, //第一级别的人数
+				maxNum: 12, //第二级别的人数
+				shopNum1: [], //第一列档口
+				shopNum2: [], //第二列档口
+				shopNum: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲',
+					'⑳'
+				], //档口名称编号
+				shopName: ['窗口名称1', '窗口名称2', '窗口名称3', '窗口名称4', '窗口名称5', '窗口名称6', '窗口名称7', '窗口名称8', '窗口名称9', '窗口名称10',
+					'窗口名称11', '窗口名称12', '窗口名称13', '窗口名称14', '窗口名称15', '窗口名称16', '窗口名称17', '窗口名称18', '窗口名称19', '窗口名称20'
+				], //档口名称
+				peopleNum: [6, 12, 6, 14, 5, 4, 17, 6, 9, 13, 6, 1, 4, 9, 5, 14, 5, 3, 2, 10], //每个档口的人数
+				// shopNum1: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩'], //第一列档口
+				// shopNum2: ['⑳', '⑲', '⑱', '⑰', '⑯', '⑮', '⑭', '⑬', '⑫', '⑪'], //第二列档口
+			}
+		},
+		onLoad() {
+			// console.log(this.peopleNum.length)
+			// this.peopleNum[15] = 9
+			this.getShopNum()
+			this.getRank()
+		},
+		methods: {
+			//获取标号
+			getShopNum() {
+				this.shopNum1 = this.shopNum.slice(0, 10)
+				this.shopNum2 = this.shopNum.slice(10, 20).reverse()
+			},
+			//获取人数级别
+			getRank() {
+				var i = 0
+				this.rank = []
+				while (i < this.peopleNum.length) {
+					// console.log(this.peopleNum[i])
+					if (this.peopleNum[i] >= this.minNum && this.peopleNum[i] <= this.maxNum) {
+						this.rank.push(1)
+					} else if (this.peopleNum[i] > this.maxNum) {
+						this.rank.push(2)
+					} else {
+						this.rank.push(0)
+					}
+					i += 1
+				}
+				// console.log(this.rank)
+			},
+			//按键显示
+			getInfo(e) {
+				// console.log(e)
+				uni.showToast({
+					icon: 'none',
+					title: e + 1 + '号窗口实时人数：' + this.peopleNum[e],
+					duration: 2000
+				});
+			},
+			//跳转
+			navigatorToSec() {
+				uni.navigateTo({
+					url: '/pages/second/second',
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("index.css");
+</style>

pages/second/second.css

@@ -0,0 +1,241 @@
+.color1{
+	background-color: #F88A64 !important;
+}
+
+.color2{
+	background-color: #D0524E !important;
+	
+}
+
+.content{
+	width: 691rpx;
+	height: 1334rpx;
+	margin: 20rpx auto;
+	font-size: 25rpx;
+	/* border: 1rpx solid #007AFF; */
+}
+
+/* first */
+.first-line{
+	height: 59rpx;
+	display: flex;
+}
+
+.first-btn{
+	height: 59rpx;
+	width: 107rpx;
+	margin-right: 36rpx;
+	margin-left: 0rpx;
+	border: 1rpx solid #AAAAAA;
+	background-color: #FFFFFF;
+	border-radius: 4rpx;
+	font-size: 22rpx;
+}
+
+.second-btn{
+	height: 59rpx;
+	width: 107rpx;
+	margin: 0rpx;
+	border-radius: 4rpx;
+	color: #FFFFFF;
+	font-size: 22rpx;
+	background-color: #005BF1;
+}
+
+uni-button:after{
+	border: none;
+}
+
+/* second */
+.second-content{
+	margin-top: 24rpx;
+	height: 885rpx;
+	background-image: url(../../static/images/second1.png);
+	background-size: 691rpx;
+}
+
+.sec-first{
+	display: flex;
+	width: 565rpx;
+	margin-left: 106rpx;
+	height: 110rpx;
+	align-items: center;
+	/* border: 1rpx solid #005BF1; */
+}
+
+.sec-first-shop{
+	width: 230rpx;
+	height: 96rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 6rpx;
+	border: 4rpx solid #000000;
+	background-color: #62CA8E;
+}
+
+.shop-text{
+	width: 100rpx;
+}
+
+.sec-first-item{
+	width: 100rpx;
+	margin: 0 auto; 
+}
+
+.sec-second{
+	display: flex;
+	justify-content: space-between;
+	font-size: 29rpx;
+}
+
+.first-col{
+	width: 130rpx;
+	height: 660rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.first-col-text{
+	width: 30rpx;
+}
+
+.second-col{
+	width: 180rpx;
+	height: 660rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.third-col{
+	width: 160rpx;
+	height: 575rpx;
+	/* margin-left: 56rpx; */
+	margin-top: 45rpx;
+}
+
+.third-col-one{
+	height: 410rpx;
+	width: 162rpx;
+	background-color: #62CA8E;
+	border: 4rpx solid #000000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.one-shop-text{
+	width: 30rpx;
+}
+
+.third-col-two{
+	width: 162rpx;
+	height: 164rpx;
+	background-color: #62CA8E;
+	border: 4rpx solid #000000;
+	border-top: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.fourth-col{
+	width: 110rpx;
+	height: 660rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* margin-left: 30rpx; */
+}
+
+.sec-third{
+	margin-top: 12rpx;
+	height: 100rpx;
+	width: 480rpx;
+	margin-left: 105rpx;
+	display: flex;
+	justify-content: space-between;
+	/* border: 1rpx solid #005BF1; */
+}
+
+.sec-third-one{
+	height: 96rpx;
+	width: 230rpx;
+	border: 4rpx solid #000000;
+	border-bottom: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #62CA8E;
+}
+
+.sec-third-two{
+	height: 96rpx;
+	width: 186rpx;
+	border: 4rpx solid #000000;
+	border-bottom: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #62CA8E;
+}
+
+/* third */
+.third-note{
+	margin-top: 27rpx;
+	font-size: 24rpx;
+}
+
+.third-first{
+	color: #333333;
+}
+
+.third-second{
+	margin-top: 19rpx;
+	margin-left: 58rpx;
+}
+
+.one-line{
+	margin-top: 19rpx;
+	display: flex;
+	align-items: center;
+}
+
+.one-block{
+	width: 35rpx;
+	height: 21rpx;
+	background-color: #62CA8E;
+	margin-right: 20rpx;
+}
+
+.tow-line{
+	margin-top: 25rpx;
+	display: flex;
+	align-items: center;
+}
+
+.two-block{
+	width: 35rpx;
+	height: 21rpx;
+	background-color: #F88A64;
+	margin-right: 20rpx;
+}
+
+.three-line{
+	margin-top: 25rpx;
+	display: flex;
+	align-items: center;
+}
+
+.three-block{
+	width: 35rpx;
+	height: 21rpx;
+	background-color: #D0524E;
+	margin-right: 20rpx;
+}
+
+.third-text{
+	font-size: 24rpx;
+}

pages/second/second.vue

@@ -0,0 +1,125 @@
+<template>
+	<view class="content">
+		<view class="first-line">
+			<button class="first-btn" @click="navigatorToFir()">一层</button>
+			<button class="second-btn">二层</button>
+		</view>
+		<view class="second-content">
+			<view class="sec-first">
+				<view class="sec-first-shop" :class="{'color1':rank[0] == 1,'color2':rank[0] == 2}" @click="getInfo(0)">
+					<view class="shop-text">{{shopName[0]}}</view>
+				</view>
+				<view class="sec-first-item">盥洗室</view>
+			</view>
+			<view class="sec-second">
+				<view class="first-col">
+					<view class="first-col-text">就餐区域</view>
+				</view>
+				<view class="col-item"></view>
+				<view class="second-col">
+					<view class="first-col-text">就餐区域</view>
+				</view>
+				<view class="third-col">
+					<view class="third-col-one" :class="{'color1':rank[1] == 1,'color2':rank[1] == 2}"
+						@click="getInfo(1)">
+						<view class="one-shop-text">{{shopName[1]}}</view>
+					</view>
+					<view class="third-col-two" :class="{'color1':rank[2] == 1,'color2':rank[2] == 2}"
+						@click="getInfo(2)">
+						<view class="one-shop-text">{{shopName[2]}}</view>
+					</view>
+				</view>
+				<view class="fourth-col">
+					<view class="first-col-text">办公区域</view>
+				</view>
+			</view>
+			<view class="sec-third">
+				<view class="sec-third-one" :class="{'color1':rank[3] == 1,'color2':rank[3] == 2}" @click="getInfo(3)">
+					<view class="shop-text">{{shopName[3]}}</view>
+				</view>
+				<view class="sec-third-two" :class="{'color1':rank[4] == 1,'color2':rank[4] == 2}" @click="getInfo(4)">
+					<view class="shop-text">{{shopName[4]}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="third-note">
+			<view class="third-first">
+				<span style="color: #FF0000;">*</span>
+				注：点击对应食堂窗口查看实时人数
+			</view>
+			<view class="third-second">
+				<view class="one-line">
+					<view class="one-block"></view>
+					<view class="third-text">
+						窗口人数低于{{minNum}}人
+					</view>
+				</view>
+				<view class="tow-line">
+					<view class="two-block"></view>
+					<view class="third-text">
+						窗口人数高于{{minNum}}人且小于{{maxNum}}人
+					</view>
+				</view>
+				<view class="three-line">
+					<view class="three-block"></view>
+					<view class="third-text">
+						窗口人数高于{{maxNum}}人
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				minNum: 5, //第一级别的人数
+				maxNum: 12, //第二级别的人数
+				rank: [], //档口人数级别
+				peopleNum: [6, 13, 3, 2, 10], //档口人数
+				shopName: ['1号窗口', '2号窗口', '蛋糕店', '3号窗口', '4号窗口', '5号窗口'], //档口名称
+			}
+		},
+		onLoad() {
+			this.getRank()
+		},
+		methods: {
+			//获取人数级别
+			getRank() {
+				var i = 0
+				this.rank = []
+				while (i < this.peopleNum.length) {
+					if (this.peopleNum[i] >= this.minNum && this.peopleNum[i] <= this.maxNum) {
+						this.rank.push(1)
+					} else if (this.peopleNum[i] > this.maxNum) {
+						this.rank.push(2)
+					} else {
+						this.rank.push(0)
+					}
+					i += 1
+				}
+			},
+			//跳转到第一层
+			navigatorToFir() {
+				uni.navigateTo({
+					url: '/pages/index/index',
+				});
+			},
+			//按键显示
+			getInfo(e) {
+				// console.log(e)
+				uni.showToast({
+					icon: 'none',
+					title: '实时人数：' + this.peopleNum[e],
+					duration: 2000
+				});
+			},
+		}
+	}
+</script>
+
+<style>
+	@import url("second.css");
+</style>

uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:24rpx;
+$uni-font-size-base:28rpx;
+$uni-font-size-lg:32rpx;
+
+/* 图片尺寸 */
+$uni-img-size-sm:40rpx;
+$uni-img-size-base:52rpx;
+$uni-img-size-lg:80rpx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4rpx;
+$uni-border-radius-base: 6rpx;
+$uni-border-radius-lg: 12rpx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20rpx;
+$uni-spacing-row-lg: 30rpx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8rpx;
+$uni-spacing-col-base: 16rpx;
+$uni-spacing-col-lg: 24rpx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:40rpx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:36rpx;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:30rpx;