aaa

doum

2026-06-08 3ac279c9df7181c9f21d35a689a321b990b87b22

 company_admin/src/views/business/pageConfiguration.vue

@@ -7,20 +7,21 @@
          <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-tab-pane label="商品列表" name="3"></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">
          <template v-if="type != 1 && type !=3">
            <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>
                <!-- @mouseenter="mouseenter" @mouseleave="mouseleave" -->
                <div class="commodityFrom_head_item" >类别</div>
                <div class="commodityFrom_head_item" >品牌</div>
                <div class="commodityFrom_head_item" >型号</div>
                <div class="commodityFrom_head_item" >指导价</div>
                <div class="commodityFrom_head_item" >入手价</div>
              </div>
              <div class="commodityFrom_body" :style="tableBodyStyle">
                <div class="commodityFrom_body_content">
@@ -69,10 +70,10 @@
                </div>
                <div class="commodityFrom_body_total">
                  <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">总计：</div>
                  <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">
                  <div class="commodityFrom_body_total_item" :style="{...tableHeaderStyle, ...selStyle}">
                    18999
                  </div>
                  <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">
                  <div class="commodityFrom_body_total_item" :style="{...tableHeaderStyle, ...selStyle}">
                    898999
                  </div>
                </div>
@@ -81,9 +82,9 @@
            <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)">
                  @click1="clickItem(index, item.id, item.name)">
                  <img :src="item.img" mode="widthFix" />
                  <span>{{ item.name }}</span>
                  <span  :style="{...selListNameStyle}">{{ item.name }}</span>
                </div>
                <div class="productCategory_list_zw"></div>
                <div class="productCategory_list_zw"></div>
@@ -93,9 +94,9 @@
              </div>
            </div>
          </template>
          <div class="productPage" v-if="type == 1">
            <div class="productPage_head">
              <div class="productPage_head_item">
          <div class="productPage" v-if="type == 1 || type ==3">
            <div class="productPage_head" :style="tableHeaderStyle">
              <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
                <span>属性1</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="attrFirstList.length > 0">
@@ -105,7 +106,7 @@
                  </div>
                </div> -->
              </div>
              <div class="productPage_head_item">
              <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
                <span>属性2</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="attrSecondList.length > 0">
@@ -115,7 +116,7 @@
                  </div>
                </div> -->
              </div>
              <div class="productPage_head_item">
              <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
                <span>预算</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="budgetList.length > 0">
@@ -130,7 +131,7 @@
                  </div>
                </div> -->
              </div>
              <div class="productPage_head_item">
              <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
                <span>品牌</span>
                <img src="@/assets/images/ar_open@2x.png" mode="widthFix">
                <!-- <div class="productPage_xl" v-if="brandData1.length > 0">
@@ -141,72 +142,86 @@
                </div> -->
              </div>
            </div>
            <div class="productPage_pk">
              <div class="productPage_pk_shop">
            <template v-if="type ==1">
              <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 class="productPage_pk_shop_sp1" :style="tableHeaderStyle">
                    <div class="productPage_pk_shop_sp1_img">
                      <img src="@/assets/images/Samsung@2x.png" mode="widthFix">
                    </div>
                    <span>三星323洗烘</span>
                  </div>
                  <span>三星323洗烘</span>
                  <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_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 class="productPage_pk_z">
                  <img src="@/assets/images/ic_pk@2x.png" mode="widthFix">
                </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" >

                <div class="productPage_pk_shop_sp1">
                  <div class="productPage_pk_shop_sp1_img">
                    <img src="@/assets/images/Galanz@2x.png" mode="widthFix">
                  <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle">
                    <div class="productPage_pk_shop_sp1_img">
                      <img src="@/assets/images/Galanz@2x.png" mode="widthFix">
                    </div>
                    <span>格兰仕434洗烘</span>
                  </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 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>
            <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 class="productPage_parameter">
                <div class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
                  <div class="productPage_parameter_item_head" :style="tableHeaderStyle">
                    <span>{{item.name}}</span>
                  </div>
                  <div class="productPage_parameter_item_content" :style="tableBodyStyle">
                    <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>
            </template>
            <template v-if="type==3">
              <div class="productPage_shop" >
                <div class="productPage_shop_item" v-for="(item, index) in productList"  :style="{...selectList}" :key="index" >
                  <div class="productPage_shop_item_img">
                    <img :src="item.img" mode="widthFix"/>
                  </div>
                  <span :style="{...selProNameStyle}">{{item.name}}</span>
                </div>
                <div class="productPage_shop_zw"></div>
                <div class="productPage_shop_zw"></div>
                <div class="productPage_shop_zw"></div>
              </div>
            </template>
          </div>

        </div>
      </div>
      <div class="search" v-if="type == 2">
      <div class="search" v-if="type == 2 ">
        <div class="search_box">
          <div class="search_box_item" :style="searchStyle">
            <div class="icon">
