erp项目首页样式

jshERP-web/package.json

@@ -17,12 +17,14 @@
     "clipboard": "^2.0.4",
     "codemirror": "^5.46.0",
     "dayjs": "^1.8.0",
+    "echarts": "^5.6.0",
     "enquire.js": "^2.1.6",
     "intro.js": "^4.2.2",
     "jquery": "^1.12.4",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
+    "lottie-web": "^5.12.2",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
     "tailwindcss": "^4.0.17",

jshERP-web/src/App.vue

@@ -39,4 +39,8 @@ export default {
 #app {
   height: 100%;
 }
+ul {
+  list-style: none;
+  padding: 0;
+}
 </style>

jshERP-web/src/assets/less/normalCss.less

@@ -0,0 +1,17 @@
+.normal-title {
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+
+.flex-start-center {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

jshERP-web/src/components/layouts/UserLayout.vue

@@ -2,23 +2,42 @@
   <div class="back-layout">
     <div id="userLayout" :class="['user-layout-wrapper', device]">
       <div class="container">
-        <div class="poster-img">
-          <img src="/static/rightImg.png?v=320" />
-        </div>
-        <div class="right-form">
+        <div class="left_con">
           <div class="top">
-            <div class="header">
-              <a-row>
-                <a-col>
-                  <a href="/">
-                    <span class="title">{{ systemTitle }}</span>
-                    <small class="desc">V1.0</small>
-                  </a>
-                </a-col>
-              </a-row>
+            <img class="logo" src="@/assets/image/logo.png" alt="" />
+            <span>进销存管理系统</span>
+          </div>
+          <div class="mid">
+            <div class="desc">
+              <span>提高管理<span class="blue">效率</span> </span>
+              <a-divider style="background-color: #787b80; height: 22px" type="vertical" />
+              <span>优化资源<span class="blue">配置</span></span>
+              <a-divider style="background-color: #787b80; height: 22px" type="vertical" />
+              <span>提高决策<span class="blue">准确性</span></span>
+            </div>
+            <div class="smText">
+              Improve management efficiency, optimize resource allocation, and enhance decision-making accuracy
             </div>
           </div>
-          <route-view></route-view>
+          <div class="animate" id="circle"></div>
+          <!-- <img src="/static/rightImg.png?v=320" /> -->
+        </div>
+        <div class="right_con">
+          <div class="right-form">
+            <div class="top">
+              <div class="header">
+                <a-row>
+                  <a-col>
+                    <a href="/">
+                      <span class="title">欢迎登录</span>
+                      <small class="desc">进销存后台系统</small>
+                    </a>
+                  </a-col>
+                </a-row>
+              </div>
+            </div>
+            <route-view></route-view>
+          </div>
         </div>
       </div>
     </div>
@@ -28,7 +47,8 @@
 <script>
 import RouteView from '@/components/layouts/RouteView'
 import { mixinDevice } from '@/utils/mixin.js'
-
+import animationData from '@/assets/loginData.json'
+import lottie from 'lottie-web'
 export default {
   name: 'UserLayout',
   components: { RouteView },
@@ -45,6 +65,15 @@ export default {
   },
   mounted() {
     document.body.classList.add('userLayout')
+    const params = {
+      container: document.getElementById('circle'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: animationData,
+    }
+
+    this.anim = lottie.loadAnimation(params)
   },
   beforeDestroy() {
     document.body.classList.remove('userLayout')
@@ -80,15 +109,72 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .back-layout {
-  width: 100%;
-  height: 100%;
-  background-image: url(/static/bgimg.png?v=1);
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: relative;
-  overflow: hidden;
+  height: 100vh;
+
+  .container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+    .left_con {
+      width: 900px;
+      height: 100vh;
+      background: url(../../assets//image/left_bg.png) no-repeat;
+      background-size: 100% 100%;
+
+      .top {
+        font-size: 24px;
+        color: #172b4d;
+        font-weight: 600;
+        margin: 102px 0 36px 171px;
+        .logo {
+          width: 58px;
+          height: 48px;
+        }
+      }
+      .mid {
+        margin-left: 171px;
+        .desc {
+          font-size: 28px;
+          font-weight: 700;
+          color: #172b4d;
+          font-family: Alimama ShuHeiTi;
+          .blue {
+            color: #0252ce;
+          }
+        }
+        .smText {
+          color: #787b80;
+          font-size: 11px;
+          font-family: Actor;
+        }
+      }
+
+      .animate {
+        width: 100%;
+        height: 95%;
+        margin-top: -100px;
+        margin-left: -100px;
+      }
+    }
+    .right_con {
+      background: url(../../assets//image/right_bg.png) no-repeat;
+      background-size: 100% 100%;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  // width: 100%;
+  // height: 100%;
+  // background-image: url(/static/bgimg.png?v=1);
+  // background-size: cover;
+  // background-repeat: no-repeat;
+  // position: relative;
+  // overflow: hidden;
 }
 #userLayout.user-layout-wrapper.mobile {
   position: fixed;
@@ -118,11 +204,11 @@ export default {
 </style>
 <style lang="less" scoped>
 #userLayout.user-layout-wrapper {
-  position: fixed;
-  left: 50%;
-  top: 12%;
-  margin-left: -543px;
-  height: 100%;
+  // position: fixed;
+  // left: 50%;
+  // top: 12%;
+  // margin-left: -543px;
+  // height: 100%;
 
   &.mobile {
     .container {
@@ -131,7 +217,7 @@ export default {
         width: 98%;
       }
     }
-    .poster-img {
+    .left_con {
       display: none;
     }
   }
@@ -149,18 +235,19 @@ export default {
 
     .right-form {
       background-size: 100%;
-      position: relative;
-      width: 340px;
-      height: 460px;
+      width: 459px;
+      height: 502px;
       background: rgba(255, 255, 255, 1);
       border-radius: 8px;
-      right: 0;
-      top: 0;
-      padding: 10px 30px 0 30px;
-      margin-top: 50px;
+      // padding: 10px 30px 0 30px;
+      // margin-top: 50px;
       -webkit-box-shadow: 0 2px 6px 0 rgb(200 200 200);
       box-shadow: 0 2px 6px 0 rgb(200 200 200);
-      overflow: hidden;
+      // top: 0;
+      // bottom: 0;
+      // left: 0;
+      // right: 0;
+      // margin: auto;
 
       a {
         text-decoration: none;
@@ -175,20 +262,17 @@ export default {
           margin-top: 35px;
           margin-bottom: 35px;
           .title {
-            font-size: 35px;
-            color: #666;
-            font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
-              'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-              'Segoe UI Emoji', 'Segoe UI Symbol';
-            font-weight: 700;
+            font-size: 32px;
+            color: #333;
+            font-weight: 600;
             position: relative;
             top: 2px;
           }
           .desc {
-            font-size: 16px;
-            color: #666;
+            font-size: 18px;
+            color: #adb5bd;
             margin-top: 12px;
-            margin-left: 10px;
+            margin-left: 19px;
             margin-bottom: 40px;
           }
         }

jshERP-web/src/main.js

@@ -17,6 +17,7 @@ import Print from 'vue-print-nb-jeecg'
 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
 import 'intro.js/introjs.css'
+import '@/assets/less/normalCss.less' // global css
 import {
   ACCESS_TOKEN,
   DEFAULT_COLOR,
@@ -37,6 +38,7 @@ import vueBus from '@/utils/vueBus'
 import JeecgComponents from '@/components/jeecg/index'
 import '@/assets/less/JAreaLinkage.less'
 import VueAreaLinkage from 'vue-area-linkage'
+import * as echarts from 'echarts'
 
 // vxe-table
 import VxeUIAll from 'vxe-pc-ui'
@@ -44,6 +46,8 @@ import 'vxe-pc-ui/lib/style.css'
 import VxeUITable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 
+Vue.prototype.$echarts = echarts
+
 Vue.use(VxeUIAll)
 Vue.use(VxeUITable)
 

jshERP-web/src/mixins/newMixin.js

@@ -0,0 +1,12 @@
+const mixinPage = {
+  data() {
+    return {}
+  },
+  computed: {
+    backgroundImage() {
+      return require(`@/assets/image/${this.imageName}.png`)
+    },
+  },
+}
+
+export { mixinPage }

jshERP-web/src/views/dashboard/Analysis.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="margin: 12px 12px 0px">
-    <index-chart></index-chart>
+    <!-- <index-chart></index-chart> -->
+    <content-block></content-block>
     <sys-tip-modal ref="sysTipModal"></sys-tip-modal>
   </div>
 </template>
@@ -9,6 +10,7 @@
 import IndexChart from './IndexChart'
 import SysTipModal from './dialog/SysTipModal.vue'
 import { getMaterialWarn } from '@/api/api.js'
+import ContentBlock from './components/contentBlock.vue'
 
 let isFirst = true
 export default {
@@ -16,34 +18,33 @@ export default {
   components: {
     IndexChart,
     SysTipModal,
+    ContentBlock,
   },
   data() {
     return {
-      warnData: {}
+      warnData: {},
     }
   },
   created() {
-    if(isFirst){
+    if (isFirst) {
       this.getWarnData()
     }
   },
   methods: {
-    getWarnData(){
+    getWarnData() {
       isFirst = false
       const hasArrayData = (val) => {
         return Array.isArray(val) && val.length > 0
       }
-      getMaterialWarn().then(res => {
-        const {expirationReminder = [],inventoryReminder = [],noMovingPinReminder = []} = res.data
-        if(hasArrayData(expirationReminder)||hasArrayData(inventoryReminder)||hasArrayData(noMovingPinReminder)){
+      getMaterialWarn().then((res) => {
+        const { expirationReminder = [], inventoryReminder = [], noMovingPinReminder = [] } = res.data
+        if (hasArrayData(expirationReminder) || hasArrayData(inventoryReminder) || hasArrayData(noMovingPinReminder)) {
           this.$nextTick(() => {
-            this.$refs.sysTipModal.open(
-              {
-                expirationReminder,
-                inventoryReminder,
-                noMovingPinReminder
-              }
-            )
+            this.$refs.sysTipModal.open({
+              expirationReminder,
+              inventoryReminder,
+              noMovingPinReminder,
+            })
           })
         }
       })

jshERP-web/src/views/dashboard/components/circleCard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="circleCcard">
+    <div class="normal-title">采购商品分类占比</div>
+    <div class="circleBox">
+      <div style="width: 100%; height: 100%" ref="main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          icon: 'circle',
+          //   top: '5%',
+          left: 'center',
+          bottom: 0,
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 5,
+
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '电器 38420' },
+              { value: 735, name: '服饰鞋类 38420' },
+              { value: 580, name: '生活用品 38420' },
+              { value: 484, name: '美妆护肤 38420' },
+              { value: 300, name: '食品 38420' },
+            ],
+          },
+        ],
+      },
+    }
+  },
+  mounted() {
+    let chartDom = this.$refs.main
+    let myChart = this.$echarts.init(chartDom)
+    this.option && myChart.setOption(this.option)
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.circleCcard {
+  background: #fff;
+  height: 340px;
+  padding: 16px;
+  box-sizing: border-box;
+  .circleBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 80%;
+  }
+}
+</style>

jshERP-web/src/views/dashboard/components/contentBlock.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="contentBlock">
+    <a-row type="flex" :gutter="16">
+      <a-col v-for="item in 4" :key="item" :lg="6" :md="6" :sm="12">
+        <normal-card></normal-card>
+      </a-col>
+    </a-row>
+    <a-row type="flex" :gutter="16">
+      <a-col style="width: 20%" v-for="item in 5" :key="item" :lg="4" :md="6" :sm="12">
+        <normal-card></normal-card>
+      </a-col>
+    </a-row>
+    <a-row type="flex" :gutter="16">
+      <a-col :lg="18" :md="18" :sm="12">
+        <div class="toobBox">
+          <quick-tools></quick-tools>
+        </div>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <circle-card></circle-card>
+          </a-col>
+          <a-col :span="12">
+            <circle-card></circle-card>
+          </a-col>
+        </a-row>
+      </a-col>
+      <a-col :lg="6" :md="6" :sm="12">
+        <div>
+          <todo-list></todo-list>
+        </div>
+        <div>
+          <early-info></early-info>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24"> </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import CircleCard from './circleCard.vue'
+import EarlyInfo from './earlyInfo.vue'
+import normalCard from './normalCard.vue'
+import QuickTools from './quickTools.vue'
+import TodoList from './todoList.vue'
+export default {
+  components: { normalCard, QuickTools, TodoList, CircleCard, EarlyInfo },
+}
+</script>
+
+<style lang="less" scoped>
+.contentBlock {
+  .toobBox {
+    height: 143px;
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+  }
+}
+</style>

jshERP-web/src/views/dashboard/components/earlyInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="earlyInfo">
+    <div class="normal-title">预警信息</div>
+    <a-row :gutter="16" type="flex" justify="space-between">
+      <a-col class="items flex-center" v-for="item in 4" :span="12" :key="item">
+        <span>15</span>
+        <span>最低安全库存数量</span>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.earlyInfo {
+  height: 227px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  .items {
+    flex-direction: column;
+    margin-bottom: 16px;
+    span {
+      color: #666666;
+      font-size: 14px;
+      &:first-child {
+        font-size: 24px;
+        color: #df3845;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

jshERP-web/src/views/dashboard/components/normalCard.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="normalCard" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }" class="normalCard">
+    <ul class="left">
+      <li class="top">
+        <span class="title">今日销售</span>
+        <img src="@/assets/image/question.png" alt="" />
+      </li>
+      <li class="mid">1023</li>
+      <li class="bot">昨日：2333</li>
+    </ul>
+    <img class="right" src="@/assets/image/hicon1.png" alt="" />
+  </div>
+</template>
+
+<script>
+import { mixinPage } from '@/mixins/newMixin'
+
+export default {
+  mixins: [mixinPage],
+  name: 'NormalCard',
+  props: {
+    imageName: {
+      type: String,
+      default: 'cardBg',
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.normalCard {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  background-size: 100% 100%;
+  border-radius: 8px;
+  background-position: center;
+  height: 116px;
+
+  .top {
+    color: #505968;
+    font-size: 16px;
+    .title {
+      margin-right: 2px;
+    }
+    img {
+      height: 16px;
+      width: 16px;
+    }
+  }
+  .mid {
+    color: #333333;
+    font-weight: 700;
+    font-size: 32px;
+  }
+  .bot {
+    font-size: 14px;
+    color: #505968;
+  }
+  .right {
+    width: 90px;
+    height: 86px;
+  }
+}
+</style>

jshERP-web/src/views/dashboard/components/quickTools.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="quickTools">
+    <div class="normal-title">快捷功能</div>
+    <ul class="tools">
+      <li v-for="item in 5" :key="item">
+        <img :src="backgroundImage" alt="" />
+        <div>仓库管理</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mixinPage } from '@/mixins/newMixin.js'
+
+export default {
+  mixins: [mixinPage],
+  props: {
+    imageName: {
+      type: String,
+      default: 'profile1',
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.quickTools {
+  color: #333333;
+  box-sizing: border-box;
+
+  .tools {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 28px;
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 12px;
+      img {
+        height: 48px;
+        width: 48px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+</style>

jshERP-web/src/views/dashboard/components/todoList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="todoList">
+    <div class="normal-title">待办事项</div>
+    <ul class="todoBox">
+      <li v-for="item in 4" :key="item">
+        <div class="left flex-start-center">
+          <img :src="backgroundImage" alt="" />
+          <span>待处理入库</span>
+        </div>
+        <div class="right flex-start-center">
+          <span>3</span>
+          <img src="@/assets/image/rightArrow.png" alt="" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mixinPage } from '@/mixins/newMixin.js'
+
+export default {
+  mixins: [mixinPage],
+  props: {
+    imageName: {
+      type: String,
+      default: 'icon1',
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.todoList {
+  color: #000000;
+  font-weight: bold;
+  font-size: 14px;
+  background: #fff;
+  height: 254px;
+  border-radius: 8px;
+  padding: 16px;
+  box-sizing: border-box;
+  .todoBox {
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+  }
+  .left {
+    img {
+      height: 32px;
+      width: 32px;
+      margin-right: 5px;
+    }
+  }
+  .right {
+    img {
+      width: 12px;
+      height: 12px;
+      margin-right: 8px;
+    }
+  }
+}
+</style>

jshERP-web/src/views/user/Login.vue

@@ -8,6 +8,8 @@
           v-decorator="['loginName', { initialValue: '', rules: validatorRules.loginName.rules }]"
           type="text"
           placeholder="请输入用户名"
+          allowClear
+          style="width: 323px"
         >
           <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
         </a-input>
@@ -20,13 +22,14 @@
           type="password"
           autocomplete="false"
           placeholder="请输入密码"
+          style="width: 323px"
         >
           <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
         </a-input-password>
       </a-form-item>
 
       <a-row :gutter="0">
-        <a-col :span="14">
+        <a-col :span="18">
           <a-form-item>
             <a-input
               v-decorator="['inputCode', { initialValue: '', rules: validatorRules.inputCode.rules }]"
@@ -39,7 +42,7 @@
             </a-input>
           </a-form-item>
         </a-col>
-        <a-col :span="10" style="text-align: right">
+        <a-col :span="6" style="text-align: right">
           <img v-if="requestCodeSuccess" style="margin-top: 2px" :src="randCodeImage" @click="handleChangeCheckCode" />
           <img v-else style="margin-top: 2px" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
         </a-col>