vue+tailwind自适应响应式个人中心动态博客页面代码-html代码-BFW代码库

vue+tailwind自适应响应式个人中心动态博客页面代码

代码语言：html

所属分类：响应式

代码描述：vue+tailwind自适应响应式个人中心动态博客页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
        body {
          font-family: "Nunito", sans-serif;
        }
        .panel {
          width: 100%;
        }
        .main {
          width: 100%;
        }
        @media (min-width: 1024px) {
          .panel {
            width: 20%;
          }
          .main {
            width: 60%;
          }
        }
    </style>


</head>

<body>
    <div class="lg:flex container mx-auto p-3" id="app">
        <div class="panel p-2">
            <div class="rounded overflow-hidden shadow-lg my-3">
                <img src="//repo.bfw.wiki/bfwrepo/image/6130b86635bc9.png" class="w-full" />
                <div class="flex justify-center -mt-8">
                    <img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="rounded-full border-solid border-white border-2 -mt-3">
                </div>
                <div class="text-center px-3 pb-6 pt-2">
                    <h3 class="font-bold text-md">Aubree Gilmour</h3>
                    <p class="mt-2 font-sans font-light text-grey-dark italic">Live life, Laugh Loud, Love forever</p>
                </div>
                <div class="flex justify-center pb-3 text-grey-dark">
                    <div class="text-center mr-3 border-r pr-3">
                        <h2>1220</h2>
                        <span>Followers</span>
                    </div>
                    <div class="text-center">
                        <h2>820</h2>
                        <span>Friends</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="main p-2">
            <div class="rounded overflow-hidden shadow-lg mt-3" v-for="post in posts" :key="post.key">
                <div class="p-3 flex items-center justify-between">
                    <div class="flex">
                        <div class="rounded-full h-10 w-10 bg-gray-500 flex items-center justify-center overflow-hidden">
                            <img :src="post.user.avatarUrl" alt="profilepic">
                        </div>
                        <span class="pt-1 ml-2 font-bold text-sm">{{post.user.name}}</span>
                    </div>
                    <div class="text-gray-500">{{post.date}}</div>
                </div>
                <img class="w-full pt-2.........完整代码请登录后点击上方下载按钮下载查看