Skip to content

飞
飞鹤小程序
Commit ee62209c authored by 王炽's avatar 王炽
Browse files
Options

66666

parent b49683c0
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 113 deletions
pages/xingmaLab/xingmaLab.less
View file @ ee62209c
......@@ -124,98 +124,63 @@
}
}
}
}
.waterfall-list.single-column {
display: flex;
flex-direction: column;
gap: 20rpx;
.waterfall-item {
background-color: #ffffff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
.item_cangguan_text{
width: 707rpx;
margin-top: 25rpx;
.item_desc{
font-size: 36rpx;
color: #000;
font-weight: 400;
}
.item-image {
.nicheng_shoucang_zhaungtai{
position: relative;
width: 100%;
height: 400rpx;
background-color: #f0f0f0;
}
.item-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 20rpx;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
.overlay-top {
display: flex;
flex-direction: column;
align-items: flex-start;
.logo-text {
color: #ffffff;
height: 48rpx;
margin-top: 16rpx;
.nicheng_shoucang_item{
position: relative;
width: 100%;
height: 100%;
.avatar_img{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 48rpx;
height: 48rpx;
border-radius: 50%;
}
.nick_name_text{
position: absolute;
left: 50rpx;
top: 50%;
transform: translateY(-50%);
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
color: #6f6d67;
margin-left: 13rpx;
}
.sub-text {
color: #ffffff;
font-size: 20rpx;
opacity: 0.8;
.shoucang_icon{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 32rpx;
height: 32rpx;
}
}
}
.item-info {
padding: 20rpx;
.item-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 1.4;
margin-bottom: 16rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-meta {
display: flex;
justify-content: space-between;
align-items: center;
.item-id {
.shoucang_text{
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
font-size: 24rpx;
color: #999999;
}
.creator-info {
display: flex;
align-items: center;
gap: 8rpx;
.creator-name {
font-size: 24rpx;
color: #666666;
}
.star-icon {
font-size: 20rpx;
color: #ffd700;
}
color: #6f6d67;
}
}
}
......
pages/xingmaLab/xingmaLab.vue
View file @ ee62209c
......@@ -32,36 +32,17 @@
</view>
<view class="item_cangguan_text">
<text class="item_desc">快来用星妈会小程序</text>
<view class="nicheng_shoucang_zhaungtai"></view>
</view>
</view>
<!-- <view class="waterfall-list single-column">
<view
v-for="(item, index) in cangguangList"
:key="index"
class="waterfall-item"
@click="handleItemClick(item)"
>
<image class="item-image" :src="item.image" mode="aspectFill" />
<view class="item-overlay">
<view class="overlay-top">
<text class="logo-text">飞鹤星妈会</text>
<text class="sub-text">一图看懂</text>
</view>
</view>
<view class="item-info">
<text class="item-title">{{ item.title }}</text>
<view class="item-meta">
<text class="item-id">{{ item.id }}</text>
<view class="creator-info">
<text class="creator-name">{{ item.creator }}</text>
<text class="star-icon">⭐</text>
</view>
<view class="nicheng_shoucang_zhaungtai">
<view class="nicheng_shoucang_item">
<image class="avatar_img" src="../../static/xingmaLab/1001/avatar.png" mode="aspectFill" />
<text class="nick_name_text">鹤小飞</text>
<text class="shoucang_text">已收藏</text>
<image class="shoucang_icon" src="../../static/xingmaLab/1001/shoucang_on.png" mode="aspectFit" />
</view>
</view>
</view>
</view> -->
</view>
</view>
<!-- 我的藏馆内容 - 双切页两列瀑布流 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment