2023-6-27

src/App.vue

@@ -21,4 +21,18 @@
   height: 100%;
   width: 100%;
 }
+@font-face {
+  font-family: 'iconfont';  /* Project id 4102028 */
+  src: url('//at.alicdn.com/t/c/font_4102028_lfautcw6p4a.woff2?t=1687834420731') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4102028_lfautcw6p4a.woff?t=1687834420731') format('woff'),
+       url('//at.alicdn.com/t/c/font_4102028_lfautcw6p4a.ttf?t=1687834420731') format('truetype');
+}
+.iconfont{
+  font-family:"iconfont" !important;
+  color: #ffffff;
+  font-size:16px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
 </style>

src/components/detailTemplate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="margin-top:10px;">
-    <a-card class="mt-10" :headStyle="{padding:'0 10px'}" :bodyStyle="{padding:'20px'}" :bordered="false">
+    <a-card class="mt-10" :headStyle="{padding:'0 10px'}" :bodyStyle="{padding:'10px 16px'}" :bordered="false">
       <template #title>
         <div class="flex-between">
           <a-space>
@@ -27,7 +27,7 @@
           </div>
         </div>
       </template>
-      <a-descriptions :column="6" :labelStyle="{color:'#666'}" :contentStyle="{marginRight:'20px',marginBottom:'5px'}"  size="small">
+      <a-descriptions :column="6" :labelStyle="{color:'#999999'}" :contentStyle="{marginRight:'20px',marginBottom:'5px'}"  size="small">
         <a-descriptions-item :span="item.span ? item.span : 1"  v-for="item in props.headData" :key="item.index" :label="item.label"><span :style="item.style?item.style():''">{{item.value}}</span></a-descriptions-item>
       </a-descriptions>
     </a-card>

src/components/listTemplate/field/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <!-- :label-col="{ span: 6 }" 
+  :wrapper-col="{ span: 18 }" -->
   <div class="fieldPanel">
     <a-card :bodyStyle="{padding:'20px 10px 0 10px'}">
       <!-- <template #title>筛选</template> -->
@@ -6,8 +8,7 @@
         ref="formRef"
         name="advanced_search"
         class="ant-advanced-search-form"
-        :label-col="{ span: 6 }" 
-        :wrapper-col="{ span: 18 }"
+        labelAlign="left"
         :model="formState"
         @finish="onFinish">
           <a-row :gutter="16">

src/components/listTemplate/index.vue

@@ -32,7 +32,7 @@
       </template>
       <template #extra>
       </template>
-      <a-table class="ant-table-striped" :loading="loading" size="small" :dataSource="dataSource" :columns="columns" :pagination="{showSizeChanger:true,defaultPageSize:20,total:total}" :scroll="{x:'max-content'}" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" @change="onChange">
+      <a-table bordered class="ant-table-striped" :loading="loading" size="small" :dataSource="dataSource" :columns="columns" :pagination="{showSizeChanger:true,defaultPageSize:20,total:total}" :scroll="{x:'max-content'}" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" @change="onChange">
         <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex === 'status'">
             <a-tag :color="utils.statusAndColor(record.status)">{{record.status}}</a-tag>

src/components/selectModel/index.vue

@@ -23,7 +23,7 @@
 </template>
 <script setup>
 import normalTable from '@/template/normalTable/index.vue'
-import {ref, defineProps, defineEmits} from 'vue'
+import {ref, defineProps, defineEmits, watch} from 'vue'
 import Api from '@/api/api'
 import utils from '@/utils/utils'
 
@@ -43,6 +43,10 @@ let submit = () => {
   emit('selectRowData',list.value.tableRecord)
 }
 
+watch(() => modeVisible.value,(val,preval) => {
+  if (!val) list.value.reloadSelect()
+})
+
 let closeFun = () => {
   emit('close')
 }

src/operation/moduleNormal/controlPanel/modules/myInput.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="my-input">
+    <div class="label">测试啊啊</div>
+    <div class="input">
+      <a-input v-bind="$attrs" style="background: none;border: none;padding: 0;"></a-input>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, defineProps, defineEmits} from 'vue'
+let emit = defineEmits([])
+let props = defineProps({})
+</script>
+
+<style scoped>
+.my-input {
+  display: flex;
+  line-height: 32px;
+}
+.label {
+  font-size: 12px;
+  color: #ffffff;
+  background: rgb(255, 225, 255,.25);
+  padding: 0 10px;
+  flex: 1;
+}
+.input {
+  font-size: 12px;
+  color:#16FFF6;
+  background: rgb(255, 225, 255,.10);
+  padding: 0 10px;
+  flex: 2.5;
+}
+/deep/ input {
+  text-align: right;
+  color: #ffffff;
+}
+</style>

