You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
apply-assistant-v3/pages/home/index.vue

828 lines
27 KiB
Vue

6 months ago
<template>
5 months ago
<div class="p-home-inedx g_w_all g_bg_f_5 g_kuaishou" :class="computeCode == -1 ? 'g_flex_column_center' : ''">
<div v-show="computeCode == -1" class="g_flex_column_center">
<g-loading marginBottom="g_mb_130" />
</div>
6 months ago
5 months ago
<div v-show="computeCode > -1">
<!-- 列表区 -->
<!-- <div @click="showPop = true"> 1123 </div> -->
<!-- `calc(${navInfo.windowHeight}px - ${navInfo.navigationBarHeight + navInfo.statusBarHeight}px)` -->
<scroll-view class="m-list" id="listBox" :scroll-into-view="scrollTo" :style="{ height: `calc(${navInfo.windowHeight}px)` }" :scroll-y="true" @scrolltolower="reachBottom">
5 months ago
<div class hover-class="none" hover-stop-propagation="false">
5 months ago
<div class="g_position_rela">
<!-- 搜索区 -->
<div class="m-search g_p_10 g_pt_8 g_position_rela bg_shawdoc" style id="searchInputBox">
<u-search height="80" v-model="keyword" class="g_flex_1" placeholder="搜索职位名称" bg-color="#fff" :show-action="false" placeholder-class="g_c_c" search-icon-color="#999999" :maxlength="20"></u-search>
<div class="g_w_all g_h_40 g_position_abso" style="left: 0; z-index: 9999; top: 0; height: 100%" @click.stop="goSearch"></div>
</div>
</div>
<div>
<div class="sticky">
<div class="g_bg_f_5 g_flex_row_between flex_center" id="tttop">
<div class="g_flex_1">
<u-tabs bg-color="transparent" from="index" gutter="20" :list="tabInfo.list" :is-scroll="true" :current="tabInfo.active" active-color="#00b666" bar-width="64" bar-height="6" @change="handleUpdateTab" font-size="34" duration="0.05" height="76"></u-tabs>
</div>
5 months ago
<div class="g_flex_row_end" v-if="false">
5 months ago
<div class="csbf" @click="chooseNl('sort')">
{{ sortList.list[sortList.active].showName }}
<span class="iconfont icon-shouqi g_fs_12 g_c_9 fst g_ml_4" v-if="whichOneShow == 'sort'"></span>
<span class="iconfont icon-zhankai g_fs_12 g_c_9 fst g_ml_4" v-if="whichOneShow != 'sort'"></span>
<div class="sortMask" v-if="whichOneShow == 'sort'">
<div class="sortContainer" style="overflow: hidden" @click.stop>
<div v-for="(item, index) in sortList.list" @click="sortJob(index)" :key="index" :class="sortList.active == index ? 'g_border_main g_c_main' : 'g_border_f'" class="g_fs_16 g_fw_600 g_mt_16 g_bg_f" style="border-radius: 30px; padding: 8px 16px">{{ item.name }}</div>
</div>
</div>
</div>
<view class="csbf" style="z-index: 99999999" @click="chooseNl('special')" data-type="special">
筛选
<span class="iconfont icon-shouqi g_fs_12 g_c_9 fst g_ml_4" v-if="whichOneShow == 'special'"></span>
<span class="iconfont icon-zhankai g_fs_12 g_c_9 fst g_ml_4" v-if="whichOneShow != 'special'"></span>
<g-filter :show="whichOneShow" ref="filterChild" top="43px" :getFilterDataNew="getFilterData" @filterObj="receiveFromChild"></g-filter>
</view>
</div>
<!-- <div class="g_flex_none g_flex_column_center g_fs_17 g_pr_26 g_pb_4" style="color: #576b95; text-decoration: underline" @click="goPage('/root/home/ignore')"></div> -->
</div>
<scroll-view class="filterTag bt1" v-if="getFilterData.jobCategoryLabelObjects.length > 0 || getFilterData.jobSpecialLabelObjects.length > 0 || getFilterData.sex != '-1' || (getFilterData.ageRangeStr && getFilterData.ageRangeStr != '16-60')" :scroll-x="true" :scroll-y="false" scroll-top="0" scroll-left="0" scroll-into-view scroll-with-animation="false" enable-flex enable-back-to-top="false">
<div class="g_flex_row_between flex_center flex_nw g_w_all">
<div class="g_flex_row_start flex_nw" style="line-height: 44px">
<div class="tc genderTag f14 por" style="min-width: 60px" v-if="getFilterData.ageRangeStr != '' && getFilterData.ageRangeStr != '16-60'">
<div class="por" @click.stop="deleteAge">
{{ getFilterData.ageRangeStr }}
<div class="clear_icon iconfont icon-dianji"></div>
</div>
</div>
5 months ago
5 months ago
<div class="tc genderTag f14 por" style="min-width: 60px" v-if="getFilterData.sex != '-1'">
<div class="por" @click.stop="deleteSex">
{{ getFilterData.sex == 1 ? "收男工" : getFilterData.sex == 2 ? "收女工" : getFilterData.sex == 3 ? "男女都收" : "" }}
<!-- {{getFilterData.jobCategoryLabelObjects.length > 0}} {{getFilterData.jobSpecialLabelObjects.length > 0}} -->
<div class="clear_icon iconfont icon-dianji"></div>
</div>
</div>
<div class="brandTag ml8" v-if="getFilterData.jobCategoryLabelObjects.length > 0">
<block v-for="(item, index) in getFilterData.jobCategoryLabelObjects" :key="index">
<div class="por" @click.stop="deleteJobCategoryLabel(item.id)">
{{ item.name }}
<div class="clear_icon iconfont icon-dianji"></div>
</div>
</block>
</div>
5 months ago
5 months ago
<div class="specialTag ml8">
<block v-for="(item, index) in getFilterData.jobSpecialLabelObjects" :key="index">
<div class="por" @click.stop="deleteJobSpecialLabel(item.id)">
{{ item.name }}
<div class="clear_icon iconfont icon-dianji"></div>
</div>
</block>
</div>
</div>
<div class="clear" @click.stop="clearFilter1" data-type="outerClear">
<span class="iconfont icon-shanchu f14"></span>
清除
</div>
</div>
</scroll-view>
</div>
5 months ago
5 months ago
<div class="g_h_8"></div>
<g-list-job from="home" @uploadList="getList" bg="#ededed" class="g_h_all" :list="query.list" :active="tabInfo.active" @shareJob="shareJob" :loading="loading" :speed="speed" :query="query" :isShowLoginBtn="isLogin ? false : true" :emptyText="isLogin ? (tabInfo.active == 0 || tabInfo.active == 2 ? '嘿,这里还没有数据呢' : '您还未收藏职位,快去试试收藏职位吧') : '你好,此服务仅限人力资源行业受邀商家登录,请确认'" />
</div>
6 months ago
5 months ago
</div>
</scroll-view>
<div hover-class="none" style="position: fixed; right: 20px; bottom: 20px" hover-stop-propagation="false" @click="toRecord" v-if="isLogin">
<g-panel-image :url="cdnBaseImg + 'quick_application0610.svg'" size="96" />
</div>
<u-popup v-model="showPop" mode="bottom" uZindex="9999" border-radius="12" :closeable="true" :mask-close-able="true">
<div class="g_fs_18 g_text_c g_pt_32">
<div class="g_bg_f g_fw_600 g_pb_24">以下发单号向你发出关注邀请</div>
<scroll-view class="g_flex_row_between" style="height: 500px" :scroll-y="true" @scrolltolower="onScrollToLower">
<div class="g_flex_row_start g_pl_12">
<!-- :key="item.id" -->
<div v-for="(item, index) in attentionList" :class="item.checked ? 'g_bg_e7' : 'g_bg_f_5'" class="g_h_140 g_mb_12 g_mr_12 g_radius_6 g_position_rela" style="width: calc(33% - 12px)" :key="index" @click="checkChange(item)">
<u-checkbox shape="circle" class="g_position_abso g_w_18" style="right: 8px; top: 8px" active-color="#00B666" v-model="item.checked"></u-checkbox>
<div class="logo g_mt_32 g_mb_12">
<g-panel-image class :url="item.logo" size="96" />
</div>
<div class="g_fs_14">{{ item.agencyName }}</div>
</div>
</div>
</scroll-view>
<div class="g_text_c g_pt_16 g_pb_24 g_pl_24 g_pr_16 g_bg_f g_flex_row_between flex_center" style="box-shadow: 0px -2px 4px 0px rgba(218, 218, 218, 0.5)">
<u-checkbox @change="checkAllChange" shape="circle" active-color="#00B666" v-model="checkAll">
<div class="g_c_6 g_ml_8">全选</div>
</u-checkbox>
<g-button :btnText="`一键关注(${upInfo.num})`" type="primary" @clickBtn="submitInfo" />
</div>
</div>
</u-popup>
</div>
</div>
6 months ago
</template>
<script>
export default {
5 months ago
onReady() {
this.G.setNavStyle('home')
},
onShareAppMessage() {
return {
title: ' ',
imageUrl: 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/APP/shareCard0609.png',
}
// return this.G.shareFun();
},
onLoad() {
let that = this
that.navInfo = that.G.getNavInfo()
that.tabInfo.active = 0
// #ifdef MP-WEIXIN
// this.searchAnimate();
// #endif
},
data() {
return {
scrollTo: '',
getFilterData: {
sex: '-1',
ageRangeStr: '',
jobCategoryLabelIds: '',
jobSpecialLabelIds: '',
jobSpecialLabelObjects: [],
jobCategoryLabelObjects: [],
},
background: {
backgroundColor: '#caf1e0',
},
customList: [
{
icon: 'icon-saoyisao-hui',
title: '扫一扫',
tip: 0,
},
{
icon: 'icon-saoyisao-hui',
title: '发布职位',
tip: 0,
},
{
icon: 'icon-saoyisao-hui',
title: '发展代理',
tip: 0,
},
],
isShowTab: false,
showPop: false, // 显示关注邀请弹窗显示
attentionList: [], // 关注列表
subAttentionList: [],
attentionConfig: {
num: 1,
size: 12,
},
checkAll: false, // 全选
upInfo: {
num: 0,
list: [],
},
computeCode: -1,
isLogin: null,
navInfo: {},
cdnBaseImg: this.G.store().cdnBaseImg,
localBaseImg: this.G.store().localBaseImg,
loading: true,
speed: -1,
query: {
page: 1,
size: 50,
list: [],
isFinish: -1,
sortTag: 2,
},
keyword: '',
tabInfo: {
list: [
{
name: '关注',
num: 0,
tip: 0,
classify: 2,
},
{
name: '收藏',
num: 0,
tip: 1,
classify: 3,
},
{
name: '我的',
num: 0,
tip: 2,
classify: 1,
},
],
active: 0,
},
sortList: {
list: [
{
name: '按工价',
key: 1,
showName: '按工价',
},
{
name: '按佣金',
key: 3,
showName: '按佣金',
},
{
name: '按时间',
key: 0,
showName: '按时间',
},
],
active: 2,
},
}
},
watch: {
'tabInfo.list': {
handler(val) {
console.log('tabInfo.list', val)
},
deep: true,
immediate: true,
},
showPop(val) {
if (val) {
uni.hideTabBar()
} else {
uni.showTabBar()
}
},
},
computed: {},
onShow() {
let that = this
that.isLogin = uni.getStorageSync('apply-token')
6 months ago
5 months ago
if (!that.isLogin) {
that.loading = false
that.speed = 0
6 months ago
5 months ago
setTimeout(() => {
that.computeCode = 1
}, 100)
} else {
that.getList()
if (uni.getStorageSync('SHOW_INVITE_ALL')) {
if (uni.getStorageSync('SHOW_INVITE_ALL') == 1 && uni.getStorageSync('SHOW_INVITE') == 1) {
that.getInviteList()
}
}
console.log('uni.getStorageSync("apply-supplierAccount")', uni.getStorageSync('apply-supplierAccount'))
if (uni.getStorageSync('apply-supplierAccount') == 1) {
// 有
that.tabInfo.list = [
{
name: '关注',
num: 0,
tip: 0,
classify: 2,
},
{
name: '收藏',
num: 0,
tip: 1,
classify: 3,
},
{
name: '我的',
num: 0,
tip: 2,
classify: 99,
},
]
// that.tabInfo.active = 0;
that.isShowTab = true
} else {
// 无
that.tabInfo.list = [
{
name: '关注',
num: 0,
tip: 0,
classify: 2,
},
{
name: '收藏',
num: 0,
tip: 1,
classify: 3,
},
]
// that.tabInfo.active = 0;
that.isShowTab = false
}
}
this.$forceUpdate()
},
6 months ago
5 months ago
onReachBottom() {
let that = this
console.log('onReachBottom', that.query.isFinish)
this.G.isLogin()
if (this.G.isLogin()) {
console.log('that.query.size', that.query.size)
if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
that.query.page++
that.getList('concat')
}
}
},
methods: {
handleOpenCamera() {
let that = this
that.G.handleScanCode()
},
goPage($path) {
uni.navigateTo({
url: $path,
})
},
reachBottom() {
let that = this
console.log('onReachBottom', that.query.isFinish)
this.G.isLogin()
if (this.G.isLogin()) {
console.log('that.query.size', that.query.size)
if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
that.query.page++
that.getList('concat')
}
}
},
getList($type = 'init') {
let that = this
this.loading = true
console.log('job_list __F________________________', 1)
let time = new Date().getTime()
that.G.Post(
that.api.job_list,
{
...that.getFilterData,
pageNum: that.query.page,
pageSize: that.query.size,
agencyId: that.tabInfo.active == 2 ? uni.getStorageSync('apply-agencyId') : '',
classify: that.tabInfo.list[that.tabInfo.active].classify,
sortTag: that.query.sortTag,
keys: that.keyword,
},
(res) => {
that.computeCode = 1
console.log('job_list __________________________', (new Date().getTime() - time) / 1000)
// res.recordCount = 0;
// res.recordList = [];
6 months ago
5 months ago
if (res.recordCount == 0) {
that.loading = false
} else {
that.loading = true
}
that.speed = res.recordCount
that.query.isFinish = res.recordList.length
res.recordList = that.G.toGetAddressv3(res.recordList)
res.recordList = that.G.toGetAge(res.recordList)
res.recordList = that.G.yijobCopy(res.recordList)
if ($type == 'init') {
that.query.list = []
if (res.recordList.length > 0) {
that.query.list = res.recordList.map((item, index) => {
// console.log(item)
return {
...item,
title: item.jobName,
address: item.district + item.age,
price: item.salaryClassify != 7 ? that.G.getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue) : that.G.getSalaryClassifyValue(item.salaryClassify, item.minMonthlyPay, item.maxMonthlyPay),
logo: item.agencyLogo,
time: that.G.setDeadLine(item.updateTime, 'jiaofu'),
fuWuFei: that.G.setReturnFee(item.returnFee, item.returnFeeType),
gender: that.G.getGenderByMinAge(item),
leafCateId: item.id,
// serverPrice: that.tabInfo.list[that.tabInfo.active].tip == 2 ? that.G.setReturnFee(item.returnFee, item.returnFeeType) : that.G.setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType),
serverPrice: that.G.setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType),
recruitmentSwitch: item.recruitment == 1 ? true : false,
recruitmentImage: item.recruitment,
active: that.tabInfo.active,
isToday: item.today == 0 ? false : true,
tip: that.tabInfo.list[that.tabInfo.active].tip,
}
})
}
} else {
that.query.list = that.query.list.concat(
res.recordList.map((item, index) => {
return {
...item,
title: item.jobName,
price: item.salaryClassify != 7 ? that.G.getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue) : that.G.getSalaryClassifyValue(item.salaryClassify, item.minMonthlyPay, item.maxMonthlyPay),
fuWuFei: that.G.setReturnFee(item.returnFee, item.returnFeeType),
gender: that.G.getGenderByMinAge(item),
logo: item.agencyLogo,
time: that.G.setDeadLine(item.updateTime, 'jiaofu'),
leafCateId: item.id,
serverPrice: that.G.setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType),
recruitmentSwitch: item.recruitment == 1 ? true : false,
recruitmentImage: item.recruitment,
active: that.tabInfo.active,
isToday: item.today == 0 ? false : true,
tip: that.tabInfo.list[that.tabInfo.active].tip,
}
})
)
}
console.log('首页 列表:', that.query.list)
}
)
},
/**
* 获取邀请关注列表
*/
getInviteList() {
let that = this
uni.showLoading({
title: '加载中...',
mask: true,
})
that.G.Get(
that.api.user_getInviteList,
{
pageSize: 15,
pageNum: that.attentionConfig.num,
},
(res) => {
console.log(res)
if (that.attentionList.length > 0) {
res.forEach((item) => {
item.checked = false
})
that.attentionList.concat(res)
} else {
that.attentionList = res
that.attentionList.forEach((item) => {
item.checked = false
})
}
if (that.attentionList.length > 0) {
that.showPop = true
uni.removeStorageSync('SHOW_INVITE')
uni.setStorageSync('watch_invite', 2)
}
uni.hideLoading()
}
)
return
},
6 months ago
5 months ago
/**
* 搜索框的滚动监听变化
*/
searchAnimate() {
let that = this
uni
.createSelectorQuery()
.select('#listBox')
.fields(
{
scrollOffset: true,
size: true,
},
(res) => {
that.$mp.page.animate(
'#searchInputBox',
[
{
top: '10px',
width: '100%',
},
{
top: '-48px',
width: '70%',
},
],
800,
{
scrollSource: '#listBox',
timeRange: 1000,
startScrollOffset: 0,
endScrollOffset: 60,
}
)
that.$mp.page.animate(
'.the_city',
[
{
color: '#333',
},
{
color: '#fff',
},
],
500,
{
scrollSource: '#listBox',
timeRange: 1000,
startScrollOffset: 0,
endScrollOffset: 90,
}
)
// that.$mp.page.animate(
// ".daotian",
// [
// {
// opacity: "1",
// },
// {
// opacity: "1",
// },
// ],
// 1000,
// {
// scrollSource: "#listBox",
// timeRange: 1000,
// startScrollOffset: 0,
// endScrollOffset: 90,
// }
// );
}
)
.exec()
},
/**
* 跳转快速报名
*/
toRecord() {
uni.navigateTo({
url: '/root/home/quickApplication?title=快速报名',
})
},
shareJob(e) {
console.log(e)
this.currentJob = e
},
/**
* 跳转搜索页
*/
goSearch() {
this.G.isLogin()
if (this.G.isLogin()) {
uni.navigateTo({
url: '/root/other/search?from=home',
})
}
},
6 months ago
5 months ago
handleUpdateTab(e) {
console.log('e', e)
this.G.isLogin()
if (this.G.isLogin()) {
console.log('一级tab切换')
this.tabInfo.active = e
this.speed = -1
this.loading = true
this.query.page = 1
this.getList()
} else {
console.log('请先登录')
}
},
checkAllChange(e) {
console.log(e)
this.attentionList.forEach((item) => {
item.checked = e.value
})
this.upInfo = this.getListNum()
},
checkChange(e) {
console.log(e)
console.log(this.attentionList)
var check = true
this.attentionList.forEach((item) => {
if (item.id == e.id) {
item.checked = !item.checked
}
if (item.checked === false) {
check = false
}
})
this.checkAll = check
this.upInfo = this.getListNum()
},
getListNum() {
let num = 0
let list = []
this.attentionList.forEach((item) => {
if (item.checked) {
num++
list.push(item.id)
}
})
return {
num,
list,
}
},
submitInfo() {
let that = this
if (this.upInfo.num <= 0) {
uni.showToast({
title: '请至少选择一个',
icon: 'none',
})
return false
}
uni.showLoading({
title: '正在关注',
})
6 months ago
5 months ago
that.G.Post(
that.api.user_updateInviteId,
{
agencyIds: that.upInfo.list.join(','),
},
(res) => {
console.log(res)
uni.showToast({
title: '关注成功',
icon: '',
duration: 1000,
complete: function () {
// uni.hideLoading();
that.showPop = false
},
})
}
)
// setTimeout(() => {}, 2000);
},
onScrollToLower() {
console.log(123)
let that = this
6 months ago
5 months ago
that.attentionConfig.num++
this.getInviteList()
},
5 months ago
5 months ago
/**
* 筛选相关========================================================
*/
deleteSex() {
console.log('deleteSex')
this.getFilterData.sex = -1
this.getList()
},
deleteAge() {
console.log('deleteAge')
this.getFilterData.ageRangeStr = ''
this.getList()
},
5 months ago
5 months ago
deleteJobCategoryLabel(id) {
console.log(id)
this.getFilterData.jobCategoryLabelObjects = this.getFilterData.jobCategoryLabelObjects.filter((obj) => obj.id != id)
5 months ago
5 months ago
const idsArray = this.getFilterData.jobCategoryLabelObjects.map((obj) => obj.id)
// 将数组转换为字符串
this.getFilterData.jobCategoryLabelIds = idsArray.join(',')
console.log('deleteJobCategoryLabel', this.getFilterData)
5 months ago
5 months ago
this.getList()
},
deleteJobSpecialLabel(id) {
this.getFilterData.jobSpecialLabelObjects = JSON.parse(JSON.stringify(this.getFilterData.jobSpecialLabelObjects.filter((obj) => obj.id != id)))
const idsArray = this.getFilterData.jobSpecialLabelObjects.map((obj) => obj.id)
// 将数组转换为字符串
this.getFilterData.jobSpecialLabelIds = idsArray.join(',')
console.log('deleteJobSpecialLabel', this.getFilterData)
this.getList()
},
clearFilter1() {
var that = this
this.getFilterData.jobCategoryLabelIds = ''
this.getFilterData.jobSpecialLabelIds = ''
this.getFilterData.jobCategoryLabelObjects = []
this.getFilterData.jobSpecialLabelObjects = []
this.scrollTo = ''
this.getFilterData.sex = -1
this.getFilterData.ageRangeStr = ''
console.log('this.getFilterData', this.getFilterData)
this.$refs.filterChild.clearFilter()
this.getList()
5 months ago
5 months ago
setTimeout(() => {
that.scrollTo = 'listBox'
console.log('aaaaaaaaa')
}, 1)
},
receiveFromChild(data) {
console.log(data)
this.whichOneShow = ''
this.query.page = 1
this.getFilterData = JSON.parse(JSON.stringify(data))
console.log('getFilterData in receiveFromChild', this.getFilterData)
this.getList()
// this.messageFromChild = data.message;
},
chooseNl(type) {
let that = this
that.scrollTo = ''
that.whichOneShow = that.whichOneShow == type ? '' : type
setTimeout(() => {
that.scrollTo = 'tttop'
}, 1)
},
/**
* 筛选相关================================================end
*/
sortJob(ind) {
let that = this
this.sortList.active = ind
this.query.sortTag = this.sortList.list[ind].key
this.whichOneShow = ''
if (this.query.sortTag === 2) {
// 60 * 60 * 24
if (that.currentInfo.latitude && new Date().getTime() - that.currentInfo.timestamp < 1000 * 10) {
console.log('inTime')
this.getList()
} else {
console.log('outTime')
this.getLocation().then(() => {
this.getList()
})
}
} else {
this.getList()
}
},
},
}
6 months ago
</script>
<style lang="scss">
.p-home-inedx {
5 months ago
background-color: #ededed;
min-height: 100%;
.m-more {
position: absolute;
left: 12rpx;
bottom: -44rpx;
width: 154px;
background-color: #696969;
box-shadow: 0px 2px 19px 0px rgba(179, 179, 179, 0.5);
border-radius: 8px;
}
6 months ago
5 months ago
.suffix {
position: absolute;
right: 20rpx;
top: 10px;
z-index: 1;
border-top-right-radius: 110rpx;
border-bottom-right-radius: 110rpx;
}
6 months ago
5 months ago
// #ifdef MP-WEIXIN
.u-border {
border-color: #fff !important;
background-color: #fff;
}
.navigatorBar .tabs {
position: relative;
left: 50%;
color: #111;
transform: translateX(-50%);
justify-content: center;
box-sizing: border-box;
}
6 months ago
5 months ago
.sticky {
position: sticky;
top: 0px;
left: 0;
z-index: 100;
}
// #searchInputBox {
// display: flex;
// justify-content: space-between;
// padding: 0 10px;
// top: 10px;
// box-sizing: border-box;
// position: absolute;
// z-index: 9999;
// width: 100vw;
// }
// #endif
6 months ago
}
</style>