@@ -227,7 +242,32 @@

    </div>
    <div class="setting">
      <div class="pz_head">信息</div>
      <div class="pz_head pz_head--with-switch">
        <span>主播端页面配置 <span class="version-tag">V2</span></span>
        <span
          class="version-switch version-switch--v2"
          :class="{ 'version-switch--active': useThisVersion }"
        >
          <span class="version-switch__icon"><i class="el-icon-mobile-phone" /></span>
          <span class="version-switch__body">
            <span class="version-switch__label">立即使用该版本</span>
            <span class="version-switch__status">{{ useThisVersion ? '已启用 · 主播端当前版本' : '点击按钮后主播端将切换至本版本' }}</span>
          </span>
          <span v-if="useThisVersion" class="version-switch__badge">
            <i class="el-icon-success" /> 当前版本
          </span>
          <el-button
            v-else
            type="primary"
            size="medium"
            :loading="versionSwitchLoading"
            class="version-switch__btn version-switch__btn--v2"
            @click="onUseThisVersion"
          >
            立即生效
          </el-button>
        </span>
      </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>
@@ -272,8 +312,8 @@
              <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;" />
                  style="color: #999; font-size: 13px; line-height: 18px;">建议尺寸：1920px*1080px，其中主要展示区域高度为1080px，大小不超过1M</span>
                <input type="file" accept="image/*" @change="upbgImgUrl" ref="upBackground" style="display: none;" />
              </div>
            </div>
          </div>
@@ -298,7 +338,7 @@
            <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;" />
              <input type="file" accept="image/*" @change="upTopImgUrl" ref="upTop" style="display: none;" />
            </div>
          </div>
        </el-form-item>
@@ -322,7 +362,7 @@
            <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;" />
              <input type="file" accept="image/*" @change="upPkImgUrl" ref="upPk" style="display: none;" />
            </div>
          </div>
        </el-form-item>
@@ -428,10 +468,46 @@
            </template>
          </div>
        </el-form-item>
        <el-form-item label="品类列表字体">
          <div class="color-select-item">
            颜色  <el-radio-group v-model="form.listname.selType" @change="selectListName" style="margin-left: 15px">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">自定义</el-radio>
            </el-radio-group>
           <template v-if="form.listname.selType == 1">
              <el-color-picker v-model="form.listname.selColor" size="mini"  style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度 <el-input v-model="form.listname.selAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
          <div >
            <div class="color-select-item" style="margin-top: 10px">
              大小<el-input v-model="form.listname.fontSize" type="number" style="width: 80px;margin-left: 15px"></el-input> px (默认16px)
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商品列表字体">
          <div class="color-select-item">
            颜色  <el-radio-group v-model="form.listproname.selType" @change="selectproName" style="margin-left: 15px">
            <el-radio :label="0">默认</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
            <template v-if="form.listproname.selType == 1">
              <el-color-picker v-model="form.listproname.selColor" size="mini"  style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
              不透明度 <el-input v-model="form.listproname.selAlpha" type="number" style="width: 100px;"></el-input> %
            </template>
          </div>
          <div >
            <div class="color-select-item" style="margin-top: 10px">
              大小<el-input v-model="form.listproname.fontSize" type="number" style="width: 80px;margin-left: 15px"></el-input> px (默认16px)
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="pz_footer">
        <el-button type="primary" @click="submit">保存</el-button>
      </div>


    </div>


@@ -440,16 +516,213 @@

  </div>
</template>
    

