.articlegroupdetail { width: 100%; height: auto; min-height: 520px; overflow-x: auto; } .articlegroupdetail h2 { text-align: center; } .articlegroupdetail .background-img { min-height: 300px; } .articlegroupdetail .background-img img { width: 100%; } .articlegroupdetail .wrappercontent { width: 900px; margin: 0 auto 100px; padding: 20px 0; } .articlegroupdetail .wrappercontent p.desc { text-align: right; line-height: 20px; font-family: pingfangsc-regular; font-size: 14px; color: rgba(0, 0, 0, 0.45); width: 100%; height: 20px; padding-right: 20px; padding-top: 10px; } .articlegroupdetail .wrappercontent p.desc .sharebutton { margin-right: 16px; } .articlegroupdetail .wrappercontent p.desc .wx-popover { display: inline-block; } .articlegroupdetail .wrappercontent p.desc svg { width: 16px; height: 13px; cursor: pointer; } .articlegroupdetail .wrappercontent .content { padding: 30px 15px; } .articlegroupdetail .wrappercontent .articleurl { width: 100%; height: auto; margin-top: 20px; } .wx-wrap { margin-right: 10px; display: inline-block; position: relative; cursor: pointer; } .wx-wrap .icon { height: 13px; } .wx-wrap:hover .wx-popover-content { visibility: visible; } .wx-popover-content { position: absolute; left: -20px; top: 30px; visibility: hidden; width: 210px; display: flex; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); background: #fff; z-index: 999; } .wx-popover-content #qrcode { margin: 15px 10px; } .wx-popover-content img { width: 60px; height: 60px; } .wx-popover-content .des { text-align: left; margin-left: 4px; padding: 12px 16px 12px 0; font-size: 12px; } .wx-popover-content .des p { margin-bottom: 0; }