MoeNovaClient/pages/make/manageArticle.scss

page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  background-color: #f8f8f8;
}

.status_bar {
  height: 44rpx;
  width: 100%;
}
.page {
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
	width:750rpx;
}

.nav-bar {
  width: 750rpx;
  height: 88rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f0f0;

  .left {
    width: 120rpx;
    .uni-btn-icon {
      font-size: 36rpx;
      color: #333;
    }
  }

  .center {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .right {
    display: flex;
    align-items: center;
    
    .btn {
      font-size: 28rpx;
      color: #333;
      margin-left: 30rpx;
      
      &:active {
        opacity: 0.7;
      }
    }
  }
}

/* 用户信息列表 */
.user-list{
	width:710rpx;
	border-radius: 20rpx;
	margin: 20rpx auto;
	.agree {
		width:100%;text-align: center;color:#959595;font-size: 22rpx;padding:20rpx 0;margin-top: 0rpx;padding-right: 50rpx;
		display: flex;flex-direction: row;justify-content: flex-end;align-items: center;
		.xy {
			color:darkred;padding:0rpx 20rpx;
		}
		image {
			width:32rpx;margin-right: 8rpx;
		}
	}
	.tips {
		display: flex;flex-direction: row;justify-content: space-between;
		height: 90rpx;
		.title {
			display: flex;flex-direction: row;justify-content: center;height: 80rpx;line-height: 80rpx;font-weight: bold;font-size: 30rpx;
			.line {
				width:10rpx;height:24rpx;background-color: $base;line-height: 80rpx;margin: 28rpx 20rpx;
			}
		}
		.more-content{
			display: flex;flex-direction: row;height:100%;
			align-items: center;
			.item1 {
				display: flex;justify-content: center;height:100%;flex-direction: row;line-height: 100%;align-items: center;align-self: center;
				.switch {
				}
				.status {
					color:#E54D42;
				}
				.btn {
					width:160rpx;height:50rpx;margin: 0 20rpx;text-align: center;margin-left: 40rpx;
					background-color: #39B54A;border-radius: 25rpx;color:#fff;font-size: 24rpx;line-height: 50rpx;
				}
			}
		}
		.beizu {
			padding:10rpx 30rpx;color:#959595;
		}
	}
	.content {
		padding:10rpx 30rpx;
		display: flex;flex-direction: column;justify-content: space-between;
		.edit {
			border:solid 1px #f0f0f0;border-radius: 10rpx;width:670rpx;height:80rpx;font-size: 30rpx;padding:10rpx;
		}
		.edit2 {
			border:solid 1px #f0f0f0;
			border-radius: 10rpx;
			width:670rpx;
			height:340rpx;
			font-size: 30rpx;
			padding: 10rpx;
			box-sizing: border-box;
		}
		.item {
			display: flex;flex-direction: row;justify-content: space-between;
			border:solid 1px #f0f0f0;border-radius: 10rpx;width:730rpx;height:80rpx;align-items: center;
			.left {
				padding-left: 10rpx;width:168rpx;font-size: 28rpx;
			}
			.input {
				width:570rpx;font-size: 28rpx;
			}
			.picker {
				padding-left: 10rpx;width:120rpx;display: flex;flex-direction: row;justify-content: space-between;
				.selimg {
					width:24rpx;height:24rpx;margin-top: 4rpx;margin-left: 12rpx;
				}
			}
			.edit3 {
				border:solid 0px #f0f0f0;border-radius: 10rpx;width:730rpx;height:140rpx;font-size: 28rpx;padding:8rpx;
			}
		}
		.item2 {
			display: flex;flex-direction: row;justify-content: space-between;margin-top: 10rpx;
			.item21 {
				display: flex;flex-direction: row;justify-content: space-between;
				border:solid 1px #f0f0f0;border-radius: 10rpx;width:360rpx;height:80rpx;align-items: center;
				.left {
					padding-left: 10rpx;width:120rpx;line-height: 60rpx;font-size: 28rpx;
				}
				.input {
					width:360rpx;font-size: 28rpx;line-height: 60rpx;
				}
			}
		}
	}
	.img {
		width:100%;padding-left: 20rpx;
		image {
			width:710rpx;
		}
	}
	.img_list {
		display: flex;
		width:100%;
		padding:20rpx 40rpx;
		flex-wrap: wrap;
		.image {
			display: flex;
			width:200rpx;
			height:200rpx;
			position: relative;
			margin: 10rpx;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			background: rgba(120, 120, 120, 0.2);border-radius: 8rpx;
			
			.txt {
				font-size: 120rpx;
				color: #999;
			}
			
			.upimg {
				position: absolute;left:0;top:0;
				width:100%;
				height:100%;
				border-radius: 8rpx;
			}
			
			.del {
				width:40rpx;
				height:40rpx;
				position: absolute;
				right:-10rpx;
				top:-10rpx;
			}
		}
	}
	.btn_list {
		display: flex;flex-direction: row;align-items: center;justify-content: center;
		.btn_sq {
			width:300rpx;height:80rpx;background-color: #BF8669;border-radius: 4rpx;text-align: center;color:#fff;line-height: 80rpx;
			font-size: 32rpx;margin:20rpx;
		}
		
	}
	.telbg {
		width:750rpx;height:350rpx;display: flex;flex-direction: column;padding-left: 40rpx;padding-top: 120rpx;color:#fff;
		background-color: #517456;font-size: 30rpx;
		.tel {
			font-size: 80rpx;color:#BF8669;
		}
	}
	.img2 {
		width:100%;padding-left: 0rpx;
		image {
			width:750rpx;
		}
	}

}
.footer {
	position: fixed;bottom:0rpx;width:750rpx;height:120rpx;display: flex;flex-direction: row;justify-content: center;
	background: #fff;
	.btn {
		width:690rpx;height:80rpx;background-color: #39B54A;border-radius: 40rpx;text-align: center;color:#fff;line-height: 80rpx;
		font-size: 32rpx;
	}
}
.foot-btn {
	height: 80rpx;padding:60rpx;
	button {
		height: 80rpx;line-height: 80rpx;font-size: 28rpx;
	}
}
.uni-textarea-placeholder {
    color: #959595;
    overflow: hidden;
}
.num_txt {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx 30rpx;
    
    .num_input {
        width: 120rpx;
        height: 60rpx;
        border: 1px solid $base;
        border-radius: 10rpx;
        margin: 0 20rpx;
        text-align: center;
        font-size: 28rpx;
    }
}

.list {
  padding: 20rpx;
  
  .article-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .article-content {
      display: flex;
      
      .article-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .article-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .article-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .article-desc {
          font-size: 28rpx;
          color: #666;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .article-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10rpx;
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
          
          .status {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
            
            &.published {
              background-color: #e8f5e9;
              color: #39B54A;
            }
            
            &.draft {
              background-color: #f5f5f5;
              color: #999;
            }
          }
        }
      }
    }
    
    .article-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .action-btn {
        padding: 10rpx 30rpx;
        font-size: 28rpx;
        border-radius: 6rpx;
        margin-left: 20rpx;
        
        &.edit {
          background-color: #f0f0f0;
          color: #666;
        }
        
        &.delete {
          background-color: #ffebee;
          color: #e54d42;
        }
      }
    }
  }
}