1

llj

2026-03-06 49882fc23c307a41899b123fe46a9c18639c5533

1

 components/ZWDB/HItem.vue

@@ -43,63 +43,61 @@

<style scoped>
.todo-item {
    list-style: none;           /* 去掉默认列表符号 */
    margin: 12px 0;             /* 上下间距 */
    padding: 0;                 /* 由内部元素控制内边距 */
    background-color: #fff;     /* 白色背景 */
    border-radius: 12px;        /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* 轻微阴影 */
    overflow: hidden;           /* 保证圆角裁剪内容 */
    list-style: none;           
    margin: 12px 0;            
    padding: 0;                
    background-color: #fff;     
    border-radius: 12px;       
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); 
    overflow: hidden;          
}

.radio-option {
    display: flex;              /* 弹性布局 */
    align-items: center;        /* 垂直居中 */
    padding: 14px 16px;         /* 内边距 */
    border-bottom: 1px solid #f0f0f0; /* 分割线（最后一项可去掉） */
    display: flex;              
    align-items: center;        
    padding: 14px 16px;         
    border-bottom: 1px solid #f0f0f0; 
    transition: background 0.2s;
}

.radio-option:last-child {
    border-bottom: none;        /* 最后一项去掉分割线 */
    border-bottom: none;       
}

.radio-option:hover {
    background-color: #fafafa;  /* 悬停效果（仅H5） */
    background-color: #fafafa;  
}

radio {
    transform: scale(0.9);      /* 适当缩小单选框（可选） */
    margin-right: 8px;           /* 与文字间距 */
    transform: scale(0.9);     
    margin-right: 8px;          
}

.item-text {
    flex: 1;                    /* 占用剩余宽度，把按钮挤到右边 */
    flex: 1;                   
    font-size: 16px;
    color: #333;
    word-break: break-word;     /* 长文本换行 */
    word-break: break-word;    
}

.delete-btn {
    background-color: #ff5a5f;   /* 红色删除按钮 */
    background-color: #ff5a5f;  
    color: white;
    border: none;
    border-radius: 20px;         /* 胶囊样式 */
    border-radius: 20px;         
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(255, 90, 95, 0.3);
    transition: opacity 0.2s;
    cursor: pointer;             /* 鼠标手型（H5） */
    cursor: pointer;            
}

.delete-btn:active {
    opacity: 0.7;                /* 点击反馈 */
    opacity: 0.7;                
}

/* 针对不同平台微调（可选） */
/* 微信小程序中 button 有默认样式，需要重置 */

button.delete-btn::after {
    border: none;
}