sf

jiangping

2025-04-30 dcdb0231034810232f2542f3865666ebf72daf11

 h5/pages/index_2/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1913 @@
<template>
   <view class="box">
      <view class="box_bg" v-if="configuration && bgImg && configuration.bgImg.isShow !== 0" :style="{backgroundImage: 'url(' + bgImg + ')'}"></view>
      <view class="box_bg" v-else-if="configuration" :style="{background: configuration.main.bgColor ? percentage(configuration.main.bgColor, configuration.main.alpha) : ''}"></view>
      <view class="box_bg" v-else :style="{backgroundImage: 'url(' + require('@/static/mb.png') + ')'}"></view>
		
      <view class="box_content" :style="{maxWidth: configuration ? configuration.rangeSize + 'px' : '750px', minWidth: configuration ? configuration.rangeSize + 'px' : '750px'}">
         <!-- å¹¿å‘Šå›¾ -->
         <view class="advertisement">
            <image v-if="configuration" :src="topImg" mode="widthFix"></image>
            <image v-else :src="require('@/static/banner.png')" mode="widthFix"></image>
         </view>
			
         <view class="box_content_left" v-if="status > 0" @click="fanhuiPage">
            <image src="@/static/ic_left@2x.png" mode="widthFix"></image>
         </view>
         <view class="box_content_right" @click="xiaPage" v-if="status > 0 && status !== 2">
            <image src="@/static/ic_right@2x.png" mode="widthFix"></image>
         </view>
			
         <!-- ä¸€é”®æ¸…空按钮 -->
         <view class="box_content_close" v-if="status === 0" @click="empty">
            ä¸€é”®æ¸…空
         </view>
			
         <view class="box_user">
            <text>{{User.username}}</text>
            <image src="@/static/ic_logout@2x.png" mode="widthFix" @click="loginOut"></image>
         </view>
			
         <!-- é¦–页 -->
         <template v-if="status === 0">
            <view class="commodityFrom" v-if="shopList && shopList.length > 0">
               <view class="commodityFrom_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">类别</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">品牌</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">型号</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">指导价</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">入手价</view>
               </view>
               <view class="commodityFrom_body" :style="{background: !configuration ? 'rgba(0,0,0,0)' : percentage(configuration.list.bgColor, configuration.list.bgAlpha)}">
                  <view class="commodityFrom_body_content">
                     <view class="commodityFrom_body_content_item" v-for="(item, index) in shopList" :key="index">
                        <view class="commodityFrom_body_content_item_num">
                           <view class="commodityFrom_body_content_item_num_img">
                              <image :src="item.categoryImgurl" mode="widthFix"></image>
                           </view>
                           <text>{{item.categoryName}}</text>
                        <!--    {{stringOperations(item.categoryName, 3)}} -->
                        </view>
                         <!-- @click="open(index, 1)" -->   
                        <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterP(index, item.categoryId)" @mouseleave.stop="mouseleaveP(index)">
                           {{stringOperations(item.brandName, 4)}}
                           <view class="drop-down" :style="{ opacity: item.ppShow ? opacity : '0', zIndex: item.ppShow ? zIndex : '-1', background: !configuration ? 'rgba(108, 130, 170, 1)' : percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) }">
                              <view class="drop-down-search">
                                 <input type="text" placeholder="请输入" v-model="item.brandVal" @input="searchBrand($event, item)" />
                              </view>
                              <!-- brandData -->
                              <view class="drop-down-item" v-for="(child, i) in item.brandVal ? item.brandSearchList : item.brandList" :key="i" @click.stop="clickBrand(item, child, index)"  @mouseenter="aaa(i)" @mouseleave="bbb">
										 
                                 <text :style="{color: fontColorIndex === i ? fontColor : ''}">{{child.name}}</text>
                              </view>
                           </view>
                        </view>
                         <!-- @click="open(index, 2)" -->
                        <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterX(index)" @mouseleave.stop="mouseleaveX(index)">
								 
                           {{stringOperations(item.name, 18)}}
                           <view class="drop-top" v-show="item.name">
                              {{item.name}}
                           </view>
                           <view class="drop-down" :style="{ opacity: item.xhShow ? opacity : '0', zIndex: item.xhShow ? zIndex : '-1', background: !configuration ? 'rgba(108, 130, 170, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : 'rgba(108, 130, 170, 1)' }">
                              <view class="drop-down-search">
                                 <input type="text" placeholder="请输入" v-model="item.modelVal" @input="searchModel($event, item)" />
                              </view>
                              <view class="drop-down-item" v-for="(data, s) in item.modelVal ? item.modelSearchList : item.xhData" :key="s" @click.stop="clickXH(data, index)"  @mouseenter="aaa(s)" @mouseleave="bbb">
                                 <text :style="{color: fontColorIndex === s ? fontColor : ''}">{{data.name}}</text>
                              </view>
                           </view>
                        </view>
                        <view class="commodityFrom_body_content_item_num">
                           {{ item.zdPrice }}
                        </view>
                        <view class="commodityFrom_body_content_item_num">
                           <input
                              type="number"
                              v-model="item.price"
                              @onkeyup="checkInput(this)"
                              @input="changePrice(item.price, index)" />
                        </view>
                        <view class="commodityFrom_body_content_item_tips">
                           <image src="@/static/ic_img@2x.png" mode="widthFix" @click="openImg(index)"></image>
                           <image src="@/static/ic_copy@2x.png" mode="widthFix" @click="copyItem(item)"></image>
                           <image src="@/static/ic_delete@2x.png" mode="widthFix" @click="deleItem(index)"></image>
                           <image src="@/static/ic_pk2@2x.png" mode="widthFix" @click="clickItem(-1, item.categoryId, item.categoryName,2,item)"></image>
                        </view>
                     </view>
                  </view>
                  <view class="commodityFrom_body_total">
                     <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 255, 255, 1)' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff', textAlign: 'left'}">合计：</view>
                     <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 220, 108, 1)' : configuration.pull.selType === 1 ? percentage(configuration.pull.selColor, configuration.pull.selAlpha) : '#FFDC6C'}">
                        {{simplifyNum(zdj)}}
                     </view>
                     <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 220, 108, 1)' : configuration.pull.selType === 1 ? percentage(configuration.pull.selColor, configuration.pull.selAlpha) : '#FFDC6C'}">
                        {{simplifyNum(totalPrices)}}
                     </view>
                  </view>
               </view>
            </view>
            <view class="productCategory">
            <view class="productCategory_list" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : configuration.category.bgType === 1 ? percentage(configuration.category.bgColor, configuration.category.bgAlpha) : '#899FC5'}">
               <view
               class="productCategory_list_item"
               v-for="(item, index) in category"
               :key="index"
               @click="clickItem(index, item.id, item.name,1)">
                  <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                  <text :style="{'font-size': !configuration&&!configuration.listname ?'16px':((configuration.listname.fontSize||16)   +'px'),color: !configuration &&!configuration.listname? '#ffffff' : configuration.listname.selType === 1 ? percentage(configuration.listname.selColor, configuration.listname.selAlpha) : '#ffffff'}">{{item.name}}</text>
               </view>
               <view class="productCategory_list_zw"></view>
               <view class="productCategory_list_zw"></view>
               <view class="productCategory_list_zw"></view>
               <view class="productCategory_list_zw"></view>
               <view class="productCategory_list_zw"></view>
            </view>
         </view>
         </template>
			
         <!-- å•†å“åˆ—表 -->
         <template v-if="status === 1 || status === 2">
            <view class="productPage">
               <view class="productPage_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}">
                  <view class="productPage_head_item" v-if="attrFirstName">
                     <text>{{attributeOne.name ? attributeOne.name : attrFirstName}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="attrFirstList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in attrFirstList" :key="index" @click="clickShopPageCheck(item, 1)" @mouseenter="aaa(index)" @mouseleave="bbb">	 
                           <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                        </view>
                     </view>
                  </view>
                  <view class="productPage_head_item" v-if="attrSecondName">
                     <text>{{attributeTwo.name ? attributeTwo.name : attrSecondName}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="attrSecondList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in attrSecondList" :key="index" @click="clickShopPageCheck(item, 2)" @mouseenter="aaa(index)" @mouseleave="bbb">
                           <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                        </view>
                     </view>
                  </view>
                  <view class="productPage_head_item">
                     <text v-if="budget.type == 1 || budget.type == 2">{{budget.name}}</text>
                     <text v-else>{{budget.max && budget.min ? budget.min + '~' + budget.max : '预算'}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="budgetList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in budgetList" :key="index" @click="clickShopPageCheck(item, 3)" @mouseenter="aaa(index)" @mouseleave="bbb">
                           <template v-if="!item.name">
										
                              <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.minamount}}~{{item.maxamount}}</text>
                           </template>
                           <template v-else>
                              <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                           </template>
                        </view>
                     </view>
                  </view>
                  <view class="productPage_head_item">
                     <text>{{shopPageBrand.name ? shopPageBrand.name : '品牌'}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="brandData.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in brandData1" :key="index" @click="clickShopPageCheck(item, 4)" @mouseenter="aaa(index)" @mouseleave="bbb">
                           <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                        </view>
                     </view>
                  </view>
               </view>
               <view class="productPage_pk" v-if="isPK || status === 2">
                  <view class="productPage_pk_shop">
                     <view class="productPage_pk_shop_sp" @click="openSearch('left')" v-if="JSON.stringify(leftShop) == '{}'" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
                        <!-- <image src="@/static/ic_add@2x.png" mode="widthFix"></image> -->
                        <span>+</span>
                     </view>
                     <view class="productPage_pk_shop_sp1" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}" @click="clickPKshop(leftShop)" v-else>
                        <view class="productPage_pk_shop_sp1_img">
                           <image :src="leftShop.imgurl ? leftShop.prefixUrl + leftShop.imgurl : ''" mode="widthFix"></image>
                        </view>
                        <!-- <text>{{stringOperations(leftShop.name, 20)}}</text> -->
                        <text>{{leftShop.name}}</text>
                     </view>
                     <view class="productPage_pk_shop_t">
                        <image :src="!configuration ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.type === 0 ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.imgurl" mode="widthFix"></image>
                     </view>
                  </view>
                  <view class="productPage_pk_z" @click="jumpPK">
                     <image src="@/static/ic_pk@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="productPage_pk_shop">
                     <view class="productPage_pk_shop_sp" @click="openSearch('right')" v-if="JSON.stringify(rightShop) == '{}'" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
                        <!-- <image src="@/static/ic_add@2x.png" mode="widthFix"></image> -->
                        <span>+</span>
                     </view>
                     <view class="productPage_pk_shop_sp1" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}" @click="clickPKshop(rightShop)" v-else>
                        <view class="productPage_pk_shop_sp1_img">
                           <image :src="rightShop.imgurl ? rightShop.prefixUrl + rightShop.imgurl : ''" mode="widthFix"></image>
                        </view>
                        <text>{{rightShop.name}}</text>
                        <!-- <text>{{stringOperations(rightShop.name, 6)}}</text> -->
                     </view>
                     <view class="productPage_pk_shop_t">
                        <image :src="!configuration ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.type === 0 ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.imgurl" mode="widthFix"></image>
                     </view>
                  </view>
               </view>
               <view class="productPage_shop" v-if="status === 1 && !pkcontent">
                  <view class="productPage_shop_item" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : percentage(configuration.list.bgColor, configuration.list.bgAlpha)}" v-for="(item, index) in isSOU ? shopPageDataSou : shopPageData" :key="index" @click="clickshoppageItem(item)">
                     <view class="productPage_shop_item_img">
                        <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                     </view>
                     <text :style="{'font-size': !configuration &&!configuration.listproname?'16px':((configuration.listproname.fontSize||16)   +'px'),color: !configuration&&!configuration.listproname ? '#ffffff' : configuration.listproname.selType === 1 ? percentage(configuration.listproname.selColor, configuration.listproname.selAlpha) : '#ffffff',color: !configuration ? '#ffffff' : configuration.listproname.selType === 1 ? percentage(configuration.listproname.selColor, configuration.listproname.selAlpha) : '#ffffff'}">{{item.name}}</text>
                  </view>
                  <view class="productPage_shop_zw"></view>
                  <view class="productPage_shop_zw"></view>
                  <view class="productPage_shop_zw"></view>
               </view>
                <!-- v-if="status === 2" -->
               <view class="productPage_parameter" v-if="isPK && pkcontent">
                  <view class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
                     <view class="productPage_parameter_item_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha), color: !configuration ? 'rgba(255, 255, 255, 1)' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : 'rgba(255, 255, 255, 1)'}">
                        <text>{{item.name}}</text>
                     </view>
                     <view class="productPage_parameter_item_content" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : configuration.list.bgType === 1 ? percentage(configuration.list.bgColor, configuration.list.bgAlpha) : 'rgba(137, 159, 197, 1)'}">
                        <view class="productPage_parameter_item_content_price">
                           <view class="zdj">
                              <text>指导价：</text>
                              <text>Â¥{{item.zdPrice}}</text>
                           </view>
                           <view class="rsj">
                              <text>建议入手价：</text>
                              <text>Â¥{{item.price}}</text>
                           </view>
                        </view>
                        <view class="productPage_parameter_item_content_nr">
                           <view class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index">
                              <view class="label">{{child.name}}：</view>
                              <view class="value">{{child.val}}</view>
                           </view>
                           <view v-if="item.param2.length>0" class="paramline"></view>
                           <view class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index">
                              <view class="label">{{child.name}}：</view>
                              <view class="value">{{child.val}}</view>
                           </view>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
         </template>
			
         <!-- æŸ¥çœ‹å¤§å›¾ -->
         <bigImg
            ref="bigImg"
            :imgList="imgList"/>
				
         <!-- æœç´¢ -->
         <search
            ref="search"
            :search="configuration ? configuration.search : null"
            :conMark="configuration ? configuration : null"
            :fontColor="fontColor"
            :categoryList="category"
            :shopList="shopData"
            :categoryid="categoryId"
            :status="status"
            :categoryName="categoryName"
            @result="result" />
         <!-- æœç´¢å•†å“åˆ—表标题 -->
         <searchShopList
            ref="searchShopListRef"
            :search="configuration ? configuration.search : null"
            @getTitle="getVal"
          />
      </view>
   </view>
