企业端

Mr.Zhang

2023-10-18 930c326fe4ba4831ea0923b5846a89d7964a4068

 company_admin/src/views/business/pageConfiguration.vue

@@ -1,209 +1,1787 @@
<template>
    <div class="pz">
        <div class="pz_head">基本信息</div>
        <div class="pz_item">
            <div class="pz_item_label">内容范围尺寸：</div>
            <div class="pz_item_ipt">
                <el-input v-model="from.rangeSize" type="number" style="width: 200px;" placeholder="支持750px-1000px"></el-input>
                <span style="margin-left: 15px;">px</span>
  <div class="pz">
    <div class="prediv">
      <div class="option">
        <div class="pz_head">页面预览</div>
        <el-tabs v-model="type">
          <el-tab-pane label="主界面" name="0"></el-tab-pane>
          <el-tab-pane label="PK效果" name="1"></el-tab-pane>
          <el-tab-pane label="搜索效果" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="prediv-content">
        <div class="content" :style="contentStyle">
          <img :src="form.topImg.type ? form.topImg.imgurl : defaultBanner" alt="">
          <template v-if="type != 1">
            <div>
              <div class="commodityFrom_head" :style="tableHeaderStyle">
                <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">类别</div>
                <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">品牌</div>
                <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">型号</div>
                <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">指导价</div>
                <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">入手价</div>
              </div>
              <div class="commodityFrom_body" :style="tableBodyStyle">
                <div class="commodityFrom_body_content">
                  <div class="commodityFrom_body_content_item" v-for="(item, index) in shopList" :key="index">
                    <div class="commodityFrom_body_content_item_num">
                      <div class="commodityFrom_body_content_item_num_img">
                        <img :src="item.categoryImgurl" mode="widthFix" />
                      </div>
                      <span>{{ item.categoryName }}</span>
                    </div>
                    <div class="commodityFrom_body_content_item_num" @mouseenter.stop="item.ppShow = true"
                      @mouseleave.stop="item.ppShow = false">
                      <span>{{ item.brandName }}</span>
                      <div class="drop-down"
                        :style="{ opacity: item.ppShow ? '1' : '0', zIndex: item.ppShow ? '999' : '-1', ...pullStyle }">
                        <div class="drop-down-item" v-for="(child, i) in item.ppData" :key="i"
                          @click.stop="clickBrand(item, child)">
                          <span class="item-value" :style="child == item.brandName ? selStyle : ''">{{ child }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="commodityFrom_body_content_item_num" @mouseenter.stop="item.xhShow = true"
                      @mouseleave.stop="item.xhShow = false">
                      <span>{{ item.name }}</span>
                      <div class="drop-down"
                        :style="{ opacity: item.xhShow ? '1' : '0', zIndex: item.xhShow ? '999' : '-1', ...pullStyle }">
                        <div class="drop-down-item" v-for="(data, s) in item.xhData" :key="s"
                          @click.stop="clickXH(item, data)">
                          <!-- {{ stringOperations(data.name, 7)}} -->
                          <span class="item-value" :style="data == item.name ? selStyle : ''">{{ data }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="commodityFrom_body_content_item_num">
                      <span>{{ item.zdPrice }}</span>
                    </div>
                    <div class="commodityFrom_body_content_item_num">
                      <span>{{ item.price }}</span>
                    </div>
                    <div class="commodityFrom_body_content_item_tips">
                      <image src="@/assets/images/ic_img@2x.png" mode="widthFix"></image>
                      <image src="@/assets/images/ic_copy@2x.png" mode="widthFix"></image>
                      <image src="@/assets/images/ic_delete@2x.png" mode="widthFix"></image>
                    </div>
                  </div>
                </div>
                <div class="commodityFrom_body_total">
                  <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">总计：</div>
                  <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">
                    18999
                  </div>
                  <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">
                    898999
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div class="pz_item">
            <div class="pz_item_label">主色色值：</div>
            <div class="pz_item_ipt">
                <el-color-picker v-model="from.mainColor"></el-color-picker>
            <div class="productCategory">
              <div class="productCategory_list" :style="categoryStyle">
                <div class="productCategory_list_item" v-for="(item, index) in category" :key="index"
                  @click="clickItem(index, item.id, item.name)">
                  <img :src="item.img" mode="widthFix" />
                  <span>{{ item.name }}</span>
                </div>
                <div class="productCategory_list_zw"></div>
                <div class="productCategory_list_zw"></div>
                <div class="productCategory_list_zw"></div>
                <div class="productCategory_list_zw"></div>
                <div class="productCategory_list_zw"></div>
              </div>
            </div>
        </div>
        <div class="pz_item">
            <div class="pz_item_label">背景图：</div>
            <div class="pz_item_ipt">
                <UploadAvatarImage
                    :file="{ 'imgurlfull': from.bgImgUrl, 'imgurl': from.bgImg }"
                    :uploadData="{ folder: 'web_param' }"
                    tipsLabel=""
                    @uploadSuccess="uploadReverseSuccess"
                />
          </template>
          <div class="productPage" v-if="type == 1">
            <div class="productPage_head">
              <div class="productPage_head_item">
                <span>属性1</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="attrFirstList.length > 0">
                  <div class="productPage_xl_iten" v-for="(item, index) in attrFirstList" :key="index"
                    @click="clickShopPageCheck(item, 1)">
                    <text>{{ item.name }}</text>
                  </div>
                </div> -->
              </div>
              <div class="productPage_head_item">
                <span>属性2</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="attrSecondList.length > 0">
                  <div class="productPage_xl_iten" v-for="(item, index) in attrSecondList" :key="index"
                    @click="clickShopPageCheck(item, 2)">
                    <text>{{ item.name }}</text>
                  </div>
                </div> -->
              </div>
              <div class="productPage_head_item">
                <span>预算</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="budgetList.length > 0">
                  <div class="productPage_xl_iten" v-for="(item, index) in budgetList" :key="index"
                    @click="clickShopPageCheck(item, 3)">
                    <template v-if="!item.name">
                      <text>{{ item.minamount }}~{{ item.maxamount }}</text>
                    </template>
                    <template v-else>
                      <text>{{ item.name }}</text>
                    </template>
                  </div>
                </div> -->
              </div>
              <div class="productPage_head_item">
                <span>品牌</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="brandData1.length > 0">
                  <div class="productPage_xl_iten" v-for="(item, index) in brandData1" :key="index"
                    @click="clickShopPageCheck(item, 4)">
                    <text>{{ item.name }}</text>
                  </div>
                </div> -->
              </div>
            </div>
        </div>
        <div class="pz_item">
            <div class="pz_item_label">顶部宣传图：</div>
            <div class="pz_item_ipt">
                <UploadAvatarImage
                    :file="{ 'imgurlfull': from.topImgUrl, 'imgurl': from.topImg }"
                    :uploadData="{ folder: 'web_param' }"
                    tipsLabel=""
                    @uploadSuccess="uploadReverseSuccess1"
                />
            <div class="productPage_pk">
              <div class="productPage_pk_shop">

                <div class="productPage_pk_shop_sp1">
                  <div class="productPage_pk_shop_sp1_img">
                    <img src="@/assets/images/Samsung@2x.png" mode="widthFix">
                  </div>
                  <span>三星323洗烘</span>
                </div>
                <div class="productPage_pk_shop_t">
                  <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt="">
                  <img v-else :src="form.pkImg.imgurl" alt="">
                </div>
              </div>
              <div class="productPage_pk_z">
                <img src="@/assets/images/ic_pk@2x.png" mode="widthFix">
              </div>
              <div class="productPage_pk_shop">

                <div class="productPage_pk_shop_sp1">
                  <div class="productPage_pk_shop_sp1_img">
                    <img src="@/assets/images/Galanz@2x.png" mode="widthFix">
                  </div>
                  <span>格兰仕434洗烘</span>
                </div>
                <div class="productPage_pk_shop_t">
                  <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt="">
                  <img v-else :src="form.pkImg.imgurl" alt="">
                </div>
              </div>
            </div>
            <div class="productPage_parameter">
                  <div class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
                     <div class="productPage_parameter_item_head">
                        <span>{{item.name}}</span>
                     </div>
                     <div class="productPage_parameter_item_content">
                        <div class="productPage_parameter_item_content_price">
                           <div class="zdj">
                              <span>指导价：</span>
                              <span>¥{{item.zdPrice}}</span>
                           </div>
                           <div class="rsj">
                              <span>建议入手价：</span>
                              <span>¥{{item.price}}</span>
                           </div>
                        </div>
                        <div class="productPage_parameter_item_content_nr">
                           <div class="item" v-if="item.param1"  v-for="(child, i) in item.param1" :key="child.index">
                              <div class="label">{{child.name}}：</div>
                              <div class="value">{{child.val}}</div>
                           </div>
                           <div v-if="item.param2.length>0" class="paramline"></div>
                           <div class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index">
                              <div class="label">{{child.name}}：</div>
                              <div class="value">{{child.val}}</div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
          </div>

        </div>
        <div class="pz_item">
            <div class="pz_item_label">PK台图：</div>
            <div class="pz_item_ipt">
                <UploadAvatarImage
                    :file="{ 'imgurlfull': from.pkImgUrl, 'imgurl': from.pkImg }"
                    :uploadData="{ folder: 'web_param' }"
                    tipsLabel=""
                    @uploadSuccess="uploadReverseSuccess2"
                />
      </div>
      <div class="search" v-if="type == 2">
        <div class="search_box">
          <div class="search_box_item" :style="searchStyle">
            <div class="icon">
              <img src="@/assets/images/ic_search@2x.png" mode="widthFix" />
            </div>
            <div class="search_box_item_right">
              海尔冰箱
            </div>
          </div>
          <div class="search_box_item_xl" :style="searchStyle">
            <div class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i">
              <div class="search_box_item_xl_item_name">{{ item.name }}</div><span v-if="item.price">￥{{ item.price
              }}</span>
            </div>
          </div>
        </div>
        <div class="pz_footer">
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button>返回</el-button>
        </div>
      </div>

    </div>
    <div class="setting">
      <div class="pz_head">信息</div>
      <el-form ref="form" :model="form" label-width="130px" label-suffix="：">
        <el-form-item label="内容范围尺寸" props="rangeSize">
          <el-input v-model="form.rangeSize" type="number" style="width: 200px;" placeholder="支持750px-1200px"></el-input>
          <span style="margin-left: 15px;">px</span>
          <span style="margin-left: 15px; color: #666;">支持750px-1200px</span>
        </el-form-item>
        <el-form-item label="背景颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.main.bgType" @change="selectBackground">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.main.bgType == 1">
              <el-color-picker v-model="form.main.bgColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.main.alpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
        <el-form-item label="背景图片">
          <el-radio-group v-model="form.bgImg.isShow">
            <el-radio :label="0">隐藏</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>

          <div v-if="form.bgImg.isShow == 1">
            <el-radio-group v-model="form.bgImg.type">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <div v-if="form.bgImg.type == 0" style="width: 100px; height: 100px; border: 1px solid #ccc;">
              <el-image style="width: 100px; height: 100px" :src="require('@/assets/images/background_defult.png')"
                fit="contain" :prediv-src-list="[require('@/assets/images/background_defult.png')]">
              </el-image>
            </div>
            <div v-else class="img-select-item">
              <div style="width: 100px; height: 100px; border: 1px solid #ccc;">
                <el-image v-if="form.bgImg.bgImgUrl" style="width: 100px; height: 100px" :src="form.bgImg.bgImgUrl"
                  fit="contain" :prediv-src-list="[form.bgImg.bgImgUrl]">
                </el-image>
              </div>
              <div class="upload">
                <div><el-button icon="el-icon-plus" @click="$refs.upBackground.click()">上传背景</el-button></div>
                <span
                  style="color: #999; font-size: 13px; line-height: 18px;">建议尺寸：750px*1600px，其中主要展示区域高度为1008px，大小不超过1M</span>
                <input type="file" @change="upbgImgUrl" ref="upBackground" style="display: none;" />
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="顶部图片">
          <el-radio-group v-model="form.topImg.type">
            <el-radio :label="0">默认</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
          <div v-if="form.topImg.type == 0" style="width: 100px; height: 100px; border: 1px solid #ccc;">
            <el-image style="width: 100px; height: 100px" :src="require('@/assets/images/banner_defult.png')"
              fit="contain" :prediv-src-list="[require('@/assets/images/banner_defult.png')]">
            </el-image>
          </div>
          <div v-else class="img-select-item">
            <div style="width: 100px; height: 100px; border: 1px solid #ccc;">
              <el-image v-if="form.topImg.imgurl" style="width: 100px; height: 100px" :src="form.topImg.imgurl"
                fit="contain" :prediv-src-list="[form.topImg.imgurl]">
              </el-image>
            </div>
            <div class="upload">
              <div><el-button icon="el-icon-plus" @click="$refs.upTop.click()">上传图片</el-button></div>
              <span style="color: #999; font-size: 13px; line-height: 18px;">建议尺寸700px*300px，大小不超过1M</span>
              <input type="file" @change="upTopImgUrl" ref="upTop" style="display: none;" />
            </div>
          </div>
        </el-form-item>

        <el-form-item label="PK台图片">
          <el-radio-group v-model="form.pkImg.type">
            <el-radio :label="0">默认</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
          <div v-if="form.pkImg.type == 0" style="width: 100px; height: 100px; border: 1px solid #ccc;">
            <el-image style="width: 100px; height: 100px" :src="require('@/assets/images/pk_defult.png')" fit="contain"
              :prediv-src-list="[require('@/assets/images/pk_defult.png')]">
            </el-image>
          </div>
          <div v-else class="img-select-item">
            <div style="width: 100px; height: 100px; border: 1px solid #ccc;">
              <el-image v-if="form.pkImg.imgurl" style="width: 100px; height: 100px" :src="form.pkImg.imgurl"
                fit="contain" :prediv-src-list="[form.pkImg.imgurl]">
              </el-image>
            </div>
            <div class="upload">
              <div><el-button icon="el-icon-plus" @click="$refs.upPk.click()">上传图片</el-button></div>
              <span style="color: #999; font-size: 13px; line-height: 18px;">只能上传图片格式，建议尺寸254*76px</span>
              <input type="file" @change="upPkImgUrl" ref="upPk" style="display: none;" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="表头背景颜色" props="headerBackgroundType">
          <el-radio-group v-model="form.header.backgroundType" @change="selectHeaderBg">
            <el-radio :label="0">默认</el-radio>
            <el-radio :label="1">自定义单色</el-radio>
            <el-radio :label="2">自定义渐变色</el-radio>
          </el-radio-group>
          <div class="color-select-item" v-if="form.header.backgroundType == 1">
            <el-color-picker v-model="form.header.bgColor" size="mini"
              style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
            不透明度：<el-input v-model="form.header.bgAlpha" type="number" style="width: 100px;"></el-input> %
          </div>
          <div v-if="form.header.backgroundType == 2">
            <div class="color-select-item">
              开始色值：<el-color-picker v-model="form.header.bgColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.header.bgAlpha" type="number" style="width: 100px;"></el-input> %
            </div>
            <div class="color-select-item">
              结束色值：<el-color-picker v-model="form.header.bgColor2" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.header.bgAlpha2" type="number" style="width: 100px;"></el-input> %
            </div>
          </div>
        </el-form-item>
        <el-form-item label="表头字体颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.header.type" @change="selectHeader">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.header.type == 1">
              <el-color-picker v-model="form.header.color" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.header.alpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
        <el-form-item label="选中字体颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.pull.selType" @change="selectHeader">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.pull.selType == 1">
              <el-color-picker v-model="form.pull.selColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.pull.selAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
        <el-form-item label="下拉框背景颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.pull.bgType" @change="selectHeader">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.pull.bgType == 1">
              <el-color-picker v-model="form.pull.bgColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.pull.bgAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
        <el-form-item label="分类背景颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.category.bgType" @change="selectHeader">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.category.bgType == 1">
              <el-color-picker v-model="form.category.bgColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.category.bgAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
        <el-form-item label="搜索框背景颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.search.bgType" @change="selectHeader">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.search.bgType == 1">
              <el-color-picker v-model="form.search.bgColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.search.bgAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
        <el-form-item label="列表背景颜色">
          <div class="color-select-item">
            <el-radio-group v-model="form.list.bgType" @change="selectHeader">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
            <template v-if="form.list.bgType == 1">
              <el-color-picker v-model="form.list.bgColor" size="mini"
                style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度：<el-input v-model="form.list.bgAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
        </el-form-item>
      </el-form>
      <div class="pz_footer">
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </div>





  </div>
</template>
    
<script>
import { getByLogin, renew } from '@/api/business/page.js'
import { getByLoginNew, renewUpdate } from '@/api/business/page.js'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'

import { upload } from '@/api/system/common'
export default {
    data() {
        return {
            action: process.env.VUE_APP_API_PREFIX + '/public/upload',
            from: {
                rangeSize: '',
                mainColor: '',
                bgImg: '',
                bgImgUrl: '',
                topImg: '',
                topImgUrl: '',
                pkImg: '',
                pkImgUrl: ''
            }
  components: { UploadAvatarImage },
  data() {
    return {
      isUploading: false,
      type: '0', // 0、主界面 1、PK效果 2、搜索效果
      shopList: [
        { categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
        { categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
        { categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
      ],
      searchData: [
        { name: '冰箱 海尔EG100MATE35S', price: '3' },
        { name: '冰箱 海尔EG100MATE35S', price: '3' },
        { name: '冰箱 海尔EG100MATE35S', price: '3' },
        { name: '冰箱 海尔EG100MATE35S', price: '3' },
        { name: '冰箱 海尔EG100MATE35S', price: '3' },
      ],
      category: [
        { img: require('@/assets/images/category/ic_bingxiang@2x.png'), name: '冰箱' },
        { img: require('@/assets/images/category/ic_xiyiji @2x.png'), name: '洗衣机' },
        { img: require('@/assets/images/category/ic_kongtiao@2x.png'), name: '空调' },
        { img: require('@/assets/images/category/ic_dianshi@2x.png'), name: '电视' },
        { img: require('@/assets/images/category/ic_reshuiqi@2x.png'), name: '热水器' },
        { img: require('@/assets/images/category/ic_yanzao@2x.png'), name: '烟灶' },
        { img: require('@/assets/images/category/ic_kaoxiang@2x.png'), name: '蒸烤箱' },
        { img: require('@/assets/images/category/ic_xiwanji@2x.png'), name: '洗碗机' },
        { img: require('@/assets/images/category/ic_jinshui@2x.png'), name: '净水器' },
        { img: require('@/assets/images/category/ic_qita@2x.png'), name: '其他' },
      ],
      action: process.env.VUE_APP_API_PREFIX + '/public/upload',
      defaultBanner: require('@/assets/images/banner_defult.png'),
      leftShop: {
        name: '三星323洗烘',
        zdPrice: '3999',
        price: '3499',
        param1: [
          { name: '品牌', val: '三星'},
          { name: '型号', val: 'G100818bg'},
          { name: '使用方式', val: '全自动'},
          { name: '洗涤公斤量', val: '10kg'},
          { name: '用水量', val: '65L'},
          { name: '最高转速', val: '1200转/分钟'},
          { name: '深度', val: '600mm'},
          { name: '高度', val: '845mm'},
          { name: '保修期', val: '36个月'},
        ],
        param2: [
          { name: '紫外线杀菌', val: '是'},
          { name: '排水方式', val: '上排水'},
        ]
      },
      rightShop: {
        name: '格兰仕434洗烘',
        zdPrice: '2999',
        price: '2499',
        param1: [
          { name: '品牌', val: '格兰仕'},
          { name: '型号', val: 'G100818bg'},
          { name: '使用方式', val: '全自动'},
          { name: '洗涤公斤量', val: '10kg'},
          { name: '用水量', val: '65L'},
          { name: '最高转速', val: '1200转/分钟'},
          { name: '深度', val: '600mm'},
          { name: '高度', val: '845mm'},
          { name: '保修期', val: '36个月'},
        ],
        param2: [
          { name: '显示屏类型', val: '触摸屏'},
          { name: '附加功能', val: '自动断电'},
        ]
      },

      form: {
        rangeSize: '',
        main: {
          bgType: 0, //0默认 1自定义
          bgColor: '#f7f7f7',
          alpha: '100'
        },

        bgImg: {
          isShow: 0,  // 0隐藏 1显示
          type: 0,
          img: '',
          imgurl: ''
        },
        topImg: {
          type: 0,
          img: '',
          imgurl: ''
        },
        pkImg: {
          type: 0,
          img: '',
          imgurl: ''
        },
        header: {
          backgroundType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
          bgColor2: '#f7f7f7',
          bgAlpha2: '100',
          type: 0,
          color: '#ffffff',
          alpha: '100',

        },
        pull: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
          selType: 0,
          selColor: '#ff0000',
          selAlpha: '100'
        },
        search: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
        },
        category: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
        },
        list: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
        }
    },
    components: { UploadAvatarImage },
    created() {
        this.getDesc()
    },
    methods: {
        submit() {
            if (this.from.rangeSize < 750) {
                this.$message.warning({ message: '尺寸必须大于750' })
                return
            }
            if (this.from.rangeSize > 1000) {
                this.$message.warning({ message: '尺寸必须小于1000' })
                return
            }
            renew(this.from)
                .then(res => {
                    this.$message.success({ message: '保存成功' })
                })
        },
        getDesc() {
            getByLogin({})
                .then(res => {
                    if (res) {
                        this.from.rangeSize = res.rangeSize
                        this.from.mainColor = res.mainColor
                        if (res.bgImg) {
                            this.from.bgImg = res.bgImg
                            this.from.bgImgUrl = res.resourcePath + res.bgImg
                        }
                        if (res.topImg) {
                            this.from.topImg = res.topImg
                            this.from.topImgUrl = res.resourcePath + res.topImg
                        }
                        if (res.pkImg) {
                            this.from.pkImg = res.pkImg
                            this.from.pkImgUrl = res.resourcePath + res.pkImg
                        }
                    }
                })
        },
        exceed() {
            this.$message.warning({ message: '只能上传一张图片' })
        },
        
        uploadReverseSuccess2(file) {
            this.from.pkImg = file.imgurl;
            this.from.pkImgUrl = file.imgurlfull;
        },
        uploadReverseSuccess1(file) {
            this.from.topImg = file.imgurl;
            this.from.topImgUrl = file.imgurlfull;
        },

        uploadReverseSuccess(file) {
            this.from.bgImg = file.imgurl;
            this.from.bgImgUrl = file.imgurlfull;
        },

        handleRemove1(file, fileList) {
            this.fileList1 = []
            this.from.bgImg = ''
        },
        fileSuccess1(response) {
            this.fileList1.push({ name: response.data.imgaddr, url: response.data.url })
            this.from.bgImg = response.data.imgaddr
        },

        handleRemove2(file, fileList) {
            this.fileList2.forEach((item, index) => {
                if (file.name === item.name) {
                    this.fileList2.splice(index, 1)
                }
            })
            let arr = this.fileList2.map(item => item.name)
            this.from.topImg = arr.join(',')
        },
        fileSuccess2(response) {
            this.fileList2.push({ name: response.data.imgaddr, url: response.data.url })
            let arr = this.fileList2.map(item => item.name)
            this.from.topImg = arr.join(',')
        },

        handleRemove3(file, fileList) {
            this.fileList3.forEach((item, index) => {
                if (file.name === item.name) {
                    this.fileList3.splice(index, 1)
                }
            })
            let arr = this.fileList3.map(item => item.name)
            this.from.pkImg = arr.join(',')
        },
        fileSuccess3(response) {
            this.fileList3.push({ name: response.data.imgaddr, url: response.data.url })
            let arr = this.fileList3.map(item => item.name)
            this.from.pkImg = arr.join(',')
        }
      }
    }
  },
  computed: {
    contentStyle() {
      let alpha = +(this.form.main.alpha * 2.55).toFixed(0)
      let backgroundColor = this.form.main.bgColor + alpha.toString(16)
      let style = { backgroundColor }
      if (this.form.bgImg.isShow) {
        if (this.form.bgImg.type) {
          style.backgroundImage = `url(${this.form.bgImg.imgurl})`
        } else {
          let img = require('@/assets/images/background_defult.png')
          style.backgroundImage = `url(${img})`
        }
      }
      return style
    },
    tableHeaderStyle() {
      let headerStyle = {
        color: this.form.header.color
      }
      if (this.form.header.backgroundType == 2) {
        // 渐变
        let alpha = +(this.form.header.bgAlpha * 2.55).toFixed(0)
        let alpha2 = +(this.form.header.bgAlpha2 * 2.55).toFixed(0)
        let start = this.form.header.bgColor + alpha.toString(16)
        let end = this.form.header.bgColor2 + alpha2.toString(16)
        headerStyle.background = `linear-gradient(180deg, ${start} 0%, ${end} 100%)`
      } else {
        let alpha = +(this.form.header.alpha * 2.55).toFixed(0)
        headerStyle.background = this.form.header.bgColor + alpha.toString(16)
      }
      console.log(headerStyle);
      return headerStyle
    },
    tableBodyStyle() {
      let alpha = +(this.form.list.bgAlpha * 2.55).toFixed(0)
      let background = this.form.list.bgColor + alpha.toString(16)
      return { background }
    },
    pullStyle() {
      let alpha = +(this.form.pull.bgAlpha * 2.55).toFixed(0)
      let background = this.form.pull.bgColor + alpha.toString(16)
      return { background }
    },
    selStyle() {
      let selStyle = {}
      let alpha = +(this.form.pull.selAlpha * 2.55).toFixed(0)
      selStyle.color = this.form.pull.selColor + alpha.toString(16)
      console.log(selStyle);
      return selStyle
    },
    searchStyle() {
      let alpha = +(this.form.search.bgAlpha * 2.55).toFixed(0)
      let background = this.form.search.bgColor + alpha.toString(16)
      return { background }
    },
    categoryStyle() {
      let alpha = +(this.form.category.bgAlpha * 2.55).toFixed(0)
      let background = this.form.category.bgColor + alpha.toString(16)
      return { background }
    },
  },
  created() {
    this.getDesc()
  },
  methods: {
    selectBackground(v) {
      console.log(v);
      if (v == 0) {
        this.form.main.bgColor = '#f7f7f7'
        this.form.main.alpha = '100'
      }
    },
    // 上传背景图片
    upbgImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
        .then(res => {
          this.form.bgImg.img = res.imgaddr
          this.form.bgImg.imgurl = res.url
        })
        .catch(e => {
          this.$message.error(e)
        })
        .finally(() => this.isUploading = false)
      this.$refs.upBackground.value = null
    },
    // 上传顶部图片
    upTopImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
        .then(res => {
          this.form.topImg.img = res.imgaddr
          this.form.topImg.imgurl = res.url
        })
        .catch(e => {
          this.$message.error(e)
        })
        .finally(() => this.isUploading = false)
      this.$refs.upTop.value = null
    },

    // 上传pk太图片
    upPkImgUrl(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
      formdate.append('folder', 'web_param')
      upload(formdate)
        .then(res => {
          this.form.pkImg.img = res.imgaddr
          this.form.pkImg.imgurl = res.url
        })
        .catch(e => {
          this.$message.error(e)
        })
        .finally(() => this.isUploading = false)
      this.$refs.upPk.value = null
    },
    selectHeaderBg(v) {
      if (v == 0) {
        this.form.header.bgColor = '#f7f7f7'
        this.form.header.bgAlpha = '100'
      } else if (v == 1) {
        this.form.header.bgColor = '#f7f7f7'
        this.form.header.bgAlpha = '100'
      } else {
        this.form.header.bgColor = '#f7f7f7'
        this.form.header.bgAlpha = '100'
        this.form.header.bgColor2 = '#f7f7f7'
        this.form.header.bgAlpha2 = '100'
      }
    },
    selectHeader(v) {
      if (v == 0) {
        this.form.header.color = '#f7f7f7'
        this.form.header.alpha = '100'
      }
    },

    mouseenter(v) {
      let alpha = +(this.form.header.selAlpha * 2.55).toFixed(0)
      v.target.style.color = this.form.header.selColor + alpha.toString(16)
    },
    mouseleave(v) {
      v.target.style.color = ''
    },

    clickBrand(item, child) {
      item.brandName = child
      item.ppShow = false
    },
    clickXH(item, data) {
      item.name = data
      item.ppShow = false
    },

    getDesc() {
      getByLoginNew()
        .then(res => {
          if (res.newParam) {
            this.form = JSON.parse(res.newParam)
          }
        })
    },

    submit() {
      if (this.form.rangeSize < 750) {
        this.$message.warning({ message: '尺寸必须大于750' })
        return
      }
      if (this.form.rangeSize > 1000) {
        this.$message.warning({ message: '尺寸必须小于1000' })
        return
      }
      renewUpdate({ newParam: JSON.stringify(this.form) })
        .then(res => {
          this.$message.success({ message: '保存成功' })
        })
    },
  }
}
/**
 *
 */
</script>

<style lang="scss" scoped>
    .pz {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        background-color: #fff;
        .pz_head {
            font-size: 20px;
            margin-bottom: 30px;
            font-weight: bold;
.pz {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;

  .prediv {
    width: 400px;
    height: 1000px;
    position: relative;
    overflow: hidden;
    margin-right: 10px;

    .option {
      .select-option {
        .option-item {
          // span-align: center;
          margin-top: 5px;
          line-height: 20px;
          height: 20px;
          font-size: 16px;
          cursor: pointer;
          color: #222;
        }
        .pz_item {
            width: 750px;

        .selected {
          color: #2E68EC;
        }
      }
    }

    .prediv-content {

      box-sizing: border-box;
      padding: 15px;

      .content {

        // background-image: url('../../assets/images/background_defult.png');
        background-position: center;
        background-size: 100% 100%;
        height: 1600px;
        width: 750px;
        transform: scale(0.5) translate(-50%, -50%);
        box-sizing: border-box;
        padding: 0 30px;

        img {
          width: 100%;
        }

        .productPage {
          img {
            width: 100%;
          }

          background-position: center;
          background-size: 100% 100%;

          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;
              color: #fff;
              font-size: 12px;

              img {
                width: 14px;
                margin-left: 3px;
              }

              &:hover {
                border-radius: 8px 8px 0px 0px;
                background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
              }

              &:hover img {
                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%;
                  height: 40px;
                  line-height: 40px;
                  text-align: center;
                  cursor: pointer;
                  padding: 0 10px;
                  box-sizing: border-box;

                  &:hover {
                    text {
                      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;
                  }
                }
              }

              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;
                margin-top: 84px;
                cursor: pointer;
                margin-bottom: 52px;

                image {
                  width: 100%;
                  height: 100%;
                }
              }

              .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: 24px;
                cursor: pointer;

                .productPage_pk_shop_sp1_img {
                  width: 100px;
                  height: 100px;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                span {
                  width: 100%;
                  text-align: center;
                  font-weight: 500;
                  font-size: 16px;
                  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                  font-weight: 500;
                  color: #FFFFFF;
                  margin-top: 18px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }

              .productPage_pk_shop_t {
                width: 254px;
                height: 76px;

                image {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .productPage_pk_z {
              flex-shrink: 0;
              width: 100px;
              height: 50px;
              cursor: pointer;

              image {
                width: 100%;
                height: 100%;
              }
            }
          }

          .productPage_shop {
            width: 100%;
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .productPage_shop_zw {
              width: 168px;
              height: 0;
            }

            .productPage_shop_item {
              width: 168px;
              // height: 204px;
              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;
              // justify-content: center;
              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;
            .pz_item_label {
                width: 140px;
                flex-shrink: 0;
                font-size: 16px;
                text-align: right;

            .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;

                span {
                  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;

                    span {
                      &: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: 10px;
                      }
                    }
                  }

                  .rsj {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;

                    span {
                      &: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: 10px;
                      }
                    }
                  }
                }

                .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;
                    }
                  }
                }
              }
            }
            .pz_item_ipt {
                flex: 1;
          }
        }
      }

      .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;
            }

            img {
              width: 52px;
              height: 52px;
              margin-bottom: 4px;
            }

            span {
              font-size: 16px;
              font-family: SourceHanSansSC-Normal, SourceHanSansSC;
              font-weight: 400;
              color: #FFFFFF;
            }
          }
        }
        .pz_footer {
            width: 100%;
            padding-left: 140px;
            box-sizing: border-box;
        }
      }
    }
  }

  .setting {
    flex: 1;
  }

  .pz_head {
    font-size: 20px;
    margin-bottom: 16px0px;
    font-weight: bold;
  }

  .pz_item {
    // width: 750px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;

    .pz_item_label {
      width: 140px;
      flex-shrink: 0;
      font-size: 16px;
    }

    .pz_item_ipt {
      flex: 1;
    }
  }

  .pz_footer {
    width: 100%;
    padding-left: 140px;
    box-sizing: border-box;
  }
}

