duoduo域名首页特殊处理

src/page/login/index.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="login-container"
+       :class="backgroundClass"
        ref="login"
        @keyup.enter.native="handleLogin">
     <top-color v-show="false"></top-color>
     <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
+      <div class="login-left" :class="backgroundClass">
         <div class="login-time">
           {{time}}
         </div>
          <!--<img class="img" src="/img/logoTubao.png" alt="">-->
-        <p class="title">{{ $t('login.info') }}</p>
+        <p class="title">
+            {{ special === 1 ? '多多易车配管理平台' :$t('login.info') }}
+        </p>
           <!--$t 国际化vue-i18n中英文切换 -->
       </div>
       <div class="login-border">
@@ -61,7 +64,8 @@
           source: "",
           code: "",
           state: "",
-        }
+        },
+          special: 0
       };
     },
     watch: {
@@ -76,7 +80,14 @@
     mounted() {
     },
     computed: {
-      ...mapGetters(["website", "tagWel"])
+      ...mapGetters(["website", "tagWel"]),
+        backgroundClass() {
+            const domain = window.location.hostname.split('.')[0];
+            if ('duoduo' === domain || 'localhost' === domain) {
+                this.special = 1
+            }
+            return `bg-${domain}`;
+        }
     },
     props: [],
     methods: {

src/styles/login.scss

@@ -5,15 +5,26 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background-image: url("/img/bg/bg.jpg");
+  // background-image: var(--login-bg-image, url("/img/bg/bg.jpg"));
   background-size: 100% 100%;
+    &.bg-default {
+        background-image: url("/img/bg/bg.png");
+    }
+    &.bg-duoduo {
+        background-image: url("/img/bg/main-bg.jpg");
+    }
+    &.bg-localhost {
+        background:
+            linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
+            url("/img/bg/main-bg.jpg") center/cover;
+    }
 }
 
 .login-weaper {
   margin: 0 auto;
   width: 1000px;
   box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
-
+    border-radius: 40px;
   .el-input-group__append {
     border: none;
   }
@@ -28,15 +39,26 @@
 }
 
 .login-left {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+  border-top-left-radius: 40px;
+  border-bottom-left-radius: 40px;
   justify-content: center;
   flex-direction: column;
-  background-color: #409EFF;
+  //background-color: #409EFF;
   color: #fff;
   float: left;
   width: 50%;
   position: relative;
+    &.bg-default {
+        background: #409EFF;
+    }
+    &.bg-duoduo {
+        background:
+            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+            #409EFF;
+    }
+    &.bg-localhost {
+        background: rgba(64, 158, 255, 0.7);
+    }
 }
 
 .login-left .img {
@@ -66,8 +88,8 @@
 
 .login-border {
   border-left: none;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-top-right-radius: 40px;
+  border-bottom-right-radius: 40px;
   color: #fff;
   background-color: #fff;
   width: 50%;