From c8f11578d6a9e32a3534638b4001787c7a46db69 Mon Sep 17 00:00:00 2001
From: "623585344@qq.com" <623585344@qq.com>
Date: Wed, 29 Dec 2021 17:47:45 +0800
Subject: [PATCH] =?UTF-8?q?mod:=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E9=83=A8=E5=88=86=E5=9B=BE=E7=89=87=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/pages/index.vue         |  29 ++++-
 resources/assets/sass/pages/page-index.scss | 134 +++++++-------------
 2 files changed, 65 insertions(+), 98 deletions(-)

diff --git a/resources/assets/js/pages/index.vue b/resources/assets/js/pages/index.vue
index f51074f31..bdfc93f6c 100644
--- a/resources/assets/js/pages/index.vue
+++ b/resources/assets/js/pages/index.vue
@@ -36,7 +36,7 @@
                             {{ $L("注册账号") }}
                         </div>
                         <div class="header-right-three" @click="login">
-                            {{ $L("立即登录") }}
+                            {{ $L("登录") }}
                         </div>
                     </div>
                 </div>
@@ -61,7 +61,12 @@
             <div class="page-main">
                 <div class="main-box-one">
                     <div class="box-one-square"></div>
-                    <div class="box-one-pic1"></div>
+                    <div class="box-pic" v-if="screenWidth<1920">
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic1.png')" />
+                    </div>
+                    <div class="box-one-pic1" v-else>
+                          
+                    </div>
                     <div class="box-one-tips">
                         <div class="box-square"></div>
                         <div class="box-title">
@@ -91,7 +96,9 @@
                 </div>
                 <div class="main-box-two" v-else>
                     <div class="box-two-tips">
-                        <div class="box-two-pic2"></div>
+                        <div class="box-pic">
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic2.png')" />
+                        </div>
                         <div class="box-square"></div>
                         <div class="box-title">
                             {{ $L("强大易用的协同创作云文档") }}
@@ -108,7 +115,12 @@
                 </div>
                 <div class="main-box-one">
                     <div class="box-one-square"></div>
-                    <div class="box-one-pic3"></div>
+                    <div class="box-pic" v-if="screenWidth<1920" >
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic3.png')" />
+                    </div>
+                    <div class="box-one-pic3" v-else >
+                          
+                    </div> 
                     <div class="box-one-tips">
                         <div class="box-square"></div>
                         <div class="box-title">
@@ -138,7 +150,9 @@
                 </div>
                 <div class="main-box-two" v-else>
                     <div class="box-two-tips">
-                        <div class="box-two-pic4"></div>
+                        <div class="box-pic">
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic4.png')" />
+                        </div>
                         <div class="box-square"></div>
                         <div class="box-title">
                             {{ $L("清晰直观的任务日历") }}
@@ -182,11 +196,12 @@ export default {
     data() {
         return {
             screenWidth: document.body.clientWidth,
+            
         };
     },
     watch: {
         screenWidth(nVal) {
-            console.log(nVal);
+            // console.log(nVal)
         },
     },
     computed: {
@@ -205,7 +220,7 @@ export default {
             window.screenWidth=document.body.clientWidth
             that.screenWidth=window.screenWidth
         }
-        console.log(this.screenWidth)
+       
     },
 
     methods: {
diff --git a/resources/assets/sass/pages/page-index.scss b/resources/assets/sass/pages/page-index.scss
index fafce17ed..349e9f1c0 100644
--- a/resources/assets/sass/pages/page-index.scss
+++ b/resources/assets/sass/pages/page-index.scss
@@ -197,58 +197,53 @@
             width: 62.5%;
             margin: 0 auto;
             margin-top: 200px;
+            .box-img{
+                height: auto;
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: bottom;
+                bottom: 0;
+                -o-object-fit: fill;
+                object-fit: fill;
+            }
+            .box-pic {
+                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                -moz-box-shadow: 0px 0px 10px #a9a4a4;
+                box-shadow: 0px 0px 10px #a9a4a4;
+                border-radius: 10px;
+                padding: 10px;
+            }
+            .box-square {
+                width: 24px;
+                height: 24px;
+                background: url("../images/index/square.png") no-repeat
+                    center center;
+                background-size: contain;
+                margin-top: 20px;
+            }
+            .box-title {
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #333333;
+                line-height: 45px;
+                margin: 6px 0 18px 0;
+            }
+            .box-tips {
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #828282;
+                line-height: 28px;
+            }
             .main-box-one {
                 position: relative;
                 margin-bottom: 70px;
-                .box-one-pic1 {
-                    width: 100%;
-                    height: 188px;
-                    background: url("../images/index/box-pic1.png") no-repeat
-                        center center;
-                    background-size: contain;
-
-                    -webkit-box-shadow: 0px 0px 10px #a9a4a4;
-                    -moz-box-shadow: 0px 0px 10px #a9a4a4;
-                    box-shadow: 0px 0px 10px #a9a4a4;
-                    border-radius: 10px;
-                }
-                .box-one-pic3 {
-                    width: 100%;
-                    height: 188px;
-                    background: url("../images/index/box-pic3.png") no-repeat
-                        center center;
-                    background-size: contain;
-                    -webkit-box-shadow: 0px 0px 10px #a9a4a4;
-                    -moz-box-shadow: 0px 0px 10px #a9a4a4;
-                    box-shadow: 0px 0px 10px #a9a4a4;
-                    border-radius: 10px;
-                }
+                
                 .box-one-tips {
                     width: 100%;
                 }
-                .box-square {
-                    width: 24px;
-                    height: 24px;
-                    background: url("../images/index/square.png") no-repeat
-                        center center;
-                    background-size: contain;
-                    margin-top: 20px;
-                }
-                .box-title {
-                    font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
-                    color: #333333;
-                    line-height: 45px;
-                    margin: 6px 0 18px 0;
-                }
-                .box-tips {
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #828282;
-                    line-height: 28px;
-                }
+            
             }
             .main-box-two {
                 width: 100%;
@@ -256,54 +251,11 @@
                 margin-bottom: 70px;
                 .box-two-square {
                 }
-                .box-two-pic2 {
-                    width: 100%;
-                    height: 188px;
-                    background: url("../images/index/box-pic2.png") no-repeat
-                        center center;
-                    background-size: contain;
-                    -webkit-box-shadow: 0px 0px 10px #a9a4a4;
-                    -moz-box-shadow: 0px 0px 10px #a9a4a4;
-                    box-shadow: 0px 0px 10px #a9a4a4;
-                    border-radius: 10px;
-                }
-                .box-two-pic4 {
-                    width: 100%;
-                    height: 188px;
-                    background: url("../images/index/box-pic4.png") no-repeat
-                        center center;
-                    background-size: contain;
-                    -webkit-box-shadow: 0px 0px 10px #a9a4a4;
-                    -moz-box-shadow: 0px 0px 10px #a9a4a4;
-                    box-shadow: 0px 0px 10px #a9a4a4;
-                    border-radius: 10px;
-                }
+              
                 .box-two-tips {
                     width: 100%;
                 }
-                .box-square {
-                    width: 24px;
-                    height: 24px;
-                    background: url("../images/index/square.png") no-repeat
-                        center center;
-                    background-size: contain;
-                    margin-top: 20px;
-                }
-                .box-title {
-                    font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
-                    color: #333333;
-                    line-height: 45px;
-                    margin: 6px 0 18px 0;
-                }
-                .box-tips {
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #828282;
-                    line-height: 28px;
-                }
+               
             }
         }
         .page-footer {