You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
610 lines
18 KiB
610 lines
18 KiB
<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' |
|
import {linkNavigateTo} from '~/utils/util' |
|
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>
|
|
|