init...

themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_extra/home_top/categorygroup.css

@@ -0,0 +1,118 @@
+/* 首页分类框展示 */
+.categoryGroup {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 200px;
+  height: 24%;
+  width: 100%;
+
+  animation: slide-in 0.6s 0.2s backwards;
+}
+.categoryItem:last-child {
+  margin-right: 0;
+}
+.categoryItem {
+  width: calc(100% / 3 - 0.33rem);
+  height: 100%;
+  margin-right: 0.5rem;
+}
+
+.categoryItem {
+  overflow: hidden;
+  transform: scale(1);
+  transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19);
+  height: 100%;
+  border-radius: 12px;
+}
+
+a.categoryButton {
+  height: 100%;
+  width: 100%;
+  background: var(--anzhiyu-card-bg);
+  border-radius: 12px;
+  display: inline-block;
+  text-align: left;
+  line-height: 4em;
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--anzhiyu-white);
+  transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transform: scale(1);
+  overflow: hidden;
+  font-family: inherit;
+}
+.categoryButtonText {
+  padding-left: 21px;
+}
+a.categoryButton svg,
+a.categoryButton i {
+  font-size: 5rem;
+  opacity: 0.2;
+  position: absolute;
+  right: 0;
+  top: 20%;
+  transition: 0.3s;
+  width: 100px;
+  text-align: center;
+  filter: blur(2px);
+  transform: scale(1) rotate(15deg);
+}
+
+a.categoryButton.blue {
+  background: linear-gradient(to right, #358bff, #15c6ff);
+  background-size: 200%;
+}
+a.categoryButton.red {
+  background: linear-gradient(to right, #f65, #ffbf37);
+  background-size: 200%;
+}
+a.categoryButton.green {
+  background: linear-gradient(to right, #18e7ae, #1eebeb);
+  background-size: 200%;
+}
+
+.categoryItem:hover {
+  width: 50%;
+}
+
+.categoryItem:hover svg,
+.categoryItem:hover i {
+  opacity: 0.8;
+  transition: 0.8s;
+  transition-delay: 0.15s;
+  transform: scale(1.03);
+  font-size: 2.5rem;
+  filter: blur(0);
+  top: 15%;
+}
+a.categoryButton:after {
+  top: 47px;
+  width: 1rem;
+  left: 21px;
+  height: 2px;
+  background: var(--anzhiyu-white);
+  content: "";
+  border-radius: 1px;
+  position: absolute;
+}
+
+@media screen and (max-width: 768px) {
+  .categoryGroup {
+    display: none;
+  }
+}
+
+[data-theme="dark"] a.categoryButton.blue {
+  background: linear-gradient(to right, #0653b8, #2fcbff);
+  background-size: 200%;
+}
+[data-theme="dark"] a.categoryButton.red {
+  background: linear-gradient(to right, #e22a16, #da980c);
+  background-size: 200%;
+}
+[data-theme="dark"] a.categoryButton.green {
+  background: linear-gradient(to right, #099e74, #0ea4a4);
+  background-size: 200%;
+}

themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_extra/home_top/home_top.css

@@ -0,0 +1,11 @@
+a span.top-group-text {
+  border-radius: 0px 0 12px 0;
+}
+
+div#bannerGroup {
+  width: calc(100% - 600px - 2rem);
+  height: 340px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_extra/home_top/home_top_post_group.css

@@ -0,0 +1,103 @@
+#topPostGroup .top-group-list-item {
+  display: flex;
+  width: calc(100% / 4 - 5px);
+  flex-direction: column;
+  align-items: flex-start;
+  background: var(--anzhiyu-card-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  height: 128px;
+  max-height: 128px;
+  border: var(--style-border-always);
+  transition: 0.3s;
+  box-shadow: var(--anzhiyu-shadow-border);
+}
+#topPostGroup .post_cover {
+  width: 100%;
+}
+#topPostGroup .post_cover img {
+  object-fit: cover;
+  width: 100%;
+  height: 80px;
+  background: var(--anzhiyu-secondbg);
+  border-radius: 12px 12px 0 0;
+}
+
+#topPostGroup .top-group-list-item .post_cover a {
+  height: 80px;
+  overflow: hidden;
+  display: flex;
+  position: relative;
+}
+
+span.top-group-text {
+  position: absolute;
+  top: 0;
+  left: -40px;
+  display: flex;
+  z-index: 1;
+  background: var(--anzhiyu-theme);
+  color: var(--anzhiyu-white);
+  padding: 2px 8px;
+  font-size: 12px;
+  border-radius: 12px 0 12px 0;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.top-group-list-item:hover span.top-group-text {
+  left: 0;
+}
+
+#topPostGroup .top-group-list-item .top-group-info {
+  padding: 0.3rem 0.5rem 0.3rem 0.5rem !important;
+  transition: 0.3s;
+}
+
+#topPostGroup .top-group-list-item .top-group-info .article-title {
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-height: 1.5;
+  justify-content: center;
+  align-items: flex-end;
+  align-content: center;
+  padding-top: 0.5rem;
+  font-weight: 700;
+  font-size: 0.8rem !important;
+  padding: 0 !important;
+}
+
+#topPostGroup .top-group-list-item:hover {
+  border: var(--style-border-hover);
+  box-shadow: var(--anzhiyu-shadow-main);
+  transform: scale(1.03);
+}
+
+#topPostGroup .top-group-list-item:hover .article-title {
+  color: var(--anzhiyu-theme);
+}
+
+.top-group-list-none {
+  width: calc(100% / 4 - 5px);
+}
+#topPostGroup .topPostGroupTime {
+  font-size: 12px;
+}
+
+@media screen and (max-width: 1450px) {
+  #topPostGroup .top-group-list-item {
+    width: calc(100% / 4 - 20px) !important;
+  }
+}
+@media screen and (max-width: 768px) {
+  #topPostGroup .top-group-list-item {
+    width: calc(100% / 2 - 5px) !important;
+    margin: 2px;
+  }
+}
+@media screen and (max-width: 768px) {
+  #topGroup {
+    display: none;
+  }
+}

themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_extra/home_top/swiperstyle.css

@@ -0,0 +1,439 @@
+#swiper_container_blog {
+  width: 49%;
+  transition: all 0.3s, width 0s;
+  border-radius: 12px;
+}
+.swiper-wrapper {
+  align-items: center;
+}
+div#swiper_container {
+  transition: 0.3s;
+}
+/* 防止轮播图css未加载完时的超度横行滚动条 */
+#swiper_container {
+  overflow: hidden !important;
+}
+div.swiper_container_card {
+  margin: 1rem auto 0;
+}
+@media screen and (max-width: 768px) {
+  div.swiper_container_card {
+    margin: 0.2rem auto 0;
+  }
+}
+div#swiper_container {
+  background: rgba(255, 255, 255, 0);
+  width: 100%;
+  padding: 0;
+  overflow: initial;
+  background: var(--card-bg);
+  border-radius: 12px;
+  border: var(--style-border);
+}
+div#swiper_container:hover {
+  border: var(--style-border-hover);
+  box-shadow: var(--anzhiyu-shadow-main);
+}
+.blog-slider {
+  width: 100%;
+  position: relative;
+  border-radius: 12px 8px 8px 12px;
+  margin: 0 auto;
+}
+.blog-slider__item {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: box;
+  display: flex;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -o-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__img img {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  -webkit-transition-delay: 0.3s;
+  -moz-transition-delay: 0.3s;
+  -o-transition-delay: 0.3s;
+  -ms-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > * {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  -webkit-transform: none;
+  -moz-transform: none;
+  -o-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(1) {
+  -webkit-transition-delay: 0.3s;
+  -moz-transition-delay: 0.3s;
+  -o-transition-delay: 0.3s;
+  -ms-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(2) {
+  -webkit-transition-delay: 0.4s;
+  -moz-transition-delay: 0.4s;
+  -o-transition-delay: 0.4s;
+  -ms-transition-delay: 0.4s;
+  transition-delay: 0.4s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(3) {
+  -webkit-transition-delay: 0.5s;
+  -moz-transition-delay: 0.5s;
+  -o-transition-delay: 0.5s;
+  -ms-transition-delay: 0.5s;
+  transition-delay: 0.5s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(4) {
+  -webkit-transition-delay: 0.6s;
+  -moz-transition-delay: 0.6s;
+  -o-transition-delay: 0.6s;
+  -ms-transition-delay: 0.6s;
+  transition-delay: 0.6s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(5) {
+  -webkit-transition-delay: 0.7s;
+  -moz-transition-delay: 0.7s;
+  -o-transition-delay: 0.7s;
+  -ms-transition-delay: 0.7s;
+  transition-delay: 0.7s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(6) {
+  -webkit-transition-delay: 0.8s;
+  -moz-transition-delay: 0.8s;
+  -o-transition-delay: 0.8s;
+  -ms-transition-delay: 0.8s;
+  transition-delay: 0.8s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(7) {
+  -webkit-transition-delay: 0.9s;
+  -moz-transition-delay: 0.9s;
+  -o-transition-delay: 0.9s;
+  -ms-transition-delay: 0.9s;
+  transition-delay: 0.9s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(8) {
+  -webkit-transition-delay: 1s;
+  -moz-transition-delay: 1s;
+  -o-transition-delay: 1s;
+  -ms-transition-delay: 1s;
+  transition-delay: 1s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(9) {
+  -webkit-transition-delay: 1.1s;
+  -moz-transition-delay: 1.1s;
+  -o-transition-delay: 1.1s;
+  -ms-transition-delay: 1.1s;
+  transition-delay: 1.1s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(10) {
+  -webkit-transition-delay: 1.2s;
+  -moz-transition-delay: 1.2s;
+  -o-transition-delay: 1.2s;
+  -ms-transition-delay: 1.2s;
+  transition-delay: 1.2s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(11) {
+  -webkit-transition-delay: 1.3s;
+  -moz-transition-delay: 1.3s;
+  -o-transition-delay: 1.3s;
+  -ms-transition-delay: 1.3s;
+  transition-delay: 1.3s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(12) {
+  -webkit-transition-delay: 1.4s;
+  -moz-transition-delay: 1.4s;
+  -o-transition-delay: 1.4s;
+  -ms-transition-delay: 1.4s;
+  transition-delay: 1.4s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(13) {
+  -webkit-transition-delay: 1.5s;
+  -moz-transition-delay: 1.5s;
+  -o-transition-delay: 1.5s;
+  -ms-transition-delay: 1.5s;
+  transition-delay: 1.5s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(14) {
+  -webkit-transition-delay: 1.6s;
+  -moz-transition-delay: 1.6s;
+  -o-transition-delay: 1.6s;
+  -ms-transition-delay: 1.6s;
+  transition-delay: 1.6s;
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(15) {
+  -webkit-transition-delay: 1.7s;
+  -moz-transition-delay: 1.7s;
+  -o-transition-delay: 1.7s;
+  -ms-transition-delay: 1.7s;
+  transition-delay: 1.7s;
+}
+.blog-slider__img {
+  width: 290px;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  height: 200px;
+  padding: 10px;
+  border-radius: 5px;
+  transform: translateX(0);
+  overflow: hidden;
+}
+.blog-slider__img:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  opacity: 0.8;
+}
+.blog-slider__img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  opacity: 0;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.blog-slider__content {
+  padding-right: 50px;
+  padding-left: 50px;
+}
+.blog-slider__content > * {
+  opacity: 0;
+  -webkit-transform: translateY(25px);
+  -moz-transform: translateY(25px);
+  -o-transform: translateY(25px);
+  -ms-transform: translateY(25px);
+  transform: translateY(25px);
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -ms-transition: all 0.4s;
+  transition: all 0.4s;
+}
+.blog-slider__code {
+  color: var(--font-color);
+  margin-bottom: 0;
+  display: block;
+  font-weight: 500;
+}
+.blog-slider__title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--font-color);
+  margin-bottom: 15px;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+.blog-slider__text {
+  color: var(--font-color);
+  margin-bottom: 15px;
+  line-height: 1.5em;
+  width: 100%;
+  height: 50px;
+  word-break: break-all;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.blog-slider__button {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-box;
+  display: inline-flex;
+  background-color: var(--btn-bg);
+  padding: 4px 14px;
+  border-radius: 8px;
+  color: var(--btn-color);
+  text-decoration: none;
+  font-weight: 500;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -o-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  text-align: center;
+  letter-spacing: 1px;
+  display: none;
+}
+.blog-slider__button:hover {
+  background-color: var(--btn-hover-color);
+  color: var(--btn-color);
+}
+.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
+.blog-slider .swiper-pagination-custom,
+.blog-slider .swiper-pagination-fraction {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+.blog-slider__pagination {
+  position: absolute;
+  z-index: 21;
+  right: 20px;
+  width: 11px !important;
+  text-align: center;
+  left: auto !important;
+  top: 50%;
+  bottom: auto !important;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+.blog-slider .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 8px 0;
+}
+.blog-slider__pagination .swiper-pagination-bullet {
+  width: 11px;
+  height: 11px;
+  display: block;
+  border-radius: 10px;
+  background: #858585;
+  opacity: 0.2;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.blog-slider__pagination .swiper-pagination-bullet-active {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  background: var(--btn-bg);
+  height: 30px;
+}
+@media screen and (max-width: 768px) {
+  .blog-slider__pagination {
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    left: 50% !important;
+    top: 320px;
+    width: 100% !important;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -o-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+  .blog-slider .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 5px;
+  }
+  .blog-slider__pagination .swiper-pagination-bullet-active {
+    height: 11px;
+    width: 30px;
+  }
+  .blog-slider__button {
+    display: -webkit-inline-box;
+    display: -moz-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-box;
+    display: inline-flex;
+    width: 100%;
+  }
+  .blog-slider {
+    min-height: 350px;
+    height: auto;
+    margin-bottom: 10px;
+  }
+  .blog-slider__content {
+    text-align: center;
+    padding: 0 30px;
+  }
+  .blog-slider__item {
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -o-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+  .blog-slider__img {
+    width: 100%;
+    padding-top: 0;
+  }
+  .blog-slider__content {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-top: 15px;
+  }
+  .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets {
+    top: 218px;
+  }
+
+  .swiper_container_card #swiper_container_blog div#swiper_container.blog-slider {
+    padding: 10px;
+    overflow: hidden;
+  }
+  .blog-slider__item .blog-slider__content .blog-slider__code {
+    margin-top: 10px;
+  }
+  .blog-slider__title {
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 768px) {
+  .blog-slider {
+    height: 200px;
+  }
+  .blog-slider__img {
+    height: 200px;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  div#swiper_container {
+    width: 100%;
+  }
+  #swiper_container_blog {
+    width: 99%;
+  }
+}
+
+.swiper_container_card {
+  display: flex !important;
+  justify-content: space-around;
+  flex-direction: row !important;
+  user-select: none;
+}

themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_extra/home_top/top_group_banner.css

@@ -0,0 +1,268 @@
+.todayCard-title,
+.todayCard-tips,
+.topGroup .banner-button {
+  color: #ffffff;
+}
+
+.topGroup {
+  height: 340px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: calc(600px + 1.5rem);
+  position: relative;
+  align-content: space-between;
+}
+.topGroup .todayCard {
+  position: absolute;
+  width: calc(600px + 1rem);
+  height: 100%;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background: var(--anzhiyu-card-bg);
+  border-radius: 12px;
+  margin-left: 0.5rem;
+  overflow: hidden;
+  transition: 0.3s;
+  display: flex;
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.topGroup .todayCard .todayCard-info {
+  position: absolute;
+  bottom: 2rem;
+  left: 2rem;
+  z-index: 2;
+  color: var(--anzhiyu-white);
+  max-width: 60%;
+  transition: 0.3s;
+}
+
+.topGroup .todayCard .todayCard-info .todayCard-tips {
+  opacity: 0.8;
+  font-size: 12px;
+}
+
+.topGroup .todayCard .todayCard-info .todayCard-title {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 36px;
+}
+.topGroup .todayCard .todayCard-cover {
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  z-index: -1;
+  transition: 0.3s;
+}
+
+.topGroup .banner-button-group {
+  position: absolute;
+  right: 2rem;
+  bottom: 2rem;
+  display: flex;
+  transition: 0.3s;
+}
+
+.topGroup .todayCard.hide .todayCard-cover {
+  transform: scale(1.2);
+}
+
+.topGroup .banner-button {
+  background: var(--anzhiyu-white-op);
+  border-radius: 20px;
+  color: var(--anzhiyu-white);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: 0.3s;
+  cursor: pointer;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0);
+  height: 40px;
+  width: 125px;
+  justify-content: center;
+}
+.topGroup .banner-button-group .banner-button .banner-button-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.topGroup .banner-button i,
+.topGroup .banner-button svg {
+  margin-right: 8px;
+  font-size: 22px;
+}
+.topGroup .todayCard::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  box-shadow: 0 -109px 133px -9px #000000 inset;
+}
+
+.topGroup .todayCard.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+.topGroup .todayCard img {
+  object-fit: cover;
+  width: 100%;
+  height: 80px;
+  background: var(--anzhiyu-secondbg);
+  border-radius: 12px 12px 0 0;
+}
+.topGroup .recent-post-item:nth-child(4),
+.topGroup .recent-post-item:nth-child(5),
+.topGroup .recent-post-item:nth-child(6) {
+  margin-bottom: 0;
+  margin-top: 4px;
+}
+
+.topGroup .recent-post-item {
+  display: none;
+  width: 200px;
+  flex-direction: column;
+  align-items: flex-start;
+  background: var(--anzhiyu-card-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  min-width: 200px;
+  height: 164px !important;
+  max-height: 164px;
+  border: var(--style-border-always);
+  transition: 0.3s;
+  position: relative;
+  box-shadow: var(--anzhiyu-shadow-border);
+  margin-left: 0.5rem;
+  margin-right: 0px;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+}
+.topGroup .recent-post-item:hover .recent-post-info .article-title {
+  color: var(--anzhiyu-main);
+}
+.topGroup .recent-post-item .post_cover {
+  width: 100%;
+}
+.topGroup .recent-post-item .post_cover a {
+  height: 100px;
+  overflow: hidden;
+  display: flex;
+}
+.topGroup span.recent-post-top-text {
+  position: absolute;
+  top: 0;
+  left: -40px;
+  display: flex;
+  z-index: 1;
+  background: var(--anzhiyu-theme);
+  color: var(--anzhiyu-white);
+  padding: 2px 8px;
+  font-size: 12px;
+  border-radius: 12px 0 12px 0;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.topGroup .recent-post-item .post_cover img {
+  object-fit: cover;
+  width: 100%;
+  background: var(--anzhiyu-secondbg);
+  border-radius: 12px 12px 0 0;
+}
+.topGroup .recent-post-item .recent-post-info {
+  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
+  transition: 0.3s;
+}
+.topGroup .recent-post-item .recent-post-info .article-title {
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-height: 1.5;
+  justify-content: center;
+  align-items: flex-end;
+  align-content: center;
+  padding-top: 0.5rem;
+  font-weight: bold;
+  font-size: 1rem !important;
+  padding: 0 !important;
+}
+
+.topGroup .recent-post-item:hover .recent-post-top-text {
+  left: 0;
+}
+
+@media screen and (max-width: 1200px) {
+  .topGroup .todayCard {
+    background: #0e57d5;
+  }
+
+  div#bannerGroup {
+    height: auto;
+    width: auto;
+  }
+
+  .topGroup .recent-post-item {
+    display: flex;
+  }
+
+  .categoryGroup .categoryItem:nth-child(3) {
+    display: none;
+  }
+  .categoryGroup {
+    flex-direction: column;
+    height: 95%;
+  }
+  .topGroup {
+    display: flex;
+    flex-wrap: nowrap;
+    width: auto;
+    height: auto;
+  }
+
+  .topGroup .todayCard {
+    display: none;
+  }
+
+  .swiper_container_card {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+    flex-wrap: nowrap;
+    width: 100%;
+    overflow-x: scroll;
+  }
+
+  .categoryItem {
+    height: 48%;
+    min-width: 200px;
+    box-shadow: none !important;
+  }
+  .categoryGroup {
+    display: flex !important;
+  }
+  #bbTimeList {
+    margin: 0 1.5rem;
+    max-width: 100%;
+    width: auto;
+  }
+}
+
+.swiper_container_card::-webkit-scrollbar {
+  display: none;
+}
+
+.topGroup .banner-button:hover {
+  background: var(--anzhiyu-theme);
+  color: var(--anzhiyu-white);
+}