首页布局

src/common/index.styl

@@ -26,8 +26,8 @@
 .wrap .bg-top .animation{
     position: absolute;
     top: -1px;
-    left: 288px;
-    width: 1346px;
+    left: 21.5%;
+    width: 57%;
     height: 162px;
 }
 
@@ -39,7 +39,7 @@
 //     filter: saturate(200%);
 // }
 
-.wrap .bg-top .animation span{
+.wrap .bg-top .bg-title{
     position: absolute;
     left: 33%;
     top: 1px;
@@ -56,6 +56,12 @@
     text-shadow: #0075ff 0px 0px 8px;
 }
 
+@media (max-width: 1500px){
+    .wrap .bg-top .bg-title{
+        font-size: 38px;
+    }
+}
+
 .wrap .bg-right{
     position: absolute;
     pointer-events: auto;

src/views/Index/Index.vue

@@ -12,11 +12,10 @@
           height="162"
           loop
           src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
-          style="width: 1346px; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%);"
-          width="1346"
+          style="width: 100%; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%);"
         ></video>
-        <span>盐湖区人民医院数字看板</span>
       </div>
+      <span class="bg-title">盐湖区人民医院数字看板</span>
     </div>
     <div class="bg-right">
       <img class="pic" src="~assets/bg-right.png" />