UI：鹿不选

lin

2026-05-25 b13062d53abb7fd5cdce039df8c21c7690d0d2b7

 static/css/index.css

@@ -12,15 +12,20 @@
    flex-direction: column;
    min-height: 100vh;
    position: relative;
   padding-top: 50upx;
   padding-top: 50rpx;
}
/* #ifndef H5 */
.page-container {
   padding-top: var(--status-bar-height);
}
/* #endif */

.page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 620rpx;
    height: 592rpx;
    z-index: 0;
}
.content {
@@ -83,7 +88,7 @@
.cates{
    width: 100%;
    margin: 0;
   margin-top: 190rpx;
   margin-top: 270rpx;
   border-top-right-radius: 30rpx;
   border-top-left-radius: 30rpx;
    background-color: #ffffff;
@@ -92,12 +97,12 @@
   flex-wrap: wrap; /* 确保子元素换行 */
}
.cates-v{
    width: 190rpx;
    width: 25%;
    margin-bottom: 0upx;
   margin-left: 30rpx;
   /* margin-left: 30rpx; */
}
.cates-v:nth-child(1) {
   margin-left: 0;
   /* margin-left: 0; */
}
.cates-v-icon{
    width: 140rpx;
@@ -107,6 +112,61 @@
    border-radius: 10upx;
}
.cates-v view{
    text-align: center;
    font-size: 24upx;
   color: #364153;
}
.cates-v-s{
    width: 190rpx;
    margin-bottom: 0upx;
   margin-left: 30rpx;
   .cates-v-goods-title {
      display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 2; /* 限制显示两行 */
      overflow: hidden; /* 隐藏超出范围的内容 */
      text-overflow: ellipsis; /* 使用省略号 */
   }
}
.cates-v-s:nth-child(1) {
   margin-left: 0;
}
.cates-v-s-icon{
    width: 140rpx;
    height: 140rpx;
    display: block;
    margin: 40upx auto 20upx;
    border-radius: 10upx;
}
.cates-v-s view{
    text-align: center;
    font-size: 24upx;
   color: #364153;
}

.cates-v-goods-s{
    width: 200rpx;
    margin-bottom: 0upx;
   margin-left: 20rpx;
   .cates-v-goods-title {
      display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 2; /* 限制显示两行 */
      overflow: hidden; /* 隐藏超出范围的内容 */
      text-overflow: ellipsis; /* 使用省略号 */
   }
}
.cates-v-goods-s:nth-child(1) {
   margin-left: 0;
}
.cates-v-goods-s-icon{
    width: 200rpx;
    height: 200rpx;
    display: block;
    margin: 0upx auto 20upx;
    border-radius: 10upx;
}
.cates-v-goods-s view{
    text-align: center;
    font-size: 24upx;
   color: #364153;
@@ -291,7 +351,7 @@
    margin: 30upx auto 30upx;
    z-index: 99;
    height: 90upx;
    background-color: #e3b400;
    background-color: #1735C0;
    color: #ffffff;
    letter-spacing: 10upx;
    display: flex;
@@ -310,8 +370,8 @@
   align-items: center;
}
.h-logo{
   width: 154rpx;
   height: 52rpx;
   width: 118rpx;
   height: 38rpx;
}
.hLogo-1{
   margin: 0 30upx;
@@ -335,7 +395,7 @@
   height: 50rpx;
   line-height: 50rpx;
   border-radius: 25rpx;
   background-color: #37AA25;
   background-color: #1735C0;
   color: #ffffff;
}
.hLogo-2 .s-icon{
@@ -529,8 +589,8 @@

.ad2{
   width: 96%;
   margin: 0upx auto 20upx;
   height: 500rpx;
   margin: 30upx auto 30upx;
   height: 372rpx;
}
.ad2 image{
   width: 100%;
@@ -539,14 +599,15 @@
.d3-wrap {
   width: 96%;
   margin: 10upx auto 20upx;
   height: 278rpx;
   height: 482rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20rpx;
}
.ad3{
   width: 50%;
   height: 278rpx;
   height: 482rpx;
}
.ad3 image{
   width: 100%;
@@ -558,7 +619,7 @@
}
.ad4 {
   width: 50%;
   height: 278rpx;
   height: 482rpx;
}

.ca-ad{
@@ -622,7 +683,7 @@
   text-align: center;
   color: #ffffff;
   line-height: 54rpx;
   background: #37AA25;
   background: #1735C0;
   border-radius: 62rpx 62rpx 62rpx 62rpx;
}
.c-goods{