本次不做演示效果（到期未续费~）

HTML

/* 公告栏 */
.notice {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 10rpx */
}

.notice-contain {
  box-shadow: 0px 1px 1px 1px rgba(202, 199, 199, 0.993);
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  width: 700rpx;
  height: 82rpx;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.notice-containTitle {
  font-weight: bold;
  font-size: 32rpx;
  position: relative;
  /* top: 0; */
  left: 14rpx;
}

.notice-containTitle::after {
  position: absolute;
  top: -4rpx;
  left: 110rpx;
  content: "";
  display: block;
  background: #AAAAAA;
  width: 2px;
  height: 54rpx;
}

.tab-right {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 70rpx;
}

.swiper-item {
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}

CSS

.notice {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 10rpx */
}

.notice-contain {
  box-shadow: 0px 1px 1px 1px rgba(202, 199, 199, 0.993);
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  width: 700rpx;
  height: 82rpx;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.notice-containTitle {
  font-weight: bold;
  font-size: 32rpx;
  position: relative;
  /* top: 0; */
  left: 14rpx;
}

.notice-containTitle::after {
  position: absolute;
  top: -4rpx;
  left: 110rpx;
  content: "";
  display: block;
  background: #AAAAAA;
  width: 2px;
  height: 54rpx;
}

.tab-right {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 70rpx;
}

.swiper-item {
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}

JS

title: "111111~"
   }, {
     title: "1111111~"
   }]