yoe-shop-web/src/views/home/jdcomponents/JDUserPanel.vue

<template>
  <div class="user-panel">
    <!-- 顶部极淡粉色渐变背景 -->
    <div class="top-bg"></div>

    <!-- 用户信息区 -->
    <div class="u-auth flex">
      <div class="avatar">
        <img src="@/assets/jd/user_avatar.png" />
      </div>
      <div class="u-info">
        <p class="name">52k9i2wwed3jx2</p>
        <p class="links">切换企业账号<span class="divider">|</span>注册</p>
      </div>
    </div>

    <!-- 会员卡片 -->
    <div class="member-card">
       <div class="c-tag">企业会员</div>
       <div class="c-main flex-between">
         <div class="c-left">
            <div class="c-h">新人福利</div>
            <p>领3000元采购补贴</p>
         </div>
         <div class="c-btn">立即开通 <i class="arr">&gt;</i></div>
       </div>
    </div>

    <!-- 会员权益文本 -->
    <div class="card-benefits">
       <div class="b-row-1 flex-between">
          <span>大额免息</span>
          <span>充值返</span>
          <span>免费领</span>
          <span>购卡返</span>
       </div>
       <div class="b-row-2 flex-between">
          <span>账期</span>
          <span>余额</span>
          <span>优惠券</span>
          <span>礼品卡</span>
       </div>
    </div>

    <!-- 免息广告条 -->
    <div class="small-ad flex-center">
       <div class="fire-icon">
          <svg viewBox="0 0 1024 1024" width="10" height="10"><path d="M512 0C326.4 200 256 312 256 464c0 141.4 114.6 256 256 256s256-114.6 256-256c0-152-70.4-264-256-464z" fill="#fff"/></svg>
       </div>
       <span>申请免息账期 首单立减288</span>
    </div>

    <!-- 企业工作台 -->
    <div class="tools-sec relative">
      <div class="t-h flex-between">
         <span>企业工作台</span>
         <i class="icon-more">&gt;</i>
      </div>

      <!-- 滑动翻页组件 -->
      <div class="t-slider-wrap">
        <div class="t-track" :style="{ transform: `translateX(-${currentPage * 100}%)` }">

          <!-- 第 1 页 -->
          <div class="t-page">
            <div class="t-grid">
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE5IDIxSDVDNC40IDIxIDQgMjAuNiA0IDIwVjRDNCAzLjQgNC40IDMgNSAzSDE0TDIwIDlWMjBDMjAgMjAuNiAxOS42IDIxIDE5IDIxWiIvPjxwYXRoIGQ9Ik0xNCAzVjloNiIvPjxwb2x5Z29uIHBvaW50cz0iOSAxMyAxMSAxNSAxNSAxMSA5IDEzIi8+PC9zdmc+" class="t-icon" />
                 <span>订单中心</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjEwIiB5Mj0iNiIvPjxsaW5lIHgxPSI2IiB5MT0iMTAiIHgyPSIxMCIgeTI9IjEwIi8+PC9zdmc+" class="t-icon" />
                 <span>发票中心</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMkgxNVY2SDlaTTUgNlYyMkgxOVY2SDVaIi8+PGxpbmUgeDE9IjkiIHkxPSIxMiIgeDI9IjE1IiB5Mj0iMTIiLz48bGluZSB4MT0iOSIgeTE9IjE2IiB4Mj0iMTUiIHkyPSIxNiIvPjwvc3ZnPg==" class="t-icon" />
                 <span>采购清单</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDJDOC4xIDIgNSA1LjEgNSA5QzUgMTQuMiAxMiAyMiAxMiAyMiAxMkMxMiAyMiAxOSAxNC4yIDE5IDlDMTkgNS4xIDE1LjkgMiAxMiAyWiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iOSIgcj0iMiIvPjwvc3ZnPg==" class="t-icon" />
                 <span>多地下单</span>
               </div>
               <div class="t-i">
                 <div class="badge">返100</div>
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMThWMTVIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg==" class="t-icon" />
                 <span>达量返</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIvPjxwYXRoIGQ9Ik03IDlMMTEgMTVNMTUgOVYxNU0xNSA5TDEzIDEySDE3TTEzIDE1SDE3Ii8+PC9zdmc+" class="t-icon" />
                 <span>智能选品</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgMThWMTRIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg==" class="t-icon" />
                 <span>电子合同</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEyIiByeD0iMiIvPjxsaW5lIHgxPSI2IiB5MT0iMTIiIHgyPSIxMCIgeTI9IjEyIi8+PC9zdmc+" class="t-icon" />
                 <span>极速认款</span>
               </div>
            </div>
          </div>

          <!-- 第 2 页 -->
          <div class="t-page">
            <div class="t-grid">
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjIxIiByPSIxIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMSIgcj0iMSIvPjxwYXRoIGQ9Ik0xIDFoNGwyLjY4IDEzLjM5YTIgMiAwIDAgMCAyIDEuNjFoOS43MmEyIDIgMCAwIDAgMi0xLjYxTDIzIDZINiIvPjwvc3ZnPg==" class="t-icon" />
                 <span>采购报告</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iMSIgeDI9IjEyIiB5Mj0iMjMiLz48cGF0aCBkPSJNMTcgNVYzbS0xMCAyeTJoMTAiLz48cGF0aCBkPSJNNSAxNXYyaDEwIi8+PHBhdGggZD0iTTEyIDljLTIuMjEgMC00IDEuNzktNCA0cyAxLjc5IDQgNCA0Ii8+PHBhdGggZD0iTTEyIDE3YzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00Ii8+PC9zdmc+" class="t-icon" />
                 <span>对公转账</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDhWMk0xOCAyMjEtdi02Ii8+PHBhdGggZD0iTTE0IDhWMk0xNCAyMnYtNiIvPjxwYXRoIGQ9Ik0xMCA4VjJNMTAgMjJ2LTYiLz48cGF0aCBkPSJNMjIgMnY4YTUgNSAwIDAgMS01IDVoLTE0YTUgNSAwIDAgMS01LTVWMloiLz48L3N2Zz4=" class="t-icon" />
                 <span>员工饭卡</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxwb2x5Z29uIHBvaW50cz0iNiAxMCA4IDEyIDEyIDgiLz48L3N2Zz4=" class="t-icon" />
                 <span>计划购</span>
               </div>
               <div class="t-i">
                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJIMTlNMTEgMThWMk0xNiAybC01IDUtNSA1Ii8+PC9zdmc+" class="t-icon" />
                 <span>预算管理</span>
               </div>
            </div>
          </div>
        </div>

        <!-- 滑动按钮 -->
        <div class="flip-btn prev-btn" v-show="currentPage > 0" @click="currentPage--">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </div>
        <div class="flip-btn next-btn" v-show="currentPage < 1" @click="currentPage++">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const currentPage = ref(0);
