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" :src="post.img" alt="post-img" v-if="post.showImage">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2" v-if="post.showTitle">{{post.title}}</div>
<p class="text-gray-700 text-base">{{post.text}}</p>
</div>
<div class="px-6 py-4 flex items-center justify-between">
<div>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2" v-for="tag in post.tags" :key="tag">#{{tag}}</span>
</div>
<span class="text-sm text-gray-400 font-medium">{{post.likes}} likes</span>
</div>
<div class="pt-1 px-6 ">
<div class="mb-2 text-sm" v-for="comment in post.comments">
<div class="flex">
<div class="rounded-full h-5 w-5 bg-gray-500 flex items-center justify-center overflow-hidden">
<img :src="comment.user.avatarUrl" alt="profilepic">
</div>
<span class="font-bold ml-2 text-xs">{{comment.user.name}}</span>
</div>
<div class="pt-1 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0