hjb_pc/pages/homeIndex/bannerIndex.vue

<template>
  <div class="banner">
    <div class="left">
      <div class="title-one">鲜花电商下单方<span>117405</span>家</div>
      <div class="title-tow">实名认证花店<span>316261</span>家</div>
      <div class="btn">
        <button>立即下单</button>
        <button>开始接单</button>
      </div>
    </div>
    <div class="right"><img src="../../assets/images/image19.png" alt="" /></div>
  </div>
  <div class="content">
    <ul>
      <li>
        <div class="sum">30W+</div>
        <div class="title">注册会员</div>
      </li>
      <li>
        <div class="sum">1200+</div>
        <div class="title">覆盖全国市/区/县</div>
      </li>
      <li>
        <div class="sum">8000W+</div>
        <div class="title">积累服务订单</div>
      </li>
      <li>
        <div class="sum">1S</div>
        <div class="title">最快接单只需</div>
      </li>
      <li>
        <div class="sum">30000+</div>
        <div class="title">日购订单</div>
      </li>
    </ul>
  </div>
  <div class="orders-box"></div>
  <div class="orders">
    <div class="edition">
      <div class="title">
        <div class="title-one">最新已成交订单</div>
        <div class="title-two">汇聚抖音小店、抖音团购、天猫、京东、美团、饿了么等各大电商平台海量订单、实时分发</div>
        <div class="title-therr">超过28W+花店在线接单</div>
        <div class="time-out">
          {{ `${time.year}-${time.month}-${time.day}` }}<span>{{ time.hours }}</span
          ><span>{{ time.minutes }}</span
          ><span>{{ time.seconds }}</span
          ><span class="content-day">今日已成交<i>1999</i>条</span>
        </div>
      </div>
      <div class="commodity-box">
        <div class="commodity">
          <div class="left">
            <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
            <div class="botton-txt">接单耗时3分钟</div>
          </div>
          <div class="right">
            <div class="essential-address">江西省 萍乡市 安源区</div>
            <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
            <div class="time">配送时间：2023-12-26 13:10</div>
            <div class="price">
              <div class="left-price"><span>￥</span>110</div>
              <div class="icon">
                <el-icon><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="commodity">
          <div class="left">
            <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
            <div class="botton-txt">接单耗时3分钟</div>
          </div>
          <div class="right">
            <div class="essential-address">江西省 萍乡市 安源区</div>
            <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
            <div class="time">配送时间：2023-12-26 13:10</div>
            <div class="price">
              <div class="left-price"><span>￥</span>110</div>
              <div class="icon">
                <el-icon><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="commodity">
          <div class="left">
            <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
            <div class="botton-txt">接单耗时3分钟</div>
          </div>
          <div class="right">
            <div class="essential-address">江西省 萍乡市 安源区</div>
            <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
            <div class="time">配送时间：2023-12-26 13:10</div>
            <div class="price">
              <div class="left-price"><span>￥</span>110</div>
              <div class="icon">
                <el-icon><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="commodity">
          <div class="left">
            <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
            <div class="botton-txt">接单耗时3分钟</div>
          </div>
          <div class="right">
            <div class="essential-address">江西省 萍乡市 安源区</div>
            <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
            <div class="time">配送时间：2023-12-26 13:10</div>
            <div class="price">
              <div class="left-price"><span>￥</span>110</div>
              <div class="icon">
                <el-icon><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="commodity">
          <div class="left">
            <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
            <div class="botton-txt">接单耗时3分钟</div>
          </div>
          <div class="right">
            <div class="essential-address">江西省 萍乡市 安源区</div>
            <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
            <div class="time">配送时间：2023-12-26 13:10</div>
            <div class="price">
              <div class="left-price"><span>￥</span>110</div>
              <div class="icon">
                <el-icon><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="commodity">
          <div class="left">
            <div class="image"><img src="../../assets/images/image64.png" alt="" /></div>
            <div class="botton-txt">接单耗时3分钟</div>
          </div>
          <div class="right">
            <div class="essential-address">江西省 萍乡市 安源区</div>
            <div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div>
            <div class="time">配送时间：2023-12-26 13:10</div>
            <div class="price">
              <div class="left-price"><span>￥</span>110</div>
              <div class="icon">
                <el-icon><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="doload">
    <div class="title">产品下载</div>
    <div class="app-info">
      <div class="img"><img src="../../assets/images/image70.png" alt="" /></div>
      <div class="app-info-txt">
        <div class="app-title">花机宝网络科技主要经营：</div>
        <p>一、聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易平台，助力电商用户高效运营</p>
        <p>二、提供线上外卖配送聚合服务，打通全域电商平台物流同城配送，实现一键操作和管理。</p>
        <p>三、 提供电商运营管理聚合软件，多门店管理、门店产品一键复制、门店产品一键批量设置折扣价格、多平台消息聚合、多门店评价管理、多门店诊断等服务。</p>
        <div class="doload-app">下载APP</div>
      </div>
    </div>
  </div>
  <div class="serve">
    <div class="title">功能强大、安全、稳定的服务应用</div>
    <div class="title-two">多年技术沉淀，20+项服务共筑服务矩阵</div>
    <div class="serve-box">
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
      <div class="item">
        <div class="icon"></div>
        <div class="title">微花店</div>
        <div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div>
      </div>
    </div>
    <div class="more-services">查看更多服务</div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { Right } from '@element-plus/icons-vue'
