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 class="ion-md-expand text-xl px-2 text-gray-700 hover:bg-gray-200 rounded mx-2" @click="doShowFullScreenActors = true" v-if="!doShowFullScreenActors">
</button>
<div class="flex items-center" v-if="doShowFullScreenActors">
<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>
</div>
<button class="px-2 ion-md-arrow-back text-xl rounded text-gray-400" :class="{'text-gray-700': doShowFullScreenActors, 'hover:bg-gray-200': doShowFullScreenActors}" @click="backPressedActors()"></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 overflow-scroll">
<div class="h-56 bg-cover bg-center" :style="{backgroundImage: 'url('+ projects[selectedProject].cover + ')'}"></div>
<div class="px-8" :class="{'px-16': doShowFullScreenActors && !doShowActorDetails}">
<div class="text-3xl font-bold mb-3 mt-5">{{projects[selectedProject].name}}</div>
<div class="border-b pb-4 mb-4">
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].year}}
</div>
</div>
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].director}}
</div>
</div>
</div>
<div class="pb-8">
<div class="flex items-center border-b py-2 mt-3">
<div class="text-lg font-semibold mr-2">Cast</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="doShowMoreMenuActors = true"></button>
<div class="relative">
<div class="fixed top-0 left-0 h-screen w-screen bg-white" style="opacity: 0.01" v-if="doShowMoreMenuActors" @click="doShowMoreMenuActors = false"></div>
<div v-if="doShowMoreMenuActors" 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="isInSidebarModeActors = !isInSidebarModeActors">
<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': isInSidebarModeActors}">
<div class="h-5 w-5 rounded-full bg-white border-2 border-gray-400" :class="{'border-blue-500': isInSidebarModeActors}"></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="actor, i in projects[selectedProject].actors" class="flex border-b text-sm group items-center" :class="{'hover:bg-gray-200 cursor-pointer': isInSidebarModeActors, 'bg-gray-200': selectedActor === i}" @click="rowPressedActors(i)">
<div class="flex-1 px-2 border-r py-2 flex item-center group ">
<div class="flex-1">{{actor.name}}</div>
<button class="uppercase text-xs border rounded px-1 hidden group-hover-block" @click="openPressedActors(i)" v-if="!isInSidebarModeActors">Open</button>
</div>
<div class="flex-1 px-2 border-r py-2" :class="{'hover:bg-gray-200 cursor-pointer': !isInSidebarModeActors}">{{actor.role}}</div>
<div class="flex-1 px-2 py-2" :class="{'hover:bg-gray-200 cursor-pointer': !isInSidebarModeActors}">{{actor.born}}</div>
<div class="w-4">
<div class="ion-ios-arrow-forward text-gray-700 hidden group-hover-block pl-1" v-if="isInSidebarModeActors"></div>
</div>
</div>
</div>
<div class="text-2xl font-bold pb-2">Plot</div>
<textarea class="w-full" style="height: 700px;" v-model="projects[selectedProject].content"></textarea>
</div>
</div>
</div>
<div class="h-screen flex flex-col flex-1 overflow-scroll border-l" v-if="doShowActorDetails && isInSidebarModeActors">
<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="doShowActorDetails = false; selectedActor = null;"></button>
<div class="px-2 w-5 h-5 bg-gray-300 rounded" style="margin-left: .83rem; margin-right: .83rem;"></div>
<button class="px-2 ion-md-arrow-back text-xl rounded text-gray-400" :class="{'text-gray-700': !doShowFullScreenActors, 'hover:bg-gray-200': !doShowFullScreenActors}" @click="backPressedActorDetails()"></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 px-8 overflow-scroll">
<div class="h-16"></div>
<div class="text-3xl font-bold mb-3">{{projects[selectedProject].actors[selectedActor].name}}</div>
<div class="border-b pb-4 mb-4">
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].actors[selectedActor].role}}
</div>
</div>
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].actors[selectedActor].born}}
</div>
</div>
</div>
<div class="text-2xl font-bold pb-2">Bio</div>
<textarea class="w-full" style="height: 700px;" v-model="projects[selectedProject].actors[selectedActor].bio"></textarea>
</div>
</div>
</div>
<div v-if="doShowProjectDetails && !isInSidebarMode">
<div class="fixed top-0 left-0 h-screen w-screen bg-black opacity-50"></div>
<div class="fixed top-0 left-0 h-screen w-screen flex items-center justify-center pt-12 pb-16 px-4" @click="doShowProjectDetails = false; selectedProject = null">
<div class="bg-white rounded w-full max-w-3xl shadow-lg h-full flex flex-col" @click.stop="">
<div class="h-10 flex px-3 items-center border-b border-gray-200">
<div class="mx-1 px-1 w-5 h-5 bg-gray-300 rounded"></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 overflow-scroll">
<div class="h-56 bg-cover bg-center" :style="{backgroundImage: 'url('+ projects[selectedProject].cover + ')'}"></div>
<div class="px-12">
<div class="text-3xl font-bold mt-5 mb-3">{{projects[selectedProject].name}}</div>
<div class="border-b pb-4 mb-4">
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].year}}
</div>
</div>
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].director}}
</div>
</div>
</div>
<textarea class="w-full" style="height: 700px;" v-model="projects[selectedProject].content"></textarea>
</div>
</div>
</div>
</div>
</div>
<div v-if="doShowActorDetails && !isInSidebarModeActors">
<div class="fixed top-0 left-0 h-screen w-screen bg-black opacity-50"></div>
<div class="fixed top-0 left-0 h-screen w-screen flex items-center justify-center pt-12 pb-16 px-4" @click="doShowActorDetails = false; selectedActor = null">
<div class="bg-white rounded w-full max-w-3xl shadow-lg h-full flex flex-col" @click.stop="">
<div class="h-10 flex px-3 items-center border-b border-gray-200">
<div class="mx-1 px-1 w-5 h-5 bg-gray-300 rounded"></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 px-12 overflow-scroll">
<div class="h-16"></div>
<div class="text-3xl font-bold mb-3">{{projects[selectedProject].actors[selectedActor].name}}</div>
<div class="border-b pb-4 mb-4">
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].actors[selectedActor].role}}
</div>
</div>
<div class="flex items-center">
<div class="w-24">
<div class="mx-1 px-1 w-16 h-3 bg-gray-300 rounded"></div>
</div>
<div>
{{projects[selectedProject].actors[selectedActor].born}}
</div>
</div>
</div>
<div class="text-2xl font-bold pb-2">Bio</div>
<textarea class="w-full" style="height: 700px;" v-model="projects[selectedProject].actors[selectedActor].bio"></textarea>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
projects: [
{
name: 'Jules and Jim',
year: '1962',
director: 'François Truffaut',
content: 'The film is set before, during, and after the Great War in several different parts of France, Austria, and Germany. Jules (Oskar W.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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