zq
2 weeks ago
6 changed files with 936 additions and 32 deletions
|
After Width: | Height: | Size: 771 B |
@ -0,0 +1,406 @@ |
|||
<template> |
|||
<el-collapse v-model="activeNames" @change="handleChange"> |
|||
<el-collapse-item v-for="(item, index) in menuList" :key="index" :name="item[renderKeyNew.domName]"> |
|||
<template #title> |
|||
<div class="flex-between gap8 collapse-item"> |
|||
<div class="flex gap8 "> |
|||
<GuipToolTip :content="item[renderKeyNew.menuTitle]"> |
|||
<div class="flex gap8 menu-name"><img width="20px" :src="require('@/assets/serviceIcon/ver_'+item.type+'.svg')" alt=""><span >{{ item[renderKeyNew.menuTitle] }}</span></div> |
|||
</GuipToolTip> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<div v-for="(item1, index1) in item.list" @click="setActiveCur(item1, item, index)" |
|||
:class="['flex-between point gap8', activeFloor == item1[renderKeyNew.subtitle] ? 'curActive' : '']" |
|||
:key="index1"> |
|||
<span class="l-menu-name">{{ item1[renderKeyNew.subtitle] }}</span> |
|||
<span class="l-price-ing" v-if="!currentMenuItem.unit_price && !currentMenuItem.unit_num">设置价格中</span> |
|||
<!-- <span class="l-price-ed">{{unit_desc(item)}}</span> --> |
|||
<!-- <img v-if="item1[renderKeyNew.SubSelected]" class="selected" src="../assets/menu/is_selected.png" alt=""> --> |
|||
</div> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</template> |
|||
|
|||
<script> |
|||
import store from '../store'; |
|||
import GuipToolTip from "@/components/GuipToolTip.vue"; |
|||
|
|||
export default { |
|||
options: { styleIsolation: "shared" }, |
|||
props: { |
|||
menuData: { |
|||
type: [Array, Object], |
|||
required: true |
|||
}, |
|||
// 后续如果渲染的值不同可以通过调整这个修改取值 |
|||
renderKey: { |
|||
type: [Object], |
|||
default: () => {} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
activeNames: [],//获取到的值 同 绑定的name属性 |
|||
curIndex: 0, |
|||
activeFloor: '', |
|||
scrollLock: false, |
|||
componentsName: '', |
|||
currentMenuItem:{} |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 处理options为空的情况 |
|||
menuList() { |
|||
let flag = Array.isArray(this.menuData || []); |
|||
let data = this.menuData || [] |
|||
if (!flag) { |
|||
data = Object.values(this.menuData) |
|||
return data |
|||
} |
|||
return this.menuData; |
|||
}, |
|||
renderKeyNew() { |
|||
return Object.assign({ |
|||
menuTitle: 'name',//渲染标题 |
|||
subtitle: 'name',//二级标题 |
|||
selected: 'is_select',//大标题：是否展示绿色状态 |
|||
SubSelected: 'is_select',//二级标题：是否展示绿色状态 |
|||
domName: 'type',//未来获取dom绑定依据 |
|||
domAppend: 'section_' //dom 前缀 |
|||
// 后续获取dom =》 domAppend + domName 在元素上绑定的 id名称 |
|||
}, this.renderKey); |
|||
}, |
|||
|
|||
}, |
|||
components: { |
|||
GuipToolTip |
|||
}, |
|||
watch: { |
|||
menuList:{ |
|||
handler(newVal, oldVal) { |
|||
this.activeNames = newVal.map(item => item.type) |
|||
console.log( this.activeNames,' this.activeNames='); |
|||
// console.log(newVal, oldVal,'---====val'); |
|||
// 初次加载或强制刷新时，oldVal为空 |
|||
if (!oldVal || oldVal.length === 0) { |
|||
this.setDefaultActive(newVal); |
|||
return; |
|||
} |
|||
// console.log(newVal,'newVal==='); |
|||
// 检查当前高亮的菜单项是否仍然存在于新的menuList中 |
|||
const currentItemExists = this.checkCurrentItem(newVal); |
|||
// console.log(currentItemExists,'currentItemExists--'); |
|||
// 不存在默认高亮第一项 |
|||
if (!currentItemExists) { |
|||
this.setDefaultActive(newVal); |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
// 更可靠的获取滚动容器方式 |
|||
this.scrollContainer = document.querySelector('.main-content') || |
|||
document.getElementById('main-content') || |
|||
window; |
|||
|
|||
if (this.scrollContainer) { |
|||
this.scrollContainer.addEventListener('scroll', this.handleScroll); |
|||
this.calculateFloorOffsets(); |
|||
} else { |
|||
console.error('未找到滚动容器'); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
beforeDestroy() { |
|||
if (this.scrollContainer) { |
|||
this.scrollContainer.removeEventListener('scroll', this.handleScroll); |
|||
} |
|||
}, |
|||
methods: { |
|||
unit_desc(item){ |
|||
console.log(item,'====item'); |
|||
let str = '' |
|||
return str |
|||
}, |
|||
checkCurrentItem(newMenuList) { |
|||
const subtitle = this.renderKeyNew.subtitle; |
|||
// 如果当前没有高亮的菜单项，返回 |
|||
if (!this.activeFloor) return false; |
|||
// 遍历新的menuList，先检查高亮的菜单项是否存在 |
|||
for (const item of newMenuList) { |
|||
if (item.list) { |
|||
const found = item.list.some(subItem => |
|||
subItem[subtitle] === this.activeFloor || |
|||
subItem.componentsName === this.activeFloor |
|||
); |
|||
if (found) return true; |
|||
} |
|||
} |
|||
return false; |
|||
}, |
|||
setDefaultActive(menuList) { |
|||
// 设置默认高亮项 |
|||
if (menuList && menuList.length > 0 && menuList[0].list && menuList[0].list.length > 0) { |
|||
const subtitle = this.renderKeyNew.subtitle; |
|||
this.activeFloor = menuList[0].list[0][subtitle] || menuList[0].list[0]?.componentsName || ''; |
|||
this.componentsName = menuList[0].list[0]?.componentsName || ''; |
|||
this.currentMenuItem = menuList[0].list[0] |
|||
store.commit('SET_CURRENTMENUITEM', menuList[0].list[0]); |
|||
this.curIndex = 0; |
|||
} |
|||
}, |
|||
handleChange(val) { |
|||
console.log("面板状态变化:", val); |
|||
}, |
|||
handleTitleClick() { |
|||
console.log("标题点击"); |
|||
}, |
|||
random() { |
|||
var randomNumber = Math.random(); |
|||
return randomNumber |
|||
}, |
|||
calculateFloorOffsets() { |
|||
this.menuList.forEach(item => { |
|||
item.list?.forEach(every => { |
|||
const el = document.getElementById(every.desc); |
|||
if (el) { |
|||
// 获取元素相对于视口顶部的距离 |
|||
every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset; |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
handleScroll() { |
|||
if (this.scrollLock || !this.menuList[this.curIndex]?.list) return; |
|||
|
|||
const scrollPosition = this.getScrollPosition(); |
|||
let activeFloor = null; |
|||
console.log(this.curIndex, scrollPosition, 'this.curIndex==='); |
|||
|
|||
// 从下往上查找当前可见区域对应的楼层 |
|||
// for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) { |
|||
// const item = this.menuList[this.curIndex].list[i]; |
|||
// if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量 |
|||
// activeFloor = item.desc; |
|||
// break; |
|||
// } |
|||
// } |
|||
// 从上往下 |
|||
for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) { |
|||
const item = this.menuList[this.curIndex].list[i]; |
|||
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量 |
|||
activeFloor = item.desc; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
if (activeFloor && this.activeFloor !== activeFloor) { |
|||
this.activeFloor = activeFloor; |
|||
} |
|||
}, |
|||
|
|||
getScrollPosition() { |
|||
if (this.scrollContainer === window) { |
|||
return window.pageYOffset || document.documentElement.scrollTop; |
|||
} |
|||
return this.scrollContainer.scrollTop; |
|||
}, |
|||
// setActiveCur(dom, item) { |
|||
// if (this.$route.path != item.path) { |
|||
// this.$router.push(item.path) |
|||
// store.commit('SET_PAGETITLE', item.name); |
|||
// } |
|||
// setTimeout(() => { |
|||
// this.activeFloor = dom; |
|||
// this.setHighActive(dom) |
|||
// }, 500) |
|||
// }, |
|||
|
|||
// setHighActive(dom) { |
|||
// this.scrollLock = true; |
|||
// const ele = document.getElementById(dom) |
|||
// if (!ele) return |
|||
// ele.classList.add('ceshi') |
|||
// ele.scrollIntoView({ behavior: 'smooth', block: 'start' }) |
|||
// setTimeout(() => { |
|||
// ele.classList.remove('ceshi') |
|||
// }, 1000) |
|||
// } |
|||
setActiveCur(item1, item, index) { |
|||
store.commit('SET_CURRENTMENUITEM', item1); |
|||
this.currentMenuItem = item1; |
|||
this.curIndex = index; |
|||
let subtitle = this.renderKeyNew.subtitle; |
|||
let domName = this.renderKeyNew.domName; |
|||
let componentsName = item1?.componentsName; |
|||
// 如果采用的是 组件切换显示的办法 |
|||
if (componentsName) { |
|||
this.activeFloor = componentsName; |
|||
// 同步 当前切换的组件名称 |
|||
store.commit('SET_COMPONENTS_NAME', componentsName); |
|||
return |
|||
} |
|||
this.scrollLock = true; |
|||
this.activeFloor = item1[subtitle]; |
|||
this.$nextTick(() => { |
|||
this.setHighActive(item1[domName]); |
|||
setTimeout(() => { |
|||
this.scrollLock = false; |
|||
}, 1000); |
|||
}); |
|||
}, |
|||
|
|||
setHighActive(dom) { |
|||
const ele = document.getElementById(this.renderKeyNew.domAppend + dom); |
|||
if (ele) { |
|||
ele.scrollIntoView({ |
|||
behavior: 'smooth', |
|||
block: 'start' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
/* 自定义折叠图标 */ |
|||
::v-deep .el-collapse-item__header .el-collapse-item__arrow { |
|||
display: none !important; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__header { |
|||
max-width: 162px; |
|||
} |
|||
|
|||
.arrow_img { |
|||
width: 14px; |
|||
height: 14px; |
|||
} |
|||
|
|||
.arrow_img.is-active { |
|||
transform: rotate(90deg); |
|||
} |
|||
|
|||
.collapse-item { |
|||
width: 100%; |
|||
} |
|||
|
|||
.menu-name { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
padding: 11px 0; |
|||
height: 40px; |
|||
line-height: 18px; |
|||
width: 120px; |
|||
// max-width: 96px; |
|||
box-sizing: border-box; |
|||
span{ |
|||
// max-width: 50px; |
|||
// width: 50px; |
|||
text-align: left; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
|
|||
.l-menu-name { |
|||
// max-width: 90px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
color: #8A9099; |
|||
padding: 7px 0; |
|||
height: 36px; |
|||
box-sizing: border-box; |
|||
} |
|||
.l-price-ing{ |
|||
display: none; |
|||
width: 84px; |
|||
height: 23px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 5px 8px; |
|||
box-sizing: border-box; |
|||
gap: 10px; |
|||
border-radius: 4px; |
|||
background: #BFDAFF; |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 13px; |
|||
opacity: 0; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
.l-price-ed{ |
|||
width: auto; |
|||
height: 23px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 5px 8px; |
|||
gap: 10px; |
|||
z-index: 1; |
|||
border-radius: 4px; |
|||
background: #F2F3F5; |
|||
} |
|||
|
|||
.curActive { |
|||
.l-menu-name { |
|||
color: #006AFF; |
|||
font-weight: bold; |
|||
} |
|||
.l-price-ing{ |
|||
opacity: 1; |
|||
display: block; |
|||
color: #006AFF; |
|||
background: #BFDAFF; |
|||
} |
|||
.l-price-ed{ |
|||
color: #006AFF; |
|||
background: #BFDAFF; |
|||
} |
|||
} |
|||
|
|||
.menu-select { |
|||
width: 8px; |
|||
height: 8px; |
|||
border-radius: 100%; |
|||
background: #00C261; |
|||
} |
|||
|
|||
.el-collapse { |
|||
min-width: 210px; |
|||
max-width: 210px; |
|||
background-color: #fff; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
padding: 21px 15px 21px 16px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11); |
|||
} |
|||
|
|||
.selected { |
|||
width: 20px; |
|||
height: 14px; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__header { |
|||
height: 40px; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__content { |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__wrap { |
|||
border-bottom: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,375 @@ |
|||
<template> |
|||
<div class=""> |
|||
<div class="addService_wrap"> |
|||
<div class="addServicetop"> |
|||
<h3>添加查重服务</h3> |
|||
<!-- 分类导航 --> |
|||
<el-scrollbar> |
|||
<ul> |
|||
<li v-for="(item, index) in menuList" :key="item.name" @click="scrollToCategory(index)" |
|||
:class="['normal_service', activeCategory == index ? 'active_service' : '']"> |
|||
<span class="flex"> |
|||
<img :src="require('@/assets/serviceIcon/ver_'+item.type+'.svg')" alt=""> |
|||
{{ item.name }} |
|||
</span> |
|||
<img class="activeImg" src="@/assets/serviceIcon/activeImg_choose.svg" alt=""> |
|||
</li> |
|||
</ul> |
|||
</el-scrollbar> |
|||
</div> |
|||
<!-- 内容 --> |
|||
<div class="addServicebot" ref="content"> |
|||
<ul :key="datenow"> |
|||
<li v-for="item in addlist" :key="item.name" |
|||
:class="item.checked ? 'service-active' : ''"> |
|||
<div class="service-name-item flex-between"> |
|||
<span>{{ item.name }}</span> |
|||
<input type="checkbox" :id="`item-${item.id}`" v-model="item.checked" |
|||
@change="updateSelectedCount" /> |
|||
</div> |
|||
<p class="service-desc-item">看见啊还是看见阿水</p> |
|||
<p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="bottom flex"> |
|||
<GuipButton type="system" size="page" @click="cancel">取消</GuipButton> |
|||
<GuipButton type="primary" size="page" @click="nextGoSettingPrice">确定，去设置售价</GuipButton> |
|||
<p>已选<b>{{ serviceTotal }}</b>项服务</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import store from '@/store'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
export default { |
|||
name: 'siteServiceAdd', |
|||
props: [''], |
|||
components: { |
|||
GuipButton, |
|||
}, |
|||
data() { |
|||
return { |
|||
datenow:Date.now(), |
|||
serviceTotal:0, |
|||
activeCategory:0, |
|||
uid: 0, |
|||
type: 0, |
|||
prodid: 0, |
|||
menuList:[], |
|||
addlist:[], |
|||
serviceAddUrl: '/agent/siteServiceAdd', |
|||
|
|||
} |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
created() { |
|||
if (!this.$route.query.uid && !this.$route.query.prodid) { |
|||
this.$message.error('非法请求'); |
|||
this.$router.push('/agent/siteAdd') |
|||
} |
|||
this.uid = this.$route.query.uid |
|||
this.prodid = this.$route.query.prodid |
|||
// this.loadPddSDK() |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_PAGETITLE', '站点信息'); |
|||
this.getAddServiceList(); |
|||
}, |
|||
computed: { |
|||
// 计算选中的总数 |
|||
selectedCount() { |
|||
const newaddlist = JSON.parse(JSON.stringify(this.addlist)) |
|||
let list = [] |
|||
newaddlist.forEach(item => { |
|||
if (item.checked) { |
|||
list.push(item) |
|||
} |
|||
}) |
|||
console.log(list, 'list----', this.addlist); |
|||
// store.commit('SET_ADDSERVICELIST', list); |
|||
return list.length; |
|||
}, |
|||
}, |
|||
methods: { |
|||
cancel(){ |
|||
this.$router.go(-1) |
|||
}, |
|||
updateSelectedCount() { |
|||
this.serviceTotal = this.addlist.filter(item => item.checked).length; |
|||
this.$set(this.menuList[this.activeCategory],'list',this.addlist) |
|||
this.datenow = Date.now() |
|||
}, |
|||
nextGoSettingPrice() { |
|||
const result = {}; |
|||
Object.entries(this.menuList).forEach(([key, category]) => { |
|||
// 筛选出选中的子项 |
|||
const selectedList = category.list.filter(item => item.checked); |
|||
// 只有当分类被选中或有选中的子项时才添加到结果中 |
|||
if (category.checked || selectedList.length > 0) { |
|||
result[key] = { |
|||
...category, |
|||
list: selectedList |
|||
}; |
|||
} |
|||
}); |
|||
// console.log(this.menuList,result,'result===筛选出来的数据'); |
|||
store.commit('SET_SECOND_MENU', result); |
|||
localStorage.setItem('selectedServices',JSON.stringify(result)) |
|||
this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + this.prodid) |
|||
}, |
|||
getAddServiceList() { |
|||
const that = this |
|||
that.$http('POST', '/agentnew/ajax_get_service_add_list', { |
|||
uid: that.uid, |
|||
prodid: that.prodid, |
|||
}).then(response => { |
|||
that.$nextTick(() => { |
|||
that.menuList = response.data |
|||
that.activeCategory = Object.keys(response.data)[0]; |
|||
// store.commit('SET_SECOND_MENU', response.data); |
|||
that.setMenuList() |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
setMenuList(type, status) { |
|||
this.addNum = 0 |
|||
Object.values(this.menuList).forEach((item) => { |
|||
let ver_select = false |
|||
item.list.forEach((item1) => { |
|||
item1.checked = false |
|||
if (item1.type === type) { |
|||
item1.is_select = status |
|||
} |
|||
if (item1.is_select === true) { |
|||
ver_select = true |
|||
this.addNum++ |
|||
} |
|||
}) |
|||
|
|||
if (ver_select) item.is_select = true |
|||
}) |
|||
this.serviceTotal = 0; |
|||
this.scrollToCategory(this.activeCategory) |
|||
}, |
|||
scrollToCategory(index) { |
|||
this.activeCategory = index; |
|||
this.addlist = this.menuList[index]['list'] |
|||
this.serviceTotal = this.addlist.filter(item => item.checked).length; |
|||
console.log(this.addlist,'addlist==='); |
|||
// const element = this.$refs[`category-${index}`][0]; |
|||
// element.scrollIntoView({ behavior: 'smooth' }); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.addService_wrap { |
|||
text-align: left; |
|||
background-color: #fff; |
|||
padding: 36px; |
|||
margin: 12px; |
|||
|
|||
.addServicetop { |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
// position: absolute; |
|||
// top: 12px; |
|||
// left: 24px; |
|||
// width: 963.43px; |
|||
|
|||
b { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 26px; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
color: #1E2226; |
|||
} |
|||
|
|||
ul { |
|||
display: flex; |
|||
padding-left: 0px; |
|||
gap: 8px; |
|||
|
|||
li { |
|||
cursor: pointer; |
|||
list-style-type: none; |
|||
display: flex; |
|||
align-items: center; |
|||
display: flex; |
|||
white-space: nowrap; |
|||
min-width: 181.71px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.normal_service { |
|||
letter-spacing: 0.08em; |
|||
color: #23242B; |
|||
border-radius: 6px; |
|||
background: #F2F7FF; |
|||
justify-content: space-between; |
|||
padding: 14px 10px; |
|||
img { |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 8px; |
|||
} |
|||
.activeImg{ |
|||
width: 14px; |
|||
height: 14px; |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.active_service { |
|||
transition: all .3s; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
box-sizing: border-box; |
|||
background: linear-gradient(285deg, #006AFF 4%, #4D97FF 92%); |
|||
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|||
.activeImg{ |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.addServicebot { |
|||
overflow-y: auto; |
|||
max-height: 380px; |
|||
margin-top: 24px; |
|||
|
|||
ul { |
|||
display: grid; |
|||
grid-gap: 14px; |
|||
grid-template-columns: repeat(auto-fit, 260px); |
|||
padding-left: 0; |
|||
margin: 20px 0 0; |
|||
|
|||
li { |
|||
list-style-type: none; |
|||
width: 260px; |
|||
height: 126px; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
padding: 14px 10px; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
border: 1px solid #DFE2E6; |
|||
cursor: pointer; |
|||
transition: all .3s; |
|||
} |
|||
|
|||
li:hover { |
|||
background: #F6F7FA; |
|||
transition: all .3s; |
|||
} |
|||
} |
|||
|
|||
.service-active { |
|||
border: 1px solid #006AFF; |
|||
} |
|||
|
|||
.service-desc { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
color: #8A8C99; |
|||
margin: 6px 0 8px; |
|||
} |
|||
|
|||
.service-name-item { |
|||
font-size: 14px; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
|
|||
.service-desc-item { |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 17px; |
|||
letter-spacing: 0.03em; |
|||
font-variation-settings: "opsz" auto; |
|||
color: #8A9099; |
|||
margin: 14px 0 12px; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
/* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */ |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
height: 34px; |
|||
} |
|||
|
|||
.service-price-item { |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
color: #8A9099; |
|||
|
|||
i { |
|||
font-style: normal; |
|||
color: #1E2226; |
|||
|
|||
} |
|||
|
|||
span { |
|||
color: #1E2226; |
|||
font-size: 20px; |
|||
font-weight: normal; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
|
|||
.category-section { |
|||
padding: 20px; |
|||
|
|||
h3 { |
|||
margin: 0; |
|||
font-size: 16px; |
|||
font-weight: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
|
|||
img { |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: #fff; |
|||
padding: 16px 44px; |
|||
box-sizing: border-box; |
|||
p { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
text-align: center; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
display: inline-block; |
|||
margin-left: 24px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue