vue+tailwind实现列表详情页分屏显示交互效果
代码语言：html
所属分类：布局界面
代码描述：vue+tailwind实现列表详情页分屏显示交互效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
<link rel='stylesheet' href='https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css'>
<style>
input, textarea, button:focus, select {
outline: none;
resize: none;
}
input::placeholder, textarea::placeholder {
color: #A0AEC0;
opacity: 1;
}
select {
-webkit-appearance: none;
background: center right 12px / 12px url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABkSURBVHgB7Y3BDcAgDAM9AiN4U0btKC2V+kARAhzoAykn5QO2DwiCI0nwM+zmclc5QodfN6NjfwO3Q0LTTbNBQh8fdpSCkpWLMxm3pPe3LGm9LUEzuHW8Jdk+biW/jNcSIghqHqazMs0DNBcfAAAAAElFTkSuQmCC) no-repeat;
}
.group:hover .group-hover-block {
display: block !important;
}
</style>
</head>
<body translate="no">
<div id="app" class="text-black antialiased">
<div class="flex w-screen" style="max-width: 100vw;">
<div class="h-screen flex flex-col flex-1 overflow-scroll" v-if="!doShowFullScreenActors">
<div class="h-10 flex px-3 items-center">
<div class="w-3 h-3 mr-1 bg-gray-300 rounded-full"></div>
<div class="w-3 h-3 mr-1 bg-gray-300 rounded-full"></div>
<div class="w-3 h-3 mr-2 bg-gray-300 rounded-full"></div>
<div class="mx-1 px-1 w-5 h-5 bg-gray-300 rounded"></div>
<button class="px-2 ion-md-arrow-back text-xl rounded text-gray-400"></button>
<button class="px-2 ion-md-arrow-forward text-xl rounded text-gray-400"></button>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="text-gray-400">/</div>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="flex-1"></div>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="mx-1 px-1 w-5 h-5 bg-gray-300 rounded"></div>
</div>
<div class="flex-1 flex">
<div class="flex-1 px-8" :class="{'px-16': !doShowProjectDetails && !doShowActorDetails}">
<div class="h-16"></div>
<div class="text-3xl font-bold">The Camera-Stylo</div>
<div>
<div class="flex items-center border-b py-2 mt-3">
<div class="text-lg font-semibold mr-2">Films</div>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="flex-1"></div>
<div class="mx-1 px-1 w-12 h-3 bg-gray-300 rounded"></div>
<div class="mx-1 px-1 w-5 h-5 bg-gray-300 rounded"></div>
<button class="ion-ios-more text-xl text-gray-600 mx-1 px-2 hover:bg-gray-200 rounded" @click="doShowMoreMenu = true"></button>
<div class="relative">
<div class="fixed top-0 left-0 h-screen w-screen bg-white" style="opacity: 0.01" v-if="doShowMoreMenu" @click="doShowMoreMenu = false"></div>
<div v-if="doShowMoreMenu" class="absolute bg-white w-48 shadow rounded text-sm" style="right: -12px; top: -32px;">
<div class="mx-3 px-1 my-3 w-24 h-3 bg-gray-300 rounded"></div>
<div class="mx-3 px-1 my-3 w-16 h-3 bg-gray-300 rounded"></div>
<div class="mx-3 px-1 my-3 w-16 h-3 bg-gray-300 rounded"></div>
<div class="mx-3 px-1 my-3 w-24 h-3 bg-gray-300 rounded"></div>
<div class="flex items-center px-3 py-1 border-t border-b hover:bg-gray-200 cursor-pointer" @click="isInSidebarMode = !isInSidebarMode">
<div>Split-screen</div>
<div class="flex-1"></div>
<div class="w-8 h-5 bg-gray-400 rounded-full flex" :class="{'justify-end bg-blue-500': isInSidebarMode}">
<div class="h-5 w-5 rounded-full bg-white border-2 border-gray-400" :class="{'border-blue-500': isInSidebarMode}"></div>
</div>
</div>
<div class="mx-3 px-1 my-3 w-16 h-3 bg-gray-300 rounded"></div>
<div class="mx-3 px-1 my-3 w-24 h-3 bg-gray-300 rounded"></div>
</div>
</div>
<div class="mx-1 px-1 w-12 h-6 bg-blue-400 rounded"></div>
</div>
<div class="flex border-b text-sm">
<div class="flex-1 px-2 border-r py-3">
<div class="w-16 h-2 bg-gray-300 rounded"></div>
</div>
<div class="flex-1 px-2 border-r py-3">
<div class="w-16 h-2 bg-gray-300 rounded"></div>
</div>
<div class="flex-1 px-2 py-3">
<div class="w-16 h-2 bg-gray-300 rounded"></div>
</div>
<div class="w-4"></div>
</div>
<div v-for="project, i in projects" class="flex border-b text-sm group items-center" :class="{'hover:bg-gray-200 cursor-pointer': isInSidebarMode, 'bg-gray-200': selectedProject === i}" @click="rowPressed(i)">
<div class="flex-1 px-2 border-r py-2 flex item-center group ">
<div class="flex-1">{{project.name}}</div>
<button class="uppercase text-xs border rounded px-1 hidden group-hover-block" @click="openPressed(i)" v-if="!isInSidebarMode">Open</button>
</div>
<div class="flex-1 px-2 border-r py-2" :class="{'hover:bg-gray-200 cursor-pointer': !isInSidebarMode}">{{project.year}}</div>
<div class="flex-1 px-2 py-2" :class="{'hover:bg-gray-200 cursor-pointer': !isInSidebarMode}">{{project.director}}</div>
<div class="w-4">
<div class="ion-ios-arrow-forward text-gray-700 hidden group-hover-block pl-1" v-if="isInSidebarMode"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-screen flex flex-col flex-1 overflow-scroll" :class="{'border-l': !doShowFullScreenActors}" v-if="doShowProjectDetails && isInSidebarMode">
<div class="h-10 flex px-3 items-center">
<button class="ion-md-close text-xl px-2 text-gray-700 hover:bg-gray-200 rounded" @click="doShowProjectDetails = false; selectedProject = null;" v-if="!doShowFullScreenActors"></button>
<button clas.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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