|
- /* package_A/page/upload/index.wxss */
- .upload_container {
- box-sizing: border-box;
- width: 100%;
- padding: 30rpx;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- }
- /* 上传图片 */
- .upload_images {
- width: 100%;
- margin-bottom: 50rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
- font-size: 34rpx;
- color: #666666;
- position: relative;
- }
- .image_list {
- width: 100%;
- margin-top: 20rpx;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-content: flex-start;
- }
- .image_preview {
- height: 200rpx;
- width: 200rpx;
- margin-right: 20rpx;
- margin-bottom: 20rpx;
- position: relative;
- }
- .image_item {
- height:100%;
- width: 100%;
- margin-bottom: 20rpx;
- }
- .close{
- position: absolute;
- top:0;
- right:0;
- transform: translate(40%,-40%);
- height:50rpx;
- width:50rpx;
- background:rgba(179, 179, 179, 0.5);
- border-radius: 50%;
- z-index: 10;
- }
- .close::before{
- content: "";
- display: block;
- position: absolute;
- width: 60%;
- height: 10rpx;
- top:50%;
- left:50%;
- background:rgb(124, 124, 124);
- transform-origin: center;
- /* transform: ; */
- transform: translate(-50%,-50%) rotate(45deg);
- }
- .close::after{
- content: "";
- display: block;
- position: absolute;
- width: 60%;
- height: 10rpx;
- top:50%;
- left:50%;
- background:rgb(124, 124, 124);
- transform-origin: center;
- /* transform: ; */
- transform: translate(-50%,-50%) rotate(-45deg);
- }
- .upload_image {
- width: 200rpx;
- height: 200rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border: 1rpx dashed #A6A6A6;
- border-radius: 10rpx;
- }
-
- .upload_image text {
- color: rgba(0, 0, 0, 0.5);
- font-size: 30rpx;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- }
- .note_mark {
- margin-top: 20rpx;
- font-size: 24rpx;
- color: rgba(153, 153, 153, 1);
- }
- .tips{
- position: absolute;
- bottom: -40rpx;
- left: -15rpx;
- color: red;
- font-size: 24rpx;
- transform: translate(27rpx, -5rpx);
- display: none;
- }
- .upload_images.warning .tips{
- display: block;
- }
- /* 按钮区 */
- .btn_list {
- box-sizing: border-box;
- width: 100%;
- margin-top: 50rpx;
- padding: 10rpx 20rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- }
- .btn_item {
- width: 600rpx;
- height: 80rpx;
- border-radius: 40rpx;
- line-height: 80rpx;
- text-align: center;
- font-size: 32rpx;
- color: #ffffff;
- background-color: #477DF3;
- }
|