机器臂

dcc

2024-06-13 fad052d0879be9d0bf85794ad686d4badaedd864

 src/views/market/components/pageDetail.vue

@@ -44,6 +44,64 @@
      </div>
    </div>
    <div class="bg-img">
      <div class="jq">
        <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="1000" height="1000"
          preserveAspectRatio="xMidYMid meet"
          style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
          <defs>
            <clipPath id="__lottie_element_48">
              <rect width="1000" height="1000" x="0" y="0"></rect>
            </clipPath>
            <image xlink:href="@/assets/images/img_0.png"></image>
            <image xlink:href="@/assets/images/img_1.png"></image>
            <image xlink:href="@/assets/images/img_2.png"></image>
            <image xlink:href="@/assets/images/img_3.png"></image>
            <image xlink:href="@/assets/images/img_4.png"></image>
            <image xlink:href="@/assets/images/img_5.png"></image>
            <image xlink:href="@/assets/images/img_6.png"></image>
          </defs>
          <g clip-path="url(#__lottie_element_48)">
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,270,662.5)" opacity="1">
              <image width="376px" height="339px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_6.png"></image>
            </g>
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,520.5,110.54200744628906)" opacity="1">
              <image class="img_5" width="323px" height="252px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_5.png"></image>
            </g>
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,670.3294067382812,283.9642028808594)"
              opacity="1">
              <image class="img_4" width="355px" height="365px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_4.png"></image>
            </g>
            <g class="png" style="display: block;"
              transform="matrix(0.9999943375587463,0.003364115720614791,-0.003364115720614791,0.9999943375587463,508.53765869140625,565.6394653320312)"
              opacity="1">
              <image class="img_3" width="376px" height="319px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_3.png"></image>
            </g>
            <g class="png" style="display: block;"
              transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,736.8223876953125,519.9822387695312)"
              opacity="1">
              <image class="img_2" width="247px" height="246px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_2.png"></image>
            </g>
            <g class="png" style="display: block;"
              transform="matrix(0.14042603969573975,0.9900911450386047,-0.9900911450386047,0.14042603969573975,583.931884765625,641.3410034179688)"
              opacity="1">
              <image class="img_1" width="287px" height="286px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_1.png"></image>
            </g>
            <g class="png" style="display: block;"
              transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,780.9017333984375,260.44317626953125)"
              opacity="1">
              <image class="img_0" width="93px" height="93px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_0.png"></image>
            </g>
          </g>
        </svg>
      </div>
      <div class="suspension">
        <div class="title">{{ $t('message.home["立刻下載COLLOTI手機 App!"]') }}</div>
        <div class="btns">
@@ -149,7 +207,6 @@


<style scoped lang="css">

.welcome {
  height: 510px;
  width: 100%;
@@ -185,6 +242,7 @@
        margin-right: 8px
      }
    }

    .or {
      position: relative;
      width: 408px;
@@ -192,6 +250,7 @@
      height: 1px;
      background: #afb1bb;
      text-align: center;

      span {
        position: absolute;
        left: 50%;
@@ -207,9 +266,11 @@
        background: #edf1ff;
      }
    }

    .btns {
      display: flex;
      margin-top: 16px;

      a {
        cursor: pointer;
        width: 196px;
@@ -223,14 +284,17 @@
        position: relative;
        border-radius: 90px;
        border: 1px solid #afb1bb;

        &:first-child {
          margin-left: 0
        }

        img{
          flex: 0 0 24px;
          width: 24px;
          height: 24px;
        }

        .p1{
          font-size: 17px;
          font-family: Noto Sans SC;
@@ -239,6 +303,7 @@
          line-height: 24px;
          margin-left: 8px;
        }

        .mask{
          display: none;
          position: absolute;
@@ -252,6 +317,7 @@
          box-sizing: border-box;
          padding-top: 6px;
          box-shadow: 0 2px 6px rgba(0,0,0,.1);

          &:before {
            content: "";
            position: absolute;
@@ -264,6 +330,7 @@
            transform: rotate(45deg);
            background: #fff
          }

          .mask-title {
            font-size: 12px;
            font-family: Noto Sans SC;
@@ -272,6 +339,7 @@
            line-height: 35px;
            text-align: center;
          }

          img {
            display: block;
            width: 110px;
@@ -279,6 +347,7 @@
            margin: 0 auto;
            margin-top: 7px;
          }

          button {
            width: 137px;
            height: 26px;
@@ -296,11 +365,13 @@
          }
        }
      }

      a.google-play img {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
      }

      a:hover .mask {
        display: block;
      }
@@ -376,7 +447,14 @@
  top: -70px;
  width: 866px;
  height: 640px;
  background: url(https://colloti.com/img/right-bg-1.c9ac5e41.svg) 166px 0px no-repeat
  background: url(https://colloti.com/img/right-bg-1.c9ac5e41.svg) 166px 0px no-repeat;
  .jq {
        position: absolute;
        top: 152px;
        left: 149px;
        width: 504.339px;
        height: 510.84px
    }
}

.welcome .bg-img .suspension {
@@ -387,8 +465,75 @@
  height: 139px;
  border-radius: 18px;
  background: hsla(0, 0%, 100%, .8);
  animation: move-21751b44 4s linear 0s infinite
  animation: move-21751b44 4s linear 0s infinite;
}

@keyframes move-21751b44 {
  0% {
    transform: translateY(0);
  }

  49% {
    transform: translateY(20px);
  }

  98% {
    transform: translateY(0);
  }
}

.img_1{
  transform-origin: 14.5% 14.5%;
  animation: img_1_move 4s linear infinite;
}
.img_2{
  transform-origin: 12.5% 12.5%;
  animation: img_1_move 4s linear infinite;
}

.img_0{
  transform-origin: 5% 5%;
  animation: img_1_move 4s linear infinite;
}


.img_3{
  transform-origin: 12.5% 12.5%;
  animation: img_3_move 4s linear infinite;
}

.img_4{
  animation: move-21751b44 4s linear 0s infinite;
}

.img_5{
  animation: move-21751b44 4s linear 0s infinite;
}
@keyframes img_3_move {
  0% {
    transform: rotate(0deg);
  }

  98% {
    transform: rotate(-5deg);
  }
}


@keyframes img_1_move {
  0% {
    transform: rotate(0deg);
  }

  /* 49% {
    transform: rotate(180deg) translateY(10px);
  } */

  98% {
    transform: rotate(90deg) translateX(10px);
  }
}


.welcome .bg-img .suspension .title {
  line-height: 20px;
@@ -580,5 +725,7 @@
  }
}

a {text-decoration: none;}
a {
  text-decoration: none;
}
</style>