Tailwind CSS 制作抖音 PC 端登录框
2023-02-10 本文已影响0人
dowebok
抖音 PC 端登录框
这是使用 Tailwind CSS 制作的抖音 PC 端登录框 HTML 代码（包括简单的 Javascript），从上图可以看到，登录框内包了扫描登录、验证码登录和密码登录三种方式，验证码登录和密码登录方式国际区号可下拉选择。由于使用 Tailwind CSS 制作，所以不兼容 IE 低版本浏览器，需要使用 Chrome、Firefox 或者 Microsoft Edge 等现代浏览器才能正常显示。
查看效果：https://www.dowebok.com/demo/10401/
制作方法
1、引入文件
<link rel="stylesheet" href="css/tailwind.min.css">
<script src="js/jquery.min.js"></script>
2、HTML 代码
<div class="dowebok relative text-sm">
<h4 class="text-2xl text-center">登录后即可查看关注的人的视频</h4>
<ul class="flex justify-around mt-1 mb-3">
<li class="dwo-icon dwo-icon-1 flex items-center">高清视频免费看</li>
<li class="dwo-icon dwo-icon-2 flex items-center">点赞评论随心发</li>
<li class="dwo-icon dwo-icon-3 flex items-center">直播间畅聊打赏</li>
</ul>
<!-- 登录主体 -->
<div class="login h-92.5 rounded-lg bg-white">
<div>
<ul class="dwo-nav flex justify-around h-14 px-7 border-b border-solid border-gray-200 text-lg">
<li class="px-2 text-gray-600 cursor-pointer border-b-3 border-solid border-red-500 hover:text-gray-900">扫码登录</li>
<li class="px-2 text-gray-600 cursor-pointer hover:text-gray-900">验证码登录</li>
<li class="px-2 text-gray-600 cursor-pointer hover:text-gray-900">密码登录</li>
</ul>
</div>
<!-- 二维码登录 -->
<div class="dwo-panel">
<div class="w-44 h-44 mt-10 mx-auto border border-solid border-gray-200 rounded-md overflow-hidden">
<img src="data:image/jpeg;base64,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" alt="">
</div>
<p class="mt-6 text-gray-600 text-center">打开<span class="text-red-500">「抖音APP」</span>扫描二维码登录</p>
</div>
<!-- 验证码登录 -->
<div class="dwo-panel hidden">
<div class="relative mt-6 px-14">
<div class="flex items-center justify-between h-13 px-2.5 py-2 rounded bg-gray-100">
<div class="flex items-center mr-1">
<input class="international-code w-8" id="international-code-1" type="text" value="+86">
<label for="international-code-1" class="dwo-icon-4 block w-4 h-4 transform duration-500"></label>
</div>
<input class="flex-1 h-full" type="text" placeholder="请输入手机号码">
</div>
<p class="h-5 mt-2 px-2.5 text-red-500"></p>
<div class="country hidden absolute left-14 top-12 w-56 h-52 rounded bg-white overflow-auto shadow-2xl">
<ul>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal text-red-500">中国</strong>
<span>+86</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国香港</strong>
<span>+852</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国澳门</strong>
<span>+853</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国台湾</strong>
<span>+886</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔巴尼亚</strong>
<span>+335</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔及利亚</strong>
<span>+213</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国</strong>
<span>+86</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国香港</strong>
<span>+852</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国澳门</strong>
<span>+853</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国台湾</strong>
<span>+886</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔巴尼亚</strong>
<span>+335</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔及利亚</strong>
<span>+213</span>
</li>
</ul>
</div>
</div>
<div class="mt-3 px-14">
<div class="flex items-center justify-between h-13 px-2.5 py-2 rounded bg-gray-100">
<input class="flex-1 h-full" type="text" placeholder="请输入验证码">
<span class="text-gray-400 cursor-pointer hover:text-red-500">获取验证码</span>
</div>
<p class="h-5 mt-2 px-2.5 text-red-500"></p>
</div>
<div class="mt-4 text-center text-gray-400">同意 <a href="javascript:" class="text-gray-600 hover:text-red-500">用户协议</a> 和 <a href="javascript:" class="text-gray-600 hover:text-red-500">隐私政策</a></div>
<div class="mt-2 px-14">
<button class="block w-full h-12 rounded text-base text-white bg-red-300 hover:bg-red-500">登录/注册</button>
</div>
</div>
<!-- 密码登录 -->
<div class="dwo-panel hidden">
<div class="relative mt-6 px-14">
<div class="flex items-center justify-between h-13 px-2.5 py-2 rounded bg-gray-100">
<div class="flex items-center mr-1">
<input class="international-code w-8" id="international-code-2" type="text" value="+86">
<label for="international-code-2" class="dwo-icon-4 block w-4 h-4 transform duration-500"></label>
</div>
<input class="flex-1 h-full" type="text" placeholder="请输入手机号码">
</div>
<p class="h-5 mt-2 px-2.5 text-red-500"></p>
<div class="country hidden absolute left-14 top-12 w-56 h-52 rounded bg-white overflow-auto shadow-2xl">
<ul>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal text-red-500">中国</strong>
<span>+86</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国香港</strong>
<span>+852</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国澳门</strong>
<span>+853</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国台湾</strong>
<span>+886</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔巴尼亚</strong>
<span>+335</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔及利亚</strong>
<span>+213</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国</strong>
<span>+86</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国香港</strong>
<span>+852</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国澳门</strong>
<span>+853</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">中国台湾</strong>
<span>+886</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔巴尼亚</strong>
<span>+335</span>
</li>
<li class="flex justify-between items-center h-10 px-3 text-gray-400 cursor-pointer hover:bg-gray-100">
<strong class="font-normal">阿尔及利亚</strong>
<span>+213</span>
</li>
</ul>
</div>
</div>
<div class="mt-3 px-14">
<div class="flex items-center justify-between h-13 px-2.5 py-2 rounded bg-gray-100">
<input class="flex-1 h-full" type="text" placeholder="请输入密码">
<span class="text-gray-400 cursor-pointer hover:text-red-500">忘记密码</span>
</div>
<p class="h-5 mt-2 px-2.5 text-red-500"></p>
</div>
<div class="mt-4 text-center text-gray-400">同意 <a href="javascript:" class="text-gray-600 hover:text-red-500">用户协议</a> 和 <a href="javascript:" class="text-gray-600 hover:text-red-500">隐私政策</a></div>
<div class="mt-2 px-14">
<button class="block w-full h-12 rounded text-base text-white bg-red-300 hover:bg-red-500">登录</button>
</div>
</div>
</div>
<!-- 关闭按钮 -->
<span class="close absolute right-2.5 top-2.5 w-9 h-9 cursor-pointer transform duration-500 ease-in-out hover:scale-125"></span>
</div>
3、CSS 代码
.h-13 {
height: 3.25rem;
}
.h-92\.5 {
height: 23.125rem;
}
.border-b-3 {
border-bottom-width: 3px;
}
body {
background-color: #000;
}
input {
outline: none;
}
input[type="text"] {
background-color: transparent;
}
.dowebok {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 480px;
height: 490px;
padding: 24px 38px 19px;
border-radius: 8px;
background: #fff url("../images/login-bg.png") 0 0 / 100% no-repeat;
}
.login {
box-shadow: 0 0 60px rgb(226 97 89 / 20%);
}
.dwo-nav {
line-height: 3;
}
.dwo-icon:before {
content: "";
width: 20px;
height: 20px;
}
.dwo-icon-1:before {
background: url(data:image/png;base64,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) 50%/contain no-repeat;
}
.dwo-icon-2:before {
background: url(data:image/png;base64,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) 50%/contain no-repeat;
}
.dwo-icon-3:before {
margin-right: 3px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAdJSURBVHgB7ZsLcBRFHsa/nn3vJrsJISSBhKQ8PGBJEIGEu+K4uvM0Xo7DYGADd5gIFHdaKmL5qvgMllilliBYUoWFpRYliCIIBkXwFVEiSIAEiUREwQQWJCbZRx6bfUzbs5CQAcrdZNdkyu1f0rM93T29M9/089+9AIfD4XA4HA6Hw+FwOBwOh8PhcDgczu8fgr7S2GhASnwpKApBxfGoeD8N774noGof8GMD4PdjoBHYY2RpjcgzJGFOQrq9wJRapYPwFrztO8nxHS4oBr+rEF5nHbwOEXsrKQryKfQ6ymIU47REoIXmEbR2VD4Vx9kOUevN12HQqa7WwOcsh7e1nYlH8c5GiqQhihLuUjdUraXbMqdSMdvWRsfaSjCoeBz5wVInifddLYU5XtHidbtMrZE2jy08L6LV9hf8BoRuA93uYdAFPme+PwbPb1kIvLVFlmSExoD8uBR7q8+7+dOOpiNO0efFQGE0ajDjX3kwGoqxZZsZTnmTV5qQhdfSc5mPVpK2nwvIyUoPBpTO1luDJU9y9TWXveU8wxBqH3NTPXvDozCYdLmz0VB/DLmTZfcnEELrrv4nK4WzRZpTdD2ijBBGiuIe/+Z3ZFFmQYO1IyaLyYL2TvLNpuMYTHTxR5CaVoKVT1OQixVLpBS72s4yHyEiVd+EKBNaQCLk9virD8mirjVYkKO31Gm+eftjKAGtZR8mTzqECdfIgqs7W4KfBHTyZdc0N5uxZFEK80lOQ7PnjKXXzCmiY2w5NIwmLrSAoMk93pYWWUymxiTVkxooCYI6WEfLguy+7maPpsoivI5JOFG/BxUff8vOjumIqsIpdlXTgLiZqlEdyCkuRAjCEPBXLpaqChUDUBIUIgThkiB6wderQPndc7Hzow9RNDcbP5ywsBBzFw3cuNVpN15IoRVEcQFCEJGAA0LHqXSsfWEa800rih8+lebMGkMnTdKgv1AqwNN6N1asegUlixLR0CiL/tHffvGEEHOo7JQrIF0qoLP5MSxdcQAPP7mbhVTuaj+3e7G99mBHx8i1NOtvevSRTr1OBeeZp1C+bAUeKjfA4bj8aylFX1CugN4lM/DVgSewfNUwNDVJIUKb6BdWNx83bHA1lIrGoXf1JbsWswnzHv3vSJQ9XoZnlqsQiE7Lo+AqTEqxfQe59EGl8rG6+XvCmBduTi0WE4oenoOty5cBa15GNFFDqQjsz3VlQ4rUebH/sIvQYR073LuY9bNXGKqq1RFZkJRbAkW8gdk30+AD9kLqR6fHp7GiSHaEndeJk5eJZyQq4JEHgfE5iATlCqi1bMHUPz2Lu25zMMtPMMgkqEWbJcNVljx6F4jnRfSTBEGL59MmIPN//wfiTIgE5VZhQqR6VQaP6xWo1KlYtRr3JF6NZUnjz5K6N4+hnySw6ef6jCkoiE+tfcBszGBBQxAByhWwG71ZEiso2FNNR4Ouv2TrzMwyk4eJhsT3iantPy6j4TAiFFD5A+kooRdUWJl2rSTeD+0azCf7omPqjxkBPWzGufD0fuxwn73K5KXbO6y2kYgCMSOgRIOvA/NO7cVGV2Mem5N8lnGuNQMRovw2MMo4Aj7c0vgVWA+V5Y/CbCTmBJQQ2XymtJEtw5aXM2NFOyIhJgQUcrIhSmPJyt3yiHUbmAm1/4adYN6IAXKaXLju3jLghissEft8iISYEDDR3YmKJ9ZjQckdbDBZjmgSM72wocuLl57b1IAH77kPa1Z5oY2s6nYTU8MYtcgGg+qElVgwfyHWvOCBxYJIib1emK1usuN6ZtZ3IyV1BR55/A+o+bonerQuvndqd6jsYnIYE0Sf+C48zqNIGfoSblsyHgcOBth075Niy0hpC0g6G+l4mMnx+VDZhCOg9MbOV3Uir/EB9i3CpYGDDWG3JIa5rqG3fMeOPV2zNN0TPEgO6OkUVcB/hNRvPRkqi9ACEpxhOo0I+oenyaIavB3MrknGQVlMQM1hWcAQlbbb+1Ooi8nxTdICzHaESRilh1y8m4kTZDE1HifqPK6JXuusKVACPsc/8OW+cThaLwvONZy3WLH14YOIMmHsjRG2ARdWpm/4O3ovWjsDXiw6vZ/8LPrWUeuswS2JnnOjYD+7GovvZ1VYlEXNNqcHPwUx/JIVLqG3t9FGA3xx1SypNXi+8Hbg9Y2yJAmsisw1Z7iaA13rPmg/U+sOBAZun68lTou/TstGcnIJdn6UgNN2WfStCVl4VdreRvEFaem8kZzZ3oEBp6t1Zs/u1GOHKZKHKnZTZW+XoTHQk6OnSxssXXTQm5mu1qU9u1S3bKBISlK0eEkqXc8WX7/VNh+DDqUa1kjnw+v8NijiwT0UM6YrTjg9Eei/49Lo/quuF0Wrreq32trbTd9/5kDdw+DzF7DhXzGc7lzsqUrGhjeBvfuln0Ag7DFYFNGwx8jUmvBnY5I4M364faYlo4rdxWaVo7GCnPqyExwOh8PhcDgcDofD4XA4HA6Hw+FwOJyI+AV+lYG+WI6zTgAAAABJRU5ErkJggg==) 50%/contain no-repeat;
}
.dwo-icon-4 {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACwSURBVHgB7dIxDoMwEETRjU+ahoJTBE5B4btayRREFrIibO9W+U9CUJn5AjMAAAAAAP7TwwblnF+llC2ltC3LstsAjzOSDdKLz7uGWKdzfH3WiJmAvXruiqjHX8/qNfwLyXEc+vzf4Xd+hdb4dV03GzQVID0R3uNlOkDuRESMF5cA+RURNV7cAqQVoXvUeHENkGtEzXu8uAdIKyJivIQESB0RNT7cJ+KpywAAAAAgwBtu2J1qNlDSQAAAAABJRU5ErkJggg==) 50% / 16px 16px no-repeat;
}
.close {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPTSURBVHgB7d29ThRRGIDh7wyLWGlFQoJ7A4rBBgs7CxPs8QqwsRMra3u8Am/AYGOnnR2yGxNZxM4KsgnQURrY43y7IQgL7PzPnHPeJzFCmGLIvMz/OSsCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoCxGPLGwsNSemjJrVuxzY+SOtWZPrN0UidZ7va19aQBdxygyqyaSZRHbtlaOxcqXJq1jWl4E9PDR4xfG2ncazuWfaUgnYld/b3d3pUaLi0sPrMinq9ZRDcS83vnZ2RDHOB/QcM/Tku83LaN/6SciK3VFNCkeNdobRc9c2xNF4rgokjeTltEN14o34P14Q0rFksSj9OfG2Im/S9M4H1C8D11OtFgNESWN54yev4ljnA8o6cY5W7aqiNLGo9Is2xTu74FEUp0zVBFRlnhG4itHx7gf0PAyOJ0yI8oez/AQtimOcT6g01vyYXgFk1IZEeWJZ7j3mYnWxTHOB/Sr292L70Ws1B1RrnhMvO7TdrW35d7NRG/uROc6dOS8T5Q7npasbHfrvdGZlTcBqToiCjke5VVAqsqIQo9HeReQqiIi4hnxMiBVZkTEc87bgFQZERHPRV4HpIqMiHjGeR+QKiKiaf2aeMYEEZDKG5H+TzzjgglI5XvUkIHn8aigAlKVRRRAPCq4gFTpEQUSjwoyIFVaRAHFo4INSBUeUWDxqKADUoVFFGA8KviAVO6IAo1HtQS52YHIyV8JEoewgg5hdQ9erAsn0QWeRIcYEZfxBV/GhxYRNxJLEFJEPMooSSgR8TC1RCFE5MPQ5kTyvgzWlMGLTRNEQEW8SdiEwYtNxCutN7l0h7nOwYtNxUv117nm8QQRXcSwnqtMeLZFROcYWHhZwgejRDTC0Ob/pXyqTkRMrnAu4ysZoUfE9C4q5/s8IUfkRUBNGDEaakReTDQeTQ033D1Jq+A3CXMPXmSi8erpRONNiEdtx3uQPHesJbIvxTE+TDT+RNIq8R3mXBHZZJOmN4kPE42n2/tU8AJ85oiMbYtjnA8o1UaqcPREloiy7LXq5sMhLNlE4zUMvUkdkUk/aXrdnA9oMC3vJ26gGsdtpYrIwYnGp8Rxh/3+8ezc/FF03af2NGDQ38FB/2hubv5bvC5P42/HL/HjdTy18nbnR8e5jzpwPiB1eNDfnW3Pb5iBfuaW6InoTPxv34r5GP9Vr/U6nT9SM40oXsevw3UUuSsakr7pOJDPcjt65WI8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQJX+ATc9oF5n57RZAAAAAElFTkSuQmCC) 50% / cover;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-thumb {
min-height: 28px;
padding-top: 100;
background-color: rgba(0, 0, 0, .1);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 4px;
}
4、JS 代码
$(function() {
const $nav_items = $('.dwo-nav').find('li')
const $panels = $('.dwo-panel')
$nav_items.each(function(index, item) {
$(item).on('click', function() {
$(this).addClass('border-b-3 border-solid border-red-500').siblings().removeClass('border-b-3 border-solid border-red-500')
$panels.eq(index).removeClass('hidden').siblings('.dwo-panel').addClass('hidden')
})
})
const $international_code = $('.international-code')
const $country = $('.country')
$international_code.each(function(index, item) {
$(item).on({
focus: function() {
$(this).next().addClass('rotate-180')
$country.eq(index).removeClass('hidden')
},
blur: function() {
$(this).next().removeClass('rotate-180')
$country.eq(index).addClass('hidden')
}
})
})
})
到这里就制作完了，查看效果：https://www.dowebok.com/demo/10401/
