/* pages/friendHelper/index.wxss */ .container { display: flex; justify-content: start; height: calc(100vh - 40px); } .leftBar { display: flex; width: 78px; height: 100vh; padding: 0 11px 20px; flex-direction: column; justify-content: start; box-sizing: border-box; font-size: 14px; background-color: #fff; } .leftBar .tab { position: relative; padding: 16px 0; text-align: center; } .leftBar .tab::after { content: ""; position: absolute; height: 3px; width: 0; bottom: 12px; left: 50%; transform: translateX(-50%); background: #1890ff; transition: width 0.3s; } .leftBar .tab.active::after { width: 80%; } .container .content { /* width: 100%; */ flex: 1; padding:0 8px 8px; } .container .content .selectProject { /* width: 100%; */ height: 60px; text-align: center; background: #ffefe4; border-radius: 8px; font-weight: 600; line-height: 60px; color: #1890ff; } .subSet { margin-top: 8px; border-radius: 7px; background-color: #fff; font-size: 14px; } .subSet .buttonBox{ display: flex; justify-content: space-between; padding: 12px; border-top: 1px solid #f3f3f3; } .subSet .textBox{ padding: 12px; white-space: pre-line; } .subSet .imgBox { display: flex; justify-content: space-between; flex-wrap: wrap; /* width: 100%; */ padding: 0 12px 12px; } .subSet .imgBox>view{ width: 82px; /* flex: 1; */ height: 82px; margin-bottom: 8px; } .subSet .imgBox>view image { /* object-fit: cover; */ width: 100%; }