首屏箭头

2 years ago · 9a63969410
10 changed files with 99 additions and 39 deletions
--- a/src/assets/scss/globalVar.scss
+++ b/src/assets/scss/globalVar.scss
@ -1 +1,3 @@
-$bg-color: #1989fa;
+$theme-color: #f95926;
+$btn-gradient: linear-gradient(90deg, #facc22, #f83600);
+$light-background: rgba(249, 89, 38, 0.3);
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@ -32,7 +32,7 @@ const toAboutPage = () => {
    width: 173px;
    height: 43px;
    cursor: pointer;
-    background: linear-gradient(90deg, #facc22, #f83600);
+    background: $btn-gradient;
    border-radius: 22px;
    display: flex;
    align-items: center;
--- a/src/components/Contact.vue
+++ b/src/components/Contact.vue
@ -2,19 +2,62 @@
  <div class="contact_container">
    <div class="base_info_container">
      <div class="info mb">
-        <img :src="Phone" alt="phone" class="icon" />
+        <svg
+          t="1684830552575"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="2414"
+        >
+          <path
+            d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m224 654.4c0 14.4-11.2 25.6-24.8 25.6-236 0-427.2-196-427.2-438.4 0-14.4 11.2-25.6 24.8-25.6h88c13.6 0 24.8 11.2 24.8 25.6 0 32 4.8 63.2 14.4 92.8 2.4 8.8 0.8 19.2-6.4 26.4l-55.2 56.8c36 72.8 94.4 132.8 165.6 169.6l55.2-56.8c6.4-7.2 16.8-9.6 25.6-6.4 28 9.6 58.4 14.4 89.6 14.4 13.6 0 24.8 12 24.8 25.6v90.4z"
+            p-id="2415"
+            data-spm-anchor-id="a313x.7781069.0.i0"
+            class="selected"
+          ></path>
+        </svg>
        <p class="first">袁老师</p>
        <p>13717892018</p>
      </div>
      <div class="info mb">
-        <img :src="Address" alt="phone" class="icon" />
+        <svg
+          t="1684830683851"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="21094"
+          class="address_icon"
+        >
+          <path
+            d="M420.515607 430.055541a90.234868 90.234868 0 0 0 9.599454 41.597634 101.754213 101.754213 0 0 0 17.91898 23.678653 92.794722 92.794722 0 0 0 127.992721 0 101.754213 101.754213 0 0 0 17.279017-23.678653l3.839782-8.319527a93.434686 93.434686 0 0 0 5.759672-33.278107A92.154759 92.154759 0 0 0 448.034041 364.779253a88.954941 88.954941 0 0 0-27.518434 65.276288z"
+            p-id="21095"
+          ></path>
+          <path
+            d="M872.969873 152.311337A490.212119 490.212119 0 0 0 512.030402 3.199818a491.492046 491.492046 0 0 0-360.299508 149.111519A491.492046 491.492046 0 0 0 0.05952 511.970882a491.492046 491.492046 0 0 0 149.111519 360.299508A492.13201 492.13201 0 0 0 512.030402 1023.941763a490.212119 490.212119 0 0 0 360.299508-149.751483A489.572156 489.572156 0 0 0 1024.001283 511.970882a489.572156 489.572156 0 0 0-151.03141-359.659545zM723.21839 511.970882a186.869372 186.869372 0 0 1-8.95949 19.838871 232.306788 232.306788 0 0 1-29.438326 42.877562l-161.270828 236.146569a21.758762 21.758762 0 0 1-17.91898 8.95949 22.398726 22.398726 0 0 1-17.918981-9.599454L332.200629 563.807933a245.746023 245.746023 0 0 1-20.478835-31.99818 226.547115 226.547115 0 0 1-23.678653-101.754212 218.227588 218.227588 0 0 1 63.99636-158.710974A216.947661 216.947661 0 0 1 512.030402 205.428316a225.267188 225.267188 0 0 1 224.627224 224.627225A236.146569 236.146569 0 0 1 723.21839 511.970882z"
+            p-id="21096"
+          ></path>
+        </svg>
        <div class="add_wrap">
          <p class="address mb">北京市昌平区回龙观街道博纳集团</p>
          <p class="address">3号楼一层 产品梦工厂</p>
        </div>
      </div>
      <div class="info">
-        <img :src="Email" alt="phone" class="icon" />
+        <svg
+          t="1684830742559"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="26407"
+        >
+          <path
+            d="M512 62.584C263.8 62.584 62.584 263.8 62.584 512S263.8 961.416 512 961.416 961.416 760.2 961.416 512 760.2 62.584 512 62.584z m232.022 584.767c0 24.81-20.876 45.112-46.4 45.112H326.377c-25.523 0-46.4-20.301-46.4-45.112l0.213-222.877 226.25 119.983a11.907 11.907 0 0 0 11.12 0l226.462-120.096v222.99z m-231.91-145.259L280.216 376.237c0.225-24.624 20.788-44.7 46.162-44.7h371.246c25.336 0 46.1 20.001 46.4 44.575l-231.91 125.98z"
+            p-id="26408"
+            class="icon"
+          ></path>
+        </svg>
        <p class="email_text">
          <span> 邮 </span>
          <span> 箱 </span>
@ -55,11 +98,7 @@
  </div>
 </template>

-<script setup>
-import Phone from '@/static/img/index/8.png'
-import Address from '@/static/img/index/9.png'
-import Email from '@/static/img/index/10.png'
-</script>
+<script setup></script>

 <style lang="scss" scoped>
 .contact_container {
@ -81,9 +120,16 @@ import Email from '@/static/img/index/10.png'
      font-weight: 500;
      color: #1b1b1b;
      .icon {
-        width: 55px;
-        height: 55px;
+        width: 75px;
+        height: 75px;
        margin-right: 31px;
+        fill: $theme-color;
+      }
+      .address_icon {
+        width: 66px;
+        height: 66px;
+        margin-right: 40px;
+        fill: $theme-color;
      }
      .add_wrap {
        display: flex;
@ -125,7 +171,7 @@ import Email from '@/static/img/index/10.png'
    margin-left: 191px;
    background: #ffffff;
    border-radius: 8px;
-    border-top: 4px solid #f95926;
+    border-top: 4px solid $theme-color;
    padding: 50px 50px 41px 50px;
    .title {
      font-size: 26px;
@ -176,7 +222,7 @@ import Email from '@/static/img/index/10.png'
      .send {
        width: 102px;
        height: 43px;
-        background: linear-gradient(90deg, #facc22, #f83600);
+        background: $btn-gradient;
        border-radius: 22px;
        font-size: 18px;
        font-weight: 300;
--- a/src/components/FourCard.vue
+++ b/src/components/FourCard.vue
@ -288,7 +288,7 @@
      width: 60px;
      height: 60px;
      margin-bottom: 42px;
-      fill: #f95926;
+      fill: $theme-color;
    }
    .card_title {
      font-size: 18px;
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@ -40,7 +40,7 @@ const props = defineProps({
  .line {
    width: 38px;
    height: 4px;
-    background: #f95926;
+    background: $theme-color;
    border-radius: 2px;
    margin-bottom: 24px;
  }
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -230,7 +230,7 @@ const toHome = () => {
    }
    .componey_name {
      margin-left: 21px;
-      font-size: 28px;
+      font-size: 20px;
      font-weight: 500;
      color: #313131;
    }
@ -255,6 +255,9 @@ const toHome = () => {
      &:last-child {
        margin-right: 0;
      }
+      &:hover {
+        font-weight: 400;
+      }
    }
    .active {
      font-weight: 500;
--- a/src/components/HomeScreen.vue
+++ b/src/components/HomeScreen.vue
@ -4,20 +4,9 @@
      做铁路相关的设备<span class="sign">研发和制造</span>
    </h1>
    <div class="to_bottom" @click="toNextPage()">
-      <svg
-        t="1684719940478"
-        class="arrow"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="2386"
-        width="30"
-        height="100"
-      >
+      <svg class="arrow" viewBox="0 0 1024 1024">
        <path
-          d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z"
-          fill="#ffffff"
-          p-id="2387"
+          d="M486.969 1014.101l-.683-.625-306.745-315.279a34.133 34.133 0 0 1 0-47.616l3.015-3.072a34.133 34.133 0 0 1 48.242-.682l.683.682 238.478 245.078-.057-858.454A34.133 34.133 0 0 1 504.036 0h3.3a34.133 34.133 0 0 1 34.132 34.133v870.97l250.653-257.594a34.133 34.133 0 0 1 48.242-.682l.682.682 3.015 3.072a34.133 34.133 0 0 1 0 47.616l-306.744 315.279a34.076 34.076 0 0 1-26.909 10.24h-2.105a34.02 34.02 0 0 1-21.333-9.615z"
        ></path>
      </svg>
    </div>
@ -50,7 +39,7 @@ const toNextPage = () => {
    transform: translate(-50%, -50%);
    white-space: nowrap;
    .sign {
-      color: RGBA(249, 89, 38, 1);
+      color: $theme-color;
    }
  }
  .to_bottom {
@ -60,16 +49,31 @@ const toNextPage = () => {
    width: 30px;
    height: 30px;
    cursor: pointer;
-    border: 2px solid #ffffff;
+    border: 1px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    bottom: 53px;
    left: 50%;
    transform: translateX(-50%);
+    transition: all 0.3s;
    .arrow {
-      // width: 17px;
-      // height: 10px;
+      width: 17px;
+      height: 20px;
+      fill: #fff;
+      animation: jump 1s ease infinite;
    }
  }
 }
+
+@keyframes jump {
+  0% {
+    transform: translateY(-1px);
+  }
+  50% {
+    transform: translateY(3px);
+  }
+  100% {
+    transform: translateY(-1px);
+  }
+}
 </style>
--- a/src/components/Product.vue
+++ b/src/components/Product.vue
@ -85,7 +85,7 @@ import A1 from '@/static/img/index/a1.png'
        display: flex;
        align-items: center;
        justify-content: space-between;
-        background: rgba(249, 89, 38, 0.3);
+        background: $light-background;
        .btn {
          display: flex;
          align-items: center;
@ -94,7 +94,7 @@ import A1 from '@/static/img/index/a1.png'
          padding: 17px 35px 17px 33px;
          width: 206px;
          height: 55px;
-          background: linear-gradient(90deg, #facc22, #f83600);
+          background: $btn-gradient;
          border-radius: 28px;
          cursor: pointer;
        }
@ -128,7 +128,7 @@ import A1 from '@/static/img/index/a1.png'
          bottom: 0;
          right: 0;
          padding: 30px 84px;
-          background: #f95926;
+          background: $theme-color;
          font-size: 22px;
          font-weight: 500;
          color: #ffffff;
--- a/src/components/detail/Video.vue
+++ b/src/components/detail/Video.vue
@ -21,12 +21,13 @@ import Play from '@/static/img/zhongxin/shipin2.png'
  .video {
    width: 76vw;
    height: calc(76vw / 1.78);
-    background: #000;
+    background: url(../../static/img/zhongxin/shipin.png) no-repeat;
+    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 90px;
    position: relative;
    .mask {
-      background: rgba(80, 100, 244, 0.7);
+      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 0;
      left: 0;
--- a/src/style.scss
+++ b/src/style.scss
@ -0,0 +1,4 @@
+html,
+body {
+  overflow-x: hidden;
+}