yoe-shop-web/src/views/home/index.vue

<template>
  <div class="home-pages">
    <!--  头部 -->
    <div class="home-head" @mouseleave="leaveClassify">
      <div class="classify" :class="classifyShow ? 'classify-show' : ''">
        <div
          class="classify-list"
          v-for="(item, index) in classifyList"
          :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
          :key="index"
          @mouseenter="enterClassify(item)"
          v-show="classifyShow ? true : Number(index) < 13"
        >
          <div class="label ellipsis" @click="onPath('/search?type=1&topCategoryId=' + item.id)">{{ item.label }}</div>
          <div class="info info1 ellipsis" v-if="item.extra && item.extra.oneLable1">{{ item.extra.oneLable1 }}</div>
          <div class="info ellipsis" v-if="item.extra && item.extra.oneLable2">{{ item.extra.oneLable2 }}</div>
          <div class="classify-border" v-if="item.id == classifyId && classifyShow"></div>
        </div>
      </div>
      <div class="classify-bos" v-if="classifyShow">
        <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
          <div class="two-level ellipsis">{{ item.label || '' }}</div>
          <el-icon class="classify-icon" :size="14" color="#364153">
            <ArrowRight />
          </el-icon>
          <div class="classify-label">
            <div v-for="(item1, index1) in item.children" :key="index1" @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)">
              {{ item1.label || '' }}
            </div>
          </div>
        </div>
      </div>
      <div class="head-bos">
        <div class="carousel">
          <el-carousel trigger="click" height="407px">
            <el-carousel-item v-for="item in carouselList" :key="item">
              <img :src="item.imageUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="head-box">
          <div v-for="(item, index) in AdList" :key="index" class="head-item" @click="onPath('/plan?id=' + item.id)">
            <img :src="item.imageUrl" alt="" />
            <!-- <div class="head-title">
              <div class="head1">{{ item.title }}</div>
              <div class="head2 flex-row-center">
                <div>查看方案</div>
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="head-right">
        <div class="login-bos">
          <div class="login-box">
            <img :src="userInfo.avatar ? userInfo.avatar : profile" alt="" />
            <div>
              <div class="login1">您好,欢迎来到优易达</div>
              <div class="login2">{{ userInfo.nickName ? userInfo.nickName : '请先登录' }}</div>
            </div>
          </div>
          <div class="login-btn">
            <el-button v-if="!userInfo.nickName" type="primary" round size="small" style="width: 64px" @click="onPath('/login')">登录</el-button>
            <el-button v-if="!userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onPath('/reg')">注册</el-button>
            <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onPath('/reg')">退出</el-button>
          </div>
        </div>
        <div class="real-time">
          <div class="real-title flex-row-between">
            <div class="real1">优易资讯</div>
            <div class="real2 flex-row-start">
              <div>更多</div>
              <el-icon :size="13" color="#83899F">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
          <template v-for="(item, index) in realList" :key="index">
            <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
          </template>
        </div>
        <div class="interests">
          <div class="interests-title">企业会员权益</div>
          <div class="interests-bos">
            <div v-for="(item, index) in interestsList" :key="index" class="interests-item flex-column-center">
              <img :src="item.imageUrl" alt="" />
              <div>{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门方案 -->
    <div class="home-title flex-row-between">
      <div>
        <span class="title1">{{ hotTitle.title }}</span>
        <span class="title2">{{ hotTitle.subtitle }}</span>
      </div>
      <div class="title-more flex-row-start" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/plan', 2)">
        <div style="margin-right: 5px">{{ hotTitle.linkWord }}</div>
        <el-icon :size="13" color="#83899F">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="hot-bos">
      <template v-for="(item, index) in hotList" :key="index">
        <div class="hot-list flex-column-center" v-if="Number(index) < 4" @click="onPath('/plan_info?id=' + item.id)">
          <div class="hot1">{{ item.advertTitle }}</div>
          <div class="hot2">{{ item.advertBrief }}</div>
          <img :src="item.coverImage" alt="" />
        </div>
      </template>
    </div>
    <!-- 场景采购 -->
    <div class="home-title flex-row-between">
      <div>
        <span class="title1">{{ sceneTitle.title }}</span>
        <span class="title2">{{ sceneTitle.subtitle }}</span>
      </div>
      <div class="title-more flex-row-start" @click="onPath(sceneTitle.linkUrl ? sceneTitle.linkUrl : '/plan/procure', 2)">
        <div style="margin-right: 5px">{{ sceneTitle.linkWord }}</div>
        <el-icon :size="13" color="#83899F">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="scene-bos">
      <template v-for="(item, index) in sceneList" :key="index">
        <div class="scene-list" v-if="Number(index) < 5" @click="onPath('/plan_info?id=' + item.id)">
          <div class="scene-box">
            <div class="scene1">{{ item.advertTitle }}</div>
            <div class="scene2">{{ item.advertBrief }}</div>
          </div>
          <img :src="item.coverImage" alt="" />
        </div>
      </template>
    </div>
    <!-- 大牌推荐 -->
    <div class="home-title flex-row-between">
      <div>
        <span class="title1">{{ bigbrandTitle.title }}</span>
        <span class="title2">{{ bigbrandTitle.subtitle }}</span>
      </div>
      <div class="title-more flex-row-start">
        <div style="margin-right: 5px">{{ bigbrandTitle.linkWord }}</div>
        <el-icon :size="13" color="#83899F">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="big-brand">
      <img class="bigBrand-one" :src="bigbrandOne.coverImage" alt="" />
      <div class="bigBrand-bos">
        <template v-for="(item, index) in bigbrandList" :key="index">
          <div class="bigBrand-list" v-if="Number(index) < 10">
            <img :src="item.coverImage" alt="" />
            <div class="bigBrand1">{{ item.advertTitle || '' }}</div>
            <div class="bigBrand2">
              {{ item.advertBrief || '' }}
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 行家精选 -->
    <div class="home-title flex-row-between">
      <div>
        <span class="title1">{{ expertTitle.title }}</span>
        <span class="title2">{{ expertTitle.subtitle }}</span>
      </div>
      <div class="title-more flex-row-start" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/search/special', 2)">
        <div style="margin-right: 5px">{{ expertTitle.linkWord }}</div>
        <el-icon :size="13" color="#83899F">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="expert-bos">
      <template v-for="(item, index) in expertList" :key="index">
        <div class="expert-list" v-if="Number(index) < 5" @click="onPath('/item?id=' + item.id)">
          <img :src="item.productImage" alt="" />
          <div class="itemName ellipsis">{{ item.itemName || '' }}</div>
          <div class="price">
            <span class="memberPrice">¥{{ item.memberPrice }}</span>
            <span class="marketPrice">¥{{ item.marketPrice }}</span>
          </div>
        </div>
      </template>
    </div>
    <!-- 采购指南 -->
    <div class="home-title flex-row-between">
      <div>
        <span class="title1">{{ procureTitle.title }}</span>
        <span class="title2">{{ procureTitle.subtitle }}</span>
      </div>
      <div class="title-more flex-row-start" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/plan/guide', 2)">
        <div style="margin-right: 5px">{{ procureTitle.linkWord }}</div>
        <el-icon :size="13" color="#83899F">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="procure-bos">
      <template v-for="(item, index) in expertList" :key="index">
        <div class="procure-list" v-if="Number(index) < 3">
          <img :src="item.productImage" alt="" />
          <div class="procure1">{{ item.itemName || '办公室' }}</div>
          <div class="procure2">{{ item.itemName || '干款好礼·百大品牌·个性定制' }}</div>
        </div>
      </template>
    </div>
    <!-- 循环-商品 -->
    <div v-for="(item1, index1) in homeList" :key="index1">
      <!-- 头部 -->
      <div class="home-title flex-row-between">
        <div>
          <span class="title1">{{ item1.floorName }}</span>
          <span class="title2">{{ item1.floorDescribe }}</span>
        </div>
        <div class="title-more flex-row-start">
          <div style="margin-right: 5px">{{ item1.floorLabel }}</div>
          <el-icon :size="13" color="#83899F">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
      <!-- 商品 -->
      <div class="goods-bos" v-if="item1.imgOne">
        <img class="goods-img" :src="item1.imgOne" alt="" />
        <div class="home1-bos" v-if="item1.home1List && item1.home1List.length > 0">
          <div class="floorName">{{ item1.floorName }}</div>
          <div v-for="(item2, index2) in item1.home1List" :key="index2" class="home1-list">
            <img :src="item2.img" alt="" />
            <div style="flex: 1; width: 0">
              <div class="advertiseName">{{ item2.advertiseName }}</div>
              <div class="advertiseDescribe ellipsis">{{ item2.advertiseDescribe }}新政策执行中心城中心城中心啊实打实大苏打实打实水水的</div>
            </div>
          </div>
        </div>
        <div class="home2-bos" v-if="item1.home2List && item1.home2List.length > 0">
          <div>
            <div class="floorName">发现</div>
            <div class="home2-box">
              <div v-for="(item2, index2) in item1.home2List" :key="index2" class="home2-list">
                <div style="flex: 1; width: 0">
                  <div class="advertiseName ellipsis">{{ item2.advertiseName }}</div>
                  <div class="advertiseDescribe ellipsis">{{ item2.advertiseDescribe }}</div>
                  <el-button class="bnt" type="primary" size="small">立即进入</el-button>
                </div>
                <img :src="item2.img" alt="" />
              </div>
            </div>
          </div>
          <div class="home2-two" v-if="item1.infoTwo">
            <div class="advertiseName">{{ item1.infoTwo.advertiseName }}</div>
            <div class="advertiseDescribe">{{ item1.infoTwo.advertiseDescribe }}</div>
            <img :src="item1.infoTwo.img" alt="" />
          </div>
        </div>
      </div>
      <div class="shop-bos">
        <div class="shop-nav">
          <div class="nav-title">采购导航</div>
          <div class="nav-bos">
            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center" :class="index2 == 0 ? 'hig' : ''">
              {{ item2.labelName }}
            </div>
          </div>
        </div>
        <template v-for="(item2, index2) in item1.shopList" :key="index2">
          <div class="shop-list" v-if="Number(index2) < 4" @click="onInfo(item2)">
            <img :src="item2.productImage" alt="" />
            <div class="itemName">{{ item2.itemName }}</div>
            <div class="price">
              <span class="memberPrice">¥{{ item2.memberPrice }}</span>
              <span class="marketPrice">¥{{ item2.marketPrice }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 项目案例 -->
    <div class="home-title flex-row-between">
      <div>
        <span class="title1">{{ projectTitle.title }}</span>
        <span class="title2">{{ projectTitle.subtitle }}</span>
      </div>
      <div class="title-more flex-row-start" @click="onPath(projectTitle.linkUrl ? projectTitle.linkUrl : '/plan/project', 2)">
        <div style="margin-right: 5px">{{ projectTitle.linkWord }}</div>
        <el-icon :size="13" color="#83899F">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="project-bos">
      <template v-for="(item, index) in projectList" :key="index">
        <div class="project-list" v-if="Number(index) < 3">
          <img :src="item.uploadProgram" alt="" />
          <div class="project-box">
            <div class="project1">{{ item.caseTitle || '' }}</div>
            <div class="project2">
              {{ item.projectBrief || '' }}
            </div>
            <div class="project-more flex-row-between">
              <div></div>
              <div class="flex-row-start">
                <div style="margin-right: 5px">了解详情</div>
                <el-icon :size="14" color="#E7000B"><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import profile from '@/assets/images/profile.jpg';
import { onPath } from '@/utils/siteConfig';
import { getToken } from '@/utils/auth';
import { getInfo } from '@/api/login';
import {
  getProductCategoryTree,
  getHomeAdList,
  getYouYiZiXunPage,
  getEnterpriseMemberEquityList,
  getHomeThreeAdList,
  getHotSchemeTitle,
  getHotSchemeList,
  getScenePurchaseTitle,
  getScenePurchaseList,
  getPlatformFlashSaleTitle,
  getPlatformFlashSaleList,
  getExpertSelectionTitle,
  getPurchaseGuideTitle,
  getExpertSelectionList,
  getClassificationFloorList,
  getClassificationFloorDetail,
  getClassificationFloorLabel,
  getClassificationFloorDetail2,
  getProjectCaseTitle,
  getProjectCaseList
} from '@/api/home/index';

const userInfo = ref<any>({});
const classifyList = ref<any>([]);
const classifyShow = ref<any>(false);
const classifyId = ref<any>('');
const classifyInfo = ref<any>([]);
const carouselList = ref<any>([]);
const realList = ref<any>([]);
const interestsList = ref<any>([]);
const AdList = ref<any>([]);
const hotTitle = ref<any>('');
const hotList = ref<any>([]);
const sceneTitle = ref<any>('');
const sceneList = ref<any>([]);
const expertTitle = ref<any>('');
const expertList = ref<any>([{}, {}, {}, {}, {}]);
const procureTitle = ref<any>('');
const procureList = ref<any>([{}, {}, {}, {}, {}]);
const projectTitle = ref<any>('');
const projectList = ref<any>([{}, {}, {}, {}, {}]);

const bigbrandTitle = ref<any>('');
const bigbrandList = ref<any>([]);
const bigbrandOne = ref<any>({});

const homeList = ref<any>([]);
const router = useRouter();

onMounted(() => {
  if (getToken()) {
    getInfo().then((res) => {
      if (res.code == 200) {
        userInfo.value = res.data.user;
      }
    });
  }
});

//移入分类
const enterClassify = (res: any) => {
  classifyShow.value = true;
  classifyId.value = res.id;
  classifyInfo.value = res.children;
};

//移出分类
const leaveClassify = () => {
  classifyShow.value = false;
};

//头部分类
import { categoryStore } from '@/store/modules/category';
const categoryStoreStore = categoryStore();
onMounted(async () => {
  try {
    // 根据当前路由路径获取分类数据
    classifyList.value = await categoryStoreStore.fetchCategories('/index');
  } catch (error) {
    console.error('获取分类失败:', error);
  }
});

//头部轮播
getHomeAdList({}).then((res) => {
  if (res.code == 200) {
    carouselList.value = res.data;
  }
});

//头部优易资讯
getYouYiZiXunPage({}).then((res) => {
  if (res.code == 200) {
    realList.value = res.data;
  }
});

//头部会员权益
getEnterpriseMemberEquityList({}).then((res) => {
  if (res.code == 200) {
    interestsList.value = res.data;
  }
});

//首页三联广告(平台装修-楼层广告-首页三联广告)
getHomeThreeAdList({}).then((res) => {
  if (res.code == 200) {
    AdList.value = res.data;
  }
});

//热门方案标题
getHotSchemeTitle({}).then((res) => {
  if (res.code == 200) {
    hotTitle.value = res.data;
  }
});

//热门方案列表
getHotSchemeList({}).then((res) => {
  if (res.code == 200) {
    hotList.value = res.data;
  }
});

//场景采购标题
getScenePurchaseTitle({}).then((res) => {
  if (res.code == 200) {
    sceneTitle.value = res.data;
  }
});

//场景采购列表
getScenePurchaseList({}).then((res) => {
  if (res.code == 200) {
    sceneList.value = res.data;
  }
});

//大牌推荐标题（平台闪购标题）
getPlatformFlashSaleTitle({}).then((res) => {
  if (res.code == 200) {
    bigbrandTitle.value = res.data;
  }
});

//大牌推荐列表（平台闪购列表）
getPlatformFlashSaleList({}).then((res) => {
  if (res.code == 200) {
    if (res.data.length > 0) {
      bigbrandOne.value = res.data[0];
      bigbrandList.value = res.data.slice(1);
    }
  }
});

//行家精选标题
getExpertSelectionTitle({}).then((res) => {
  if (res.code == 200) {
    expertTitle.value = res.data;
  }
});

//行家精选列表
getExpertSelectionList({}).then((res) => {
  if (res.code == 200) {
    expertList.value = res.data;
  }
});

//采购指南标题
getPurchaseGuideTitle({}).then((res) => {
  if (res.code == 200) {
    procureTitle.value = res.data;
  }
});

//项目案例标题（平台装修-项目案例）
getProjectCaseTitle({}).then((res) => {
  if (res.code == 200) {
    projectTitle.value = res.data;
  }
});

//项目案例列表（平台装修-项目案例）
getProjectCaseList({}).then((res) => {
  if (res.code == 200) {
    projectList.value = res.data;
  }
});

//外面循环
getClassificationFloorList({}).then(async (res) => {
  if (res.code == 200) {
    for (const item of res.data) {
      try {
        const datas1 = await getClassificationFloorDetail(item.floorNo);
        if (datas1.code == 200) {
          if (datas1.data.length > 0) {
            item.imgOne = datas1.data[0];
            if (datas1.data.length > 1) {
              item.home1List = datas1.data.slice(1, 4);
            }
            if (datas1.data.length > 4) {
              item.home2List = datas1.data.slice(4, 6);
            }
            if (datas1.data.length > 6) {
              item.infoTwo = datas1.data[6];
            }
          }
        }

        const datas2 = await getClassificationFloorLabel(item.floorNo);
        if (datas2.code == 200) {
          item.navList = datas2.data;
        }

        const datas3 = await getClassificationFloorDetail2(item.floorNo);
        if (datas2.code == 200) {
          item.shopList = datas3.data;
        }
      } catch (error) {}
    }

    homeList.value = res.data;
  }
});

const onInfo = (res: any) => {
  router.push('/shop/info?id=' + res.id);
};
</script>

<style lang="scss" scoped>
.home-pages {
  width: 1200px;
  margin: 0 auto;

  // 头部
  .home-head {
    width: 1200px;
    position: relative;
    display: flex;
    gap: 0px 10px;

    .classify {
      width: 234px;
      height: 540px;
      background: #ffffff;
      &.classify-show {
        position: absolute;
        z-index: 10;
        height: auto;
        min-height: 540px;
      }

      .classify-list {
        width: 100%;
        height: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding-left: 15px;
        position: relative;

        &.classify-hig {
          border: 1px solid var(--el-color-primary);
          border-right: 0px solid var(--el-color-primary);
        }

        .label {
          max-width: 100px;
          font-weight: 600;
          font-size: 14px;
          color: #101828;
          white-space: nowrap;
          margin-right: 10px;

          &:hover {
            color: var(--el-color-primary);
          }
        }

        .info {
          max-width: 50px;
          font-size: 12px;
          color: #364153;
          white-space: nowrap;

          &.info1 {
            margin-right: 6px;
          }

          &:hover {
            color: var(--el-color-primary);
          }
        }

        .classify-border {
          position: absolute;
          right: -1px;
          top: 0px;
          width: 1px;
          height: 38px;
          background-color: #ffffff;
          z-index: 2;
        }
      }
    }

    .classify-bos {
      position: absolute;
      top: 0;
      right: 0;
      width: 966px;
      height: 100%;
      border: 1px solid var(--el-color-primary);
      background-color: #ffffff;
      overflow-y: auto;
      padding-left: 30px;
      z-index: 10;

      .classify-item {
        display: flex;
        padding-top: 10px;
        border-bottom: 1px solid #e5e7eb;

        .two-level {
          width: 90px;
          font-size: 14px;
          color: var(--el-color-primary);
          cursor: pointer;
        }

        .classify-icon {
          margin: 4px 15px 0 15px;
        }

        .classify-label {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          font-size: 14px;
          color: #364153;

          div {
            margin-right: 20px;
            margin-bottom: 10px;
            cursor: pointer;

            &:hover {
              color: var(--el-color-primary);
            }
          }
        }
      }
    }

    // 头部中间
    .head-bos {
      width: 756px;

      .carousel {
        width: 756px;
        height: 407px;
        background: #ffffff;

        img {
          width: 756px;
          height: 407px;
        }
      }

      .head-box {
        width: 756px;
        height: 122px;
        margin-top: 10px;
        display: flex;
        gap: 0 10px;
        .head-item {
          flex: 1;
          background-color: #ffffff;
          height: 122px;
          display: flex;
          // padding-left: 20px;
          align-items: center;
          cursor: pointer;
          border-radius: 5px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            // width: 84px;
            // height: 84px;
            // margin-right: 10px;
            // border-radius: 10px;
          }
          .head-title {
            .head1 {
              font-weight: 550;
              font-size: 22px;
              color: #101828;
            }
            .head2 {
              width: 76px;
              height: 21px;
              border-radius: 34px;
              border: 1px solid #000000;
              font-size: 12px;
              color: #000000;
              margin-top: 6px;
            }
          }
        }
      }
    }

    //右边
    .head-right {
      flex: 1;
      width: 0;
      height: 540px;
      background: #ffffff;
      display: flex;
      flex-direction: column;

      .login-bos {
        width: calc(100% - 20px);
        height: 110px;
        border-bottom: 1px solid #e5e7eb;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px 0;

        .login-box {
          display: flex;
          align-items: center;

          img {
            width: 40px;
            height: 40px;
            margin-right: 8px;
            border-radius: 40px;
          }

          .login-btn {
            width: 100%;
          }

          .login1 {
            font-size: 13px;
            color: #444444;
          }

          .login2 {
            margin-top: 2px;
            font-size: 12px;
            color: #6a7282;
          }
        }
      }

      .real-time {
        width: calc(100% - 20px);
        height: 227px;
        border-bottom: 1px solid #e5e7eb;
        margin: 0 10px;
        padding-top: 15px;

        .real-title {
          position: relative;
          margin-bottom: 12px;

          &::after {
            content: '';
            top: 3px;
            left: 0;
            position: absolute;
            width: 4px;
            height: 14px;
            background: var(--el-color-primary);
          }

          .real1 {
            font-weight: 600;
            font-size: 14px;
            color: #1d2129;
            padding-left: 15px;
          }

          .real2 {
            font-size: 13px;
            color: #83899f;
            cursor: pointer;
          }
        }

        .real-list {
          width: 100%;
          font-size: 14px;
          color: #1d2129;
          margin-bottom: 12px;
          cursor: pointer;

          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      .interests {
        flex: 1;
        width: calc(100% - 20px);
        margin: 0 10px;
        padding-top: 15px;

        .interests-title {
          position: relative;
          font-weight: 600;
          font-size: 14px;
          color: #1d2129;
          padding-left: 15px;

          &::after {
            content: '';
            top: 3px;
            left: 0;
            position: absolute;
            width: 4px;
            height: 14px;
            background: var(--el-color-primary);
          }
        }

        .interests-bos {
          display: flex;
          flex-wrap: wrap;

          .interests-item {
            width: 33.333%;
            font-size: 12px;
            color: #101828;
            margin-top: 15px;
            cursor: pointer;

            &:hover {
              color: var(--el-color-primary);
            }

            img {
              width: 34px;
              height: 34px;
              margin-bottom: 7px;
            }
          }
        }
      }
    }
  }

  //标题
  .home-title {
    width: 1200px;
    height: 56px;
    background: #ffffff;
    margin-top: 30px;
    padding: 0 20px;

    .title1 {
      font-weight: 600;
      font-size: 20px;
      color: #101828;
    }

    .title2 {
      font-size: 14px;
      color: #364153;
      margin-left: 10px;
    }

    .title-more {
      font-size: 14px;
      color: #364153;
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  //热门方案
  .hot-bos {
    height: 176px;
    width: 1200px;
    display: flex;
    gap: 0 18px;
    margin-top: 12px;

    .hot-list {
      flex: 1;
      height: 176px;
      background: #ffffff;
      border-radius: 10px 10px 10px 10px;
      cursor: pointer;

      .hot1 {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
      }

      .hot2 {
        font-size: 14px;
        color: #364153;
        margin: 2px 0 14px 0;
      }

      img {
        width: 80px;
        height: 80px;
      }
    }
  }

  // 场景采购
  .scene-bos {
    height: 304px;
    width: 1200px;
    display: flex;
    gap: 0 18px;
    margin-top: 12px;

    .scene-list {
      flex: 1;
      height: 304px;
      background: #ffffff;
      position: relative;
      cursor: pointer;

      .scene-box {
        padding-top: 35px;
        position: absolute;
        z-index: 2;
        width: 100%;

        .scene1 {
          font-weight: 600;
          font-size: 30px;
          color: #ffffff;
          text-align: center;
          width: 100%;
        }

        .scene2 {
          font-size: 17px;
          color: #ffffff;
          text-align: center;
          width: 100%;
          margin-top: 4px;
        }
      }

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #f4f4f4;
      }
    }
  }

  // 大牌推荐
  .big-brand {
    height: 334px;
    width: 1200px;
    margin-top: 12px;
    display: flex;

    .bigBrand-one {
      width: 233px;
      height: 334px;
      margin-right: 10px;
    }

    .bigBrand-bos {
      flex: 1;
      width: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .bigBrand-list {
        width: 183.4px;
        height: 162px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px 20px 0 20px;

        img {
          width: 152px;
          height: 29px;
        }

        .bigBrand1 {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
          margin: 10px 0 4px 0;
        }

        .bigBrand2 {
          font-weight: 400;
          font-size: 12px;
          color: #364153;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2; /* 添加标准属性 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  // 行家精选
  .expert-bos {
    width: 1200px;
    display: flex;
    margin-top: 12px;
    .expert-list {
      width: 230px;
      height: 306px;
      background: #ffffff;
      margin-left: 12.5px;
      padding: 20px;
      cursor: pointer;
      &:first-child {
        margin-left: 0;
      }
      img {
        width: 100%;
        height: 190px;
      }
      .itemName {
        font-weight: 400;
        font-size: 14px;
        color: #101828;
        margin: 27px 0 2px 0;
      }
      .price {
        .memberPrice {
          color: var(--el-color-primary);
          font-size: 16px;
          color: #e7000b;
        }
        .marketPrice {
          font-size: 12px;
          color: #99a1af;
          line-height: 20px;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 6px;
        }
      }
    }
  }

  // 采购指南
  .procure-bos {
    display: flex;
    width: 1200px;
    margin-top: 12px;
    gap: 0 15px;
    .procure-list {
      width: 390px;
      height: 268px;
      background: #ffffff;
      cursor: pointer;
      img {
        width: 390px;
        height: 200px;
      }
      .procure1 {
        padding: 12px 0 4px 20px;
        font-weight: 600;
        font-size: 14px;
        color: #101828;
      }
      .procure2 {
        padding-left: 20px;
        font-size: 12px;
        color: #364153;
      }
    }
  }

  //循环-商品
  .goods-bos {
    height: 340px;
    width: 1200px;
    margin-top: 14px;
    display: flex;

    .goods-img {
      width: 230px;
      height: 340px;
      cursor: pointer;
    }

    .home1-bos {
      width: 476px;
      height: 340px;
      background: #ffffff;
      margin-left: 10px;
      padding: 18px 20px 0 20px;
      display: flex;
      flex-direction: column;

      .floorName {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
      }

      .home1-list {
        flex: 1;
        display: flex;
        border-bottom: 1px solid #e5e7eb;
        align-items: center;
        cursor: pointer;

        .advertiseName {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
        }

        .advertiseDescribe {
          font-weight: 400;
          font-size: 12px;
          color: #364153;
          margin-top: 4px;
        }

        img {
          width: 72px;
          height: 72px;
          margin-right: 10px;
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .home2-bos {
      width: 474px;
      margin-left: 10px;
      height: 340px;
      background: #ffffff;
      padding: 18px 20px 0 20px;
      display: flex;
      justify-content: space-between;

      .floorName {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
      }

      .home2-box {
        width: 249px;

        .home2-list {
          width: 249px;
          height: 130px;
          border: 1px solid #e5e7eb;
          margin-top: 13px;
          display: flex;
          align-items: center;
          padding: 0 10px;
          cursor: pointer;
          .advertiseName {
            font-weight: 600;
            font-size: 14px;
            color: #101828;
          }
          .advertiseDescribe {
            font-size: 12px;
            color: #364153;
            margin: 4px 0 10px 0;
          }
          .bnt {
            width: 68px;
            height: 24px;
          }
          img {
            width: 72px;
            height: 72px;
            margin-left: 10px;
          }
        }
      }
      .home2-two {
        width: 177px;
        height: 273px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #e5e7eb;
        margin-top: 34px;
        padding: 26px 10px;
        cursor: pointer;

        .advertiseName {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
        }
        .advertiseDescribe {
          font-size: 12px;
          color: #364153;
          margin: 4px 0 30px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2; /* 添加标准属性 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        img {
          width: 123px;
          height: 122px;
          margin: 0 17px;
        }
      }
    }
  }
  .shop-bos {
    display: flex;
    margin-top: 14px;
    .shop-nav {
      width: 230px;
      height: 306px;
      background: #ffffff;
      padding: 16px;
      .nav-title {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
        margin-bottom: 10px;
      }
      .nav-bos {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .nav-list {
          width: 94px;
          height: 32px;
          background: #f4f4f4;
          border-radius: 4px 4px 4px 4px;
          font-size: 14px;
          color: #101828;
          margin-bottom: 10px;
          cursor: pointer;
          &:hover {
            color: var(--el-color-primary);
          }
          &.hig {
            background: var(--el-color-primary);
            color: #ffffff;
          }
        }
      }
    }
    .shop-list {
      width: 230px;
      height: 306px;
      background: #ffffff;
      margin-left: 12.5px;
      padding: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 190px;
      }
      .itemName {
        font-weight: 400;
        font-size: 14px;
        color: #101828;
        margin: 27px 0 2px 0;
      }
      .price {
        .memberPrice {
          color: var(--el-color-primary);
          font-size: 16px;
          color: #e7000b;
        }
        .marketPrice {
          font-size: 12px;
          color: #99a1af;
          line-height: 20px;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 6px;
        }
      }
    }
  }

  //项目案例
  .project-bos {
    display: flex;
    width: 1200px;
    margin-top: 12px;
    gap: 0 15px;
    .project-list {
      width: 390px;
      height: 350px;
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      .project-box {
        width: 390px;
        height: 156px;
        background: #ffffff;
        border-radius: 10px;
        margin-top: -20px;
        z-index: 2;
        position: absolute;
        padding: 20px;
      }
      img {
        width: 390px;
        height: 180px;
      }
      .project1 {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
        margin-bottom: 14px;
      }
      .project2 {
        font-size: 14px;
        color: #364153;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2; /* 添加标准属性 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .project-more {
        text-align: right;
        font-size: 14px;
        color: var(--el-color-primary);
        margin-top: 18px;
      }
    }
  }
}
</style>