登录页背景模糊处理

fengwenyi · Nov 17, 2021 · 0f190df · 0f190df
1 parent 4510f35
commit 0f190df
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 24 deletions.
diff --git a/LOG.md b/LOG.md
@@ -2,10 +2,11 @@
 
 ## v1.1.1
 
-2021.10.12
+2021.11.18
 
 * 【优化】优化接口请求库错误处理
-* 【优化】主页背景改为微软图片
+* 【优化】登录页背景改为微软图片
+* 【优化】登录页背景模糊处理
 * 【更新】更新MIT协议年份
 
 ## v1.1.0

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-admin-pro",
-  "version": "1.1.1-SNAPSHOT",
+  "version": "1.1.1",
   "author": "Erwin.Feng<[email protected]>",
   "private": false,
   "scripts": {

diff --git a/src/view/Login/Login.less b/src/view/Login/Login.less
@@ -1,28 +1,25 @@
-body {
-  //background-image: url('../../assets/images/login-bg3.jpg');
-  background-image: url('https://api.xygeng.cn/Bing/');
-  //background-image: url('https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg');
-  background-size: cover;
-  background-position: center;
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: 100%;
-  height: 100%;
-}
-
 .container {
   width: 100%;
   height: 100%;
   position: relative;
 
-  .bg {
-    width: 100%;
-    height: 100%;
-    //background-color: #f3f3f3;
+  &:after {
     position: absolute;
-    z-index: 1;
-    //opacity: .9;
+    top: -20px;
+    right: -20px;
+    bottom: -20px;
+    left: -20px;
+    content: '';
+    z-index: -1;
+    background-image: url('https://api.xygeng.cn/Bing/');
+    background-repeat: no-repeat;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    background-position: 50% 50%;
+    -webkit-filter: blur(10px);
+    filter: blur(10px);
   }
 
   .content {
@@ -36,9 +33,10 @@ body {
     margin: auto;
     z-index: 3;
     background: rgba(255, 255, 255, .9);
-    box-shadow: 0 0 10px #999;
     border-radius: 5px;
     padding: 50px 50px 10px;
+    border: 1px solid #c3c3c3;
+
     @media screen and (max-width: 800px) {
 
       width: calc(100% - 10px);

diff --git a/src/view/Login/Login.vue b/src/view/Login/Login.vue
@@ -1,7 +1,6 @@
 <template>
   <!-- 主容器 -->
   <section class="container">
-    <section class="bg"></section>
     <section class="content">
       <section class="box-logo">
         <img class="image-logo" :src="adminLogo" key="login-admin-logo">