.my-tree { width: 100%; padding: 0 10Px; box-sizing: border-box; } .my-tree .my-tree-row { width: 100%; box-sizing: border-box; opacity: 0; transition: all 0.15s; position: relative; } .my-tree .my-tree-row:active { background: #f0f0f0; } .my-tree .my-tree-row .my-tree-content { width: 100%; height: 100%; display: flex; align-items: center; } .my-tree .my-tree-row .my-tree-content .prefix-icon { margin-right: 8Px; } .my-tree .my-tree-row .my-tree-content .prefix-icon img { width: 16Px; } .my-tree .my-tree-row .middle-conetnt { color: #333; font-size: 14Px; } .my-tree .my-tree-row .middle-last { position: absolute; right: 0; } .my-tree .my-tree-row .middle-last .post-icon { display: flex; align-items: center; } .my-tree .my-tree-row .middle-last .post-icon img { width: 20Px; } .my-tree .my-tree-row .middle-last .post-icon .arrowTransform { transition: 0.15s; transform-origin: center; transform: rotateZ(90deg); } .my-tree .my-tree-row .middle-last .post-icon .arrowTransformReturn { transition: 0.15s; transform-origin: center; transform: rotateZ(0deg); } .my-tree .isShow { opacity: 1; } .my-tree .border { border-bottom: 1Px solid #f0f0f0; } .my-tree .serch-box { width: 100%; display: flex; margin-bottom: 10Px; } .my-tree .serch-box .serch { flex: 8; position: relative; } .my-tree .serch-box .serch input { -webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 4Px; border: 1Px solid #dcdfe6; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 30Px; line-height: 30Px; outline: none; padding: 0 15Px; transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; cursor: pointer; font-size: 13.5Px; } .my-tree .serch-box .serch .clear-icon { position: absolute; width: 16Px; right: 8Px; top: 50%; transform: translateY(-50%); } .my-tree .serch-box .serch .clear-icon:active { background: #f0f0f0; border-radius: 50%; } .my-tree .serch-box .text { flex: 1.5; height: 30Px; line-height: 30Px; border: 1Px solid #dcdfe6; border-radius: 4Px; box-sizing: border-box; text-align: center; user-select: none; color: #606266; font-size: 13.5Px; } .my-tree .serch-box .text:active { background: #f0f0f0; }