1018 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			1018 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
|   <view class="content">
 | |
|     <view class="content_a">
 | |
|       <!-- 商品专区入口 先别删  -->
 | |
|       <!-- <view @tap="goSpecialArea">会员专区</view> -->
 | |
|       <view class="index-top"> </view>
 | |
| 
 | |
|       <view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
 | |
|         <view class="uni-margin-wrap">
 | |
|           <swiper
 | |
|             class="swiper"
 | |
|             circular
 | |
|             :indicator-dots="indicatorDots"
 | |
|             :autoplay="autoplay"
 | |
|             :interval="interval"
 | |
|             :duration="duration"
 | |
|           >
 | |
|             <swiper-item
 | |
|               v-for="(item, index) in goodsList.advertBannerList"
 | |
|               :key="index"
 | |
|               @click="bannerTap(item.link)"
 | |
|             >
 | |
|               <view class="swiper-item uni-bg-red">
 | |
|                 <image :src="item.picture"></image>
 | |
|               </view>
 | |
|             </swiper-item>
 | |
|           </swiper>
 | |
|         </view>
 | |
|       </view>
 | |
| 
 | |
|       <view class="goods-sort">
 | |
|         <view v-if="!newShareMember" class="goods-flexs">
 | |
|           <view v-for="(item, index) in recommendSpecialAreaList" :key="index">
 | |
|             <view
 | |
|               class="goods-view"
 | |
|               @click="navTap(item)"
 | |
|               v-if="
 | |
|                 item.waresList &&
 | |
|                 item.waresList.length > 0 &&
 | |
|                 (index < 8 || moreFlag == true)
 | |
|               "
 | |
|             >
 | |
|               <area-product-list
 | |
|                 :list="item.waresList"
 | |
|                 :title="item.specialAreaName"
 | |
|                 size="small"
 | |
|                 :showSales="item.specialArea"
 | |
|               ></area-product-list>
 | |
|             </view>
 | |
|           </view>
 | |
|         </view>
 | |
|         <GoodsList v-else />
 | |
|       </view>
 | |
|       <cl-tabbar :current="0"></cl-tabbar>
 | |
|       <div>
 | |
|         <!-- 公告弹窗 -->
 | |
|         <notice-popup
 | |
|           @close="noticePopupHandleClose"
 | |
|           :userInfo="userInfo"
 | |
|           ref="child"
 | |
|           :publishLocationIndex="10"
 | |
|         ></notice-popup>
 | |
| 
 | |
|         <!-- 直推排行弹窗 -->
 | |
|         <RankingPopup
 | |
|           ref="rankingPopup"
 | |
|           @onRankingComplete="handleRankingComplete"
 | |
|         />
 | |
| 
 | |
|         <u-modal
 | |
|           :show="promptFlag"
 | |
|           title="提示"
 | |
|           :closeOnClickOverlay="true"
 | |
|           showCancelButton
 | |
|           :confirmText="confirmText"
 | |
|           confirmColor="#DE3932"
 | |
|           @close="promptFlag = false"
 | |
|           @cancel="promptFlag = false"
 | |
|           @confirm="toDel"
 | |
|           :content="promptMsg"
 | |
|         ></u-modal>
 | |
|       </div>
 | |
|     </view>
 | |
|     <RegionSelect
 | |
|       :autoTrigger="false"
 | |
|       ref="regionSelect"
 | |
|       @success="regionSelectSuccess"
 | |
|     />
 | |
|   </view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| // import titleLine from '@/components/titleLine.vue'
 | |
| import * as api from '@/config/login.js'
 | |
| import * as apis from '@/config/index.js'
 | |
| import * as ban from '@/config/balance.js'
 | |
| import { getAreaGoods } from '@/config/special-area'
 | |
| import clTabbar from '@/components/cl-tabbar.vue'
 | |
| import noticePopup from '@/components/noticePopup.vue'
 | |
| import areaProductList from '@/components/area-product-list/index.vue'
 | |
| import { formatCurrency } from '@/util/index.js'
 | |
| import { mapGetters } from 'vuex'
 | |
| import RegionSelect from '@/components/region-select/index.vue'
 | |
| import GoodsList from '@/components/goods-list.vue'
 | |
| import RankingPopup from '@/components/RankingPopup.vue'
 | |
| export default {
 | |
|   components: {
 | |
|     noticePopup,
 | |
|     'cl-tabbar': clTabbar,
 | |
|     areaProductList,
 | |
|     RegionSelect,
 | |
|     GoodsList,
 | |
|     RankingPopup,
 | |
|   },
 | |
|   filters: {
 | |
|     seles(value) {
 | |
|       if (value > 999) {
 | |
|         return 999 + '+'
 | |
|       } else {
 | |
|         return value
 | |
|       }
 | |
|     },
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       rankingComplete: false,
 | |
|       newShareMember: false,
 | |
|       promptFlag: false,
 | |
|       promptMsg: '',
 | |
|       confirmText: '',
 | |
|       userInfo: uni.getStorageSync('User'),
 | |
|       moreFlag: false,
 | |
|       index: 0,
 | |
|       indicatorDots: true,
 | |
|       interval: 5000,
 | |
|       autoplay: true,
 | |
|       duration: 500,
 | |
|       goodsList: [],
 | |
|       recommendSpecialAreaList: [],
 | |
|       zoneList: [
 | |
|         {
 | |
|           label: '注册专区',
 | |
|           value: 1,
 | |
|           name: 'regiest',
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 1,
 | |
|               name: 'regiestArea',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '乐学易考',
 | |
|               value: 24,
 | |
|               name: 'ezLearnReg',
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '升级专区',
 | |
|           value: 2,
 | |
|           name: 'upgrade',
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 2,
 | |
|               name: 'upgradeArea',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '海粉专区',
 | |
|               value: 27,
 | |
|               name: 'haiFunUpd',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '乐学易考',
 | |
|               value: 25,
 | |
|               name: 'ezLearnUp',
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '秒杀专区',
 | |
|           value: 14,
 | |
|           name: 'live',
 | |
|           isShow: true,
 | |
|           children: [],
 | |
|         },
 | |
|         {
 | |
|           label: '复购专区',
 | |
|           value: 3,
 | |
|           name: 'repurchase',
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 3,
 | |
|               name: 'self',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '乐学易考',
 | |
|               value: 26,
 | |
|               name: 'ezLearnRep',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '免费注册',
 | |
|               value: 21,
 | |
|               name: 'haiFans',
 | |
|               isShow: true,
 | |
|             },
 | |
| 
 | |
|             {
 | |
|               label: '复购合作',
 | |
|               value: 22,
 | |
|               name: 'cooperation',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '工具流',
 | |
|               value: 12,
 | |
|               name: 'gongju',
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '福利专区',
 | |
|           value: 13,
 | |
|           children: [],
 | |
|           name: 'welfare',
 | |
|         },
 | |
|         {
 | |
|           label: '积分专区',
 | |
|           value: 11,
 | |
|           children: [],
 | |
|           name: 'integral',
 | |
|         },
 | |
|         {
 | |
|           label: '重消专区',
 | |
|           value: 10,
 | |
|           children: [],
 | |
|           name: 'rescission',
 | |
|         },
 | |
|         {
 | |
|           label: '专供专区',
 | |
|           value: 31,
 | |
|           children: [],
 | |
|           name: 'wolesaleArea',
 | |
|         },
 | |
|         {
 | |
|           label: '续约专区',
 | |
|           value: 30,
 | |
|           children: [],
 | |
|           name: 'renewalArea',
 | |
|         },
 | |
|         {
 | |
|           label: '创客空间专区',
 | |
|           value: 28,
 | |
|           children: [],
 | |
|           name: 'makerArea',
 | |
|         },
 | |
|         {
 | |
|           label: '架构管理',
 | |
|           value: 6,
 | |
|           name: 'frame',
 | |
|           children: [
 | |
|             {
 | |
|               label: '安置架构',
 | |
|               value: 6,
 | |
|               name: 'architecture',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '推荐架构',
 | |
|               value: 7,
 | |
|               name: 'recommend',
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '分享专区',
 | |
|           value: 7,
 | |
|           name: 'share',
 | |
|           children: [
 | |
|             {
 | |
|               label: '海粉分享',
 | |
|               value: 7,
 | |
|               name: 'hiFans',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '免费注册',
 | |
|               value: 21,
 | |
|               name: 'haiFans',
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '创客礼包',
 | |
|           value: 18,
 | |
|           isShow: true,
 | |
|           children: [
 | |
|             {
 | |
|               label: '创客礼包',
 | |
|               value: 18,
 | |
|               isShow: true,
 | |
|               children: [],
 | |
|             },
 | |
|             {
 | |
|               label: '赋能礼包',
 | |
|               value: 19,
 | |
|               isShow: true,
 | |
|               children: [],
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|         {
 | |
|           label: '会员专区',
 | |
|           value: 41,
 | |
|           name: 'membersOnly',
 | |
|           children: [
 | |
|             {
 | |
|               label: '自营专区',
 | |
|               value: 41,
 | |
|               name: 'regiestArea',
 | |
|               isShow: true,
 | |
|             },
 | |
|           ],
 | |
|         },
 | |
|       ],
 | |
|     }
 | |
|   },
 | |
|   computed: {
 | |
|     ...mapGetters(['priceSymbol', 'priceSymbolVisible']),
 | |
|   },
 | |
|   onLoad() {
 | |
|     if (
 | |
|       uni.getStorageSync('showInfo') == undefined ||
 | |
|       uni.getStorageSync('showInfo') == 0
 | |
|     ) {
 | |
|     }
 | |
|     this.getGoodsInfo()
 | |
| 
 | |
|     // this.getLanguage();
 | |
|     this.getService()
 | |
|     // this.showRankingPopups()
 | |
|   },
 | |
|   onShow() {
 | |
|     this.$store.dispatch('getCarLength')
 | |
|     this.$store.dispatch('GetInfo').then(() => {
 | |
|       this.user = uni.getStorageSync('User')
 | |
|       this.getAreaGoods()
 | |
|       this.newShareMember = this.user?.loginType !== 0
 | |
|       if (this.user.memberCode !== 'BD68880628') {
 | |
|         console.log('init')
 | |
|         this.$refs.regionSelect.init()
 | |
|       }
 | |
|     })
 | |
|   },
 | |
|   onPullDownRefresh() {
 | |
|     let that = this
 | |
|     setTimeout(() => {
 | |
|       that.getGoodsInfo()
 | |
|       uni.stopPullDownRefresh() //停止刷新
 | |
|     }, 1000)
 | |
|   },
 | |
|   methods: {
 | |
|     formatCurrency,
 | |
|     formatSales(value) {
 | |
|       if (value > 999) {
 | |
|         return '999+'
 | |
|       } else {
 | |
|         return value
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     // 显示排行榜弹窗
 | |
|     async showRankingPopups() {
 | |
|       try {
 | |
|         this.$nextTick(async () => {
 | |
|           await this.$refs.rankingPopup.showRankingPopups()
 | |
|         })
 | |
|       } catch (error) {
 | |
|         console.error('显示排行榜失败:', error)
 | |
|         uni.showToast({
 | |
|           title: '加载排行榜失败',
 | |
|           icon: 'error',
 | |
|         })
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     // 排行榜查看完成回调
 | |
|     handleRankingComplete() {
 | |
|       this.rankingComplete = true
 | |
|       this.$refs.child.getUserTc()
 | |
|     },
 | |
|     regionSelectSuccess() {
 | |
|       if (this.rankingComplete) {
 | |
|         return
 | |
|       }
 | |
|       this.showRankingPopups()
 | |
|     },
 | |
| 
 | |
|     goAreaUrl() {
 | |
|       ban.agreementName().then(res => {
 | |
|         if (res.data == 0) {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               '/pages/specialArea/list?label=续约专区' +
 | |
|               '&specialArea=30' +
 | |
|               '&children=[]',
 | |
|           })
 | |
|         } else {
 | |
|           uni.showModal({
 | |
|             title: '提示',
 | |
|             content: '请先进行实名认证',
 | |
|             success: res => {
 | |
|               if (res.confirm) {
 | |
|                 uni.navigateTo({
 | |
|                   url: '/pages/selfService/realName/realName',
 | |
|                 })
 | |
|               }
 | |
|             },
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     getAreaGoods() {
 | |
|       getAreaGoods().then(res => {
 | |
|         this.recommendSpecialAreaList = res.data?.recommendSpecialAreaList || []
 | |
|         if (this.newShareMember) {
 | |
|           let obj = this.recommendSpecialAreaList.find(
 | |
|             item => item.specialArea === 41
 | |
|           )
 | |
|           if (obj) {
 | |
|             this.$set(obj, 'specialAreaName', '会员专区')
 | |
|           }
 | |
|           this.recommendSpecialAreaList = this.recommendSpecialAreaList.filter(
 | |
|             item => item.specialArea === 41
 | |
|           )
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     toDel() {
 | |
|       this.promptFlag = false
 | |
|       if (this.jumpPage == 1) {
 | |
|         uni.navigateTo({
 | |
|           url: '/pages/selfService/realName/realName',
 | |
|         })
 | |
|       } else {
 | |
|         // uni.navigateTo({
 | |
|         //   url:
 | |
|         //     '/pages/specialArea/list?label=续约专区' +
 | |
|         //     '&specialArea=30' +
 | |
|         //     '&children=[]',
 | |
|         // })
 | |
|       }
 | |
|     },
 | |
|     getService() {
 | |
|       api.agreement_expire().then(res => {
 | |
|         if (res.code == 200) {
 | |
|           this.promptFlag = res.data.promptFlag ? false : true
 | |
|           this.promptMsg = res.data.promptMsg
 | |
|           this.jumpPage = res.data.jumpPage
 | |
|           // confirmText
 | |
|           if (this.jumpPage == 1) {
 | |
|             this.confirmText = '实名认证'
 | |
|           } else {
 | |
|             this.confirmText = '确定'
 | |
|             // this.confirmText = '立即续约'
 | |
|           }
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     noticePopupHandleClose() {
 | |
|       // this.$refs.regionSelect.getRegionSelect()
 | |
|     },
 | |
|     isEmpty(v) {
 | |
|       switch (typeof v) {
 | |
|         case 'undefined':
 | |
|           return true
 | |
|         case 'string':
 | |
|           if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0)
 | |
|             return true
 | |
|           break
 | |
|         case 'boolean':
 | |
|           if (!v) return true
 | |
|           break
 | |
|         case 'number':
 | |
|           if (0 === v || isNaN(v)) return true
 | |
|           break
 | |
|         case 'object':
 | |
|           if (null === v || v.length === 0) return true
 | |
|           for (var i in v) {
 | |
|             return false
 | |
|           }
 | |
|           return true
 | |
|       }
 | |
|       return false
 | |
|     },
 | |
|     more() {
 | |
|       this.moreFlag = true
 | |
|     },
 | |
|     openKf() {
 | |
|       let userInfo = uni.getStorageSync('User')
 | |
|       let src =
 | |
|         'https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=' +
 | |
|         userInfo.memberCode +
 | |
|         '&nickName=' +
 | |
|         userInfo.memberCode
 | |
|       window.open(src, '_blank')
 | |
|     },
 | |
|     bannerTap(urls) {
 | |
|       if (urls) {
 | |
|         window.location.href = urls
 | |
|       }
 | |
|     },
 | |
|     getGoodsInfo() {
 | |
|       apis.userIndex().then(res => {
 | |
|         this.goodsList = res.data
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     goUrl(item) {
 | |
|       ban.agreementName().then(res => {
 | |
|         if (res.data == 0) {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               '/pages/specialArea/details?waresCode=' +
 | |
|               item.waresCode +
 | |
|               '&specialArea=' +
 | |
|               item.specialArea,
 | |
|           })
 | |
|         } else {
 | |
|           uni.showModal({
 | |
|             title: '提示',
 | |
|             content: '请先进行实名认证',
 | |
|             success: res => {
 | |
|               if (res.confirm) {
 | |
|                 uni.navigateTo({
 | |
|                   url: '/pages/selfService/realName/realName',
 | |
|                 })
 | |
|               }
 | |
|             },
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     goDetails(item) {
 | |
|       if (item.preSaleStatus == 3 || item.isSale == 1) {
 | |
|       } else {
 | |
|         if (item.specialArea == 30) {
 | |
|           this.goUrl(item)
 | |
|         } else {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               '/pages/specialArea/details?waresCode=' +
 | |
|               item.waresCode +
 | |
|               '&specialArea=' +
 | |
|               item.specialArea,
 | |
|           })
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     navTap(item) {
 | |
|       let tapx = -1
 | |
| 
 | |
|       this.zoneList.forEach((items, index) => {
 | |
|         if (items.value == item.specialArea) {
 | |
|           tapx = index
 | |
|         }
 | |
|       })
 | |
|       if (tapx == -1) {
 | |
|         this.zoneList.forEach((items, index) => {
 | |
|           items.children.forEach(ctem => {
 | |
|             if (ctem.value == item.specialArea) {
 | |
|               if (item.specialArea == 21) {
 | |
|                 uni.navigateTo({
 | |
|                   url:
 | |
|                     '/pages/specialArea/haIndex?label=' +
 | |
|                     item.specialAreaName +
 | |
|                     '&specialArea=21&diff=1',
 | |
|                 })
 | |
|               } else {
 | |
|                 uni.navigateTo({
 | |
|                   url:
 | |
|                     '/pages/specialArea/list?label=' +
 | |
|                     items.label +
 | |
|                     '&specialArea=' +
 | |
|                     items.value +
 | |
|                     '&childArea=' +
 | |
|                     item.specialArea +
 | |
|                     '&children=' +
 | |
|                     JSON.stringify(items.children) +
 | |
|                     '&diff=1',
 | |
|                 })
 | |
|               }
 | |
|             }
 | |
|           })
 | |
|         })
 | |
|       } else {
 | |
|         if (item.specialArea == 30) {
 | |
|           this.goAreaUrl()
 | |
|         } else {
 | |
|           uni.navigateTo({
 | |
|             url:
 | |
|               '/pages/specialArea/list?label=' +
 | |
|               item.specialAreaName +
 | |
|               '&specialArea=' +
 | |
|               item.specialArea +
 | |
|               '&children=' +
 | |
|               JSON.stringify(this.zoneList[tapx].children) +
 | |
|               '&diff=1',
 | |
|           })
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     goSpecialArea() {
 | |
|       uni.navigateTo({
 | |
|         url: '/pages/index/specialArea/index',
 | |
|       })
 | |
|     },
 | |
|   },
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .content {
 | |
|   // background: url('~@/static/images/fBgd.jpg') no-repeat;
 | |
|   background-size: 100% 100%;
 | |
|   height: 100vh;
 | |
|   .content_a {
 | |
|     overflow: auto;
 | |
|     height: 100%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| // 排行榜入口样式
 | |
| .ranking-entry {
 | |
|   padding: 20rpx 30rpx;
 | |
| 
 | |
|   .ranking-btn {
 | |
|     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 | |
|     border-radius: 25rpx;
 | |
|     padding: 20rpx 30rpx;
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     justify-content: center;
 | |
|     box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
 | |
| 
 | |
|     .ranking-icon {
 | |
|       font-size: 32rpx;
 | |
|       margin-right: 12rpx;
 | |
|     }
 | |
| 
 | |
|     .ranking-text {
 | |
|       color: #fff;
 | |
|       font-size: 28rpx;
 | |
|       font-weight: bold;
 | |
|     }
 | |
| 
 | |
|     &:active {
 | |
|       transform: scale(0.98);
 | |
|       transition: transform 0.1s ease;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| // .content1 {
 | |
| //   background: url('~@/static/images/fBgd.jpg') no-repeat;
 | |
| //   background-size: 100% 100%;
 | |
| //   height: 100vh;
 | |
| //   .content_a {
 | |
| //     overflow: auto;
 | |
| //     height: 100%;
 | |
| //   }
 | |
| // }
 | |
| .more {
 | |
|   color: #333;
 | |
|   background-color: #fff;
 | |
|   height: 80rpx;
 | |
|   line-height: 80rpx;
 | |
|   text-align: center;
 | |
|   border-radius: 30rpx;
 | |
|   width: 690rpx;
 | |
|   margin: 0 auto 30rpx auto;
 | |
| }
 | |
| 
 | |
| :v-deep uni-swiper {
 | |
|   height: 300rpx;
 | |
| }
 | |
| 
 | |
| header {
 | |
|   display: none !important;
 | |
| }
 | |
| 
 | |
| .padding_s {
 | |
|   padding: 0 20rpx;
 | |
| }
 | |
| 
 | |
| .goods-name {
 | |
|   width: 100%;
 | |
|   margin-top: 10rpx;
 | |
|   color: #333;
 | |
|   font-size: 26rpx;
 | |
|   overflow: hidden;
 | |
|   text-overflow: ellipsis;
 | |
|   display: -webkit-box;
 | |
|   -webkit-line-clamp: 2;
 | |
|   -webkit-box-orient: vertical;
 | |
|   word-break: break-word;
 | |
|   line-height: 1.4;
 | |
|   // min-height: calc(26rpx * 1.4 * 2);
 | |
| }
 | |
| 
 | |
| .goods-center-lists {
 | |
|   width: calc(100% - 40rpx); // height: 450rpx;
 | |
|   background: #ffffff;
 | |
|   margin-left: 20rpx;
 | |
|   margin-right: 20rpx;
 | |
|   border-radius: 15rpx;
 | |
|   border-bottom: 20rpx;
 | |
|   margin-bottom: 20rpx;
 | |
|   // padding-bottom: 30rpx;
 | |
|   position: relative;
 | |
|   .goods-flex-s {
 | |
|     display: flex;
 | |
|     padding: 20rpx;
 | |
|     .goods-img {
 | |
|       flex-shrink: 0;
 | |
|       width: 236rpx;
 | |
|       height: 236rpx;
 | |
|       image {
 | |
|         width: 100%;
 | |
|         height: 100%;
 | |
|         border-radius: 10rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
|   .goods-info {
 | |
|     flex: 1;
 | |
|     padding-left: 20rpx;
 | |
|     width: 0;
 | |
|     display: flex;
 | |
|     flex-direction: column;
 | |
|     .goods-sales-wrapper {
 | |
|       display: flex;
 | |
|       flex: 1;
 | |
|       flex-direction: column;
 | |
|       justify-content: flex-end;
 | |
| 
 | |
|       .goods-sales {
 | |
|         font-size: 24rpx;
 | |
|         color: #999;
 | |
|         margin-top: 10rpx;
 | |
|       }
 | |
|       .goods-price {
 | |
|         color: #f82c1a;
 | |
|         margin-top: 10rpx;
 | |
|         font-style: 22rpx;
 | |
|         margin-left: -7rpx;
 | |
|         .price-symbol {
 | |
|           font-size: 22rpx;
 | |
|         }
 | |
|         span {
 | |
|           font-size: 36rpx;
 | |
|           font-weight: bold;
 | |
|         }
 | |
|       }
 | |
|       .goods-price1 {
 | |
|         color: #999;
 | |
|         font-size: 10px;
 | |
|         margin-left: -7rpx;
 | |
|         span {
 | |
|           font-size: 10rpx;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| .goods-sort {
 | |
|   padding-bottom: 130rpx;
 | |
| }
 | |
| 
 | |
| .swiper-s {
 | |
|   height: 495rpx;
 | |
| }
 | |
| 
 | |
| .goods-lists {
 | |
|   width: 340rpx;
 | |
|   margin-bottom: 0rpx;
 | |
|   margin-left: 20rpx;
 | |
| }
 | |
| 
 | |
| .goods_content {
 | |
|   display: flex;
 | |
|   flex-direction: column;
 | |
|   padding: 0;
 | |
|   flex-wrap: wrap;
 | |
| }
 | |
| 
 | |
| .price {
 | |
|   height: 40rpx;
 | |
|   line-height: 40rpx;
 | |
|   background: #fde9e9;
 | |
|   border-radius: 14rpx;
 | |
|   color: #e7141a;
 | |
|   font-size: 22rpx;
 | |
|   text-align: center;
 | |
|   width: max-content;
 | |
|   padding: 0 10rpx;
 | |
|   margin: 0 auto;
 | |
| }
 | |
| 
 | |
| .goods-cen {
 | |
|   display: flex;
 | |
|   margin-top: 20rpx;
 | |
|   gap: 20rpx;
 | |
|   // justify-content: space-between;
 | |
| }
 | |
| 
 | |
| .goods-list {
 | |
|   // display: flex;
 | |
|   width: 33%;
 | |
| }
 | |
| 
 | |
| .goods-content {
 | |
|   width: 100%;
 | |
|   height: 200rpx;
 | |
|   text-align: center;
 | |
| 
 | |
|   .goods {
 | |
|     image {
 | |
|       width: 100%;
 | |
|       height: 200rpx;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| .goods-flexs {
 | |
|   .goods-view {
 | |
|     position: relative;
 | |
|     // width: 302rpx; // height: 180rpx;
 | |
|     // margin-left: 20rpx;
 | |
|     // background: #ffffff;
 | |
|     border-radius: 15rpx;
 | |
|     padding: 0 20rpx;
 | |
|     margin-bottom: 20rpx;
 | |
| 
 | |
|     .goods-top {
 | |
|       z-index: 1;
 | |
|       position: relative;
 | |
|       display: flex;
 | |
| 
 | |
|       .title {
 | |
|         color: #333;
 | |
|         font-size: 32rpx;
 | |
|         font-weight: bold;
 | |
|       }
 | |
| 
 | |
|       .lables {
 | |
|         height: 28rpx;
 | |
|         background: #f82c1a;
 | |
|         border-radius: 10rpx;
 | |
|         line-height: 24rpx;
 | |
|         font-size: 22rpx;
 | |
|         padding: 5rpx 15rpx;
 | |
|         color: #fff;
 | |
|         max-width: 100rpx;
 | |
|         margin: 5rpx 0 0 10rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .lefts {
 | |
|     margin-left: 15rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| :v-deep .swiper-s .swiper-items uni-image {
 | |
|   height: 495rpx;
 | |
| }
 | |
| 
 | |
| .swiper-items {
 | |
|   // height: 495rpx;
 | |
|   // width: 340rpx;
 | |
|   border-radius: 12rpx;
 | |
| 
 | |
|   image {
 | |
|     border-radius: 12rpx;
 | |
|     height: 450rpx;
 | |
|     width: 340rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .swiper-item {
 | |
|   height: 300rpx;
 | |
|   text-align: center;
 | |
|   padding: 0 20rpx;
 | |
|   width: 100%;
 | |
|   box-sizing: border-box;
 | |
|   image {
 | |
|     border-radius: 24rpx;
 | |
|     height: 300rpx;
 | |
|     width: 100%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .banner {
 | |
|   padding: 30rpx 0 0 0;
 | |
|   text-align: center;
 | |
|   width: 100%;
 | |
|   margin-bottom: 20rpx;
 | |
| }
 | |
| 
 | |
| .changeLanguages {
 | |
|   position: absolute;
 | |
|   right: 0rpx;
 | |
|   top: 45rpx;
 | |
| }
 | |
| 
 | |
| .select-text {
 | |
|   display: flex;
 | |
|   margin-right: 20px;
 | |
| }
 | |
| 
 | |
| .selIcon {
 | |
|   width: 40rpx;
 | |
|   height: 40rpx;
 | |
| }
 | |
| 
 | |
| .paswwrod_btn {
 | |
|   color: #666666;
 | |
|   font-size: 26rpx;
 | |
|   margin: 40rpx auto;
 | |
|   text-align: center;
 | |
| }
 | |
| 
 | |
| page {
 | |
|   background-color: #f2f2f2;
 | |
| }
 | |
| 
 | |
| .index-left {
 | |
|   font-weight: bold;
 | |
| 
 | |
|   .english {
 | |
|     font-size: 24rpx;
 | |
|     color: #333;
 | |
|   }
 | |
| 
 | |
|   .text {
 | |
|     font-size: 30rpx;
 | |
|     color: #333;
 | |
|     margin-top: 2rpx;
 | |
|     letter-spacing: 16rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .index-top {
 | |
|   // background: url('~@/static/images/tBgd.jpg') no-repeat;
 | |
|   background-size: 100% 100%;
 | |
|   // padding: 30rpx 20rpx; // height: 100rpx;
 | |
|   background-color: #fff;
 | |
|   display: flex;
 | |
|   justify-content: space-between;
 | |
|   position: fixed;
 | |
|   z-index: 10;
 | |
|   width: 100%;
 | |
|   height: 20rpx;
 | |
|   .index_t {
 | |
|     padding: 30rpx 20rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .index-right {
 | |
|   display: flex;
 | |
| }
 | |
| 
 | |
| .kf_A {
 | |
|   position: fixed;
 | |
|   background: rgba(256, 256, 256, 0.8);
 | |
|   width: 62px;
 | |
|   // height: 60px;
 | |
|   z-index: 10;
 | |
|   right: 40rpx;
 | |
|   top: 11%;
 | |
|   border-radius: 10px;
 | |
|   text-align: center;
 | |
|   padding: 20rpx 0;
 | |
| }
 | |
| 
 | |
| .kf {
 | |
|   image {
 | |
|     width: 48rpx;
 | |
|     height: 48rpx;
 | |
|     margin-bottom: 10rpx;
 | |
|   }
 | |
| 
 | |
|   font-size: 10px;
 | |
|   color: #333333;
 | |
| }
 | |
| .fly {
 | |
|   position: absolute;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
|   top: 0;
 | |
|   background: #eee;
 | |
|   opacity: 0.5;
 | |
|   z-index: 1;
 | |
| }
 | |
| </style>
 |