BAKEYi
parent
2f9055454c
commit
c0f5ca513b
12
pages.json
12
pages.json
|
|
@ -988,6 +988,18 @@
|
|||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/jingxuan/selected-skills",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/jingxuan/selected-brands",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -87,11 +87,11 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="settlement-guide card-box" v-if="isLogin && !isSettled">
|
||||
<view class="guide-header">
|
||||
<view class="settlement-guide card-box" v-if="isLogin && !isCertified">
|
||||
<view class="guide-header" :style="{ backgroundImage: 'url(' + (isSettled ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c3a6cdd8-0447-4b50-a8cc-7bab1eedb502.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/138ccbc3-486d-4287-b67f-f809de99e408.png') + ')' }">
|
||||
<view class="guide-body">
|
||||
<text class="guide-text">认证店铺信息，接单必经之路</text>
|
||||
<view class="guide-btn" @tap="goToSettle">去入驻</view>
|
||||
<text class="guide-text">{{ isSettled ? '完成认证，开启您的接单之路' : '入驻美融融，生意更轻松' }}</text>
|
||||
<view class="guide-btn" @tap="goToSettle">{{ isSettled ? '去认证' : '去入驻' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
<view class="brands-section card-box">
|
||||
<view class="card-header">
|
||||
<view class="header-left"><text class="title" style="margin-left: 10rpx;">精选品牌</text></view>
|
||||
<view class="header-right">更多品牌 <image class="more-right-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ee119e24-1cb2-43df-86e6-61af8e9fd0ad.png"></image></view>
|
||||
<view class="header-right" @tap="goToBrandList">更多品牌 <image class="more-right-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ee119e24-1cb2-43df-86e6-61af8e9fd0ad.png"></image></view>
|
||||
</view>
|
||||
|
||||
<view class="brand-grid">
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<view class="skills-section card-box">
|
||||
<view class="card-header">
|
||||
<view class="header-left"><text class="title">技能集市</text></view>
|
||||
<view class="header-right">更多技能 <image class="more-right-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ee119e24-1cb2-43df-86e6-61af8e9fd0ad.png"></image> </view>
|
||||
<view class="header-right" @tap="goToSkillList">更多技能 <image class="more-right-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ee119e24-1cb2-43df-86e6-61af8e9fd0ad.png"></image> </view>
|
||||
</view>
|
||||
<view class="skill-list">
|
||||
<skill-card
|
||||
|
|
@ -162,14 +162,13 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
isLogin: false, // 是否登录，onShow生命周期中会通过token判定
|
||||
userInfo: {}, // 用户信息数据源
|
||||
isLogin: false,
|
||||
userInfo: {},
|
||||
syrId: null,
|
||||
|
||||
displayScore: 0,
|
||||
animationTimer: null,
|
||||
|
||||
// 通知公告数据
|
||||
noticeList: [
|
||||
{ id: 0, title: '暂无最新公告', url: '' }
|
||||
],
|
||||
|
|
@ -254,11 +253,20 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
goToBrandList() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/jingxuan/selected-brands'
|
||||
});
|
||||
},
|
||||
goToSkillList() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/jingxuan/selected-skills'
|
||||
});
|
||||
},
|
||||
// 处理金刚区点击事件 (包含扫码验券核心逻辑)
|
||||
handleQuickAction(item) {
|
||||
if (item.name === '扫码验券') {
|
||||
console.log('准备跳转到自定义扫码页...');
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/shop/verify/verify-order',
|
||||
fail: (err) => {
|
||||
|
|
@ -293,7 +301,6 @@ export default {
|
|||
this.userInfo = result.data;
|
||||
uni.setStorageSync("syrId", result.data.id);
|
||||
this.syrId = result.data.id;
|
||||
|
||||
// 获取完用户信息后，初始化营业开关的状态
|
||||
this.initStoreStatus();
|
||||
|
||||
|
|
@ -314,7 +321,7 @@ export default {
|
|||
updateTime: this.formatTime(res.data.now_date),
|
||||
waitStart: res.data.dfw || 0,
|
||||
waitFinish: res.data.dwc || 0,
|
||||
finished: res.data.yqx || 0 // 备注：接口返回只有dfw, dwc, yqx(已取消)。暂时将第三个坑位放为yqx，或你后期让后端加字段
|
||||
finished: res.data.yqx || 0 // 备注：接口返回只有dfw, dwc, yqx(已取消)。暂时将第三个坑位放为yqx，或后期让后端加字段
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -385,13 +392,14 @@ export default {
|
|||
type: item.link_name || '平台课程',
|
||||
views: item.browse_num || 0,
|
||||
time: item.create_time ? item.create_time.split(' ')[0] : '', // 只取日期
|
||||
coverSrc: item.cover_img || 'https://dummyimage.com/200x150/ccc/fff.png&text=Video'
|
||||
coverSrc: item.cover_img || 'https://dummyimage.com/200x150/ccc/fff.png&text=Video',
|
||||
typeIcon: item.link_logo || ''
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 跳转：通知详情页
|
||||
goToNotice(msg) {
|
||||
if(msg.id) {
|
||||
|
|
@ -422,7 +430,6 @@ export default {
|
|||
|
||||
// 营业中 / 休息中 按钮逻辑判断
|
||||
toggleStatus() {
|
||||
// 校验逻辑保留你之前的认证状态检查
|
||||
if (!this.isCertified) {
|
||||
uni.showModal({ title: '提示', content: '请先完善认证信息', confirmText: '去完善' });
|
||||
return;
|
||||
|
|
@ -431,19 +438,15 @@ export default {
|
|||
uni.showToast({ title: '请先配置营业时间', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 真正的请求逻辑
|
||||
let newStatus = this.userInfo.order_taking == 1 ? 2 : 1;
|
||||
request.post("/sj/sjordertaking", {
|
||||
order_taking: newStatus,
|
||||
sjid: this.syrId // 使用你在 getUserInfo 存入的 sjId/syrId
|
||||
sjid: this.sjId
|
||||
}).then((res) => {
|
||||
// 成功后重新拉取最新信息以更新 UI
|
||||
this.getUserInfo();
|
||||
uni.showToast({ title: newStatus == 1 ? '已开启营业' : '已休息', icon: 'none' });
|
||||
});
|
||||
},
|
||||
|
||||
animateScore() {
|
||||
const target = parseFloat(this.orderDetail.score) || 0;
|
||||
if (this.animationTimer) clearInterval(this.animationTimer);
|
||||
|
|
@ -496,7 +499,6 @@ export default {
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
// 通用卡片样式
|
||||
.card-box {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -512,7 +514,6 @@ export default {
|
|||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
// 通用卡片头部
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -556,7 +557,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 1. 顶部信息
|
||||
.header-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -656,16 +656,15 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 入驻引导卡片
|
||||
.settlement-guide {
|
||||
padding: 0; // 去除内部留白，让背景图贴边
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.guide-header {
|
||||
width: 100%;
|
||||
height: 248rpx;
|
||||
background: url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/138ccbc3-486d-4287-b67f-f809de99e408.png');
|
||||
background-size: cover;
|
||||
/* 背景图由动态 style 接管 */
|
||||
}
|
||||
|
||||
.guide-body {
|
||||
|
|
@ -698,7 +697,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 2. 快捷入口
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
@ -725,7 +723,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 3. 基础订单
|
||||
.order-stats-basic {
|
||||
background: linear-gradient( 176deg, #F0F4FF 0%, #FFFFFF 100%);
|
||||
border-radius: 20rpx;
|
||||
|
|
@ -753,7 +750,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 4. 详细订单
|
||||
.order-stats-detail {
|
||||
.detail-content {
|
||||
display: flex;
|
||||
|
|
@ -885,7 +881,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 5. 通知横幅 (跑马灯改造)
|
||||
.notice-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -901,7 +896,7 @@ export default {
|
|||
|
||||
.notice-swiper {
|
||||
flex: 1;
|
||||
height: 40rpx; // 限制高度刚好显示一行
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
.notice-text {
|
||||
|
|
@ -922,7 +917,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 6. 精选品牌 (精简后的包裹容器)
|
||||
.brands-section {
|
||||
padding: 20rpx 20rpx;
|
||||
.brand-grid {
|
||||
|
|
@ -931,13 +925,12 @@ export default {
|
|||
justify-content: space-between;
|
||||
|
||||
.brand-card-wrap {
|
||||
width: 48.5%; // 240rpx 宽度
|
||||
width: 48.5%;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 7. 技能集市
|
||||
.skills-section {
|
||||
.skill-list {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,472 @@
|
|||
<template>
|
||||
<view>
|
||||
<custom-navbar
|
||||
title="精选品牌"
|
||||
:leftImg="'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/60ae3383-6ff6-4f42-818b-d9b09a9bd0e0.png'"
|
||||
:showUser="true"
|
||||
backgroundColor="url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce2e62e1-c26a-45c8-a49d-7ed00b2ce02c.png') center 20%/cover no-repeat"
|
||||
titleColor="#333"
|
||||
borderBottom="none"
|
||||
:show-headle="true"
|
||||
headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51ebca5d-95c5-4fb8-8aa3-560a79100d25.png"
|
||||
@onHeadleClick="">
|
||||
</custom-navbar>
|
||||
|
||||
<serviecFirstTab
|
||||
:tabs="tabs"
|
||||
:activeId="activeId"
|
||||
activeColor="#FF4767"
|
||||
@tab-click="tabClick"
|
||||
bgColor="#fff">
|
||||
</serviecFirstTab>
|
||||
|
||||
<CommonList
|
||||
ref="brandListRef"
|
||||
:apiUrl="'/sj/brand/list'"
|
||||
:initialQuery="{}"
|
||||
:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 250}rpx)`"
|
||||
@data-loaded="handleDataLoaded">
|
||||
|
||||
<template #headerScroll>
|
||||
<view class="icon-tabs">
|
||||
<view
|
||||
v-for="item in iconTabs"
|
||||
:key="item.id"
|
||||
class="icon-tab"
|
||||
:class="{active: currentSecondClass == item.id}"
|
||||
@click="selectSecondClass(item.id)">
|
||||
<image :src="item.photo" class="icon-img" mode="aspectFill"></image>
|
||||
<text class="icon-text">{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-bar">
|
||||
<view class="sort-item" @tap="toggleSort('time')">
|
||||
<text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-item" @tap="toggleSort('view')">
|
||||
<text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template #listData="{ list }">
|
||||
<view class="zhanwei">
|
||||
<view class="brand-grid">
|
||||
<brand-card
|
||||
class="brand-card-wrap"
|
||||
v-for="(brand, idx) in enrichedBrandList(list)"
|
||||
:key="brand.id || idx"
|
||||
:item="brand"
|
||||
:tagKeys="brand._tagKeys"
|
||||
@click="handleBrandClick(brand)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<noData></noData>
|
||||
</template>
|
||||
</CommonList>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from "../../utils/request";
|
||||
import serviecFirstTab from "@/components/common/service-first-tab.vue";
|
||||
import CommonList from "@/components/common/CommonList.vue";
|
||||
import brandCard from "@/pages/home/components/brand-card.vue";
|
||||
import noData from "@/components/noData/noData.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
serviecFirstTab,
|
||||
CommonList,
|
||||
brandCard,
|
||||
noData
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navHeight: 0,
|
||||
|
||||
// 当前选中的一级/二级分类ID（页面顶部点击用）
|
||||
activeId: "",
|
||||
currentSecondClass: "",
|
||||
tabs: [],
|
||||
iconTabs: [],
|
||||
|
||||
selectedSecondIds: [], // 抽屉里选中的分类ID
|
||||
|
||||
// 额外筛选参数
|
||||
orderType: 1,
|
||||
|
||||
// 排序图标资源
|
||||
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
||||
iconGreyDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dfffb601-6877-4608-a3eb-88695b05c6c2.png',
|
||||
iconPinkUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5bc84dff-e120-4d4b-a33e-25d68e065654.png',
|
||||
iconPinkDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ff2c2c9d-694a-4adf-b737-66b07f4a63ae.png',
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||||
this.navHeight = this.statusBarHeight + 44;
|
||||
|
||||
if (options.id) {
|
||||
this.activeId = options.id;
|
||||
}
|
||||
this.getFirstClass();
|
||||
|
||||
// 初始化时一并获取抽屉内的级联字典数据
|
||||
this.loadFilterCategories();
|
||||
},
|
||||
methods: {
|
||||
// ============ 排序逻辑 ============
|
||||
toggleSort(type) {
|
||||
if (type === 'time') {
|
||||
this.orderType = this.orderType === 1 ? 2 : 1;
|
||||
} else if (type === 'view') {
|
||||
this.orderType = this.orderType === 3 ? 4 : 3;
|
||||
}
|
||||
this.refreshBrandList();
|
||||
},
|
||||
|
||||
// ============ 页面内分类逻辑 ============
|
||||
getFirstClass() {
|
||||
request.post("/sj/firstclass").then((res) => {
|
||||
this.tabs = res.data || [];
|
||||
if (this.tabs.length && !this.activeId) {
|
||||
this.activeId = this.tabs[0].id;
|
||||
}
|
||||
this.getSecondClassList();
|
||||
this.refreshBrandList();
|
||||
});
|
||||
},
|
||||
|
||||
getSecondClassList() {
|
||||
if (!this.activeId) return;
|
||||
request.post('/sj/secondclass', { id: this.activeId }).then((res) => {
|
||||
this.iconTabs = res.data || [];
|
||||
});
|
||||
},
|
||||
|
||||
selectSecondClass(id) {
|
||||
if(this.currentSecondClass === id){
|
||||
this.currentSecondClass = "";
|
||||
} else {
|
||||
this.currentSecondClass = id;
|
||||
}
|
||||
// 页面上点击了圆形图标，则清空抽屉里的选择
|
||||
this.selectedSecondIds = [];
|
||||
this.refreshBrandList();
|
||||
},
|
||||
|
||||
tabClick(id) {
|
||||
if (this.activeId === id) return;
|
||||
this.activeId = id;
|
||||
this.currentSecondClass = "";
|
||||
this.getSecondClassList();
|
||||
this.refreshBrandList();
|
||||
},
|
||||
|
||||
// ============ 刷新列表核心 ============
|
||||
refreshBrandList() {
|
||||
// 如果抽屉里选了分类，优先传抽屉的参数；否则传圆形图标选中的分类
|
||||
const targetSecondClass = this.selectedSecondIds.length > 0
|
||||
? this.selectedSecondIds.join(',')
|
||||
: this.currentSecondClass;
|
||||
|
||||
const params = {
|
||||
first_class: this.activeId || undefined,
|
||||
second_class: targetSecondClass || undefined,
|
||||
order_type: this.orderType
|
||||
};
|
||||
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] === undefined) delete params[key];
|
||||
});
|
||||
|
||||
if(this.$refs.brandListRef) {
|
||||
this.$refs.brandListRef.manualRefresh(params);
|
||||
}
|
||||
},
|
||||
|
||||
enrichedBrandList(list) {
|
||||
if (!list || !list.length) return [];
|
||||
return list.map(brand => {
|
||||
const tagKeys = [];
|
||||
if (brand.franchise_state === 1) tagKeys.push('franchise');
|
||||
if (brand.student_state === 1) tagKeys.push('recruit');
|
||||
if (tagKeys.length === 0) tagKeys.push('more');
|
||||
|
||||
return {
|
||||
...brand,
|
||||
name: brand.name,
|
||||
bgSrc: brand.cover_img || 'https://dummyimage.com/300x200/ccc/fff.png',
|
||||
avatar: brand.logo_img || 'https://dummyimage.com/100x100/ccc/fff.png',
|
||||
_tagKeys: tagKeys
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
handleBrandClick(brand) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/brand/detail?id=${brand.id}`
|
||||
});
|
||||
},
|
||||
|
||||
handleDataLoaded(data) {
|
||||
console.log("品牌列表加载完成", data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 保证右侧搜索图标大小合适
|
||||
::v-deep .icon-headle {
|
||||
width: 32rpx !important;
|
||||
height: 32rpx !important;
|
||||
}
|
||||
|
||||
// 一级类目 Tab 样式微调
|
||||
.service-first-tab {
|
||||
border-bottom: none;
|
||||
padding-bottom: 27rpx;
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
::v-deep .service-first-tab{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ================= 抽屉下拉样式 ================= */
|
||||
.filter-panel {
|
||||
position: fixed;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.show {
|
||||
pointer-events: auto;
|
||||
.filter-mask { opacity: 1; }
|
||||
.filter-container { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.filter-mask {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 30rpx 30rpx;
|
||||
padding: 140rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-scroll {
|
||||
max-height: 50vh;
|
||||
}
|
||||
.filter-group {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.group-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.pill-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx 10rpx; /* 控制行间距和列间距 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用胶囊按钮 (一行四个) */
|
||||
.pill-item {
|
||||
width: calc(25% - 8rpx); /* 精确计算一行四个 */
|
||||
height: 58rpx;
|
||||
background: #F5F5F5;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx; /* 字号略小以防溢出 */
|
||||
color: #333333;
|
||||
line-height: 37rpx;
|
||||
|
||||
/* flex 居中文字 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
background: #FFF0F2;
|
||||
color: #FF4767;
|
||||
border: 1rpx solid #FFB0BD;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
.reset-btn, .confirm-btn {
|
||||
width: 47%;
|
||||
text-align: center;
|
||||
padding: 22rpx 0;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.reset-btn { background: #F5F5F5; color: #666; }
|
||||
.confirm-btn { background: #FF4767; color: #fff; }
|
||||
}
|
||||
|
||||
/* ================= 其他页面样式 ================= */
|
||||
// 二级类目图标行
|
||||
.icon-tabs {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
column-gap: 36rpx;
|
||||
row-gap: 30rpx;
|
||||
background: transparent;
|
||||
padding: 0 0 0 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.icon-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
margin-top: 10rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 33rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icon-tab.active .icon-text {
|
||||
color: #FF4767;
|
||||
line-height: 33rpx;
|
||||
}
|
||||
|
||||
.icon-tab.active .icon-img {
|
||||
border: 2rpx solid #FF4767;
|
||||
}
|
||||
|
||||
// 排序栏样式
|
||||
.sort-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 60rpx;
|
||||
|
||||
.sort-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sort-text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 37rpx;
|
||||
margin-right: 6rpx;
|
||||
|
||||
&.active {
|
||||
color: #FF4767;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.arrow-icon {
|
||||
width: 14rpx;
|
||||
height: 8rpx;
|
||||
margin: 2rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 品牌卡片网格
|
||||
.zhanwei {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx 0 0 0 ;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
}
|
||||
.brand-grid {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx;
|
||||
row-gap: 24rpx;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
|
||||
.brand-card-wrap {
|
||||
width: 48.5%;
|
||||
}
|
||||
}
|
||||
|
||||
.common-list {
|
||||
::v-deep .list-container {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .list-scroll {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.service-list {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,490 @@
|
|||
<template>
|
||||
<view class="skill-market-page">
|
||||
|
||||
<custom-navbar
|
||||
title="技能集市"
|
||||
:showBack="true"
|
||||
backgroundColor="#FFFFFF"
|
||||
:show-headle="true"
|
||||
borderBottom="none"
|
||||
headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51ebca5d-95c5-4fb8-8aa3-560a79100d25.png"
|
||||
@onHeadleClick="goToSearch">
|
||||
</custom-navbar>
|
||||
|
||||
<view class="nav-placeholder" :style="{ height: navHeight + 'px' }"></view>
|
||||
|
||||
<view class="official-author-block" v-if="linkType === 1">
|
||||
<image class="author-avatar" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3" mode="aspectFill"></image>
|
||||
<view class="author-info">
|
||||
<text class="author-name">美融融官方</text>
|
||||
<text class="author-desc">发布了658视频</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-bar-wrap" :style="{ top: navHeight + 'px' }">
|
||||
<view class="sort-bar">
|
||||
<view class="left-sorts">
|
||||
<view class="sort-item" @tap="toggleSort('time')">
|
||||
<text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-item" @tap="toggleSort('view')">
|
||||
<text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
|
||||
<view class="arrows">
|
||||
<image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
|
||||
<image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right-filter" @tap="toggleFilterPanel">
|
||||
<text class="filter-text">筛选</text>
|
||||
<image class="filter-icon" :src="filterIcon" :class="{ 'rotate': filterVisible }"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-panel" :class="{ 'show': filterVisible }" catchtouchmove="true">
|
||||
<view class="filter-mask" @tap="closeFilterPanel"></view>
|
||||
<view class="filter-container">
|
||||
<text class="group-title">课程类型</text>
|
||||
<view class="course-filter">
|
||||
<view class="course-type-item" :class="{ active: linkType === '' }" @tap="selectAndApply('')">全部</view>
|
||||
<view class="course-type-item" :class="{ active: linkType === 1 }" @tap="selectAndApply(1)">平台课程</view>
|
||||
<view class="course-type-item" :class="{ active: linkType === 2 }" @tap="selectAndApply(2)">品牌课程</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> <view class="list-container">
|
||||
<view v-if="skillList.length > 0">
|
||||
<skill-card
|
||||
v-for="(item, index) in skillList"
|
||||
:key="item.id || index"
|
||||
:item="item"
|
||||
@click="goToDetail(item)"
|
||||
></skill-card>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" v-else>
|
||||
<image class="empty-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/da814ede-1adc-4f90-8cdf-5357a12fab27.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 60rpx;"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from "@/utils/request"
|
||||
import SkillCard from "@/pages/home/components/skill-card.vue"
|
||||
|
||||
// 数据模式开关：true=调用真实接口，false=使用模拟数据
|
||||
const USE_REAL_API = true
|
||||
|
||||
export default {
|
||||
components: { SkillCard },
|
||||
data() {
|
||||
return {
|
||||
navHeight: 0,
|
||||
|
||||
// 排序与筛选参数
|
||||
orderType: 1, // 1:时间降序, 2:时间升序, 3:浏览量降序, 4:浏览量升序 (默认1)
|
||||
linkType: '', // '':全部, 1:平台课程, 2:品牌课程
|
||||
|
||||
filterVisible: false,
|
||||
|
||||
// 列表数据与分页
|
||||
skillList: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
isFinished: false,
|
||||
|
||||
// 排序图标资源
|
||||
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
||||
iconGreyDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dfffb601-6877-4608-a3eb-88695b05c6c2.png',
|
||||
iconPinkUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5bc84dff-e120-4d4b-a33e-25d68e065654.png',
|
||||
iconPinkDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ff2c2c9d-694a-4adf-b737-66b07f4a63ae.png',
|
||||
|
||||
// 模拟的本地全量数据（仅在 USE_REAL_API=false 时使用）
|
||||
mockDatabase: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterIcon() {
|
||||
// 漏斗图标，默认灰色
|
||||
return 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 动态计算导航栏与下拉起点
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
const sbh = sysInfo.statusBarHeight || 0
|
||||
this.navHeight = sbh
|
||||
// Navbar(44px) + SortBar(大概88rpx -> 44px) = 88px 左右
|
||||
this.filterTop = this.navHeight + uni.upx2px(106)
|
||||
|
||||
this.initMockData()
|
||||
this.fetchData(true)
|
||||
},
|
||||
// 触底加载更多
|
||||
onReachBottom() {
|
||||
if (!this.isFinished) {
|
||||
this.fetchData(false)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToSearch() {
|
||||
uni.showToast({ title: '搜索功能开发中', icon: 'none' })
|
||||
},
|
||||
|
||||
// 点击排序
|
||||
toggleSort(type) {
|
||||
if (type === 'time') {
|
||||
if (this.orderType === 1) this.orderType = 2
|
||||
else this.orderType = 1
|
||||
} else if (type === 'view') {
|
||||
if (this.orderType === 3) this.orderType = 4
|
||||
else this.orderType = 3
|
||||
}
|
||||
|
||||
this.fetchData(true)
|
||||
},
|
||||
|
||||
// 筛选面板控制
|
||||
toggleFilterPanel() {
|
||||
this.filterVisible = !this.filterVisible
|
||||
},
|
||||
closeFilterPanel() {
|
||||
this.filterVisible = false
|
||||
},
|
||||
|
||||
// 💡 匹配设计图交互：选择选项后立刻应用并收起下拉框
|
||||
selectAndApply(typeVal) {
|
||||
this.linkType = typeVal;
|
||||
this.closeFilterPanel();
|
||||
this.fetchData(true);
|
||||
},
|
||||
|
||||
// 获取列表数据 (统一入口)
|
||||
async fetchData(isReset = false) {
|
||||
if (isReset) {
|
||||
this.page = 1
|
||||
this.isFinished = false
|
||||
this.skillList = []
|
||||
}
|
||||
|
||||
if (USE_REAL_API) {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
try {
|
||||
const params = {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
order_type: this.orderType
|
||||
}
|
||||
if (this.linkType) params.link_type = this.linkType
|
||||
|
||||
const res = await request.post('/sj/skill/list', params)
|
||||
if ((res.code === 200 || res.state === 1) && res.data && res.data.list) {
|
||||
const list = res.data.list.map(item => this.formatApiData(item))
|
||||
|
||||
if (list.length < this.limit) this.isFinished = true
|
||||
this.skillList = isReset ? list : this.skillList.concat(list)
|
||||
this.page++
|
||||
} else {
|
||||
this.isFinished = true
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
} else {
|
||||
// ========== 模拟数据请求环境 ==========
|
||||
uni.showLoading({ title: '模拟加载中...' })
|
||||
setTimeout(() => {
|
||||
let list = [...this.mockDatabase]
|
||||
|
||||
// 1. 模拟筛选
|
||||
if (this.linkType) {
|
||||
list = list.filter(item => item.link_type === this.linkType)
|
||||
}
|
||||
|
||||
// 2. 模拟排序
|
||||
list.sort((a, b) => {
|
||||
if (this.orderType === 1) return b.timestamp - a.timestamp // 时间降序
|
||||
if (this.orderType === 2) return a.timestamp - b.timestamp // 时间升序
|
||||
if (this.orderType === 3) return b.views - a.views // 浏览量降序
|
||||
if (this.orderType === 4) return a.views - b.views // 浏览量升序
|
||||
return 0
|
||||
})
|
||||
|
||||
// 3. 模拟分页
|
||||
const start = (this.page - 1) * this.limit
|
||||
const end = start + this.limit
|
||||
const pageData = list.slice(start, end)
|
||||
|
||||
if (pageData.length < this.limit) this.isFinished = true
|
||||
this.skillList = isReset ? pageData : this.skillList.concat(pageData)
|
||||
this.page++
|
||||
uni.hideLoading()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化接口数据
|
||||
formatApiData(item) {
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.name,
|
||||
coverSrc: item.cover_img || 'https://dummyimage.com/300x200/ccc/fff.png',
|
||||
type: item.link_name || (item.link_type === 1 ? '平台课程' : '品牌课程'),
|
||||
link_type: item.link_type,
|
||||
views: item.browse_num || 0,
|
||||
time: item.create_time ? this.formatTimeAgo(item.create_time) : '',
|
||||
typeIcon: item.link_logo || ''
|
||||
}
|
||||
},
|
||||
|
||||
formatTimeAgo(timeStr) {
|
||||
const now = new Date()
|
||||
const time = new Date(timeStr.replace(/-/g, '/'))
|
||||
const diff = Math.floor((now - time) / 1000)
|
||||
if (diff < 3600) return Math.floor(diff / 60) + '分钟前'
|
||||
if (diff < 86400) return Math.floor(diff / 3600) + '小时前'
|
||||
if (diff < 604800) return Math.floor(diff / 86400) + '天前'
|
||||
return timeStr.split(' ')[0]
|
||||
},
|
||||
|
||||
goToDetail(item) {
|
||||
if (item.id) {
|
||||
uni.navigateTo({ url: `/pages/skill/detail?id=${item.id}` })
|
||||
} else {
|
||||
uni.showToast({ title: '详情页开发中', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化模拟数据
|
||||
initMockData() {
|
||||
this.mockDatabase = [
|
||||
{ id: 1, title: '穿戴甲的操作视频扫码验券操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836000, time: '7小时前', timestamp: Date.now() - 7*3600000 },
|
||||
{ id: 2, title: '脸部按摩操作步骤详情', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 8334, time: '1天前', timestamp: Date.now() - 24*3600000 },
|
||||
{ id: 3, title: '全身SPA的操作视频操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 2344, time: '3天前', timestamp: Date.now() - 3*24*3600000 },
|
||||
{ id: 4, title: '高级面部护理手法详解最新版', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836, time: '4月26日', timestamp: Date.now() - 30*24*3600000 },
|
||||
{ id: 5, title: '光疗美甲进阶全方位解析', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 12000, time: '2小时前', timestamp: Date.now() - 2*3600000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skill-market-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 官方作者展示块 */
|
||||
.official-author-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
background: #fff;
|
||||
border-bottom: 10rpx solid #F5F5F5;
|
||||
|
||||
.author-avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
// border: 2rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.author-name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.author-desc {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sort-bar-wrap {
|
||||
position: sticky;
|
||||
background: #fff;
|
||||
z-index: 101;
|
||||
// border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.sort-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 30rpx;
|
||||
|
||||
.left-sorts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 80rpx;
|
||||
|
||||
.sort-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sort-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-right: 6rpx;
|
||||
font-weight: 400;
|
||||
|
||||
&.active {
|
||||
color: #FF4767;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.arrow-icon {
|
||||
width: 14rpx;
|
||||
height: 8rpx;
|
||||
margin: 2rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.filter-text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
width: 18rpx;
|
||||
height: 12rpx;
|
||||
transition: transform 0.3s ease;
|
||||
&.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 30rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 抽屉筛选面板：使用 absolute 脱离计算 */
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100%; /* 从 sort-bar-wrap 底部开始向下延伸 */
|
||||
left: 0; right: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.show {
|
||||
pointer-events: auto;
|
||||
.filter-mask { opacity: 1; }
|
||||
.filter-container { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.filter-mask {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
padding: 30rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.course-filter {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.course-type-item {
|
||||
background: #F5F5F5;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
padding: 12rpx 36rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
background: #FFF0F2;
|
||||
color: #FF4767;
|
||||
border-color: #FFB0BD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
|
||||
.empty-icon {
|
||||
width: 346rpx;
|
||||
height: 373rpx;
|
||||
}
|
||||
}
|
||||
::v-deep .icon-headle {
|
||||
width: 32rpx !important;
|
||||
height: 32rpx !important;
|
||||
}
|
||||
::v-deep .back-icon {
|
||||
width: 28rpx !important;
|
||||
height: 36rpx !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue