From 930c326fe4ba4831ea0923b5846a89d7964a4068 Mon Sep 17 00:00:00 2001
From: Mr.Zhang <710666463@qq.com>
Date: 星期三, 18 十月 2023 16:08:08 +0800
Subject: [PATCH] 企业端
---
company_admin/src/views/business/pageConfiguration.vue | 1938 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 1,758 insertions(+), 180 deletions(-)
diff --git a/company_admin/src/views/business/pageConfiguration.vue b/company_admin/src/views/business/pageConfiguration.vue
index 9320c01..62a851f 100644
--- a/company_admin/src/views/business/pageConfiguration.vue
+++ b/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銆丳K鏁堟灉 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>
\ No newline at end of file
--
Gitblit v1.9.3