<script>
import { getByLoginNew, renewUpdate } from '@/api/business/page.js'
import { getByLoginNew, renewUpdate, updateAnchorPageVersion } from '@/api/business/page.js'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import { upload } from '@/api/system/common'
export default {
  methods: {
    selectBackground(v) {
      if (v == 0) {
        this.form.main.bgColor = '#f7f7f7'
        this.form.main.alpha = '100'
      }

    },
    // 上传背景图片
    upbgImgUrl(file) {
      // console.log(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 = '#0D1E41'
        this.form.header.bgAlpha = '100'
      } else if (v == 2) {
        this.form.header.bgColor2 = '#0D1E41'
        this.form.header.bgAlpha2 = '100'
      }
    },
    selectHeader(v) {
      if (v == 0) {
        this.form.header.color = '#ffffff'
        this.form.header.alpha = '100'
      }
    },
    selectSel(v) {
      if (v == 0) {
        this.form.pull.selColor = '#FFDC6C'
        this.form.pull.selAlpha = '100'
      }
    },
    selectPull(v) {
      if (v == 0) {
        this.form.pull.bgColor = '#6C82AA'
        this.form.pull.bgAlpha = '100'
      }
    },
    selectListName(v) {
      if (v == 0) {
        this.form.listname.selColor = '#ffffff'
        this.form.listname.selAlpha = '100'
      }
    },
    selectproName(v) {
      if (v == 0) {
        this.form.listproname.selColor = '#ffffff'
        this.form.listproname.selAlpha = '100'
      }
    },
    selectCategroy(v) {
      if (v == 0) {
        this.form.category.bgColor = '#899FC5'
        this.form.category.bgAlpha = '100'
      }
    },
    selectSearch(v) {
      if (v == 0) {
        this.form.search.bgColor = '#0D1E41'
        this.form.search.bgAlpha = '70'
      }
    },
    selectList(v) {
      if (v == 0) {
        this.form.list.bgColor = '#000000'
        this.form.list.bgAlpha = '0'
      }
    },

    mouseenterHead(v) {
      v.target.style.background = 'rgba(255,255,255,0.16)'
    },
    mouseleaveHead(v) {
      v.target.style.background = ''
    },

    mouseenter(v) {
      let alpha = +(this.form.header.selAlpha * 2.55).toFixed(0)
      v.target.style.ba = 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 && res.newParam) {
              var param= JSON.parse(res.newParam)
              for (const key in this.form) {
                if(param[key]){
                  this.form[key] = param[key]
                }
              }
            }
            this.anchorPageVersion = (res && res.anchorPageVersion) || 'v2'
            this.useThisVersion = this.anchorPageVersion === 'v2'
          })
    },

    onUseThisVersion () {
      if (this.useThisVersion || this.versionSwitchLoading) return
      this.versionSwitchLoading = true
      updateAnchorPageVersion({ anchorPageVersion: 'v2' })
        .then(() => {
          this.anchorPageVersion = 'v2'
          this.useThisVersion = true
          this.$message.success('已启用 V2 配置')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.versionSwitchLoading = false
        })
    },

    submit() {
      if (this.form.rangeSize < 750) {
        this.$message.warning({ message: '尺寸必须大于750' })
        return
      }
      if (this.form.rangeSize > 1200) {
        this.$message.warning({ message: '尺寸必须小于1200' })
        return
      }
      renewUpdate({
        newParam: JSON.stringify(this.form),
        anchorPageVersion: this.anchorPageVersion
      })
          .then(res => {
            this.$message.success({ message: '保存成功' })
          })
    },
  },
  components: { UploadAvatarImage },
  data() {
    return {
      isUploading: false,
      useThisVersion: false,
      versionSwitchLoading: false,
      anchorPageVersion: 'v2',
      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' },
@@ -474,6 +747,38 @@
        { 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: '其他' },
      ],
      productList: [
        { img: require('@/assets/images/product/1a.png'), name: '卡萨帝' },
        { img: require('@/assets/images/product/2a.png'), name: '大海豹' },
        { img: require('@/assets/images/product/3a.png'), name: '小白桃' },
        { img: require('@/assets/images/product/4a.png'), name: '白珍珠' },
        { img: require('@/assets/images/product/5a.png'), name: '东芝58' },
        { img: require('@/assets/images/product/6a.png'), name: '东芝59' },
        { img: require('@/assets/images/product/7a.png'), name: '松下50' },
        { img: require('@/assets/images/product/8a.png'), name: '美的55' },
        { img: require('@/assets/images/product/9a.png'), name: '海尔57' },
        { img: require('@/assets/images/product/10a.png'), name: '美的46' },
        { img: require('@/assets/images/product/1a.png'), name: '卡萨帝' },
        { img: require('@/assets/images/product/2a.png'), name: '大海豹' },
        { img: require('@/assets/images/product/3a.png'), name: '小白桃' },
        { img: require('@/assets/images/product/4a.png'), name: '白珍珠' },
        { img: require('@/assets/images/product/5a.png'), name: '东芝58' },
        { img: require('@/assets/images/product/6a.png'), name: '东芝59' },
        { img: require('@/assets/images/product/7a.png'), name: '松下50' },
        { img: require('@/assets/images/product/8a.png'), name: '美的55' },
        { img: require('@/assets/images/product/9a.png'), name: '海尔57' },
        { img: require('@/assets/images/product/10a.png'), name: '美的46' },
        { img: require('@/assets/images/product/1a.png'), name: '卡萨帝' },
        { img: require('@/assets/images/product/2a.png'), name: '大海豹' },
        { img: require('@/assets/images/product/3a.png'), name: '小白桃' },
        { img: require('@/assets/images/product/4a.png'), name: '白珍珠' },
        { img: require('@/assets/images/product/5a.png'), name: '东芝58' },
        { img: require('@/assets/images/product/6a.png'), name: '东芝59' },
        { img: require('@/assets/images/product/7a.png'), name: '松下50' },
        { img: require('@/assets/images/product/8a.png'), name: '美的55' },
        { img: require('@/assets/images/product/9a.png'), name: '海尔57' },
        { img: require('@/assets/images/product/10a.png'), name: '美的46' },
      ],
      action: process.env.VUE_APP_API_PREFIX + '/public/upload',
      defaultBanner: require('@/assets/images/banner_defult.png'),
@@ -519,13 +824,12 @@
      },

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

        bgImg: {
          isShow: 0,  // 0隐藏 1显示
          type: 0,
@@ -544,9 +848,9 @@
        },
        header: {
          backgroundType: 0,
          bgColor: '#f7f7f7',
          bgColor: '#0D1E41',
          bgAlpha: '100',
          bgColor2: '#f7f7f7',
          bgColor2: '#0D1E41',
          bgAlpha2: '100',
          type: 0,
          color: '#ffffff',
@@ -555,26 +859,41 @@
        },
        pull: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgColor: '#6C82AA',
          bgAlpha: '100',
          selType: 0,
          selColor: '#ff0000',
          selColor: '#FFDC6C',
          selAlpha: '100'
        },
        selType:0,
        listname: {
          fontType: 0,
          fontSize: '16',
          selType: '0',
          selColor: '#ffffff',
          selAlpha: '100'
        },
        listproname: {
          fontType: 0,
          fontSize: '16',
          selType: 0,
          selColor: '#ffffff',
          selAlpha: '100'
        },
        search: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
          bgColor: '#0D1E41',
          bgAlpha: '70',
        },
        category: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgColor: '#899FC5',
          bgAlpha: '100',
        },
        list: {
          bgType: 0,
          bgColor: '#f7f7f7',
          bgAlpha: '100',
          bgColor: '#000000',
          bgAlpha: '0',
        }
      }
    }
