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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0