屏幕适配、mycard广告

src/app/layout/layout.component.html

@@ -24,47 +24,54 @@
       </div>
     </nav>
     <div id="banner" style="position:relative" class="home-banner text-center my-custom-container">
-      <div style="width:100%;position: relative;top:10vh;text-align: center;">
-        <div class="container">
-          <div class="row">
+      <div class="banner-content">
         <img
-              class="no-select col-lg-6 col-sm-10 custom-width"
-              draggable="false"
-              style="margin:0 auto;width:480px;position: relative;top:10VH;margin-bottom:0.5em;"
+          class="banner-img title-img no-select"
           src="assets/img/font-2.png"
-            />
-          </div>
-        </div>
-        <br/>
-        <div class="container">
-          <div class="row">
-            <img class="no-select col-lg-8 col-sm-9 custom-width" draggable="false"
-                 style="width:580px;position: relative;margin:1em auto 2em;"
-                 src="assets/img/desc.png"/>
-          </div>
-        </div>
-        <div style="margin:0 auto;position: relative; top:-50px;">
+          draggable="false"
+          alt="标题图"/>
+        <img
+          class="banner-img desc-img no-select"
+          src="assets/img/desc.png"
+          draggable="false"
+          alt="描述图"/>
+        <div class="banner-flex">
+          <div class="left-content">
             <a [href]="latest_current">
               <img
                 src="assets/img/button-3_1.png"
-              minwidth="20vw"
-              style="position: relative;top:80px; border-radius: 3px; border: 1px solid #F2F6FC"
-            />
+                class="downLoadClass"
+                alt="下载按钮"/>
+            </a>
+          </div>
+
+          <div class="right-content">
+            <div class="ad_ds">广告赞助</div>
+            <a [href]="ad_current">
+              <img
+                src="assets/img/ad1.png"
+                class="ad"
+                alt="赞助商链接"/>
             </a>
           </div>
         </div>
 
-      <div class="no-select" style="position:absolute;bottom:0;left:50%;z-index:0;color:#fff;font-size: 1.2em;">
-        <p style="position:relative;left: -50%;">向下
-          <svg id="down" t="1688375022718" class="icon" viewBox="0 0 1024 1024" version="1.1"
-               width="48" height="48">
+
+      </div>
+      <div class="scroll-indicator no-select">
+        <p>
+          向下
+          <svg id="down" class="icon" viewBox="0 0 1024 1024" version="1.1" width="48" height="48">
             <path
               d="M533.333333 388.266667L358.4 213.333333 298.666667 277.333333l234.666666 234.666667L768 277.333333 708.266667 213.333333l-174.933334 174.933334z m0 260.266666l-174.933333-174.933333L298.666667 533.333333l234.666666 234.666667 234.666667-234.666667-59.733333-59.733333-174.933334 174.933333z"
-              fill="#ffffff" p-id="2645"></path>
+              fill="#ffffff"
+              p-id="2645"
+            ></path>
           </svg>
           滚动
         </p>
       </div>
+
     </div>
   </div>
 
@@ -147,19 +154,21 @@
           <div class="col-3 mb-4">
             <div class="d-flex justify-content-center">
               <img class="section-third-pic col-12 rounded"
-                   src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/ozns_1.jpg"/>
+                   src="https://cdntx.moecube.com/store/en-US/assets/ozns_1.jpg"/>
             </div>
           </div>
           <div class="col-3 mb-4">
             <div class="d-flex justify-content-center">
+              <a [href]="ad_current">
                 <img class="section-third-pic col-12 rounded"
-                   src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/eddyviolet_1.jpg"/>
+                     src="assets/img/ad1.png"/>
+              </a>
             </div>
           </div>
           <div class="col-3 mb-4">
             <div class="d-flex justify-content-center">
               <img class="section-third-pic col-12 rounded"
-                   src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/df02_1.jpg"/>
+                   src="https://cdntx.moecube.com/store/en-US/assets/df02_1.jpg"/>
             </div>
           </div>
           <div class="col-3 mb-4">
@@ -170,19 +179,21 @@
           <div class="col-3 mb-4">
             <div class="d-flex justify-content-center">
               <img class="section-third-pic col-12 rounded"
-                   src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/ozns_2.jpg"/>
+                   src="https://cdntx.moecube.com/store/en-US/assets/ozns_2.jpg"/>
             </div>
           </div>
           <div class="col-3 mb-4">
             <div class="d-flex justify-content-center">
+              <a [href]="ad_current">
                 <img class="section-third-pic col-12 rounded"
-                   src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/eddyviolet_2.jpg"/>
+                     src="assets/img/ad2.png"/>
+              </a>
             </div>
           </div>
           <div class="col-3 mb-4">
             <div class="d-flex justify-content-center">
               <img class="section-third-pic col-12 rounded"
-                   src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/df02_2.jpg"/>
+                   src="https://cdntx.moecube.com/store/en-US/assets/df02_2.jpg"/>
             </div>
           </div>
 
@@ -203,7 +214,7 @@
               </div>
               <div class="d-flex justify-content-center">
                 <img class="section-third-pic col-12 rounded"
-                     src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/ozns_1.jpg"/>
+                     src="https://cdntx.moecube.com/store/en-US/assets/ozns_1.jpg"/>
               </div>
             </div>
           </div>
@@ -211,13 +222,15 @@
           <div class="carousel-item">
             <div class="row">
               <div class="d-flex justify-content-center mb-4 ">
+                <a [href]="ad_current">
                   <img class="section-third-pic col-12 rounded"
-                     src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/eddyviolet_1.jpg"/>
+                       src="assets/img/ad1.png"/>
+                </a>
               </div>
 
               <div class="d-flex justify-content-center">
                 <img class="section-third-pic col-12 rounded"
-                     src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/df02_1.jpg"/>
+                     src="https://cdntx.moecube.com/store/en-US/assets/df02_1.jpg"/>
               </div>
             </div>
           </div>
@@ -230,20 +243,22 @@
 
               <div class="d-flex justify-content-center">
                 <img class="section-third-pic col-12 rounded"
-                     src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/ozns_2.jpg"/>
+                     src="https://cdntx.moecube.com/store/en-US/assets/ozns_2.jpg"/>
               </div>
             </div>
           </div>
           <div class="carousel-item">
             <div class="row">
               <div class="d-flex justify-content-center mb-4">
+                <a [href]="ad_current">
                   <img class="section-third-pic col-12 rounded"
-                     src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/eddyviolet_2.jpg"/>
+                       src="assets/img/ad2.png"/>
+                </a>
               </div>
 
               <div class="d-flex justify-content-center">
                 <img class="section-third-pic col-12 rounded"
-                     src="https://cdntx.moecube.com.moecube.com/store/en-US/assets/df02_2.jpg"/>
+                     src="https://cdntx.moecube.com/store/en-US/assets/df02_2.jpg"/>
               </div>
             </div>
           </div>