@@ -602,198 +921,57 @@
        // 渐变
        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)
        let start = this.form.header.bgColor + (alpha==0?"00":alpha.toString(16))
        let end = this.form.header.bgColor2 + (alpha2==0?"00":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)
        headerStyle.background = this.form.header.bgColor + (alpha==0?"00":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)
      let background = this.form.list.bgColor + (alpha==0?"00":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)
      let background = this.form.pull.bgColor + (alpha==0?"00":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);
      selStyle.color = this.form.pull.selColor + (alpha==0?"00":alpha.toString(16))
      return selStyle
    },
    selListNameStyle() {
      let alpha = +(this.form.listname.selAlpha * 2.55).toFixed(0)
      let color = this.form.listname.selColor + (alpha==0?"00":alpha.toString(16))
      let selListNameStyle = {color: color,'font-size':(this.form.listname.fontSize || '16')+'px'}
      return selListNameStyle
    },
    selProNameStyle() {
      let alpha = +(this.form.listproname.selAlpha * 2.55).toFixed(0)
      let color = this.form.listproname.selColor + (alpha==0?"00":alpha.toString(16))
      let selProNameStyle = {color: color,'font-size':(this.form.listproname.fontSize || '16')+'px'}
      return selProNameStyle
    },
    searchStyle() {
      let alpha = +(this.form.search.bgAlpha * 2.55).toFixed(0)
      let background = this.form.search.bgColor + alpha.toString(16)
      let background = this.form.search.bgColor + (alpha==0?"00":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)
      let background = this.form.category.bgColor + (alpha==0?"00":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'
      }
    },
    selectSel(v) {
      if (v == 0) {
        this.form.pull.selColor = '#f7f7f7'
        this.form.pull.selAlpha = '100'
      }
    },
    selectPull(v) {
      if (v == 0) {
        this.form.pull.bgColor = '#f7f7f7'
        this.form.pull.bgAlpha = '100'
      }
    },
    selectCategroy(v) {
      if (v == 0) {
        this.form.category.bgColor = '#f7f7f7'
        this.form.category.bgAlpha = '100'
      }
    },
    selectSearch(v) {
      if (v == 0) {
        this.form.search.bgColor = '#f7f7f7'
        this.form.search.bgAlpha = '100'
      }
    },
    selectList(v) {
      if (v == 0) {
        this.form.list.bgColor = '#f7f7f7'
        this.form.list.bgAlpha = '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: '保存成功' })
        })
    },
  }
}
/**
@@ -811,7 +989,7 @@

  .prediv {
    width: 400px;
    height: 1000px;
    height: 1200px;
    position: relative;
    overflow: hidden;
    margin-right: 10px;
@@ -841,9 +1019,9 @@

      .content {

        // background-image: url('../../assets/images/background_defult.png');
        // background-image: url('../../assets/images/background_defult.png') !important;
        background-position: center;
        background-size: 100% 100%;
        background-size: cover;
        height: 1600px;
        width: 750px;
        transform: scale(0.5) translate(-50%, -50%);
@@ -874,7 +1052,6 @@
            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%;
@@ -885,27 +1062,18 @@
              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;
@@ -915,18 +1083,15 @@
                  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;
@@ -944,7 +1109,6 @@
                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;
@@ -953,13 +1117,11 @@
                  cursor: pointer;
                  padding: 0 10px;
                  box-sizing: border-box;

                  &:hover {
                    text {
                      color: #FFF200;
                    }
                  }

                  text {
                    width: 100%;
                    text-align: center;
@@ -973,14 +1135,12 @@
                  }
                }
              }

              text {
                font-size: 16px;
                font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                font-weight: 400;
                color: #FFFFFF;
              }

              image {
                transition: .3s;
                width: 14px;
@@ -991,20 +1151,17 @@
              }
            }
          }

          .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;
@@ -1017,7 +1174,6 @@
                  height: 100%;
                }
              }

              .productPage_pk_shop_sp1 {
                width: 184px;
                height: 200px;
@@ -1091,12 +1247,12 @@
            flex-wrap: wrap;

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

            .productPage_shop_item {
              width: 168px;
              width: 15%;
              // height: 204px;
              margin-bottom: 12px;
              cursor: pointer;
@@ -1122,8 +1278,8 @@
              }

              .productPage_shop_item_img {
                width: 136px;
                height: 136px;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
@@ -1373,8 +1529,132 @@

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

  }

  .pz_head--with-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .version-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #409eff;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    vertical-align: middle;
  }

  .version-switch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background: linear-gradient(135deg, #ecf5ff 0%, #f5faff 100%);
    box-shadow: 0 4px 14px rgba(64, 158, 255, 0.22);
    transition: all 0.25s ease;
    cursor: default;

    &--active {
      border-color: #409eff;
      background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
      box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);

      .version-switch__icon {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
      }

      .version-switch__label {
        color: #fff;
      }

      .version-switch__status {
        color: rgba(255, 255, 255, 0.88);
      }
    }

    &__icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(64, 158, 255, 0.15);
      color: #409eff;
      font-size: 20px;
    }

    &__body {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    &__label {
      font-size: 15px;
      font-weight: 700;
      color: #409eff;
      white-space: nowrap;
      line-height: 1.3;
    }

    &__status {
      font-size: 12px;
      color: #909399;
      white-space: nowrap;
      line-height: 1.3;
    }

    &__badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: rgba(255, 255, 255, 0.25);
      white-space: nowrap;
    }

    &__btn {
      flex-shrink: 0;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 20px;
      border: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

      &--v2 {
        background: #fff;
        color: #409eff;

        &:hover,
        &:focus {
          background: #f5faff;
          color: #409eff;
        }
      }
    }
  }

  .pz_item {
@@ -1406,7 +1686,7 @@
  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;
@@ -1814,4 +2094,65 @@
    }
  }
}
</style>

.productPage_shop {
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .productPage_shop_zw {
    width: 15%;
    height: 0;
  }
  .productPage_shop_item {
    width: 15%;
    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;
    }
  }
}
</style>