
 
 
 /* 设置轮播图控制按钮透明 */
 .carousel-control-prev,
 .carousel-control-next {
      opacity: 0; /* 透明度设置，范围 0 - 1，0 为完全透明，1 为完全不透明 */
  }

 /* 设置鼠标悬停在轮播图上时角标也透明 */
 .carousel:hover .carousel-control-prev,
 .carousel:hover .carousel-control-next {
      opacity: 0;
 }


/* 设置导航栏背景颜色 */
.navbar {
    background-color: transparent;
}

/* 设置导航栏按钮颜色 */
.navbar-toggler {
    color:none;
    border-color: rgb(28, 177, 152);
    background-color: aqua;
}

/* 设置导航栏按钮图标颜色 */
.navbar-toggler-icon {
    /* 图标背景色透明 */
    background-color: transparent;
}

/* 设置导航栏选项颜色 */
.nav-link {
    color: rgb(150, 146, 146);
}

/* 设置搜索框输入框颜色 */
.search-form input[type="text"] {
    color: gray;
    border: 1px solid gray;
    background-color: rgba(248, 249, 250, 0.5); /* 0.5 表示 50% 的透明度 */
}

/* 设置搜索框按钮颜色 */
.search-form button {
    color: gray;
    border: 1px solid gray;
}

/* 设置搜索图标颜色 */
.search-icon {
    color: gray;
}


        /* 商标logo */
        .icon {
            padding-left: 30px;
            padding-right: 10px;
        }
        @media (max-width: 767px) {
            /* 新增样式：使导航栏展开后列表占据手机屏幕右侧的 30% */
           .navbar-nav {
                position: fixed;
                top: 60px;
                right: 0;
                width: 0; /* 初始宽度设为0，实现收缩效果 */
                height: 100vh;
                /* 叠加两个线性渐变背景 */
                background: 
                    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%),
                    linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
                z-index: 1031;
                overflow-y: auto;
                transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 添加过渡效果 */
                opacity: 0; /* 初始透明度设为0，实现淡入淡出效果 */
            }
            
           .navbar-nav.active {
                width: 30%; /* 展开时宽度设为30% */
                opacity: 1; /* 展开时透明度设为1 */
            }
        }

        .navbar {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         /* 导航栏上外边距-30px */
            /* margin-top: 30px; */
            margin-bottom: 0px;
            padding-bottom:0px;
            padding-top: 20px;
        }
    
           /* 折叠栏上内边距 */
           .navbar-toggler{
            /* padding-top: 50px;  */
            /* padding-right: 10px;     */
            border: none;
            background-color: transparent;
        }
        .navbar.navbar-light.bg-light {
            /* background-color: black !important; */
            background-color: transparent;
        }

        .navbar-light .navbar-brand,
        .navbar-light .nav-link {
            /* color: white !important; */
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

        /* 中间导航栏列表 */
        .collapse {           
        /* 水平居中 */
        display: flex;
        justify-content: center; 
        }

         /* 注册登录 */
        .login{
            margin-right: 20px;
        }

        .navbar-light .nav-link:hover,
        .navbar-light .nav-link.active {
            /* 指针悬浮颜色 */
            color: black!important;
        }

        .col-lg-3,
        .col-md-4,
        .col-6,
        .mb-2 {
            padding: 3px;
        }

        .custom-card-margin {
            margin: 10px;
        }

        .nav-link {
            margin-left: 30px;
            margin-right: 30px;
            font-size: 15px;
        }

        .nav-link.nav-link1 {
            margin-left: 10px;
            margin-right: 10px;
            font-size: 12px;
        }

        .no-border {
            border: none;
            background-color: transparent;
            color: gray;
        }

        .no-border:hover {
            background-color: rgba(175, 126, 126, 0.1);
        }

    
        body {
            font-family: Arial, sans-serif;
        }
         
        .container {
           /* 轮播图下外边距 */
            margin-bottom: -25px;
            margin-top: -25px;
            padding-left: 0;
            padding-right: 0;  
        }
             /* 卡片 */
        .card{
            /* 边框透明 */
            border-color: transparent;
        }
        .carousel-inner{
           margin-bottom: 2px;
           margin-top: 2px;
           width: 100%;
        
        }
        /* 商品展示区外边距 */
        .row{
            margin-top: 10px;
            margin-left: 3px;
            margin-right: 3px;
            padding-left: -30px;
            padding-right: -30px;
        }

          /* 设置图片自适应 */
          .carousel-inner img {
            max-height: 100%;
            max-width: 1500px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block; /* 确保图片作为块级元素显示 */
            margin: 0 auto; /* 水平居中 */
        }
        .container-fluid {
            padding-left: 0;
            padding-right: 0;

             /* 轮播图上外边距 */
            margin-top: -3px;
            padding-top: -100px;
            width: 100%;
        }
         /* 分类自定义样式 */
         #carouselExample img {
            height: 300px;
            object-fit: cover;
        }
 
        .col-lg-3, .col-md-4, .col-6, .mb-2 {
            padding: 3px;
        }
 
        .custom-card-margin {
            margin: 10px;
        }
       
        
         /* 下面是首页横向分类列表样式 */

         /* 新增父容器样式，用于让列表容器居中 */
       .parent-container {
        display: flex;
        justify-content: center;
    }

    /* 下面是首页横向分类列表样式 */