const time: any = ref({})
const getDatTime = () => {
  const currentDate = new Date()

  const year = currentDate.getFullYear()
  const month = currentDate.getMonth() + 1 // 月份从0开始，需要加1
  const day = currentDate.getDate()
  const hours = currentDate.getHours()
  const minutes = currentDate.getMinutes()
  const seconds = currentDate.getSeconds()
  time.value.year = year
  time.value.month = month
  time.value.day = day
  time.value.hours = hours
  time.value.minutes = minutes
  time.value.seconds = seconds
  // console.log(time.value);
}
setInterval(() => {
  getDatTime()
}, 1000)
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 3.0208rem;
  display: flex;
  .left {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title-one {
      font-weight: 700;
      font-size: 0.1667rem;
      span {
        font-size: 0.2188rem;
        color: #ff4e8d;
      }
    }
    .title-tow {
      font-weight: 700;
      font-size: 0.1667rem;
      span {
        font-size: 0.2188rem;
        color: #ff4e8d;
      }
    }
    .btn {
      width: 100%;
      margin-top: 0.1563rem;
      display: flex;
      justify-content: center;
      button {
        width: 0.6354rem;
        height: 0.2083rem;
        margin: 0.0521rem;
        background-color: transparent;
        color: #252b3a;
        border: 1px solid #252b3a;
        font-size: 0.0833rem;
        // border-color: #252B3A;
      }
    }
  }
  .right {
    width: 70%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  width: 100%;
  background: linear-gradient(90deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
  height: 0.5208rem;
  ul {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    li {
      width: 1.25rem;
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .sum {
        font-size: 0.125rem;
        font-weight: 700;
      }
      .title {
        font-size: 0.0729rem;
      }
    }
  }
}
.orders {
  // margin-top: .4167rem;
  padding: 0.4167rem 0;
  width: 100%;
  background-color: #fff;
  // height: 500px;
  .edition {
    width: 6.25rem;
    margin: 0 auto;
    .title {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title-one {
        font-size: 0.1667rem;
        color: #252b3a;
      }
      .title-two {
        margin-top: 0.0833rem;
        line-height: 0.1146rem;
        font-size: 0.0833rem;
        color: #575d6c;
      }
      .title-therr {
        line-height: 0.1146rem;
        font-size: 0.0833rem;
        color: #575d6c;
      }
      .time-out {
        margin-top: 0.2344rem;
        font-size: 0.0833rem;
        color: #252b3a;
        span {
          color: #fff;
          display: inline-block;
          width: 0.1563rem;
          height: 0.1458rem;
          border-radius: 0.026rem;
          background-color: #ff518f;
          text-align: center;
          line-height: 0.1458rem;
          margin: 0 0.0313rem;
        }
        .content-day {
          width: auto;
          background: none;
          color: #000;
          i {
            font-size: 0.1146rem;
            color: #ff518f;
            font-style: normal;
            padding: 0 0.0156rem;
          }
        }
      }
    }
  }
}
.commodity-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.1563rem;
}
.commodity {
  box-shadow: 1px 1px 9px 6px rgb(0 0 0 / 4%);
  padding: 0.1042rem;
  width: 2.0469rem;
  height: 1.1198rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0.0521rem 0.0521rem 0.0521rem;
  margin-left: 0;
  transition: transform 0.3s ease; /* 过渡效果，持续时间为0.3秒，缓动函数为ease */

  .left {
    width: 0.75rem;
    height: 0.875rem;
    .image {
      width: 100%;
      height: 0.7396rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .botton-txt {
      height: 0.1302rem;
      width: 100%;
      background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
      color: #ff4e8d;
      text-align: center;
      line-height: 0.1302rem;
      font-size: 0.0625rem;
    }
  }
  .right {
    flex: 1;
    margin-left: 0.1042rem;
    height: 100%;
    .essential-address {
      font-size: 0.0833rem;
    }
    .detailed-address {
      margin-top: 0.0521rem;
      color: #555555;
      font-size: 0.0729rem;
    }
    .time {
      height: 0.1823rem;
      margin-top: 0.1563rem;
      color: #252b3a;
      font-size: 0.0677rem;
      border-bottom: 1px solid #e4e4e4;
    }
    .price {
      margin-top: 0.0625rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-price {
        font-size: 0.125rem;
        color: #ff4e8d;
        span {
          font-size: 0.0729rem;
        }
      }
      .icon {
        font-size: 0.1042rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
    }
  }
}
.commodity:nth-child(3n) {
  margin-right: 0;
}
.commodity:hover {
  transform: translateY(-5px);
}
.doload {
  width: 100%;
  height: 3.8021rem;
  background: url('../../assets/images/image20.png') no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    color: #252b3a;
    font-size: 0.1667rem;
    font-weight: 600;
  }
  .app-info {
    display: flex;
    .img {
      width: 2.3646rem;
      height: 2.3646rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .app-info-txt{
      width: 3.3333rem;
      padding: 0 .5208rem;
      padding-top:.4167rem;
      .app-title{
        height: .3125rem;
        color: #252B3A;
        font-weight: 600;
        font-size: .1354rem;
      }
      p{
        color: #575D6C;
        font-size: .0729rem;
        margin: .1042rem 0;
      }
      .doload-app{
        margin-top: .1563rem;
        width: 1.3542rem;
        height: .3125rem;
        color: #fff;
        font-size: .125rem;
        background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
        cursor: pointer;
        text-align: center;
        line-height: .3125rem;
        transition: transform 0.3s ease;
        border-radius: .026rem;
      }
      .doload-app:hover{
        transform: scale(1.1);
      }
    }
  }
}
.serve{
  width: 100%;
  background-color: #fff;
  padding-top: .4167rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    width: 100%;
    font-weight: 700;
    text-align: center;
    font-size: .1667rem;
    color: #252B3A;
   
  }
  .title-two{
    width: 100%;
    text-align: center;
    font-size: .0833rem;
    color: #575D6C;
    margin-top: .0938rem;
  }
  .serve-box{
   padding-top: .2604rem;
    width: 6.25rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
      width: 1.375rem;
      height: 1.9271rem;
      background: url('../../assets/images/Group9591.png') no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 1px 1px 9px 6px rgb(0 0 0 / 4%);
      transition: transform 0.3s ease;
      .icon{
        margin-top: .4167rem;
        width: .2344rem;
        height: .2344rem;
        
      }
      .title{
        font-weight: 600;
        color: #575D6C;
        font-size: .0729rem;
      }
      .txt{
        margin-top: .1042rem;
        width: .9375rem;
        text-align: center;
        line-height: .1146rem;
      }
    }
    .item:nth-last-child(-n+4){
      margin-top: .1042rem;
    }
    .item:hover{
      transform: translateY(-5px);
    }
  }
  .more-services{
    width: 1.3021rem;
    height: .2604rem;
    color: #fff;
    font-size: .0833rem;
    line-height:.2604rem ;
    text-align: center;
    border-radius: .026rem;
    margin: .1563rem 0 ;
    background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
    transition:transform .3s ease;
  }
  .more-services:hover{
    transform: scale(1.1);
  }
}
</style>