src/operation/moduleNormal/controlPanel/modules/timeControl.vue

@@ -4,6 +4,7 @@
     <slot name="headerRight"></slot>
   </div>
   <div class="info">
+    <MyInput></MyInput>
     <div class="info-item">
       <div class="title">时间段1</div>
       <div class="info-item_item">
@@ -141,6 +142,7 @@
 </template>
 
 <script setup>
+import MyInput from './myInput.vue'
 import {ref, defineProps, defineEmits} from 'vue'
 import Api from '@/api/api'
 import utils from '@/utils/utils'

src/template/defaultInfo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-descriptions :column="6" :labelStyle="{color:'#666',width:'150px'}" :contentStyle="{marginRight:'20px',marginBottom:'5px'}"  size="small" bordered>
+  <a-descriptions :column="4" :labelStyle="{color:'#666',width:'150px'}" :contentStyle="{marginRight:'20px',marginBottom:'5px'}"  size="small" bordered>
     <a-descriptions-item :span="item.span ? item.span : 1"  v-for="item in props.data" :key="item.index" :label="item.label"><span :style="item.style?item.style():''">{{item.value || '--'}}</span></a-descriptions-item>
   </a-descriptions>
 </template>

src/views/login/login.vue

@@ -2,9 +2,14 @@
 <div class="conatiner">
     <!-- <p class="introduce">楚楚E-订单系统&nbsp;<small>是一个便捷、高效的供应链管理软件。我们的系统为您提供基于云端的物流和供应链、库存管理、产品管理等功能，让订货变得无比简单。通过本系统，您可以随时下单或查看订单状态，轻松跟踪进度并且及时调整采购计划。</small></p> -->
     <div class="login-form">
-      <p class="color-info">欢迎登录</p>
-      <div>
-        <p class="title">班尼戈水务管理</p>
+      <!-- <p class="color-info">欢迎登录</p> -->
+      <div style="text-align: center;">
+        <div style="display: inline-block;">
+          <p class="title">
+            <span style="font-weight: 600;font-size: 3rem;margin-right: 10px;">CB</span>
+            班尼戈
+          </p>
+        </div>
       </div>
       <a-form
         :model="formState"
@@ -14,49 +19,101 @@
         @finish="onFinish"
         @finishFailed="onFinishFailed"
       >
-        <a-form-item
-          label="账号"
-          name="phonenumber"
-          :rules="[{ required: true, message: '请输入账号' }]"
-        >
-          <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号"/>
-        </a-form-item>
-
-        <a-form-item
-          label="密码"
-          name="password"
-          :rules="[{ required: true, message: '请输入密码!' }]"
-        >
-          <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
-        </a-form-item>
-
-        <a-form-item name="remember">
-          <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
-        </a-form-item>
-
-        <a-form-item>
-          <a-button :loading="loading" type="primary" html-type="submit" size="large" block>登录</a-button>
-        </a-form-item>
+        <!--账号登录-->
+        <div :style="{display: loginWrp == 'account' ? 'block' : 'none'}">
+          <a-form-item
+            name="phonenumber"
+            :rules="[{ required: true, message: '请输入账号' }]"
+            style="margin-bottom: 32px;"
+          >
+            <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号">
+              <template #prefix>
+                <i class="iconfont" style="margin-right: 4px;">&#xe6a5;</i>
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item
+            name="password"
+            :rules="[{ required: true, message: '请输入密码!' }]"
+          >
+            <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码">
+            <template #prefix>
+              <i class="iconfont" style="margin-right: 4px;">&#xe6a4;</i>
+            </template>
+          </a-input-password>
+          </a-form-item>
+
+          <a-form-item name="remember">
+            <div style="display: flex;justify-content: space-between;align-items: center;">
+              <a-checkbox v-model:checked="formState.remember"><span style="color:#ffffff">记住密码</span></a-checkbox>
+              <a-button type="link" style="color: #ffffff !important;">忘记密码?</a-button>
+            </div>
+          </a-form-item>
+
+          <a-form-item>
+            <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;" html-type="submit" size="large" block>登录</a-button>
+          </a-form-item>
+        </div>
+        <!--手机号登录-->
+        <div :style="{display: loginWrp == 'phone' ? 'block' : 'none'}">
+          <a-form-item
+            name="phonenumber"
+            :rules="[{ required: true, message: '请输入手机号' }]"
+            style="margin-bottom: 32px;"
+          >
+            <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入手机号">
+              <template #prefix>
+                <i class="iconfont" style="margin-right: 4px;">&#xe6a0;</i>
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item
+            name="password"
+            :rules="[{ required: true, message: '请输入验证码!' }]"
+          >
+            <div style="display:flex">
+              <a-input v-model:value="formState.password" size="large" placeholder="请输入验证码">
+                <template #prefix>
+                  <i class="iconfont" style="margin-right: 4px;">&#xe6a1;</i>
+                </template>
+              </a-input>
+              <a-button type="primary" style="background: #143B88 !important;border: none;width: 120px;margin-left: 10px;" size="large" block>获取验证码</a-button>
+            </div>
+            
+          </a-form-item>
+
+          <a-form-item>
+            <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;" html-type="submit" size="large" block>登录</a-button>
+          </a-form-item>
+        </div>
       </a-form>
