大数据站点

src/api/home/index-data.ts

@@ -0,0 +1,46 @@
+import request from '@/utils/request';
+
+//当前客户下的站点地址
+export function getSiteAddress(query: any) {
+  return request({
+    url: '/product/siteProduct/getSiteAddress',
+    method: 'get',
+    params: query
+  });
+}
+
+//外面循环
+export function getSiteFloorList(query: any) {
+  return request({
+    url: '/product/siteProduct/getSiteFloorList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 外面循环-商品
+export function getSiteFloorProductList(query: any) {
+  return request({
+    url: '/product/siteProduct/getSiteFloorProductList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 外面循环-品牌
+export function getSiteFloorBrandList(query: any) {
+  return request({
+    url: '/product/siteProduct/getSiteFloorBrandList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 商品
+export function getSiteProductList(query: any) {
+  return request({
+    url: '/product/siteProduct/getSiteProductList',
+    method: 'get',
+    params: query
+  });
+}

src/router/index.ts

@@ -86,6 +86,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: 'IndexFuli',
         meta: { title: '福礼商城', icon: 'dashboard', affix: true, nav: true }
       },
+      {
+        path: '/indexData',
+        component: () => import('@/views/home/index-data.vue'),
+        name: 'indexData',
+        meta: { title: '大客户站点', icon: 'dashboard', affix: true, nav: true }
+      },
       {
         path: '/reg',
         component: () => import('@/views/reg/index.vue'),

src/utils/siteConfig.ts

@@ -1,6 +1,6 @@
 // 每个站点允许的路由 (保持不变)
 export const SITE_ROUTES: Record<any, string[]> = {
-  www: ['/', '/index'], //优易365主站
+  www: ['/', '/index', '/indexData'], //优易365主站
   b: ['/indexB'], //企业购商城
   mro: ['/indexMro'], //工业品商城
   fuli: ['/indexFuli'], //福礼商城

src/views/home/index-data.vue

@@ -0,0 +1,961 @@
+<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>
+        </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">注册</el-button>
+            <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onlogout()">退出</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="goods-bos" v-for="(item, index) in goodsList" :key="index">
+      <div class="goods-title flex-row-center">
+        <img src="@/assets/images/home/indexMro2.png" alt="" />
+        <span class="text-primary">{{ item.name }}</span>
+        <span>精选</span>
+        <img src="@/assets/images/home/indexMro3.png" alt="" />
+      </div>
+      <div class="goods-box">
+        <img class="goods-one" :src="item.imageUrl" alt="" />
+        <div class="goods-shop">
+          <template v-for="(item1, index1) in item.goodsList" :key="index1">
+            <div v-if="Number(index1) < 8" class="shop-list flex-column-between">
+              <img class="shop-img" :src="item1.productImage ? item1.productImage.split(',')[0] : ''" alt="" />
+              <div class="shop-name ellipsis2">{{ item1.itemName || '' }}</div>
+              <div class="shop-price">
+                <span class="price1">¥{{ item1.memberPrice || '' }}</span>
+                <span class="price2">¥{{ item1.marketPrice || '' }}</span>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="goods-brand flex-column-between" v-if="item.brandList && item.brandList.length > 0">
+          <div class="brand-bos">
+            <template v-for="(item1, index1) in item.brandList" :key="index1">
+              <img clear-both v-if="Number(index1) < 6" class="brand-img" :src="item1.brandLogo" alt="" />
+            </template>
+          </div>
+          <div class="brand-more flex-row-center">
+            <div>更多品牌</div>
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 为你推荐 -->
+    <div class="goods-title flex-row-center">
+      <img src="@/assets/images/home/indexMro2.png" alt="" />
+      <span class="text-primary">猜你喜欢</span>
+      <img src="@/assets/images/home/indexMro3.png" alt="" />
+    </div>
+    <!-- 轮播展位商品 -->
+    <div class="sell-bos recommend">
+      <div v-for="(item, index) in recommendList" :key="index" class="sell-list">
+        <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
+        <div class="sell-name ellipsis2">{{ item.itemName || '' }}</div>
+        <div class="sell-price">
+          <span class="price1">¥{{ item.agreementPrice || '' }}</span>
+          <span class="price2">¥{{ item.marketPrice || '' }}</span>
+        </div>
+      </div>
+    </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,
+  getPlatformFlashSaleBrand,
+  getExpertSelectionTitle,
+  getPurchaseGuideTitle,
+  getExpertSelectionList,
+  getClassificationFloorList,
+  getClassificationFloorDetail,
+  getClassificationFloorLabel,
+  getClassificationFloorDetail2,
+  getProjectCaseTitle,
+  getProjectCaseList
+} from '@/api/home/index';
+
+import { getSiteFloorList, getSiteAddress, getSiteFloorProductList, getSiteFloorBrandList, getSiteProductList } from '@/api/home/index-data';
+
+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 sceneTitle = 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 bigbrandOne = ref<any>({});
+
+const goodsList = ref<any>([]);
+const recommendList = ref<any>([]);
+
+const homeList = ref<any>([]);
+const router = useRouter();
+
+//当前客户下的站点地址
+getSiteAddress({}).then((res) => {
+  if (res.code == 200) {
+  }
+});
+
+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;
+  }
+});
+
+//循环
+getSiteFloorList({}).then(async (res) => {
+  if (res.code == 200) {
+    for (const item of res.data) {
+      try {
+        const datas2 = await getSiteFloorProductList({ floorId: item.id });
+        if (datas2.code == 200) {
+          item.goodsList = datas2.data;
+        }
+        const datas3 = await getSiteFloorBrandList({ floorId: item.id });
+        if (datas2.code == 200) {
+          item.brandList = datas3.data;
+        }
+      } catch (error) {}
+    }
+
+    goodsList.value = res.data;
+  }
+});
+
+//猜你喜欢
+getSiteProductList({}).then((res) => {
+  if (res.code == 200) {
+    console.log(res.data, 555555555555);
+    recommendList.value = res.data;
+  }
+});
+
+const onInfo = (res: any) => {
+  router.push('/shop/info?id=' + res.id);
+};
+import { useUserStore } from '@/store/modules/user';
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.home-pages {
+  width: 1200px;
+  margin: 0 auto;
+
+  // 头部
+  .home-head {
+    width: 1200px;
+    position: relative;
+    display: flex;
+    gap: 0px 10px;
+    margin-top: 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%;
+          }
+        }
+      }
+    }
+
+    //右边
+    .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: 15px;
+    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);
+      }
+    }
+  }
+
+  //标题
+  .goods-title {
+    width: 1200px;
+    height: 56px;
+    border-radius: 10px;
+    background: #ffffff;
+    font-weight: 600;
+    font-size: 20px;
+    margin-top: 20px;
+    img {
+      width: 30px;
+      height: 21px;
+      margin: 0 10px;
+    }
+  }
+  //循环-商品
+  .goods-bos {
+    .goods-box {
+      display: flex;
+      gap: 0 10px;
+      margin-top: 15px;
+      .goods-one {
+        width: 236px;
+        height: 560px;
+        border-radius: 10px;
+        background: #ffffff;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+        &:hover {
+          transform: translateY(-2px);
+        }
+      }
+      .goods-shop {
+        width: 802px;
+        height: 560px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        .shop-list {
+          width: 193px;
+          height: 275px;
+          background: #ffffff;
+          border-radius: 10px;
+          padding: 20px;
+          cursor: pointer;
+          transition: transform 0.2s ease;
+          &:hover {
+            transform: translateY(-2px);
+          }
+
+          .shop-img {
+            width: 153px;
+            height: 150px;
+            border-radius: 6px;
+          }
+
+          .shop-name {
+            width: 153px;
+            height: 38px;
+            font-size: 14px;
+            color: #101828;
+          }
+
+          .shop-price {
+            .price1 {
+              color: var(--el-color-primary);
+              font-size: 16px;
+              color: #e7000b;
+            }
+            .price2 {
+              font-size: 12px;
+              color: #99a1af;
+              line-height: 20px;
+              text-decoration-line: line-through;
+              text-transform: none;
+              margin-left: 6px;
+            }
+          }
+        }
+      }
+      .goods-brand {
+        width: 142px;
+        height: 560px;
+        border-radius: 10px;
+        background: #ffffff;
+        padding: 20px 10px;
+        .brand-bos {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px 0;
+          img {
+            width: 100%;
+            height: 74px;
+            border-radius: 4px;
+            border: 1px solid #e5e7eb;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            &:hover {
+              transform: translateY(-2px);
+            }
+          }
+        }
+        .brand-more {
+          color: var(--el-color-primary);
+          font-size: 14px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  //猜你喜欢
+  .sell-bos {
+    width: 1200px;
+    display: flex;
+    gap: 0 20px;
+    margin-top: 15px;
+    padding-bottom: 30px;
+
+    .sell-list {
+      width: 224px;
+      height: 306px;
+      background: #ffffff;
+      border-radius: 10px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+      &:hover {
+        transform: translateY(-2px);
+      }
+
+      .sell-img {
+        width: 184px;
+        height: 182px;
+      }
+
+      .sell-name {
+        width: 184px;
+        height: 38px;
+        font-size: 14px;
+        color: #101828;
+      }
+
+      .sell-price {
+        .price1 {
+          color: var(--el-color-primary);
+          font-size: 16px;
+          color: #e7000b;
+        }
+        .price2 {
+          font-size: 12px;
+          color: #99a1af;
+          line-height: 20px;
+          text-decoration-line: line-through;
+          text-transform: none;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  .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>