wxamp-ymtxMerchant/pagesB/pages/publishAdd/publishAdd.wxss

.container {
    min-height: 100vh;
    background: linear-gradient(145deg, #f8f9ff 0%, #f0f2f6 100%);
    position: relative;
}

/* 背景装饰 */
.bg-decoration {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(7, 193, 96, 0.1) 0%, rgba(7, 193, 96, 0.05) 100%);
}

.circle-1 {
    width: 400rpx;
    height: 400rpx;
    top: -100rpx;
    right: -100rpx;
    background: linear-gradient(135deg, rgba(64, 169, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%);
}

.circle-2 {
    width: 300rpx;
    height: 300rpx;
    bottom: 100rpx;
    left: -100rpx;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1) 0%, rgba(255, 184, 0, 0.05) 100%);
}

/* 切换卡片 */
.tab-card {
    margin: 30rpx 30rpx 20rpx;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 60rpx;
    padding: 10rpx;
    box-shadow:
        0 20rpx 40rpx rgba(0, 0, 0, 0.06),
        0 8rpx 20rpx rgba(0, 0, 0, 0.03),
        inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

/* 内层标签容器 */
.category-tab {
    display: flex;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 56rpx;
    padding: 6rpx;
    gap: 6rpx;
}

/* 单个标签项 */
.tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    position: relative;
    border-radius: 50rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

/* 标签文字 */
.tab-text {
    font-size: 30rpx;
    font-weight: 500;
    color: #666;
    letter-spacing: 2rpx;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

/* 选中状态 - 渐变背景 */
.tab-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow:
        0 10rpx 20rpx rgba(102, 126, 234, 0.3),
        0 4rpx 8rpx rgba(0, 0, 0, 0.1),
        inset 0 2rpx 4rpx rgba(255, 255, 255, 0.5);
    transform: translateY(-2rpx);
}

/* 选中状态的文字 */
.tab-item.active .tab-text {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 添加光泽效果 */
.tab-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.2) 20%,
            transparent 50%);
    border-radius: 50rpx;
    pointer-events: none;
    z-index: 1;
}

/* 添加微光动画 */
.tab-item.active::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0.5;
    animation: shimmer 3s infinite;
    pointer-events: none;
    z-index: 1;
}

/* 悬停效果 */
@media (hover: hover) {
    .tab-item:hover:not(.active) {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
    }

    .tab-item:hover:not(.active) .tab-text {
        color: #333;
    }
}

/* 点击效果 */
.tab-item:active {
    transform: scale(0.98);
}

/* 微光动画 */
@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    40% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
    }
}


.tab-item.active:nth-child(1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tab-item.active:nth-child(2) {
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.tab-item.active-bottom {
    position: relative;
}

.tab-item.active-bottom::after {
    content: '';
    position: absolute;
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4rpx;
    animation: slideIn 0.3s ease;
}

/* 表单容器 */
.form-container {
    padding: 0 30rpx 40rpx;
    position: relative;
    z-index: 10;
}

.form-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 32rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.02),
        0 2rpx 8rpx rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.form-item {
    width: 100%;
}

.label-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.label {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-right: 8rpx;
}

.required {
    font-size: 24rpx;
    color: #ff6b6b;
    margin-left: 8rpx;
}

.optional {
    font-size: 24rpx;
    color: #999;
    background: rgba(0, 0, 0, 0.03);
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    margin-left: 8rpx;
}

.input {
    width: 100%;
    height: 88rpx;
    background: #f8f9fc;
    border-radius: 20rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #333;
    border: 2rpx solid transparent;
    box-sizing: border-box;
}

.input:focus {
    border-color: #07c160;
    background: #fff;
}

.placeholder {
    color: #b8b8b8;
    font-size: 28rpx;
}

.textarea {
    width: 100%;
    min-height: 240rpx;
    background: #f8f9fc;
    border-radius: 20rpx;
    padding: 24rpx 30rpx;
    font-size: 28rpx;
    color: #333;
    border: 2rpx solid transparent;
    box-sizing: border-box;
}

.textarea:focus {
    border-color: #07c160;
    background: #fff;
}

.word-count {
    display: block;
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 12rpx;
}

/* 分类选择器  */
.category-selector {
    width: 100%;
    min-height: 88rpx;
    display: flex;
    align-items: center;
}

.category-badge {
    display: inline-block;
    padding: 16rpx 32rpx;
    border-radius: 40rpx;
    color: #648ac2;
    font-size: 28rpx;
    font-weight: 500;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
    letter-spacing: 1rpx;
}

.category-placeholder {
    width: 100%;
    height: 88rpx;
    background: #f8f9fc;
    border-radius: 20rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    line-height: 88rpx;
    color: #b8b8b8;
    border: 2rpx solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-placeholder .arrow {
    font-size: 40rpx;
    color: #999;
    transform: rotate(90deg);
    display: inline-block;
}

/* 上传器 */
.uploader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.uploader {
    width: 220rpx;
    height: 220rpx;
    background: #f8f9fc;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2rpx dashed #ddd;
}

.preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-placeholder .plus {
    font-size: 60rpx;
    color: #ccc;
    line-height: 1;
    margin-bottom: 8rpx;
}

.upload-placeholder .hint {
    font-size: 22rpx;
    color: #999;
}

.upload-tip {
    font-size: 22rpx;
    color: #999;
    margin-top: 12rpx;
}

/* 视频选择器 */
.video-picker {
    width: 100%;
    min-height: 120rpx;
    background: #f8f9fc;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border: 2rpx dashed #ddd;
}

.video-info {
    display: flex;
    align-items: center;
}

.video-name {
    font-size: 26rpx;
    color: #333;
    flex: 1;
    word-break: break-all;
}

.video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    height: 80rpx;
}

.video-placeholder .plus {
    font-size: 40rpx;
    color: #ccc;
}

.video-placeholder .hint {
    font-size: 26rpx;
    color: #999;
}

/* 提交按钮 */
.btn-wrapper {
    margin-top: 40rpx;
    padding: 0 20rpx;
}

.submit-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #07c160 0%, #08994d 100%);
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20rpx 40rpx rgba(7, 193, 96, 0.3);
    border: none;
}

.submit-btn.disabled {
    background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}