临时提交

src/components/ExampleItem.vue

@@ -1,3 +1,8 @@
+<script setup>
+import { useBootstrapBreakpoint } from './useBreakpoint.js';
+const { breakpoint } = useBootstrapBreakpoint();
+</script>
+
 <template>
 <div id="passageroot" class="pageroot">
   <div id="passagebanner" class="pagebanner">
@@ -9,6 +14,28 @@
       <div class="bannercontent" id="currentbanner">
         <span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
         <span class="banner1">{{this.psginfo.projectname_cn}}</span>
+        <div style="margin-bottom: 0;
+                    width: 100%;
+                    margin-top:
+                    auto;bottom: 0;
+                    color: darkgray">
+          <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="wepbar">
+
+          </div>
+          <div v-else id="pcbar">
+            <span class="engtitle">
+              <strong>{{this.psginfo.brandname_en}}</strong>
+            </span>
+            &nbsp;
+            <span class="engproject">
+              {{this.psginfo.projectname_en}}
+            </span>
+            <span style="width: 100%"></span>
+            <span class="code">
+              {{this.psginfo.projectcode}}
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -112,7 +139,37 @@ export default {
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
 
+.engtitle{
+  color: white;
+}
+
+.engproject{
+
+}
+
+#wepbar{
+  display: flex;
+  flex-direction: column;
+}
+
+#pcbar{
+  display: flex;
+  flex-direction: row;
+  span{
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    font-size: 36px;
+    font-family: DINPro-Light;
+    font-weight: 300;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40px;
+  }
+}
+
 #currentbanner{
+  display: flex;
+  flex-direction: column;
   @include media-breakpoint-between(xs, md) {
     margin-left: 32px;
     margin-right: 32px;
@@ -124,12 +181,14 @@ export default {
     margin-right: 100px;
     //margin-top: 100px;
     margin-top: 15%;
+    margin-bottom: 162px;
   }
   @include media-breakpoint-up(xxl) {
     margin-left: 256px;
     margin-right: 256px;
     //margin-top: 367px;
     margin-top: 15%;
+    margin-bottom: 162px;
   }
 }