From dcdb0231034810232f2542f3865666ebf72daf11 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 30 四月 2025 16:45:34 +0800
Subject: [PATCH] sf
---
company_admin/src/views/business/pageConfiguration.vue | 696 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 457 insertions(+), 239 deletions(-)
diff --git a/company_admin/src/views/business/pageConfiguration.vue b/company_admin/src/views/business/pageConfiguration.vue
index 62a851f..73d2ffa 100644
--- a/company_admin/src/views/business/pageConfiguration.vue
+++ b/company_admin/src/views/business/pageConfiguration.vue
@@ -7,20 +7,21 @@
<el-tab-pane label="涓荤晫闈�" name="0"></el-tab-pane>
<el-tab-pane label="PK鏁堟灉" name="1"></el-tab-pane>
<el-tab-pane label="鎼滅储鏁堟灉" name="2"></el-tab-pane>
+ <el-tab-pane label="鍟嗗搧鍒楄〃" name="3"></el-tab-pane>
</el-tabs>
</div>
-
<div class="prediv-content">
<div class="content" :style="contentStyle">
<img :src="form.topImg.type ? form.topImg.imgurl : defaultBanner" alt="">
- <template v-if="type != 1">
+ <template v-if="type != 1 && type !=3">
<div>
<div class="commodityFrom_head" :style="tableHeaderStyle">
- <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">绫诲埆</div>
- <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">鍝佺墝</div>
- <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">鍨嬪彿</div>
- <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">鎸囧浠�</div>
- <div class="commodityFrom_head_item" @mouseenter="mouseenter" @mouseleave="mouseleave">鍏ユ墜浠�</div>
+ <!-- @mouseenter="mouseenter" @mouseleave="mouseleave" -->
+ <div class="commodityFrom_head_item" >绫诲埆</div>
+ <div class="commodityFrom_head_item" >鍝佺墝</div>
+ <div class="commodityFrom_head_item" >鍨嬪彿</div>
+ <div class="commodityFrom_head_item" >鎸囧浠�</div>
+ <div class="commodityFrom_head_item" >鍏ユ墜浠�</div>
</div>
<div class="commodityFrom_body" :style="tableBodyStyle">
<div class="commodityFrom_body_content">
@@ -69,10 +70,10 @@
</div>
<div class="commodityFrom_body_total">
<div class="commodityFrom_body_total_item" :style="tableHeaderStyle">鎬昏锛�</div>
- <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">
+ <div class="commodityFrom_body_total_item" :style="{...tableHeaderStyle, ...selStyle}">
18999
</div>
- <div class="commodityFrom_body_total_item" :style="tableHeaderStyle">
+ <div class="commodityFrom_body_total_item" :style="{...tableHeaderStyle, ...selStyle}">
898999
</div>
</div>
@@ -81,9 +82,9 @@
<div class="productCategory">
<div class="productCategory_list" :style="categoryStyle">
<div class="productCategory_list_item" v-for="(item, index) in category" :key="index"
- @click="clickItem(index, item.id, item.name)">
+ @click1="clickItem(index, item.id, item.name)">
<img :src="item.img" mode="widthFix" />
- <span>{{ item.name }}</span>
+ <span :style="{...selListNameStyle}">{{ item.name }}</span>
</div>
<div class="productCategory_list_zw"></div>
<div class="productCategory_list_zw"></div>
@@ -93,9 +94,9 @@
</div>
</div>
</template>
- <div class="productPage" v-if="type == 1">
- <div class="productPage_head">
- <div class="productPage_head_item">
+ <div class="productPage" v-if="type == 1 || type ==3">
+ <div class="productPage_head" :style="tableHeaderStyle">
+ <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
<span>灞炴��1</span>
<img src="@/assets/images/ar_open@2x.png" mode="widthFix">
<!-- <div class="productPage_xl" v-if="attrFirstList.length > 0">
@@ -105,7 +106,7 @@
</div>
</div> -->
</div>
- <div class="productPage_head_item">
+ <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
<span>灞炴��2</span>
<img src="@/assets/images/ar_open@2x.png" mode="widthFix">
<!-- <div class="productPage_xl" v-if="attrSecondList.length > 0">
@@ -115,7 +116,7 @@
</div>
</div> -->
</div>
- <div class="productPage_head_item">
+ <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
<span>棰勭畻</span>
<img src="@/assets/images/ar_open@2x.png" mode="widthFix">
<!-- <div class="productPage_xl" v-if="budgetList.length > 0">
@@ -130,7 +131,7 @@
</div>
</div> -->
</div>
- <div class="productPage_head_item">
+ <div class="productPage_head_item" @mouseenter="mouseenterHead" @mouseleave="mouseleaveHead">
<span>鍝佺墝</span>
<img src="@/assets/images/ar_open@2x.png" mode="widthFix">
<!-- <div class="productPage_xl" v-if="brandData1.length > 0">
@@ -141,72 +142,86 @@
</div> -->
</div>
</div>
- <div class="productPage_pk">
- <div class="productPage_pk_shop">
+ <template v-if="type ==1">
+ <div class="productPage_pk" >
+ <div class="productPage_pk_shop">
- <div class="productPage_pk_shop_sp1">
- <div class="productPage_pk_shop_sp1_img">
- <img src="@/assets/images/Samsung@2x.png" mode="widthFix">
+ <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle">
+ <div class="productPage_pk_shop_sp1_img">
+ <img src="@/assets/images/Samsung@2x.png" mode="widthFix">
+ </div>
+ <span>涓夋槦323娲楃儤</span>
</div>
- <span>涓夋槦323娲楃儤</span>
+ <div class="productPage_pk_shop_t">
+ <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt="">
+ <img v-else :src="form.pkImg.imgurl" alt="">
+ </div>
</div>
- <div class="productPage_pk_shop_t">
- <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt="">
- <img v-else :src="form.pkImg.imgurl" alt="">
+ <div class="productPage_pk_z">
+ <img src="@/assets/images/ic_pk@2x.png" mode="widthFix">
</div>
- </div>
- <div class="productPage_pk_z">
- <img src="@/assets/images/ic_pk@2x.png" mode="widthFix">
- </div>
- <div class="productPage_pk_shop">
+ <div class="productPage_pk_shop" >
- <div class="productPage_pk_shop_sp1">
- <div class="productPage_pk_shop_sp1_img">
- <img src="@/assets/images/Galanz@2x.png" mode="widthFix">
+ <div class="productPage_pk_shop_sp1" :style="tableHeaderStyle">
+ <div class="productPage_pk_shop_sp1_img">
+ <img src="@/assets/images/Galanz@2x.png" mode="widthFix">
+ </div>
+ <span>鏍煎叞浠�434娲楃儤</span>
</div>
- <span>鏍煎叞浠�434娲楃儤</span>
- </div>
- <div class="productPage_pk_shop_t">
- <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt="">
- <img v-else :src="form.pkImg.imgurl" alt="">
+ <div class="productPage_pk_shop_t">
+ <img v-if="form.pkImg.type==0" src="@/assets/images/pk_defult.png" alt="">
+ <img v-else :src="form.pkImg.imgurl" alt="">
+ </div>
</div>
</div>
- </div>
- <div class="productPage_parameter">
- <div class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
- <div class="productPage_parameter_item_head">
- <span>{{item.name}}</span>
- </div>
- <div class="productPage_parameter_item_content">
- <div class="productPage_parameter_item_content_price">
- <div class="zdj">
- <span>鎸囧浠凤細</span>
- <span>楼{{item.zdPrice}}</span>
- </div>
- <div class="rsj">
- <span>寤鸿鍏ユ墜浠凤細</span>
- <span>楼{{item.price}}</span>
- </div>
- </div>
- <div class="productPage_parameter_item_content_nr">
- <div class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index">
- <div class="label">{{child.name}}锛�</div>
- <div class="value">{{child.val}}</div>
- </div>
- <div v-if="item.param2.length>0" class="paramline"></div>
- <div class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index">
- <div class="label">{{child.name}}锛�</div>
- <div class="value">{{child.val}}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="productPage_parameter">
+ <div class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
+ <div class="productPage_parameter_item_head" :style="tableHeaderStyle">
+ <span>{{item.name}}</span>
+ </div>
+ <div class="productPage_parameter_item_content" :style="tableBodyStyle">
+ <div class="productPage_parameter_item_content_price">
+ <div class="zdj">
+ <span>鎸囧浠凤細</span>
+ <span>楼{{item.zdPrice}}</span>
+ </div>
+ <div class="rsj">
+ <span>寤鸿鍏ユ墜浠凤細</span>
+ <span>楼{{item.price}}</span>
+ </div>
+ </div>
+ <div class="productPage_parameter_item_content_nr">
+ <div class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index">
+ <div class="label">{{child.name}}锛�</div>
+ <div class="value">{{child.val}}</div>
+ </div>
+ <div v-if="item.param2.length>0" class="paramline"></div>
+ <div class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index">
+ <div class="label">{{child.name}}锛�</div>
+ <div class="value">{{child.val}}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ <template v-if="type==3">
+ <div class="productPage_shop" >
+ <div class="productPage_shop_item" v-for="(item, index) in productList" :style="{...selectList}" :key="index" >
+ <div class="productPage_shop_item_img">
+ <img :src="item.img" mode="widthFix"/>
+ </div>
+ <span :style="{...selProNameStyle}">{{item.name}}</span>
+ </div>
+ <div class="productPage_shop_zw"></div>
+ <div class="productPage_shop_zw"></div>
+ <div class="productPage_shop_zw"></div>
+ </div>
+ </template>
</div>
-
</div>
</div>
- <div class="search" v-if="type == 2">
+ <div class="search" v-if="type == 2 ">
<div class="search_box">
<div class="search_box_item" :style="searchStyle">
<div class="icon">
@@ -265,15 +280,15 @@
</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"
+ <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;" />
+ style="color: #999; font-size: 13px; line-height: 18px;">寤鸿灏哄锛�1920px*1080px锛屽叾涓富瑕佸睍绀哄尯鍩熼珮搴︿负1080px锛屽ぇ灏忎笉瓒呰繃1M</span>
+ <input type="file" accept="image/*" @change="upbgImgUrl" ref="upBackground" style="display: none;" />
</div>
</div>
</div>
@@ -298,7 +313,7 @@
<div class="upload">
<div><el-button icon="el-icon-plus" @click="$refs.upTop.click()">涓婁紶鍥剧墖</el-button></div>
<span style="color: #999; font-size: 13px; line-height: 18px;">寤鸿灏哄700px*300px锛屽ぇ灏忎笉瓒呰繃1M</span>
- <input type="file" @change="upTopImgUrl" ref="upTop" style="display: none;" />
+ <input type="file" accept="image/*" @change="upTopImgUrl" ref="upTop" style="display: none;" />
</div>
</div>
</el-form-item>
@@ -322,7 +337,7 @@
<div class="upload">
<div><el-button icon="el-icon-plus" @click="$refs.upPk.click()">涓婁紶鍥剧墖</el-button></div>
<span style="color: #999; font-size: 13px; line-height: 18px;">鍙兘涓婁紶鍥剧墖鏍煎紡锛屽缓璁昂瀵�254*76px</span>
- <input type="file" @change="upPkImgUrl" ref="upPk" style="display: none;" />
+ <input type="file" accept="image/*" @change="upPkImgUrl" ref="upPk" style="display: none;" />
</div>
</div>
</el-form-item>
@@ -365,7 +380,7 @@
</el-form-item>
<el-form-item label="閫変腑瀛椾綋棰滆壊">
<div class="color-select-item">
- <el-radio-group v-model="form.pull.selType" @change="selectHeader">
+ <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>
@@ -378,7 +393,7 @@
</el-form-item>
<el-form-item label="涓嬫媺妗嗚儗鏅鑹�">
<div class="color-select-item">
- <el-radio-group v-model="form.pull.bgType" @change="selectHeader">
+ <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>
@@ -391,7 +406,7 @@
</el-form-item>
<el-form-item label="鍒嗙被鑳屾櫙棰滆壊">
<div class="color-select-item">
- <el-radio-group v-model="form.category.bgType" @change="selectHeader">
+ <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>
@@ -404,7 +419,7 @@
</el-form-item>
<el-form-item label="鎼滅储妗嗚儗鏅鑹�">
<div class="color-select-item">
- <el-radio-group v-model="form.search.bgType" @change="selectHeader">
+ <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>
@@ -417,7 +432,7 @@
</el-form-item>
<el-form-item label="鍒楄〃鑳屾櫙棰滆壊">
<div class="color-select-item">
- <el-radio-group v-model="form.list.bgType" @change="selectHeader">
+ <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>
@@ -428,10 +443,46 @@
</template>
</div>
</el-form-item>
+ <el-form-item label="鍝佺被鍒楄〃瀛椾綋">
+ <div class="color-select-item">
+ 棰滆壊 <el-radio-group v-model="form.listname.selType" @change="selectListName" style="margin-left: 15px">
+ <el-radio :label="0">榛樿</el-radio>
+ <el-radio :label="1">鑷畾涔�</el-radio>
+ </el-radio-group>
+ <template v-if="form.listname.selType == 1">
+ <el-color-picker v-model="form.listname.selColor" size="mini" style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
+ 涓嶉�忔槑搴� <el-input v-model="form.listname.selAlpha" type="number" style="width: 100px;"></el-input> %
+ </template>
+ </div>
+ <div >
+ <div class="color-select-item" style="margin-top: 10px">
+ 澶у皬<el-input v-model="form.listname.fontSize" type="number" style="width: 80px;margin-left: 15px"></el-input> px (榛樿16px)
+ </div>
+ </div>
+ </el-form-item>
+ <el-form-item label="鍟嗗搧鍒楄〃瀛椾綋">
+ <div class="color-select-item">
+ 棰滆壊 <el-radio-group v-model="form.listproname.selType" @change="selectproName" style="margin-left: 15px">
+ <el-radio :label="0">榛樿</el-radio>
+ <el-radio :label="1">鑷畾涔�</el-radio>
+ </el-radio-group>
+ <template v-if="form.listproname.selType == 1">
+ <el-color-picker v-model="form.listproname.selColor" size="mini" style="margin-right: 10px; margin-left: 10px;"></el-color-picker>
+ 涓嶉�忔槑搴� <el-input v-model="form.listproname.selAlpha" type="number" style="width: 100px;"></el-input> %
+ </template>
+ </div>
+ <div >
+ <div class="color-select-item" style="margin-top: 10px">
+ 澶у皬<el-input v-model="form.listproname.fontSize" type="number" style="width: 80px;margin-left: 15px"></el-input> px (榛樿16px)
+ </div>
+ </div>
+ </el-form-item>
</el-form>
<div class="pz_footer">
<el-button type="primary" @click="submit">淇濆瓨</el-button>
</div>
+
+
</div>
@@ -440,12 +491,185 @@
</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 {
+ methods: {
+ selectBackground(v) {
+ if (v == 0) {
+ this.form.main.bgColor = '#f7f7f7'
+ this.form.main.alpha = '100'
+ }
+
+ },
+ // 涓婁紶鑳屾櫙鍥剧墖
+ upbgImgUrl(file) {
+ // console.log(file);
+ const formdate = new FormData()
+ this.isUploading = true
+ formdate.append('file', file.target.files[0])
+ formdate.append('folder', 'web_param')
+ upload(formdate)
+ .then(res => {
+ this.form.bgImg.img = res.imgaddr
+ this.form.bgImg.imgurl = res.url
+ })
+ .catch(e => {
+ this.$message.error(e)
+ })
+ .finally(() => this.isUploading = false)
+ this.$refs.upBackground.value = null
+ },
+ // 涓婁紶椤堕儴鍥剧墖
+ upTopImgUrl(file) {
+ const formdate = new FormData()
+ this.isUploading = true
+ formdate.append('file', file.target.files[0])
+ formdate.append('folder', 'web_param')
+ upload(formdate)
+ .then(res => {
+ this.form.topImg.img = res.imgaddr
+ this.form.topImg.imgurl = res.url
+ })
+ .catch(e => {
+ this.$message.error(e)
+ })
+ .finally(() => this.isUploading = false)
+ this.$refs.upTop.value = null
+ },
+
+ // 涓婁紶pk澶浘鐗�
+ upPkImgUrl(file) {
+ const formdate = new FormData()
+ this.isUploading = true
+ formdate.append('file', file.target.files[0])
+ formdate.append('folder', 'web_param')
+ upload(formdate)
+ .then(res => {
+ this.form.pkImg.img = res.imgaddr
+ this.form.pkImg.imgurl = res.url
+ })
+ .catch(e => {
+ this.$message.error(e)
+ })
+ .finally(() => this.isUploading = false)
+ this.$refs.upPk.value = null
+ },
+ selectHeaderBg(v) {
+ if (v == 0) {
+ this.form.header.bgColor = '#0D1E41'
+ this.form.header.bgAlpha = '100'
+ } else if (v == 2) {
+ this.form.header.bgColor2 = '#0D1E41'
+ this.form.header.bgAlpha2 = '100'
+ }
+ },
+ selectHeader(v) {
+ if (v == 0) {
+ this.form.header.color = '#ffffff'
+ this.form.header.alpha = '100'
+ }
+ },
+ selectSel(v) {
+ if (v == 0) {
+ this.form.pull.selColor = '#FFDC6C'
+ this.form.pull.selAlpha = '100'
+ }
+ },
+ selectPull(v) {
+ if (v == 0) {
+ this.form.pull.bgColor = '#6C82AA'
+ this.form.pull.bgAlpha = '100'
+ }
+ },
+ selectListName(v) {
+ if (v == 0) {
+ this.form.listname.selColor = '#ffffff'
+ this.form.listname.selAlpha = '100'
+ }
+ },
+ selectproName(v) {
+ if (v == 0) {
+ this.form.listproname.selColor = '#ffffff'
+ this.form.listproname.selAlpha = '100'
+ }
+ },
+ selectCategroy(v) {
+ if (v == 0) {
+ this.form.category.bgColor = '#899FC5'
+ this.form.category.bgAlpha = '100'
+ }
+ },
+ selectSearch(v) {
+ if (v == 0) {
+ this.form.search.bgColor = '#0D1E41'
+ this.form.search.bgAlpha = '70'
+ }
+ },
+ selectList(v) {
+ if (v == 0) {
+ this.form.list.bgColor = '#000000'
+ this.form.list.bgAlpha = '0'
+ }
+ },
+
+ mouseenterHead(v) {
+ v.target.style.background = 'rgba(255,255,255,0.16)'
+ },
+ mouseleaveHead(v) {
+ v.target.style.background = ''
+ },
+
+ mouseenter(v) {
+ let alpha = +(this.form.header.selAlpha * 2.55).toFixed(0)
+ v.target.style.ba = this.form.header.selColor + alpha.toString(16)
+ },
+ mouseleave(v) {
+ v.target.style.color = ''
+ },
+
+ clickBrand(item, child) {
+ item.brandName = child
+ item.ppShow = false
+ },
+ clickXH(item, data) {
+ item.name = data
+ item.ppShow = false
+ },
+
+ getDesc() {
+ getByLoginNew()
+ .then(res => {
+ if (res.newParam) {
+ var param= JSON.parse(res.newParam)
+ for (const key in this.form) {
+ if(param[key]){
+ this.form[key] = param[key]
+ }
+ }
+ // this.form = JSON.parse(res.newParam)
+ }
+ })
+ },
+
+ submit() {
+ if (this.form.rangeSize < 750) {
+ this.$message.warning({ message: '灏哄蹇呴』澶т簬750' })
+ return
+ }
+ if (this.form.rangeSize > 1200) {
+ this.$message.warning({ message: '灏哄蹇呴』灏忎簬1200' })
+ return
+ }
+ renewUpdate({ newParam: JSON.stringify(this.form) })
+ .then(res => {
+ this.$message.success({ message: '淇濆瓨鎴愬姛' })
+ })
+ },
+ },
components: { UploadAvatarImage },
data() {
return {
@@ -474,6 +698,38 @@
{ img: require('@/assets/images/category/ic_xiwanji@2x.png'), name: '娲楃鏈�' },
{ img: require('@/assets/images/category/ic_jinshui@2x.png'), name: '鍑�姘村櫒' },
{ img: require('@/assets/images/category/ic_qita@2x.png'), name: '鍏朵粬' },
+ ],
+ productList: [
+ { img: require('@/assets/images/product/1a.png'), name: '鍗¤惃甯�' },
+ { img: require('@/assets/images/product/2a.png'), name: '澶ф捣璞�' },
+ { img: require('@/assets/images/product/3a.png'), name: '灏忕櫧妗�' },
+ { img: require('@/assets/images/product/4a.png'), name: '鐧界弽鐝�' },
+ { img: require('@/assets/images/product/5a.png'), name: '涓滆姖58' },
+ { img: require('@/assets/images/product/6a.png'), name: '涓滆姖59' },
+ { img: require('@/assets/images/product/7a.png'), name: '鏉句笅50' },
+ { img: require('@/assets/images/product/8a.png'), name: '缇庣殑55' },
+ { img: require('@/assets/images/product/9a.png'), name: '娴峰皵57' },
+ { img: require('@/assets/images/product/10a.png'), name: '缇庣殑46' },
+ { img: require('@/assets/images/product/1a.png'), name: '鍗¤惃甯�' },
+ { img: require('@/assets/images/product/2a.png'), name: '澶ф捣璞�' },
+ { img: require('@/assets/images/product/3a.png'), name: '灏忕櫧妗�' },
+ { img: require('@/assets/images/product/4a.png'), name: '鐧界弽鐝�' },
+ { img: require('@/assets/images/product/5a.png'), name: '涓滆姖58' },
+ { img: require('@/assets/images/product/6a.png'), name: '涓滆姖59' },
+ { img: require('@/assets/images/product/7a.png'), name: '鏉句笅50' },
+ { img: require('@/assets/images/product/8a.png'), name: '缇庣殑55' },
+ { img: require('@/assets/images/product/9a.png'), name: '娴峰皵57' },
+ { img: require('@/assets/images/product/10a.png'), name: '缇庣殑46' },
+ { img: require('@/assets/images/product/1a.png'), name: '鍗¤惃甯�' },
+ { img: require('@/assets/images/product/2a.png'), name: '澶ф捣璞�' },
+ { img: require('@/assets/images/product/3a.png'), name: '灏忕櫧妗�' },
+ { img: require('@/assets/images/product/4a.png'), name: '鐧界弽鐝�' },
+ { img: require('@/assets/images/product/5a.png'), name: '涓滆姖58' },
+ { img: require('@/assets/images/product/6a.png'), name: '涓滆姖59' },
+ { img: require('@/assets/images/product/7a.png'), name: '鏉句笅50' },
+ { img: require('@/assets/images/product/8a.png'), name: '缇庣殑55' },
+ { img: require('@/assets/images/product/9a.png'), name: '娴峰皵57' },
+ { img: require('@/assets/images/product/10a.png'), name: '缇庣殑46' },
],
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
defaultBanner: require('@/assets/images/banner_defult.png'),
@@ -519,7 +775,7 @@
},
form: {
- rangeSize: '',
+ rangeSize: '750',
main: {
bgType: 0, //0榛樿 1鑷畾涔�
bgColor: '#f7f7f7',
@@ -544,9 +800,9 @@
},
header: {
backgroundType: 0,
- bgColor: '#f7f7f7',
+ bgColor: '#0D1E41',
bgAlpha: '100',
- bgColor2: '#f7f7f7',
+ bgColor2: '#0D1E41',
bgAlpha2: '100',
type: 0,
color: '#ffffff',
@@ -555,26 +811,41 @@
},
pull: {
bgType: 0,
- bgColor: '#f7f7f7',
+ bgColor: '#6C82AA',
bgAlpha: '100',
selType: 0,
- selColor: '#ff0000',
+ selColor: '#FFDC6C',
+ selAlpha: '100'
+ },
+ selType:0,
+ listname: {
+ fontType: 0,
+ fontSize: '16',
+ selType: '0',
+ selColor: '#ffffff',
+ selAlpha: '100'
+ },
+ listproname: {
+ fontType: 0,
+ fontSize: '16',
+ selType: 0,
+ selColor: '#ffffff',
selAlpha: '100'
},
search: {
bgType: 0,
- bgColor: '#f7f7f7',
- bgAlpha: '100',
+ bgColor: '#0D1E41',
+ bgAlpha: '70',
},
category: {
bgType: 0,
- bgColor: '#f7f7f7',
+ bgColor: '#899FC5',
bgAlpha: '100',
},
list: {
bgType: 0,
- bgColor: '#f7f7f7',
- bgAlpha: '100',
+ bgColor: '#000000',
+ bgAlpha: '0',
}
}
}
@@ -602,168 +873,57 @@
// 娓愬彉
let alpha = +(this.form.header.bgAlpha * 2.55).toFixed(0)
let alpha2 = +(this.form.header.bgAlpha2 * 2.55).toFixed(0)
- let start = this.form.header.bgColor + alpha.toString(16)
- let end = this.form.header.bgColor2 + alpha2.toString(16)
+ let start = this.form.header.bgColor + (alpha==0?"00":alpha.toString(16))
+ let end = this.form.header.bgColor2 + (alpha2==0?"00":alpha2.toString(16))
headerStyle.background = `linear-gradient(180deg, ${start} 0%, ${end} 100%)`
} else {
let alpha = +(this.form.header.alpha * 2.55).toFixed(0)
- headerStyle.background = this.form.header.bgColor + alpha.toString(16)
+ headerStyle.background = this.form.header.bgColor + (alpha==0?"00":alpha.toString(16))
}
- console.log(headerStyle);
return headerStyle
},
tableBodyStyle() {
let alpha = +(this.form.list.bgAlpha * 2.55).toFixed(0)
- let background = this.form.list.bgColor + alpha.toString(16)
+ let background = this.form.list.bgColor + (alpha==0?"00":alpha.toString(16))
return { background }
},
pullStyle() {
let alpha = +(this.form.pull.bgAlpha * 2.55).toFixed(0)
- let background = this.form.pull.bgColor + alpha.toString(16)
+ let background = this.form.pull.bgColor + (alpha==0?"00":alpha.toString(16))
return { background }
},
selStyle() {
let selStyle = {}
let alpha = +(this.form.pull.selAlpha * 2.55).toFixed(0)
- selStyle.color = this.form.pull.selColor + alpha.toString(16)
- console.log(selStyle);
+ selStyle.color = this.form.pull.selColor + (alpha==0?"00":alpha.toString(16))
return selStyle
+ },
+ selListNameStyle() {
+ let alpha = +(this.form.listname.selAlpha * 2.55).toFixed(0)
+ let color = this.form.listname.selColor + (alpha==0?"00":alpha.toString(16))
+ let selListNameStyle = {color: color,'font-size':(this.form.listname.fontSize || '16')+'px'}
+ return selListNameStyle
+ },
+ selProNameStyle() {
+ let alpha = +(this.form.listproname.selAlpha * 2.55).toFixed(0)
+ let color = this.form.listproname.selColor + (alpha==0?"00":alpha.toString(16))
+ let selProNameStyle = {color: color,'font-size':(this.form.listproname.fontSize || '16')+'px'}
+ return selProNameStyle
},
searchStyle() {
let alpha = +(this.form.search.bgAlpha * 2.55).toFixed(0)
- let background = this.form.search.bgColor + alpha.toString(16)
+ let background = this.form.search.bgColor + (alpha==0?"00":alpha.toString(16))
return { background }
},
+
categoryStyle() {
let alpha = +(this.form.category.bgAlpha * 2.55).toFixed(0)
- let background = this.form.category.bgColor + alpha.toString(16)
+ let background = this.form.category.bgColor + (alpha==0?"00":alpha.toString(16))
return { background }
},
},
created() {
this.getDesc()
- },
- methods: {
- selectBackground(v) {
- console.log(v);
- if (v == 0) {
- this.form.main.bgColor = '#f7f7f7'
- this.form.main.alpha = '100'
- }
- },
- // 涓婁紶鑳屾櫙鍥剧墖
- upbgImgUrl(file) {
- const formdate = new FormData()
- this.isUploading = true
- formdate.append('file', file.target.files[0])
- formdate.append('folder', 'web_param')
- upload(formdate)
- .then(res => {
- this.form.bgImg.img = res.imgaddr
- this.form.bgImg.imgurl = res.url
- })
- .catch(e => {
- this.$message.error(e)
- })
- .finally(() => this.isUploading = false)
- this.$refs.upBackground.value = null
- },
- // 涓婁紶椤堕儴鍥剧墖
- upTopImgUrl(file) {
- const formdate = new FormData()
- this.isUploading = true
- formdate.append('file', file.target.files[0])
- formdate.append('folder', 'web_param')
- upload(formdate)
- .then(res => {
- this.form.topImg.img = res.imgaddr
- this.form.topImg.imgurl = res.url
- })
- .catch(e => {
- this.$message.error(e)
- })
- .finally(() => this.isUploading = false)
- this.$refs.upTop.value = null
- },
-
- // 涓婁紶pk澶浘鐗�
- upPkImgUrl(file) {
- const formdate = new FormData()
- this.isUploading = true
- formdate.append('file', file.target.files[0])
- formdate.append('folder', 'web_param')
- upload(formdate)
- .then(res => {
- this.form.pkImg.img = res.imgaddr
- this.form.pkImg.imgurl = res.url
- })
- .catch(e => {
- this.$message.error(e)
- })
- .finally(() => this.isUploading = false)
- this.$refs.upPk.value = null
- },
- selectHeaderBg(v) {
- if (v == 0) {
- this.form.header.bgColor = '#f7f7f7'
- this.form.header.bgAlpha = '100'
- } else if (v == 1) {
- this.form.header.bgColor = '#f7f7f7'
- this.form.header.bgAlpha = '100'
- } else {
- this.form.header.bgColor = '#f7f7f7'
- this.form.header.bgAlpha = '100'
- this.form.header.bgColor2 = '#f7f7f7'
- this.form.header.bgAlpha2 = '100'
- }
- },
- selectHeader(v) {
- if (v == 0) {
- this.form.header.color = '#f7f7f7'
- this.form.header.alpha = '100'
- }
- },
-
- 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: '淇濆瓨鎴愬姛' })
- })
- },
}
}
/**
@@ -781,7 +941,7 @@
.prediv {
width: 400px;
- height: 1000px;
+ height: 1200px;
position: relative;
overflow: hidden;
margin-right: 10px;
@@ -811,9 +971,9 @@
.content {
- // background-image: url('../../assets/images/background_defult.png');
+ // background-image: url('../../assets/images/background_defult.png') !important;
background-position: center;
- background-size: 100% 100%;
+ background-size: cover;
height: 1600px;
width: 750px;
transform: scale(0.5) translate(-50%, -50%);
@@ -861,10 +1021,6 @@
margin-left: 3px;
}
- &:hover {
- border-radius: 8px 8px 0px 0px;
- background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
- }
&:hover img {
transform: rotate(180deg);
@@ -1061,12 +1217,12 @@
flex-wrap: wrap;
.productPage_shop_zw {
- width: 168px;
+ width: 15%;
height: 0;
}
.productPage_shop_item {
- width: 168px;
+ width: 15%;
// height: 204px;
margin-bottom: 12px;
cursor: pointer;
@@ -1092,8 +1248,8 @@
}
.productPage_shop_item_img {
- width: 136px;
- height: 136px;
+ width: 50px;
+ height: 50px;
display: flex;
align-items: center;
justify-content: center;
@@ -1343,8 +1499,9 @@
.pz_head {
font-size: 20px;
- margin-bottom: 16px0px;
+ margin-bottom: 16px;
font-weight: bold;
+
}
.pz_item {
@@ -1376,7 +1533,7 @@
height: 45px;
padding: 10px 8px;
box-sizing: border-box;
- //
+ //
// background: rgba(0, 224, 255, 0.24) linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.21) 100%);
display: flex;
align-items: center;
@@ -1784,4 +1941,65 @@
}
}
}
-</style>
\ No newline at end of file
+
+.productPage_shop {
+ width: 100%;
+ margin-top: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ .productPage_shop_zw {
+ width: 15%;
+ height: 0;
+ }
+ .productPage_shop_item {
+ width: 15%;
+ margin-bottom: 12px;
+ cursor: pointer;
+ background: rgba(0,224,255,0.18);
+ border-radius: 8px;
+ display: flex;
+ transition: .5s;
+ padding: 15px;
+ box-sizing: border-box;
+ flex-direction: column;
+ align-items: center;
+ box-sizing: border-box;
+ white-space: pre-wrap;
+ word-break: break-all;
+ text-align: center;
+ &:hover {
+ background: linear-gradient(180deg, rgba(0,224,255,0.3) 0%, rgba(255,255,255,0.41) 100%);
+ border-radius: 8px;
+ border: 2px solid #FFFFFF;
+ box-sizing: border-box;
+ }
+ .productPage_shop_item_img {
+ width: 136px;
+ height: 136px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ image {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ text {
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ font-size: 16px;
+ font-family: SourceHanSansSC-Normal, SourceHanSansSC;
+ font-weight: 400;
+ color: #FFFFFF;
+ margin-top: 12px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3