静态页面完成

src/components/bottoms/bottoms.vue

@@ -38,7 +38,7 @@
             </div>
             <!-- <div class="qrItem">
               <div class="img">
-                <img src="" alt="">
+                <img src="@/assets/images/jxqr_11.png" alt="">
               </div>
               <div class="txt">浙里学车-驾校版</div>
             </div> -->
@@ -85,7 +85,7 @@
   .onerow {
     display: flex;
     justify-content: space-between;
-    border-top: 1px solid #EaEaEa;
+    // border-top: 1px solid #EaEaEa;
     padding-top: 32px;
     .leftTxt {
       display: flex;
@@ -119,6 +119,7 @@
 
       .qrcode {
         display: flex;
+        padding-right: 50px;
         .qrItem {
           display: flex;
           flex-direction: column;
@@ -146,6 +147,7 @@
     .rightLogo {
       // width: 220px;
       height: 40px;
+      margin-top: 100px;
       img {
         display: block;
         // width: 100%;

src/components/h1bg/h1bg.vue

@@ -0,0 +1,44 @@
+
+
+<template>
+  <div class="h1bg">
+    <div class="en">{{ text.en }}</div>
+    <div class="cn">{{ text.cn }}</div>
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+    text: {
+        type: Object,
+        default: {}
+    }
+})
+</script>
+
+<style scoped lang="scss">
+    .h1bg {
+        position: relative;
+        width: 100%;
+        .en {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #EAEBEC;
+            font-size: 48px;
+            font-weight: 700;
+        }
+        .cn {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            font-size: 36px;
+            color: #333;
+            font-weight: 700;
+
+        }
+    }
+</style>

src/views/aboutUs/aboutUs.vue

@@ -83,7 +83,6 @@
 
         <div class="map">
           <mapCard/>
-          <!-- <iframe width="1280" height="400" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/m7DFsyYWeMy"></iframe> -->
         </div>
       </div>
       
@@ -170,7 +169,7 @@ onMounted(()=>{
   justify-content: space-between;
   .leftTxt {
     color: #333;
-    padding-right: 60px;
+    padding-right: 120px;
     flex: 1;
     .p {
       font-size: 22px;

src/views/contactUs/contactUs.vue

@@ -2,13 +2,46 @@
 
 
 <template>
-    <div class="a">联系我们</div>
+    <div class="contantUs">
+      <div class="banner">
+        <img src="@/assets/images/bannerjjfa.png" alt="">
+      </div>
+
+      <h1bg :text="{en: 'CONTACT US', cn: '联系我们'}"/>
+      <div class="container">
+        <div class="h2">杭州钧安科技有限公司</div>
+        <div class="txt">地址：杭州市上城区临丁路1190号尚坤丁兰国际8楼808室</div>
+        <div class="txt">电话：0571-5660 6030</div>
+        <div class="map">
+          <mapCard/>
+        </div>
+      </div>
+    </div>
   </template>
   
   <script setup>
-  
+  import h1bg from '@/components/h1bg/h1bg.vue'
+  import mapCard from '@/components/mapCard/mapCard.vue'
   </script>
   
-  <style>
-  
+  <style lang="scss" scoped>
+   .banner {
+    width: 100%;
+    margin-bottom: 50px;
+    img {
+      width: 100%;
+    }
+  }
+  .container {
+    padding: 90px 0 120px 0;
+  }
+  .h2 {
+    font-size: 24px;
+    font-weight: 700;
+    padding: 20px 0;
+  }
+  .txt {
+    font-size: 16px;
+    margin-bottom: 14px;
+  }
   </style>

src/views/joinUs/joinUs.vue

@@ -2,13 +2,198 @@
 
 
 <template>
-    <div class="a">加入我们</div>
+    <div class="joinUs">
+      <div class="banner">
+        <img src="@/assets/images/bannerjjfa.png" alt="">
+      </div>
+
+      <div class="con1">
+        <h1bg :text="{en: 'TEAM INTRODUCTION', cn: '团队介绍'}"/>
+        <div class="container">
+          <div class="leftTxt">
+            <div class="text">Hi，我们是杭州钧安科技。驾培行业数字化改革全域解决方案开发商。</div>
+            <div class="text">公司的骨干均是在驾培行业、互联网行业、深耕多年有着丰富经验的人员，对于行业更了解并对行业发展有独到见解。技术团队均是有着丰富开发经验的人员组成；熟悉信创云开发环境。从客户端到服务端，你总能找到更高的技术挑战。</div>
+            <div class="text">想跟优秀的人一起做有价值的事情嘛？那就赶快加入我们吧！</div>
+          </div>
+          <div class="rightImg">
+            <img src="@/assets/images/joinCon1.png" alt="">
+          </div>
+        </div>
+      </div>
+
+      <div class="con2">
+        <h1bg :text="{en: 'INVITE TO ONE’S SIDE MEN OF WISDOM AND VALOR', cn: '招贤纳士'}"/>
+        <div class="container">
+          <div class="li">
+            <div class="title">
+              <div class="tit_row">
+                <div class="icon">
+                  <img src="@/assets/images/joinIcon.png" alt="">
+                </div>
+                <div class="tit">java开发工程师</div>
+              </div>
+              <div class="tps">杭州｜研发｜正式</div>
+            </div>
+
+            <div class="p">
+              <div class="txt">1、熟悉产品相关业务知识；<br>
+                2、依据公司开发框架和开发管理规范，完成开发主管分配的开发任务；<br>
+                3、负责所开发模块的单元测试以及功能测试，系统缺陷修复工作，保证开发质量；<br>
+                4、协助项目部完成产品的部署工作，并负责排查解决产品部署中遇到的技术问题；<br>
+                5、协助开发主管完成产品的系统分析设计、技术预演工作；<br>
+                6、完成开发主管安排的其他任务。
+              </div>
+            </div>
+          </div>
+
+          <div class="li">
+            <div class="title">
+              <div class="tit_row">
+                <div class="icon">
+                  <img src="@/assets/images/joinIcon.png" alt="">
+                </div>
+                <div class="tit">项目经理</div>
+              </div>
+              <div class="tps">杭州｜研发｜正式</div>
+            </div>
+
+            <div class="p">
+              <div class="txt">
+                1、熟悉产品相关业务知识；<br>
+                2、依据公司开发框架和开发管理规范，完成开发主管分配的开发任务；<br>
+                3、负责所开发模块的单元测试以及功能测试，系统缺陷修复工作，保证开发质量；<br>
+                4、协助项目部完成产品的部署工作，并负责排查解决产品部署中遇到的技术问题；<br>
+                5、协助开发主管完成产品的系统分析设计、技术预演工作；<br>
+                6、完成开发主管安排的其他任务。
+              </div>
+            </div>
+          </div>
+
+          <div class="li">
+            <div class="title">
+              <div class="tit_row">
+                <div class="icon">
+                  <img src="@/assets/images/joinIcon.png" alt="">
+                </div>
+                <div class="tit">客服</div>
+              </div>
+              <div class="tps">杭州｜研发｜正式</div>
+            </div>
+
+            <div class="p">
+              <div class="txt">1、熟悉产品相关业务知识；<br>
+                2、依据公司开发框架和开发管理规范，完成开发主管分配的开发任务；<br>
+                3、负责所开发模块的单元测试以及功能测试，系统缺陷修复工作，保证开发质量；<br>
+                4、协助项目部完成产品的部署工作，并负责排查解决产品部署中遇到的技术问题；<br>
+                5、协助开发主管完成产品的系统分析设计、技术预演工作；<br>
+                6、完成开发主管安排的其他任务。
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
   </template>
   
   <script setup>
-  
+  import h1bg from '@/components/h1bg/h1bg.vue'
   </script>
   
-  <style>
+  <style lang="scss" scoped>
+  .joinUs {
+    .banner {
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
+
+  .con1 {
+    padding: 120px 0;
+      .container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 158px;
+        .leftTxt {
+          flex: 1;
+          padding-right: 200px;
+          .text {
+            margin-bottom: 30px;
+            font-size: 22px;
+            color: #333;
+          } 
+        }
 
+        .rightImg {
+          width: 590px;
+          height: 426px;
+          border-radius: 8px;
+          background: #E3E7F2;
+          img {
+            display: block;
+            width: 100%;
+
+          }
+        }
+      }
+  }
+
+  .con2 {
+    width: 100%;
+    background: #F6F7F8;
+    padding: 64px 0 200px 0;
+      .container {
+        margin-top: 148px;
+        display: flex;
+        justify-content: space-between;
+        .li {
+          padding: 50px 24px 75px 24px;
+          color: #333;
+          width:30%;
+          height: 416px;
+          background: #FFFFFF;
+          border-radius: 16px;
+          &:hover {
+            box-shadow: 0px 2px 24px 0px rgba(0,0,0,0.1);
+          }
+          .title {
+
+            .tit_row {
+              display: flex;
+              .icon {
+                width: 45px;
+                height: 45px;
+                img {
+                  display: block;
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .tit {
+                font-size: 24px;
+              }
+            }
+            .tps {
+              font-size: 14px;
+              margin-left: 48px;
+            }
+          }
+
+          .p {
+            padding-top: 32px;
+            .txt {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+  }
+}
   </style>
+
+
+
+
+

src/views/news/news.vue

@@ -1,13 +1,105 @@
 
 
 <template>
-    <div class="a">新闻动态</div>
+    <div class="news">
+      <div class="banner">
+        <img src="@/assets/images/bannerjjfa.png" alt="">
+      </div>
+
+      <div class="li">
+        <div class="container">
+          <div class="cover">
+            <img src="" alt="">
+          </div>
+          <div class="textCon">
+            <div class="tit">获评杭州市党史学习教育“民呼我为”最佳实践案例</div>
+            <div class="text">日前，杭州市党史学习教育“民呼我为”最佳实践案例名单出炉，杭州市交通运输局的“浙里学车”APP：“一站式”学驾平台入选其中。</div>
+            <div class="target">
+              <div class="icon">来源</div>
+              <div class="targetTxt">杭州交通</div>
+            </div>
+          </div>
+
+          <div class="date">2022-01-25</div>
+        </div>
+      </div>
+    </div>
   </template>
   
   <script setup>
   
   </script>
   
-  <style>
+  <style lang="scss" scoped>
+  .news {
+    width: 100%;
+  .banner {
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
+
+  .li {
+    width: 100%;
+    &:hover {
+        background: #F6F7F8;
+      }
+    .container {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 16px 0;
+      
+      .cover {
+        width: 168px;
+        height: 118px;
+        border-radius: 4px;
+        overflow: hidden;
+        img {
+          width: 100%;
+        }
+      }
+
+      .textCon {
+        flex: 1;
+        width: 0;
+        padding: 0 64px 0 24px;
+        color: #333;
+        .tit {
+          font-size: 22px;
+        }
+
+        .text {
+          font-size: 12px;
+          padding: 8px 0 16px 0;
+        }
+
+        .target {
+          display: flex;
+          align-items: center;
+          .icon {
+            background: #B3B5B9;
+            padding: 0 4px;
+            color: #fff;
+            font-size: 12px;
+            border-radius: 4px;
+          }
+
+          .targetTxt {
+              font-size: 12px;
+              color: #B3B5B9;
+              margin-left: 6px;
+          }
+        }
+      }
 
+      .date {
+        font-size: 24px;
+        color: #B3B5B9;
+        font-weight: 400;
+      }
+    }
+  }
+}
   </style>

src/views/solution/solution.vue

@@ -1,12 +1,74 @@
 
 <template>
-    <div class="a">解决方案</div>
+    <div class="solution">
+      <div class="banner">
+        <img src="@/assets/images/bannerjjfa.png" alt="">
+      </div>
+
+      <div class="con2">
+        <div class="container">
+          <div class="tit">
+            <img src="@/assets/images/tit1.png" alt="">
+          </div>
+          <div class="xjzj">
+            <img src="@/assets/images/pross.png" alt="">
+          </div>
+        </div>
+      </div>
+
+      <div class="con3">
+        <div class="container">
+          <div class="tit">
+            <img src="@/assets/images/tit2.png" alt="">
+          </div>
+          <div class="xjzj">
+            <img src="@/assets/images/hyjgzl.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
   </template>
   
   <script setup>
   
   </script>
   
-  <style>
+  <style lang="scss" scoped>
+  .solution {
+    width: 100%;
+  .banner {
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
+  .container {
+      .tit {
+        padding: 62px 0 92px 0;
+        width: 611px;
+        margin: 0 auto;
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+
+      .xjzj {
+        width: 100%;
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+  .con2 {
+    width: 100%;
+    padding: 60px 0 300px 0;
+  }
 
+  .con3 {
+    padding-bottom: 218px;
+    background: #1C232B;
+  }
+}
   </style>