黑馬程序員Vue全套視頻教程，從vue2.0到vue3.0一套全覆蓋，前端學(xué)習(xí)核
p207 user結(jié)構(gòu)代碼
<template>
? ? ?<div class="user-container">
? ? ? ?<!-- 用戶基本信息面板 -->
? ? ? ?<div class="user-card">
? ? ? ? ?<!-- 用戶頭像、姓名 -->
? ? ? ? ?<van-cell>
? ? ? ? ? ?<!-- 使用 title 插槽來自定義標(biāo)題 -->
? ? ? ? ? ?<template #icon>
? ? ? ? ? ? ?<img src="../../assets/logo.png" alt="" class="avatar" />
? ? ? ? ? ?</template>
? ? ? ? ? ?<template #title>
? ? ? ? ? ? ?<span class="username">用戶名</span>
? ? ? ? ? ?</template>
? ? ? ? ? ?<template #label>
? ? ? ? ? ? ?<van-tag color="#fff" text-color="#007bff">申請(qǐng)認(rèn)證</van-tag>
? ? ? ? ? ?</template>
? ? ? ? ?</van-cell>
? ? ? ? ?<!-- 動(dòng)態(tài)、關(guān)注、粉絲 -->
? ? ? ? ?<div class="user-data">
? ? ? ? ? ?<div class="user-data-item">
? ? ? ? ? ? ?<span>0</span>
? ? ? ? ? ? ?<span>動(dòng)態(tài)</span>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="user-data-item">
? ? ? ? ? ? ?<span>0</span>
? ? ? ? ? ? ?<span>關(guān)注</span>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="user-data-item">
? ? ? ? ? ? ?<span>0</span>
? ? ? ? ? ? ?<span>粉絲</span>
? ? ? ? ? ?</div>
? ? ? ? ?</div>
? ? ? ?</div>
? ?
? ? ? ?<!-- 操作面板 -->
? ? ? ?<van-cell-group class="action-card">
? ? ? ? ?<van-cell icon="edit" title="編輯資料" is-link />
? ? ? ? ?<van-cell icon="chat-o" title="小思同學(xué)" is-link />
? ? ? ? ?<van-cell icon="warning-o" title="退出登錄" is-link />
? ? ? ?</van-cell-group>
? ? ?</div>
? ?</template>
? ?
? ?<script>
? ?export default {
? ? ?name: 'User'
? ?}
? ?</script>
? ?
? ?<style lang="less" scoped>
? ?.user-container {
? ? ?.user-card {
? ? ? ?background-color: #007bff;
? ? ? ?color: white;
? ? ? ?padding-top: 20px;
? ? ? ?.van-cell {
? ? ? ? ?background: #007bff;
? ? ? ? ?color: white;
? ? ? ? ?&::after {
? ? ? ? ? ?display: none;
? ? ? ? ?}
? ? ? ? ?.avatar {
? ? ? ? ? ?width: 60px;
? ? ? ? ? ?height: 60px;
? ? ? ? ? ?background-color: #fff;
? ? ? ? ? ?border-radius: 50%;
? ? ? ? ? ?margin-right: 10px;
? ? ? ? ?}
? ? ? ? ?.username {
? ? ? ? ? ?font-size: 14px;
? ? ? ? ? ?font-weight: bold;
? ? ? ? ?}
? ? ? ?}
? ? ?}
? ? ?.user-data {
? ? ? ?display: flex;
? ? ? ?justify-content: space-evenly;
? ? ? ?align-items: center;
? ? ? ?font-size: 14px;
? ? ? ?padding: 30px 0;
? ? ? ?.user-data-item {
? ? ? ? ?display: flex;
? ? ? ? ?flex-direction: column;
? ? ? ? ?justify-content: center;
? ? ? ? ?align-items: center;
? ? ? ? ?width: 33.33%;
? ? ? ?}
? ? ?}
? ?}
? ?</style>
? ?
