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> |
||||
<div class="bannerIndex h-410px bg-#FFFFFF w-100% mb-30px"> |
||||
<div class="min_wrapper_1200 acea-row"> |
||||
<!--分类组件--> |
||||
<classify-card></classify-card> |
||||
<!--轮播--> |
||||
<div class="w-730px h-360px mt-20px ml-220px" v-loading="listLoading"> |
||||
<el-carousel :interval="5000" height="360px" arrow="always"> |
||||
<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 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 class="ml-30px w-220px mt-20px"> |
||||
<div class="flex-col-center"> |
||||
<img v-if="!userStore.isLogin" @click="handlerLogin" class="cursors w-60px h-60px b-rd-50% mb-10px" src="@/assets/images/morentou.png" /> |
||||
<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" /> |
||||
<div v-if="!userStore.isLogin" @click="handlerLogin" class="cursors mb-20px line1 w-218px text-center text-#666 text-16px"> |
||||
Hi~<span class="text-#333">你好</span> |
||||
</div> |
||||
<div class="right"><img src="../../assets/images/image19.png" alt="" /></div> |
||||
</div> |
||||
<div class="content"> |
||||
<ul> |
||||
<li> |
||||
<div class="sum">30W+</div> |
||||
<div class="title">注册会员</div> |
||||
</li> |
||||
<li> |
||||
<div class="sum">1200+</div> |
||||
<div class="title">覆盖全国市/区/县</div> |
||||
</li> |
||||
<li> |
||||
<div class="sum">8000W+</div> |
||||
<div class="title">积累服务订单</div> |
||||
</li> |
||||
<li> |
||||
<div class="sum">1S</div> |
||||
<div class="title">最快接单只需</div> |
||||
</li> |
||||
<li> |
||||
<div class="sum">30000+</div> |
||||
<div class="title">日购订单</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="orders-box"></div> |
||||
<div class="orders"> |
||||
<div class="edition"> |
||||
<div class="title"> |
||||
<div class="title-one">最新已成交订单</div> |
||||
<div class="title-two">汇聚抖音小店、抖音团购、天猫、京东、美团、饿了么等各大电商平台海量订单、实时分发</div> |
||||
<div class="title-therr">超过28W+花店在线接单</div> |
||||
<div class="time-out"> |
||||
{{ `${time.year}-${time.month}-${time.day}` }}<span>{{ time.hours }}</span |
||||
><span>{{ time.minutes }}</span |
||||
><span>{{ time.seconds }}</span |
||||
><span class="content-day">今日已成交<i>1999</i>条</span> |
||||
</div> |
||||
</div> |
||||
<div class="commodity-box"> |
||||
<div class="commodity"> |
||||
<div class="left"> |
||||
<div class="image"><img src="../../assets/images/image64.png" alt="" /></div> |
||||
<div class="botton-txt">接单耗时3分钟</div> |
||||
</div> |
||||
<div v-else class="mb-20px line1 w-218px text-center text-#666 text-16px cursors"> |
||||
Hi~<span class="text-#333" @click="linkNavigateTo('/users/user_info', { type: 11 })">{{ userStore.userInfo.nikeName }}</span> |
||||
<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="flex-x-center mb-20px"> |
||||
<div |
||||
v-if="!userStore.isLogin" |
||||
class="handleBtn w-105px h-32px lh-31px mr-10px cursors" |
||||
@click="handlerLogin" |
||||
> |
||||
登录/注册 |
||||
<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 |
||||
class="handleBtnBorder borderSolE9 w-105px h-32px lh-31px font-color cursors" |
||||
@click="handlerNuxtLink('/merchant/merchant_settled', 0)" |
||||
> |
||||
商户入驻 |
||||
</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 class="flex flex-justify-between w-200px"> |
||||
<div |
||||
v-for="(item, index) in menuList" |
||||
:key="index" |
||||
class="flex-col-center cursors" |
||||
@click="handlerNuxtLink(item.url, item.id)" |
||||
> |
||||
<div class="iconfont font-color mb-8px" :class="item.icon" style="font-size: 18px"></div> |
||||
<div class="text-12px text-#333">{{ item.name }}</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> |
||||
<el-divider border-style="dashed" /> |
||||
</div> |
||||
|
||||
<div |
||||
@click="handleIntoPage('/activity/information_info', { informationId: item.id })" |
||||
v-for="item in articleList.length === 2 ? articleList : articleList.slice(0, 3)" |
||||
class="acea-row items-center cursors mb-12px" |
||||
> |
||||
<div class="text-12px font-color bg-#FDEAE9 px-4px py-3px b-rd-2px mr-6px line-heightOne">资讯</div> |
||||
<div class="text-14px text-#666 line1 w-180px fontFamilyOPPOSans">{{ item.title }}</div> |
||||
<div class="commodity"> |
||||
<div class="left"> |
||||
<div class="image"><img src="../../assets/images/image64.png" alt="" /></div> |
||||
<div class="botton-txt">接单耗时3分钟</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="essential-address">江西省 萍乡市 安源区</div> |
||||
<div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div> |
||||
<div class="time">配送时间：2023-12-26 13:10</div> |
||||
<div class="price"> |
||||
<div class="left-price"><span>￥</span>110</div> |
||||
<div class="icon"> |
||||
<el-icon><Right /></el-icon> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="commodity"> |
||||
<div class="left"> |
||||
<div class="image"><img src="../../assets/images/image64.png" alt="" /></div> |
||||
<div class="botton-txt">接单耗时3分钟</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="essential-address">江西省 萍乡市 安源区</div> |
||||
<div class="detailed-address">江西省萍乡市安源区白源街街 道萍乡市公路勘察***</div> |
||||
<div class="time">配送时间：2023-12-26 13:10</div> |
||||
<div class="price"> |
||||
<div class="left-price"><span>￥</span>110</div> |
||||
<div class="icon"> |
||||
<el-icon><Right /></el-icon> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="doload"> |
||||
<div class="title">产品下载</div> |
||||
<div class="app-info"> |
||||
<div class="img"><img src="../../assets/images/image70.png" alt="" /></div> |
||||
<div class="app-info-txt"> |
||||
<div class="app-title">花机宝网络科技主要经营：</div> |
||||
<p>一、聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易平台，助力电商用户高效运营</p> |
||||
<p>二、提供线上外卖配送聚合服务，打通全域电商平台物流同城配送，实现一键操作和管理。</p> |
||||
<p>三、 提供电商运营管理聚合软件，多门店管理、门店产品一键复制、门店产品一键批量设置折扣价格、多平台消息聚合、多门店评价管理、多门店诊断等服务。</p> |
||||
<div class="doload-app">下载APP</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="serve"> |
||||
<div class="title">功能强大、安全、稳定的服务应用</div> |
||||
<div class="title-two">多年技术沉淀，20+项服务共筑服务矩阵</div> |
||||
<div class="serve-box"> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="icon"></div> |
||||
<div class="title">微花店</div> |
||||
<div class="txt">为线下实体花店定制开发的移动商城，帮助花店轻松建立自己的“网上店铺”，并将店铺商品同步至花递平台进行销售，从而为花店带来更大的经济收益</div> |
||||
</div> |
||||
</div> |
||||
<div class="more-services">查看更多服务</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.bannerIndex{ |
||||
:deep(.el-carousel__indicators){ |
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
import { Right } from '@element-plus/icons-vue' |
||||
const time: any = ref({}) |
||||
const getDatTime = () => { |
||||
const currentDate = new Date() |
||||
|
||||
const year = currentDate.getFullYear() |
||||
const month = currentDate.getMonth() + 1 // 月份从0开始，需要加1 |
||||
const day = currentDate.getDate() |
||||
const hours = currentDate.getHours() |
||||
const minutes = currentDate.getMinutes() |
||||
const seconds = currentDate.getSeconds() |
||||
time.value.year = year |
||||
time.value.month = month |
||||
time.value.day = day |
||||
time.value.hours = hours |
||||
time.value.minutes = minutes |
||||
time.value.seconds = seconds |
||||
// console.log(time.value); |
||||
} |
||||
setInterval(() => { |
||||
getDatTime() |
||||
}, 1000) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.banner { |
||||
width: 100%; |
||||
height: 3.0208rem; |
||||
display: flex; |
||||
.left { |
||||
width: 30%; |
||||
display: flex; |
||||
justify-content: center; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
:deep(.el-carousel__container) { |
||||
.right { |
||||
width: 70%; |
||||
height: 100%; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
.content { |
||||
width: 100%; |
||||
background: linear-gradient(90deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%); |
||||
height: 0.5208rem; |
||||
ul { |
||||
display: flex; |
||||
height: 100%; |
||||
width: 100%; |
||||
justify-content: center; |
||||
li { |
||||
width: 1.25rem; |
||||
list-style: none; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.sum { |
||||
font-size: 0.125rem; |
||||
font-weight: 700; |
||||
} |
||||
.title { |
||||
font-size: 0.0729rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.orders { |
||||
// margin-top: .4167rem; |
||||
padding: 0.4167rem 0; |
||||
width: 100%; |
||||
background-color: #fff; |
||||
// height: 500px; |
||||
.edition { |
||||
width: 6.25rem; |
||||
margin: 0 auto; |
||||
.title { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.title-one { |
||||
font-size: 0.1667rem; |
||||
color: #252b3a; |
||||
} |
||||
.title-two { |
||||
margin-top: 0.0833rem; |
||||
line-height: 0.1146rem; |
||||
font-size: 0.0833rem; |
||||
color: #575d6c; |
||||
} |
||||
.title-therr { |
||||
line-height: 0.1146rem; |
||||
font-size: 0.0833rem; |
||||
color: #575d6c; |
||||
} |
||||
.time-out { |
||||
margin-top: 0.2344rem; |
||||
font-size: 0.0833rem; |
||||
color: #252b3a; |
||||
span { |
||||
color: #fff; |
||||
display: inline-block; |
||||
width: 0.1563rem; |
||||
height: 0.1458rem; |
||||
border-radius: 0.026rem; |
||||
background-color: #ff518f; |
||||
text-align: center; |
||||
line-height: 0.1458rem; |
||||
margin: 0 0.0313rem; |
||||
} |
||||
.content-day { |
||||
width: auto; |
||||
background: none; |
||||
color: #000; |
||||
i { |
||||
font-size: 0.1146rem; |
||||
color: #ff518f; |
||||
font-style: normal; |
||||
padding: 0 0.0156rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.commodity-box { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 0.1563rem; |
||||
} |
||||
.commodity { |
||||
box-shadow: 1px 1px 9px 6px rgb(0 0 0 / 4%); |
||||
padding: 0.1042rem; |
||||
width: 2.0469rem; |
||||
height: 1.1198rem; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #fff; |
||||
margin: 0.0521rem 0.0521rem 0.0521rem; |
||||
margin-left: 0; |
||||
transition: transform 0.3s ease; /* 过渡效果，持续时间为0.3秒，缓动函数为ease */ |
||||
|
||||
.left { |
||||
width: 0.75rem; |
||||
height: 0.875rem; |
||||
.image { |
||||
width: 100%; |
||||
height: 0.7396rem; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.botton-txt { |
||||
height: 0.1302rem; |
||||
width: 100%; |
||||
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%); |
||||
color: #ff4e8d; |
||||
text-align: center; |
||||
line-height: 0.1302rem; |
||||
font-size: 0.0625rem; |
||||
} |
||||
} |
||||
.right { |
||||
flex: 1; |
||||
margin-left: 0.1042rem; |
||||
height: 100%; |
||||
border-radius: 12px; |
||||
overflow: hidden; |
||||
.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> |
||||
|
||||
@ -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