/* required by usingComponents */ /* @import "../../appcommon.wxss"; */ /* @import "../index/index.wxss"; */ @import "./filtercss.wxss"; /* @font-face{   font-family:YaHeiConsolasHybrid;   src:url('https://matripecandy.oss-cn-beijing.aliyuncs.com/1shoudanImg/DingTalk%20Sans.ttf');   } */ @font-face { font-family: "DingTalk"; /* 这里的字体名称是自定义的 */ src: url("https://matripecandy.oss-cn-beijing.aliyuncs.com/1shoudanImg/DingTalk%20Sans.ttf"); /* 服务器上ttf文件的路径,记得配置域名权限 */ font-weight: normal; font-style: normal; font-display: swap; } page { position: fixed; background-color: #f5f5f5; } .pa{ position: absolute; } .container { /* position: relative; */ /* display: flex; */ height: 100vh; width: 100%; padding-bottom: 0 !important; /* flex-direction: column; */ } #listBox { position: relative; height: 100vh; background-color: #f5f5f5; /* display: none; */ /* width: 90%; */ } .standardList { flex: 1 !important; overflow: hidden; /* min-height: calc(100vh - 214px); */ } .searchBar { height: 50px; line-height: 50px; padding-left: 12px; padding-right: 8px; background-color: #f5f5f5; } .searchBar .weui-search-bar__form { flex: unset; width: 210px !important; /* width: 160px !important; */ height: 32px; /* left: 10px; */ position: relative; box-shadow: 0px 0px 8px 0px rgba(206, 206, 206, 0.5); } .searchBar .weui-search-bar__form .weui-search-bar__box { height: 32px !important; line-height: 32px !important; padding-left: 28px; } .searchBar .weui-search-bar__form .weui-search-bar__box .icon-guanbi11 { position: absolute; right: 58px; } .clear_icon { position: absolute; display: inline-block; width: 12px; height: 12px; line-height: 10px; border-radius: 50%; background-color: #fff; right: -2px; top: -2px; color: #aaa; /* font-size: 12px; */ } .weui-search-bar__form .icon-sousuo { left: 8px; } .searchBar .typeChange { display: flex; align-items: center; /* padding-top: 6px; */ } .searchBar .typeChange image { border-radius: 24px; box-shadow: 0px 2px 2px 0px rgba(214, 214, 214, 0.5); } .tarbarText { font-size: 18px; font-weight: 400; color: #666666; /* line-height: 25px; */ } .tarbarText.active { font-weight: 601; color: #000000; } .tarbar { /* position: relative; */ text-align: center; /* z-index: 0; */ } .tarbarImg { width: 22px; height: 5px; display: block; margin: 0 auto; margin-bottom: 12px; } .newSearch { width: 88px; height: 32px; background: #ffffff; border-radius: 16px; position: relative; top: 50%; transform: translateY(-50%); float: right; font-size: 16px; font-weight: 600; text-align: center; color: #999; line-height: 32px; /* margin-top: 12px; */ } .lNum { opacity: 0.6; font-size: 32px; font-weight: 400; text-align: right; color: var(--color-ysd); line-height: 39px; margin-right: 12px; font-family: "DingTalk"; } .f10 { font-size: 10px !important; } .jobTitle2 { font-size: 16px; color: #333; font-weight: bold; line-height: 24px; } .jobText.bz { height: 20px; padding: 0px 8px; background-color: var(--color-ysd); border-radius: 10px; color: #fff; line-height: 20px; } .jobText { line-height: 24px; } .daili { width: 30px; height: 16px; background: #fff3f3; border: 1px solid #fea39f; border-radius: 2px; font-size: 12px; font-weight: 400; text-align: center; color: #f6343e; line-height: 16px; float: right; margin-top: 4px; } .ahoverd { background-color: #f5f5f5 !important; } .fixedNum { position: fixed; right: 16px; bottom: 32px; z-index: 999; width: 60px; height: 60px; background: #ffffff; border-radius: 50%; box-shadow: 0px 2px 8px 0px rgba(169, 169, 169, 0.5); text-align: center; line-height: 60px; } .p024 { padding: 0 24px; } .demo-steps-class { margin: 20px 0; border-bottom: 1px solid #e5e5e5; } .demo-btn-container { display: flex; justify-content: space-between; margin: 20px; } .demo-btn { width: 47%; } .atd-config-transparent-header { background-color: #fff; } /*.atd-config-transparent-header .content-top { background-image: url('https://gw.alipayobjects.com/mdn/rms_7a3c08/afts/img/A*13jpTYrECqYAAAAAAAAAAABjARQnAQ'); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; width: 100vw; height: 746rpx; color: #fff; }*/ /* .atd-config-transparent-header .content-top{ color: #000; } */ .atd-config-transparent-header .content-top .statusBar { background-color: transparent; display: flex; align-items: center; justify-content: center; } .atd-config-transparent-header .content-top .titleBar { /* background-color: #108ee9; */ display: flex; align-items: center; justify-content: left; padding-left: 32rpx; } .tab-content { display: flex; justify-content: center; align-items: center; padding: 40rpx; box-sizing: border-box; /* 如果 swipeable="{{true}}",需要增加 height */ /* height: 350px; */ /* 为了体现 stickyBar 的作用而增加的 tab-content 的高度 */ height: 100vh; } /*.atd-config-transparent-header .content-bottom { margin-top: 1000rpx; background-image: url('https://gw.alipayobjects.com/mdn/rms_7a3c08/afts/img/A*rFctR6myHjcAAAAAAAAAAABjARQnAQ'); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; width: 100vw; height: 746rpx; } */ .atd-config-transparent-header .content-top .titleBar { background-color: #fff; } .am-tabs-content-wrap { height: auto !important; } .atd-config-transparent-header .content-top .titleBar { padding-left: 0; } .am-tabs-tab-bar-wrap { width: calc(100vw - 120px); } .latest { color: rgba(0, 0, 0, 0.65); } .latest .active { color: rgba(0, 0, 0, 0.85); font-weight: 601; } .secondSelect { padding: 8px 20px; } .zoneSelect .dib { font-size: 14px; margin-left: 8px; background-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.65); padding: 4px; } .zoneSelect .dib.active { background-color: rgba(254, 99, 63, 0.15); color: #fe633f; } .am-tabs-bar { padding-left: 20px; } .weui-tabs-swiper { display: none; } .weui-tabs-bar__item { margin: 12px 8px; } .weui-tabs-bar__title { color: rgba(0, 0, 0, 0.65); } .weui-tabs-bar__title.tab-bar-title__selected { font-weight: bolder; color: rgba(0, 0, 0, 0.85); border-bottom-color: #fe633f !important; } .dian { float: left; position: relative; line-height: 36px; left: 20px; box-shadow: -30px 0 30px #fff; } .weui-cell_access .weui-cell__ft { padding-right: 16px; } .weui-tabs { padding-left: 12px; } .mt6 { margin-top: 6px; } .mb6 { margin-bottom: 5px; } .storeName{ max-width: 350rpx; } .logoClass { width: 52px; height: 52px; max-width: 100%; /* border: 1rpx solid #ddd; */ margin-bottom: 8px; border-radius: 4px; } .pendant { position: absolute; width: 52px; height: 52px; left: 0; top: 0; } .f20.c633.lh1 { font-weight: 601; } .hourPay { /* f18 c633 lh1 flex-1 tr */ font-size: 16px; line-height: 1; flex: 1; text-align: right; white-space: nowrap; color: var(--color-f40); font-weight: 601; /* margin-top: 2px; */ } .weui-btn { margin-left: 0 !important; margin-right: 0 !important; } .weui-btn_primary { border-radius: 3px; font-size: 12px; margin-top: 0; font-weight: 400; width: 48px; height: 18px; border-radius: 9px; /* line-height: 18px; */ background-color: var(--color-ysd); margin-bottom: 0; } .tttg { /* max-width: calc(100vw - 200px); */ /* float: left; */ display: flex; justify-content: start; align-items: center; width: 63%; white-space: nowrap; } .tttg .t-icon { display: block; width: 32px; height: 20px; margin-right: 6px; } /* .tttg .tagsLi { display: none; } */ .tttg.isTagShow > view:nth-child(n + 4) { display: none; } /* .tttg .tagsLi:nth-child(-n + 3) { display: inline-block; } */ .tagsLi { display: inline-block; height: 21px; box-sizing: border-box; font-size: 12px; font-weight: 400; color: #666; background: #f1f1f1; border-radius: 2px; padding: 0 4px 0px; line-height: 20px; margin-right: 6px; margin-bottom: 0px; position: relative; top: 1px; /* border: 1rpx solid transparent; */ } .tagsLi.spli { color: var(--color-ysd); background-color: rgba(234, 67, 58, 0.2); } .f12.c045.flex-1.mb4 { margin-bottom: 7px; } .prImg { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 53px; /* height: 52px; */ margin-right: 8px; } button.collect { /* position: absolute; */ /* left: 0; */ /* top: 61px; */ /* bottom: -1px; */ padding: 0 3px; /* max-width: 52px; */ width: 52px; border: 1px solid rgb(236, 235, 235); border-radius: 2px; height: 20px; box-sizing: border-box; text-align: center; margin: 0; padding: 0px; background-color: #fff; line-height: 20px; display: flex; align-items: center; justify-content: center; } button.collect icon { display: block; font-size: 10px; } button.collect icon::before { display: block; } .cf { color: #fff; } .f15 { font-size: 15px !important; } .p1020 { padding: 10px; } #searchBar .cf, #searchBar .cf085 { color: #fff; } .innerSwiper { border-radius: 8px; overflow: hidden; } .jobCenter { height: calc(100vh); padding: 0px; margin-top: 10px; border-radius: 8px; position: relative; z-index: 999; background-color: #fff; box-sizing: border-box; } .jobCenterActive { /* height: calc(100vh); */ /* padding: 0 10px; margin-top:10px; */ /* border-radius: 8px; */ position: relative; z-index: 998; background-color: #f5f5f5; box-sizing: border-box; } .jobOne { /* margin-top: 10px; */ padding: 0 10px; line-height: 1; /* margin-top: -1rpx; */ } .jobIn { border-bottom: 1px solid #f3f3f3; padding: 16px 0px; /* background-color: #fff; */ /* border-radius: 4px; */ } /* .jobOne:nth-of-type(1) .jobIn { border-top: 1rpx solid #f00; } */ /* .jobOne:nth-child(1) .jobIn { border-top: 0; } */ .icon-weixuanzhong2 { color: #999; font-size: 6px; margin-left: 2px; line-height: 36px; position: relative; top: -2px; } .csbf { /* position: relative; */ padding: 0px 8px; /* flex: 1; */ /* width: 66px; */ height: 28px; /* margin-top: 10px; */ background-color: #fff; border-radius: 16px; /* width:60px; */ text-align: center; font-size: 14px; font-weight: 400; color: #333333; line-height: 28px; box-sizing: border-box; /* margin-right: 8px; */ } .csbf .icon-shouye-xiala { font-size: 7px; position: relative; color: #f6f6f6 !important; top: -2px; } .csbf.active { /* color: var(--color-ysd); */ /* height: 35px; */ font-weight: 601 !important; /* border-radius: 16px 16px 0 0; */ } .special_active, .brand_active { /* padding-bottom: 7px; */ } .csbf.activecolor { font-weight: 600; color: var(--color-ysd) !important; } .csbf.active .icon-shouye-xiala { /* color: var(--color-ysd) !important; */ } .csbf .icon-zhankai { /* margin-left: 2px; */ color: #999; } .topHover, .ahover { opacity: 0.8; } .c8, .icon-wode-shoucang { color: #888; } /* .cred, .icon-shoucang-red { color: rgba(234, 67, 58, 1); } */ .collect.collectred { /* opacity: 0.5; */ /* border: 1rpx solid var(--color-ysd); color: var(--color-ysd); */ background: #FFEEE9; color: var(--color-ysd); border: 1rpx solid #ff4400; } .opacityBtn { position: absolute; padding: 0; width: unset !important; /* width: calc(100vw - 100px); */ z-index: 999; opacity: 0; } .opacityBtn button { padding: 0 10px; } .clickMore { width: 120px; height: 28px; margin: 16px auto; padding: 0; opacity: 1; border: 1px solid #0000000f; border-radius: 20px; color: #8c8c8c; line-height: 25px; font-size: 14px; font-weight: normal; background-color: #fff; } .stm { font-size: 13px; font-weight: 400; text-align: center; color: #666; line-height: 18px; } .filterprice { position: relative; height: 68.5%; /* height: 500px; */ overflow: auto; border-radius: 0 0 14px 14px; background-color: #f6f6f6; } .filterprice .b1 { border: 1px solid var(--color-ysd); } .filter.filterprice > view { margin: 16px 18px 0; border-radius: 24px; text-align: center; overflow: hidden; background-color: #fff; } /* .filter.filterprice > view:first-child{ margin-top:0; } */ .sort.filterprice { /* border-radius: 12px; */ overflow: hidden; /* display: flex; flex-direction: column; justify-content: center; */ } .btmFix { height: 56px; /* padding-left: 50px; */ justify-content: center; border-radius: 0 0 10px 10px; line-height: 56px; background-color: #fff !important; } .btmFix > view { display: flex; align-items: center; width: 128px !important; /* margin-right: 20px; */ line-height: 48px; } .btmFix > view:first-child { margin-right: 20px; } .btmFix button { height: 36px; margin: 0; /* margin-top: 10px; */ margin-bottom: 0; font-size: 16px; line-height: 36px; } .brand .content { padding: 16px 18px; padding-bottom: 50px; border-radius: 12px; flex-wrap: wrap; box-sizing: border-box; /* height: 208px; */ height: calc(100% - 56px); overflow: auto; justify-content: start; } .brand .content > view { display: flex; align-items: center; justify-content: center; border: 1px solid transparent; /* padding: 0px 4px; */ width: 30%; height: 36px; font-size: 16px; color: #1d1d1d; font-weight: 401; background-color: #fff; border-radius: 100px; margin-bottom: 10px; margin-right: 4%; box-sizing: border-box; } /* .brand .content > view image { width: 44px; height: 44px; border-radius: 6px; margin-right: 8px; } */ .brand .content > view:nth-child(3n) { margin-right: 0px; } /* .filterprice .specialtag .mt10 { display: flex; justify-content: start; flex-wrap: wrap; } */ .gjFixed { position: absolute; top: 44px; left: 0; width: 100vw; height: 100vh; /* right:0; bottom:0; */ z-index: 999999; background-color: rgba(0, 0, 0, 0.8); } .sort { animation: singleBox 0.2s; animation-fill-mode: forwards; /* animation-timing-function: linear; */ /* animation-timing-function: ease-out; */ animation-timing-function: ease-in; } .filterBox, .brand { animation: filterBox 0.35s; animation-fill-mode: forwards; /* animation-timing-function: linear; */ /* animation-timing-function: ease-out; */ animation-timing-function: ease-in; } @keyframes filterBox { 0% { height: 0; /* opacity: 0; */ } 100% { height: 58.5%; /* opacity: 1; */ } } @keyframes singleBox { 0% { height: 0; /* opacity: 0; */ } 100% { height: 240px; /* opacity: 1; */ } } /* .activeWindow { height: 240px !important; } */ .oh { overflow: hidden; height: 100vh; } .oa { overflow: auto; } .weui-half-screen-dialog { height: 75vh; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 0; } .specialtag { position: relative; padding: 0 18px 10px; height: calc(100% - 48px); overflow: auto; box-sizing: border-box; } .specialtag .tagBox { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; padding: 0; } .bgAc { display: inline-block; /* width: 82px; */ width: 29%; height: 36px; background: #fff; border: 1px solid transparent; border-radius: 999px; font-size: 16px; font-weight: 401 !important; color: #1d1d1d; line-height: 36px; text-align: center; margin-right: 5%; margin-bottom: 10px; } .bgAc:nth-child(3n) { margin-right: 0; } .bgAc.active { border-color: var(--color-ysd); /* background-color: #ffefe9; */ color: var(--color-ysd); } .brandactive { color: var(--color-ysd) !important; border-color: var(--color-ysd) !important; } .btmFix { position: absolute; bottom: 0px; left: 0; width: 100%; /* background-color: #ffffff; */ z-index: 99; } .resetBtn { width: 100% !important; height: 36px; display: flex; align-items: center; justify-content: center; opacity: 1; background: #fff; border: 1px solid var(--color-ysd); border-radius: 25px; font-size: 18px; font-weight: 601; color: var(--color-ysd); padding: 0; margin-top: 0; box-sizing: border-box; } .resetBtn:active { background-color: #f2f2f2; } .loginOut { width: 100% !important; height: 44px; opacity: 1; display: flex; align-items: center; justify-content: center; background: var(--color-ysd); border-radius: 25px; font-size: 18px; font-weight: 601; color: #ffffff; padding: 0; line-height: 44px; margin-bottom: 40px; margin-top: 20rpx; } .spef { /* padding: 10px 0; */ justify-content: space-between; } .spef .flex-1 { max-width: 57px; min-width: 52px; } .p10100 { padding: 10px 10px 0; min-height: 100vh; } .xgxg { /* height: 44px; */ /* position: relative; */ padding: 8px 0px; /* position: sticky; */ /* top: 103px; */ /* z-index: 9999; */ /* background-color: #fff; */ /* border-bottom: 1px solid #f3f3f3; */ border-top-left-radius: 16px; border-top-right-radius: 16px; /* border-radius: 8px; */ } .login_now { padding: 0; } .record { width: 64px !important; padding: 0; height: 20px !important; line-height: 20px; /* background-color: var(--color-ysd) !important; */ } .filterTag { display: flex; height: 44px; width: 100%; align-items: center; /* padding: 10px 0; */ line-height: 44px; background-color: #f5f5f5; box-sizing: border-box; border-top: 1rpx solid #eee; /* margin-top: 8px; */ } .clear { position: sticky; right: 0px; top: 0px; height: 50px; min-width: 60px; text-align: center; line-height: 50px; font-size: 14px; background: linear-gradient(180deg, #f5f5f5, #ffffff 23%, #ffffff 79%, #f5f5f5); box-shadow: -12px 0px 8px -4px rgba(206, 206, 206, 0.6); } .filterTag .brandTag, .filterTag .specialTag { display: flex; /* width: 200vw; */ position: relative; justify-content: start; align-items: center; flex-wrap: nowrap; padding-right: 8px; /* border-right: 1px solid #ccc; */ } /* .filterTag .brandTag .mt10, .filterTag .specialTag .mt10 { display: flex; justify-content: space-between; } */ .filterTag .brandTag.hascontent::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background-color: #ccc; } .hascontent::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background-color: #ccc; } .filterTag .brandTag > view, .filterTag .specialTag > view, .genderTag > view { height: 28px; line-height: 26px; background-color:var(--color-ysd-bg); border: 1px solid var(--color-ysd); border-radius: 999px; margin-right: 8px; font-size: 12px; color: var(--color-ysd); /* min-width: 100px; */ white-space: nowrap; padding: 0px 12px; box-sizing: border-box; } .genderTag { width: 80px; padding-left: 8px; justify-content: center !important; } .filterTag .brandTag > view:last-child, .filterTag .specialTag > view:last-child { margin-right: 0px; } .filterTag .specialTag { padding-left: 8px; } .specialnum { height: 16px; min-width: 16px !important; line-height: 16px; padding: 0px; font-size: 12px; color: #fff; text-align: center; border-radius: 999px; background-color: var(--color-ysd); } .quickapply { /* position: relative; */ display: flex; justify-content: space-between; height: 80px; margin: 0 10px 0; padding-top: 10px; margin-bottom: 0; /* background-color: #fff; */ overflow: hidden; } .quickapply button { display: flex; height: 100%; width: 100%; padding: 0; margin: 0; } .sticky { position: sticky; top: 0px; left: 0; z-index: 999; } .quickapply button > view { position: relative; display: flex; justify-content: space-between; align-items: center; width: 50%; padding: 20px 24px; border-radius: 8px; background-color: #fff; } .quickapply button > view:last-child { margin-left: 10px; } /* .quickapply button > view:first-child::after { content: ""; width: 1px; height: 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: #eee; } */ .quickapply button > view .t-icon { width: 38px; height: 38px; } .quickapply button > view .info > view { text-align: left; line-height: 1.6; } .tabTable { margin-top: 10px; padding: 0 10px; justify-content: space-between; } .tabTable > view { display: flex; flex: 1; padding: 8px 0 4px 0; justify-content: center; align-items: center; text-align: center; font-size: 18px; } .tabTable .all .iconfont { font-size: 18px !important; } .tabTable > view .iconfont { font-size: 20px; } .tabTable > view.active { background-color: #fff; border-radius: 12px 12px 0px 0px; color: #f40; /* font-weight: 600; */ } .tabTable > view.active .iconfont { /* font-weight: 600; */ color: #f40; } .tabTable > view .iconfont { /* font-size: 18px; */ margin-right: 5px; } .display-flex { display: flex; justify-content: space-between; } .drawerMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; transition: opacity 0.3s, visibility 0.3s; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; } .drawerMask.showDrawer { opacity: 1; visibility: visible; } .drawer.showDrawer { /* position: relative; */ border-radius: 8px 8px 0 0; width: 100vw; height: 90vh; /* bottom: -44px; */ /* padding-bottom: 44px; */ } .drawer { position: fixed; left: 0; right: 0; bottom: 0px; z-index: 2000; width: 100vw; background-color: #fff; height: 0; transition: all 0.3s; } .showDrawer .title { padding: 6px 16px; } .showDrawer .title { position: relative; } .showDrawer .title .icon-guanbi { content: ""; position: absolute; right: 24px; top: 16px; /* transform: translate(0%, -50%); */ } .showDrawer .content { height: 100%; } .showDrawer .annunciate { height: calc(100% - 112px); overflow: auto; } .showDrawer .annunciate .info { width: 100%; padding: 12px 22px; padding-bottom: 120px; box-sizing: border-box; } .showDrawer .footer { display: flex; justify-content: space-between; text-align: center; align-items: center; padding-top: 15px; padding-right: 48px; padding-left: 48px; border-top: 1px dashed #cccccc; } .collectActive { color: var(--color-ysd); font-weight: 601; position: relative; } .collectActive::after { content: ""; background: var(--color-ysd); height: 3px; width: 22px; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); } .fee { height: 20px; padding-right: 4px; background: #fff; border: 1px solid var(--color-ysd); background-color: var(--color-ysd); color: #fff; /* box-sizing: border-box; */ border-radius: 20px; overflow: hidden; line-height: 20px; } .fee .inner { height: 100%; padding: 0 4px; margin-right: 4px; background-color: #fff; color: var(--color-ysd); } .miniBtn { width: 72px; height: 24px; background-color: var(--color-f40); font-size: 14px; border-radius: 99px; line-height: 24px; color: #fff; text-align: center; } .miniBtn.disabled{ background-color: #ccc; } .pabtm { position: fixed; /* height: 86px; */ width: 48px; right: 12px; padding: 6px 0px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; flex-direction: column; justify-content: space-between; box-sizing: border-box; z-index: 999; } .pabtm .typeChange { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 50%; padding: 5px; text-align: center; box-sizing: border-box; } .tjsx { position: relative; width: 48px; height: 48px; background: #ffffff; border-radius: 24px; display: flex; /* box-shadow: 0px 0px 8px 0px #dddddd; */ /* line-height: 1; */ color: #333; font-weight: bold; justify-content: center; align-items: center; /* margin-left: 24px; */ } .tjsx view { font-size: 13px; line-height: 1.2 !important; } .tjsx i { width: 16px; height: 16px; margin-bottom: 2px; margin-top: -4px; } .leftBox { position: fixed; left: 0; top: 0; width: 0; height: 0; /* width: 100vw; height: 100vh; */ z-index: 9999; } .filterContainer { padding: 0 10px; height: calc(40vh - 64px); /* width: calc(100%); */ box-sizing: border-box; background-color: #f6f6f6; padding-bottom: 10px; } .leftBox .mask { position: fixed; width: 100vw; height: 100vh; z-index: 1; background-color: rgba(0, 0, 0, 0.5); } .leftBox .hideBox { position: relative; left: -100vw; top: 0; width: 88vw; height: 100vh; overflow: hidden; z-index: 1; background-color: #fff; border-radius: 0px 8px 8px 0px; transition: left linear 0.2s; } .buttonShow { left: 88vw !important; transform: translateY(-50%) translateX(-50%) !important; } .leftBox .leftShow { left: 0 !important; } .leftButton { position: fixed; display: flex; left: 0; z-index: 999; /* top: 350px; */ width: 40px; height: 88px; background: rgba(0, 0, 0, 0.6); border-radius: 0px 8px 8px 0px; align-items: center; justify-content: center; color: #fff; transform: translateY(-50%); transition: all linear 0.2s; } .halfHide { transform: translateY(-50%) translateX(-50%); } .leftButton .column { font-size: 14px; width: 14px; line-height: 1.2; word-spacing: wrap; } .rotate { transform: rotate(180deg); } /* .the_city { min-width: 60px; } */ #searchInputBox { display: flex; justify-content: space-between; padding: 0 10px; top: 10px; box-sizing: border-box; position: absolute; z-index: 1; width: 100vw; } #searchInput { /* margin-left: 12px; */ margin-left: 8px; flex: 1; border-radius: 99px; background-color: #fff; } .bannerContainer { background-color: #f5f5f5; padding-top: 10px; } .banner { width: calc(100vw - 20px); height: 70px; margin: 0 10px; border-radius: 8px; overflow: hidden; transform: translateY(0); /* background-color: #fff; */ } .banner swiper-item { width: 100%; box-sizing: border-box; padding: 0 3px; text-align: center; } .navListContainer { overflow: hidden; background-color: #f5f5f5; } .navList { width: calc(100vw - 20px); /* height: 97px; */ display: flex; flex-wrap: wrap; justify-content: start; align-items: center; text-align: center; padding-top: 12px; margin: 0 10px; margin-top: 10px; border-radius: 8px; background-color: #fff; } .navSub { width: 20%; margin-bottom: 12px; } .navSub image { width: 44px; height: 44px; } #navBox { position: relative; overflow: hidden; margin-top: 50px; /* z-index: -1; */ /* visibility: ; */ }