Your Name
10 months ago
parent
43a661633b
commit
cf920b5c1f
19 changed files with 6533 additions and 5281 deletions
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 89 KiB |
@ -0,0 +1,11 @@ |
|||||||
|
!(function (e, t) { |
||||||
|
var n = t.documentElement, |
||||||
|
i = 'orientationchange' in window ? 'orientationchange' : 'resize', |
||||||
|
a = function () { |
||||||
|
var e = n.clientWidth |
||||||
|
e && (n.style.fontSize = 100 * (e / 1920) + 'px') |
||||||
|
} |
||||||
|
t.addEventListener && |
||||||
|
(e.addEventListener(i, a, !1), |
||||||
|
t.addEventListener('DOMContentLoaded', a, !1)) |
||||||
|
})(window, document) |
||||||
@ -0,0 +1,487 @@ |
|||||||
|
<!--页面头部--> |
||||||
|
<template> |
||||||
|
<div class="relative w-100%"> |
||||||
|
<!--黑条--> |
||||||
|
<div class="header bg-#F5F5F5" :class="isShowTop && useApp.isHomePage ? 'headerfixed' : ''"> |
||||||
|
<div class="headerCon acea-row row-between-wrapper"> |
||||||
|
<div class="flex-y-center text-12px"> |
||||||
|
<div class="mr-30px flex-y-center"> |
||||||
|
<nuxt-link :to="{ path: '/' }" class="flex-y-center" |
||||||
|
><span class="iconfont icon-shangchengshouye inline-block"></span>商城首页</nuxt-link |
||||||
|
> |
||||||
|
</div> |
||||||
|
<el-popover |
||||||
|
v-if="pcHomeCon && pcHomeCon.goPhoneQrCodeType" |
||||||
|
:width="auto" |
||||||
|
:minWidth="auto" |
||||||
|
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;" |
||||||
|
> |
||||||
|
<template #reference> |
||||||
|
<div class="flex-y-center mobileMall"> |
||||||
|
<span class="iconfont icon-shoujishangcheng inline-block"></span>手机商城 |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div class="acea-row"> |
||||||
|
<div v-if="pcHomeCon.goPhoneQrCodeType.includes('1')"> |
||||||
|
<div :class="pcHomeCon.goPhoneQrCodeType.includes('2')?'mr-26px':''"> |
||||||
|
<div class="borderSol-eee w-80px h-80px flex-center b-rd-4px mb-10px"> |
||||||
|
<el-image :src="wechatQrcode" class="w-72px h-72px"></el-image> |
||||||
|
</div> |
||||||
|
<div class="font-400 text-12px text-#333 w-80px text-center">小程序商城</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-if="pcHomeCon.goPhoneQrCodeType.includes('2')"> |
||||||
|
<div class="borderSol-eee w-80px h-80px flex-center b-rd-4px mb-10px"> |
||||||
|
<qrcode-vue :value="indexDomain" :size="72" level="H" /> |
||||||
|
</div> |
||||||
|
<div class="font-400 text-12px text-#333 w-80px text-center">H5商城</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-popover> |
||||||
|
</div> |
||||||
|
<div class="user acea-row row-middle"> |
||||||
|
<div v-if="!userStore.isLogin" class="item" @click="handlerLogin">登录/注册</div> |
||||||
|
<div v-else class="acea-row row-middle" @click.stop="handlerNuxtLink('/users/user_info', 11)"> |
||||||
|
<span class="line1 font-color" style="max-width: 135px">Hi，{{ userStore.userInfo.nikeName }}</span> |
||||||
|
<p class="ml-10px item" @click.stop="handleHeaderLogout">退出</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="item" @click="handlerNuxtLink('/users/order_list', 1)">我的订单</div> |
||||||
|
<div class="item" @click="handlerNuxtLink('/users/collect_products', 3)">我的收藏</div> |
||||||
|
<el-dropdown class="user"> |
||||||
|
<span class="el-dropdown-link text-12px item"> |
||||||
|
商户入驻 |
||||||
|
<el-icon class="el-icon--right"> |
||||||
|
<arrow-down /> |
||||||
|
</el-icon> |
||||||
|
</span> |
||||||
|
<template #dropdown> |
||||||
|
<el-dropdown-menu> |
||||||
|
<el-dropdown-item class="text-12px" @click="handlerNuxtLink('/merchant/merchant_settled', 0)" |
||||||
|
>商户入驻</el-dropdown-item |
||||||
|
> |
||||||
|
<el-dropdown-item class="text-12px" @click="handlerNuxtLink('/merchant/application_record', 0)" |
||||||
|
>申请记录</el-dropdown-item |
||||||
|
> |
||||||
|
</el-dropdown-menu> |
||||||
|
</template> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--菜单/搜索框/菜单--> |
||||||
|
<div class="w-100% bg-white"> |
||||||
|
<!--搜索框--> |
||||||
|
<div :class="isShowTop && useApp.isHomePage ? 'menufixed' : ''" class="w-100% bg-white"> |
||||||
|
<div class="min_wrapper_1200"> |
||||||
|
<div class="flex flex-justify-between pt-30px"> |
||||||
|
<!--logo--> |
||||||
|
<nuxt-link :to="{ path: '/' }" |
||||||
|
><el-image lazy :src="pcHomeCon?.leftTopLogo" class="w100px h36px"></el-image |
||||||
|
></nuxt-link> |
||||||
|
<!--搜索框商品详情页、商户主页--> |
||||||
|
<div v-if="useApp.routePath === '/merchant/merchant_home' || useApp.routePath.includes('product/detail')" class="acea-row"> |
||||||
|
<div class="w-560px ml-5px"> |
||||||
|
<el-input |
||||||
|
v-model="searchVal" |
||||||
|
placeholder="搜索全站/本店" |
||||||
|
class="input-with-select" |
||||||
|
@keyup.enter="handleEnterKey" |
||||||
|
> |
||||||
|
<template #append> |
||||||
|
<div @click="handleEnterKey" class="cursors w-80px h-40px bg-color b-rd-20px text-center lh-40px"> |
||||||
|
<span class="text-#fff text-14px font-400">搜全站</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
<div @click="handleEnterKeyHome" class="cursors w-80px h-40px bg-#333333 b-rd-20px text-center lh-40px ml-10px"> |
||||||
|
<span class="text-#fff text-14px font-400">搜本店</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--搜索框--> |
||||||
|
<div v-else class="w-560px ml-5px"> |
||||||
|
<el-input |
||||||
|
v-model="searchVal" |
||||||
|
placeholder="搜索商品/店铺" |
||||||
|
class="input-with-select" |
||||||
|
@keyup.enter="handleEnterKey" |
||||||
|
> |
||||||
|
<template #prepend> |
||||||
|
<el-select v-model="selectVal" placeholder="Select" style="width: 115px"> |
||||||
|
<el-option label="商品" value="1" /> |
||||||
|
<el-option label="店铺" value="2" /> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
<template #append> |
||||||
|
<div @click="handleEnterKey" class="cursors w-80px h-40px bg-color b-rd-20px text-center lh-40px"> |
||||||
|
<span class="iconfont icon-sousuo text-#fff font-400"></span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
<!--购物车--> |
||||||
|
<div |
||||||
|
@click="handlerNuxtLink('/order/shopping_cart', 0)" |
||||||
|
class="h-40px borderSol b-rd-20px font-color text-14px flex-center mb-26px cursors w-140px mr-5px" |
||||||
|
> |
||||||
|
<span class="iconfont icon-gouwuche mr-10px"></span>购物车({{ useApp.carNumber }}) |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!--菜单分类--> |
||||||
|
<div v-if="useApp.isShowHeaderMenu" class="w-100% bg-white header-menu"> |
||||||
|
<div class="min_wrapper_1200"> |
||||||
|
<div @mouseenter="handlerMenuEnter" @mouseleave="handleSubmitLeave"> |
||||||
|
<!--菜单分类--> |
||||||
|
<div class="menu flex-y-center"> |
||||||
|
<div |
||||||
|
v-for="(item, index) in menuList" |
||||||
|
:key="item.id" |
||||||
|
@mouseenter="handlerMenuEnter(index)" |
||||||
|
@click="handleGoPage(item, index)" |
||||||
|
:class="index === 0 ? 'classification' : current===item.id ? 'font-color':''" |
||||||
|
class="cursor-pointer menu-item fontColor333 text-16px mr-40px font-500 oppoSans-M" |
||||||
|
> |
||||||
|
<span v-show="index === 0" class="iconfont icon-shangpinfenlei mr-8px"></span>{{ item.name }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--分类显示 --> |
||||||
|
<div v-if="showMenu" class="absolute w-1200px yop-179px z-11" :class="showSeach ? 'on' : ''"> |
||||||
|
<div class="classify z-8"> |
||||||
|
<!--分类组件--> |
||||||
|
<classify-card @handleSubmitLeave="handleSubmitLeave"></classify-card> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--登录弹窗--> |
||||||
|
<user-login ref="userLoginRef" @on-login-succeeded="onLoginSucceeded"></user-login> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import { headerMenuListDefault } from '~/components/defaultComponents' |
||||||
|
import { ArrowDown } from '@element-plus/icons-vue' |
||||||
|
import {b64toBlob, Debounce, linkNavigateTo} from '~/utils/util' |
||||||
|
import { loginLogout } from '~/server/userApi' |
||||||
|
import feedback from '~/utils/feedback' |
||||||
|
|
||||||
|
defineOptions({ name: 'layoutHeader' }) |
||||||
|
import { useUserStore } from '@/stores/user' |
||||||
|
import {onMounted, ref, watch} from 'vue' |
||||||
|
import { searcKeywordApi } from '~/server/goodsApi' |
||||||
|
import { useAppStore } from '~/stores/app' |
||||||
|
import QrcodeVue from 'qrcode.vue' |
||||||
|
import { indexDomainApi, wechatQrcodeApi } from '~/server/homeApi' |
||||||
|
import {auto} from "@popperjs/core"; |
||||||
|
const userStore = useUserStore() |
||||||
|
const useApp = useAppStore() |
||||||
|
const route = useRoute() |
||||||
|
|
||||||
|
/** |
||||||
|
* 监听页面滚动 |
||||||
|
*/ |
||||||
|
onMounted(() => { |
||||||
|
window.addEventListener('scroll', handleScroll) |
||||||
|
}) |
||||||
|
const isShowTop = ref<boolean>(false) |
||||||
|
const handleScroll = () => { |
||||||
|
const t = document.documentElement.scrollTop || document.body.scrollTop |
||||||
|
if (t > 100) { |
||||||
|
isShowTop.value = true |
||||||
|
} else { |
||||||
|
isShowTop.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//头部信息，首页接口调用 |
||||||
|
const props = defineProps({ |
||||||
|
pcHomeCon: { |
||||||
|
type: Object, |
||||||
|
default: null, |
||||||
|
}, |
||||||
|
}) |
||||||
|
const { pcHomeCon } = toRefs(props) |
||||||
|
|
||||||
|
//移动端域名 |
||||||
|
const { data: indexDomain } = useAsyncData(() => indexDomainApi()) |
||||||
|
|
||||||
|
//移动端域名 |
||||||
|
const wechatQrcode = ref<string>('') |
||||||
|
const getWechatQrcode = async () => { |
||||||
|
let data = await wechatQrcodeApi({ |
||||||
|
scene: 'id=0', |
||||||
|
path: 'pages/index/index', |
||||||
|
env_version: 'trial', |
||||||
|
}) |
||||||
|
let blob = b64toBlob(data.code) |
||||||
|
wechatQrcode.value = URL.createObjectURL(blob) |
||||||
|
} |
||||||
|
getWechatQrcode(); |
||||||
|
|
||||||
|
//搜索 |
||||||
|
const searchVal = ref<string>('') //搜索框输入值 |
||||||
|
const selectVal = ref<string>('1') //搜索框选择值 |
||||||
|
searchVal.value = route.query.searchValue ? route.query.searchValue.toString() : searchVal.value.toString() |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
selectVal.value = '1' |
||||||
|
}); |
||||||
|
|
||||||
|
//搜本店 |
||||||
|
const handleEnterKeyHome = async()=>{ |
||||||
|
linkNavigateTo(`/merchant/merchant_home`, { merId: useApp.pcMerId, searchValue: searchVal.value, currentVal: 1 }) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//搜索跳入页面 |
||||||
|
const handleEnterKey = async () => { |
||||||
|
//useApp.routePath === '/merchant/merchant_home' || useApp.routePath.includes('product/detail') |
||||||
|
if(useApp.routePath === '/merchant/merchant_home'|| useApp.routePath.includes('product/detail')){ |
||||||
|
await linkNavigateTo(`/product/product_list`, { searchValue: searchVal.value }) |
||||||
|
}else{ |
||||||
|
if (selectVal.value === '1') { |
||||||
|
await linkNavigateTo(`/product/product_list`, { searchValue: searchVal.value }) |
||||||
|
} else { |
||||||
|
await linkNavigateTo(`/merchant/merchant_list`, { searchValue: searchVal.value }) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
showSeach.value = !showSeach.value |
||||||
|
showMenu.value = false |
||||||
|
} |
||||||
|
|
||||||
|
//头部菜单 |
||||||
|
const menuList = ref<ItemObject[]>(headerMenuListDefault()) |
||||||
|
|
||||||
|
//动画 |
||||||
|
const { $aos } = useNuxtApp() |
||||||
|
onMounted(() => { |
||||||
|
$aos().init({ |
||||||
|
easing: 'ease-out-back', |
||||||
|
duration: 1000, |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
//登录成功后回调 |
||||||
|
const onLoginSucceeded = () => { |
||||||
|
// getCartCount() |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 热门搜索词 |
||||||
|
*/ |
||||||
|
const showSeach = ref<boolean>(false) |
||||||
|
const { data: searcKeywordList } = await useAsyncData(async () => searcKeywordApi()) |
||||||
|
|
||||||
|
//清空搜索词 |
||||||
|
const nuxtApp = useNuxtApp() |
||||||
|
nuxtApp.provide('onClearSearchVal', () => { |
||||||
|
searchVal.value = '' |
||||||
|
}) |
||||||
|
|
||||||
|
/** |
||||||
|
* 菜单移入 |
||||||
|
*/ |
||||||
|
const checkedIndex = ref<number>(10) //分类鼠标悬浮索引 |
||||||
|
const showMenu = ref<boolean>(false) //是否展示分类菜单 |
||||||
|
const handlerMenuEnter = (idx: number | undefined) => { |
||||||
|
checkedIndex.value = idx ? idx : 10 |
||||||
|
if (idx === 0 && !useApp.isHomePage) { |
||||||
|
showMenu.value = true |
||||||
|
} else { |
||||||
|
showMenu.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//鼠标移出回调 |
||||||
|
const handleSubmitLeave = () => { |
||||||
|
showMenu.value = false |
||||||
|
} |
||||||
|
|
||||||
|
// 跳入页面 |
||||||
|
|
||||||
|
const current = ref<string>(route.query.type?<string>route.query.type:'') |
||||||
|
watch( |
||||||
|
() => <string>route.query.type, |
||||||
|
(newValue) => { |
||||||
|
current.value = newValue |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const handleGoPage = async (obj: any, idx: number) => { |
||||||
|
current.value = obj.id |
||||||
|
if (idx === 0) return |
||||||
|
await linkNavigateTo(obj.pc_url, { type: obj.id }) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 登录 |
||||||
|
*/ |
||||||
|
const userLoginRef = shallowRef() |
||||||
|
const handlerLogin = async () => { |
||||||
|
if (userStore.isLogin) { |
||||||
|
// await linkNavigateTo('/forum/create') |
||||||
|
} else { |
||||||
|
//data.backUrl = '/forum/create' |
||||||
|
userLoginRef.value.open() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 地址跳转 |
||||||
|
*/ |
||||||
|
const handlerNuxtLink = async (url: string, type: number) => { |
||||||
|
if (userStore.token) { |
||||||
|
await linkNavigateTo(url, { type: type }) |
||||||
|
} else { |
||||||
|
userLoginRef.value.open() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//退出登录 |
||||||
|
//购物车没登录状态下显示0 |
||||||
|
const { getCarNumber } = useAppStore() |
||||||
|
const handleHeaderLogout = Debounce(async () => { |
||||||
|
await feedback.confirm('确定退出吗？') |
||||||
|
await loginLogout() |
||||||
|
await getCarNumber(0) |
||||||
|
await userStore.logout() |
||||||
|
},500) |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
:deep(.el-dropdown-menu__item){ |
||||||
|
font-size: 12px !important; |
||||||
|
} |
||||||
|
:deep(.el-dropdown__popper.el-popper), :deep(.el-popper){ |
||||||
|
font-size: 12px !important; |
||||||
|
} |
||||||
|
.header-menu { |
||||||
|
border-bottom: 2px solid #e93323; |
||||||
|
} |
||||||
|
.mobileMall{ |
||||||
|
&:hover { |
||||||
|
color: #e93323; |
||||||
|
} |
||||||
|
} |
||||||
|
.classification { |
||||||
|
width: 200px; |
||||||
|
height: 40px; |
||||||
|
background: #e93323; |
||||||
|
border-radius: 12px 12px 0px 0px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
:deep(.el-input-group) { |
||||||
|
height: 40px; |
||||||
|
background: #ffffff; |
||||||
|
border-radius: 20px 20px 20px 20px; |
||||||
|
border: 1px solid #e93323; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
:deep(.el-input__wrapper) { |
||||||
|
padding-left: 20px !important; |
||||||
|
} |
||||||
|
:deep(.el-input__wrapper), |
||||||
|
:deep(.el-input-group__prepend), |
||||||
|
:deep(.el-input-group__prepend:hover), |
||||||
|
:deep(.el-input-group__append) { |
||||||
|
padding: 0; |
||||||
|
box-shadow: none !important; |
||||||
|
--el-fill-color-light: rgba(255, 255, 255, 0) !important; |
||||||
|
} |
||||||
|
:deep(.el-input-group__append) { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
:deep(.el-input) { |
||||||
|
--el-input-hover-border-color: none !important; |
||||||
|
--el-input-focus-border-color: none !important; |
||||||
|
} |
||||||
|
:deep(.el-select) { |
||||||
|
margin: 0 !important; |
||||||
|
width: 74px !important; |
||||||
|
--el-select-input-focus-border-color: none !important; |
||||||
|
} |
||||||
|
:deep(.el-input-group__prepend:hover) { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.headerfixed { |
||||||
|
top: 0; |
||||||
|
z-index: 99; |
||||||
|
position: fixed; |
||||||
|
} |
||||||
|
.menufixed { |
||||||
|
top: 40px; |
||||||
|
z-index: 99; |
||||||
|
position: fixed; |
||||||
|
} |
||||||
|
.seachfixed { |
||||||
|
position: fixed; |
||||||
|
top: 124px; |
||||||
|
z-index: 99; |
||||||
|
} |
||||||
|
.classify { |
||||||
|
border-radius: 0px 0px 26px 26px; |
||||||
|
overflow: hidden; |
||||||
|
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
.search { |
||||||
|
&-ipt { |
||||||
|
outline: none; |
||||||
|
border: 0; |
||||||
|
background: none; |
||||||
|
} |
||||||
|
|
||||||
|
&-history { |
||||||
|
border-radius: 0px 0px 16px 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
.header { |
||||||
|
flex: 1; |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
font-size: 12px; |
||||||
|
color: #666666; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
.headerCon { |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
max-width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
|
||||||
|
a { |
||||||
|
color: #666666; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: #e93323; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.iconfont { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.user { |
||||||
|
.item { |
||||||
|
margin-right: 8px; |
||||||
|
position: relative; |
||||||
|
padding-left: 8px; |
||||||
|
color: #666666; |
||||||
|
&:hover { |
||||||
|
color: #e93323; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,140 +1,609 @@ |
|||||||
<script setup lang="ts"> |
|
||||||
import { articleHotListApi, pcHomeBannerApi } from '~/server/homeApi' |
|
||||||
import { useUserStore } from '~/stores/user' |
|
||||||
import { linkNavigateTo } from '~/utils/util' |
|
||||||
import useOrder from '~/composables/useOrder' |
|
||||||
const userStore = useUserStore() |
|
||||||
const { handleIntoPage } = useOrder() |
|
||||||
|
|
||||||
//首页banner数据 |
|
||||||
const { data: bannerList, pending: listLoading } = await useAsyncData(async () => pcHomeBannerApi()) |
|
||||||
|
|
||||||
//资讯热门列表 |
|
||||||
const { data: articleList, pending: articleListLoading } = await useAsyncData(async () => articleHotListApi()) |
|
||||||
|
|
||||||
const menuList = ref<Array<string>>([ |
|
||||||
{ |
|
||||||
name: '宝贝收藏', |
|
||||||
icon: 'icon-baobeishoucang', |
|
||||||
url: '/users/collect_products', |
|
||||||
id: '3', |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '关注店铺', |
|
||||||
icon: 'icon-guanzhudianpu', |
|
||||||
url: '/users/collect_merchant', |
|
||||||
id: '4', |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '我的足迹', |
|
||||||
icon: 'icon-zuji', |
|
||||||
url: '/users/browsing_history', |
|
||||||
id: '8', |
|
||||||
}, |
|
||||||
]) |
|
||||||
|
|
||||||
/** |
|
||||||
* 登录 |
|
||||||
*/ |
|
||||||
const nuxtApp = useNuxtApp() |
|
||||||
const userLoginRef = shallowRef() |
|
||||||
const handlerLogin = async () => { |
|
||||||
if (!userStore.isLogin) { |
|
||||||
await nuxtApp.$onHandlerLogin() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handlerNuxtLink = async (url: string, type: number) => { |
|
||||||
if (!userStore.isLogin) { |
|
||||||
await nuxtApp.$onHandlerLogin() |
|
||||||
} else { |
|
||||||
await linkNavigateTo(url, { type: type }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
<template> |
||||||
<div class="bannerIndex h-410px bg-#FFFFFF w-100% mb-30px"> |
<div class="banner"> |
||||||
<div class="min_wrapper_1200 acea-row"> |
<div class="left"> |
||||||
<!--分类组件--> |
<div class="title-one">鲜花电商下单方<span>117405</span>家</div> |
||||||
<classify-card></classify-card> |
<div class="title-tow">实名认证花店<span>316261</span>家</div> |
||||||
<!--轮播--> |
<div class="btn"> |
||||||
<div class="w-730px h-360px mt-20px ml-220px" v-loading="listLoading"> |
<button>立即下单</button> |
||||||
<el-carousel :interval="5000" height="360px" arrow="always"> |
<button>开始接单</button> |
||||||
<el-carousel-item v-for="item in bannerList" :key="item" class="w-730px h-360px el-image"> |
|
||||||
<a v-if="item.linkUrl" :href="item.linkUrl" target="_blank"> |
|
||||||
<el-image :src="item.imageUrl" class="w-730px h-360px el-image b-rd-12px" fit="fill" /> |
|
||||||
</a> |
|
||||||
<el-image v-else :src="item.imageUrl" class="w-730px h-360px el-image b-rd-12px" fit="fill" /> |
|
||||||
</el-carousel-item> |
|
||||||
</el-carousel> |
|
||||||
</div> |
</div> |
||||||
<!--登录--> |
</div> |
||||||
<div class="ml-30px w-220px mt-20px"> |
<div class="right"><img src="../../assets/images/image19.png" alt="" /></div> |
||||||
<div class="flex-col-center"> |
</div> |
||||||
<img v-if="!userStore.isLogin" @click="handlerLogin" class="cursors w-60px h-60px b-rd-50% mb-10px" src="@/assets/images/morentou.png" /> |
<div class="content"> |
||||||
<img v-else :src="userStore.userInfo.avatar" @click="linkNavigateTo('/users/user_info', { type: 11 })" class="w-60px h-60px b-rd-50% mb-10px cursors" /> |
<ul> |
||||||
<div v-if="!userStore.isLogin" @click="handlerLogin" class="cursors mb-20px line1 w-218px text-center text-#666 text-16px"> |
<li> |
||||||
Hi~<span class="text-#333">你好</span> |
<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> |
||||||
<div v-else class="mb-20px line1 w-218px text-center text-#666 text-16px cursors"> |
<div class="right"> |
||||||
Hi~<span class="text-#333" @click="linkNavigateTo('/users/user_info', { type: 11 })">{{ userStore.userInfo.nikeName }}</span> |
<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> |
||||||
<div class="flex-x-center mb-20px"> |
<div class="right"> |
||||||
<div |
<div class="essential-address">江西省 萍乡市 安源区</div> |
||||||
v-if="!userStore.isLogin" |
<div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div> |
||||||
class="handleBtn w-105px h-32px lh-31px mr-10px cursors" |
<div class="time">配送时间：2023-12-26 13:10</div> |
||||||
@click="handlerLogin" |
<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="handleBtnBorder borderSolE9 w-105px h-32px lh-31px font-color cursors" |
</div> |
||||||
@click="handlerNuxtLink('/merchant/merchant_settled', 0)" |
<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 class="flex flex-justify-between w-200px"> |
</div> |
||||||
<div |
<div class="commodity"> |
||||||
v-for="(item, index) in menuList" |
<div class="left"> |
||||||
:key="index" |
<div class="image"><img src="../../assets/images/image64.png" alt="" /></div> |
||||||
class="flex-col-center cursors" |
<div class="botton-txt">接单耗时3分钟</div> |
||||||
@click="handlerNuxtLink(item.url, item.id)" |
</div> |
||||||
> |
<div class="right"> |
||||||
<div class="iconfont font-color mb-8px" :class="item.icon" style="font-size: 18px"></div> |
<div class="essential-address">江西省 萍乡市 安源区</div> |
||||||
<div class="text-12px text-#333">{{ item.name }}</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> |
||||||
<el-divider border-style="dashed" /> |
|
||||||
</div> |
</div> |
||||||
|
<div class="commodity"> |
||||||
<div |
<div class="left"> |
||||||
@click="handleIntoPage('/activity/information_info', { informationId: item.id })" |
<div class="image"><img src="../../assets/images/image64.png" alt="" /></div> |
||||||
v-for="item in articleList.length === 2 ? articleList : articleList.slice(0, 3)" |
<div class="botton-txt">接单耗时3分钟</div> |
||||||
class="acea-row items-center cursors mb-12px" |
</div> |
||||||
> |
<div class="right"> |
||||||
<div class="text-12px font-color bg-#FDEAE9 px-4px py-3px b-rd-2px mr-6px line-heightOne">资讯</div> |
<div class="essential-address">江西省 萍乡市 安源区</div> |
||||||
<div class="text-14px text-#666 line1 w-180px fontFamilyOPPOSans">{{ item.title }}</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> |
||||||
</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> |
</template> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<script lang="ts" setup> |
||||||
.bannerIndex{ |
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
:deep(.el-carousel__indicators){ |
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; |
display: flex; |
||||||
justify-content: center; |
flex-direction: column; |
||||||
align-items: center; |
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; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
:deep(.el-carousel__container) { |
.right { |
||||||
width: 100%; |
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%; |
height: 100%; |
||||||
border-radius: 12px; |
width: 100%; |
||||||
overflow: hidden; |
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> |
</style> |
||||||
|
|||||||
@ -0,0 +1,5 @@ |
|||||||
|
import 'lib-flexible' |
||||||
|
|
||||||
|
// export default () => {
|
||||||
|
// flexible.rem = 192 // 设计稿宽度 / 10，例如设计稿宽度为750px，则rem为75
|
||||||
|
// }
|
||||||
@ -0,0 +1,18 @@ |
|||||||
|
function fn(){ |
||||||
|
console.log(11111); |
||||||
|
function setHtmlFontSize() { |
||||||
|
let whdef = 100 / 1920 ; |
||||||
|
let bodyWidth = document.documentElement.getBoundingClientRect().width; |
||||||
|
console.log(bodyWidth,'屏幕宽度') |
||||||
|
let rem = bodyWidth * whdef |
||||||
|
document.getElementsByTagName('html')[0].style.fontSize = rem + 'px' |
||||||
|
|
||||||
|
} |
||||||
|
setHtmlFontSize() |
||||||
|
window.addEventListener('resize',function(){ |
||||||
|
setTimeout(function(){ |
||||||
|
setHtmlFontSize() |
||||||
|
},100) |
||||||
|
}) |
||||||
|
} |
||||||
|
fn() |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
'postcss-px2rem': { |
||||||
|
remUnit: 192 // 设计稿宽度 / 10，例如设计稿宽度为750px，则remUnit为75
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue