公司简介

src/components/AboutUs.vue

@@ -33,6 +33,7 @@ import HeadLine from 'cpns/HeadLine'
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #ffffff;
+    border-radius: 8px;
     .fontscale {
       font-size: 14px;
       transform: scale(0.5);

src/components/Cooperation.vue

@@ -8,25 +8,25 @@
     />
     <div class="client_wrap">
       <div class="card"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
+      <div class="card bg1"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
       <div class="card"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
+      <div class="card bg1"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
       <div class="card"></div>
+      <div class="card bg1"></div>
       <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
+      <div class="card bg1"></div>
     </div>
   </div>
 </template>
@@ -46,6 +46,9 @@ import HeadLine from 'cpns/HeadLine'
       height: 94px;
       background: #fcfcfd;
     }
+    .bg1 {
+      background: #dedede;
+    }
   }
 }
 </style>

src/components/DesignConcept.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="design_concept_container">
-    <div class="header_wrap">
-      <HeadLine title="独有的设计理念" />
-    </div>
+    <HeadLine
+      title="独有的"
+      themeTitle="设计理念"
+      :flip="true"
+      line1="DESIGN CONCEPT"
+    />
     <div class="cards">
       <div class="card">card</div>
+      <div class="card">card</div>
+      <div class="card">card</div>
+      <div class="card">card</div>
     </div>
   </div>
 </template>
@@ -15,10 +21,6 @@ import HeadLine from 'cpns/HeadLine'
 
 <style lang="scss" scoped>
 .design_concept_container {
-  .header_wrap {
-    padding: 27px 0;
-    background: #dde4f1;
-  }
   .cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -29,6 +31,8 @@ import HeadLine from 'cpns/HeadLine'
       display: flex;
       flex-direction: column;
       align-items: center;
+      justify-content: center;
+      background: #ddd;
     }
   }
 }

src/components/QRCode.vue

@@ -1,12 +1,59 @@
 <template>
-  <div class="qrcode_container">qrcpde</div>
+  <div class="qrcode_container">
+    <HeadLine
+      title="如何"
+      themeTitle="找到我们"
+      :flip="true"
+      line1="WECHAT/PHONEs"
+    />
+    <div class="qrcode_wrap">
+      <div class="qrcode"></div>
+      <div class="contract">
+        <div class="phone">13717892018</div>
+        <div class="phone">15624962290</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
 
 <style lang="scss" scoped>
 .qrcode_container {
-  background: linear-gradient(0deg, #015eea, #00c0fa);
-  padding: 42px 22px;
+  .qrcode_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: 0 22px 22px 22px;
+    .qrcode {
+      width: 194px;
+      height: 194px;
+      background: #000;
+      margin-bottom: 32px;
+    }
+    .contract {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      .phone {
+        width: 160px;
+        height: 33px;
+        background: #ffffff;
+        box-shadow: 0px 2px 8px 0px rgba(9, 7, 57, 0.06);
+        border-radius: 17px;
+        font-size: 10px;
+        font-family: Zona Pro;
+        font-weight: bold;
+        color: #000000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
 }
 </style>

src/components/SubNavigation.vue

@@ -17,6 +17,7 @@
   padding: 16px 18px;
   box-sizing: border-box;
   background: #efefef;
+  z-index: 222;
   position: fixed;
   top: 0;
   left: 0;

src/pages/Company.vue

@@ -2,19 +2,21 @@
   <div class="company_container">
     <SubNavigation />
     <AboutUs />
-    <div class="video_container">
-      <video
-        @click="stopVideo"
-        ref="video"
-        :controls="!maskShow"
-        style="width: 100%; height: 100%; object-fit: fill"
-        controlslist="nodownload"
-        :loop="true"
-      >
-        <source :src="Movie" />
-      </video>
-      <div class="mask" @click="playVideo" v-if="maskShow">
-        <div class="btn"></div>
+    <div class="video_wrap">
+      <div class="video_container">
+        <video
+          @click="stopVideo"
+          ref="video"
+          :controls="!maskShow"
+          style="width: 100%; height: 100%; object-fit: fill"
+          controlslist="nodownload"
+          :loop="true"
+        >
+          <source :src="Movie" />
+        </video>
+        <div class="mask" @click="playVideo" v-if="maskShow">
+          <div class="btn"></div>
+        </div>
       </div>
     </div>
     <DesignConcept />
@@ -46,22 +48,28 @@ const stopVideo = () => {
 <style lang="scss" scoped>
 .company_container {
   padding-top: $sub-header-height;
-  .video_container {
-    position: relative;
-    .mask {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(40, 63, 231, 0.67);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .btn {
-        width: 31px;
-        height: 31px;
-        background: #000;
+  background: #fff;
+  .video_wrap {
+    padding: 29px 7px 0 7px;
+    .video_container {
+      position: relative;
+      border-radius: 3px;
+      overflow: hidden;
+      .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(11, 17, 62, 0.39);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .btn {
+          width: 31px;
+          height: 31px;
+          background: #fff;
+        }
       }
     }
   }