Przeglądaj źródła

前端样式修改

ymy 1 rok temu
rodzic
commit
e0efdf0d08

BIN
src/assets/images/bgt.png


BIN
src/assets/images/img1.png


BIN
src/assets/images/img2.png


BIN
src/assets/images/img3.png


+ 1 - 1
src/assets/styles/variables.module.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 260px;
+$base-sidebar-width: 240px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

+ 1 - 0
src/views/components/line01.vue

@@ -39,6 +39,7 @@ export default class Line01 extends Vue {
       let obj:any={
         name: item[0].shop_name,
         type: 'line',
+        smooth: true,
         data: []
       }
       if(item){

+ 79 - 68
src/views/login.vue

@@ -1,67 +1,69 @@
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">SaaS协同平台</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaOnOff">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <!-- <el-form-item prop="tenantId">
-        <el-select v-model="loginForm.tenantId" placeholder="租户id" style="width: 63%">
-          <el-option v-for="item in tenantIdOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
-        </el-select>
-      </el-form-item> -->
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2022 Young All Rights Reserved.</span>
+  <div class="out">
+    <div class="login">
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+        <h3 class="title">OMS系统平台</h3>
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            auto-complete="off"
+            placeholder="账号"
+          >
+            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="密码"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaOnOff">
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          </div>
+        </el-form-item>
+        <!-- <el-form-item prop="tenantId">
+          <el-select v-model="loginForm.tenantId" placeholder="租户id" style="width: 63%">
+            <el-option v-for="item in tenantIdOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <el-form-item style="width:100%;">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            style="width:100%;"
+            @click.native.prevent="handleLogin"
+          >
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+          <div style="float: right;" v-if="register">
+            <router-link class="link-type" :to="'/register'">立即注册</router-link>
+          </div>
+        </el-form-item>
+      </el-form>
+      <!--  底部  -->
+      <div class="el-login-footer">
+        <span>Copyright © 2018-2022 Young All Rights Reserved.</span>
+      </div>
     </div>
   </div>
 </template>
@@ -185,13 +187,21 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+.out{
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(145deg,#AB6EFF,#2F88FF);
+}
 .login {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
+  background-image: url("../assets/images/bgt.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  width: 100%;
 }
 .title {
   margin: 0px auto 30px auto;
@@ -204,9 +214,10 @@ export default {
   background: #ffffff;
   width: 400px;
   padding: 25px 25px 5px 25px;
-  position: absolute;
-  top: 30%;
-  right: 8%;
+
+  // position: absolute;
+  // top: 30%;
+  // right: 8%;
   .el-input {
     height: 38px;
     input {

+ 0 - 1
src/views/oms/order/components/deliveryGoodsInfo.vue

@@ -515,7 +515,6 @@ export default class DeliveryGoodsInfo extends Vue {
     this.$nextTick(()=>{
       if(this.$refs.form){
         (this.$refs.form as any).clearValue();
-        console.log(this.value);
         (this.$refs.form as any).setValue(this.value);
       }
     })

+ 62 - 25
src/views/oms/order/components/sendModeModal.vue

@@ -5,26 +5,40 @@
     </template>
     <div class="mode">
       <div class="moda-item" :class="{'onModal': mode==='0'}" @click="modeHandle('0')">
-        <div class="check">
-          <i class="el-icon-success"></i>
+        <div class="img-tag">
+          <img src="../../../../assets/images/img2.png" />
+        </div>
+        <div class="moda-title">
+          批量逐一发货
+          <div class="check">
+            <i class="el-icon-check"></i>
+          </div>
         </div>
         <div class="msg">处理后形成多张物流单</div>
-        <div class="moda-title">批量逐一发货</div>
       </div>
       <div class="moda-item" :class="{'onModal': mode==='1'}" @click="modeHandle('1')">
-        <div class="check">
-          <i class="el-icon-success"></i>
-          <span>推荐</span>
+        <div class="img-tag">
+          <img src="../../../../assets/images/img3.png" />
+        </div>
+        <div class="moda-title">
+          整车发货
+          <div class="check">
+            <i class="el-icon-check"></i>
+          </div>
         </div>
-        <div class="msg">处理后形成一张物流单<br />优惠多多</div>
-        <div class="moda-title">整车发货</div>
+        <div class="msg">同一客户同一目的地订单形成一张物流单<br />优惠多多</div>
       </div>
       <div class="moda-item" :class="{'onModal': mode==='2'}" @click="modeHandle('2')">
-        <div class="check">
-          <i class="el-icon-success"></i>
+        <div class="img-tag">
+          <img src="../../../../assets/images/img1.png" />
+        </div>
+        <div class="moda-title">
+          快递发货
+          <div class="check">
+            <i class="el-icon-check"></i>
+          </div>
         </div>
         <div class="msg">处理后形成新物流单</div>
-        <div class="moda-title">快递发货</div>
       </div>
     </div>
   </vxe-modal>
@@ -62,24 +76,41 @@ export default class SendModeModal extends Vue {
   height: 100%;
   .moda-item{
     width: 244px;
-    height: 268px;
+    height: 300px;
     box-sizing: border-box;
-    border:solid 1px #F54319;
+    // border:solid 1px #F54319;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    // justify-content: space-between;
+    // align-items: center;
     margin: 0 32px;
+    padding: 16px;
+    border-radius: 5px;
+    background-color: #F4F7FA;
+    border:solid 1px #F4F7FA;
     cursor: pointer;
-    .check{
+    .img-tag{
       width: 100%;
-      padding: 30px 16px 0;
+      >img{
+        width: 100%;
+        display: block;
+      }
+    }
+    .check{
+      // width: 100%;
+      // padding: 30px 16px 0;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       font-size: 16px;
-      .el-icon-success{
-        font-size: 30px;
+      position: absolute;
+      padding: 0;
+      top: 30px;
+      right: 0;
+      border: solid 1px #333;
+      border-radius: 50%;
+      .el-icon-check{
+        font-size: 20px;
         visibility: hidden;
       }
       span{
@@ -89,19 +120,25 @@ export default class SendModeModal extends Vue {
     .msg{
       font-size: 12px;
       color: #999;
-      text-align: center;
+      // text-align: center;
     }
     .moda-title{
-      font-size: 20px;
-      text-align: center;
-      padding-bottom: 30px;
+      font-size: 16px;
+      padding: 32px 0 8px;
+      width: 100%;
+      position: relative;
+      color: #000;
     }
   }
   .moda-item:hover,.onModal{
+    background-color: #FFF;
+    border:solid 1px #0581FE;
     .check{
-      .el-icon-success{
+      border:solid 1px #0581FE;
+      background-color: #0581FE;
+      .el-icon-check{
         visibility: visible;
-        color: #F54319;
+        color: #FFF;
       }
       span{
         color: #F54319;