本站静态部分全面竣工

src/components/ExamplesContent.vue

@@ -0,0 +1,14 @@
+<template>
+<div class="pageroot" style="background-color: white;"></div>
+</template>
+
+<script>
+export default {
+  name: "ExamplesContent"
+}
+</script>
+
+<style scoped lang="scss">
+@import "src/publicstyle.scss";
+
+</style>

src/components/Homepage.vue

@@ -1,3 +1,7 @@
+<script setup>
+import ExamplesContent from './ExamplesContent.vue'
+import Partners from './Tools/Partners.vue'
+</script>
 <template>
 <div id="homepageroot" class="pageroot">
   <div id="hpbanner" class="pagebanner">
@@ -109,6 +113,8 @@
       </div>
     </div>
   </div>
+  <ExamplesContent></ExamplesContent>
+  <Partners></Partners>
 </div>
 </template>
 

src/components/Tools/Partners.vue

@@ -0,0 +1,216 @@
+<template>
+<div class="pageroot" id="partnersroot" style="background-color: white;">
+  <div class="normalcontentdiv" id="ptntitle">
+    <span class="normalcontenttitle">
+      与50+合作伙伴共创
+    </span>
+  </div>
+  <div id="partnerscontent">
+    <div class="partneritempanel" id="ptn01">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn01.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn02">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn02.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn03">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn03.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn04">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn04.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn05">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn05.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn06">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn06.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn07">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn07.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn08">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn08.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn09">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn09.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn10">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn10.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn11">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn11.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn12">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn12.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn13">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn13.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn14">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn14.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn15">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn15.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn16">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn16.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn17">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn17.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn18">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn18.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn19">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn19.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn20">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn20.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn21">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn21.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn22">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn22.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn23">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn23.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn24">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn24.png"/>
+      </div>
+    </div>
+    <div class="partneritempanel" id="ptn25">
+      <div class="partnerlogodiv">
+        <img src="/partnerlogos/ptn25.png"/>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "Partners"
+}
+</script>
+
+<style scoped lang="scss">
+@import "src/publicstyle.scss";
+
+#partnerscontent{
+  display: grid;
+  @include media-breakpoint-between(xs, md){
+    margin-left: 32px;
+    margin-right: 32px;
+    margin-top: 97px;
+
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(9, 1fr);
+  }
+  @include media-breakpoint-between(md,xl){
+    width: 600px;
+    margin-top: 97px;
+    margin-left: 100px;
+    margin-right: 100px;
+
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(9, 1fr);
+  }
+  @include media-breakpoint-up(xl){
+    margin-left: 289px;
+    margin-right: 289px;
+    margin-top: 95px;
+
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+  }
+}
+#partnersroot{
+  @include media-breakpoint-between(xs, md){
+    padding-bottom: 64px;
+  }
+  @include media-breakpoint-up(md){
+    padding-bottom: 217px;
+  }
+}
+
+.partneritempanel{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  @include media-breakpoint-between(xs, md){
+    padding-top: 9px;
+    padding-bottom: 9px;
+  }
+  @include media-breakpoint-up(md){
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+}
+
+.partnerlogodiv{
+  aspect-ratio: 2.5;
+  @include media-breakpoint-between(xs, md){
+    max-width: 95px;
+    max-height: 38px;
+  }
+  @include media-breakpoint-up(md){
+    max-width: 200px;
+    max-height: 80px;
+  }
+}
+
+.partnerlogodiv img{
+  object-fit: fill;
+  width: 100%;
+  max-height: 100%;
+}
+</style>