From 901a7fd1c678c4dde1481d86f8166380a5ecd834 Mon Sep 17 00:00:00 2001
From: Mr.Zhang <710666463@qq.com>
Date: 星期六, 28 十月 2023 18:13:37 +0800
Subject: [PATCH] 版本2
---
company_admin/src/views/business/pageConfiguration.vue | 141 +++++++++++++++++++++++-----------------------
1 files changed, 71 insertions(+), 70 deletions(-)
diff --git a/company_admin/src/views/business/pageConfiguration.vue b/company_admin/src/views/business/pageConfiguration.vue
index 587fa4c..f29bd7a 100644
--- a/company_admin/src/views/business/pageConfiguration.vue
+++ b/company_admin/src/views/business/pageConfiguration.vue
@@ -16,11 +16,12 @@
<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>
+ <!-- @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>
@@ -94,8 +95,8 @@
</div>
</template>
<div class="productPage" v-if="type == 1">
- <div class="productPage_head">
- <div class="productPage_head_item">
+ <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">
@@ -144,7 +145,7 @@
<div class="productPage_pk">
<div class="productPage_pk_shop">
- <div class="productPage_pk_shop_sp1">
+ <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>
@@ -158,9 +159,9 @@
<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" :style="tableHeaderStyle">
<div class="productPage_pk_shop_sp1_img">
<img src="@/assets/images/Galanz@2x.png" mode="widthFix">
</div>
@@ -174,10 +175,10 @@
</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">
+ <div class="productPage_parameter_item_head" :style="tableHeaderStyle">
<span>{{item.name}}</span>
</div>
- <div class="productPage_parameter_item_content">
+ <div class="productPage_parameter_item_content" :style="tableBodyStyle">
<div class="productPage_parameter_item_content_price">
<div class="zdj">
<span>鎸囧浠凤細</span>
@@ -272,8 +273,8 @@
<div class="upload">
<div><el-button icon="el-icon-plus" @click="$refs.upBackground.click()">涓婁紶鑳屾櫙</el-button></div>
<span
- style="color: #999; font-size: 13px; line-height: 18px;">寤鸿灏哄锛�750px*1600px锛屽叾涓富瑕佸睍绀哄尯鍩熼珮搴︿负1008px锛屽ぇ灏忎笉瓒呰繃1M</span>
- <input type="file" @change="upbgImgUrl" ref="upBackground" style="display: none;" />
+ style="color: #999; font-size: 13px; line-height: 18px;">寤鸿灏哄锛�1920px*1080px锛屽叾涓富瑕佸睍绀哄尯鍩熼珮搴︿负1080px锛屽ぇ灏忎笉瓒呰繃1M</span>
+ <input type="file" accept="image/*" @change="upbgImgUrl" ref="upBackground" style="display: none;" />
</div>
</div>
</div>
@@ -298,7 +299,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 +323,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>
@@ -432,10 +433,12 @@
<div class="pz_footer">
<el-button type="primary" @click="submit">淇濆瓨</el-button>
</div>
+
+
</div>
-
+
</div>
@@ -519,7 +522,7 @@
},
form: {
- rangeSize: '',
+ rangeSize: '750',
main: {
bgType: 0, //0榛樿 1鑷畾涔�
bgColor: '#f7f7f7',
@@ -544,9 +547,9 @@
},
header: {
backgroundType: 0,
- bgColor: '#f7f7f7',
+ bgColor: '#0D1E41',
bgAlpha: '100',
- bgColor2: '#f7f7f7',
+ bgColor2: '#0D1E41',
bgAlpha2: '100',
type: 0,
color: '#ffffff',
@@ -555,26 +558,26 @@
},
pull: {
bgType: 0,
- bgColor: '#f7f7f7',
+ bgColor: '#6C82AA',
bgAlpha: '100',
selType: 0,
- selColor: '#ff0000',
+ selColor: '#FFDC6C',
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,41 +605,40 @@
// 娓愬彉
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
},
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 }
},
},
@@ -645,7 +647,6 @@
},
methods: {
selectBackground(v) {
- console.log(v);
if (v == 0) {
this.form.main.bgColor = '#f7f7f7'
this.form.main.alpha = '100'
@@ -653,6 +654,7 @@
},
// 涓婁紶鑳屾櫙鍥剧墖
upbgImgUrl(file) {
+ // console.log(file);
const formdate = new FormData()
this.isUploading = true
formdate.append('file', file.target.files[0])
@@ -705,58 +707,60 @@
},
selectHeaderBg(v) {
if (v == 0) {
- this.form.header.bgColor = '#f7f7f7'
+ this.form.header.bgColor = '#0D1E41'
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'
+ } else if (v == 2) {
+ this.form.header.bgColor2 = '#0D1E41'
this.form.header.bgAlpha2 = '100'
}
},
selectHeader(v) {
if (v == 0) {
- this.form.header.color = '#f7f7f7'
+ this.form.header.color = '#ffffff'
this.form.header.alpha = '100'
}
},
selectSel(v) {
if (v == 0) {
- this.form.pull.selColor = '#f7f7f7'
+ this.form.pull.selColor = '#FFDC6C'
this.form.pull.selAlpha = '100'
}
},
selectPull(v) {
if (v == 0) {
- this.form.pull.bgColor = '#f7f7f7'
+ this.form.pull.bgColor = '#6C82AA'
this.form.pull.bgAlpha = '100'
}
},
selectCategroy(v) {
if (v == 0) {
- this.form.category.bgColor = '#f7f7f7'
+ this.form.category.bgColor = '#899FC5'
this.form.category.bgAlpha = '100'
}
},
selectSearch(v) {
if (v == 0) {
- this.form.search.bgColor = '#f7f7f7'
- this.form.search.bgAlpha = '100'
+ this.form.search.bgColor = '#0D1E41'
+ this.form.search.bgAlpha = '70'
}
},
selectList(v) {
if (v == 0) {
- this.form.list.bgColor = '#f7f7f7'
- this.form.list.bgAlpha = '100'
+ 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.color = this.form.header.selColor + alpha.toString(16)
+ v.target.style.ba = this.form.header.selColor + alpha.toString(16)
},
mouseleave(v) {
v.target.style.color = ''
@@ -785,8 +789,8 @@
this.$message.warning({ message: '灏哄蹇呴』澶т簬750' })
return
}
- if (this.form.rangeSize > 1000) {
- this.$message.warning({ message: '灏哄蹇呴』灏忎簬1000' })
+ if (this.form.rangeSize > 1200) {
+ this.$message.warning({ message: '灏哄蹇呴』灏忎簬1200' })
return
}
renewUpdate({ newParam: JSON.stringify(this.form) })
@@ -811,7 +815,7 @@
.prediv {
width: 400px;
- height: 1000px;
+ height: 1200px;
position: relative;
overflow: hidden;
margin-right: 10px;
@@ -841,9 +845,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%);
@@ -891,10 +895,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);
@@ -1373,8 +1373,9 @@
.pz_head {
font-size: 20px;
- margin-bottom: 16px0px;
+ margin-bottom: 16px;
font-weight: bold;
+
}
.pz_item {
--
Gitblit v1.9.3