company

src/components/DesignConcept.vue

@@ -8,16 +8,46 @@
       :theme="theme"
     />
     <div class="cards">
-      <div class="card">card</div>
-      <div class="card">card</div>
-      <div class="card">card</div>
-      <div class="card">card</div>
+      <div class="card">
+        <div class="bgbox bg1">
+          <p class="title">外观有理性思维</p>
+          <p class="desc">感性和理性完美配合<br />才能做出好看又能量产的外观</p>
+        </div>
+      </div>
+      <div class="card">
+        <div class="bgbox bg2">
+          <p class="title">外观工程师会工程类软件</p>
+          <p class="desc">
+            外观工程师会用CREO、SolidWorks<br />能在结构的基础上完善外观
+          </p>
+        </div>
+      </div>
+      <div class="card">
+        <div class="bgbox bg3">
+          <p class="title">外观懂工艺</p>
+          <p class="desc">
+            外观工程师懂工艺，避免工艺选错导致<br />工作努力白费，造成成本增加
+          </p>
+        </div>
+      </div>
+      <div class="card">
+        <div class="bgbox bg4">
+          <p class="title">外观懂结构</p>
+          <p class="desc">
+            外观工程师懂结构，不仅要外观好看实用<br />还要结构可以实现，可以实现模具量产
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import A1 from '@/static/img/about/01.png'
+import A2 from '@/static/img/about/02.png'
+import A3 from '@/static/img/about/03.png'
+import A4 from '@/static/img/about/04.png'
 const props = defineProps({
   theme: {
     type: Boolean,
@@ -36,10 +66,49 @@ const props = defineProps({
       width: 100%;
       height: 146px;
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      background: #ddd;
+      .bgbox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        white-space: nowrap;
+        width: 92px;
+        height: 55px;
+        .title {
+          font-size: 10px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #262626;
+          margin-top: 10px;
+        }
+        .desc {
+          font-size: 14px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #595959;
+          line-height: 26px;
+          transform: scale(0.5);
+          text-align: center;
+        }
+      }
+      .bg1 {
+        background: url(../static/img/about/01.png) no-repeat;
+        background-size: 100% 100%;
+      }
+      .bg2 {
+        background: url(../static/img/about/02.png) no-repeat;
+        background-size: 100% 100%;
+      }
+      .bg3 {
+        background: url(../static/img/about/03.png) no-repeat;
+        background-size: 100% 100%;
+      }
+      .bg4 {
+        background: url(../static/img/about/04.png) no-repeat;
+        background-size: 100% 100%;
+      }
     }
   }
 }

src/pages/Company.vue

@@ -10,12 +10,13 @@
           :controls="!maskShow"
           style="width: 100%; height: 100%; object-fit: fill"
           controlslist="nodownload"
+          :poster="Post"
           :loop="true"
         >
           <source :src="Movie" />
         </video>
         <div class="mask" @click="playVideo" v-if="maskShow">
-          <div class="btn"></div>
+          <img class="btn" :src="Play" />
         </div>
       </div>
     </div>
@@ -33,10 +34,6 @@ import DesignConcept from 'cpns/DesignConcept'
 import Cooperation from 'cpns/Cooperation'
 import QRCode from 'cpns/QRCode'
 import SubNavigation from 'cpns/SubNavigation'
-import A1 from '@/static/img/about/01.png'
-import A2 from '@/static/img/about/02.png'
-import A3 from '@/static/img/about/03.png'
-import A4 from '@/static/img/about/04.png'
 import Post from '@/static/img/about/video.png'
 import Play from '@/static/img/about/videos.png'
 const video = ref(null)
@@ -74,7 +71,6 @@ const stopVideo = () => {
         .btn {
           width: 31px;
           height: 31px;
-          background: #fff;
         }
       }
     }