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.
1208 lines
53 KiB
1208 lines
53 KiB
<script lang="ts" setup> |
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
import { useCounterStore } from '@/stores/nav' |
|
import { linkNavigateTo } from '~/utils/util' |
|
const AboutUs = ref(null) |
|
let isHover = false |
|
const mainBusiness = ref(null) |
|
const indexBus = ref(1) |
|
const isShow = ref(false) |
|
const carouselArr = ref([ |
|
{ |
|
name: 'carousel1.png', |
|
tit: '电商转单平台', |
|
conText: |
|
' 聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，通过转单平台连接本地商户，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易服务，实现线上线下无缝对接，助力电商用户和本地商户无缝对接，高效提升商户经营业绩。', |
|
}, |
|
{ |
|
name: 'carousel2.png', |
|
tit: '同城配送聚合平台', |
|
conText: |
|
' 提供线上同城配送聚合服务，打通全域电商平台同城物流配送，通过顺丰同城、达达、闪送、美团同城、蜂鸟、UU跑腿、货拉拉等同城配送平台，实现多平台对比，一键操作发单，降低商户配送成本，提高商户配送满意度。', |
|
}, |
|
{ |
|
name: 'carousel3.png', |
|
tit: '订单运营管理系统', |
|
conText: |
|
' 多平台电商运营管理聚合软件，包含：多门店管理、门店产品复制、门店产品折扣设置、多平台消息聚合、多门店评价管理、多门店诊断等服务，提高商户运营效率。', |
|
}, |
|
]) |
|
const introduction: any = ref(null) |
|
const videoBox: any = ref(null) |
|
onMounted(() => { |
|
useCounterStore().increment(2) |
|
|
|
let items = document.querySelectorAll('.carousel-3d') |
|
|
|
function layout(ind: number) { |
|
const offsetStep = 300 |
|
const scaleStep = 0.6 |
|
const opacityStep = 0.5 |
|
for (let i = 0; i < items.length; i++) { |
|
const item = items[i] |
|
|
|
const dis = Math.abs(i - ind) |
|
// const sign = i -index>0?1:-1 |
|
const sign = Math.sign(i - ind) |
|
let xOffset = (i - ind) * offsetStep |
|
if (i !== ind) { |
|
xOffset = xOffset + 100 * sign |
|
} |
|
const scale = scaleStep ** dis |
|
// rotateY |
|
const rotateY = 60 * -sign |
|
// @ts-ignore |
|
item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)` |
|
// opacity |
|
const opacity = opacityStep ** dis |
|
// @ts-ignore |
|
item.style.opacity = opacity |
|
const zIdex = items.length - dis |
|
// @ts-ignore |
|
item.style.zIndex = zIdex |
|
} |
|
} |
|
layout(indexBus.value) |
|
const prev = document.querySelector('.prev') |
|
const next = document.querySelector('.next') |
|
|
|
// @ts-ignore |
|
prev.onclick = function () { |
|
--indexBus.value |
|
if (indexBus.value < 0) { |
|
indexBus.value = items.length - 1 |
|
} |
|
layout(indexBus.value) |
|
} |
|
// @ts-ignore |
|
next.onclick = function () { |
|
++indexBus.value |
|
if (indexBus.value > items.length - 1) { |
|
indexBus.value = 0 |
|
} |
|
layout(indexBus.value) |
|
} |
|
// setInterval(() => { |
|
// // @ts-ignore |
|
// if (!isHover && mainBusiness.value.getBoundingClientRect().bottom >= window.innerHeight&&!isShow.value) next.click() |
|
// }, 2000) |
|
items.forEach((item, i) => { |
|
// @ts-ignore |
|
item.onclick = function () { |
|
indexBus.value = i |
|
layout(indexBus.value) |
|
} |
|
}) |
|
|
|
let scrollI = 0 |
|
// function scrLayout() { |
|
// // @ts-ignore |
|
// introduction.value.childNodes[0].style.transform = `scale(${1 - scrollI * 0.03}) translateY(${-scrollI * (65 + 200)}px)` |
|
// // @ts-ignore |
|
// introduction.value.childNodes[1].style.transform = `scale(${1 + scrollI * 0.02}) translateY(${-scrollI * (90 + 20 + 90)}px)` |
|
// // @ts-ignore |
|
// introduction.value.childNodes[0].style.opacity = 1.5 - scrollI / 5 |
|
// // @ts-ignore |
|
// introduction.value.childNodes[1].style.opacity = scrollI / 5 + 0.2 |
|
// } |
|
function rightLayout() { |
|
let newScrI = scrollI - 5 |
|
|
|
// @ts-ignore |
|
let bei = introduction.value.childNodes[1].getBoundingClientRect().width / 10 |
|
// @ts-ignore |
|
let indexTX = introduction.value.childNodes[1].style.transform.search(' translateX') |
|
// @ts-ignore |
|
introduction.value.childNodes[1].style.transform = |
|
introduction.value.childNodes[1].style.transform + ` translateX(${newScrI * bei}px)` |
|
// @ts-ignore |
|
introduction.value.childNodes[1].style.opacity = 1 - newScrI / 5 |
|
let doc = document.querySelector('.container-ab') |
|
// @ts-ignore |
|
doc.childNodes[2].style.transform = `translateX(${newScrI * 20}%)` |
|
// @ts-ignore |
|
doc.childNodes[3].style.transform = `translateX(${-newScrI * 20}%)` |
|
|
|
if (newScrI == 1) { |
|
// @ts-ignore |
|
doc.childNodes[2].style.transform = `translateX(0%)` |
|
// @ts-ignore |
|
doc.childNodes[3].style.transform = `translateX(0%)` |
|
} |
|
} |
|
// 192 |
|
let isPreDefault = true, |
|
i = 0 |
|
// document.body.addEventListener('mousewheel', function (e) { |
|
// if (e.target !== introduction.value) isPreDefault = true |
|
// // @ts-ignore |
|
// introduction.value.childNodes.forEach(item => { if (e.target !== item) isPreDefault = true }) |
|
// }) |
|
// @ts-ignore |
|
// document.querySelector('.container-ab').addEventListener('mousewheel', function (e) { |
|
// // @ts-ignore |
|
// if (Math.sign(e.deltaY) == -1) |
|
// if (window.scrollY !== 0) { |
|
// e.preventDefault() |
|
// window.scrollTo({ top: 0, behavior: "smooth" }) |
|
// return |
|
// } |
|
// }) |
|
// @ts-ignore |
|
// introduction.value.addEventListener('mousewheel', function (e) { |
|
// if (Math.sign(e.deltaY) == -1) |
|
// if (window.scrollY !== 0) { |
|
// e.preventDefault() |
|
// window.scrollTo({ top: 0, behavior: "smooth" }) |
|
// return |
|
// } |
|
|
|
// isPreDefault = true |
|
// if (Math.sign(e.deltaY) == 1) { |
|
// scrollI++ |
|
// if (scrollI <= 5) scrLayout() |
|
// // if (scrollI > 5 && scrollI <= 10) rightLayout() |
|
|
|
// if (scrollI == 8) { |
|
// scrollI-- |
|
// isPreDefault = false |
|
// // if (i++ >= 3) isPreDefault = false |
|
// // else isPreDefault = true |
|
// } |
|
// } |
|
// if (Math.sign(e.deltaY) == -1) { |
|
// if (scrollI !== 0) scrollI-- |
|
// if (scrollI <= 5) scrLayout() |
|
// // if (scrollI > 5 && scrollI <= 10) rightLayout() |
|
// if (scrollI == 0) { |
|
// // @ts-ignore |
|
// scrollI++, videoBox.value.pause() |
|
// isPreDefault = false |
|
// // if (i++ >= 3) isPreDefault = false |
|
// // else isPreDefault = true |
|
// } |
|
// } |
|
// if (isPreDefault) e.preventDefault() |
|
// }) |
|
|
|
// window.addEventListener('click',(e)=>console.log(e.target)) |
|
|
|
// top.value = document.querySelector('.AboutUs')?.getBoundingClientRect().top |
|
// const moduleAll = document.querySelectorAll('.module') |
|
|
|
// window.addEventListener('mousewheel', e => { |
|
// e.preventDefault() |
|
// // @ts-ignore |
|
// diff.value -= e.deltaY / 10 |
|
// // @ts-ignore |
|
// moduleAll.forEach((el, index) => { |
|
// if (index >= cont.value+1) { |
|
// el.style.transform = `translateY(${diff.value}px)` |
|
// console.log(2); |
|
|
|
// } |
|
// }) |
|
// if (diff.value <= 0) {// 上 |
|
// if(reset()){ |
|
// console.log(0); |
|
|
|
// cont.value++ |
|
// diff.value=0 |
|
// } |
|
// } else {// 下 |
|
// if(reset()){ |
|
// console.log(1); |
|
|
|
// cont.value++ |
|
// diff.value=0 |
|
// } |
|
// } |
|
// function reset() { |
|
// return Math.abs(diff.value + 50) >= window.innerHeight |
|
// } |
|
// }, { passive: false }) |
|
}) |
|
const goToLinkUrl = async (url: any) => { |
|
// console.log('/activity/information_info?informationId=1'); |
|
const res = url.split('?') |
|
const link = res[0] |
|
const id = res[1].split('=')[1] |
|
await linkNavigateTo(link, { informationId: id }) |
|
window.scrollTo({ |
|
top: 0, |
|
behavior: 'smooth', |
|
}) |
|
} |
|
// const top = ref() |
|
// const diff = ref(0) |
|
// const cont = ref(0) |
|
// document.documentElement.style.setProperty('--wid', '500px') |
|
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue' |
|
import { transform } from 'typescript' |
|
// @ts-ignore |
|
function handleHover(bool) { |
|
isHover = bool |
|
} |
|
// document.body.style.overflowY = 'hidden' |
|
|
|
// 滚动 |
|
const rollBox = <any>ref(null) |
|
let done = false |
|
onMounted(() => { |
|
done=false |
|
let cont = 0 |
|
const left: any = document.querySelector('#first1')?.getBoundingClientRect().left |
|
function handleRoll() { |
|
if (document.querySelector('#first2')?.getBoundingClientRect().left as number <= left) { |
|
rollBox.value.scrollLeft = cont |
|
cont = 0 |
|
} |
|
let scale = Number(window.getComputedStyle(document.documentElement).fontSize.slice(0,-2))/192 |
|
if(scale<=4&&scale>=3.9)scale=4 |
|
if(scale<=0.25)scale=0.25 |
|
rollBox.value.scrollLeft += 1.5 * scale |
|
cont = rollBox.value.scrollLeft |
|
} |
|
|
|
let start: any, previousTimeStamp: any |
|
function runRoll(timestamp: any) { |
|
if (start === undefined) start = timestamp |
|
const elapsed = timestamp - start |
|
if (previousTimeStamp !== timestamp && !done) handleRoll() |
|
previousTimeStamp = timestamp |
|
if (!done) window.requestAnimationFrame(runRoll) |
|
} |
|
window.requestAnimationFrame(runRoll) |
|
rollBox.value.onmouseover = function () { |
|
done = true |
|
} |
|
rollBox.value.onmouseout = function () { |
|
done = false |
|
window.requestAnimationFrame(runRoll) |
|
} |
|
}) |
|
onBeforeUnmount(() => done = true) |
|
|
|
onMounted(() => { |
|
try { |
|
const vdo = videoBox.value |
|
function play() { |
|
const ctx = new AudioContext(); |
|
const canAutoPlay = ctx.state === 'running' |
|
ctx.close() |
|
if (canAutoPlay) vdo.muted = false |
|
else vdo.muted = true |
|
} |
|
play() |
|
} catch (error) { |
|
console.log(error); |
|
|
|
} |
|
}) |
|
onMounted(()=>{ |
|
videoBox.value.addEventListener('loadeddata', function() { |
|
console.log('视频数据已加载完成'); |
|
// 在这里你可以执行其他操作，比如播放视频等。 |
|
videoBox.value.play(); // 例如，视频数据加载完成后自动播放。 |
|
}); |
|
}) |
|
onBeforeUnmount(()=>videoBox.value.pause()) |
|
const config = useRuntimeConfig(); |
|
</script> |
|
|
|
<template> |
|
<div class="AboutUs" ref="AboutUs"> |
|
<div class="company-introduction" style="overflow: hidden" ref="introduction"> |
|
<div class="top" style="margin-top: .1563rem"> |
|
<div style="display: flex; flex-direction: column; align-items: center"> |
|
<div> |
|
<div style="width: 10vw"></div> |
|
<div class="center" style="width: 60vw"> |
|
<h1 style="text-align: center; font-size: .2083rem">公司介绍</h1> |
|
<div style="margin: auto; font-size: .0938rem; margin-top: .1042rem"> |
|
<span |
|
style="line-height: .1563rem"> 花机宝网络科技，是一家为电商平台提供“SaaS”服务的网络科技公司。公司基于技术创新和应用，推动“技术性”降本，发展“互联网+”，通过TCO“全生命周期”在智能时代的深度应用，实现电商行业的“降本增效”、“精益运营”。</span><br /> |
|
<span |
|
style="line-height: .1563rem"> 花机宝专注于转单交易软件，为线下实体花店、蛋糕店和基于各大电商平台进行销售的商家提供了通道，解决线上商城跨区转单难，线下门店订单少的问题。</span><br /> |
|
<span |
|
style="line-height: .1563rem"> 花机宝为电商商户提供订单全链路的“SaaS”服务，包括订单管理、同城即时配送管理，打印管理、门店运营等服务。</span><br /> |
|
<span |
|
style="line-height: .1563rem"> “SaaS”服务的客户群体为国内电商商家，覆盖大型餐饮集团、连锁商户、中小商户等，商户类别覆盖有浪漫鲜花、烘焙蛋糕、龙虾烧烤、甜品饮品、果蔬生鲜、超市百货、小吃夜宵和异国料理等。</span><br /> |
|
<span style="color: #a67d3d"> 一、 电商聚合转单系统:</span><br /> |
|
<span style="line-height: .1563rem"> |
|
|
|
聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，通过转单平台连接本地商户，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易服务，实现线上线下无缝对接，助力电商用户和本地商户无缝对接，高效提升商户经营业绩。 |
|
</span><br /> |
|
<span style="display: flex;justify-content: center;"> |
|
<el-image style="width: 6.6094rem;" src="/images/tit1.png"></el-image> </span><br /> |
|
<span style="color: #a67d3d"> 二、 同城配送聚合系统</span><br /> |
|
<span style="line-height: .1563rem"> |
|
|
|
提供线上同城配送聚合服务，打通全域电商平台同城物流配送，通过顺丰同城、达达、闪送、美团同城、蜂鸟、UU跑腿、货拉拉等同城配送平台，实现多平台对比，一键操作发单，降低商户配送成本，提高商户配送满意度。 |
|
</span><br /> |
|
<span style="display: flex;justify-content: center;"> |
|
<el-image style="width: 6.6094rem;" src="/images/tit2.png"></el-image> </span><br /> |
|
<span style="color: #a67d3d">三、 电商运营管理系统</span><br /> |
|
<span style="line-height: .1563rem"> |
|
|
|
多平台电商运营管理聚合软件，包含：多门店管理、门店产品复制、门店产品折扣设置、多平台消息聚合、多门店评价管理、多门店诊断等服务，提高商户运营效率。 </span><br /> |
|
<span style="display: flex;justify-content: center;"> |
|
<el-image style="width: 6.6094rem;" src="/images/tit3.png"></el-image> </span><br /> |
|
<div class="right" style="width: 60vw"> |
|
<h1 style="text-align: center; font-size: .2083rem">公司企业文化</h1> |
|
<span style="display: flex;justify-content: center;"> |
|
<el-image style="width: 6.6094rem;" src="/images/tit4_.png"></el-image> </span> |
|
<!-- <div style="display: flex; justify-content: center"> |
|
<div style="margin: auto; font-size: 13px"> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #a67d3d">使命</span>:助力每一位中国人轻松实现电商梦想<br /></span> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #a67d3d">愿景</span>:为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的<br /></span> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #a67d3d">机会</span>:核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br /></span> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #a67d3d">战略目标</span>:<br /> 核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br /></span> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #4a766e">1、</span>以科技进步、应用于技术创新为电商行业带来真正快乐。<br /></span> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #4a766e">2、</span>把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br /></span> |
|
<span style="line-height: 30px"><span |
|
style="font-size: 16px; color: #4a766e">3、</span>以产品带动服务，以服务开拓市场，有选择的发展新业务。<br /></span> |
|
</div> |
|
</div> --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div style="width: 4.651rem; height: 2.625rem; margin: auto; position: relative; top: 15%; margin-top: .2604rem"> |
|
<video ref="videoBox" preload="auto" :src="`${config.public.apiAdminUrl}/huajibao.mp4`" controls muted autoplay loop /> |
|
<!-- https://apia.huajibao.cn/hjbimage/huajibao.mp4 --> |
|
</div> |
|
</div> |
|
|
|
<div class="module certificateOrPlaque" style="margin: .2604rem 0"> |
|
<div class="header" style="text-align: center"> |
|
<h1>获得的荣誉</h1> |
|
</div> |
|
<div ref="rollBox" style=" |
|
height: 2.3438rem; |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: wrap; |
|
width: 80%; |
|
margin: .2604rem auto 0; |
|
overflow: hidden; |
|
"> |
|
<div id="first1" style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信供应商等级证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信经营示范单位.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信企业家.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信职业经理人证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业1.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业2.jpg" alt="" /> |
|
</div> |
|
<!-- <div |
|
style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝互联网行业.jpg" |
|
alt=""> |
|
</div> |
|
<div |
|
style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝品牌荣誉证书.jpg" |
|
alt=""> |
|
</div> --> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/立信单位证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/企业信用等级证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" |
|
src="/images/公司证书+牌匾/四川花机宝网络科技有限公司_双3550-通用证书_效果图.png" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/行业诚信单位证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌1.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌2.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/质量、服务诚信单位.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/重合同守信用企业.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/资信等级证书.jpg" alt="" /> |
|
</div> |
|
<!-- --> |
|
<div id="first2" style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信供应商等级证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信经营示范单位.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信企业家.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信职业经理人证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业1.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业2.jpg" alt="" /> |
|
</div> |
|
<!-- <div |
|
style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝互联网行业.jpg" |
|
alt=""> |
|
</div> |
|
<div |
|
style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝品牌荣誉证书.jpg" |
|
alt=""> |
|
</div> --> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/立信单位证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/企业信用等级证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" |
|
src="/images/公司证书+牌匾/四川花机宝网络科技有限公司_双3550-通用证书_效果图.png" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/行业诚信单位证书.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌1.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌2.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/质量、服务诚信单位.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/重合同守信用企业.jpg" alt="" /> |
|
</div> |
|
<div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem"> |
|
<img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/资信等级证书.jpg" alt="" /> |
|
</div> |
|
</div> |
|
<!-- <div class="cRP_center" style="margin-top: 50px;"> |
|
<div> |
|
<el-carousel :interval="4000" type="card" height="300px" style="margin: auto;width: 80%;"> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/互联网行业1.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/互联网行业1.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/互联网行业1.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/互联网行业1.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/诚信供应商等级证书.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/诚信经营示范单位.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/诚信职业经理人证书.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/互联网行业1.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/互联网行业2.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/花机宝品牌荣誉证书.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/立信单位证书.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/企业信用等级证书.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/四川花机宝网络科技有限公司_双3550-通用证书_效果图.png" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/行业诚信单位证书.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/引领品牌1.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/引领品牌2.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/质量、服务诚信单位.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/重合同守信用企业.jpg" alt=""> |
|
</el-carousel-item> |
|
<el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);"> |
|
<img style="margin: auto; max-width: 100%;max-height: 100%;" |
|
src="/images/公司证书+牌匾/资信等级证书.jpg" alt=""> |
|
</el-carousel-item> |
|
</el-carousel> |
|
</div> |
|
</div> --> |
|
</div> |
|
|
|
<div class="container-ab" style="display: none"> |
|
<div class="module main-business" ref="mainBusiness" style="display: none"> |
|
<h1 style="text-align: center; font-size: .2083rem; width: 100vw">主营业务</h1> |
|
<el-card :style="{ width: '30%', height: '50%', transform: 'translateY(-15%)' }" style="z-index: 10"> |
|
<template #header> |
|
<div class="card-header"> |
|
<h1 style="text-align: center; font-size: .2083rem">{{ carouselArr[indexBus].tit }}</h1> |
|
</div> |
|
</template> |
|
<p class="text item">{{ carouselArr[indexBus].conText }}</p> |
|
</el-card> |
|
|
|
<div style=" |
|
display: flex; |
|
height: 100vh; |
|
align-items: center; |
|
justify-content: center; |
|
flex-grow: 1; |
|
transform: translateY(-15%); |
|
"> |
|
<div style="width: 3.125rem; position: relative; display: flex; align-items: center"> |
|
<div class="prev" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)"> |
|
<el-icon style="margin: auto"> |
|
<ArrowLeft /> |
|
</el-icon> |
|
</div> |
|
<div class="next" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)"> |
|
<el-icon style="margin: auto"> |
|
<ArrowRight /> |
|
</el-icon> |
|
</div> |
|
<div class="module-child carousel-3d" v-for="(item, index) in carouselArr" :key="index" |
|
@mouseenter="handleHover(true)" @mouseleave="handleHover(false)"> |
|
<el-image v-if="indexBus == index" hide-on-click-modal @show="isShow = true" @close="isShow = false" |
|
class="img-box" :src="`/images/${item.name}`" :preview-teleported="true" alt="" |
|
:preview-src-list="[`/images/${item.name}`]" /> |
|
<el-image v-else class="img-box" hide-on-click-modal @show="isShow = true" @close="isShow = false" |
|
:src="`/images/${item.name}`" :preview-teleported="true" alt="" /> |
|
<div class="con-text"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="module enterprise-culture" style="display: flex; display: none"> |
|
<div style="font-size: .3125rem; margin: auto">企业文化</div> |
|
</div> |
|
<div class="module corporation-charter" style="display: flex; display: none"> |
|
<div style="font-size: .3125rem; margin: auto">公司证书</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.el-carousel__item h3 { |
|
display: flex; |
|
color: #475669; |
|
opacity: 0.75; |
|
line-height: 1.5625rem; |
|
margin: 0; |
|
} |
|
|
|
.el-carousel__item:nth-child(2n) { |
|
background-color: #99a9bf; |
|
} |
|
|
|
.el-carousel__item:nth-child(2n + 1) { |
|
background-color: #d3dce6; |
|
} |
|
|
|
::v-deep .flex-left-card .el-card__header { |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
} |
|
|
|
.AboutUs { |
|
.container-ab { |
|
width: 100vw; |
|
height: 100vh; |
|
// scroll-snap-type: y mandatory; |
|
// overflow-y: scroll; |
|
overflow-x: hidden; |
|
position: relative; |
|
|
|
.module { |
|
width: 100%; |
|
height: 100vh; |
|
scroll-snap-align: start; |
|
background: url(/images/Group9849.png) no-repeat; |
|
background-size: cover; |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
border-bottom: .0052rem solid; |
|
// position: relative; |
|
} |
|
|
|
.certificateOrPlaque { |
|
width: 100vw; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.header { |
|
height: 20%; |
|
display: flex; |
|
align-items: center; |
|
|
|
h1 { |
|
text-align: center; |
|
font-size: .2083rem; |
|
width: 100vw; |
|
} |
|
} |
|
|
|
.cRP_center { |
|
transform: translateY(-0.7813rem); |
|
height: 80%; |
|
// background-color: rgb(37, 43, 58, 0.2); |
|
display: flex; |
|
} |
|
|
|
.cRP_center>div { |
|
display: flex; |
|
width: 80%; |
|
height: 60%; |
|
margin: auto; |
|
// background-color: rgb(255, 192, 203, 0.2); |
|
} |
|
} |
|
|
|
.main-business { |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
|
|
.prev, |
|
.next { |
|
transition: 0.5s; |
|
font-size: .1302rem; |
|
width: .2604rem; |
|
height: .2604rem; |
|
background-color: rgba(0, 0, 0, 0.5); |
|
display: flex; |
|
position: absolute; |
|
z-index: 6; |
|
cursor: pointer; |
|
} |
|
|
|
.prev { |
|
left: -1.0417rem; |
|
} |
|
|
|
.next { |
|
right: -1.0417rem; |
|
} |
|
|
|
.prev:hover, |
|
.next:hover { |
|
color: #fff; |
|
} |
|
|
|
.module-child { |
|
width: 3.125rem; |
|
height: calc(3.125rem / (1332 / 579)); |
|
position: absolute; |
|
transition: 0.5s; |
|
|
|
.img-box { |
|
width: 100%; |
|
height: 100%; |
|
background-image: url('../../assets/images/cool-background.png'); |
|
background-size: cover; |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
} |
|
|
|
.con-text { |
|
width: 1.0417rem; |
|
position: absolute; |
|
right: .0521rem; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
color: rgb(26, 23, 23); |
|
} |
|
} |
|
|
|
.module-child:hover { |
|
translate: 0 -0.0104rem; |
|
box-shadow: 0rem .026rem .0781rem rgba(0, 0, 0, 0.3); |
|
} |
|
} |
|
|
|
.company-introduction>* { |
|
transition: 0.3s; |
|
} |
|
|
|
.enterprise-culture, |
|
.corporation-charter { |
|
position: absolute; |
|
top: 0; |
|
width: 50.06vw; |
|
top: 100%; |
|
transition: 0.3s; |
|
pointer-events: none; |
|
background-color: #252b3a; |
|
} |
|
|
|
.enterprise-culture { |
|
left: -51%; |
|
} |
|
|
|
.corporation-charter { |
|
right: -51%; |
|
background-color: aqua; |
|
} |
|
} |
|
} |
|
|
|
.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: .026rem 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: 0.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%; |
|
overflow: hidden; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
transition: 0.3s; |
|
} |
|
} |
|
|
|
.right:hover { |
|
img { |
|
transform: scale(1.1); |
|
} |
|
} |
|
|
|
.left { |
|
flex: 1; |
|
margin-right: 0.1042rem; |
|
|
|
.top { |
|
width: 100%; |
|
height: 50%; |
|
display: flex; |
|
|
|
.left-top-bgc { |
|
width: 50%; |
|
height: 100%; |
|
overflow: hidden; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
transition: 0.3s; |
|
} |
|
} |
|
|
|
.left-top-bgc:hover { |
|
img { |
|
transform: scale(1.1); |
|
} |
|
} |
|
|
|
.left-top-txt { |
|
width: 50%; |
|
height: 100%; |
|
border: .0052rem 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: 0.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%; |
|
overflow: hidden; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
transition: 0.3s; |
|
} |
|
} |
|
|
|
.left-top-bgc:hover { |
|
img { |
|
transform: scale(1.1); |
|
} |
|
} |
|
|
|
.left-top-txt { |
|
width: 50%; |
|
height: 100%; |
|
border: .0052rem 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: 0.0729rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |
|
|
|
<!-- <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>【中国经济新闻】“没有通宵加班”“花做好了送不出去”“备了很多花却没有订单”…今年圣诞节鲜花...</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="right"> |
|
<img src="../../assets/images/image63.png" alt="" /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> --> |
|
|
|
<!-- <div class="module main-business" ref="mainBusiness"> |
|
<h1 style="text-align: center; font-size: 40px;width: 100vw;">主营业务</h1> |
|
<el-card :style="{ width: '30%', height: '50%', transform: 'translateY(-15%)' }" style="z-index: 10;"> |
|
<template #header> |
|
<div class="card-header"> |
|
<h1 style="text-align: center;font-size: 40px;">{{ carouselArr[indexBus].tit }}</h1> |
|
</div> |
|
</template> |
|
<p class="text item">{{ carouselArr[indexBus].conText }}</p> |
|
</el-card> |
|
|
|
<div |
|
style="display: flex;height: 100vh;align-items: center;justify-content: center;flex-grow: 1;transform:translateY(-15%)"> |
|
<div style="width: 600px;position: relative;display: flex;align-items: center;"> |
|
<div class="prev" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)"> |
|
<el-icon style="margin: auto;"> |
|
<ArrowLeft /> |
|
</el-icon> |
|
</div> |
|
<div class="next" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)"> |
|
<el-icon style="margin: auto;"> |
|
<ArrowRight /> |
|
</el-icon> |
|
</div> |
|
<div class="module-child carousel-3d" v-for="(item, index) in carouselArr" :key="index" |
|
@mouseenter="handleHover(true)" @mouseleave="handleHover(false)"> |
|
|
|
<el-image v-if="indexBus == index" hide-on-click-modal @show="isShow = true" |
|
@close="isShow = false" class="img-box" :src="`/images/${item.name}`" |
|
:preview-teleported="true" alt="" |
|
:preview-src-list="[`/images/${item.name}`]" /> |
|
<el-image v-else class="img-box" hide-on-click-modal @show="isShow = true" |
|
@close="isShow = false" :src="`/images/${item.name}`" |
|
:preview-teleported="true" alt="" /> |
|
<div class="con-text"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> --> |
|
|
|
<!-- <div style="width: 10vw;"></div> |
|
<div class="left" style="width: 60vw;"> |
|
<h1 style="text-align: center; font-size: 40px;">主营业务</h1> |
|
<div style="margin: auto;font-size: 13px;"> |
|
<span v-for="item in carouselArr" style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #A67D3D;">{{ |
|
item.tit }}</span>:<br> {{ item.conText |
|
}}<br></span> |
|
</div> |
|
</div> |
|
<div class="right" style="width: 60vw;"> |
|
<h1 style="text-align: center; font-size: 40px;">企业文化</h1> |
|
<div style="margin: auto;font-size: 13px;"> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #A67D3D;">使命</span>:助力每一位中国人轻松实现电商梦想<br></span> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #A67D3D;">愿景</span>:为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的<br></span> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #A67D3D;">机会</span>:核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br></span> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #A67D3D;">战略目标</span>:<br> 核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br></span> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #4A766E;">1、</span>以科技进步、应用于技术创新为电商行业带来真正快乐。<br></span> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 16px;color: #4A766E;">2、</span>把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br></span> |
|
<span style="line-height: 30px;"><span |
|
style="font-size: 20px;color: #4A766E;">3、</span>以产品带动服务，以服务开拓市场，有选择的发展新业务。<br></span> |
|
</div> |
|
</div> -->
|
|
|