安卓样式定型

src/App.vue

@@ -17,15 +17,10 @@ router.isReady().then(() => {
 <template>
   <div id="contentPane">
     <Toolbar></Toolbar>
+    <div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="androidblackbar"></div>
     <div v-if="$route.path === '/ContactUs'">
       <router-view/>
-      <CopyrightIcp></CopyrightIcp>
+      <CopyrightIcp v-if="isContentLoaded"></CopyrightIcp>
-      <!-- 如果 ContactUs 页面也需要Footer并同样逻辑加载，则也加上 v-if -->
-      <!--
-      <div id="footer" v-if="isContentLoaded">
-        <Footer></Footer>
-      </div>
-      -->
     </div>
     <div v-else id="defaultcontainer">
       <div id="content"><router-view/></div>
@@ -33,7 +28,7 @@ router.isReady().then(() => {
       <div id="footer" v-if="isContentLoaded">
         <Footer></Footer>
       </div>
-      <CopyrightIcp></CopyrightIcp>
+      <CopyrightIcp v-if="isContentLoaded"></CopyrightIcp>
     </div>
   </div>
 </template>
@@ -42,6 +37,15 @@ router.isReady().then(() => {
 @import "node_modules/bootstrap/scss/_functions.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @import "node_modules/bootstrap/scss/_mixins.scss";
+#androidblackbar{
+  background-color: black;
+  @include media-breakpoint-between(xs, md) {
+    height:70px;
+  }
+  @include media-breakpoint-up(md){
+    height: 95.17px;
+  }
+}
 
 #contentPane{
   display: flex;

src/components/Aboutus.vue

@@ -7,10 +7,10 @@ const { breakpoint } = useBootstrapBreakpoint();
 <template>
   <div class="pageroot" id="aboutusroot">
     <div id="aboutusbanner" class="videorootbanner">
-      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"
+<!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-           src="/AboutusVideo.gif"
+<!--           src="/AboutusVideo.gif"-->
-           class="videoimg"/>
+<!--           class="videoimg"/>-->
-      <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+      <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
              poster="/AboutusVideoPreload.png"
              controls=""
              id="abtbannervideo"
@@ -34,6 +34,14 @@ const { breakpoint } = useBootstrapBreakpoint();
         </div>
       </div>
     </div>
+    <div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="adbannertxt" class="pageroot">
+      <div id="hpbanner2" style="z-index: 0;">
+        <div class="bannercontent">
+          <span class="banner1" style="color: black;">多年专业深耕<br /></span>
+          <span class="banner2" style="color: black;">赋能客户产品体验创新</span>
+        </div>
+      </div>
+    </div>
     <div id="gslc" class="pageroot">
       <div class="normalcontentdiv" id="gslcblk">
         <span class="normalcontenttitle">公司介绍</span>

src/components/Examples.vue

@@ -1,19 +1,21 @@
 <script setup>
 import ExamplesContent from './ExamplesContent.vue';
+import { useBootstrapBreakpoint } from './useBreakpoint.js'; // 假设 useBreakpoint.js 路径正确
+const { breakpoint } = useBootstrapBreakpoint();
 </script>
 
 <template>
   <div class="pageroot" id="examplesprocessroot">
     <div id="examplebanner" class="videorootbanner">
-      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"
+<!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-           src="/ExpVideoPreload.png"
+<!--           src="/ExpVideoPreload.png"-->
-           class="videoimg"/>
+<!--           class="videoimg"/>-->
-      <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+      <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-             poster="/bannervideopreload.png" controls="controls"
+             controls=""
-             id="bannervideo" muted autoplay="autoplay" loop="loop"
+             id="expbannervideo"
-             playsinline webkit-playsinline
+             muted autoplay="autoplay"
-             class="bannervideos"
+             loop="loop" playsinline webkit-playsinline
-             x5-video-player-type="h5-page">
+             class="bannervideos">
         <source src="/ExpVideo.mp4" type="video/mp4"></source>
       </video>
       <video v-else
@@ -31,6 +33,14 @@ import ExamplesContent from './ExamplesContent.vue';
         </div>
       </div>
     </div>
+    <div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="adbannertxt" class="pageroot">
+      <div id="hpbanner2" style="z-index: 0;">
+        <div class="bannercontent">
+          <span class="banner1" style="color: black;">助力不同行业客户<br /></span>
+          <span class="banner2" style="color: black;">实现业务增长和竞争力提升</span>
+        </div>
+      </div>
+    </div>
     <ExamplesContent></ExamplesContent>
   </div>
 </template>

src/components/Homepage.vue

@@ -7,10 +7,10 @@ const { breakpoint } = useBootstrapBreakpoint();
 <template>
 <div id="homepageroot" class="pageroot">
   <div id="homepagebanner" class="videorootbanner">
-    <img v-if="$isMobile.android.phone||$isMobile.android.tablet"
+<!--    <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-         src="/bannervideopreload.png"
+<!--         src="/bannervideopreload.png"-->
-         class="videoimg"/>
+<!--         class="videoimg"/>-->
-    <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+    <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
            poster="/bannervideopreload.png" controls=""
            id="bannervideo" muted autoplay="autoplay" loop="loop"
            playsinline webkit-playsinline
@@ -32,6 +32,14 @@ const { breakpoint } = useBootstrapBreakpoint();
       </div>
     </div>
   </div>
+  <div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="adbannertxt" class="pageroot">
+    <div id="hpbanner2" style="z-index: 0;">
+      <div class="bannercontent">
+        <span class="banner1" style="color: black;">为用户创造美好体验<br /></span>
+        <span class="banner2" style="color: black;">驱动商业可持续增长</span>
+      </div>
+    </div>
+  </div>
   <div id="secondwhite" class="pageroot">
     <div id="whiteK" class="normalcontentdiv">
       <span class="normalcontenttitle">
@@ -284,12 +292,10 @@ export default {
   }
 
   @include media-breakpoint-between(xs, md) {
-    //margin-left: 32px;
     width: 326px;
   }
 
   @include media-breakpoint-between(md, xl) {
-    //margin-left: 100px;
     width: 326px;
   }