mrr.sj.front/pages/home/home.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" @tap="handleQuickAction(item)">
        <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" @tap="fetchOrderNum"></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" @tap="fetchRealTimeData"></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 && !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">{{ isSettled ? '完成认证，开启您的接单之路' : '入驻美融融，生意更轻松' }}</text>
            <view class="guide-btn" @tap="goToSettle">{{ isSettled ? '去认证' : '去入驻' }}</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" @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">
        <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" @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 
          v-for="(item, index) in skills" 
          :key="index" 
          :item="item"
        ></skill-card>
      </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";
import SkillCard from "./components/skill-card.vue";

export default {
  components: {
    filters,
    projectTabs,
    CustomNavbar,
    TabBar,
    BrandCard,
    SkillCard
  },
  data() {
    return {
      isLogin: false, 
      userInfo: {},   
      sjId: null,

      displayScore: 0, 
      animationTimer: null,

      noticeList: [
        { id: 0, title: '暂无最新公告', url: '' }
      ],

      quickActions: [
        { name: '扫码验券', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b128e423-e4b5-4ad6-bdf5-522de7a9bc68.png' , path: '/pages/shop/verify/verify-order'},
        { name: '服务管理', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a90f02a2-9d39-440a-ad20-a4337bcd1b38.png' , path: '/pages/artisan/service-list'},
        { name: '工位管理', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4c503603-6c2f-4a7a-9329-5e54b8ca769e.png' , path: '/pages/shop/workSpace/list'},
        { name: '财务管理', icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/728c659e-e395-4473-b83e-7e04539f7ec6.png' , path: '/pages/wallet/wallet'}
      ],
      orderBasic: { updateTime: '--:--', waitStart: 0, waitFinish: 0, finished: 0 },
      orderDetail: { updateTime: '--:--', score: '0.0', visitors: 0, yVisitors: 0, orders: 0, yOrders: 0, amount: '0.00', yAmount: '0.00' },

      brands: [],
      skills: []
    };
  },
  computed: {
    // 营业状态：true(营业中) / false(休息中)
    isOpenStore() {
      return this.userInfo.order_taking === 1;
    },
    // 状态管理判定
    // 是否已入驻 (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();
    }
    // 通知、品牌、技能 这三个接口不强依赖登录，无论登没登录都获取
    this.fetchNoticeList();
    this.fetchBrandList();
    this.fetchSkillList();
  },
  onLoad() {
    uni.hideTabBar();
  },
  watch: {
    'orderDetail.score'() {
      this.animateScore();
    }
  },
  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) => {
          console.error('跳转失败：', err);
        }
      });
      return;
      } // 2. 通用跳转逻辑
      else if (item.path) {
        uni.navigateTo({
          url: item.path,
          fail: () => {
            uni.showToast({ title: '页面开发中...', icon: 'none' });
          }
        });
      }
    },

    // 格式化时间 (提取 HH:mm)
    formatTime(dateTimeStr) {
      if (!dateTimeStr) return '--:--';
      const arr = dateTimeStr.split(' ');
      if (arr.length > 1) {
        return arr[1].substring(0, 5); // 截取 HH:mm
      }
      return dateTimeStr;
    },

    getUserInfo() {
      request.post("/sj/user/getUser").then((result) => {
        if(result.code === 200 && result.data) {
          this.userInfo = result.data;
          uni.setStorageSync("sjId", result.data.id);
          this.sjId = result.data.id;
          // 获取完用户信息后，初始化营业开关的状态
          this.initStoreStatus();

          // 如果已入驻，才获取接单管理和实时数据
          if (this.isSettled) {
            this.fetchOrderNum();
            this.fetchRealTimeData();
          }
        }
      });
    },

    // 获取：接单管理不同状态订单数量
    fetchOrderNum() {
      request.post("/sj/poster/orderNum").then(res => {
        if(res.code === 200 && res.data) {
          this.orderBasic = {
            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，或后期让后端加字段
          };
        }
      });
    },

    // 获取：首页实时数据
    fetchRealTimeData() {
      request.post("/sj/poster/realTimeData").then(res => {
        if(res.code === 200 && res.data) {
          const today = res.data.today || {};
          const yesterday = res.data.yesterday || {};
          
          this.orderDetail = {
            updateTime: this.formatTime(res.data.now_date),
            score: today.rating_num || 0,
            visitors: today.visitor_num || 0,
            yVisitors: yesterday.visitor_num || 0,
            orders: today.place_order || 0,
            yOrders: yesterday.place_order || 0,
            amount: today.deal_money || 0,
            yAmount: yesterday.deal_money || 0
          };
        }
      });
    },

    // 获取：通知公告列表
    fetchNoticeList() {
      request.post('/sj/notice/list', { page: 1, limit: 6 }).then(res => {
        if(res.code === 200 && res.data && res.data.list.length > 0) {
          this.noticeList = res.data.list;
        }
      });
    },

    // 获取：品牌列表
    fetchBrandList() {
      // 假设首页只拉取推荐的前4条
      request.post('/sj/brand/list', { page: 1, limit: 4 }).then(res => {
        if(res.code === 200 && res.data && res.data.list) {
          this.brands = res.data.list.map(item => {
            let tags = [];
            // 根据接口字段动态生成标签映射
            if (item.franchise_state === 1) tags.push('franchise');
            if (item.student_state === 1) tags.push('recruit');
            if (tags.length === 0) tags.push('more'); 
            
            return {
              id: item.id,
              name: item.name,
              bgSrc: item.cover_img || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d02b2d8b-0e01-4c6d-bbee-c60dccf4867c.jpg',
              avatar: item.logo_img || 'https://dummyimage.com/100x100/ccc/fff.png&text=Avatar',
              tagKeys: tags
            };
          });
        }
      });
    },

    // 获取：技能集市列表
    fetchSkillList() {
      request.post('/sj/skill/list', { page: 1, limit: 4 }).then(res => {
        if(res.code === 200 && res.data && res.data.list) {
          this.skills = res.data.list.map(item => {
            return {
              id: item.id,
              title: item.name,
              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',
              typeIcon: item.link_logo || ''
            };
          });
        }
      });
    },

    // 跳转：通知详情页
    goToNotice(msg) {
      if(msg.id) {
        uni.navigateTo({ url: `/pages/notice/detail?id=${msg.id}` });
      }
    },

    // 跳转：公告列表页
    goToNoticeList() {
      uni.navigateTo({ url: '/pages/notice/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() {
      if (!this.isCertified) {
        uni.showModal({ title: '提示', content: '请先完善认证信息', confirmText: '去完善' });
        return;
      }
      if (this.isCertified && !this.hasBusinessTime) {
        uni.showToast({ title: '请先配置营业时间', icon: 'none' });
        return;
      }
      let newStatus = this.userInfo.order_taking == 1 ? 2 : 1;
      request.post("/sj/sjordertaking", {
        order_taking: newStatus,
        sjid: this.sjId 
      }).then((res) => {
        this.getUserInfo();
        uni.showToast({ title: newStatus == 1 ? '已开启营业' : '已休息', icon: 'none' });
      });
    },
    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;
      }
    }

    .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-size: cover;
        /* 背景图由动态 style 接管 */
      }

      .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: 35rpx;
          border: 1rpx solid #FF4767;
          
          color: #FF4767;
          font-weight: 500;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .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;
        }
      }
    }

    .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;
        }
      }
    }

    .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;
            }
          }
        }
      }
    }

    .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;
      }
    }

    .brands-section {
      padding: 20rpx 20rpx;
      .brand-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
        .brand-card-wrap {
          width: 48.5%; 
          margin-bottom: 14rpx;
        }
      }
    }

    .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>