.user_info { position: absolute; bottom: 10%; right: 8%; } .user_info .top { display: flex; align-items: center; } .user_info .name { color: #fff; font-weight: 600; } .user_info .avatar { width: 58px; height: 58px; } .user_info .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .user_info .left { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; padding-right: 10px; } .user_info .des { font-size: 13px; text-align: right; color: #d6d6d6; } .user-info { display: flex; margin-bottom: 5px; } .user-info .avatar { max-height: 45px; max-width: 45px; float: left; border-radius: 50%; } .user-info .intro { /* float:left; */ margin-left: 5px; } .user-info .intro div:nth-child(2) { word-break: break-all; line-height: 18px; } .content-item { padding-left: 49px; padding-right: 30px; } .user-info .intro .name { font-weight: 600; } hr { margin-top: 2px; border-width: 0; border-top-width: 0px; border-top: 1px dashed; border-top-color: currentcolor; border-color: #ebf2ed; clear: both; } .header-nav-ul-li-a2 { cursor: pointer; text-decoration: none; border: 0; background: #000; color: #fff !important; padding: 3px 5px; border-radius: 3px; font-size: 0.6rem; align-items: center; line-height: 0.9rem; position: relative; left: 70%; } .topimage { padding-top: 64px; background-position: 50%; background-size: cover; min-height: 200px; text-align: center; /* border-radius:0 0 0.5rem 0.5rem; */ box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); border-radius: 1rem 1rem 0rem 0rem; /* margin-bottom:30px; */ } .foot-menu { width: 100%; height: 30px; background: #fff; bottom: 0; left: 0; right: 0; z-index: 1; max-width: 1150px; margin: auto; } img { border-radius: 3px } .text { font-size: 1.1em; color: #4d4d4d; white-space: pre-wrap } .desc { color: #9b9b9b; /* font-family:LXGW WenKai Screen,monospace; */ font-size: 0.9em; } .loadbtn { width: 100%; height: 35px; cursor: pointer; border: 0px; color: #9b9b9b; /* font-family:LXGW WenKai Screen,monospace; */ font-size: 0.8em; background-color: white; border-radius: 5px 5px 0px 0px; border: 1px dashed #e0dfdf; } #back-top-button { position: fixed; bottom: 36px; right: 10px; z-index: 99; border: none; outline: none; background-color: #d1d1d1; color: #2157ad; opacity: .35; cursor: pointer; padding: 6px; border-radius: 4px; font-size: 16px; } .atk-main-editor>.atk-bottom .atk-send-btn { background: #000 !important; } .atk-copyright { display: none !important; } .artalk { margin-top: 10px !important; width: 88% !important; margin-left: 46px !important; } a img { display: block; vertical-align: bottom; } a video { display: block; vertical-align: bottom; } .time { color: #9b9b9b; font-size: 0.8em } .location { /* font-size:0.8em*/ } .tag { color: #9b9b9b; text-align: right; font-size: 0.9em; /* font-family:LXGW WenKai Screen,monospace; */ } .location { color: #576b95; } .single-pic { object-fit: cover; width: 100%; border-radius: 4px; } .pic { object-fit: cover; height: 100px; /* width:100px; */ width: 100%; border-radius: 4px; } .pic-group { /* flex:0; */ margin: 0px 4px 4px 0px; } .pic-group-in { margin: 0.1rem; } .text p { margin: 0 0; } .text img { max-height: 168px; max-width: 255px; margin-bottom: 5px; animation: fadeIn 1s; transition: all .4s ease-in-out; } .atk-link{ display: none!important; } .atk-main-editor>.atk-header { padding: 0px 0px 0!important; } .atk-main-editor>.atk-textarea-wrap>.atk-textarea { padding: 10px 5px!important; } @media screen and (max-width:300px) { .topimage { border-radius: 0px; } .pic { object-fit: cover; height: 92px; width: 92px; border-radius: 4px; } .single-pic { object-fit: cover; height: 100px; width: 100px; border-radius: 4px; } } @media screen and (min-width:301px) and (max-width:500px) { .topimage { border-radius: 0px; } .pic { object-fit: cover; height: 92px; width: 92px; border-radius: 4px; } .single-pic { object-fit: cover; height: 220px; width: 220px; border-radius: 4px; } #shuoshuo_btn{ /*margin-left: 58%;*/ position: absolute; /*position: fixed;*/ margin-left: 190px!important; } } @media screen and (min-width:501px) and (max-width:700px) { .topimage { border-radius: 0px; } .pic { object-fit: cover; height: 120px; width: 120px; border-radius: 4px; } .single-pic { object-fit: cover; height: 250px; width: 250px; border-radius: 4px; } } @media screen and (min-width:701px) and (max-width:900px) { .pic { object-fit: cover; height: 125px; width: 125px; border-radius: 4px; } .single-pic { object-fit: cover; height: 280px; width: 280px; border-radius: 4px; } #shuoshuo_btn{ margin-left: 48%; position: absolute; } } @media screen and (min-width:901px) and (max-width:1200px) { .pic { object-fit: cover; height: 192px; width: 192px; border-radius: 4px; } .single-pic { object-fit: cover; /* height:320px; width:320px;*/ height: 330px; width: 330px; border-radius: 4px; } } @media screen and (min-width:1201px) { .header-nav-ul-li-a2 { left: 85% !important; } .pic { object-fit: cover; height: 180px; width: 180px; border-radius: 4px; } .single-pic { object-fit: cover; height: 380px; width: 380px; border-radius: 4px; } } /*相册css*/ .memos-photo-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .5rem; display: grid; width: 100%; gap: .5rem; } .memos-photo { position: relative; overflow: hidden; border-radius: .25rem; height: 194px; } .memos-photo>img { min-height: 100%; width: auto; min-width: 100%; cursor: pointer; -o-object-fit: cover; object-fit: cover; height: auto; animation: fadeIn 1s; transition: all .4s ease-in-out; } .memos-photo span.photo-title, .memos-photo span.photo-time { background: rgba(0, 0, 0, 0.3); padding: 0px 8px; font-size: 0.9rem; color: #fff; display: none; animation: fadeIn 1s; } .memos-photo span.photo-title { position: absolute; bottom: 4px; left: 4px; } .memos-photo span.photo-time { position: absolute; top: 4px; left: 4px; font-size: 0.8rem; } .memos-photo:hover span.photo-title, .memos-photo:hover span.photo-time { display: block !important; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @media screen and (min-width:480px) and (max-width: 899px) { .memos-photo-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); } .memos-photo { height: 201px; } } @media only screen and (max-width: 479px) { .memos-photo-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .memos-photo { height: 171px; } }