</template>

<script>
   import bigImg from '@/components/bigImg.vue'
   import search from '@/components/search.vue'
   import searchShopList from '@/components/searchShopList.vue'
   import { categoryList, goodsList, brandList, h5Image, logout, getByLoginNew, listForH5 } from '@/apis/index.js'
   import { mapState } from 'vuex'
   export default {
      data() {
         return {
            status: 0,   // 0首页 1商品列表 2pk页
            backPageNum:1,//返回页数
            img: '',
				
            opacity: 1,
            zIndex: 2,
				
            index: '',
				
            val: '',
				
            isPK: false,
            pkcontent: false,
				
            imgList: [],  // æŸ¥çœ‹å›¾ç‰‡æ•°æ®é›†åˆ
            i: 0,
				
            categoryId: '',   // ç±»åˆ«id
            categoryName: '',   // ç±»åˆ«åç§°
            category: [],   // ç±»åˆ«æ•°æ®
            shopList: [],   // é¦–页已选商品
            shopData: [],   // å•†å“æ•°æ®
            brandData: [],   // å“ç‰Œæ•°æ®
            brandData1: [],      // å•†å“åˆ—表页查询搜索
				
            attrFirstName: '',
            attrSecondName: '',
            attrFirstList: [],   // å±žæ€§1
            attrSecondList: [],   // å±žæ€§2
            budgetList: [],   // é¢„ç®—
            isSOU: false,
            shopPageData: [],   // å•†å“åˆ—表页面数据
            shopPageDataSou: [],   // å•†å“åˆ—表页面搜索数据
            attributeOne: {      // å•†å“é¡µé¢å±žæ€§ä¸€
               id: '',
               name: ''
            },
            attributeTwo: {      // å•†å“é¡µé¢å±žæ€§äºŒ
               id: '',
               name: ''
            },
            budget: {      // å•†å“é¡µé¢é¢„ç®—
               id: '',
               max: '',
               min: '',
               type: ''
            },
            shopPageBrand: {      // å•†å“é¡µé¢å“ç‰Œ
               id: '',
               name: ''
            },
				
            leftShop: {},   // pk左侧商品
            rightShop: {},   // pk右侧商品
				
            totalPrices: 0,
            zdj: 0,
				
            select: [],   // å·²é€‰
            configuration: null,
            bgImg: '',
            topImg: '',
            pkImg: '',
				
            title: '',
            fontColor: 'rgba(255, 220, 108, 1)',
            fontColorIndex: ''
         }
      },
      components: { bigImg, search, searchShopList },
      onLoad() {
         getByLoginNew({})
            .then(res => {
               if (!res.data) {
                  return
               }
               this.configuration = JSON.parse(res.data.newParam)
               this.fontColor = this.configuration.pull.selType === 1 ? this.percentage(this.configuration.pull.selColor, this.configuration.pull.selAlpha) : 'rgba(255, 220, 108, 1)'
               if (this.configuration.bgImg.type === 0) {
                  this.bgImg = require('@/static/mb.png')
               } else {
                  this.bgImg = this.configuration.bgImg.imgurl
               }
               if (this.configuration.topImg.type === 0) {
                  this.topImg = require('@/static/banner.png')
               } else {
                  this.topImg = this.configuration.topImg.imgurl
               }
               if (this.configuration.pkImg.type === 0) {
                  this.pkImg = require('@/static/ic_pktai@2x.png')
               } else {
                  this.pkImg = this.configuration.pkImg.imgurl
               }
            })
         var that = this
         // ç›‘听键盘组合键
         document.onkeydown = function(e) {
            var keyCode = e.keyCode || e.which || e.charCode;
            var ctrlKey = e.ctrlKey || e.metaKey;
            if(ctrlKey && keyCode == 70) {
               if (that.status === 0) {
                  that.$refs.search.open()
               } else if (that.status === 1) {
                  that.$refs.searchShopListRef.open()
               }
               e.preventDefault();
               return false;
            } else if (keyCode === 37) {
               that.fanhuiPage()
               e.preventDefault();
               return false;
            } else if (keyCode === 39) {
               that.xiaPage()
               e.preventDefault();
               return false;
            }
         }
         this.getCategoryList()
         this.getGoodsList()
         // this.getbrandList()
         this.h5Images()
      },
      onReady() {
         var that = this
			
         let divs = document.getElementsByClassName('box')
			
         let start = 0
			
         divs[0].onmousedown = function(ev){
				
            if (that.status === 1) {
					
               start = ev.pageY
								 
               //event的兼容性
               var ev = ev || event;
								 
               //获取鼠标按下的坐标
               var x1 = ev.clientX;
               var y1 = ev.clientY;
								 
               //获取元素的left，top值
               var l = divs.offsetLeft;
               var t = divs.offsetTop;
								 
               //给可视区域添加鼠标的移动事件
               document.onmousemove = function(ev) {
                   //event的兼容性
                   var ev = ev || event;
								 
                   //获取鼠标移动时的坐标
                   var x2 = ev.clientX;
                   var y2 = ev.clientY;
								 
                   //计算出鼠标的移动距离
                   var x = x2 - x1;
                   var y = y2 - y1;
								 
                   //移动的数值与元素的left，top相加，得出元素的移动的距离
                   var lt = y + t;
                   var ls = x + l;
						
                  let num = start - ev.pageY
                  if (num < -100) {
                     that.isPK = true
                  } else if (num > 100) {
                     that.leftShop = {}
                     that.rightShop = {}
                     that.isPK = false
                  }
               }
               //清除
               document.onmouseup = function(ev){
                   document.onmousemove = null;
               }
					
            }
         }
      },
      computed: {
         // æŒ‡å¯¼ä»·æ€»è®¡
         zdTotalPrice() {
            let num = 0
            this.shopList.forEach(item => {
               num = num + Number(item.zdPrice)
            })
            return num || 0
         },
         // å…¥æ‰‹ä»·
         totalPrice() {
            let num = 0
            this.shopList.forEach(item => {
               num = num + Number(item.price)
            })
            return num || 0
         },
         ...mapState(['Cookies', 'Config', 'User'])
      },
      watch: {
         status: {
            handler(news, old) {
               if (news === 0) {
                  this.categoryName = ''
               }
            }
         },
         shopList: {
            deep: true,
            handler(news, old) {
               let rsj = 0
               let zdj = 0
               this.shopList.forEach(item => {
                  rsj = rsj + Number(item.price)
                  zdj = zdj + Number(item.zdPrice)
               })
               this.totalPrices = rsj
               this.zdj = zdj
            }
         }
      },
      methods: {
         jumpPKNew(){
            this.status = 1
         },
         aaa(index) {
            this.fontColorIndex = index
         },
         bbb() {
            this.fontColorIndex = ''
         },
         // é¼ æ ‡ç§»å¦‚品牌
         async mouseenterP(index, categoryId) {
            this.shopList[index].ppShow = true
            if (!this.shopList[index].brandList || this.shopList[index].brandList.length == 0) {
               let res = await brandList({ categoryId })
               if (res.code === 200) {
                  // this.shopList[index].ppData = res.data
                  this.shopList[index].brandList = res.data
               }
            }
				
            this.$forceUpdate()
         },
         mouseleaveP(index) {
            this.shopList[index].ppShow = false
            this.$forceUpdate()
         },
         // é¼ æ ‡ç§»å¦‚型号
         async mouseenterX(index, type = 2) {
            if (this.shopList[index].xhData && this.shopList[index].xhData.length > 0) {
               this.$forceUpdate()
            } else {
               let res = await listForH5({
                  categoryId: this.shopList[index].categoryId,
                  brandId: this.shopList[index].brandId
               })
               if (res.code === 200) {
                  this.shopList[index].xhData = res.data;
               }
            }
            this.shopList[index].xhShow = true
            this.$forceUpdate()
         },
         mouseleaveX(index) {
            this.shopList[index].xhShow = false
            this.$forceUpdate()
         },
         // å·²é€‰å•†å“åˆ—表搜索品牌
         searchBrand(e, item) {
            item.brandSearchList = item.brandList.filter(item => {
               if (item.name.indexOf(e.detail.value) > -1) {
                  return item
               }
            })
            this.$forceUpdate()
         },
         // å·²é€‰å•†å“åˆ—表搜索型号
         searchModel(e, item) {
            item.modelSearchList = item.xhData.filter(item => {
               if (item.name.indexOf(e.detail.value) !== -1) {
                  return item
               }
            })
            this.$forceUpdate()
         },
         // èŽ·å–搜索的标题
         getVal(val) {
            this.title = val
            this.leftShop = {}
            this.rightShop = {}
            this.isSOU = true
            this.shopPageDataSou = []
            this.shopPageData.forEach(item => {
               if (
               (this.attributeOne.id ? item.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
               (this.attributeTwo.id ? item.attrSecodIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
               (this.budget.type == 3 ? (item.price <= Number(this.budget.max)) && (item.price >= Number(this.budget.min)) : true) &&
               (this.budget.type == 1 ? (item.price <= Number(this.budget.max)) : true) &&
               (this.budget.type == 2 ? (item.price >= Number(this.budget.min)) : true) &&
               (this.shopPageBrand.id ? item.brandId === this.shopPageBrand.id : true) && 
               (item.name.indexOf(this.title) !== -1) // æ ‡é¢˜æœç´¢
               ) {
                  this.shopPageDataSou.push(item)
               }
            })
         },
         empty() {
            this.shopList = []
         },
         percentage(bgColor, alpha) {
            let res = +(alpha * 2.55).toFixed(0)
            return bgColor + res.toString(16)
         },
         checkInput(_this) {
           if (_this.value != '' && _this.value.substr(0, 1) == '.') {
            _this.value = 0
           }
           if (_this.value == '') {
            _this.value = 0
           }
           _this.value = _this.value.replace(/^0*(0\.|[1-9])/, '$1') // ç¦æ­¢ç²˜è´´
           _this.value = _this.value.replace(/[^\d.]/g, '0.00') // ç¦æ­¢è¾“入非数字
           _this.value = _this.value.replace(/\.{2,}/g, '.') // åªä¿ç•™ç¬¬ä¸€ä¸ª. æ¸…除多余的
           _this.value = _this.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
           _this.value = _this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // åªèƒ½è¾“入两个小数

           if (_this.value.indexOf('.') < 0 && _this.value != '') {
            // ä»¥ä¸Šå·²ç»è¿‡æ»¤ï¼Œæ­¤å¤„控制的是如果没有小数点，首位不能为类似于 01、02的金额
            if (_this.value.substr(0, 1) == '0' && _this.value.length == 2) {
              _this.value = _this.value.substr(1, _this.value.length)
            }
           }
           if (!_this.value) {
            _this.value = 0
           }
         },
         changePrice(price, index) {
            if (price.indexOf('-') !== -1) {
               this.shopList[index].price = ''
               return
            }
            // if (!/^\d[0,9]$/.test(price)) {
            //    this.shopList[index].price = JSON.parse(JSON.stringify(price.replace(/-/g, '')))
            //    return
            // }
            let rsj = 0
            this.shopList.forEach(item => {
               rsj = rsj + Number(item.price)
            })
            this.totalPrices = rsj
         },
         simplifyNum(number) {
            if (!number && number != 0) return number;
            let test = number.toFixed(0)
            if(test.length >= 7){
               const moneys = number / 10000
               const realVal = parseFloat(moneys).toFixed(0);
               return realVal + "w"
            } else {
               return number
            }
         },
         // é€€å‡º
         loginOut() {
            logout({})
               .then(res => {
                  this.$store.commit('clean')
                  uni.redirectTo({ url: '/pages/login/login' });
               })
         },
         // èŽ·å–海报图
         h5Images() {
            h5Image({})
               .then(res => {
                  this.img = res.data
               })
         },
         xiaPage() {
            if (this.status === 2 || this.status === 0) return
            this.status = this.status + 1
            this.$refs.search.close()
            this.$refs.searchShopListRef.close()
         },
         // è¿”回上一页
         fanhuiPage() {
            if (this.status === 0) return
            this.$refs.search.close()
            this.$refs.searchShopListRef.close()
            this.status = this.status -(this.backPageNum>0?this.backPageNum:1)
            if (this.status === 0) {
               this.leftShop = {}
               this.rightShop = {}
               this.isPK = false,
               this.pkcontent = false
               this.attributeOne = {
                  id: '',
                  name: ''
               },
               this.attributeTwo = {
                  id: '',
                  name: ''
               },
               this.budget = {
                  id: '',
                  max: '',
                  min: ''
               }
               this.shopPageBrand = {
                  id: '',
                  name: ''
               }
            } else if (this.status === 1) {
               this.leftShop = {}
               this.rightShop = {}
               this.isPK = false,
               this.pkcontent = false
            }
         },
         // ç‚¹å‡»åž‹å·
         clickXH(item, index) {
            let obj = JSON.parse(JSON.stringify(this.shopList[index]))
            obj.modelSearchList = []
            obj.modelVal = ''
            obj.name = JSON.parse(JSON.stringify(item.name))
            obj.zdPrice = JSON.parse(JSON.stringify(item.zdPrice))
            obj.price = JSON.parse(JSON.stringify(item.price))
            this.shopList.splice(index, 1, obj)
            obj.xhShow = false
            // this.shopList[index] = JSON.parse(JSON.stringify(obj))
            this.$forceUpdate()
         },
         // ç‚¹å‡»pk商品带回首页
         clickPKshop(item) {
            this.shopList.push(item)
            this.status = 0
            this.isPK = false
            this.pkcontent = false
            this.leftShop = {}
            this.rightShop = {}
         },
         // æŸ¥çœ‹å¤§å›¾
         openImg(i) {
            this.imgList = []
            this.shopList.forEach((item, index) => {
               if (index === i) {
                  item.multifileList.forEach(child => {
                     this.imgList.push(item.prefixUrl + child.fileurl)
                  })
               }
            })
            if (this.imgList.length === 0) return
            this.$viewerApi({
              images: this.imgList,
            })
            // this.$refs.bigImg.open(i)
         },
         // è·³è½¬pk
         jumpPK() {
            if (JSON.stringify(this.leftShop) !== '{}' && JSON.stringify(this.rightShop) !== '{}') {
               this.isPK = true
               this.pkcontent = true
               this.status = 2
            }
         },
         // ç‚¹å‡»åŠ å…¥pk商品
         openSearch(type) {
            this.$refs.search.open(type)
            /* if (type === 'left') {
               this.$refs.search.open('left')
            } else if (type === 'right') {
               this.$refs.search.open('right')
            } */
         },
         // ç‚¹å‡»å•†å“åˆ—表页面查询
         clickShopPageCheck(item, type) {
            this.leftShop = {}
            this.rightShop = {}
            this.isSOU = true
            if (type === 1) {
               this.attributeOne.name = item.name  === '全部' ? '' : item.name
               this.attributeOne.id = item.id
            } else if (type === 2) {
               this.attributeTwo.name = item.name === '全部' ? '' : item.name
               this.attributeTwo.id = item.id
            } else if (type === 3) {
               this.budget.id = item.id
               this.budget.max = item.maxamount
               this.budget.min = item.minamount
               this.budget.type = item.type
               if (item.name) {
                  this.budget.name = item.name
               }
            } else if (type === 4) {
               this.shopPageBrand.id = item.id
               this.shopPageBrand.name = item.name === '全部' ? '' : item.name
            }
            this.isPK = false
            this.pkcontent = false
            this.status = 1
            this.shopPageDataSou = this.shopPageData.filter(item1 => {
               console.log(item1.attrFirstIds, this.attributeOne.id)
               if (
               (this.attributeOne.id ? item1.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
               (this.attributeTwo.id ? item1.attrFirstIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
               (this.budget.type == 3 ? (item1.price <= Number(this.budget.max)) && (item1.price >= Number(this.budget.min)) : true) &&
               (this.budget.type == 1 ? (item1.price <= Number(this.budget.max)) : true) &&
               (this.budget.type == 2 ? (item1.price >= Number(this.budget.min)) : true) &&
               (this.shopPageBrand.id ? item1.brandId === this.shopPageBrand.id : true) && 
               (item1.name.indexOf(this.title) !== -1)
               ) {
                  return item1
               }
            })
         },
         deepCopyArray(arr) {
           var copy = [];
			  
           for (var i = 0; i < arr.length; i++) {
             // åˆ¤æ–­æ¯ä¸ªå…ƒç´ çš„类型
             if (Array.isArray(arr[i])) {
               // å¦‚果是数组，递归调用深拷贝函数
               copy[i] = deepCopyArray(arr[i]);
             } else {
               // å¦‚果是其他类型，直接赋值给新数组
               copy[i] = arr[i];
             }
           }
			  
           return copy;
         },
         // ç‚¹å‡»å•†å“åˆ—表页面商品
         clickshoppageItem(item) {
            this.shopList.push(...this.deepCopyArray([{ ...item, brandVal: '', modelVal: '', modelSearchList: [], brandSearchList: [], brandList: this.brandData }]))
            console.log(this.shopList)
            this.attrFirstList = []
            this.attrSecondList = []
            this.budgetList = []
            this.status = 0
            this.isPK = false
            this.pkcontent = false
         },
         // èŽ·å–搜索结果
         getSelectShop(categoryId, brandId) {
            this.select = []
            this.shopData.forEach(item => {
               if (item.categoryId === categoryId && item.brandId === brandId) {
                  this.select.push(JSON.parse(JSON.stringify(item)))
               }
            })
         },
         // é€‰æ‹©å“ç‰Œ
         clickBrand(item, val, index) {
            this.shopList[index].brandName = JSON.parse(JSON.stringify(val.name))
            this.shopList[index].brandId = JSON.parse(JSON.stringify(val.id))
            this.shopList[index].name = ''
            this.shopList[index].zdPrice = ''
            this.shopList[index].price = ''
            this.shopList[index].ppShow = false
				
            this.shopList[index].xhData = []
				
            this.shopList[index].brandSearchList = []
            this.shopList[index].brandVal = ''
            this.$forceUpdate()
         },
         // å“ç‰Œ
         // getbrandList() {
         //    brandList({})
         //       .then(res => {
         //          this.brandData = JSON.parse(JSON.stringify(res.data))
         //          this.brandData1 = JSON.parse(JSON.stringify(res.data))
         //          this.brandData1.unshift({ name: '全部', id: '' })
         //       })
         // },
         // èŽ·å–选中商品
         result(val) {
            val.ppShow = false
            val.xhShow = false
            if (this.$refs.search.typeName === 'left') {
               this.leftShop = JSON.parse(JSON.stringify(val))
            } else if (this.$refs.search.typeName === 'right') {
               this.rightShop = JSON.parse(JSON.stringify(val))
               let leftParamList = this.leftShop.goodsParamList;
               let rightParamList = this.rightShop.goodsParamList;
               let leftList1 = new Array();
               let leftList2 =  new Array();
               let rightList1 = new Array();
               let rightList2 =  new Array();
               if(leftParamList && leftParamList.length>0){
                  leftParamList.forEach(item => {
                     let flag =0;
                     let rightTemp = null;
                     if(rightParamList && rightParamList.length>0){
                        rightParamList.forEach(item1 => {
                           if (item.name === item1.name ) {
                              flag =1;
                              rightTemp = item1;
                              return;
                           }
                        })	
                     }
                     if(flag === 1){
                        leftList1.push(item);
                        rightList1.push(rightTemp);
                     }else{
                        leftList2.push(item);
                     }
                  })	
               }
               if(rightParamList && rightParamList.length>0){
                  rightParamList.forEach(item=> {
                     let flag1 = 0;
                     rightList1.forEach(item1 => {
                        if (item.name === item1.name ) {
                           flag1 =1; 
                           //return;
                        }
                     })	
                     if(flag1 === 0){
                        rightList2.push(item);
                     }
                  })	
               }
               Reflect.set(this.leftShop, "param1",leftList1);
               Reflect.set(this.leftShop, "param2",leftList2);
               Reflect.set(this.rightShop, "param1",rightList1);
               Reflect.set(this.rightShop, "param2",rightList2);
            } else {
               this.shopList.push(JSON.parse(JSON.stringify(val)))
            }
            console.log(this.leftShop)
            console.log(this.rightShop)
         },
         // èŽ·å–全部商品
         getGoodsList() {
            goodsList({})
               .then(res => {
                  this.shopData = res.data
               })
         },
         // èŽ·å–全部品类
         getCategoryList() {
            categoryList({})
               .then(res => {
                  res.data.forEach(item => {
                     item.active = false
                  })
                  this.category = res.data
               })
         },
         stringOperations(val, num) {
            if (!val) return
            if (val.length <= num) return val
            return val.substring(0, num) + '...'
         },
         copyItem(item) {
            let obj = JSON.parse(JSON.stringify(item))
            obj.brandId = ''
            obj.brand = ''
            obj.brandName = ''
            obj.name = ''
            obj.zdPrice = ''
            obj.price = ''
            this.shopList.push(obj)
         },
         deleItem(i) {
            this.shopList.splice(i, 1)
         },
         // é¦–页已选列表品牌下拉
         open(index, type) {
            this.shopList.forEach((item, i) => {
               item.ppShow = false
               item.xhShow = false
            })
            this.shopList.forEach((item, i) => {
               if (i === index) {
                  if (type === 1) {
                     item.ppShow = true
                  } else {
                     let arr = []
                     this.shopData.forEach(element => {
                        if (
                        (item.categoryId ? element.categoryId === item.categoryId : true) &&
                        (item.brandId ? element.brandId === item.brandId : true)) {
                           arr.push(JSON.parse(JSON.stringify(element)))
                        }
                     })
                     this.shopList[index].xhData = arr;
                     item.xhShow = true
                  }
               }
            })
            this.$forceUpdate()
         },
         // ç‚¹å‡»ç±»åˆ«
         clickItem(index, id, name,status,proItem) {
            this.categoryId = id
            this.categoryName = name
            this.isSOU = false
            this.title = ''
				
            brandList({ categoryId: id })
               .then(res => {
                  this.brandData = JSON.parse(JSON.stringify(res.data))
                  this.brandData1 = JSON.parse(JSON.stringify(res.data))
                  this.brandData1.unshift({ name: '全部', id: '' })
               })
				
            this.category.forEach((item, num) => {
               if (item.id === id) {
                  item.active = true
						
                  this.attrSecondList = []
                  this.attrFirstList = []
                  this.budgetList = []
						
                  this.attrFirstName = item.attrFirst
                  this.attrSecondName = item.attrSecond
                  if (item.cateParamFirstList) {
                     this.attrFirstList = JSON.parse(JSON.stringify(item.cateParamFirstList))
                     this.attrFirstList.unshift({ name: '全部', id: '' })
                  }
                  if (item.cateParamSecondList) {
                     this.attrSecondList = JSON.parse(JSON.stringify(item.cateParamSecondList))
                     this.attrSecondList.unshift({ name: '全部', id: '' })
                  }
                  // this.budgetList = JSON.parse(JSON.stringify(item.budgetList))
                  // console.log(item.budgetList)
                  let arr = []
                  item.budgetList.forEach(item => {
                     // æ²¡æœ‰æœ€å°é‡‘额
                     if (!item.minamount) {
                        arr.push({
                           id: JSON.parse(JSON.stringify(item.id)),
                           type: 1,
                           maxamount: JSON.parse(JSON.stringify(item.maxamount)),
                           minamount: JSON.parse(JSON.stringify(item.minamount)),
                           name: `${JSON.parse(JSON.stringify(item.maxamount))}以内`
                        })
                     // æ²¡æœ‰æœ€å¤§é‡‘额
                     } else if (!item.maxamount) {
                        arr.push({
                           id: JSON.parse(JSON.stringify(item.id)),
                           type: 2,
                           maxamount: JSON.parse(JSON.stringify(item.maxamount)),
                           minamount: JSON.parse(JSON.stringify(item.minamount)),
                           name: `${JSON.parse(JSON.stringify(item.minamount))}以上`
                        })
                     } else {
                        arr.push({
                           id: JSON.parse(JSON.stringify(item.id)),
                           type: 3,
                           maxamount: JSON.parse(JSON.stringify(item.maxamount)),
                           minamount: JSON.parse(JSON.stringify(item.minamount))
                        })
                     }
                  })
                  arr.unshift({ name: '全部', id: '' })
                  this.budgetList = arr
               } else {
                  item.active = false
               }
            })
            // this.shopPageData = []
            this.shopPageData = this.shopData.filter(item => {
               return item.categoryId === id
            })
            if(status ==2){
               this.leftShop=proItem
               this.backPageNum =2
            }else{
               this.backPageNum=1
            }
            console.log(this.shopPageData)
            // this.shopData.forEach(item => {
            //    if (item.categoryId === id) {
            //       this.shopPageData.push(JSON.parse(JSON.stringify(item)))
            //    }
            // })
            this.attributeOne = {
               id: '',
               name: ''
            },
            this.attributeTwo = {
               id: '',
               name: ''
            },
            this.budget = {
               id: '',
               max: '',
               min: ''
            },
            this.shopPageBrand = {
               id: '',
               name: ''
            },
            this.status = status || 1
         },
         mousemove(e) {
            if (e === this.index) return
            this.index = e
         }
      }
   }
</script>

<style lang="scss" scoped>
   .box {
      // width: 100vw;
      // min-height: 100vh;
      // display: flex;
      // justify-content: center;
      // background-image: url('@/static/bg.jpg');
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      width: 100vw;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      .box_bg {
         position: fixed;
         top: 0;
         left: 0;
         z-index: -1;
         width: 100vw;
         height: 100vh;
         background-repeat: no-repeat;
         background-size: 100% 100%;
      }
      .box_content {
         // max-width: 750px;
         // min-width: 750px;
         .box_user {
            z-index: 9;
            position: fixed;
            top: 30px;
            right: 40px;
            display: flex;
            align-items: center;
            text {
               font-size: 16px;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
               color: #FFFFFF;
            }
            image {
               width: 18px;
               height: 18px;
               cursor: pointer;
               margin-left: 10px;
            }
         }
         .box_content_left {
            position: fixed;
            left: 50px;
            top: 50%;
            cursor: pointer;
            transform: translate(-50%, 0);
            width: 80px;
            height: 80px;
            z-index: 9;
            image {
               width: 100%;
               height: 100%;
            }
         }
         .box_content_right {
            position: fixed;
            right: -30px;
            top: 50%;
            cursor: pointer;
            transform: translate(-50%, 0);
            width: 80px;
            height: 80px;
            z-index: 999;
            image {
               width: 100%;
               height: 100%;
            }
         }
         .box_content_close {
            position: fixed;
            right: 0;
            bottom: 30px;
            cursor: pointer;
            transform: translate(-50%, 0);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.40);
            color: #FFFFFF;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         .advertisement {
            width: 100%;
            image {
               width: 100%;
               height: 100%;
            }
         }
         .commodityFrom {
            width: 100%;
            padding: 0 22px;
            box-sizing: border-box;
            margin-top: 16px;
            .commodityFrom_head {
               width: 100%;
               height: 45px;
               padding: 10px 8px;
               box-sizing: border-box;
               background: rgba(0,224,255,0.24) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
               border-radius: 8px 8px 0px 0px;
               display: flex;
               align-items: center;
               .commodityFrom_head_item {
                  // flex: 1;
                  width: 126px;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 16px;
                  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                  font-weight: 500;
                  color: #FFFFFF;
                  margin-right: 6px;
                  &:last-child {
                     margin-right: 0 !important;
                  }
                  &:nth-child(3) {
                     flex: 1 !important;
                  }
                  &:nth-child(4) {
                     width: 100px !important;
                  }
                  &:nth-child(5) {
                     width: 100px !important;
                  }
               }
            }
            .commodityFrom_body {
               width: 100%;
               padding: 10px 8px;
               box-sizing: border-box;
               background: rgba(0,224,255,0.3);
               border-radius: 0 0 8px 8px;
               display: flex;
               flex-direction: column;
               .commodityFrom_body_content {
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  .commodityFrom_body_content_item {
                     width: 100%;
                     height: 45px;
                     display: flex;
                     align-items: center;
                     margin-bottom: 6px;
                     position: relative;
                     transition: .5s;
                     &:hover .commodityFrom_body_content_item_tips {
                        transform: translate(100%, 0%);
                        opacity: 1;
                        z-index: 1;
                     }
                     .commodityFrom_body_content_item_tips {
                        transition: .5s;
                        position: absolute;
                        padding: 0 4px;
                        box-sizing: border-box;
                        right: -16px;
                        top: 0;
                        opacity: 0;
                        transform: translate(0%, 0%);
                        z-index: -1;
                        height: 45px;
                        display: flex;
                        align-items: center;
                        background: #ffffff;
                        border-radius: 8px;
                        image {
                           width: 32px;
                           height: 32px;
                           cursor: pointer;
                        }
                     }
                     .commodityFrom_body_content_item_num {
                        width: 126px;
                        height: 100%;
                        background: #FFFFFF;
                        border-radius: 8px;
                        margin-right: 6px;
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #111111;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        &:hover {
                           .drop-top {
                              z-index: 5;
                              opacity: 1;
                           }
                        }
                        &:nth-child(4) {
                           width: 100px !important;
                        }
                        &:nth-child(5) {
                           width: 100px !important;
                           margin-right: 0 !important;
                        }
                        &:nth-child(2) {
                           cursor: pointer;
                        }
                        &:nth-child(3) {
                           cursor: pointer;
                           flex: 1 !important;
                        }
                        .drop-top {
                           transition: .5s;
                           z-index: -2;
                           opacity: 0;
                           position: absolute;
                           top: 0;
                           left: 0;
                           white-space: nowrap;
                           transform: translate(0, -100%);
                           padding: 5px 15px;
                           box-sizing: border-box;
                           line-height: 50px;
                           background: rgba(0, 0, 0, 0.8);
                           border-radius: 10px;
                           color: #FFFFFF;
                           font-size: 16px;
                           font-weight: 500;
                        }
                        .commodityFrom_body_content_item_num_img {
                           width: 28px;
                           height: 28px;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           margin-right: 4px;
                           image {
                              width: 100%;
                              height: 100%;
                           }
                        }
                        input {
                           font-size: 16px;
                           font-family: PingFangSC-Medium, PingFang SC;
                           font-weight: 500;
                           color: #111111;
                           text-align: center;
                        }
                        .drop-down::-webkit-scrollbar {
                            width: 6px;
                           background: rgba(255,255,255,0.5);
                           border-radius: 4px;
                        }
                        .drop-down::-webkit-scrollbar-thumb {
                            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                           background: rgba(255,255,255,0.8);
                        }
                        .drop-down {
                           position: absolute;
                           bottom: 0;
                           left: 0;
                           width: 100%;
                           min-height: 0;
                           max-height: 260px;
                           overflow-y: scroll;
                           overflow-x: hidden;
                           height: auto;
                           transform: translate(0%, 100%);
                           background: linear-gradient(180deg, #518198 0%, #033B58 100%);
                           box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
                           border-radius: 0px 0px 8px 8px;
                           // display: flex;
                           // flex-direction: column;
                           transition: .5s;
                           .drop-down-search {
                              width: 100%;
                              height: 50px;
                              padding: 10px;
                              box-sizing: border-box;
                              position: sticky;
                              background: rgb(108, 130, 170);
                              top: 0;
                              left: 0;
                              input {
                                 width: 100%;
                                 height: 100%;
                                 border: none;
                                 background-color: #FFFFFF;
                                 font-size: 14px;
                                 color: #000000;
                                 border-radius: 5px;
                              }
                           }
                           .drop-down-item {
                              width: 100%;
                              height: 52px;
                              // padding: 0 10px;
                              // box-sizing: border-box;
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                              cursor: pointer;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              font-size: 16px;
                              font-family: PingFangSC-Regular, PingFang SC;
                              font-weight: 400;
                              color: #FFFFFF;
                              &:hover {
                                 color: #FFF200;
                              }
                              text {
                                 width: 100%;
                                 text-align: center;
                                 font-size: 16px;
                                 font-family: PingFangSC-Regular, PingFang SC;
                                 font-weight: 400;
                                 color: #FFFFFF;
                                 overflow: hidden;
                                 white-space: nowrap;
                                 text-overflow: ellipsis;
                              }
                           }
                        }
                     }
                  }
               }
               .commodityFrom_body_total {
                  width: 100%;
                  height: 45px;
                  display: flex;
                  align-items: center;
                  .commodityFrom_body_total_item {
                     width: 100px;
                     height: 100%;
                     background: rgba(255,255,255,0.4);
                     border-radius: 8px;
                     margin-right: 6px;
                     font-size: 16px;
                     font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                     font-weight: bold;
                     color: #FFF200;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     input {
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                        font-weight: bold;
                        color: #FFF200;
                        text-align: center;
                     }
                     &:first-child {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        padding: 0 15px;
                        box-sizing: border-box;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
                        color: #FFFFFF;
                     }
                     &:last-child {
                        margin-right: 0 !important;
                     }
                  }
               }
            }
         }
         .productCategory {
            width: 100%;
            padding: 0 22px;
            box-sizing: border-box;
            margin-top: 10px;
            .productCategory_list {
               width: 100%;
               padding: 10px 20px 0px 20px;
               box-sizing: border-box;
               background: rgba(0,224,255,0.18);
               border-radius: 8px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               flex-wrap: wrap;
               margin-bottom: 30px;
               .productCategory_list_zw {
                  width: 20%;
                  height: 0;
               }
               .productCategory_active {
                  background: rgba(255,255,255,0.24) !important;
                  border-radius: 8px !important;
               }
               .productCategory_list_item {
                  width: 20%;
                  height: 108px;
                  display: flex;
                  transition: .5s;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  margin-bottom: 12px;
                  cursor: pointer;
                  &:hover {
                     background: rgba(255,255,255,0.24) !important;
                     border-radius: 8px !important;
                  }
                  image {
                     width: 52px;
                     height: 52px;
                     margin-bottom: 4px;
                  }
                  text {
                     font-size: 16px;
                     font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                     font-weight: 400;
                     color: #FFFFFF;
                  }
               }
            }
         }
			
         .productPage {
            width: 100%;
            padding: 0 22px;
            box-sizing: border-box;
            margin-top: 16px;
            .productPage_head {
               width: 100%;
               height: 45px;
               display: flex;
               align-items: center;
               background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
               border-radius: 8px 8px 0px 0px;
               .productPage_head_item {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  position: relative;
                  &:hover {
                     background: rgba(255, 255, 255, 0.16) !important;
                     // border-radius: 8px 8px 0px 0px;
                     // background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
                  }
                  &:hover image {
                     transform: rotate(180deg);
                  }
                  &:hover .productPage_xl {
                     transform: translate(0%, 100%);
                     display: block;
                     animation: move 0.5s 0s;
                  }
                  @keyframes move {
                     0%{
                        opacity: 0;
                     }
                     100%{
                        opacity: 1;
                     }
                  }
                  .productPage_xl::-webkit-scrollbar {
                      width: 6px;
                     background: rgba(255,255,255,0.5);
                     border-radius: 4px;
                  }
                  .productPage_xl::-webkit-scrollbar-thumb {
                      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                     background: rgba(255,255,255,0.8);
                  }
                  .productPage_xl {
                     transition: .3s;
                     position: absolute;
                     bottom: 0;
                     left: 0;
                     min-height: 0;
                     max-height: 260px;
                     overflow-y: scroll;
                     overflow-x: hidden;
                     height: auto;
                     display: none;
                     z-index: 3;
                     transform: translate(0%, 90%);
                     width: 100%;
                     background: linear-gradient(180deg, #518198 0%, #033B58 100%);
                     box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
                     border-radius: 0px 0px 8px 8px;
                     .productPage_xl_iten {
                        width: 100%;
                        padding: 5rpx 0;
                        box-sizing: border-box;
                        // height: 56px;
                        line-height: 25px;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        text-align: center;
                        cursor: pointer;
                        font-size: 16px;
                        font-weight: 400;
                        color: #FFFFFF;
                        &:hover {
                           color: #FFF200;
                        }
                     }
                  }
                  text {
                     font-size: 16px;
                     font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                     font-weight: 400;
                     color: #FFFFFF;
                  }
                  image {
                     transition: .3s;
                     width: 14px;
                     height: 10px;
                     margin-left: 4px;
                     margin-top: 7px;
                     transform: rotate(0deg);
                  }
               }
            }
            .productPage_pk {
               width: 100%;
               margin-bottom: 32px;
               display: flex;
               align-items: center;
               .productPage_pk_shop {
                  flex: 1;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  .productPage_pk_shop_sp {
                     width: 100px;
                     height: 100px;
                     line-height: 100px;
                     text-align: center;
                     margin-top: 84px;
                     cursor: pointer;
                     margin-bottom: 52px;
                     border-radius: 50%;
                     span {
                        font-size: 60px;
                        color: #FFFFFF;
                     }
                  }
                  .productPage_pk_shop_sp1 {
                     width: 184px;
                     height: 200px;
                     background: linear-gradient(180deg, rgba(225,255,252,0.8) 0%, rgba(179,255,252,0.61) 36%, rgba(0,255,251,0.36) 100%);
                     border-radius: 8px;
                     border: 2px solid #FFFFFF;
                     display: flex;
                     padding: 0 15px;
                     box-sizing: border-box;
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;
                     margin-bottom: 12px;
                     margin-top: 16px;
                     cursor: pointer;
                     .productPage_pk_shop_sp1_img {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        image {
                           width: 100%;
                           height: 100%;
                        }
                     }
                     text {
                        width: 100%;
                        font-size: 16px;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-top: 18px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                     }
                  }
                  .productPage_pk_shop_t {
                     width: 254px;
                     height: 76px;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
               }
               .productPage_pk_z {
                  flex-shrink: 0;
                  width: 140px;
                  height: 90px;
                  cursor: pointer;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
            }
            .productPage_shop {
               width: 100%;
               margin-top: 12px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               flex-wrap: wrap;
               .productPage_shop_zw {
                  width: 168px;
                  height: 0;
               }
               .productPage_shop_item {
                  width: 168px;
                  margin-bottom: 12px;
                  cursor: pointer;
                  background: rgba(0,224,255,0.18);
                  border-radius: 8px;
                  display: flex;
                  transition: .5s;
                  padding: 15px;
                  box-sizing: border-box;
                  flex-direction: column;
                  align-items: center;
                  box-sizing: border-box;
                  white-space: pre-wrap;
                  word-break: break-all;
                  text-align: center;
                  &:hover {
                     background: linear-gradient(180deg, rgba(0,224,255,0.3) 0%, rgba(255,255,255,0.41) 100%);
                     border-radius: 8px;
                     border: 2px solid #FFFFFF;
                     box-sizing: border-box;
                  }
                  .productPage_shop_item_img {
                     width: 136px;
                     height: 136px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
                  text {
                     width: 100%;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical;
                     font-size: 16px;
                     font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                     font-weight: 400;
                     color: #FFFFFF;
                     margin-top: 12px;
                  }
               }
            }
            .productPage_parameter {
               width: 100%;
               display: flex;
               align-items: flex-start;
               justify-content: space-between;
               margin-bottom: 30px;
               .productPage_parameter_item {
                  width: 49%;
                  &:first-child {
                     margin-right: 18px;
                  }
                  .productPage_parameter_item_head {
                     width: 100%;
                     height: 40px;
                     // background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
                     border-radius: 8px 8px 0px 0px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     text {
                        width: 100%;
                        text-align: center;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
                        color: #FFFFFF;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                     }
                  }
                  .productPage_parameter_item_content {
                     width: 100%;
                     padding: 14px;
                     box-sizing: border-box;
                     background: rgba(0,224,255,0.3);
                     border-radius: 0px 0px 8px 8px;
                     display: flex;
                     flex-direction: column;
                     .productPage_parameter_item_content_price {
                        padding: 16px 0;
                        box-sizing: border-box;
                        background: #FFFFFF;
                        border-radius: 8px;
                        display: flex;
                        align-items: center;
                        .zdj {
                           flex: 1;
                           display: flex;
                           flex-direction: column;
                           align-items: flex-start;
                           justify-content: center;
                           margin-left: 20px;
                           text {
                              &:first-child {
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                 font-weight: 400;
                                 color: #333333;
                              }
                              &:last-child {
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                 font-weight: bold;
                                 color: #222222;
                                 margin-top: 14px;
                              }
                           }
                        }
                        .rsj {
                           flex: 1;
                           display: flex;
                           flex-direction: column;
                           align-items: flex-start;
                           justify-content: center;
                           text {
                              &:first-child {
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                 font-weight: 400;
                                 color: #333333;
                              }
                              &:last-child {
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                 font-weight: bold;
                                 color: #F10000;
                                 margin-top: 14px;
                              }
                           }
                        }
                     }
                     .productPage_parameter_item_content_nr {
                        padding: 16px 18px;
                        box-sizing: border-box;
                        background: #FFFFFF;
                        border-radius: 8px;
                        margin-top: 12px;
                        display: flex;
                        flex-direction: column;
                        .paramline{
                           border-bottom: #c7c9ce 2px dashed;
                           margin-bottom: 15px;
                        } 
                        .item {
                           display: flex;
                           align-items: flex-start;
                           margin-bottom: 15px;
                           &:last-child {
                              margin-bottom: 0 !important;
                           }
                           .label {
                              flex-shrink: 0;
                              font-size: 16px;
                              font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                              font-weight: 400;
                              color: #222222;
                           }
                           .value {
                              flex: 1;
                              font-size: 16px;
                              font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                              font-weight: 400;
                              color: #222222;
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
</style>