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

代码语言:html

所属分类:响应式

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0