+      <a-divider style="color: #ffffff;border-color: #ffffff;">其他登录方式</a-divider>
+      <div class="login-item">
+        <img src="@/assets/loginIcon.png" alt="" style="margin-right: 32px;cursor: pointer;" v-if="loginWrp == 'phone'" @click="loginWrp = 'account'">
+        <img src="@/assets/phone.png" alt="" style="margin-right: 32px;cursor: pointer;" v-else  @click="loginWrp = 'phone'">
+        <img src="@/assets/wechat.png" alt="" style="cursor: pointer;">
+      </div>
       <!-- <a-divider><span style="color:#999;font-weight:300">其他登录方式</span></a-divider>
       <span>敬请期待</span> -->
     </div>
     <div class="login-wrap">
       <div class="top">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
+        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg> -->
       </div>
     </div>
-    <a-layout-footer class="footer">
-      Copyright © 2023 嘉兴市云链信息技术有限公司
+    <a-layout-footer class="footer" style="background: #143B88 !important;">
+      浙CP备2023011622号-1
     </a-layout-footer>
   </div>
 </template>
 <script>
-import { defineComponent, reactive,ref } from 'vue';
-import { useRouter } from "vue-router";
+import { defineComponent, reactive,ref } from 'vue'
+import { useRouter } from "vue-router"
 import Api  from '@/api/api'
 import md5 from 'js-md5'
-import { message } from 'ant-design-vue';
+import { message } from 'ant-design-vue'
 import { useAuthStore } from '@/stores/modules/auth'
 import { useRouteTabsStore } from '@/stores/modules/Htabs'
 import { storeToRefs } from 'pinia'
@@ -66,6 +123,7 @@ let { accountList } = storeToRefs(store)
 let { historyRoutes } = storeToRefs(rotTabs)
 export default defineComponent({
   setup() {
+    let loginWrp = ref('account')
     const router = useRouter()
     const formState = reactive({
       phonenumber: 'admin',
@@ -105,7 +163,8 @@ export default defineComponent({
       formState,
       onFinish,
       onFinishFailed,
-      loading
+      loading,
+      loginWrp
     };
   },
   mounted () {
@@ -117,24 +176,28 @@ export default defineComponent({
 </script>
 
 <style scoped>
+
+
 .conatiner{
-  background: url('@/assets/bg.png');
+  background: url('@/assets/wallhaven-0pq8gm.jpeg');
   background-size: cover;
 }
 .title{
   height: 33px;
-  margin: 0 0 30px;
-  color: #202d40;
-  font-size: 1.25rem;
-  font-weight: 600;
+  margin: 0 0 48px;
+  color: #ffffff;
+  font-size: 2rem;
+  font-weight: 500;
   animation: showup 3s forwards ;
+  display: flex;
+  align-items: center;
 }
 .login-wrap{
   overflow: hidden;
 }
 .login-wrap .top{
   width:100%;
-  background:#f3f4f591
+  /* background:#f3f4f591 */
 }
 .login-wrap .top{
   height:calc(100vh - 70px);
@@ -150,12 +213,17 @@ export default defineComponent({
   width: 500px;
   margin-right: -250px;
   margin-top: -244px;
-  padding: 30px;
-  background-color: rgba(255,255,255,1);
+  padding: 50px 80px;
+  background-color: rgba(255,255,255,.2);
   border-radius: 5px;
   box-shadow: 0 0 12px rgb(0 0 0 / 10%);
   z-index: 9999;
 }
+
+.login-item {
+  text-align: center;
+}
+
 .input-wrap{
   width: 100%;
 }
@@ -182,6 +250,24 @@ export default defineComponent({
   display: inline-block; /* 让行内元素可以自适应宽度、允许换行 */
 }
 
+/deep/.ant-input {
+  color: #ffffff;
+  background: none !important;
+}
+
+/deep/.ant-input-affix-wrapper {
+  background: rgba(43, 141, 195, 1) !important;
+  border: none;
+}
+
+/deep/.ant-input-affix-wrapper input {
+  background: none;
+}
+
+/deep/.anticon {
+  color: #ffffff;
+}
+
 /* 伪元素来实现光标 */
 .introduce::after {
   content: "";