.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%);
  display: flex;
  align-items: center;
  color: #FFFFFF;

  .commodityFrom_head_item {
    // flex: 1;
    width: 126px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;

    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: rgba(0, 224, 255, 0.3);
        border-radius: 8px;

        image {
          width: 32px;
          height: 32px;
          cursor: pointer;
        }
      }

      .commodityFrom_body_content_item_num {
        width: 126px;
        height: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 8px;
        margin-right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: 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;
        }

        span {
          width: 100%;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          overflow: hidden;
          white-space: nowrap;
        }

        .commodityFrom_body_content_item_num_img {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 4px;

        }

        input {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
        }

        .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-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;
            padding: 0 10px;
            box-sizing: border-box;

            .item-value {
              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;

      &:first-child {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 16px;
        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
        font-weight: 500;
        padding: 0 15px;
        color: #FFFFFF;
      }

      &:last-child {
        margin-right: 0 !important;
      }
    }
  }
}

.color-select-item {
  display: flex;
  align-items: center;
  height: 33px;
}

.img-select-item {
  display: flex;

  .upload {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}


.search {
  position: absolute;
  transform: scale(0.5) translate(0%, -20%);
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .search_box {
    width: 560px;
    height: auto;
    display: flex;
    flex-direction: column;

    .search_box_item_xl::-webkit-scrollbar {
      width: 6px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 4px;
    }

    .search_box_item_xl::-webkit-scrollbar-thumb {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background: rgba(255, 255, 255, 0.8);
    }

    .search_box_item_xl {
      width: 100%;
      max-height: 60px;
      min-height: 240px;
      overflow-y: scroll;
      background: rgba(5, 35, 102, 0.7);
      border-radius: 8px;

      // display: flex;
      // flex-direction: column;
      .search_box_item_xl_item {
        width: 100%;
        height: 40px;
        // line-height: 52px;
        // font-size: 28px;
        // font-family: PingFangSC-Regular, PingFang SC;
        // font-weight: 400;
        // color: #FFFFFF;
        padding: 0 24px;
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        // &:hover {
        //    span {
        //       color: #FFF200;
        //    }
        // }
        .active {
          color: #FFF200 !important;
        }

        .search_box_item_xl_item_name {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          // &:hover {
          //    color: #FFF200;
          // }
        }

        span {
          flex-shrink: 0;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          margin-left: 10px;
        }
      }
    }

    .search_box_item {
      width: 100%;
      height: 62px;
      background: rgba(5, 35, 102, 0.7);
      border-radius: 32px;
      display: flex;
      align-items: center;
      padding: 0 30px;
      box-sizing: border-box;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0 !important;
      }

      .search_box_item_right {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 18px;
        color: #fff;
      }

      .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-right: 18px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .placeholder {
        height: 62px;
        line-height: 62px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>