123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375 |
- /* nova-werun/components/circle-card/index.wxss */
- .trends-one{
- width: 100%;
- margin-bottom: 20rpx;
- border-bottom: grey solid 1px;
- padding-left: 30rpx;
- padding-right: 20rpx;
- padding-bottom: 20rpx;
- .namebax{
- width: 100%;
- height: 100rpx;
- display: flex;
- align-items: center;
- image{
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- }
- .name{
- margin-left: 10rpx;
- font-size: 34rpx;
- font-weight: 600;
- }
- }
- .text{
- width: 92%;
- padding-left: 90rpx;
- font-size: 34rpx;
- }
- .picture{
- width: 92%;
- padding-left: 90rpx;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
- .image{
- width: 175rpx;
- height: 175rpx;
- margin-right: 10rpx;
- margin-bottom: 10rpx;
- }
- .image:nth-child(3n) {
- margin-right: 0; /* 每行的最后一张图片不需要右边距 */
- }
- }
- .picture5 {
- width: 92%;
- padding-left: 90rpx;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
-
- .image {
- width: 175rpx;
- height: 175rpx;
- }
-
- .image-wrapper {
- margin-right: 10rpx;
- position: relative;
- }
-
- .image-wrapper:nth-of-type(3n) {
- margin-right: 0; /* 每行的最后一张图片不需要右边距 */
- }
-
- .more-images {
- position: absolute;
- bottom: 10rpx;
- right: 0rpx;
- background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
- color: white;
- font-size: 26px;
- width: 175rpx;
- height: 175rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .picture2{
- width: 92%;
- padding-left: 90rpx;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
- .image{
- width: 240rpx;
- height: 240rpx;
- margin-right: 10rpx;
- margin-bottom: 10rpx;
- }
- }
- .picture4{
- width: 92%;
- padding-left: 90rpx;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
-
- .image{
- width: 230rpx;
- height: 230rpx;
- margin-right: 10rpx;
- margin-bottom: 10rpx;
- object-fit: cover;
- }
- .image:nth-child(2n) {
- margin-right: 0; /* 每行的最后一张图片不需要右边距 */
- }
- }
- .picture3{
- width: 92%;
- padding-left: 90rpx;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
- .image{
- margin-right: 10rpx;
- margin-bottom: 10rpx;
- }
- .image-portrait {
- width: 332rpx; /* 竖屏图片的宽度 */
- height: 425rpx;
- }
-
- .image-landscape {
- width: 442rpx; /* 横屏图片的宽度 */
- height: 300rpx;
- }
- }
-
- .timebox{
- width: 100%;
- height: 80rpx;
- padding-left: 90rpx;
- margin-bottom: 20rpx;
- display: flex;
- align-items: center;
- position: relative;
- .time-box{
- width: 85%;
- height: 100%;
- display: flex;
- align-items: center;
- .time{
- font-size: 30rpx;
- margin-right: 20rpx;
- }
- }
- .functionbox{
- width: 280rpx;
- height: 80rpx;
- background-color: black;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- right: 99rpx;
- border-radius: 10rpx;
- .function{
- width: 100%;
- display: flex;
- color: white;
- justify-content: center;
- .function1{
- width: 48%;
- display: flex;
- justify-content: center;
- color: white;
- .text2{
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 28rpx;
- margin-left: 12rpx;
- }
- }
- }
- }
- .point{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 70rpx;
- height: 40rpx;
- border-radius: 10rpx;
- background-color: #efefef;
- color: #506692;
- font-size: 50rpx;
- margin-left: auto;
- }
- }
- .chinkinbox{
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- margin-left: 90rpx;
- display: flex;
- background-color: #efefef;
- align-items: center;
- padding-left: 18rpx;
- flex-wrap: wrap;
- .chickname{
- font-size: 30rpx;
- margin-left: 8rpx;
- }
- }
- .sending{
- background-color: #efefef;
- display: flex;
- padding-top: 20rpx;
- padding-left: 20rpx;
- width: 100%;
- height: 80rpx;
- position: relative;
- .textarea{
- background-color: white;
- width: 600rpx;
- border-radius: 15rpx;
- padding-left: 12rpx;
- }
- .button{
- position: absolute; /* 设置为绝对定位 */
- bottom: 18rpx; /* 距离底部10rpx */
- right: 10rpx; /* 距离右侧10rpx */
- width: 100rpx;
- height: 50rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- background-color: #29b129;
- margin-left: 10rpx;
- border-radius: 15rpx;
- color: white;
- }
- .button2{
- position: absolute; /* 设置为绝对定位 */
- bottom: 18rpx; /* 距离底部10rpx */
- right: 10rpx; /* 距离右侧10rpx */
- width: 100rpx;
- height: 50rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- background-color: white;
- margin-left: 10rpx;
- border-radius: 15rpx;
- color: gray;
- border: gray solid 1px;
- }
- }
- .commentbox{
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- margin-left: 90rpx;
- display: flex;
- flex-direction: column;
- background-color: #efefef;
- align-items: center;
- padding-left: 18rpx;
- flex-wrap: wrap;
- border-top: gray solid 0.1px;
- font-size: 30rpx;
- padding-right: 10rpx;
- .comment{
- width: 100%;
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- flex-wrap: wrap;
- flex: 1; /* 允许内容占用剩余空间 */
- white-space: normal; /* 允许内容换行 */
- overflow-wrap: break-word; /* 处理长单词的换行 */
- position: relative;
- .delete{
- width: 100rpx;
- height: 50rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: white;
- position: absolute;
- top: -40rpx;
- left: 50%;
- z-index: 99;
- }
- }
- .comment2{
- background-color: #bfbebe;
- width: 100%;
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- flex-wrap: wrap;
- flex: 1; /* 允许内容占用剩余空间 */
- white-space: normal; /* 允许内容换行 */
- overflow-wrap: break-word; /* 处理长单词的换行 */
- position: relative;
- .delete{
- width: 100rpx;
- height: 50rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: white;
- position: absolute;
- top: -40rpx;
- left: 50%;
- z-index: 99;
- }
- }
- }
- .commentbox2{
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- margin-left: 90rpx;
- display: flex;
- flex-direction: column;
- background-color: #efefef;
- align-items: center;
- padding-left: 18rpx;
- flex-wrap: wrap;
- font-size: 30rpx;
- padding-right: 10rpx;
- .comment{
- width: 100%;
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- flex-wrap: wrap;
- flex: 1; /* 允许内容占用剩余空间 */
- white-space: normal; /* 允许内容换行 */
- overflow-wrap: break-word; /* 处理长单词的换行 */
- position: relative;
- .delete{
- width: 100rpx;
- height: 50rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: white;
- position: absolute;
- top: -40rpx;
- left: 50%;
- z-index: 99;
- }
- }
- .comment2{
- background-color: #bfbebe;
- width: 100%;
- padding-top: 10rpx;
- padding-bottom: 10rpx;
- flex-wrap: wrap;
- flex: 1; /* 允许内容占用剩余空间 */
- white-space: normal; /* 允许内容换行 */
- overflow-wrap: break-word; /* 处理长单词的换行 */
- position: relative;
- .delete{
- width: 100rpx;
- height: 50rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: white;
- position: absolute;
- top: -40rpx;
- left: 50%;
- z-index: 99;
- }
- }
- }
- }
|