From 3ac279c9df7181c9f21d35a689a321b990b87b22 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期一, 08 六月 2026 17:42:33 +0800
Subject: [PATCH] aaa
---
company_admin/src/views/business/pageConfiguration.vue | 495 ++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 397 insertions(+), 98 deletions(-)
diff --git a/company_admin/src/views/business/pageConfiguration.vue b/company_admin/src/views/business/pageConfiguration.vue
index 3bdb438..340777a 100644
--- a/company_admin/src/views/business/pageConfiguration.vue
+++ b/company_admin/src/views/business/pageConfiguration.vue
@@ -7,13 +7,13 @@
<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">
<!-- @mouseenter="mouseenter" @mouseleave="mouseleave" -->
@@ -94,7 +94,7 @@
</div>
</div>
</template>
- <div class="productPage" v-if="type == 1">
+ <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>
@@ -142,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" :style="tableHeaderStyle">
- <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" :style="tableHeaderStyle">
- <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" :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>
+ <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">
@@ -228,7 +242,32 @@
</div>
<div class="setting">
- <div class="pz_head">淇℃伅</div>
+ <div class="pz_head pz_head--with-switch">
+ <span>涓绘挱绔〉闈㈤厤缃� <span class="version-tag">V2</span></span>
+ <span
+ class="version-switch version-switch--v2"
+ :class="{ 'version-switch--active': useThisVersion }"
+ >
+ <span class="version-switch__icon"><i class="el-icon-mobile-phone" /></span>
+ <span class="version-switch__body">
+ <span class="version-switch__label">绔嬪嵆浣跨敤璇ョ増鏈�</span>
+ <span class="version-switch__status">{{ useThisVersion ? '宸插惎鐢� 路 涓绘挱绔綋鍓嶇増鏈�' : '鐐瑰嚮鎸夐挳鍚庝富鎾灏嗗垏鎹㈣嚦鏈増鏈�' }}</span>
+ </span>
+ <span v-if="useThisVersion" class="version-switch__badge">
+ <i class="el-icon-success" /> 褰撳墠鐗堟湰
+ </span>
+ <el-button
+ v-else
+ type="primary"
+ size="medium"
+ :loading="versionSwitchLoading"
+ class="version-switch__btn version-switch__btn--v2"
+ @click="onUseThisVersion"
+ >
+ 绔嬪嵆鐢熸晥
+ </el-button>
+ </span>
+ </div>
<el-form ref="form" :model="form" label-width="130px" label-suffix="锛�">
<el-form-item label="鍐呭鑼冨洿灏哄" props="rangeSize">
<el-input v-model="form.rangeSize" type="number" style="width: 200px;" placeholder="鏀寔750px-1200px"></el-input>
@@ -429,16 +468,38 @@
</template>
</div>
</el-form-item>
- <el-form-item label="鍒楄〃瀛椾綋棰滆壊">
+ <el-form-item label="鍝佺被鍒楄〃瀛椾綋">
<div class="color-select-item">
- <el-radio-group v-model="form.listname.selType" @change="selectListName">
+ 棰滆壊 <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> %
+ 涓嶉�忔槑搴� <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>
@@ -457,7 +518,7 @@
</template>
<script>
-import { getByLoginNew, renewUpdate } from '@/api/business/page.js'
+import { getByLoginNew, renewUpdate, updateAnchorPageVersion } from '@/api/business/page.js'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import { upload } from '@/api/system/common'
export default {
@@ -555,6 +616,12 @@
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'
@@ -601,15 +668,34 @@
getDesc() {
getByLoginNew()
.then(res => {
- if (res.newParam) {
+ if (res && res.newParam) {
var param= JSON.parse(res.newParam)
for (const key in this.form) {
- this.form[key] =param[key]||{}
+ if(param[key]){
+ this.form[key] = param[key]
+ }
}
- // this.form = JSON.parse(res.newParam)
}
- console.log(this.form)
+ this.anchorPageVersion = (res && res.anchorPageVersion) || 'v2'
+ this.useThisVersion = this.anchorPageVersion === 'v2'
})
+ },
+
+ onUseThisVersion () {
+ if (this.useThisVersion || this.versionSwitchLoading) return
+ this.versionSwitchLoading = true
+ updateAnchorPageVersion({ anchorPageVersion: 'v2' })
+ .then(() => {
+ this.anchorPageVersion = 'v2'
+ this.useThisVersion = true
+ this.$message.success('宸插惎鐢� V2 閰嶇疆')
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.versionSwitchLoading = false
+ })
},
submit() {
@@ -621,7 +707,10 @@
this.$message.warning({ message: '灏哄蹇呴』灏忎簬1200' })
return
}
- renewUpdate({ newParam: JSON.stringify(this.form) })
+ renewUpdate({
+ newParam: JSON.stringify(this.form),
+ anchorPageVersion: this.anchorPageVersion
+ })
.then(res => {
this.$message.success({ message: '淇濆瓨鎴愬姛' })
})
@@ -631,6 +720,9 @@
data() {
return {
isUploading: false,
+ useThisVersion: false,
+ versionSwitchLoading: false,
+ anchorPageVersion: 'v2',
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' },
@@ -655,6 +747,38 @@
{ img: require('@/assets/images/category/ic_xiwanji@2x.png'), name: '娲楃鏈�' },
{ img: require('@/assets/images/category/ic_jinshui@2x.png'), name: '鍑�姘村櫒' },
{ img: require('@/assets/images/category/ic_qita@2x.png'), name: '鍏朵粬' },
+ ],
+ productList: [
+ { img: require('@/assets/images/product/1a.png'), name: '鍗¤惃甯�' },
+ { img: require('@/assets/images/product/2a.png'), name: '澶ф捣璞�' },
+ { img: require('@/assets/images/product/3a.png'), name: '灏忕櫧妗�' },
+ { img: require('@/assets/images/product/4a.png'), name: '鐧界弽鐝�' },
+ { img: require('@/assets/images/product/5a.png'), name: '涓滆姖58' },
+ { img: require('@/assets/images/product/6a.png'), name: '涓滆姖59' },
+ { img: require('@/assets/images/product/7a.png'), name: '鏉句笅50' },
+ { img: require('@/assets/images/product/8a.png'), name: '缇庣殑55' },
+ { img: require('@/assets/images/product/9a.png'), name: '娴峰皵57' },
+ { img: require('@/assets/images/product/10a.png'), name: '缇庣殑46' },
+ { img: require('@/assets/images/product/1a.png'), name: '鍗¤惃甯�' },
+ { img: require('@/assets/images/product/2a.png'), name: '澶ф捣璞�' },
+ { img: require('@/assets/images/product/3a.png'), name: '灏忕櫧妗�' },
+ { img: require('@/assets/images/product/4a.png'), name: '鐧界弽鐝�' },
+ { img: require('@/assets/images/product/5a.png'), name: '涓滆姖58' },
+ { img: require('@/assets/images/product/6a.png'), name: '涓滆姖59' },
+ { img: require('@/assets/images/product/7a.png'), name: '鏉句笅50' },
+ { img: require('@/assets/images/product/8a.png'), name: '缇庣殑55' },
+ { img: require('@/assets/images/product/9a.png'), name: '娴峰皵57' },
+ { img: require('@/assets/images/product/10a.png'), name: '缇庣殑46' },
+ { img: require('@/assets/images/product/1a.png'), name: '鍗¤惃甯�' },
+ { img: require('@/assets/images/product/2a.png'), name: '澶ф捣璞�' },
+ { img: require('@/assets/images/product/3a.png'), name: '灏忕櫧妗�' },
+ { img: require('@/assets/images/product/4a.png'), name: '鐧界弽鐝�' },
+ { img: require('@/assets/images/product/5a.png'), name: '涓滆姖58' },
+ { img: require('@/assets/images/product/6a.png'), name: '涓滆姖59' },
+ { img: require('@/assets/images/product/7a.png'), name: '鏉句笅50' },
+ { img: require('@/assets/images/product/8a.png'), name: '缇庣殑55' },
+ { img: require('@/assets/images/product/9a.png'), name: '娴峰皵57' },
+ { img: require('@/assets/images/product/10a.png'), name: '缇庣殑46' },
],
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
defaultBanner: require('@/assets/images/banner_defult.png'),
@@ -706,7 +830,6 @@
bgColor: '#f7f7f7',
alpha: '100'
},
-
bgImg: {
isShow: 0, // 0闅愯棌 1鏄剧ず
type: 0,
@@ -744,10 +867,16 @@
},
selType:0,
listname: {
- bgType: 0,
- bgColor: '#6C82AA',
- bgAlpha: '100',
+ fontType: 0,
+ fontSize: '16',
selType: '0',
+ selColor: '#ffffff',
+ selAlpha: '100'
+ },
+ listproname: {
+ fontType: 0,
+ fontSize: '16',
+ selType: 0,
selColor: '#ffffff',
selAlpha: '100'
},
@@ -818,10 +947,16 @@
return selStyle
},
selListNameStyle() {
- let selListNameStyle = {}
let alpha = +(this.form.listname.selAlpha * 2.55).toFixed(0)
- selListNameStyle.color = this.form.listname.selColor + (alpha==0?"00":alpha.toString(16))
+ 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)
@@ -837,8 +972,6 @@
},
created() {
this.getDesc()
- console.log(this.form.listname)
- console.log(this.form.listname.selType)
}
}
/**
@@ -919,7 +1052,6 @@
align-items: center;
background: rgba(0, 224, 255, 0.34) linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(0, 0, 0, 0.21) 100%);
border-radius: 8px 8px 0px 0px;
-
.productPage_head_item {
flex: 1;
height: 100%;
@@ -930,23 +1062,18 @@
position: relative;
color: #fff;
font-size: 12px;
-
img {
width: 14px;
margin-left: 3px;
}
-
-
&:hover img {
transform: rotate(180deg);
}
-
&:hover .productPage_xl {
transform: translate(0%, 100%);
display: block;
animation: move 0.5s 0s;
}
-
@keyframes move {
0% {
opacity: 0;
@@ -956,18 +1083,15 @@
opacity: 1;
}
}
-
.productPage_xl::-webkit-scrollbar {
width: 6px;
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
}
-
.productPage_xl::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.8);
}
-
.productPage_xl {
transition: .3s;
position: absolute;
@@ -985,7 +1109,6 @@
background: linear-gradient(180deg, #518198 0%, #033B58 100%);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.19);
border-radius: 0px 0px 8px 8px;
-
.productPage_xl_iten {
width: 100%;
height: 40px;
@@ -994,13 +1117,11 @@
cursor: pointer;
padding: 0 10px;
box-sizing: border-box;
-
&:hover {
text {
color: #FFF200;
}
}
-
text {
width: 100%;
text-align: center;
@@ -1014,14 +1135,12 @@
}
}
}
-
text {
font-size: 16px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #FFFFFF;
}
-
image {
transition: .3s;
width: 14px;
@@ -1032,20 +1151,17 @@
}
}
}
-
.productPage_pk {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
-
.productPage_pk_shop {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-
.productPage_pk_shop_sp {
width: 100px;
height: 100px;
@@ -1058,7 +1174,6 @@
height: 100%;
}
}
-
.productPage_pk_shop_sp1 {
width: 184px;
height: 200px;
@@ -1132,12 +1247,12 @@
flex-wrap: wrap;
.productPage_shop_zw {
- width: 168px;
+ width: 15%;
height: 0;
}
.productPage_shop_item {
- width: 168px;
+ width: 15%;
// height: 204px;
margin-bottom: 12px;
cursor: pointer;
@@ -1163,8 +1278,8 @@
}
.productPage_shop_item_img {
- width: 136px;
- height: 136px;
+ width: 50px;
+ height: 50px;
display: flex;
align-items: center;
justify-content: center;
@@ -1417,6 +1532,129 @@
margin-bottom: 16px;
font-weight: bold;
+ }
+
+ .pz_head--with-switch {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ flex-wrap: wrap;
+ }
+
+ .version-tag {
+ display: inline-block;
+ margin-left: 8px;
+ padding: 3px 10px;
+ border-radius: 4px;
+ font-size: 13px;
+ font-weight: 700;
+ color: #409eff;
+ background: #ecf5ff;
+ border: 1px solid #b3d8ff;
+ vertical-align: middle;
+ }
+
+ .version-switch {
+ display: inline-flex;
+ align-items: center;
+ gap: 14px;
+ padding: 12px 20px;
+ border-radius: 10px;
+ border: 2px solid #409eff;
+ background: linear-gradient(135deg, #ecf5ff 0%, #f5faff 100%);
+ box-shadow: 0 4px 14px rgba(64, 158, 255, 0.22);
+ transition: all 0.25s ease;
+ cursor: default;
+
+ &--active {
+ border-color: #409eff;
+ background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+ box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
+
+ .version-switch__icon {
+ background: rgba(255, 255, 255, 0.25);
+ color: #fff;
+ }
+
+ .version-switch__label {
+ color: #fff;
+ }
+
+ .version-switch__status {
+ color: rgba(255, 255, 255, 0.88);
+ }
+ }
+
+ &__icon {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(64, 158, 255, 0.15);
+ color: #409eff;
+ font-size: 20px;
+ }
+
+ &__body {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+ }
+
+ &__label {
+ font-size: 15px;
+ font-weight: 700;
+ color: #409eff;
+ white-space: nowrap;
+ line-height: 1.3;
+ }
+
+ &__status {
+ font-size: 12px;
+ color: #909399;
+ white-space: nowrap;
+ line-height: 1.3;
+ }
+
+ &__badge {
+ flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 16px;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #fff;
+ background: rgba(255, 255, 255, 0.25);
+ white-space: nowrap;
+ }
+
+ &__btn {
+ flex-shrink: 0;
+ padding: 10px 22px;
+ font-size: 14px;
+ font-weight: 700;
+ border-radius: 20px;
+ border: none;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+ &--v2 {
+ background: #fff;
+ color: #409eff;
+
+ &:hover,
+ &:focus {
+ background: #f5faff;
+ color: #409eff;
+ }
+ }
+ }
}
.pz_item {
@@ -1856,4 +2094,65 @@
}
}
}
+
+.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