学习首页

src/layout/spacePage.vue

@@ -123,13 +123,14 @@ const handlePasswordClick = () => {
             height: 600px;
             background: url("../assets/images/space1.png") no-repeat;
             transform: skewX(-5deg);
-            margin-right: -80px;
+            margin-right: -150px;
             // flex-direction: column;
+            background-size: 98%;
 
             h2 {
                 position: absolute;
-                top: 5px;
-                left: 58%;
+                top: 6px;
+                left: 60%;
                 transform: translateX(-50%);
                 color: #ededd8;
                 font-size: 16px;
@@ -141,8 +142,8 @@ const handlePasswordClick = () => {
 
             p {
                 position: absolute;
-                top: 26%;
-                left: 52%;
+                top: 28%;
+                left: 55%;
                 transform: translateX(-50%);
                 color: #fdeda0;
                 font-size: 20px;
@@ -157,7 +158,7 @@ const handlePasswordClick = () => {
                 width: 200px;
                 height: 55px;
                 background-color: #e9ddab;
-                margin: 10px auto;
+                margin: 25px auto;
                 border: none;
                 border-radius: 5px;
                 color: #333;
@@ -169,17 +170,17 @@ const handlePasswordClick = () => {
             .btn1 {
                 position: absolute;
                 top: 268px;
-                left: 28%;
+                left: 31%;
             }
 
             .btn2 {
                 position: absolute;
-                left: 24%;
+                left: 26%;
                 top: 360px;
             }
             .btn3 {
                 position: absolute;
-                left: 20%;
+                left: 22%;
                 top: 453px;
             }
         }
@@ -200,6 +201,7 @@ const handlePasswordClick = () => {
                 flex: 1;
                 background-color: lightgreen;
                 background: url("../assets/images/space2.png") no-repeat;
+                background-size: 98%;
                 // display: flex;
                 // justify-content: center;
                 // align-items: center;
@@ -213,6 +215,7 @@ const handlePasswordClick = () => {
                 //     height: 200px;
                 background-color: lightcoral;
                 background: url("../assets/images/space3.png") no-repeat;
+                background-size: 98%;
                 // display: flex;
                 // justify-content: center;
                 // align-items: center;

src/layout/studyPage.vue

@@ -14,7 +14,7 @@
             <div class="box" :style="{ backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})` }"
                 @click="handleBoxClick(2)">学习</div>
             <div class="box" :style="{ backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})` }"
-                @click="handleBoxClick(3)">仿真实验</div>
+               style="margin-bottom: 80px;" @click="handleBoxClick(3)">仿真实验</div>
         </div>
     </div>
 </template>
@@ -125,12 +125,13 @@ const handleBoxClick = (boxNumber) => {
     flex-direction: column;
 
     .box {
+
         width: 520px;
         height: 162px;
         // background-color: #007BFF;
         // background: url("../assets/images/btn2.png") no-repeat;
         background-repeat: no-repeat;
-        margin: 10px;
+        margin: 30px 0 0 25px;
         cursor: pointer;
         background-repeat: no-repeat;
             background-size: contain;