/* 包裹列表的容器样式 */
.scrollable-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* 增强 iOS 设备上的滚动体验 */
    text-align: center; /* 让列表项在宽度不满一行时居中显示 */
}

/* 去除列表默认样式 */
.navbar-nav01 {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* 为导航项添加间距，这里将左右间距减小到 1px */
.nav-item {
    display: inline-block;
    margin: 0 -10px;
}

/* 使分类选项的文字在图片正下方 */
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 上下固定布局的示例样式 */
.top-div,
.bottom-div {
    background-color: #f0f0f0;
    padding: 10px;
}    
        /* 上面是首页横向分类列表样式 */
 

         /* 自定义分页样式 */
         .pagination .page-item .page-link {
            color: black;
            background-color: transparent;
            border: 1px solid white;
        }

       /* 激活状态的页码样式 */
.pagination .page-item.active .page-link {
    background-color: dodgerblue;
    color: white;
    border-radius: 50%; /* 将边框半径设置为 50% 实现圆形效果 */
    width: 2.2em; /* 为了保证圆形效果，设置宽度和高度 */
    height: 2.2em;
    text-align: center; /* 文本居中 */
    line-height: 1.5em; /* 垂直居中 */
    padding: 0.375rem 0; /* 调整内边距 */
    margin: 0 0.25em; /* 调整左右外边距 */
}
        /* 禁用状态的页码样式 */
        .pagination .page-item.disabled .page-link {
            color: black;
            background-color: transparent;
            /* border-color: #6c757d; */
        }
        
         /* 隐藏输入框 */
         .search-input {
            display: none;
        }

    
        /* 以下是搜索框 */
        .search-container {
            /* position: relative; */
            /* position: fixed;  */
            position: absolute;
            display: inline-block;
            width: 30px;
          background-color: transparent;
            overflow: visible; 
            margin-left: 78%;
        }

        .search-icon {
            width: 40px;
            height: 40px;
            background-color: transparent;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: width 1s;
            font-size: 24px;
            color: #333;
        }
        .search-icon i {
            color: #555;
        }

        .search-form {
            position: absolute;
            top: 45px;
           left: -150px;
            /* right: 10px; */
            width: 0;
            overflow: hidden;
            transition: width 0.5s;
            /* 确保搜索框展开时不会影响其他元素 */
            z-index: 1; 
            background-color: transparent;
         
        }

        .search-form input {
            width: 100%;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 0 10px;
            outline: none;
            background-color: white;
        }

        .search-form button {
            position: absolute;
            top: 0;
            right: 0;
            height: 40px;
            width: 40px;
            background-color: transparent;
           
            border: none;
            cursor: pointer;
        }

        .search-form.active {
            width: 200px;
        }
/* 
        .search-icon.active {
            width: 0px;
            border-radius: 20px;
            justify-content: flex-start;
            
        } */
     
        


        