|
|
@@ -1,387 +1,399 @@
|
|
|
-<template name="headerNavbar">
|
|
|
- <!-- 自定义导航栏 -->
|
|
|
- <view>
|
|
|
- <view
|
|
|
- class="navbar-wrap"
|
|
|
- :class="isScroll ? opacityNav : ''"
|
|
|
- :style="{
|
|
|
- height: CustomBar + 88 + 'px',
|
|
|
- paddingTop: StatusBar + 'px'
|
|
|
- }"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="navbar-text"
|
|
|
- :style="{
|
|
|
- color: navbarData.textColor ? navbarData.textColor : '',
|
|
|
- lineHeight: CustomBar - StatusBar + 'px;',
|
|
|
- fontSize: fontSizeSetting + 'px;',
|
|
|
- paddingLeft: navbarData.textLeft ? '' : 12 + 'px'
|
|
|
- }"
|
|
|
- :class="platformClass"
|
|
|
- >
|
|
|
- {{ navbarData.title ? navbarData.title : ' ' }}
|
|
|
- </view>
|
|
|
- <view class="search-input">
|
|
|
- <view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
|
|
|
- <view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
|
|
|
- <view class="search-text">{{ hotSearchText }}</view> <view class="search-btn">搜索</view>
|
|
|
- </view>
|
|
|
- <view class="gosearch-kf">
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
- <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
|
|
|
- <text class="iconfont icon-zixunrexian"></text>
|
|
|
- </button>
|
|
|
- <!-- #endif -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="swiper-banner-nav">
|
|
|
- <scroll-view class="scroll-view_H" scroll-x="true">
|
|
|
- <view class="tui-goods__item active">首页</view>
|
|
|
- <view class="tui-goods__item" v-for="(navs, index) in navBarsList" @click="NavToDetailPage(navs,index)">
|
|
|
- {{ navs.name }}
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="swiper-nav-icon" @click="showDropScreenShow">
|
|
|
- <text class="iconfont" :class="dropScreenShow ? 'icon-xiangshangjiantou':'icon-xiangxiajiantou'"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!--顶部下拉筛选弹层 属性-->
|
|
|
- <tui-top-dropdown
|
|
|
- backgroundColor="#FFFFFF"
|
|
|
- :show="dropScreenShow"
|
|
|
- :height="310"
|
|
|
- :paddingbtm="10"
|
|
|
- :translatey="dropScreenH"
|
|
|
- @close="btnCloseDrop"
|
|
|
- >
|
|
|
- <scroll-view class="tui-scroll-box" scroll-y :scroll-top="scrollTop">
|
|
|
- <view class="tui-seizeaseat-24">
|
|
|
- <view class="tui-drop-item tui-icon-middle">全部分类</view>
|
|
|
- <view class="tui-drop-item tui-icon-middle active">首页</view>
|
|
|
- <view
|
|
|
- class="tui-drop-item tui-icon-middle"
|
|
|
- v-for="(item, index) in navBarsList"
|
|
|
- :key="index"
|
|
|
- @tap.stop="NavToDetailPage(item,index)"
|
|
|
- :data-index="index"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </tui-top-dropdown>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-var self
|
|
|
-import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
-export default {
|
|
|
- name: 'headerNavbar',
|
|
|
- components: {
|
|
|
- btSearch
|
|
|
- },
|
|
|
- props: {
|
|
|
- navbarData: {
|
|
|
- // 由父页面传递的数据
|
|
|
- type: Object
|
|
|
- },
|
|
|
- navBarsList: {
|
|
|
- type: Array
|
|
|
- },
|
|
|
- isScroll: {
|
|
|
- type: Boolean,
|
|
|
- default: () => false
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- clickPath: '/pages/search/search',
|
|
|
- hotSearchText: '搜索商品/项目仪器',
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- StatusBar: this.StatusBar,
|
|
|
- fontSizeSetting: this.fontSizeSetting,
|
|
|
- screenWidth: this.screenWidth,
|
|
|
- capsule: this.capsule,
|
|
|
- platformClass: this.platformClass,
|
|
|
- opacityNav: 'opacityNav', // 渐变颜色
|
|
|
- height: 64, //header高度
|
|
|
- scrollTop: 0,
|
|
|
- dropScreenH: this.CustomBar+78, //下拉筛选框距顶部距离
|
|
|
- dropScreenShow:false,
|
|
|
- animationData: {}
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (getCurrentPages().length === 1) {
|
|
|
- // 当只有一个页面时
|
|
|
- this.navbarData.haveBack = false
|
|
|
- } else {
|
|
|
- this.navbarData.haveBack = true
|
|
|
- }
|
|
|
- let obj = {};
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- obj = wx.getMenuButtonBoundingClientRect();
|
|
|
- // #endif
|
|
|
- uni.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
|
|
|
- //略小，避免误差带来的影响
|
|
|
- this.dropScreenH = (this.height * 750) / res.windowWidth + 148;
|
|
|
- }
|
|
|
- });
|
|
|
- console.log('dropScreenH',this.dropScreenH)
|
|
|
- },
|
|
|
- onLoad() {},
|
|
|
- onPageScroll(e) {
|
|
|
- console.log(e)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- BackPage: function() {
|
|
|
- this.$emit('navigateBack')
|
|
|
- },
|
|
|
- _goSearchPath: function() {
|
|
|
- this.$emit('goSearchPath')
|
|
|
- },
|
|
|
- _goHome: function() {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/tabBar/home/index'
|
|
|
- })
|
|
|
- },
|
|
|
- NavToDetailPage(item,index) {//跳转
|
|
|
- if(index === 3){
|
|
|
- let linkPath = 'https://static.caimei365.com/app/caimei-activity-h5/html/2023/activity_02.html'
|
|
|
- this.$api.navigateTo(`/pages/h5/activity/activity?link=${linkPath}&linkId=382`)
|
|
|
- }else{
|
|
|
- /**
|
|
|
- * 页面跳转
|
|
|
- **/
|
|
|
- this.$api.FlooryNavigateTo(item)
|
|
|
- }
|
|
|
- },
|
|
|
- showDropScreenShow(){
|
|
|
- this.dropScreenShow = !this.dropScreenShow
|
|
|
- if(this.dropScreenShow){
|
|
|
- // 禁止页面滚动
|
|
|
- uni.setScrollEnabled(false)
|
|
|
- }else{
|
|
|
- // 禁止页面滚动
|
|
|
- uni.setScrollEnabled(true)
|
|
|
- }
|
|
|
- },
|
|
|
- btnCloseDrop(){
|
|
|
- this.dropScreenShow = false
|
|
|
- },
|
|
|
- handleContact(e) {
|
|
|
- console.log(e.detail.path)
|
|
|
- console.log(e.detail.query)
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {}
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.navbar-wrap {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- top: 0;
|
|
|
- z-index: 9999;
|
|
|
- box-sizing: border-box;
|
|
|
- background:#ffffff url(https://static.caimei365.com/app/img/bg/home_cumres_bg@2x.png);
|
|
|
- background-size: cover;
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-.opacityNav {
|
|
|
-
|
|
|
-}
|
|
|
-.navbar-text {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #000000;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-.navbar-text.center {
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.navbar-text.left {
|
|
|
- text-align: left;
|
|
|
- padding-left: 45px;
|
|
|
-}
|
|
|
-.navbar-icon {
|
|
|
- position: fixed;
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.navbar-icon .iconfont {
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 44rpx;
|
|
|
- padding-right: 40rpx;
|
|
|
- margin-top: 1px;
|
|
|
-}
|
|
|
-.navbar-icon .icon-iconfonticonfontsousuo1 {
|
|
|
- color: #000000;
|
|
|
-}
|
|
|
-.navbar-icon view {
|
|
|
- height: 18px;
|
|
|
- border-left: 0.5px solid rgba(0, 0, 0, 0.3);
|
|
|
- margin-top: 6px;
|
|
|
-}
|
|
|
-.navbar-loading {
|
|
|
- background: #fff;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.search-input {
|
|
|
- width: 100%;
|
|
|
- height: 90rpx;
|
|
|
- padding: 20rpx 24rpx 0rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .gosearch-btn {
|
|
|
- width: 632rpx;
|
|
|
- height: 100%;
|
|
|
- padding: 5rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- color: #8a8a8a;
|
|
|
- background: #ffffff;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 80rpx;
|
|
|
- border: 1px solid #ff5b00;
|
|
|
- float: left;
|
|
|
- .search-icon {
|
|
|
- width: 80rpx;
|
|
|
- height: 56rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 9rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 56rpx;
|
|
|
- .icon-iconfonticonfontsousuo1 {
|
|
|
- margin: 0 6rpx;
|
|
|
- font-size: $font-size-40;
|
|
|
- color: #8a8a8a;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-text {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 56rpx;
|
|
|
- color: #8a8a8a;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- width: 120rpx;
|
|
|
- height: 58rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- background-color: #ff5b00;
|
|
|
- line-height: 58rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #ffffff;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .gosearch-kf {
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
- border-radius: 50%;
|
|
|
- float: left;
|
|
|
- line-height: 70rpx;
|
|
|
- text-align: center;
|
|
|
- .contact-btn {
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- line-height: 70rpx;
|
|
|
- text-align: center;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-48;
|
|
|
- color: #ff5b00;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.swiper-banner-nav {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15rpx 76rpx 15rpx 24rpx;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- .swiper-nav-icon {
|
|
|
- width: 76rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- .scroll-view_H {
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
- .tui-goods__item {
|
|
|
- display: inline-block;
|
|
|
- margin: 0 20rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- &.active {
|
|
|
- color: #ff5b00;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 20rpx;
|
|
|
- height: 4rpx;
|
|
|
- border-radius: 2rpx;
|
|
|
- background: #ff5b00;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- margin-left: -10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-scroll-box{
|
|
|
- height: 280rpx;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.tui-seizeaseat-24 {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx;
|
|
|
- .tui-drop-item {
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 56rpx;
|
|
|
- float: left;
|
|
|
- line-height: 56rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- font-size: 24rpx;
|
|
|
- margin: 12rpx 8rpx;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid #f5f5f5;
|
|
|
- color: #666666;
|
|
|
- border-radius: 28rpx;
|
|
|
- &.active {
|
|
|
- background: #ffffff;
|
|
|
- border-color: #ff5b00;
|
|
|
- color: #ff5b00;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template name="headerNavbar">
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <view>
|
|
|
+ <view class="navbar-wrap" :class="isScroll ? opacityNav : ''" :style="{
|
|
|
+ height: CustomBar + 72 + 'px',
|
|
|
+ paddingTop: StatusBar + 'px'
|
|
|
+ }">
|
|
|
+ <view class="navbar-text" :style="{
|
|
|
+ color: navbarData.textColor ? navbarData.textColor : '',
|
|
|
+ lineHeight: CustomBar - ( StatusBar + 4 ) + 'px;',
|
|
|
+ fontSize: fontSizeSetting + 'px;',
|
|
|
+ paddingLeft: navbarData.textLeft ? '' : 12 + 'px'
|
|
|
+ }" :class="platformClass">
|
|
|
+ {{ navbarData.title ? navbarData.title : ' ' }}
|
|
|
+ </view>
|
|
|
+ <view class="search-input">
|
|
|
+ <view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
|
|
|
+ <view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
|
|
|
+ <view class="search-text">{{ hotSearchText }}</view>
|
|
|
+ <view class="search-btn">搜索</view>
|
|
|
+ </view>
|
|
|
+ <view class="gosearch-kf">
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
|
|
|
+ <text class="iconfont icon-zixunrexian"></text>
|
|
|
+ </button>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="swiper-banner-nav">
|
|
|
+ <scroll-view class="scroll-view_H" scroll-x="true">
|
|
|
+ <view class="tui-goods__item active">首页</view>
|
|
|
+ <view class="tui-goods__item" v-for="(navs, index) in navBarsList"
|
|
|
+ :key="index"
|
|
|
+ @click="NavToDetailPage(navs,index)">
|
|
|
+ {{ navs.name }}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="swiper-nav-icon" @click="showDropScreenShow">
|
|
|
+ <text class="iconfont"
|
|
|
+ :class="dropScreenShow ? 'icon-xiangshangjiantou':'icon-xiangxiajiantou'"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--顶部下拉筛选弹层 属性-->
|
|
|
+ <tui-top-dropdown backgroundColor="#FFFFFF" :show="dropScreenShow" :height="310" :paddingbtm="10"
|
|
|
+ :translatey="dropScreenH" @close="btnCloseDrop">
|
|
|
+ <scroll-view class="tui-scroll-box" scroll-y :scroll-top="scrollTop">
|
|
|
+ <view class="tui-seizeaseat-24">
|
|
|
+ <view class="tui-drop-item tui-icon-middle">全部分类</view>
|
|
|
+ <view class="tui-drop-item tui-icon-middle active">首页</view>
|
|
|
+ <view class="tui-drop-item tui-icon-middle" v-for="(item, index) in navBarsList" :key="index"
|
|
|
+ @tap.stop="NavToDetailPage(item,index)" :data-index="index">
|
|
|
+ {{ item.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </tui-top-dropdown>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var self
|
|
|
+ import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
+ export default {
|
|
|
+ name: 'headerNavbar',
|
|
|
+ components: {
|
|
|
+ btSearch
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ navbarData: {
|
|
|
+ // 由父页面传递的数据
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ navBarsList: {
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ isScroll: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ clickPath: '/pages/search/search',
|
|
|
+ hotSearchText: '搜索商品/项目仪器',
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ StatusBar: this.StatusBar,
|
|
|
+ fontSizeSetting: this.fontSizeSetting,
|
|
|
+ screenWidth: this.screenWidth,
|
|
|
+ capsule: this.capsule,
|
|
|
+ platformClass: this.platformClass,
|
|
|
+ opacityNav: 'opacityNav', // 渐变颜色
|
|
|
+ height: 64, //header高度
|
|
|
+ scrollTop: 0,
|
|
|
+ dropScreenH: this.CustomBar + 78, //下拉筛选框距顶部距离
|
|
|
+ dropScreenShow: false,
|
|
|
+ animationData: {}
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (getCurrentPages().length === 1) {
|
|
|
+ // 当只有一个页面时
|
|
|
+ this.navbarData.haveBack = false
|
|
|
+ } else {
|
|
|
+ this.navbarData.haveBack = true
|
|
|
+ }
|
|
|
+ let obj = {}
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ obj = wx.getMenuButtonBoundingClientRect()
|
|
|
+ // #endif
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
|
|
|
+ //略小，避免误差带来的影响
|
|
|
+ this.dropScreenH = (this.height * 750) / res.windowWidth + 148
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('dropScreenH', this.dropScreenH)
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ onPageScroll(e) {
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ BackPage: function() {
|
|
|
+ this.$emit('navigateBack')
|
|
|
+ },
|
|
|
+ _goSearchPath: function() {
|
|
|
+ this.$emit('goSearchPath')
|
|
|
+ },
|
|
|
+ _goHome: function() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/home/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ NavToDetailPage(item, index) { //跳转
|
|
|
+ if (index === 3) {
|
|
|
+ let linkPath = 'https://static.caimei365.com/app/caimei-activity-h5/html/2023/activity_02.html'
|
|
|
+ this.$api.navigateTo(`/pages/h5/activity/activity?link=${linkPath}&linkId=382`)
|
|
|
+ } else {
|
|
|
+ /**
|
|
|
+ * 页面跳转
|
|
|
+ **/
|
|
|
+ this.$api.FlooryNavigateTo(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showDropScreenShow() {
|
|
|
+ this.dropScreenShow = !this.dropScreenShow
|
|
|
+ if (this.dropScreenShow) {
|
|
|
+ // 禁止页面滚动
|
|
|
+ uni.setScrollEnabled(false)
|
|
|
+ } else {
|
|
|
+ // 禁止页面滚动
|
|
|
+ uni.setScrollEnabled(true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ btnCloseDrop() {
|
|
|
+ this.dropScreenShow = false
|
|
|
+ },
|
|
|
+ handleContact(e) {
|
|
|
+ console.log(e.detail.path)
|
|
|
+ console.log(e.detail.query)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .navbar-wrap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ffffff url(https://static.caimei365.com/app/img/bg/home_cumres_bg@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .opacityNav {}
|
|
|
+
|
|
|
+ .navbar-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-text.center {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-text.left {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-icon {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-icon .iconfont {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 44rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-icon .icon-iconfonticonfontsousuo1 {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-icon view {
|
|
|
+ height: 18px;
|
|
|
+ border-left: 0.5px solid rgba(0, 0, 0, 0.3);
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-loading {
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ padding: 0 24rpx 0rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .gosearch-btn {
|
|
|
+ width: 632rpx;
|
|
|
+ height: 100%;
|
|
|
+ padding: 5rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ color: #8a8a8a;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 80rpx;
|
|
|
+ border: 1px solid #ff5b00;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .search-icon {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 9rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+
|
|
|
+ .icon-iconfonticonfontsousuo1 {
|
|
|
+ margin: 0 6rpx;
|
|
|
+ font-size: $font-size-40;
|
|
|
+ color: #8a8a8a;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #ffffff;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gosearch-kf {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ float: left;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .contact-btn {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-48;
|
|
|
+ color: #ff5b00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-banner-nav {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15rpx 76rpx 15rpx 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .swiper-nav-icon {
|
|
|
+ width: 76rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view_H {
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tui-goods__item {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #ff5b00;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 20rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ background: #ff5b00;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-scroll-box {
|
|
|
+ height: 280rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-seizeaseat-24 {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .tui-drop-item {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 56rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 12rpx 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #f5f5f5;
|
|
|
+ color: #333333;
|
|
|
+ border-radius: 28rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #ffffff;
|
|
|
+ border-color: #ff5b00;
|
|
|
+ color: #ff5b00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
