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

<template>
  <div class="banner-flex w flex">
    <!-- 侧边条 -->
    <div class="side-deco" v-if="isLargeScreen">
      企业专享低至5折 <i></i>
    </div>

    <!-- 轮播图 -->
    <div class="slider-box" :style="{ flex: isLargeScreen ? '0 0 540px' : '1' }">
      <img src="https://img14.360buyimg.com/babel/jfs/t1/181519/33/23577/253912/628f3a38E7b53940c/7c703080e72c8334.jpg" />
    </div>

    <!-- 复合网格 -->
    <div class="mini-grid flex-1">
      <div class="grid-wrap">
        <div class="g-item subsidy">
          <div class="g-h">企业购×百亿补贴 <span>先享后付</span></div>
          <div class="g-p-list flex">
            <div class="g-p" v-for="i in 4" :key="i">
              <img src="https://img10.360buyimg.com/n1/s200x200_jfs/t1/192131/28/13600/171542/611a1b5aE3c869e5d/13e007802874102d.jpg" />
              <p>￥69.9</p>
            </div>
          </div>
        </div>
        <div class="g-item rank">
          <div class="g-h">企业榜单 <span>同行买</span></div>
          <div class="g-rank-list flex">
             <div class="r-i flex-1" v-for="i in 2" :key="i">
               <img src="https://img13.360buyimg.com/n1/s200x200_jfs/t1/175027/2/13627/184131/611a1b7eEc1248c8b/09c3d4f4e2f4f4f4.jpg" />
               <p>电脑榜</p>
             </div>
          </div>
        </div>
        <div class="g-item store">
          <div class="g-h">品牌好店 <span>送E卡</span></div>
          <div class="store-inner flex-column flex-center">
             <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143521/1/32579/6255/63f8582bEcf959247/e16d443900331003.png" style="width:50px" />
             <p style="font-size:12px; margin-top:5px">Apple自营店</p>
          </div>
        </div>
        <div class="g-item new">
          <div class="g-h">京东新品 <span>美的新鲜</span></div>
          <div class="new-list flex">
             <div class="n-p flex-1" v-for="i in 2" :key="i">
               <img src="https://img10.360buyimg.com/n1/s200x200_jfs/t1/170942/37/13844/145826/611a1a7aE5e899b82/6e0f8087c0a6b9a9.jpg" />
             </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户面板 -->
    <div class="user-wrap" v-if="isLargeScreen">
      <div class="u-top flex-column flex-center">
         <img src="https://img11.360buyimg.com/imagetools/jfs/t1/143521/1/32579/6255/63f8582bEcf959247/e16d443900331003.png" class="avatar" />
         <p class="name">Hi, 欢迎访问</p>
         <div class="u-btns flex">
            <button class="b-login">登录</button>
            <button class="b-reg">注册</button>
         </div>
      </div>
      <div class="u-tools">
         <p class="t-h">企业工作台</p>
         <div class="t-grid">
            <div class="t-i" v-for="i in 8" :key="i">
               <i></i>
               <span>工具{{i}}</span>
            </div>
         </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const isLargeScreen = ref(window.innerWidth >= 1600);
const check = () => isLargeScreen.value = window.innerWidth >= 1600;
onMounted(() => window.addEventListener('resize', check));
onUnmounted(() => window.removeEventListener('resize', check));
</script>

<style scoped>
.banner-flex { height: 460px; margin: 10px auto; gap: 10px; }

.side-deco { width: 56px; background: #34C759; border-radius: 12px; writing-mode: vertical-lr; color: #fff; font-weight: bold; font-size: 18px; text-align: center; display: flex; align-items: center; justify-content: center; letter-spacing: 4px; }

.slider-box { border-radius: 12px; overflow: hidden; background: #eee; }
.slider-box img { width: 100%; height: 100%; object-fit: cover; }

.mini-grid { }
.grid-wrap { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.g-item { background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.g-h { font-weight: bold; font-size: 14px; margin-bottom: 10px; }
.g-h span { color: #FF9500; font-size: 12px; float: right; font-weight: normal; }

.g-p-list { gap: 5px; flex: 1; }
.g-p { flex: 1; text-align: center; }
.g-p img { width: 100%; border-radius: 4px; }
.g-p p { color: #E1251B; font-size: 12px; font-weight: bold; }

.g-rank-list { gap: 10px; flex: 1; }
.r-i { background: #F7F8FA; border-radius: 6px; padding: 5px; text-align: center; }
.r-i img { width: 100%; border-radius: 4px; }
.r-i p { font-size: 11px; margin-top: 3px; }

.user-wrap { width: 230px; background: #fff; border-radius: 12px; padding: 15px; }
.avatar { width: 50px; height: 50px; border-radius: 25px; }
.name { margin-top: 10px; font-weight: bold; }
.u-btns { margin-top: 15px; gap: 10px; }
.u-btns button { padding: 4px 15px; border-radius: 12px; border: none; font-size: 12px; cursor: pointer; }
.b-login { background: #E1251B; color: #fff; }
.b-reg { background: #333; color: #e5d790; }

.u-tools { margin-top: 20px; }
.t-h { font-weight: bold; font-size: 13px; margin-bottom: 10px; }
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.t-i { text-align: center; font-size: 11px; color: #666; }
.t-i i { display: block; width: 24px; height: 24px; background: #f4f4f4; border-radius: 50%; margin: 0 auto 5px; }

@media screen and (max-width: 1599px) {
  .banner-flex { height: auto; min-height: 400px; }
  .grid-wrap { grid-template-rows: auto; }
}
</style>