<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 v-if="userInfo.userId" class="order-bos flex-column-between">
          <div class="flex-row-start">
            <img src="@/assets/images/logo2.png" alt="" />
            <div class="ellipsis">{{ userInfo.nickName }}</div>
          </div>
          <div class="flex-row-start">
            <div class="flex-1 flex-column-center">
              <div>待付款</div>
              <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
            </div>
            <div class="flex-1 flex-column-center">
              <div>待发货</div>
              <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
            </div>
            <div class="flex-1 flex-column-center">
              <div>待收货</div>
              <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="login-bos" v-else>
          <div class="login-box">
            <img src="@/assets/images/logo2.png" alt="" />
            <div>
              <div class="login1">您好,欢迎来到优易达</div>
              <div class="login2">请先登录</div>
            </div>
          </div>
          <div class="loginBtn-bos flex-row-center">
            <div @click="onPath('/login')" class="login-bnt1 flex-row-center">登录</div>
            <div @click="onPath('/breg')" class="login-bnt2 flex-row-center">注册</div>
          </div>
        </div>
        <!-- <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" @click="onPath('/item?id=' + item1.id)">
              <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,
  countOrder
} from '@/api/home/index';

import { getSiteFloorList, getSiteAddress, getSiteFloorProductList, getSiteFloorBrandList, getSiteProductList } from '@/api/home/index-data';
import Cookies from 'js-cookie';
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 countData = 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(() => {
  const token = Cookies.get('Authorization');
  if (token) {
    getInfo().then((res) => {
      if (res.code == 200) {
        userInfo.value = res.data.user;

        countOrder({}).then((res1) => {
          if (res1.code == 200) {
            countData.value = res1.data || {};
          }
        });
      }
    });
  }
});

//移入分类
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 {
      flex: 1;

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

        img {
          width: 100%;
          height: 407px;
        }
      }

      .head-box {
        width: 100%;
        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 {
      width: 230px;
      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;
          }

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

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

        .loginBtn-bos {
          width: 100%;

          .login-bnt1 {
            width: 64px;
            height: 24px;
            background-color: #e7000b;
            color: #ffffff;
            border-radius: 24px;
            font-size: 12px;
            cursor: pointer;
          }

          .login-bnt2 {
            width: 64px;
            height: 24px;
            border: 1px solid #e7000b;
            color: #e7000b;
            border-radius: 24px;
            font-size: 12px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }

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

      .order-bos {
        width: calc(100% - 20px);
        height: 110px;
        font-size: 14px;
        padding: 16px 0;
        border-bottom: 1px solid #e5e7eb;
        margin: 0 10px;
        img {
          width: 28px;
          height: 28px;
        }
        .order-num {
          color: #e7000b;
          font-size: 14px;
          margin-top: 2px;
        }
      }

      .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: 12px;
          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: 15px 20px;
    margin-top: 15px;
    padding-bottom: 30px;
    flex-wrap: wrap;

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