p { margin: 0; padding: 0; } .articlegroup { background: #ffffff; padding: 20px; cursor: pointer; height: 100%; width: 100%; overflow: hidden; } .articlegroup:hover { box-shadow: 0 0 10px 0 #cccccc; transition: all 0.5s; } .articlegroup .articleheader { border-bottom: 1px solid #ededed; padding-bottom: 15px; } .articlegroup .articleheader .articleheaderimg { width: 20px; height: 20px; border-radius: 3px; vertical-align: middle; } .articlegroup .articleheader .articleheadertitle { text-align: left; line-height: 25px; font-family: pingfangsc-medium; font-size: 18px; color: #1f9373; letter-spacing: 0; width: 72px; height: 25px; font-weight: bold; vertical-align: middle; margin-left: 10px; } .articlegroup .articleheader .articleheadermore { vertical-align: middle; float: right; text-align: left; font-family: pingfangsc-regular; font-size: 12px; color: rgba(0, 0, 0, 0.65); width: auto; margin-top: 5px; cursor: pointer; } .articlegroup .articleheader .articleheadermore a { color: rgba(0, 0, 0, 0.65); } .articlegroup .articleheader .articleheadermore svg { width: 10px; height: 10px; color: #000000; opacity: 0.65; margin-top: -1px; margin-left: 3px; } .articlegroup .articleheader .articleheadermore span, .articlegroup .articleheader .articleheadermore svg { vertical-align: middle; } .articlegroup .articlegroupmiddle { margin-top: 20px; margin-left: -10px; } .articlegroup .articlegroupmiddle .articlegroupcontent { width: 100%; height: auto; display: inline-block; vertical-align: top; position: relative; padding-left: 10px; } .articlegroup .articlegroupmiddle .articlegroupcontent img { width: 100%; height: auto; max-height: 100px; } .articlegroup .articlegroupmiddle .articlegroupcontent img.articlegroupimg { max-height: 120px; } .articlegroup .articlegroupmiddle .articlegroupcontent span, .articlegroup .articlegroupmiddle .articlegroupcontent span.default { text-align: left; line-height: 20px; font-family: pingfangsc-medium; color: rgba(0, 0, 0, 0.85); width: 100%; height: auto; display: inline-block; padding-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .articlegroup .articlegroupmiddle .articlegroupcontent span.bottom { width: calc(100% - 10px); position: absolute; bottom: 0; left: 10px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); height: 28px; color: #ffffff; padding: 5px 7.5px 5px 5px; overflow: hidden; cursor: pointer; display: inline-block; } .articlegroup .articlegroupmiddle .articlegroupcontent span.bottom:hover { height: auto !important; transition: height 0.3s; } .articlegroup .articlegroupmiddle .articlegroupcontent .articlehot { background: #e7aa22; border-radius: 0 0 0 12px; width: 48px; height: 30px; line-height: 30px; text-align: center; border-radius: 0,0,0,12px; position: absolute; top: 0; right: 0; color: #ffffff; } .articlegroup .articlegroupmiddleloading { width: 100%; text-align: center; min-height: 400px; font-size: 24px; padding-top: 50px; height: 100%; position: relative; } .articlegroup .articlegroupmiddleloading .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .articlegroup .articlegroupmiddleloading .wrapper p { font-family: pingfangsc-medium; color: rgba(0, 0, 0, 0.85); padding-top: 10px; } .articlegroup .articlegroupdefault { width: 100%; } .articlegroup .articlegroupdefault .articlegroupdefaultitem { width: 100%; padding-top: 15px; } .articlegroup .articlegroupdefault .articlegroupdefaultitem .imgcontainer { width: 80px; height: 80px; display: inline-block; overflow: hidden; vertical-align: top; } .articlegroup .articlegroupdefault .articlegroupdefaultitem .imgcontainer img { width: 80px; height: 80px; } .articlegroup .articlegroupdefault .articlegroupdefaultitem .defaultcontent { vertical-align: top; display: inline-block; padding-left: 15px; height: 80px; width: calc(100% - 80px); cursor: pointer; position: relative; } .articlegroup .articlegroupdefault .articlegroupdefaultitem .defaultcontent .defaulttitle { width: 100%; text-align: left; font-family: pingfangsc-medium; font-size: 14px; color: rgba(0, 0, 0, 0.85); letter-spacing: 0; width: auto; display: inline-block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .articlegroup .articlegroupdefault .articlegroupdefaultitem .defaultcontent .defaultdate { text-align: left; line-height: 17px; font-family: pingfangsc-regular; font-size: 12px; color: rgba(0, 0, 0, 0.45); letter-spacing: 0; width: auto; height: 17px; padding-top: 5px; position: absolute; left: 15px; bottom: 5px; } .articlegroup .articlegroupdefault .articlegroupsimple { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 20px; cursor: pointer; } .articlegroup .articlegroupdefault .articlegroupsimple span, .articlegroup .articlegroupdefault .articlegroupsimple img { vertical-align: middle; } .articlegroup .articlegroupdefault .articlegroupsimple img { width: 16px; height: 16px; } .articlegroup .articlegroupdefault .articlegroupsimple span { padding-left: 10px; text-align: left; line-height: 20px; font-family: pingfangsc-medium; font-size: 14px; color: rgba(0, 0, 0, 0.85); height: 20px; } .articlegroup .articlegroupdefault .articlegroupsimple span.articleshowicon { display: inline-block; background: #e7aa22; width: 8px; height: 8px; border-radius: 50%; padding: 0 !important; margin: 0 !important; } .articlegroup .articlegroupdefault .articlegrouptimeline { padding-top: 20px; } .articlegroup .articlegroupdefault .articlegrouptimeline .articlegrouptimelineitem { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; line-height: 20px; font-family: pingfangsc-medium; font-size: 14px; color: rgba(0, 0, 0, 0.85); height: 20px; } .articlegroup .articlegroupdefault .articlegrouptimeline .articlegrouptimelinedate { text-align: left; line-height: 17px; font-family: pingfangsc-regular; font-size: 12px; color: rgba(0, 0, 0, 0.45); width: auto; height: 17px; padding-top: 5px; } .articlegroup .ant-timeline .ant-timeline-item .ant-timeline-item-tail { border-left: 2px dashed #efefef; }