</script>

<style scoped>
.user-panel {
  background: #fff;
  height: 100%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部极淡粉色渐变背景 */
.top-bg {
  position: absolute;
  top: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to bottom, #FFF5EE, #ffffff);
  z-index: 0;
}

/* 内容提升层级 */
.u-auth, .member-card, .card-benefits, .small-ad, .tools-sec {
  position: relative;
  z-index: 1;
}

.u-auth {
  padding: 16px 16px 0;
  align-items: center;
  margin-bottom: 12px;
}

.avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(255,182,193,0.3);
  margin-right: 12px;
}

.name {
  font-weight: bold;
  font-size: 14px;
  color: #000;
}

.links {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

.divider { margin: 0 6px; color: #E0E0E0; }

.member-card {
  margin: 0 16px;
  background: linear-gradient(to right, #FDF0DE, #FCE3C5);
  border-radius: 8px;
  position: relative;
  padding: 16px 12px 12px;
}

.c-tag {
  position: absolute;
  top: 0; left: 0;
  background: #11366F;
  color: #F8D9A8;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px 0 8px 0;
  font-weight: bold;
}

.c-h {
  font-weight: 800;
  font-size: 15px;
  color: #5A3515;
}

.c-left p {
  font-size: 11px;
  color: #7E5124;
  margin-top: 3px;
}

.c-btn {
  font-size: 11px;
  color: #613C1C;
  border: 1px solid #7E5124;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.c-btn .arr { font-style: normal; margin-left: 2px; font-family: sans-serif; }

.card-benefits {
  margin: 12px 16px 8px;
}

.b-row-1 {
  font-size: 12px;
  font-weight: 800;
  color: #000;
  padding: 0 4px;
}

.b-row-2 {
  font-size: 11px;
  color: #666;
  padding: 0 8px;
  margin-top: 4px;
}

.small-ad {
  margin: 0 16px 16px;
  background: #FFF7F5;
  font-size: 11px;
  color: #333;
  padding: 8px 0;
  border-radius: 4px;
}

.fire-icon {
  width: 14px;
  height: 14px;
  background: #E1251B;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.tools-sec {
  padding: 0 16px;
  flex: 1;
}

.t-h {
  font-weight: bold;
  font-size: 14px;
  color: #000;
  margin-bottom: 15px;
}

.icon-more { font-size: 12px; color: #999; font-style: normal; }

.t-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.t-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.t-page {
  width: 100%;
  flex-shrink: 0;
}

.flip-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  z-index: 10;
  transition: background 0.2s;
}
.flip-btn:hover { background: #f4f4f4; }
.prev-btn { left: 4px; }
.next-btn { right: 4px; }

.t-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px 0;
}

.t-i {
  text-align: center;
  font-size: 11px;
  color: #333;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.t-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  opacity: 0.8;
}

.badge {
  position: absolute;
  top: -8px;
  right: -2px;
  background: #FF5A5F;
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 8px 8px 8px 0;
  z-index: 2;
  border: 1px solid #fff;
  transform: scale(0.9);
}
</style>