814 lines
20 KiB
Vue
814 lines
20 KiB
Vue
<template>
|
||
<view class="selectSyr">
|
||
<custom-navbar title="选择手艺人" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
|
||
backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)" titleColor="#fff"
|
||
borderBottom="none"></custom-navbar>
|
||
<searchBox placeholder="搜索手艺人名称" v-model="queryData.name" @confirm="searchConfrim" @search="searchConfrim">
|
||
</searchBox>
|
||
<view class="selectSyr-tip" v-if="queryData.servers_region.length == 0">
|
||
<text>抱歉呀，您所选择的地址暂时没有合适的手艺人～试试调整换个地址，马上为您匹配新的人选哦。</text>
|
||
</view>
|
||
<CommonList ref="groupRef" :apiUrl="url" :listScrollHeight="`calc(100vh - ${
|
||
statusBarHeight + 200 + tipHeight
|
||
}rpx)`" @load-success-all="loadSuccess">
|
||
<template #listData="{ list }">
|
||
<view class="selectSyr-list-tip" v-if="queryData.servers_region.length == 0">
|
||
<view class="flex-row-center">
|
||
<image class="selectSyr-list-tip-icon" src="/static/images/icons/tip.png">
|
||
</image>
|
||
<text>暂不满足此地址和时间的手艺人</text>
|
||
</view>
|
||
</view>
|
||
<view class="selectSyr-list" :class="{ noSyr: queryData.servers_region.length == 0 }">
|
||
<view class="selectSyr-item" v-for="(item, index) in syrList" :key="index" @click="selectSyr(item)">
|
||
<image :src="item.head_photo" mode="aspectFill" class="selectSyr-item-photo"></image>
|
||
<view class="selectSyr-item-right">
|
||
<view class="selectSyr-item-right-name flex-row-center-between">
|
||
<text class="right-name-left">{{ item.name }}</text>
|
||
<view class="right-name-right flex-row-center" @click.stop="openPopup(item)">
|
||
<text>更多信息</text>
|
||
<image class="right-name-right-img" src="/static/images/icons/right_gray4.png">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="selectSyr-item-right-time flex-row-center">
|
||
<text>到家时间：{{ item.default_times }}</text>
|
||
</view>
|
||
|
||
<!-- 所属门店区域 -->
|
||
<view class="detail-info-user__company__name"
|
||
v-if="item.for_shop && item.for_shop.length > 0">
|
||
<view class="detail-info-user__company__name__text1">
|
||
所属门店
|
||
</view>
|
||
<span class="detail-info-user__company__name__line"> | </span>
|
||
<view class="detail-info-user__company__name__text2">
|
||
{{ item.for_shop }}
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-info-user__company__name" v-if="item.sj_list && item.sj_list.length > 0"
|
||
@click.stop="showShopList(item)">
|
||
<view class="detail-info-user__company__name__text1">
|
||
所属门店
|
||
</view>
|
||
<span class="detail-info-user__company__name__line"> | </span>
|
||
<view class="detail-info-user__company__name__text2">
|
||
{{ item.selectSjItem.name }}
|
||
<!-- 多个门店时显示下拉图标 -->
|
||
<image v-if="item.sj_list && item.sj_list.length >= 1"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4c5f282e-bad3-4c27-b653-9bd5100ae639.png"
|
||
mode="aspectFill" class="detail-info-user__company__name__text2__img"
|
||
referrer="no-referrer">
|
||
</image>
|
||
</view>
|
||
<view class="sj-pop" v-if="item.showSj">
|
||
<view class="sj-pop-item" v-for="(item2,index2) in item.sj_list" :class="{active:item2.id == item.selectSjItem.id}"
|
||
:key="index2" @click="selectShop(item,item2)">
|
||
{{ item2.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="selectSyr-item-bottom">
|
||
<view class="selectSyr-item-right-adress flex-row-center">
|
||
<image class="right-adress-icon" src="/static/images/icons/address_icon3.png">
|
||
</image>
|
||
<text
|
||
class="selectSyr-item-right-adress-text">服务区域：{{ item.servers_region.join("、") }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 空数据状态 -->
|
||
<template #empty>
|
||
<noData></noData>
|
||
</template>
|
||
</CommonList>
|
||
|
||
<!-- 手艺人详情弹窗 -->
|
||
<uv-popup ref="popup" mode="bottom" bgColor="" :closeable="false">
|
||
<view class="popup-container">
|
||
<!-- 头部：头像+姓名+经验+取消按钮 -->
|
||
<view class="header-bar">
|
||
<view class="avatar-name-wrap">
|
||
<image class="avatar" :src="openTiem.head_photo" mode="aspectFill"></image>
|
||
<view class="name-exp">
|
||
<text class="name">{{ openTiem.name }}</text>
|
||
<view class="exp-tag flex-row-center">
|
||
<image class="exp-tag-icon" src="/static/images/icons/experience.png">
|
||
</image>
|
||
<text>专业经验：{{workExpText(openTiem.major)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="cancel-btn" @click="closePopup">取消</text>
|
||
</view>
|
||
|
||
<!-- 服务信息：到家时间+服务区域 -->
|
||
<view class="service-info">
|
||
<view class="info-item flex-row-center">
|
||
<image class="right-time-icon" src="/static/images/icons/time_icon.png">
|
||
</image>
|
||
<text class="info-text">到家时间：
|
||
<text style="color: #333333">{{
|
||
openTiem.default_times
|
||
}}</text>
|
||
</text>
|
||
</view>
|
||
<view class="info-item flex-row-center" v-if="openTiem.servers_region">
|
||
<image class="right-adress-icon" src="/static/images/icons/address_icon3.png">
|
||
</image>
|
||
<text class="info-text">服务区域：<text style="color: #333333">{{
|
||
openTiem.servers_region.join("、")
|
||
}}</text></text>
|
||
</view>
|
||
|
||
<!-- 新的门店显示样式 -->
|
||
<view class="popup-shop-info" v-if="openTiem.for_shop && openTiem.for_shop.length > 0">
|
||
<text class="popup-shop-label">所属门店：</text>
|
||
<view class="popup-shop-tags">
|
||
<view class="popup-shop-tag">
|
||
{{ openTiem.for_shop}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 介绍文本 -->
|
||
<view class="intro-text">
|
||
<image class="intro-text-icon" src="/static/images/icons/Introduction.png" />
|
||
<text>{{ openTiem.detail }}</text>
|
||
</view>
|
||
|
||
<!-- 确定按钮 -->
|
||
<view class="confirm-btn" @click="handleConfirm">确定</view>
|
||
</view>
|
||
</uv-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import searchBox from "@/pages/service/components/search-box.vue";
|
||
import CommonList from "@/components/common/CommonList.vue";
|
||
export default {
|
||
name: "list",
|
||
components: {
|
||
searchBox,
|
||
CommonList,
|
||
},
|
||
data() {
|
||
return {
|
||
syrList: [],
|
||
url: '/user/serversSelf/syrList',
|
||
openTiem: {},
|
||
queryData: {
|
||
name: "",
|
||
id: 1,
|
||
servers_region: "河北省-沧州市-黄骅市",
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
tipHeight() {
|
||
return this.queryData.servers_region.length == 0 ? 108 : 0;
|
||
},
|
||
reservationAddress() {
|
||
return this.$store.state.reservationAddress;
|
||
},
|
||
},
|
||
async onLoad(options) {
|
||
this.statusBarHeight = this.getRpxStatusBarHeight();
|
||
if (options.url) {
|
||
this.url = options.url;
|
||
}
|
||
if (options.id) {
|
||
this.queryData.id = options.id;
|
||
}
|
||
if (Object.keys(this.reservationAddress).length != 0) {
|
||
this.queryData.servers_region = this.reservationAddress.dependency;
|
||
this.queryData.city = this.reservationAddress.dependency_city;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.search();
|
||
});
|
||
},
|
||
methods: {
|
||
|
||
// 显示门店列表选择弹窗
|
||
showShopList(currentItem) {
|
||
// 先关闭所有已展开的弹窗
|
||
this.syrList.forEach(item => {
|
||
if (item !== currentItem && item.showSj) {
|
||
this.$set(item, 'showSj', false);
|
||
}
|
||
});
|
||
// 展开当前弹窗
|
||
this.$set(currentItem, 'showSj', !currentItem.showSj);
|
||
},
|
||
// 选择门店
|
||
selectShop(item,item2) {
|
||
this.$set(item, 'selectSjItem', item2);
|
||
},
|
||
// 关闭门店选择弹窗
|
||
closeShopPopup() {
|
||
|
||
},
|
||
workExpText(workExpNum) {
|
||
// 定义映射表（复用性更高）
|
||
const expMap = {
|
||
1: '实习',
|
||
2: '1-3年',
|
||
3: '3-5年',
|
||
4: '5-10年',
|
||
5: '10年以上'
|
||
};
|
||
// 取值并处理默认情况
|
||
return expMap[workExpNum] || '未知工作经验';
|
||
},
|
||
loadSuccess(e) {
|
||
// 处理返回的数据，假设接口返回的数据中，所属门店是数组格式
|
||
// 这里您需要根据实际接口返回的数据结构调整
|
||
const list = e.data.list || [];
|
||
list.forEach(item => {
|
||
// 如果接口返回的是字符串，转换为数组
|
||
if (item.sj_list && item.sj_list.length > 0) {
|
||
// 如果接口直接返回shop_list数组
|
||
this.$set(item, 'selectSjItem', item.sj_list[0])
|
||
this.$set(item, 'showSj', false)
|
||
}
|
||
});
|
||
this.syrList = list
|
||
console.log(11111, this.syrList)
|
||
|
||
// 如果没有手艺人清空地区
|
||
if (e.data.count == 0 && this.queryData.servers_region.length != 0) {
|
||
this.queryData.servers_region = "";
|
||
setTimeout(() => {
|
||
this.search();
|
||
}, 200);
|
||
}
|
||
},
|
||
openPopup(item) {
|
||
this.openTiem = item;
|
||
this.$refs.popup.open();
|
||
},
|
||
closePopup() {
|
||
this.$refs.popup.close();
|
||
},
|
||
handleConfirm() {
|
||
// 确定按钮逻辑
|
||
this.closePopup();
|
||
},
|
||
searchConfrim(e) {
|
||
this.search();
|
||
},
|
||
search() {
|
||
this.$refs.groupRef.manualRefresh(this.queryData);
|
||
},
|
||
selectSyr(item) {
|
||
if (this.queryData.servers_region.length == 0) {
|
||
return
|
||
}
|
||
const pages = getCurrentPages();
|
||
const prevPage = pages[pages.length - 2];
|
||
|
||
if (prevPage) {
|
||
// 如果有选中的门店，添加到手艺人信息中
|
||
// const selectedShop = this.selectedShops[item.id];
|
||
// if (selectedShop) {
|
||
// item.selectedShop = selectedShop;
|
||
// }
|
||
this.$store.commit("setreservationSyr", item);
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.selectSyr {
|
||
.selectSyr-tip {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 14rpx 20rpx;
|
||
background: #fae7ec;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #d5131f;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.selectSyr-list-tip {
|
||
height: 130rpx;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
margin: 39rpx 20rpx 0 20rpx;
|
||
background: #fff1df;
|
||
border-radius: 20rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #ab6a21;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.selectSyr-list-tip-icon {
|
||
width: 30rpx;
|
||
height: 26rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
.selectSyr-list {
|
||
margin-top: 20rpx;
|
||
|
||
.selectSyr-item {
|
||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||
padding: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
column-gap: 20rpx;
|
||
row-gap: 15rpx;
|
||
|
||
.selectSyr-item-photo {
|
||
margin-top: 15rpx;
|
||
width: 126rpx;
|
||
height: 126rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.selectSyr-item-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.selectSyr-item-right-name {
|
||
margin-bottom: 10rpx;
|
||
|
||
.right-name-left {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.right-name-right {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #E5616A;
|
||
text-align: left;
|
||
font-style: normal;
|
||
gap: 10rpx;
|
||
padding: 6rpx 10rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid #E3C0C2;
|
||
|
||
.right-name-right-img {
|
||
width: 10rpx;
|
||
height: 19rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.selectSyr-item-right-time {
|
||
margin-bottom: 4rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
gap: 10rpx;
|
||
}
|
||
}
|
||
|
||
.selectSyr-item-bottom {
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
border-top: 1rpx solid #f1f1f1;
|
||
|
||
.selectSyr-item-right-adress {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10rpx;
|
||
|
||
.right-adress-icon {
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
margin-top: 2rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.selectSyr-item-right-adress-text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
word-break: break-all;
|
||
text-align: left;
|
||
min-height: 33rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.noSyr {
|
||
margin-top: 0;
|
||
transform: translateY(-53rpx);
|
||
}
|
||
}
|
||
|
||
.right-time-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.right-adress-icon {
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
margin-top: 2rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 弹窗样式
|
||
.popup-container {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||
|
||
// 头部区域
|
||
.header-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
|
||
.avatar-name-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
border-radius: 50%;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.name-exp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.name {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.exp-tag {
|
||
padding: 0 22rpx 0 15rpx;
|
||
height: 45rpx;
|
||
background: #fff0f5;
|
||
border-radius: 23rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #dc424c;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: fit-content;
|
||
gap: 10rpx;
|
||
|
||
.exp-tag-icon {
|
||
width: 27rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cancel-btn {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 30rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// 服务信息区域
|
||
.service-info {
|
||
margin-bottom: 30rpx;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 8px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 35rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 介绍文本
|
||
.intro-text {
|
||
padding-top: 25rpx;
|
||
margin-bottom: 100rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
|
||
.intro-text-icon {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 72rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
|
||
// 确定按钮
|
||
.confirm-btn {
|
||
margin: 0 21rpx;
|
||
width: 648rpx;
|
||
height: 94rpx;
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
border-radius: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 新的门店显示样式
|
||
.popup-shop-info {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
.popup-shop-label {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
white-space: nowrap;
|
||
margin-right: 10rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.popup-shop-tags {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8rpx;
|
||
|
||
.popup-shop-tag {
|
||
padding: 4rpx 12rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 所属门店样式
|
||
.detail-info-user__company__name {
|
||
box-sizing: border-box;
|
||
background: #FFF5F6;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #FFD0DC;
|
||
padding-right: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 21rpx;
|
||
width: fit-content;
|
||
margin-top: 15rpx;
|
||
margin-bottom: 5rpx;
|
||
padding: 2rpx 10rpx;
|
||
max-width: 100%;
|
||
position: relative;
|
||
|
||
.detail-info-user__company__name__text {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #a7abae;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.detail-info-user__company__name__line {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #D2C7C7;
|
||
border-radius: 1rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.detail-info-user__company__name__text1 {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.detail-info-user__company__name__text2 {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #855151;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
|
||
.detail-info-user__company__name__text2__img {
|
||
width: 15rpx;
|
||
height: 8rpx;
|
||
margin-left: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.detail-info-user__company__name__card {
|
||
margin-right: 8rpx;
|
||
width: 39rpx;
|
||
height: 34rpx;
|
||
background: rgba(212, 215, 223, 0.2);
|
||
border-radius: 6rpx;
|
||
border: 1rpx solid rgba(169, 172, 179, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
|
||
.detail-info-user__company__name__card__img {
|
||
width: 22rpx;
|
||
height: 21rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sj-pop {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: -34rpx;
|
||
width: 358rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 1rpx 8rpx 2rpx #E6E6E6;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx;
|
||
/* 新增圆角，更美观 */
|
||
z-index: 9999;
|
||
/* 新增层级，避免被遮挡 */
|
||
max-height: 400rpx;
|
||
overflow: visible;
|
||
|
||
/* 新增：三角形箭头样式 */
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -20rpx;
|
||
/* 比主体层向下偏移1rpx（对应阴影vertical:1rpx） */
|
||
right: 58rpx;
|
||
/* 向左微调，让阴影向两侧扩散 */
|
||
width: 0;
|
||
height: 0;
|
||
/* 尺寸比主体大2rpx（对应阴影spread:2rpx），模拟扩散效果 */
|
||
border-width: 0 20rpx 18rpx 18rpx;
|
||
border-style: solid;
|
||
border-color: transparent transparent #E6E6E6 transparent;
|
||
/* 阴影颜色 */
|
||
z-index: 1;
|
||
/* 层级低于主体 */
|
||
/* 核心：模拟box-shadow的blur:8rpx模糊效果 */
|
||
filter: blur(2rpx);
|
||
/* 适配rpx的模糊值，视觉匹配8rpx的box-shadow模糊 */
|
||
opacity: 0.8;
|
||
/* 弱化阴影，更贴近原风格 */
|
||
}
|
||
|
||
/* 第二步：三角形主体层（白色，覆盖阴影层中间，只露边缘阴影） */
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -16rpx;
|
||
right: 60rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-width: 0 18rpx 16rpx 16rpx;
|
||
border-style: solid;
|
||
border-color: transparent transparent #FFFFFF transparent;
|
||
/* 主体白色 */
|
||
z-index: 2;
|
||
/* 层级高于阴影层 */
|
||
/* 可选：给主体加极轻微阴影，增强层次感 */
|
||
filter: drop-shadow(0rpx 1rpx 1rpx rgba(230, 230, 230, 0.3));
|
||
}
|
||
|
||
|
||
.sj-pop-item {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F1F1F1;
|
||
}
|
||
|
||
.sj-pop-item:last-child {
|
||
margin-bottom: 0rpx;
|
||
padding-bottom: 0rpx;
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* 选中状态样式 */
|
||
.sj-pop-item.active {
|
||
color: #E8101E ;
|
||
}
|
||
}
|
||
|
||
//list样式
|
||
.common-list {
|
||
background-color: #fafafa !important;
|
||
padding-bottom: 0rpx;
|
||
|
||
::v-deep .list-scroll {
|
||
margin-top: 0rpx;
|
||
}
|
||
|
||
::v-deep .list-container {
|
||
padding: 0rpx;
|
||
}
|
||
}
|
||
</style> |