20231110

src/App.vue

@@ -2,16 +2,22 @@
   <router-view/>
 </template>
 <style lang="scss">
+@import url('@/assets/css/scrolls.css');
+@import url('@/assets/css/font.css');
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
+  height: 100%;
+
 }
 body,html{
-  background: url('@/assets/img/bg.jpg') no-repeat top center;
-  background-size: 100%;
+  height: 100%;
+  background: linear-gradient( #d7e4f4,#afd1fe);
+  // linear-gradient(to bottom #d7e4f4,#afd1fe)
+  // background: url('@/assets/img/bg-5.jpg') no-repeat bottom center;
+  // background-size:cover;
 }
 *{
   margin: 0;

src/assets/css/font.css

@@ -0,0 +1,41 @@
+/* 数字 */
+@font-face {
+	font-family: 'fontLED';
+	src: url('../font/UnidreamLED.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+/* 中文 */
+@font-face {
+	font-family: 'fontLogo';
+	src: url('../font/Logo.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: 'fontLED1';
+	src: url('../font/1639093199705607.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: 'douyuzhuiguangti';
+	src: url('../font/douyuzhuiguangti.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+/* 英文 */
+@font-face {
+	font-family: 'fontLED2';
+	src: url('../font/1640748942940454.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: 'fontLED3';
+	src: url('../font/1645487823772202.otf');
+	font-weight: normal;
+	font-style: normal;
+}

src/assets/css/login.scss

@@ -0,0 +1,32 @@
+.login {
+    height: 100%;
+    backdrop-filter: blur(20px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url('@/assets/img/bg.png') no-repeat bottom center;
+    background-size: cover;
+    &-main {
+        min-width: 40px;
+        min-height: 400px;
+        margin-left: 50%;
+        background: #fff;
+        border-radius: 10px;
+        display: flex;
+        box-shadow: 0 0 20px 0px rgba(12, 1, 4, 0.1);
+        &-left {
+            flex: 1;
+            flex-shrink: 0;
+            background: url('@/assets/img/login-bg.png') no-repeat center center;
+            background-size: 80%;
+        }
+
+        &-right {
+            flex: 1;
+            padding: 20px 50px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+}

src/assets/css/scrolls.css

@@ -0,0 +1,21 @@
+/***滚动条样式**/
+
+/*滚动条整体部分*/ 
+
+::-webkit-scrollbar { width: .5px; height: 10px; }
+
+ /*滚动条的轨道*/ 
+
+::-webkit-scrollbar-track { background: #f9fafb; } 
+
+/*滚动条里面的小方块，能向上向下移动*/ 
+
+::-webkit-scrollbar-thumb { border-radius: 5px; background: #d3d4d5; } 
+
+::-webkit-scrollbar-thumb:hover {  } 
+
+::-webkit-scrollbar-thumb:active {  } 
+
+/*边角，即两个滚动条的交汇处*/ 
+
+::-webkit-scrollbar-corner { background-color: #ffffff; }

src/assets/style/self.scss

@@ -0,0 +1,5 @@
+$brandColor:#147DE2;     // 品牌主色
+$contentTxtColor:#888;   // 主体内容文字色
+$mainH1Fsize:32px;         // 大标题字号
+$contentFsize:14px;        // 主体内容字号
+

src/components/HelloWorld.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="hello">
-    <el-button>Default</el-button>
-    <el-button type="primary">Primary</el-button>
-    <el-button type="success">Success</el-button>
-    <el-button type="info">Info</el-button>
-    <el-button type="warning">Warning</el-button>
-    <el-button type="danger">Danger</el-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { login } from "@/api/index";
-  login({}).then(res=>{
-
-  })
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/logo.vue

@@ -0,0 +1,22 @@
+<!-- logo -->
+<template>
+    <div class="logos">
+        <!-- <img style="height: 50px;width: 50px;" src="@/assets/img/logo3.png" alt="Element logo" /> -->
+        <p class="logos-text">深圳宝智达科技</p>
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+.logos {
+    display: flex;
+    align-items: center;
+
+    &-text {
+        font-family: douyuzhuiguangti;
+        color: #409eff;
+        margin-top: 5px;
+    }
+}
+</style>

src/components/routerMenu.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-menu :default-active="router.options.history.location" mode="horizontal" :ellipsis="false" router>
+    <el-menu-item :index="item.path" v-for="item,index in routerData" :key="index">
+      <span>{{item.meta.title}}</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+import { ref } from 'vue'
+
+let router = useRouter()
+
+const routerData:any = ref([])
+routerData.value = router.options.routes[0].children
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/main.ts

@@ -6,12 +6,14 @@ import store from './store'
 const app = createApp(App)
 
 import 'element-plus/theme-chalk/index.css'  // 引入组件样式
+import ElementPlus from 'element-plus'
+app.use(ElementPlus)
 
+// import {elementList} from "@/plugins/elementData";
+// for (const key of elementList) {
+//     app.component(key.name, key)
+// }
 
-import {elementList} from "@/plugins/elementData";
-for (const key of elementList) {
-    app.component(key.name, key)
-}
 
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 全部引入 Icon 图标 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {// 全部引入 Icon 图标 ，并注册iocn图标

src/plugins/elementData.ts

@@ -1,4 +1,4 @@
 
-import { ElButton, ElForm, ElFormItem, ElInput, ElRadio } from 'element-plus';   // 按需引入组件
+import { ElButton, ElForm, ElFormItem, ElInput, ElRadio,ElText,ElCheckbox,ElMenu} from 'element-plus';   // 按需引入组件
 
-export const elementList:any = [ElButton, ElForm, ElFormItem, ElInput, ElRadio]
+export const elementList:any = [ElButton, ElForm, ElFormItem, ElInput, ElRadio,ElText,ElCheckbox,ElMenu]

src/router/index.ts

@@ -1,33 +1,33 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import {dynamicRoutes} from "./module/dynamicRoutes";
-import {globalRoutes} from "./module/globalRoutes";
+import { dynamicRoutes } from "./module/dynamicRoutes";
+import { globalRoutes } from "./module/globalRoutes";
 
 import { useStore } from 'vuex'
 
 const routes: Array<RouteRecordRaw> = [
-  ...dynamicRoutes,
-  ...globalRoutes
+	...dynamicRoutes,
+	...globalRoutes
 ]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
+	history: createWebHistory(process.env.BASE_URL),
+	routes
 })
 
 /**
  * 设置标题
  */
 router.afterEach((to, from) => {
-  document.title = '复诊系统 - ' + to.meta.title;
+	document.title = '宝智达科技 - ' + to.meta.title;
 })
 
 
-router.beforeEach((to,from,next)=>{
+router.beforeEach((to, from, next) => {
 	const store = useStore()
-  const token = 1
-	if(token){
+	const token = 1
+	if (token) {
 		next()
-	}else{
+	} else {
 		//如果是登录页面路径，就直接next()
 		if (to.path === '/') {
 			next();

src/router/module/dynamicRoutes.ts

@@ -3,7 +3,7 @@ export const dynamicRoutes = [{
     path: '/layout',
     name: 'layout',
     component: layout,
-    // redirect: '/home',
+    redirect: '/home',
     children: [{
         path: '/home',
         name: 'home', 
@@ -11,7 +11,61 @@ export const dynamicRoutes = [{
         component: () => import('@/views/home/index.vue'),
         meta: {
             roles:false,
-            title: '首页',
+            title: '系统首页',
+        },
+    },{
+        path: '/storageInquire',
+        name: 'storageInquire', 
+        icon: "icon-zhuye1",
+        component: () => import('@/views/storageInquire/index.vue'),
+        meta: {
+            roles:false,
+            title: '库存查询',
+        },
+    },{
+        path: '/storagePut',
+        name: 'storagePut', 
+        icon: "icon-zhuye1",
+        component: () => import('@/views/storagePut/index.vue'),
+        meta: {
+            roles:false,
+            title: '入库管理',
+        },
+    },{
+        path: '/storageFrom',
+        name: 'storageFrom', 
+        icon: "icon-zhuye1",
+        component: () => import('@/views/storageFrom/index.vue'),
+        meta: {
+            roles:false,
+            title: '出库管理',
+        },
+    },{
+        path: '/sellManage',
+        name: 'sellManage', 
+        icon: "icon-zhuye1",
+        component: () => import('@/views/sellManage/index.vue'),
+        meta: {
+            roles:false,
+            title: '销售管理',
+        },
+    },{
+        path: '/storageOrderGoods',
+        name: 'storageOrderGoods', 
+        icon: "icon-zhuye1",
+        component: () => import('@/views/storageOrderGoods/index.vue'),
+        meta: {
+            roles:false,
+            title: '销售订单',
+        },
+    },{
+        path: '/personalInfo',
+        name: 'personalInfo', 
+        icon: "icon-zhuye1",
+        component: () => import('@/views/personalInfo/index.vue'),
+        meta: {
+            roles:false,
+            title: '基本信息',
         },
     }]
 }]

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-    <div class="">
+    <div class="home">
         首页
     </div>
 </template>
@@ -9,5 +9,7 @@
 </script>
 <style lang="scss">
 /* @import url(); 引入css类 */
-
+.home{
+    // background: red;
+}
 </style>

src/views/layout/index.vue

@@ -1,10 +1,10 @@
 <!--  -->
 <template>
     <div class="layout">
-        <div style="flex: 1;">
+        <menus class="menus" style=""></menus>
+        <div style="flex: 1;margin-bottom: 150px;">
             <router-view></router-view>
         </div>
-        <menus></menus>
     </div>
 </template>
 <script setup lang="ts">
@@ -14,7 +14,5 @@
 /* @import url(); 引入css类 */
 .layout{
     height: 100vh;
-    display: flex;
-    flex-direction: column;
 }
 </style>

src/views/layout/menu.vue

@@ -1,51 +1,32 @@
-<!--  -->
 <template>
     <div class="menus">
-        <div class="menus-main">
-            <div class="menus-main-img">
-                <img src="@/assets/img/icon-1.png" style="width: 100%;height: 100%;">
-            </div>
-            <div class="menus-main-img">
-                <img src="@/assets/img/icon-2.png" style="width: 100%;height: 100%;">
-            </div>
-            <div class="menus-main-img">
-                <img src="@/assets/img/icon-3.png" style="width: 100%;height: 100%;">
-            </div>
-            <div class="menus-main-img">
-                <img src="@/assets/img/icon-4.png" style="width: 100%;height: 100%;">
-            </div>
-            <div class="menus-main-img">
-                <img src="@/assets/img/icon-5.png" style="width: 100%;height: 100%;">
-            </div>
+        <logo></logo>
+        <div class=" el-menu-main">
+            <routerMenu></routerMenu>
+        </div>
+        <div>
+            <el-icon><FullScreen /></el-icon>
         </div>
     </div>
 </template>
+  
+<script lang="ts" setup>
+import routerMenu from "@/components/routerMenu.vue";
+import logo from "@/components/logo.vue";
 
-<script setup lang="ts">
 </script>
-<style lang="scss">
-/* @import url(); 引入css类 */
+  
+<style>
 .menus{
-    height: 80px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-    &-main{
-        min-width: 40%;
-        height: 100%;
-        background: rgba(#fff, 0.2);
-        border-radius: 20px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        &-img{
-            width: 60px;
-            height: 60px;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 1px 1px 0 #000;
-        }
+    padding: 0 20px;
+    background: #fff;
+    user-select: none;
+    .el-menu-main{
+        flex: 1;
     }
 }
-</style>
+</style>
+  

src/views/login/index.vue

@@ -1,13 +1,47 @@
-<!--  -->
 <template>
-    <div class="">
-        <router-link to="/layout">登录</router-link>
+    <div class="login">
+        <div class="login-main">
+            <!-- <div class="login-main-left"></div> -->
+            <div class="login-main-right">
+                <div style="margin-bottom: 40px;">
+                    <el-text tag="b" style="font-size: 20px;">宝智达药品出入库管理平台</el-text>
+                    <el-text tag="p">Warehouse management platform</el-text>
+                </div>
+                <el-form :model="formLabelAlign">
+                    <el-form-item>
+                        <el-input v-model="formLabelAlign.name" prefix-icon="Key" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-input v-model="formLabelAlign.region" prefix-icon="Unlock" type="password" show-password />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-checkbox-group v-model="formLabelAlign.type">
+                            <el-checkbox label="记住密码" name="type" />
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" style="width: 100%;" @click="submitForm()">
+                            登录
+                        </el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import router from "@/router";
+import { reactive } from "vue";
+const formLabelAlign = reactive({
+    name: '',
+    region: '',
+    type: []
+})
+const submitForm = async () => {
+    router.push('/home')
+}
 </script>
 <style lang="scss">
-/* @import url(); 引入css类 */
-
+@import '@/assets/css/login.scss'
 </style>

src/views/personalInfo/index.vue

@@ -0,0 +1,13 @@
+<!--  -->
+<template>
+    <div class="">
+        个人信息
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/sellManage/index.vue

@@ -0,0 +1,13 @@
+<!--  -->
+<template>
+    <div class="">
+        销售管理
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/storageFrom/index.vue

@@ -0,0 +1,13 @@
+<!--  -->
+<template>
+    <div class="">
+        疫苗出库
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/storageInquire/index.vue

@@ -0,0 +1,13 @@
+<!--  -->
+<template>
+    <div class="">
+        库存查询
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/storageOrderGoods/index.vue

@@ -0,0 +1,13 @@
+<!--  -->
+<template>
+    <div class="">
+        销售订单
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/storagePut/index.vue

@@ -0,0 +1,13 @@
+<!--  -->
+<template>
+    <div class="">
+        疫苗入库
+    </div>
+</template>
+
+<script setup>
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

vue.config.js

@@ -1,6 +1,15 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-	transpileDependencies: true
+	transpileDependencies: true,
+	// css:{	
+	// 	preprocessorOptions: {
+	// 		// 全局样式引入
+	// 		scss:{
+	// 			additionalData: '@import "./src/assets/styles/self.scss";',
+    //       		javascriptEnabled: true
+	// 		}
+	// 	},
+	// }
 })
 module.exports = {
 	lintOnSave: false, //关闭eslint验证
@@ -17,5 +26,6 @@ module.exports = {
 				}
 			}
 		}
-	}
+	},
+	
 }