<template>
|
<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 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>
|
</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 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>
|
<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>
|
|
</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.imgurl" style="width: 100px; height: 100px" :src="form.bgImg.imgurl"
|
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="selectSel">
|
<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="selectPull">
|
<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="selectCategroy">
|
<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="selectSearch">
|
<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="selectList">
|
<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 { getByLoginNew, renewUpdate } from '@/api/business/page.js'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
|
import { upload } from '@/api/system/common'
|
export default {
|
components: { UploadAvatarImage },
|
data() {
|
return {
|
isUploading: false,
|
type: '0', // 0、主界面 1、PK效果 2、搜索效果
|
shopList: [
|
{ categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
|
{ categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
|
{ categoryImgurl: '', categoryName: '洗衣机', brandName: '海尔', ppShow: false, ppData: ['CLOMO', '海尔', '格兰仕', '三星'], name: 'EG100MATE35S', xhShow: false, xhData: ['EG100MATE35S', 'DG100MATE35S', 'FG100MATE35S'], zdPrice: '1899', price: '1899' },
|
],
|
searchData: [
|
{ name: '冰箱 海尔EG100MATE35S', price: '3' },
|
{ name: '冰箱 海尔EG100MATE35S', price: '3' },
|
{ name: '冰箱 海尔EG100MATE35S', price: '3' },
|
{ name: '冰箱 海尔EG100MATE35S', price: '3' },
|
{ name: '冰箱 海尔EG100MATE35S', price: '3' },
|
],
|
category: [
|
{ img: require('@/assets/images/category/ic_bingxiang@2x.png'), name: '冰箱' },
|
{ img: require('@/assets/images/category/ic_xiyiji @2x.png'), name: '洗衣机' },
|
{ img: require('@/assets/images/category/ic_kongtiao@2x.png'), name: '空调' },
|
{ img: require('@/assets/images/category/ic_dianshi@2x.png'), name: '电视' },
|
{ img: require('@/assets/images/category/ic_reshuiqi@2x.png'), name: '热水器' },
|
{ img: require('@/assets/images/category/ic_yanzao@2x.png'), name: '烟灶' },
|
{ img: require('@/assets/images/category/ic_kaoxiang@2x.png'), name: '蒸烤箱' },
|
{ img: require('@/assets/images/category/ic_xiwanji@2x.png'), name: '洗碗机' },
|
{ img: require('@/assets/images/category/ic_jinshui@2x.png'), name: '净水器' },
|
{ img: require('@/assets/images/category/ic_qita@2x.png'), name: '其他' },
|
],
|
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
defaultBanner: require('@/assets/images/banner_defult.png'),
|
leftShop: {
|
name: '三星323洗烘',
|
zdPrice: '3999',
|
price: '3499',
|
param1: [
|
{ name: '品牌', val: '三星'},
|
{ name: '型号', val: 'G100818bg'},
|
{ name: '使用方式', val: '全自动'},
|
{ name: '洗涤公斤量', val: '10kg'},
|
{ name: '用水量', val: '65L'},
|
{ name: '最高转速', val: '1200转/分钟'},
|
{ name: '深度', val: '600mm'},
|
{ name: '高度', val: '845mm'},
|
{ name: '保修期', val: '36个月'},
|
],
|
param2: [
|
{ name: '紫外线杀菌', val: '是'},
|
{ name: '排水方式', val: '上排水'},
|
]
|
},
|
rightShop: {
|
name: '格兰仕434洗烘',
|
zdPrice: '2999',
|
price: '2499',
|
param1: [
|
{ name: '品牌', val: '格兰仕'},
|
{ name: '型号', val: 'G100818bg'},
|
{ name: '使用方式', val: '全自动'},
|
{ name: '洗涤公斤量', val: '10kg'},
|
{ name: '用水量', val: '65L'},
|
{ name: '最高转速', val: '1200转/分钟'},
|
{ name: '深度', val: '600mm'},
|
{ name: '高度', val: '845mm'},
|
{ name: '保修期', val: '36个月'},
|
],
|
param2: [
|
{ name: '显示屏类型', val: '触摸屏'},
|
{ name: '附加功能', val: '自动断电'},
|
]
|
},
|
|
form: {
|
rangeSize: '',
|
main: {
|
bgType: 0, //0默认 1自定义
|
bgColor: '#f7f7f7',
|
alpha: '100'
|
},
|
|
bgImg: {
|
isShow: 0, // 0隐藏 1显示
|
type: 0,
|
img: '',
|
imgurl: ''
|
},
|
topImg: {
|
type: 0,
|
img: '',
|
imgurl: ''
|
},
|
pkImg: {
|
type: 0,
|
img: '',
|
imgurl: ''
|
},
|
header: {
|
backgroundType: 0,
|
bgColor: '#f7f7f7',
|
bgAlpha: '100',
|
bgColor2: '#f7f7f7',
|
bgAlpha2: '100',
|
type: 0,
|
color: '#ffffff',
|
alpha: '100',
|
|
},
|
pull: {
|
bgType: 0,
|
bgColor: '#f7f7f7',
|
bgAlpha: '100',
|
selType: 0,
|
selColor: '#ff0000',
|
selAlpha: '100'
|
},
|
search: {
|
bgType: 0,
|
bgColor: '#f7f7f7',
|
bgAlpha: '100',
|
},
|
category: {
|
bgType: 0,
|
bgColor: '#f7f7f7',
|
bgAlpha: '100',
|
},
|
list: {
|
bgType: 0,
|
bgColor: '#f7f7f7',
|
bgAlpha: '100',
|
}
|
}
|
}
|
},
|
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'
|
}
|
},
|
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: '保存成功' })
|
})
|
},
|
}
|
}
|
/**
|
*
|
*/
|
</script>
|
|
<style lang="scss" scoped>
|
.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;
|
}
|
|
.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;
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.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>
|
