dlsx
/
hjb_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
8 Commits
1 Branch
0 Tags
17 MiB
 
 
 
 
 
Tag: Branch: Tree: develoop
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'develoop'
${ noResults }
hjb_pc/pages/homeIndex/bannerIndex.vue

907 lines
27 KiB
Raw Permalink Blame History

<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 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>
<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-box">
<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>
</div>
<div class="concerning-box">
<div class="concerning">
<div class="title">关于我们</div>
<div class="title-one">
花机宝网路科技，是一家为电商平台提供“SaaS”的网路科技公司。公司基于技术创新和应用，推动“技术性”降本
</div>
<div class="title-one">
发展“互联网+”，通过TCO“全生命周期”在智能时代的深度应用，实现电商行业的“降本增效”、“精益运营”。
</div>
<div class="bjc-round">
<div class="round">
<div class="left">
<div class="title">花机宝网络科技主要经营：</div>
<p><span>使命：</span>助力每一位中国人轻松实现电商梦想</p>
<p><span>愿景：</span>为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的机会</p>
<p><span>核心价值观： </span>源于创新、诚信经营、成就伙伴、合作共赢</p>
<p>
<span>战略目标：</span><br />
1、以科技进步、应用于技术创新为电商行业带来真正快乐。<br />
2、把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br />
3、以产品带动服务，以服务开拓市场，有选择的发展新业务。
</p>
</div>
<div class="right"><img src="../../assets/images/Group9855.png" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="information-box">
<div class="information">
<div class="title">行业动态 产业资讯</div>
<div class="title-one">汇集主流媒体报道、行业大咖采访、花店经营攻略等鲜花行业一手资讯</div>
<div class="footet-content">
<div class="left">
<div class="top">
<div class="left-top-bgc"><img src="../../assets/images/image63.png" alt="" /></div>
<div class="left-top-txt">
<div class="title">这家藏在西安老巷的“不正经”花店，到。。。大大大大大大。。</div>
<p>直到上世纪80年代中期，中国才开始出现真正意义上的花店。而随着后来新型营销方式突起、高端花卉品牌…</p>
</div>
</div>
<div class="bottom">
<div class="left-top-bgc"><img src="../../assets/images/image63.png" alt="" /></div>
<div class="left-top-txt">
<div class="title">这家藏在西安老巷的“不正经”花店，到。。。大大大大大大。。</div>
<p>直到上世纪80年代中期，中国才开始出现真正意义上的花店。而随着后来新型营销方式突起、高端花卉品牌…</p>
</div>
</div>
</div>
<div class="right">
<img src="../../assets/images/image63.png" alt="" />
</div>
</div>
</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;
background: url('../../assets/images/Group9849.png') no-repeat;
.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;
background-color: #fff;
}
.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 0.5208rem;
padding-top: 0.4167rem;
.app-title {
height: 0.3125rem;
color: #252b3a;
font-weight: 600;
font-size: 0.1354rem;
}
p {
color: #575d6c;
font-size: 0.0729rem;
margin: 0.1042rem 0;
}
.doload-app {
margin-top: 0.1563rem;
width: 1.3542rem;
height: 0.3125rem;
color: #fff;
font-size: 0.125rem;
background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
cursor: pointer;
text-align: center;
line-height: 0.3125rem;
transition: transform 0.3s ease;
border-radius: 0.026rem;
}
.doload-app:hover {
transform: scale(1.1);
}
}
}
}
.serve {
width: 100%;
background-color: #fff;
padding-top: 0.4167rem;
display: flex;
flex-direction: column;
align-items: center;
background: url('../../assets/images/Group9849.png') no-repeat;
background-position: bottom center;
.title {
width: 100%;
font-weight: 700;
text-align: center;
font-size: 0.1667rem;
color: #252b3a;
}
.title-two {
width: 100%;
text-align: center;
font-size: 0.0833rem;
color: #575d6c;
margin-top: 0.0938rem;
}
.serve-box {
padding-top: 0.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: 0.4167rem;
width: 0.2344rem;
height: 0.2344rem;
}
.title {
font-weight: 600;
color: #575d6c;
font-size: 0.0729rem;
}
.txt {
margin-top: 0.1042rem;
width: 0.9375rem;
text-align: center;
line-height: 0.1146rem;
font-size: 0.0677rem;
}
}
.item:nth-last-child(-n + 4) {
margin-top: 0.1042rem;
}
.item:hover {
transform: translateY(-5px);
}
}
.more-services {
width: 1.3021rem;
height: 0.2604rem;
color: #fff;
font-size: 0.0833rem;
line-height: 0.2604rem;
text-align: center;
border-radius: 0.026rem;
margin: 0.1563rem 0;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
transition: transform 0.3s ease;
}
.more-services:hover {
transform: scale(1.1);
}
}
.serve-box {
background-color: #fff;
}
.concerning-box {
width: 100%;
background-color: #fff;
padding-top: 0.2604rem;
.concerning {
width: 6.9427rem;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
margin: 0 auto;
.title {
font-size: 0.1667rem;
color: #252b3a;
font-weight: 600;
padding: 0.0521rem 0;
}
.title-one {
color: #575d6c;
font-size: 0.0833rem;
margin: 5px 0;
}
.bjc-round {
width: 100%;
height: 3.8854rem;
// background-color: #ecf0fd;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.1563rem;
.round {
width: 6.9427rem;
height: 6.9427rem;
border-radius: 50%;
background-color: #ecf0fd;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.4167rem;
.left {
flex: 1;
height: 3.6458rem;
display: flex;
flex-direction: column;
align-items: center;
.title {
color: #252b3a;
font-size: 0.1354rem;
margin-top: 0.5729rem;
}
.title::after {
content: 'SQLUTION';
display: block;
color: #575d6c;
font-size: 0.0729rem;
margin-top: 0.026rem;
margin-bottom: 0.4688rem;
}
p {
width: 1.6094rem;
color: #575d6c;
font-size: 0.0729rem;
margin: 0.0521rem 0;
span {
color: #252b3a;
font-weight: 600;
}
}
}
}
.right {
width: 3.6458rem;
height: 3.6458rem;
img {
width: 100%;
}
}
}
}
}
.information-box {
padding-top: 0.4167rem;
width: 100%;
background-color: #fff;
padding-bottom: .9375rem;
.information {
width: 6.25rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
.title {
color: #252b3a;
font-size: 0.1667rem;
font-weight: 600;
}
.title-one {
color: #575d6c;
font-size: 0.0833rem;
margin-top: 0.0781rem;
}
.footet-content {
width: 100%;
height: 2.6771rem;
display: flex;
margin-top: 0.3906rem;
.right {
width: 2.0625rem;
height: 100%;
img {
width: 100%;
height: 100%;
// transform: rotate(-90deg);
}
}
.left {
flex: 1;
margin-right: 0.1042rem;
.top {
width: 100%;
height: 50%;
display: flex;
.left-top-bgc {
width: 50%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.left-top-txt {
width: 50%;
height: 100%;
border: 1px dotted #aaa;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: left;
padding: 0.3177rem 0.1563rem 0.3542rem 0.2604rem;
.title {
width: 1.7031rem;
color: #252b3a;
font-size: 0.0833rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p {
margin-top: 0.1563rem;
width: 1.7031rem;
font-size: .0729rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.bottom {
width: 100%;
height: 50%;
width: 100%;
height: 50%;
display: flex;
.left-top-bgc {
width: 50%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.left-top-txt {
width: 50%;
height: 100%;
border: 1px dotted #aaa;
// border-style: dashed 4px 8px 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: left;
padding: 0.3177rem 0.1563rem 0.3542rem 0.2604rem;
order: -1;
.title {
width: 1.7031rem;
color: #252b3a;
font-size: 0.0833rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p {
margin-top: 0.1563rem;
width: 1.7031rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
font-size: .0729rem;
}
}
}
}
}
}
}
</style>