add index

README.md

@@ -17,3 +17,23 @@ yarn build
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+### 微信小程序编译命令    
+
+```
+
+npm run dev:mp-weixin   // 编译成功后导入微信开发工具
+npm run build:mp-weixin
+
+```
+
+### 配置
+
+### ipx 底部适配高度函数
+
+```css
+    padding-bottom: 0;
+    padding-bottom: calc( 0 + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+    padding-bottom: calc( 0 + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+```

package.json

@@ -80,7 +80,9 @@
     "jest": "^25.4.0",
     "mini-types": "*",
     "miniprogram-api-typings": "*",
+    "node-sass": "^4.14.1",
     "postcss-comment": "^2.0.0",
+    "sass-loader": "^10.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

src/App.vue

@@ -14,4 +14,10 @@
 
 <style>
 	/*每个页面公共css */
+	page{
+		background-color: #f2f2f7;
+	}
+	view,scroll-view,text,picker{
+		box-sizing: border-box;
+	}
 </style>

src/pages.json

@@ -3,14 +3,13 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
 			}
 		}
 	],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationBarTextStyle": "white",
+		"navigationBarTitleText": "欧轩智能商家助手",
+		"navigationBarBackgroundColor": "#009874",
+		"backgroundColor": "#f2f2f7"
 	}
 }

src/pages/index/index.vue

@@ -1,8 +1,38 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view>
-			<text class="title">{{title}}</text>
+	<view class="index-container">
+		<view class="ic-header">
+			<view class="ih-address">
+				<view>广州欧轩智能场馆(共6家)</view>
+				<image src="/static/images/icon/arrow_ff.png" mode="aspectFit"></image>
+			</view>
+			<view class="ih-tip">今日总收入</view>
+			<view class="ih-price"><text>¥</text>0.00</view>
+			<view class="ih-amount">
+				<view>
+					<view>收款笔数</view>
+					<view>10</view>
+				</view>
+				<view>
+					<view>收款笔数</view>
+					<view>10</view>
+				</view>
+			</view>
+		</view>
+		<view class="ic-notice">
+			<view class="in-left">
+				<image src="/static/images/icon/index/notice.png" mode="aspectFit"></image>
+				<text>消息中心</text>
+			</view>
+			<view class="in-right">
+				<view>99</view>
+				<image src="/static/images/icon/arrow_b2.png" mode="aspectFit"></image>
+			</view>
+		</view>
+		<view class="ic-tabs">
+			<view class="it-item" v-for="i in 9" :key="i">
+				<image mode="aspectFit" :src="'/static/images/icon/index/tab_'+ (i-1) + '.png'"></image>
+				<view>营业额</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -11,7 +41,7 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+
 			}
 		},
 		onLoad() {
@@ -23,27 +53,146 @@
 	}
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+<style lang="scss" scoped>
+	@import "../../../style/public.scss";
+	.index-container{
+		padding: 24upx 24upx 0;
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin: 200rpx auto 50rpx auto;
+	.ic-header{
+		height: 476upx;
+		margin-bottom: 48upx;
+		padding: 38upx 24upx 0;
+		border-radius: 14upx;
+		background-color: $themeColor;
+		.ih-address{
+			margin-bottom: 26upx;
+			@include centerFlex(center);
+			>view{
+				max-width: 90%;
+				line-height: 50upx;
+				text-align: center;
+				font-size: 36upx;
+				color: #fff;
+				@include textHide(1);
+			}
+			>image{
+				flex-shrink: 0;
+				margin-left: 20upx;
+				width: 28upx;
+				height: 28upx;
+			}
+		}
+		.ih-tip{
+			margin-bottom: 8upx;
+			line-height: 40upx;
+			text-align: center;
+			font-size: 28upx;
+			color: rgba($color: #fff, $alpha: .7);
+		}
+		.ih-price{
+			margin-bottom: 50upx;
+			line-height: 96upx;
+			text-align: center;
+			font-size: 84upx;
+			font-weight: 500;
+			color: #fff;
+			@include textHide(1);
+			>text{
+				line-height: 74upx;
+				font-size: 64upx;
+			}
+		}
+		.ih-amount{
+			@include centerFlex(space-around);
+			>view{
+				>view{
+					&:first-child{
+						margin-bottom: 16upx;
+						line-height: 40upx;
+						text-align: center;
+						font-size: 28upx;
+						color: rgba($color: #fff, $alpha: .7);
+					}
+					&+view{
+						line-height: 56upx;
+						text-align: center;
+						font-size: 40upx;
+						font-weight: 500;
+						color: #fff;
+					}
+				}
+			}
+		}
 	}
+	.ic-notice{
+		margin-bottom: 24upx;
+		padding: 0 24upx;
+		height: 108upx;
+		border-radius: 10upx;
+		background-color: #fff;
+		@include centerFlex(space-between);
+		.in-left{
+			>image{
+				vertical-align: middle;
+				margin-right: 10upx;
+				width: 52upx;
+				height: 50upx;
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+			}
+			>text{
+				font-size: 28upx;
+				line-height: 40upx;
+				color: #1a1a1a;
+			}
+		}
+		.in-right{
+			@include centerFlex(flex-end);
+			>view{
+				margin-right: 14upx;
+				line-height: 50upx;
+				text-align: center;
+				width: 50upx;
+				height: 50upx;
+				line-height: 50upx;
+				font-size: 24upx;
+				border-radius: 50%;
+				color: #fff;
+				background-color: #ea5061;
+				@include textHide(1);
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+			}
+			>image{
+				width: 28upx;
+				height: 28upx;
+
+			}
+		}
+	}
+	.ic-tabs{
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		.it-item{
+			padding-top: 54upx;
+			margin-bottom: 24upx;
+			flex-shrink: 0;
+			flex-grow: 0;
+			width: 218upx;
+			height: 218upx;
+			border-radius: 10upx;
+			background-color: #fff;
+			>image{
+				display: block;
+				margin: 0 auto 20upx;
+				width: 52upx;
+				height: 52upx;
+			}
+			>view{
+				text-align: center;
+				line-height: 40upx;
+				font-size: 28upx;
+				color: #1a1a1a;
+			}
+		}
 	}
 </style>

style/public.scss

@@ -0,0 +1,89 @@
+@charset "utf-8";
+
+$themeColor: #009874;
+
+/*每个页面公共css */
+/* view,scroll-view,text,picker{
+   box-sizing: border-box;
+ } */
+
+@mixin textHide($line) {
+    display: -webkit-box;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp:$line;
+}
+
+@mixin centerFlex($justtify){
+    display: flex;
+    align-items: center;
+    justify-content: $justtify;
+}
+
+@mixin botLine{
+    border-bottom: 2upx solid #e5e5e5;
+}
+
+@mixin picBgc{
+    background-color: #f9f9f9;
+}
+
+
+@mixin closeIcon($width,$height,$color) {
+    transform: rotateZ(45deg);
+    &::before{
+        content: '';
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: $width;
+        height: $height;
+        background-color: $color;
+        border-radius: $height;
+    }
+    &::after{
+        content: '';
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: $height;
+        height: $width;
+        background-color: $color;
+        border-radius: $height;
+    }
+}
+
+@mixin hover {
+    position: relative;
+    overflow: hidden;
+    &::after{
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: rgba(0,0,0,.1);
+    }
+}
+
+@mixin arrowIcon($size,$line,$radius,$angle,$color) {
+    &::after{
+        content:'';
+        display: inline-block;
+        vertical-align: middle;
+        transform: rotateZ($angle);
+        width: $size;
+        height: $size;
+        border-right: $line solid $color;
+        border-bottom: $line solid $color;
+        border-bottom-right-radius: $radius;
+    }
+}