page { width: 100%; height: 100vh; background: #f7f7f7; } .add-issue { width: 100%; height: 100%; background: #f7f7f7; box-sizing: border-box; padding: 20rpx 20rpx 0; } .add-issue .issue-content { width: 100%; /* height: 720rpx; */ border-radius: 16rpx; background: #fff; box-sizing: border-box; padding: 30rpx 20rpx 45rpx; } .add-issue .issue-content textarea { width: 100%; height: 298rpx; box-sizing: border-box; padding-bottom:20rpx; font-size: 34rpx; color: #333; line-height: 50rpx; position: relative; } .add-issue .issue-content textarea .textarea-placeholder { font-size: 32rpx; color: #999; line-height: 50rpx; position: absolute; left: 0; top: 0; } .add-issue .issue-content .image-list { width: 100%; display: grid; grid-template-columns: 214rpx 214rpx 214rpx; grid-template-rows: 214rpx; grid-gap: 17rpx; height: 214rpx; } .add-issue .issue-content .image-list .image-item { width: 100%; height: 100%; position: relative; } .add-issue .issue-content .image-list image { width: 100%; height: 100%; object-fit: cover; border-radius: 8rpx; } .add-issue .issue-content .image-list .image-item .loading { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; } .add-issue .issue-content .image-list .image-item .close { position: absolute; top: -10rpx; right: -10rpx; width: 40rpx; height: 40rpx; } .add-issue .issue-location { width: 100%; height: 210rpx; border-radius: 16rpx; background: #fff; margin-top: 20rpx; box-sizing: border-box; padding: 34rpx 18rpx 9rpx 25rpx; } .add-issue .issue-location .address { width:70%; height: 80rpx; display: flex; align-items: center; } .add-issue .issue-location textarea { width:100%; height: 88rpx; color: #333; font-size: 34rpx; line-height: 46rpx; } .add-issue .issue-location .address-placeholder { font-size: 32rpx; color: #999; } .add-issue .issue-location .address image { width: 26rpx; height:26rpx; } .add-issue .issue-location .address view { color: #999; font-size: 26rpx; margin-left: 14rpx; } .add-issue .image-box { width: 100%; height: 170rpx; border-radius: 16rpx; background: #fff; margin-top: 20rpx; box-sizing: border-box; padding: 34rpx 24rpx; display: flex; align-items: center; } .add-issue .image-box .add-icon { width: 80rpx; height: 80rpx; margin-right: 40rpx; } .add-issue .publish-issue { width:100%; height: 84rpx; display: flex; justify-content: center; align-items: center; margin-top: 180rpx; } .add-issue .publish-issue button { width:560rpx; height: 84rpx; line-height:84rpx; text-align: center; margin: 0; padding: 0; outline: 0; background: linear-gradient(to right, #f40f0f, #ff4c4c); color: #fff; font-size: 36rpx; border-radius: 16rpx; } .add-issue .publish-issue .hover-publish { background:red; } .wux-actionsheet__button { font-size: 34rpx !important; color: #333 !important; } /* 重新定位 */ .flexBox{ display: flex; width: 100%; box-sizing: border-box; } .refresh{ margin-top: 20rpx; margin-left: 30rpx; } .refresh image { width: 34rpx; height: 34rpx; float: left; position: relative; top: 5rpx; } .refresh-name { font-size: 28rpx; font-weight: 500; color: rgba(0, 179, 152, 1); float: left; margin-left: 10rpx; } .sheet-bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background-color: rgba(0, 0, 0, 0.6); } /* record start */ .record-actionsheet { height: 472rpx; width: 100%; background-color: #ffffff; border-radius: 30rpx 30rpx 0 0; position: fixed; z-index: 999; bottom: 0; transition: all .2s linear; } .record-actionsheet-hide { bottom: -480rpx; transition: all .2s linear; } .record-actionsheet .top-menu { display: flex; align-items: center; justify-content: space-between; height: 80rpx; } .record-actionsheet .top-menu .button { width: 120rpx; height: 80rpx; line-height: 80rpx; text-align: center; } .record-actionsheet .top-menu .cancel { color: #5b5b5b; } .record-actionsheet .top-menu .confirm { color: #f61717; } .record-actionsheet .close-icon { width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center; } .record-actionsheet .close-icon image { width: 30rpx; height: 30rpx; } .record-actionsheet .text-status { color: #5b5b5b; text-align: center; } .record-actionsheet .status-icon { width: 100%; height: 210rpx; text-align: center; margin-top: 50rpx; } .record-actionsheet .status-icon .icon { width: 210rpx; height: 210rpx; } .record-actionsheet .text-tip { font-size: 26rpx; color: #9e9e9e; text-align: center; } /* record end */ /* audio start */ .audio { width: 670rpx; height: 116rpx; background-color: #f3f3f3; border-radius: 10r; display: flex; position: relative; margin-top: 40rpx; } .audio .control-button { width: 100rpx; height: 100%; display: flex; align-items: center; justify-content: center; } .audio .control-button image { width: 60rpx; height: 60rpx; } .audio .control-line { display: flex; flex-direction: column; justify-content: center; } .audio .control-line .control-slider { width: 500rpx; margin: 10rpx 36rpx; } .audio .control-line .line-time { margin: 0 10px; display: flex; align-items: center; justify-content: space-between; } .audio .control-line .line-time .time-text { color: #aaaaaa; font-size: 24rpx; } .audio .delete-audio { position: absolute; right: -20rpx; top: -20rpx; } .audio .delete-audio image { width: 60rpx; height: 60rpx; } /* audio end */ .tip_bg{ position: absolute; overflow: hidden; top: 0; z-index: 99; width: 100%; height: calc(100vh + 84rpx); background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; } .tip-info{ position: relative; border-radius: 10rpx; margin-top: 150rpx; z-index: 100; width: 80%; height: 950rpx; background: #fff; /* opacity: 1; */ } .tip-info .title{ padding: 30rpx 35rpx 10rpx 35rpx; box-sizing: border-box; position: relative; width: 100%; height: auto; text-align: center; line-height: 45rpx; font-size: 30rpx; } .tip-info .title .close{ position: absolute; width: 60rpx; height: 60rpx; background: red; top: 10rpx; right: 20rpx; } .tip-info .content{ max-height: 650rpx; overflow-y: auto; width: 100%; height: auto; padding: 10rpx 30rpx; box-sizing: border-box; } .tip-info .content .h1{ width: 100%; height: auto; font-size: 30rpx; line-height: 45rpx; font-weight: 600; } .tip-info .content .h2{ width: 100%; height: auto; font-size: 26rpx; line-height: 45rpx; } .tip-info .content .h3{ text-align: right; width: 100%; height: auto; font-size: 26rpx; line-height: 45rpx; } .tip-info .end{ position: absolute; width: 100%; height: 70rpx; bottom: 20rpx; display: flex; align-items: center; justify-content: center; } .tip-info .end .end-but { text-align: center; border-radius: 50rpx; width: 250rpx; height: 60rpx; line-height: 60rpx; font-size: 28rpx; color: #fff; } .tip-info .end .bg1 { background: #ffb2b5; } .tip-info .end .bg2 { background: linear-gradient(to right, #f40f0f, #ff4c4c); }