增加首页面

.gitignore

- 
+.DS_Store

.vite/deps/package.json

+{"type":"module"}
\ No newline at end of file

App.vue

@@ -13,5 +13,7 @@
 </script>
 
 <style>
-	/*每个页面公共css */
+	/*每个页面公共css */
+  @import url("lib/colorui/main.css");
+  @import url("lib/colorui/icon.css");
 </style>

README.md

+# 本然ERP
+本然ERP - APP移动解决方案，采用uniapp框架，一份代码多终端适配，同时支持APP、小程序、H5！
+
+
+![](https://img.shields.io/badge/Vue3-orange.svg)
+
+效果预览
+----
+
+![](doc/1.png)
+
+感谢
+----
+- uniApp以及vue
+- colorUI
+- 等等开源贡献者
+
+并感谢开源开发工具：
+
+![](https://img.shields.io/badge/开发工具-HbuilderX-orange.svg)
+![](https://img.shields.io/badge/开发工具-vscode-orange.svg)
\ No newline at end of file

lib/colorui/animation.css

+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
\ No newline at end of file

lib/colorui/components/cu-custom.vue

+<template>
+	<view>
+		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
+			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
+				<view class="action" @tap="BackPage" v-if="isBack">
+					<text class="cuIcon-back"></text>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<view class="action">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background-image:url(${bgImage});`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

manifest.json

 {
-    "name" : "erp_app_vue3",
+    "name" : "本然ERP",
     "appid" : "__UNI__C023901",
     "description" : "",
     "versionName" : "1.0.0",

pages.json

@@ -3,7 +3,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "本然ERP"
 			}
 		}
 	],

pages/index/index.vue

 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
+  <view>
+    <!-- 进销存 -->
+    <view class="cu-bar bg-white solid-bottom margin-top-sm" :style="[{animation: 'show 0.5s 1'}]">
+      <view class="action">
+        <text class='cuIcon-title text-blue'></text>出库入库
+      </view>
+    </view>
+    <view class="cu-list grid col-4 text-sm">
+      <view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
+        v-for="(item,index) in erp_funcs" :key="index" @tap="goPage(item.page)">
+        <view class="text-center">
+          <i :class="item.icon"></i>
+          <view class="">{{item.title}}</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="cu-bar bg-white solid-bottom margin-top-sm" :style="[{animation: 'show 0.5s 1'}]">
+      <view class="action">
+        <text class='cuIcon-title text-blue'></text>仓库管理
+      </view>
+    </view>
+    <view class="cu-list grid col-4 text-sm">
+      <view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
+        v-for="(item,index) in erp_funcs1" :key="index" @tap="goPage(item.page)">
+        <view class="text-center">
+          <i class=" cuIcon-file"></i>
+          <view class="">{{item.title}}</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+  export default {
+    data() {
+      return {
+        erp_funcs: [{
+            title: "出库",
+            icon: "cuIcon-deliver",
+            url: '/pages/erp/chuku'
+          },
+          {
+            title: "入库",
+            icon: "cuIcon-cart",
+            url: '/pages/erp/ruku'
+          },
+        ],
+        erp_funcs1: [{
+            title: "库存",
+            icon: "/static/home/128/qingjia1.png",
+            url: '/pages/erp/goods'
+          },
+          {
+            title: "出库单",
+            icon: "/static/home/128/qingjia1.png",
+            url: '/pages/erp/goods_order?type=chuku'
+          },
+
+          {
+            title: "入库单",
+            icon: "cuIco",
+            url: '/pages/erp/goods_order?type=ruku'
+          },
+
+        ],
+      }
+    },
+    onLoad() {
+
+    },
+    methods: {
+      goPage(page) {
+        if (!page) {
+          return false;
+        }
+        uni.navigateTo({
+          url: page
+        })
+      },
+    }
+  }
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo {
+    height: 200rpx;
+    width: 200rpx;
+    margin-top: 200rpx;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 50rpx;
+  }
+
+  .text-area {
+    display: flex;
+    justify-content: center;
+  }
+
+  .title {
+    font-size: 36rpx;
+    color: #8f8f94;
+  }
 </style>