937 lines
30 KiB
Vue
937 lines
30 KiB
Vue
<template>
|
||
<view class="homePage">
|
||
<image class="page-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0901dc51-ff5a-427f-aab1-993d80aced79.png" mode="widthFix"></image>
|
||
|
||
<view class="header-section">
|
||
<view class="user-info">
|
||
<image class="avatar" :src="currentAvatar"></image>
|
||
<view class="info-text">
|
||
<view class="name">{{ currentName }}</view>
|
||
<view class="desc">欢迎登录美融融商家版</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="status-toggle" :class="{ 'is-closed': !isOpenStore }" @tap="toggleStatus" v-if="isLogin && isSettled">
|
||
<text class="status-text">{{ isOpenStore ? '营业中' : '休息中' }}</text>
|
||
<view class="toggle-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="quick-actions card-box" v-if="isLogin && isSettled">
|
||
<view class="action-item" v-for="(item, index) in quickActions" :key="index">
|
||
<image class="action-icon" :src="item.icon"></image>
|
||
<text class="action-text">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-stats-basic card-box" v-if="isLogin && isSettled">
|
||
<view class="card-header">
|
||
<view class="header-left">
|
||
<text class="title">接单管理</text>
|
||
<text class="update-time">更新时间：{{ orderBasic.updateTime }}</text>
|
||
<image class="refresh-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/31c6eebc-5538-4c66-9b32-24dced170a99.png"></image>
|
||
</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>
|
||
<view class="stats-content">
|
||
<view class="stat-item">
|
||
<text class="num">{{ orderBasic.waitStart }}</text>
|
||
<text class="label">待开始</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="num">{{ orderBasic.waitFinish }}</text>
|
||
<text class="label">待完成</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="num">{{ orderBasic.finished }}</text>
|
||
<text class="label">已完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-stats-detail card-box" v-if="isLogin && isSettled">
|
||
<view class="card-header">
|
||
<view class="header-left">
|
||
<text class="title">当日实时数据</text>
|
||
<text class="update-time">更新时间：{{ orderDetail.updateTime }}</text>
|
||
<image class="refresh-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/31c6eebc-5538-4c66-9b32-24dced170a99.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="detail-content">
|
||
<view class="score-dashboard">
|
||
<view class="ring-track"></view>
|
||
<view class="ring-progress" :style="{'background': progressGradient}"></view>
|
||
<view class="dot start-dot" v-if="displayScore > 0"></view>
|
||
<view class="dot end-dot" v-if="displayScore > 0" :style="{'transform': `rotate(-${displayScoreDeg}deg) translateY(-67rpx)`}"></view>
|
||
<text class="score-num">{{ displayScore.toFixed(1) }}</text>
|
||
<image class="score-tag-img" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/52005bc0-2896-407d-8826-f34539637d20.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<view class="detail-grid">
|
||
<view class="grid-item">
|
||
<text class="label">访问人数</text>
|
||
<view class="val-box"><text class="val">{{ orderDetail.visitors }}</text> <text class="unit">人</text></view>
|
||
<text class="yesterday">昨日{{ orderDetail.yVisitors }}人</text>
|
||
</view>
|
||
<view class="grid-item">
|
||
<text class="label">下单量</text>
|
||
<view class="val-box"><text class="val">{{ orderDetail.orders }}</text> <text class="unit">单</text></view>
|
||
<text class="yesterday">昨日{{ orderDetail.yOrders }}单</text>
|
||
</view>
|
||
<view class="grid-item">
|
||
<text class="label">成交金额</text>
|
||
<view class="val-box"><text class="val">{{ orderDetail.amount }}</text> <text class="unit">万</text></view>
|
||
<text class="yesterday">昨日{{ orderDetail.yAmount }}万</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="settlement-guide card-box" v-if="isLogin && !isSettled">
|
||
<view class="guide-header">
|
||
<view class="guide-body">
|
||
<text class="guide-text">认证店铺信息，接单必经之路</text>
|
||
<view class="guide-btn" @tap="goToSettle">去入驻</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="notice-bar card-box">
|
||
<image class="notice-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/75f624b8-a6ed-4787-9380-1a087062805b.png"></image>
|
||
<swiper class="notice-swiper" vertical autoplay circular interval="3000">
|
||
<swiper-item v-for="(msg, index) in noticeList" :key="index" @tap="goToNotice(msg)">
|
||
<text class="notice-text line-1">{{ msg.title }}</text>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="notice-btn" @tap="goToNoticeList">点击查看</view>
|
||
</view>
|
||
|
||
<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>
|
||
|
||
<view class="brand-grid">
|
||
<brand-card
|
||
class="brand-card-wrap"
|
||
v-for="(item, index) in brands"
|
||
:key="index"
|
||
:item="item"
|
||
:tagKeys="item.tagKeys"
|
||
></brand-card>
|
||
</view>
|
||
</view>
|
||
|
||
<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>
|
||
<view class="skill-list">
|
||
<view class="skill-item" v-for="(item, index) in skills" :key="index">
|
||
<view class="cover-box">
|
||
<image class="cover" :src="item.coverSrc"></image>
|
||
<image class="play-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5c1ddfef-a200-424a-a9dc-03d9395568f6.png"></image>
|
||
</view>
|
||
<view class="skill-info">
|
||
<view class="skill-title line-2">{{ item.title }}</view>
|
||
<view class="skill-type" :class="item.typeClass">
|
||
<image class="type-icon" src="https://dummyimage.com/30x30/ccc/fff.png&text=I"></image>
|
||
<text class="type-text">{{ item.type }}</text>
|
||
</view>
|
||
<view class="skill-stats"> <image class="view-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2409b64a-56bb-4d9e-a4cc-5b3444fcf097.png"></image>{{ item.views }}观看 · {{ item.time }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 120rpx;"></view>
|
||
<TabBar :selected="0"></TabBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TabBar from "@/components/tabbar/tabbar.vue"
|
||
import projectTabs from "./components/project-tabs.vue";
|
||
import request from "@/utils/request";
|
||
import filters from "./components/filters.vue";
|
||
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
||
import BrandCard from "./components/brand-card.vue";
|
||
|
||
export default {
|
||
components: {
|
||
filters,
|
||
projectTabs,
|
||
CustomNavbar,
|
||
TabBar,
|
||
BrandCard
|
||
},
|
||
data() {
|
||
return {
|
||
isLogin: false, // 是否登录，onShow生命周期中会通过token判定
|
||
userInfo: {}, // 用户信息数据源
|
||
syrId: null,
|
||
|
||
isOpenStore: false, // true为营业中（圆点在右），false为休息中（圆点在左）。由后续逻辑决定初始化状态。
|
||
displayScore: 0,
|
||
animationTimer: null,
|
||
|
||
// 通知公告数据：预留接口，支持最新6条轮播
|
||
noticeList: [
|
||
{ id: 1, title: '商家券更新了！品牌专区上新了！', url: '/pages/...' },
|
||
{ id: 2, title: '系统维护通知：今晚凌晨将进行升级', url: '/pages/...' },
|
||
{ id: 3, title: '平台新政策发布，请及时查看', url: '/pages/...' }
|
||
],
|
||
|
||
quickActions: [
|
||
{ name: '扫码验券', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b128e423-e4b5-4ad6-bdf5-522de7a9bc68.png' },
|
||
{ name: '服务管理', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a90f02a2-9d39-440a-ad20-a4337bcd1b38.png' },
|
||
{ name: '工位管理', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4c503603-6c2f-4a7a-9329-5e54b8ca769e.png' },
|
||
{ name: '财务管理', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/728c659e-e395-4473-b83e-7e04539f7ec6.png' }
|
||
],
|
||
orderBasic: { updateTime: '15:30', waitStart: 23, waitFinish: 43, finished: 234 },
|
||
orderDetail: { updateTime: '15:30', score: '82.2', visitors: 0, yVisitors: 100, orders: 234, yOrders: 1000, amount: '1.34', yAmount: '1.4' },
|
||
|
||
brands: [
|
||
{ name: '蜜丝卡伦美甲美睫', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d02b2d8b-0e01-4c6d-bbee-c60dccf4867c.jpg', avatar: 'https://dummyimage.com/100x100/ccc/fff.png&text=Avatar', tagKeys: ['franchise', 'recruit'] },
|
||
{ name: 'ALNL 清莲爱丽', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d02b2d8b-0e01-4c6d-bbee-c60dccf4867c.jpg', avatar: 'https://dummyimage.com/100x100/ccc/fff.png&text=Avatar', tagKeys: ['recruit'] },
|
||
{ name: 'IL COLPO依宝美容', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d02b2d8b-0e01-4c6d-bbee-c60dccf4867c.jpg', avatar: 'https://dummyimage.com/100x100/ccc/fff.png&text=Avatar', tagKeys: ['franchise'] },
|
||
{ name: '蜜丝卡伦美甲美睫', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d02b2d8b-0e01-4c6d-bbee-c60dccf4867c.jpg', avatar: 'https://dummyimage.com/100x100/ccc/fff.png&text=Avatar', tagKeys: ['more'] }
|
||
],
|
||
skills: [
|
||
{ title: '穿戴甲的操作视频扫码验券操作123564798', type: '平台课程', views: '83.6万', time: '7小时前', coverSrc: 'https://dummyimage.com/200x150/ccc/fff.png&text=Video' },
|
||
{ title: '脸部按摩操作步骤详情', type: '脸缘品牌', views: '8334', time: '1天前', coverSrc: 'https://dummyimage.com/200x150/ccc/fff.png&text=Video' },
|
||
{ title: '全身SPA的操作视频操作教程', type: '平台课程', views: '2344', time: '3天前', coverSrc: 'https://dummyimage.com/200x150/ccc/fff.png&text=Video' },
|
||
{ title: '穿戴甲的操作视频扫码验券操作...', type: '平台课程', views: '836', time: '4月26日', coverSrc: 'https://dummyimage.com/200x150/ccc/fff.png&text=Video' }
|
||
]
|
||
};
|
||
},
|
||
computed: {
|
||
// 状态管理判定
|
||
// 是否已入驻 (0: 未入驻, -1: 入驻第一步, >0: 已认证) 只要不等于0，说明已经开启了入驻流程
|
||
isSettled() {
|
||
if (!this.isLogin || !this.userInfo) return false;
|
||
return this.userInfo.id_type !== 0;
|
||
},
|
||
// 是否认证通过 (根据规则，> 0 说明认证通过了)
|
||
isCertified() {
|
||
if (!this.isLogin || !this.userInfo) return false;
|
||
return this.userInfo.id_type > 0;
|
||
},
|
||
// 是否配置了营业时间
|
||
hasBusinessTime() {
|
||
return this.isLogin && !!this.userInfo.business_time;
|
||
},
|
||
|
||
// 根据登录状态动态返回头像
|
||
currentAvatar() {
|
||
if (!this.isLogin || !this.userInfo.head_photo) {
|
||
return 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4099a78b-d3bd-4cf5-8599-68dfe751af16.png'; // 默认未登录头像
|
||
}
|
||
return this.userInfo.head_photo;
|
||
},
|
||
// 根据登录状态动态返回昵称
|
||
currentName() {
|
||
if (!this.isLogin) return '未登录';
|
||
return this.userInfo.name || this.userInfo.nick_name || '手机用户';
|
||
},
|
||
displayScoreDeg() {
|
||
const score = this.displayScore || 0;
|
||
const percentage = Math.min(Math.max(score, 0), 100);
|
||
return (percentage / 100) * 360;
|
||
},
|
||
progressGradient() {
|
||
return `conic-gradient(
|
||
transparent 0deg,
|
||
transparent calc(360deg - ${this.displayScoreDeg}deg),
|
||
#FF4D4F calc(360deg - ${this.displayScoreDeg}deg),
|
||
#FF4D4F 360deg
|
||
)`;
|
||
}
|
||
},
|
||
onShow() {
|
||
// 登录判定逻辑
|
||
this.isLogin = uni.getStorageSync("accessToken") ? true : false;
|
||
if (this.isLogin) {
|
||
this.getUserInfo();
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.hideTabBar();
|
||
this.getNoticeList(); // 获取最新通知
|
||
},
|
||
mounted() {
|
||
this.animateScore();
|
||
},
|
||
watch: {
|
||
'orderDetail.score'() {
|
||
this.animateScore();
|
||
}
|
||
},
|
||
methods: {
|
||
getUserInfo() {
|
||
request.post("/sj/user/getUser").then((result) => {
|
||
this.userInfo = result.data;
|
||
uni.setStorageSync("syrId", result.data.id);
|
||
this.syrId = result.data.id;
|
||
|
||
// 获取完用户信息后，初始化营业开关的状态
|
||
this.initStoreStatus();
|
||
});
|
||
},
|
||
|
||
// 接口预留：获取通知公告（仅拉取当前角色关联的最新6条）
|
||
getNoticeList() {
|
||
// request.post('/api/notice/getLatest', { role: 'merchant', limit: 6 }).then(res => {
|
||
// this.noticeList = res.data;
|
||
// })
|
||
},
|
||
|
||
// 跳转：通知详情页
|
||
goToNotice(msg) {
|
||
if(msg.url) {
|
||
uni.navigateTo({ url: msg.url });
|
||
}
|
||
},
|
||
|
||
// 跳转：公告列表页
|
||
goToNoticeList() {
|
||
// uni.navigateTo({ url: '/pages/notice/list' });
|
||
},
|
||
|
||
// 跳转：去入驻
|
||
goToSettle() {
|
||
uni.navigateTo({ url: '/pages/ruzhu/ruzhu' });
|
||
},
|
||
|
||
// 初始化按钮状态
|
||
initStoreStatus() {
|
||
// 如果未认证，或者（已认证但未配置时间），默认都是休息中
|
||
if (!this.isCertified || (this.isCertified && !this.hasBusinessTime)) {
|
||
this.isOpenStore = false;
|
||
} else {
|
||
// 认证通过且配置了时间，根据后端真实数据控制 (self_state 1为营业, 0为休息)
|
||
this.isOpenStore = this.userInfo.self_state === 1;
|
||
}
|
||
},
|
||
|
||
// 营业中 / 休息中 按钮逻辑判断
|
||
toggleStatus() {
|
||
// 1、入驻未认证 (id_type == -1)，弹窗提示未完善项，引导完善
|
||
if (!this.isCertified) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先完善认证信息',
|
||
confirmText: '去完善',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// uni.navigateTo({ url: '/pages/artisan/syr-info-change' });
|
||
}
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 2、入驻认证通过，未配置营业时间，默认休息中，跳转至营业时间管理
|
||
if (this.isCertified && !this.hasBusinessTime) {
|
||
uni.showToast({ title: '请先配置营业时间', icon: 'none' });
|
||
setTimeout(() => {
|
||
// uni.navigateTo({ url: '/pages/shop/business-time' });
|
||
}, 800);
|
||
return;
|
||
}
|
||
|
||
// 3、认证通过并配置时间，仅作为开关，不跳转页面
|
||
if (this.isCertified && this.hasBusinessTime) {
|
||
this.isOpenStore = !this.isOpenStore;
|
||
// 预留接口：发送请求同步给后端当前状态
|
||
// request.post('/api/store/toggleStatus', { status: this.isOpenStore ? 1 : 0 });
|
||
}
|
||
},
|
||
|
||
animateScore() {
|
||
const target = parseFloat(this.orderDetail.score) || 0;
|
||
if (this.animationTimer) clearInterval(this.animationTimer);
|
||
|
||
const start = this.displayScore;
|
||
const change = target - start;
|
||
|
||
if (Math.abs(change) < 0.05) {
|
||
this.displayScore = target;
|
||
return;
|
||
}
|
||
|
||
const frames = 30;
|
||
const duration = 600;
|
||
let currentFrame = 0;
|
||
|
||
this.animationTimer = setInterval(() => {
|
||
currentFrame++;
|
||
const progress = currentFrame / frames;
|
||
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
||
|
||
this.displayScore = start + change * easeProgress;
|
||
|
||
if (currentFrame >= frames) {
|
||
this.displayScore = target;
|
||
clearInterval(this.animationTimer);
|
||
}
|
||
}, duration / frames);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f5f6f8;
|
||
}
|
||
|
||
.homePage {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
padding: 0 24rpx;
|
||
padding-top: 100rpx;
|
||
|
||
.page-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
// 通用卡片样式
|
||
.card-box {
|
||
position: relative;
|
||
z-index: 1;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
padding: 20rpx 30rpx 30rpx;
|
||
}
|
||
|
||
.more-right-icon {
|
||
width: 8rpx;
|
||
height: 14rpx;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
// 通用卡片头部
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
.title {
|
||
margin-right: 20rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #101010;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.update-time {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #8E694D;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: -4rpx;
|
||
}
|
||
.refresh-icon {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.header-right {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
// 1. 顶部信息
|
||
.header-section {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
.avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
.name {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.desc {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #858796;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
// 营业中/休息中滑块核心样式区
|
||
.status-toggle {
|
||
position: relative;
|
||
width: 173rpx;
|
||
height: 62rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 31rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
background-image: linear-gradient(
|
||
316deg,
|
||
rgba(255, 161, 203, 1) 0,
|
||
rgba(251, 143, 180, 1) 49.381741%,
|
||
rgba(255, 130, 239, 1) 100%
|
||
);
|
||
transition: all 0.3s ease;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 0; width: 100%; height: 100%;
|
||
background: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/269c1024-34ec-42af-8b20-1ce047c9851b.png") no-repeat center;
|
||
background-size: 100% 100%;
|
||
opacity: 0;
|
||
z-index: 1;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.status-text {
|
||
position: absolute;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 40rpx;
|
||
z-index: 3;
|
||
left: 22rpx;
|
||
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
|
||
.toggle-dot {
|
||
position: absolute;
|
||
top: 5rpx;
|
||
right: 5rpx;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
z-index: 3;
|
||
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
|
||
&.is-closed {
|
||
&::before {
|
||
opacity: 1;
|
||
}
|
||
.status-text {
|
||
transform: translateX(46rpx);
|
||
}
|
||
.toggle-dot {
|
||
transform: translate(-113rpx ,2rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 入驻引导卡片
|
||
.settlement-guide {
|
||
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;
|
||
}
|
||
|
||
.guide-body {
|
||
padding: 90rpx 0 50rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.guide-text {
|
||
margin-bottom: 20rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.guide-btn {
|
||
width: 534rpx;
|
||
height: 70rpx;
|
||
border-radius: 55rpx;
|
||
border: 1rpx solid #FF4767;
|
||
|
||
color: #FF4767;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2. 快捷入口
|
||
.quick-actions {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 30rpx 10rpx;
|
||
background: #F3F4FD;
|
||
|
||
.action-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.action-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-bottom: 13rpx;
|
||
}
|
||
.action-text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #101010;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. 基础订单
|
||
.order-stats-basic {
|
||
background: linear-gradient( 176deg, #F0F4FF 0%, #FFFFFF 100%);
|
||
border-radius: 20rpx;
|
||
border: 1rpx solid #FFFFFF;
|
||
.stats-content {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
text-align: center;
|
||
.num {
|
||
display: block;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
line-height: 56rpx;
|
||
font-style: normal;
|
||
}
|
||
.label {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 4. 详细订单
|
||
.order-stats-detail {
|
||
.detail-content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.score-dashboard {
|
||
position: relative;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 40rpx;
|
||
flex-shrink: 0;
|
||
|
||
.ring-track {
|
||
position: absolute;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
top: 5rpx;
|
||
left: 5rpx;
|
||
background: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4189620a-fd4f-42eb-9977-817e521b4f12.png") no-repeat center;
|
||
background-size: contain;
|
||
z-index: 1;
|
||
}
|
||
|
||
.ring-progress {
|
||
position: absolute;
|
||
top: 2rpx;
|
||
left: 0;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
mask: radial-gradient(transparent 62rpx, #000 65rpx);
|
||
-webkit-mask: radial-gradient(transparent 62rpx, #000 65rpx);
|
||
z-index: 2;
|
||
}
|
||
|
||
.dot {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 7rpx;
|
||
height: 7rpx;
|
||
background: #FF4D4F;
|
||
border-radius: 50%;
|
||
z-index: 3;
|
||
margin-top: -3.5rpx;
|
||
margin-left: -3.5rpx;
|
||
}
|
||
|
||
.start-dot {
|
||
transform: translateY(-66rpx);
|
||
}
|
||
|
||
.end-dot {
|
||
transform-origin: center center;
|
||
margin-left: -4rpx;
|
||
margin-top: -2rpx;
|
||
}
|
||
|
||
.score-num {
|
||
position: absolute;
|
||
font-family: AlimamaShuHeiTi, sans-serif;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
z-index: 3;
|
||
}
|
||
|
||
.score-tag-img {
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
width: 85rpx;
|
||
height: 35rpx;
|
||
z-index: 4;
|
||
}
|
||
}
|
||
|
||
.detail-grid {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.label {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
line-height: 33rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.val-box {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 6rpx;
|
||
|
||
.val {
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
line-height: 56rpx;
|
||
}
|
||
.unit {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
line-height: 33rpx;
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
|
||
.yesterday {
|
||
margin-top: 6rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
line-height: 33rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 5. 通知横幅 (跑马灯改造)
|
||
.notice-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 13rpx 30rpx;
|
||
background: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/3d9c6b4b-ef6f-4242-abd4-6194d13e02dc.png");
|
||
background-size: contain;
|
||
|
||
.notice-icon {
|
||
width: 25rpx;
|
||
height: 21rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.notice-swiper {
|
||
flex: 1;
|
||
height: 40rpx; // 限制高度刚好显示一行
|
||
line-height: 40rpx;
|
||
|
||
.notice-text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #30353C;
|
||
}
|
||
}
|
||
|
||
.notice-btn {
|
||
font-weight: 400;
|
||
font-size: 18rpx;
|
||
color: #8D4C1B;
|
||
padding: 2rpx 15rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid #8d4c1b50;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 6. 精选品牌 (精简后的包裹容器)
|
||
.brands-section {
|
||
padding: 20rpx 20rpx;
|
||
.brand-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.brand-card-wrap {
|
||
width: 48.5%; // 240rpx 宽度
|
||
margin-bottom: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 7. 技能集市
|
||
.skills-section {
|
||
.skill-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.skill-item {
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
&:last-child { margin-bottom: 0; }
|
||
|
||
.cover-box {
|
||
position: relative;
|
||
width: 224rpx;
|
||
height: 126rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
|
||
.cover {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.play-icon {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 39rpx; height: 39rpx;
|
||
}
|
||
}
|
||
|
||
.skill-info {
|
||
flex: 1;
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.skill-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 400;
|
||
line-height: 40rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.skill-type {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
margin-top: 10rpx;
|
||
|
||
.type-icon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 8rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.type-text {
|
||
background: #f9d3d760;
|
||
border-radius: 7rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #E55463;
|
||
line-height: 33rpx;
|
||
padding: 2rpx 10rpx;
|
||
}
|
||
}
|
||
.skill-stats {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.view-icon {
|
||
width: 26rpx;
|
||
height: 22rpx;
|
||
margin-right: 8rpx;
|
||
margin-top: -2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.line-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.line-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
|
||
}
|
||
</style> |