wechat-cloud-notes/miniprogram/pages/index/index.wxss

/**index.wxss**/

.view_title{
  display: flex;
  justify-content: center;
}
.view_content{
padding: 1;
}
.navigator_title{
  padding: 20rpx;
  flex: 1;
}
.navigator_content{
  padding: 30rpx;
}
.view_item{
  border: 1px solid #70bcf6; 
 
}
/* .search{
  width:700rpx;
  height:70rpx;
  background: rgb(245, 245, 245);
  border-radius:30rpx;
  padding-left: 20rpx;
  display: flex;

} */
.search input{
  flex:1;
  margin-left: 20rpx;

}

.search_item{
  background-color: aliceblue;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

/* 底部弹出 */
.pupContentBG {
   width: 100vw; 
   height: 100vh; 
   position: fixed; 
   top: 0; 
   
  
  } 

  .pupContent { 
    width: 100%; 
    background-color: #C0CCD8;
    top: 70%;
    /* background:#DDDCE1; */
    position: absolute; 
    position:fixed;
    bottom: 0; box-shadow: 0 0 10rpx #333; 
    height: 0; z-index: 999; } /* 设置显示的背景 */ 
  
  .showBG { display: block; } 
  
  .hideBG { display: none; } /* 弹出或关闭动画来动态设置内容高度 */ 
  
  @keyframes slideBGtUp { 
    from { background: transparent; } 
    to { background: rgba(0, 0, 0, 0.1); } } 
  
  @keyframes slideBGDown { 
    from { background: rgba(0, 0, 0, 0.1); }
    to { background: transparent; } } /* 显示或关闭内容时动画 */ 
  
  .openBG { animation: slideBGtUp 0.01s ease-in both; /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */ } 
  
  .closeBG { animation: slideBGDown 0.01s ease-in both; /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */ } /* 设置显示内容 */ 
  
  .showContent { display: block; } 
  
  .hideContent { display: none; } /* 弹出或关闭动画来动态设置内容高度 */ 
  
  @keyframes slideContentUp { 
    from { height: 0; } 
    to { height: 100%; } } 
  
  @keyframes slideContentDown { 
    from { height: 100%; } 
    to { height: 0; } } /* 显示或关闭内容时动画 */ 
  
  .open { 
    animation: slideContentUp 0.01s ease-in both; /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */ } 
  
  .close { 
    animation: slideContentDown 0.5s ease-in both; /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */ }
.btn_22[plain]{
  padding: 0;
  border:none;  
  /* width: 150rpx; */
  height: 150rpx;
  position: fixed;
  bottom: 0;

	width: 100%;
}
.image_22{
  height: 150rpx;
  position: fixed;
	bottom: 0;
  width: 50rpx;
  right: 1%;
}
.xiebj_1{
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  left: 7%;
}
.paibj_1{
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  right: 45%;
}
.dubj_1{
  width: 80rpx;
  height: 80rpx;
  right: 7%;
  position: fixed;
}
.riji_1{
  width: 120rpx;
  height: 120rpx;
}

.goods_item{
display: flex;

}


.goods_img_wrap{

display: flex;
justify-content: center;
align-items: center;
}
.img_6{
  width: 120rpx;
  height: 120rpx;
  }
.goods_info_wrap{
  /* margin-top: 1%; */
/* flex: 3; */

/* position: relative; */
display: flex;
height: 150rpx;
flex-direction: column;
justify-content: space-around;
}

.biaoti_1{
  text-align: left;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2rem;
  color: #0f1213;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;

-webkit-line-clamp: 1;
}
.btn_sc{
  position: absolute;
  display: flex;
  left: 80%;
  width: 10%;
  height: 70rpx;


}
.image_1{
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  right: 15%;
  bottom: 8%;
}
.neirong_1{
  color: rgb(44, 30, 66);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  /* 第几行省略就是几👇 */
  -webkit-line-clamp: 2;
}
.shijian_1{
  position: relative;
  left: 0;
  font-size: 0.5rem;
}
.txt111{
  position: relative;

  align-items: center;
  text-align: center;
  justify-content: center;  
  /* border: "1";
  border-style: solid;
  border-width: 1px;
  border-color: rgb(49, 47, 165); */
}
.txt_66{
  position: fixed;
  bottom: 150rpx;
  left: 5%;
}
.txt_65{
  position: fixed;
  bottom: 150rpx;
  right: 5%;
}
page{
  background-color: #DDDCE1;
    
}
.txt_64{
  position: fixed;
  bottom: 150rpx;
  right: 43%;
}
.bg_1{
  /* background-color: #DDDCE1; */
  width: 100%;
  height: 100%;
}
.btn_fk{
  background-color: #C0CCD8;
}
.top {
  width: 100%;
  background-color: #cfcbdf;
}
.topsearch {
  width: 90%;
  margin-left: 5%;
  display: flex;
  padding: 2% 0;
  align-items: center;
}
.frame {
  background-color: white;
  width: 75%;
  border-radius: 20rpx;
  padding: 0 3%;
}
.frame>input {
  font-size: 24rpx;
  margin: 6rpx 0;
}
.topsearch>text {
  width: 15%;
  margin-left: 5%;
  color: #040608;
}
.first_tab{
  border-bottom: 1px solid rgb(190, 188, 204);
  margin-top: 1%;

  display: flex;
  flex-wrap: wrap;
}