gree_leran/components/photosInfo.vue

94 lines
1.6 KiB
Vue

<template>
<view class="container">
<view class="card-box">
<image class="background-image" :src="cardData.imageUrl" mode="aspectFill"></image>
<view class="content-box">
<div class="avatar-box">
<div class="user-info">
<u-avatar class="avatar" :src="cardData.avatarUrl"></u-avatar>
<text class="username">{{cardData.nikName}}</text>
</div>
<u-tag :text="cardData.tagName" bg-color="#6c757d" type="info" mode="plain" shape="circle" size="medium" />
</div>
<div class="description">{{cardData.footName}}</div>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
cardData:{
type:Object,
default:{
imageUrl:'',
avatarUrl:"",
nikName:'',
tagName:'',
footName:''
}
}
},
name: "photosInfo",
data() {
return {};
},
};
</script>
<style>
.container {
padding: 20px;
background-color: #282c34;
}
.card-box {
background-color: rgba(65, 114, 159, 0.8);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.background-image {
width: 100%;
height: 200px;
}
.content-box {
padding: 16px;
}
.avatar-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.user-info {
display: flex;
align-items: center;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 12px;
}
.username {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.description {
color: #fff;
font-weight: 600;
margin-top: 8px;
font-size: 18px;
}
</style>