以下是在 JavaScript 和 Google 地圖 API 中添加點(diǎn)擊事件，根據(jù)國(guó)家進(jìn)行不同操作的示例代碼：
//創(chuàng)建地圖對(duì)象
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.0902, lng: -95.7129}
});
//創(chuàng)建信息窗口（infowindow）
var infowindow = new google.maps.InfoWindow();
//創(chuàng)建一個(gè)數(shù)組來存儲(chǔ)標(biāo)記
var markers = [];
//為每個(gè)國(guó)家添加點(diǎn)擊事件
google.maps.event.addListener(map, 'click', function(event) {
//獲取點(diǎn)擊位置的經(jīng)緯度坐標(biāo)
var latLng = event.latLng;
//使用地理編碼器（geocoder）將經(jīng)緯度坐標(biāo)轉(zhuǎn)換為地址信息
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'location': latLng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
//獲取點(diǎn)擊位置所在的國(guó)家名稱
var countryName = '';
for (var i = 0; i < results[0].address_components.length; i++) {
var component = results[0].address_components[i];
if (component.types.indexOf('country') !== -1) {
countryName = component.long_name;
break;
}
}
//根據(jù)國(guó)家名稱執(zhí)行相應(yīng)操作
switch (countryName) {
case 'China':
alert('您點(diǎn)擊了中國(guó)');
break;
case 'United States':
alert('您點(diǎn)擊了美國(guó)');
break;
default:
alert('您點(diǎn)擊了' + countryName);
}
//創(chuàng)建標(biāo)記并將其添加到地圖上
var marker = new google.maps.Marker({
position: latLng,
map: map
});
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
要用 Cesium.js 制作一個(gè)球形地圖，可以按照以下步驟：
在 HTML 文件中添加 Cesium.js 庫(kù)文件的引用?？梢酝ㄟ^以下方式獲取最新版的 Cesium.js 庫(kù)文件鏈接：https://cesium.com/downloads/。
創(chuàng)建一個(gè) div 元素來容納地球場(chǎng)景，并設(shè)置其樣式以占滿整個(gè)屏幕。
在 JavaScript 文件中創(chuàng)建 Cesium.Viewer 對(duì)象并將其附加到之前創(chuàng)建的 div 元素上。這將在屏幕上顯示一個(gè)球體，并啟動(dòng) Cesium.js 場(chǎng)景。
可以通過更改 Viewer 對(duì)象的屬性來自定義地球的外觀和行為。例如，可以更改攝像機(jī)的位置和方向、加載不同類型的地圖數(shù)據(jù)、添加標(biāo)記等等。
以下是一個(gè)簡(jiǎn)單的示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Cesium App</title>
<style>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
這將創(chuàng)建一個(gè)簡(jiǎn)單的地球場(chǎng)景，可以在其中添加更
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
目錄
動(dòng)畫（animation）是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動(dòng)畫，常 用來實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。
相比較過渡，動(dòng)畫可以實(shí)現(xiàn)更多變化，更多控制，連續(xù)自動(dòng)播放等效果。
制作動(dòng)畫分為兩步： 1.先定義動(dòng)畫 2.再使用（調(diào)用）動(dòng)畫
1. 用keyframes 定義動(dòng)畫（類似定義類選擇器）
@keyframes 動(dòng)畫名稱 {
0%{
width:100px;
}
100%{
width:200px;
}
}
動(dòng)畫序列
0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。這樣的規(guī)則就是動(dòng)畫序列。
在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。
動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變?nèi)我舛嗟臉邮饺我獾拇螖?shù)。
請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
2. 元素使用動(dòng)畫
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto; /* 調(diào)用動(dòng)畫 */
animation-name: 動(dòng)畫名稱;
/* 持續(xù)時(shí)間 */ animation-duration: 持續(xù)時(shí)間; }
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
/* 我們想頁(yè)面一打開，一個(gè)盒子就從左邊走到右邊 */
-
/* 1. 定義動(dòng)畫 */
-
-
@keyframes move {
-
/* 開始狀態(tài) */
-
0% {
-
transform: translateX(0px);
-
}
-
/* 結(jié)束狀態(tài) */
-
100% {
-
transform: translateX(1000px);
-
}
-
}
-
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
/* 2. 調(diào)用動(dòng)畫 */
-
/* 動(dòng)畫名稱 */
-
animation-name: move;
-
/* 持續(xù)時(shí)間 */
-
animation-duration: 2s;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
</body>
-
-
</html>
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
/* from to 等價(jià)于 0% 和 100% */
-
/* @keyframes move {
-
from {
-
transform: translate(0, 0);
-
}
-
to {
-
transform: translate(1000px, 0);
-
}
-
} */
-
/* 動(dòng)畫序列 */
-
/* 1. 可以做多個(gè)狀態(tài)的變化 keyframe 關(guān)鍵幀 */
-
/* 2. 里面的百分比要是整數(shù) */
-
/* 3. 里面的百分比就是 總的時(shí)間（我們這個(gè)案例10s）的劃分 25% * 10 = 2.5s */
-
-
@keyframes move {
-
0% {
-
transform: translate(0, 0);
-
}
-
25% {
-
transform: translate(1000px, 0)
-
}
-
50% {
-
transform: translate(1000px, 500px);
-
}
-
75% {
-
transform: translate(0, 500px);
-
}
-
100% {
-
transform: translate(0, 0);
-
}
-
}
-
-
div {
-
width: 100px;
-
height: 100px;
-
background-color: pink;
-
animation-name: move;
-
animation-duration: 10s;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
-
</div>
-
</body>
-
-
</html>
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
@keyframes move {
-
0% {
-
transform: translate(0, 0);
-
}
-
100% {
-
transform: translate(1000px, 0);
-
}
-
}
-
-
div {
-
width: 100px;
-
height: 100px;
-
background-color: pink;
-
/* 動(dòng)畫名稱 */
-
animation-name: move;
-
/* 持續(xù)時(shí)間 */
-
/* animation-duration: 2s; */
-
/* 運(yùn)動(dòng)曲線 */
-
/* animation-timing-function: ease; */
-
/* 何時(shí)開始 */
-
animation-delay: 1s;
-
/* 重復(fù)次數(shù) iteration 重復(fù)的 conut 次數(shù) infinite 無限 */
-
/* animation-iteration-count: infinite; */
-
/* 是否反方向播放 默認(rèn)的是 normal 如果想要反方向 就寫 alternate */
-
/* animation-direction: alternate; */
-
/* 動(dòng)畫結(jié)束后的狀態(tài) 默認(rèn)的是 backwards 回到起始狀態(tài) 我們可以讓他停留在結(jié)束狀態(tài) forwards */
-
/* animation-fill-mode: forwards; */
-
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
-
/* animation: move 2s linear 0s 1 alternate forwards; */
-
/* 前面2個(gè)屬性 name duration 一定要寫 */
-
/* animation: move 2s linear alternate forwards; */
-
}
-
-
div:hover {
-
/* 鼠標(biāo)經(jīng)過div 讓這個(gè)div 停止動(dòng)畫，鼠標(biāo)離開就繼續(xù)動(dòng)畫 */
-
animation-play-state: paused;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
-
</div>
-
</body>
-
-
</html>
linear 勻速
animation：動(dòng)畫名稱 持續(xù)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始 播放次數(shù) 是否反方向 動(dòng)畫起始或者結(jié)束的狀態(tài)
animation: myfirst 5s linear 2s infinite alternate;
簡(jiǎn)寫屬性里面不包含 animation-play-state
暫停動(dòng)畫：animation-play-state: puased; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
想要?jiǎng)赢嬜呋貋?，而不是直接跳回來：animation-direction ： alternate
盒子動(dòng)畫結(jié)束后，停在結(jié)束位置： animation-fill-mode ： forwards
還沒聽。。
animation-timing-function：規(guī)定動(dòng)畫的速度曲線，默認(rèn)是“ease“
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
<style>
-
div {
-
overflow: hidden;
-
font-size: 20px;
-
width: 0;
-
height: 30px;
-
background-color: pink;
-
/* 讓我們的文字強(qiáng)制一行內(nèi)顯示 */
-
white-space: nowrap;
-
/* steps 就是分幾步來完成我們的動(dòng)畫 有了steps 就不要在寫 ease 或者linear 了 */
-
animation: w 4s steps(10) forwards;
-
}
-
-
@keyframes w {
-
0% {
-
width: 0;
-
}
-
100% {
-
width: 200px;
-
}
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>世紀(jì)佳緣我在這里等你</div>
-
</body>
-
-
</html>
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
一、CSS3 2D變形（利用Transfrom方法）
1、rotate（angle）
元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
transform: rotate(30deg) ;
margin: 200px auto;
}
</style>
<body>
<div>
</div>
</body>
</html>
效果如圖
如果當(dāng)rotate里面的值為負(fù)數(shù)時(shí)，比如ratate（-10deg），效果如圖：
2、 translate(x,y)方法
通過 translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)。也就是相對(duì)于頁(yè)面左部和頂部的距離
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: translate(20px, 20px); } </style> <body> <div></div> </body> </html>
效果如下
初次之外還有其他的參數(shù)
transform: translate(200px);
如果只帶一個(gè)參數(shù)，這個(gè)參數(shù)代表的是x方向位移值，y方向位移為0
transform: translateX(200px);
對(duì)X方向移動(dòng)
transform: translateY(200px);
對(duì)Y方向移動(dòng)
3、scale() 方法
通過 scale() 方法，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: scale(2,0.5); margin: 20px auto; } </style> <body> <div></div> </body> </html>
效果如圖
可以看到，長(zhǎng)邊變?yōu)榱嗽瓉淼膬杀?，寬邊變?yōu)榱嗽瓉淼?.5倍
transform: scale(1.5)；x軸和y軸都放大1.5倍
transform: scaleX(1.5)；x軸放大1.5倍
transform: scaleY(1.5)；y軸放大1.5倍
transform-origin: left top;改變中心點(diǎn)位置為左上角，當(dāng)然還可以自由搭配，右下（right bottom），右上（right top）
4、 skew() 方法
通過 skew() 方法，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: skew(30deg,30deg); margin: 200px auto; } </style> <body> <div></div> </body> </html>
效果如圖
意思就是：圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 30 度?？赡芸雌饋肀容^抽象
transform: skew(230deg);如果只帶一個(gè)參數(shù)，只有x軸方向的扭曲
transform: skewX(230deg); 對(duì)X軸進(jìn)行翻轉(zhuǎn)
transform: skewY(230deg); 對(duì)Y軸進(jìn)行翻轉(zhuǎn)
其實(shí)還是很好理解的，比如兩個(gè)圖疊加在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .demo{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #000; } .box{ width: 200px; height: 200px; border: 1px solid red; transform: skew(5deg,0deg); } </style> <body> <div class="demo"> <div class="box"></div> </div> </body> </html>
可以看到，所謂的X軸翻轉(zhuǎn)，其實(shí)就是x方向的移動(dòng)，上面的線向左移動(dòng)5px，下面的線向右移動(dòng)5px，加入Y也一樣
比如：transform: skew(0deg,5deg);
左邊的線向上移動(dòng)5px，右邊的線向下移動(dòng)5px，同時(shí)改變時(shí) transform: skew(5deg,5deg);
最好記的方式就是對(duì)角線的同時(shí)移動(dòng)，左上右下是排斥，左下右上是吸引
5、matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。
如題：將div右移100px,下移200px，旋轉(zhuǎn)30度，x軸縮放1.5倍，y軸縮放2倍。
（1）transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);
（2）transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)
計(jì)算方法
效果如圖
6、transform-origin 屬性
允許你改變被轉(zhuǎn)換元素的位置
語法： transform-origin: x-axis y-axis z-axis;
屬性值：
x-axis ：定義視圖被置于 X 軸的何處。可能的值：left，center，right，length，%。
y-axis ：定義視圖被置于 Y 軸的何處?？赡艿闹担簍op，center，bottom，length，%。
z-axis ：定義視圖被置于 Z 軸的何處?？赡艿闹担簂ength。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin</title> <style> *{ margin: 0; padding: 0; } .demo{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #000; } .box{ width: 200px; height: 200px; background-color: #f00; transform: rotate(60deg); transform-origin: right bottom; } </style> </head> <body> <div class="demo"> <div class="box"></div> </div> </body> </html>
效果如圖
形象的來說，就是規(guī)定你從哪個(gè)角開始旋轉(zhuǎn)，比如規(guī)定右下角旋轉(zhuǎn)，則圖形以右下角為旋轉(zhuǎn)角，順時(shí)針旋轉(zhuǎn)60°
二、CSS3 3D變形
1、perspective屬性
perspective 屬性定義 3D 元素距視圖的距離，以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。
注釋：perspective 屬性只影響 3D 轉(zhuǎn)換元素。
語法： perspective: number|none;
屬性值：
number ：元素距離視圖的距離，以像素計(jì)。
none ：默認(rèn)值。與 0 相同。不設(shè)置透視
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>perspective</title> <style> .father{ position: relative; width: 200px; height: 200px; padding: 10px; margin: 200px auto; border: 1px solid #999; perspective: 150px; } .son{ width: 100px; height: 50px; padding: 50px; position: absolute; border: 1px solid #f00; background-color: #0ff; transform: rotateX(45deg); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
效果如圖
2、trasform-style屬性
transform-style 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素。
注釋：該屬性必須與 transform 屬性一同使用。
語法： transform-style: flat|preserve-3d;
屬性值：
flat ：子元素將不保留其 3D 位置。
preserve-3d ：子元素將保留其 3D 位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-style</title> <style> .wrapper{ width: 200px; height: 100px; margin: 200px auto; } .div1,.div2{ width: 200px; height: 100px; padding: 20px; } .div1{ background-color: #f00; transform: rotateY(30deg); transform-style: preserve-3d; } .div2{ background-color: #655fff; transform: rotateY(45deg); } </style> </head> <body> <div class="wrapper"> <div class="div1">div1 <div class="div2">div2</div> </div> </div> </body> </html>
效果如圖
3、CSS3過渡
transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過渡屬性：
transition-property：規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function：規(guī)定速度效果的速度曲線。
transition-delay：定義過渡效果何時(shí)開始。
注釋：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過渡效果。
語法： transition: property duration timing-function delay;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition過渡動(dòng)畫</title> <style> .box{ width: 100%; height: 300px; position: relative; border: 1px solid #eee; } .demo{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 100px; top: 100px; transform: rotate(0deg); transition-property: all; transition-duration: .8s; } .box:hover .demo{ left: 500px; width: 300px; transform: rotate(45deg); } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition過渡動(dòng)畫</title> <style> .box{ width: 100%; height: 300px; position: relative; border: 1px solid #eee; } .demo{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 100px; top: 100px; transform: rotate(0deg); transition: left 2s ease 500ms, width 5s ease-in-out; } .box:hover .demo{ left: 500px; width: 300px; transform: rotate(45deg); } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
可以自行實(shí)驗(yàn)一下
4、CSS3動(dòng)畫
使用@keyframes
通過 @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫。
創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動(dòng)畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞 “from” 和 “to”，等價(jià)于 0% 和 100%。
0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關(guān)鍵幀動(dòng)畫</title> <style> .box{ width: 100%; height: 800px; position: relative; } .demo{ width: 100px; height: 100px; background-color: #ff0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; /*animation: move 5s ease-in-out infinite alternate ;*/ -webkit-animation: move 5s ease-in-out 500ms 2 alternate ; -moz-animation: move 5s ease-in-out 500ms 2 alternate ; -ms-animation: move 5s ease-in-out 500ms 2 alternate ; -o-animation: move 5s ease-in-out 500ms 2 alternate ; animation: move 5s ease-in-out 500ms 2 alternate ; } @keyframes move { 0%{ left: 100px; } 45%{ left: 200px; top: 100px; background-color: #00f; } 75%{ left: 400px; top: 300px; background-color: #64ff77; } 100%{ left: 500px; top: 500px; background-color: #ff4975; } } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關(guān)鍵幀動(dòng)畫</title> <style> .box{ width: 100%; height: 800px; position: relative; } .demo{ width: 100px; height: 100px; background-color: #ff0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; /*animation: move 5s ease-in-out infinite alternate ;*/ -webkit-animation: move 5s ease-in-out 500ms 2 alternate ; -moz-animation: move 5s ease-in-out 500ms 2 alternate ; -ms-animation: move 5s ease-in-out 500ms 2 alternate ; -o-animation: move 5s ease-in-out 500ms 2 alternate ; animation: move 5s ease-in-out 500ms 2 alternate ; } @keyframes move { from{ left: 100px; } to{ left: 500px; background-color: #00f; } } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
animation:move 5s ease-in-out 500ms 2 alternate
move：表示animation-name ，動(dòng)畫名稱
5s：表示animation-duration，時(shí)長(zhǎng)
ease-in-out：表示animation-timing-function 規(guī)定動(dòng)畫的速度曲線
（
除此以外還有：
linear：動(dòng)畫從頭到尾的速度是相同的。
ease：默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。
ease-in：動(dòng)畫以低速開始。
ease-out：動(dòng)畫以低速結(jié)束。
ease-in-out：動(dòng)畫以低速開始和結(jié)束。
）
500ms：表示animation-delay，規(guī)定在動(dòng)畫開始之前的延遲。
2 ：表示animation-iteration-count，規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
alternate：表示animation-direction，規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫，如果 animation-direction 值是 “alternate”，則動(dòng)畫會(huì)在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）向后播放。。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
本篇文章通過代碼示例介紹一下使用純CSS畫圓環(huán)的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
畫圓環(huán)思想很簡(jiǎn)單：首先畫兩個(gè)圓，設(shè)置不同的背景色；然后讓兩個(gè)圓的圓心重合即可。
難度系數(shù)
☆☆
HTML
解析：此處有父容器
CSS.container {
position: relative;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.ring-style {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
width: 260px;
height: 260px;
border-radius: 260px;
}
.ring-style::before {
content: ' ';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 200px;
height: 200px;
border-radius: 200px;
}
解析：設(shè)置元素的寬高、圓角效果，即可畫出一個(gè)圓
通過 ::before 偽元素和本體元素，創(chuàng)建兩個(gè)圓
通過基于父容器的絕對(duì)定位，設(shè)置 top、left、translate 屬性，讓元素基于父容器水平、豎直居中，即可讓兩個(gè)圓的圓心重合
【推薦教程：CSS視頻教程 】
效果圖
知識(shí)點(diǎn)border-radius
::before && ::after
元素水平、豎直居中
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
Echarts的legend屬性是對(duì)圖例組件的相關(guān)配置
而legend就是Echarts圖表中對(duì)圖形的解釋部分：
其中l(wèi)egend自身常用的配置屬性如下：
設(shè)置圖例的朝向
屬性值：
vertical // 垂直顯示
或者
horizontal // 水平顯示
legend: { orient: 'vertical' }
legend: { orient: 'horizontal' }
設(shè)置圖例在X軸方向上的位置以及在Y軸方向上的位置
| 位置 | 取值 |
|---|---|
| ｘ/left | left/center/right |
| y /top | top/center/bottom |
例子：
legend: { orient: 'vertical', x:'right', y:'center' }
| 屬性 | 說明 |
|---|---|
| backgroundColor | 背景顏色 |
| borderColor | 邊框顏色 |
| borderWidth | 邊框?qū)挾? |
| padding | 內(nèi)邊距 |
注意：邊框?qū)挾群蛢?nèi)邊距屬性值為數(shù)值，不加單位。
legend: { orient: 'vertical', x:'center', y:'top', backgroundColor: '#fac858', borderColor: '#5470c6', borderWidth: '200', }
控制每一項(xiàng)的間距，也就是圖例之間的距離
屬性值為數(shù)值，不帶單位
legend: { orient: 'horizontal', x:'center', y:'top', itemGap: 40 }
控制圖例圖形的高度
屬性值為數(shù)字，不加單位
legend: { orient: 'horizontal', x:'center', y:'top', itemHeight: 5 }
設(shè)置圖例文字樣式
屬性值為一個(gè)對(duì)象
legend: { orient: 'horizontal', x:'center', y:'top', textStyle: { color: 'red', fontSize: '20px', fontWeight: 700 } }
設(shè)置圖例的某個(gè)選項(xiàng)的數(shù)據(jù)默認(rèn)是顯示還是隱藏。
false: 隱藏
屬性值：對(duì)象，屬性值內(nèi)容：圖例上的數(shù)據(jù)與boolean構(gòu)成鍵值對(duì)
如果某選項(xiàng)設(shè)置為false，那么圖標(biāo)上的數(shù)據(jù)也會(huì)默認(rèn)不顯示，而圖例會(huì)以灰色樣式顯示
legend: { orient: 'horizontal', x:'center', y:'top', selected:{ '搜索引擎': false, '聯(lián)盟廣告': false } }
圖例上顯示的文字信息，如果不設(shè)置該項(xiàng)，默認(rèn)會(huì)以series設(shè)置的信息作為圖例信息。如果設(shè)置該項(xiàng)，必須與series設(shè)置的信息一致，才會(huì)生效。
而該屬性的作用：可以單獨(dú)對(duì)圖例中某個(gè)選項(xiàng)進(jìn)行單獨(dú)設(shè)置樣式
比如：
legend: { orient: 'horizontal', x:'center', y:'top', data:[{ name: '搜索引擎', icon: 'circle', textStyle: {fontWeight: 'bold', color: 'orange'} },'直接訪問','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告'] }
以上單獨(dú)設(shè)置中
name:指定該項(xiàng)的名稱，必填
icon:指定圖例項(xiàng)的icon，可以為內(nèi)置的圖形7個(gè)圖形，或者自定義圖標(biāo)的形式：'image://url'
textStyle:：設(shè)置文本樣式
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
今天用WebStorm運(yùn)行前端代碼時(shí)，發(fā)現(xiàn)不太好打斷點(diǎn)。
于是，打算改用VSCode來運(yùn)行前端代碼，但前提是要安裝VSCode，如下便是超詳細(xì)的VSCode安裝教程以及解決VSCode下載速度特別慢的問題。
VSCode官網(wǎng)
download下載
你會(huì)發(fā)現(xiàn)VSCode官網(wǎng)地址下載很慢，或者下著下著就暫停了，如下圖所示：
如果下載完成，那得等到猴年馬月。
我是用chrome瀏覽器，點(diǎn)擊右下角的全部顯示按鈕，可以跳轉(zhuǎn)到下載內(nèi)容頁(yè)面。
如果你是用其他瀏覽器，可能使用其他方式跳轉(zhuǎn)到下載內(nèi)容頁(yè)面。
vscode.cdn.azure.cn
即https://az764295.vo.msecnd.net/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe修改為https://vscode.cdn.azure.cn/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe
將替換后的地址輸入到瀏覽器的地址欄中，如下圖所示，按enter鍵即可快速下載。
速度是不是立刻提升了。
因?yàn)槲业?code style="box-sizing:border-box;outline:0px;user-select:text !important;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;padding:2px 4px;overflow-wrap:break-word;">系統(tǒng)盤(C盤)的內(nèi)存不夠用了，需要更換到其他盤符，我更換到D盤中。
如果你不想更換到其他盤符，可以直接下一步即可。
VSCode
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
本章用到......uni-app頁(yè)面跳轉(zhuǎn)uni.navigateTo方法、uni.navigateBack方法。uni-app簡(jiǎn)單實(shí)現(xiàn)郵箱驗(yàn)證碼發(fā)送點(diǎn)擊后讀秒樣式。登錄賬號(hào)、密碼正則表達(dá)式驗(yàn)證等
適合剛?cè)腴T的小伙伴，大佬就沒必要看了
靜態(tài)頁(yè)面！靜態(tài)頁(yè)面！沒有綁定后端數(shù)據(jù)接口
目錄
https://dcloud.io/hbuilderx.html
官網(wǎng)直接下載解壓即可
文件-新建-項(xiàng)目
我這里直接選擇默認(rèn)模板，Vue版本、uniCloud自行選擇即可
創(chuàng)建完成后自動(dòng)生成文件夾
文件名這里自動(dòng)生成原本是index，文件名自行定義即可
頁(yè)面文件自己新建Vue文件即可
注意！！這個(gè)文件后續(xù)如果需要新添加新頁(yè)面時(shí)這個(gè)文件里一定要配置參數(shù)不然頁(yè)面出不來，代碼格式看下面代碼↓↓↓↓↓↓↓↓↓
類似navigationBarTitleText（導(dǎo)航欄text）、navigationBarBackgroundColor（導(dǎo)航欄背景色）等等屬性可以查看相關(guān)資料自行配置即可
pages里設(shè)置單頁(yè)面參數(shù)，每個(gè)頁(yè)面配置對(duì)應(yīng)path路徑參數(shù)
globalStyle里設(shè)置全局頁(yè)面參數(shù)
js、josn、scss文件等等其他配置文件這里就不多說了自行研究吧?。?！因?yàn)槲乙策€沒搞清楚到底怎么用哈哈哈
進(jìn)入正題↓↓↓↓↓↓↓↓↓↓↓↓↓代碼看著有些亂........湊合看慢慢理解吧
代碼里的src圖片鏈接自行修改?。。。。ㄟ€有css里的URL）
先看一下效果圖
-
<!-- 登錄頁(yè)面 -->
-
<template>
-
<view class="flex-col flex-auto group">
-
<text class="self-center text_2" v-if="type==1000">手機(jī)號(hào)登錄</text>
-
<text class="self-center text_2" v-if="type==2000">賬號(hào)登錄</text>
-
<!-- 手機(jī)號(hào)登錄 -->
-
<view class="" v-if="type==1000">
-
<view class="flex-col justify-start items-start text-wrapper">
-
<input type="text" class="font_1" @input="onInput" placeholder="請(qǐng)輸入手機(jī)號(hào)" v-model="phoneNumber">
-
</view>
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
-
<view class="flex-col justify-start items-start text-wrapper_2">
-
<input type="text" password="true" class="font_1" @input="onInput" placeholder="請(qǐng)輸入密碼" v-model="phonePassword">
-
</view>
-
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
</view>
-
<!-- 賬號(hào)登錄 -->
-
<view class="" v-if="type==2000">
-
<view class="flex-col justify-start items-start text-wrapper">
-
<input type="text" class="font_1" @input="onInput" placeholder="請(qǐng)輸入用戶名" v-model="idNumber">
-
</view>
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
<view class="flex-col justify-start items-start text-wrapper_2">
-
<input type="text" password="true" class="font_1" @input="onInput" placeholder="請(qǐng)輸入用戶密碼" v-model="idPassword">
-
</view>
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
</view>
-
-
<view class="self-start font_1 text_3" @click="type=2000" v-if="type==1000">用賬號(hào)登錄</view>
-
<view class="self-start font_1 text_3" @click="type=1000" v-if="type==2000">用手機(jī)號(hào)登錄</view>
-
<!-- 登錄按鈕1 -->
-
<view class="flex-col justify-start items-center button" v-if="btnShow">
-
<button class="font_1 text_4" @click="onSubmit">登 錄</button>
-
</view>
-
<!-- 登錄按鈕2 -->
-
<view class="flex-col justify-start items-center button2" v-else>
-
<button class="font_1 text_66">登 錄</button>
-
</view>
-
-
-
<view class="flex-row justify-between group_2" v-if="type==1000">
-
<text class="font_2" @click="onPageJump('/pages/login/phoneVerify')">短信驗(yàn)證碼登錄</text>
-
<text class="font_2" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
-
</view>
-
<view class="flex-row justify-between group_3" v-else>
-
<text class="font_2" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
-
</view>
-
</view>
-
-
</template>
-
-
<script>
-
export default {
-
components:{
-
-
},
-
data() {
-
return {
-
type: 1000, //判斷登錄類型手機(jī)登錄或賬號(hào)登錄
-
phoneNumber:'', //手機(jī)賬號(hào)
-
phonePassword:'', //手機(jī)密碼
-
idNumber:'', //賬號(hào)
-
idPassword:'', //賬號(hào)密碼
-
btnShow:false, //判斷登錄按鈕顯示隱藏
-
timeOut:null, //添加定時(shí)器
-
}
-
},
-
onLoad() {
-
-
},
-
created() {
-
-
},
-
// 方法
-
methods: {
-
// 找回密碼跳轉(zhuǎn)頁(yè)面
-
onPageJump(url) {
-
uni.navigateTo({
-
url: url
-
});
-
},
-
// 判斷顯示登錄按鈕
-
onInput() {
-
this.timeOut && clearTimeout(this.timeOut)
-
this.timeOut = setTimeout(() => {
-
if (this.type == 1000) {
-
if (this.phoneNumber && this.phonePassword) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
} else {
-
if (this.idNumber && this.idPassword) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
}
-
}, 100);
-
},
-
// 點(diǎn)擊登錄
-
onSubmit(){
-
// 判斷登錄方式為手機(jī)號(hào)登錄
-
if(this.type==1000){
-
// 判斷驗(yàn)證手機(jī)號(hào)
-
if(!this.phoneNumber){
-
uni.showToast({
-
title: '請(qǐng)輸入手機(jī)號(hào)',
-
icon: 'none',
-
});
-
return;
-
}
-
const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
-
if(!phoneNumber.test(this.phoneNumber)){
-
uni.showToast({
-
title: '手機(jī)號(hào)輸入不正確',
-
icon: 'none',
-
});
-
return;
-
}
-
// 判斷驗(yàn)證手機(jī)密碼
-
if(!this.phonePassword){
-
uni.showToast({
-
title: '請(qǐng)輸入密碼',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '正在登錄',
-
icon: 'loading',
-
});
-
}else{
-
// 判斷驗(yàn)證賬號(hào)
-
if(!this.idNumber){
-
uni.showToast({
-
title: '請(qǐng)輸入賬號(hào)',
-
icon: 'none',
-
});
-
return;
-
}
-
// 判斷驗(yàn)證賬號(hào)密碼
-
if(!this.idPassword){
-
uni.showToast({
-
title: '請(qǐng)輸入賬號(hào)密碼',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '正在登錄',
-
icon: 'loading',
-
});
-
}
-
},
-
-
-
-
-
}
-
}
-
</script>
-
-
<style>
-
@import"../../style/css/login.css";
-
</style>
一個(gè)小tips：
先說一下這個(gè)頁(yè)面↑↑↑↑↑↑↑↑↑↑↑↑↑↑
svg因?yàn)槲疫@里賬號(hào)、密碼input輸入框的border邊框要設(shè)置成小數(shù)1px以下0.1px、0.2px、0.3px等等，所以這里用了svg的畫圖，如果有小伙伴碰到同樣問題可以參考一下，不需要的直接style里直接設(shè)置border參數(shù)即可
uni.showToast是uni-app彈出框的方法直接用就行，參數(shù)么。。自己研究研究就行 （例:icon圖標(biāo)參數(shù)有四種類型none、loading、success、error）
style外部引用css樣式直接用@import相對(duì)路徑即可
style樣式最好還是用自己寫的就別直接復(fù)制了，我這里用的是平臺(tái)自動(dòng)生成的所以比較亂隨便看看就行了看多了頭疼（僅供參考全局樣式可以直接略過）
-
/************************************************************
-
** 全局樣式 ** **
-
************************************************************/
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
-
/* ---------------------------------------------------------------------- */
-
-
.group {
-
padding: 20px 40px 10px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
text-align: center;
-
}
-
.text-wrapper {
-
margin-top: 42px;
-
padding-bottom: 12px;
-
/* border-bottom: solid 1px #888888; */
-
}
-
.font_1 {
-
width: 100%;
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
color: #00000;
-
}
-
.text-wrapper_2 {
-
padding: 20px 0 12px;
-
/* border-bottom: solid 1px #888888; */
-
}
-
.text_3 {
-
margin-top: 22px;
-
color: #166bf8;
-
}
-
/* 登錄按鈕1 */
-
.button button {
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
width: 100%;
-
}
-
.text_4 {
-
color: #ffffff;
-
}
-
.group_2 {
-
padding: 50px 62px;
-
}
-
.group_3 {
-
padding: 50px 42%;
-
}
-
.font_2 {
-
font-size: 12px;
-
font-family: 'PingFang SC';
-
line-height: 17px;
-
color: #555555;
-
}
-
/* 登錄按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
點(diǎn)擊登錄頁(yè)面上的短信驗(yàn)證碼登錄后跳轉(zhuǎn)到此頁(yè)，跳轉(zhuǎn)方法會(huì)用到uni.navigateTo方法在登錄頁(yè)面看代碼自行理解吧↑↑↑↑↑↑↑↑↑↑↑
跳轉(zhuǎn)、返回的方法參考文檔：
注意?。√砑有马?yè)面的時(shí)候上面的↑↑↑↑↑↑↑↑↑↑↑pages.json配置文件也需要添加對(duì)應(yīng)的頁(yè)面配置才行不然頁(yè)面出不來
效果圖：
https://www.bookstack.cn/read/uniapp-api/spilt.5.ead34267bd06d88a.md
-
<!-- 手機(jī)驗(yàn)證找回密碼 -->
-
<template>
-
<view class="flex-col flex-auto group">
-
<text class="self-center text_2">手機(jī)號(hào)+短信驗(yàn)證碼登錄</text>
-
<view class="flex-col group_2 space-y-10">
-
<input type="number" class="self-start font_1" @input="onInput" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" v-model="phoneNumber">
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
-
<view class="flex-row justify-between group_3">
-
<input type="number" class="self-start font_1 text_4" maxlength="6" @input="onInput" placeholder="請(qǐng)輸入驗(yàn)證碼" v-model="code">
-
<view class="flex-col justify-start items-center self-center text-wrapper">
-
<!-- <text class="font_1 text_3" @click="onSetCode()">獲取驗(yàn)證碼</text> -->
-
<text v-bind:class="{acquire:isGrey,again:!isGrey}"
-
v-bind:disabled="dis" type="primary"
-
@click="onSetCode">
-
<span v-if="show">獲取驗(yàn)證碼</span>
-
<span v-else>重新發(fā)送({{count}}s)</span>
-
</text>
-
</view>
-
</view>
-
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
</view>
-
<view class="self-start font_1 text_5" @click="onPageJump('/pages/login/login')">用密碼登錄</view>
-
<view class="flex-col justify-start items-center button" v-if="btnShow">
-
<button class="font_1 text_6" @click="onSubmit()">登 錄</button>
-
</view>
-
<!-- 登錄按鈕2 -->
-
<view class="flex-col justify-start items-center button2" v-else>
-
<button class="font_1 text_66">登 錄</button>
-
</view>
-
<text class="self-center text_7" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
-
</view>
-
-
</template>
-
-
<script>
-
export default {
-
components: {
-
-
},
-
data() {
-
return {
-
phoneNumber:'', //手機(jī)號(hào)驗(yàn)證
-
code:'', //驗(yàn)證碼
-
dis: false, //判斷是否禁用狀態(tài)
-
show: true, //判斷顯示為發(fā)送還是重新發(fā)送
-
isGrey: false, //class判斷按鈕樣式
-
timer: null, //設(shè)置計(jì)時(shí)器,
-
count: "", //定義常量
-
num:'', //判斷是否為第一次點(diǎn)擊
-
btnShow:false, //判斷登錄按鈕顯示隱藏
-
timeOut:null, //添加定時(shí)器
-
};
-
},
-
// 方法
-
methods: {
-
// 找回密碼跳轉(zhuǎn)頁(yè)面
-
onPageJump(url) {
-
uni.navigateTo({
-
url: url
-
});
-
},
-
-
// 發(fā)送驗(yàn)證碼
-
onSetCode() {
-
let TIME_COUNT = 60;
-
if (!this.timer) {
-
uni.showToast({
-
title: '已發(fā)送驗(yàn)證碼',
-
icon: 'success',
-
});
-
this.count = TIME_COUNT;
-
this.isGrey = true;
-
this.show = false;
-
this.dis = true;
-
this.timer = setInterval(() => {
-
if (this.count > 0 && this.count <= TIME_COUNT) {
-
this.count--;
-
} else {
-
this.dis = false;
-
this.isGrey = false;
-
this.show = true;
-
clearInterval(this.timer);
-
this.timer = null;
-
}
-
}, 1000);
-
}
-
},
-
// 判斷顯示登錄按鈕
-
onInput() {
-
this.timeOut && clearTimeout(this.timeOut)
-
this.timeOut = setTimeout(() => {
-
if (this.phoneNumber && this.code) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
}, 100);
-
},
-
//點(diǎn)擊登錄
-
onSubmit(){
-
// 判斷驗(yàn)證手機(jī)號(hào)
-
if(!this.phoneNumber){
-
uni.showToast({
-
title: '請(qǐng)輸入手機(jī)號(hào)',
-
icon: 'none',
-
});
-
return;
-
}
-
const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
-
if(!phoneNumber.test(this.phoneNumber)){
-
uni.showToast({
-
title: '手機(jī)號(hào)輸入不正確',
-
icon: 'none',
-
});
-
return;
-
}
-
// 判斷驗(yàn)證碼
-
if(!this.code){
-
uni.showToast({
-
title: '請(qǐng)輸入驗(yàn)證碼',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '請(qǐng)稍后...',
-
icon: 'loading',
-
});
-
},
-
-
},
-
};
-
</script>
-
-
<style>
-
@import"../../style/css/phoneVerify.css";
-
/* 驗(yàn)證碼按鈕樣式 */
-
.acquire{
-
padding: 3px 0px;
-
background-color: #eeeeee;
-
border-radius: 5px;
-
width: 92px;
-
height: 29px;
-
color: #666;
-
font-size: 14px;
-
line-height: 20px;
-
text-align: center;
-
}
-
.again{
-
padding: 3px 0px;
-
background-color: #eeeeee;
-
border-radius: 5px;
-
width: 92px;
-
height: 29px;
-
color: #000000;
-
font-size: 14px;
-
line-height: 20px;
-
text-align: center;
-
}
-
-
</style>
這個(gè)頁(yè)面因?yàn)槭庆o態(tài)的沒有后端接口只是做的樣式，所以驗(yàn)證碼讀秒這塊內(nèi)容刷新頁(yè)面時(shí)會(huì)重置重新開始讀秒這里注意一下就行，如果接后端接口實(shí)現(xiàn)的話原理也差不多自己慢慢理解就行
大概就長(zhǎng)這樣：
至于左上角這個(gè)返回鍵的小鈕鈕是uni-app創(chuàng)建項(xiàng)目時(shí)自帶的 pages.json配置文件可以配置關(guān)閉 用（"navigationStyle":"custom"）這個(gè)參數(shù)就能關(guān)閉，單頁(yè)面關(guān)閉在pages里配置，全部關(guān)閉在globalStyle里配置。
大概長(zhǎng)這樣：
也可以在Vue頁(yè)面的方法里用uni.navigateBack方法自己寫一個(gè)返回的方法。uni.navigateBack返回頁(yè)面的方法具體怎么用↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓后面的頁(yè)面會(huì)有用到
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
-
/* ------------------------------------------------ */
-
.group {
-
padding: 30px 40px 60px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
}
-
.group_2 {
-
margin-top: 42px;
-
/* border-bottom: solid 1px #888888; */
-
}
-
.space-y-10 > view:not(:first-child),
-
.space-y-10 > text:not(:first-child),
-
.space-y-10 > image:not(:first-child) {
-
margin-top: 10px;
-
}
-
.font_1 {
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
color: #000000;
-
}
-
.group_3 {
-
padding: 5px 0;
-
/* border-top: solid 1px #888888; */
-
}
-
.text_4 {
-
margin-top: 8px;
-
}
-
.text-wrapper {
-
padding: 4px 0;
-
background-color: #eeeeee;
-
border-radius: 5px;
-
width: 92px;
-
height: 29px;
-
}
-
.text_3 {
-
color: #000000;
-
font-size: 14px;
-
line-height: 20px;
-
}
-
.text_5 {
-
margin-top: 22px;
-
color: #166bf8;
-
}
-
.button button{
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
width: 100%;
-
}
-
.text_6 {
-
color: #ffffff;
-
}
-
.text_7 {
-
margin-top: 50px;
-
color: #555555;
-
font-size: 12px;
-
font-family: 'PingFang SC';
-
line-height: 17px;
-
}
-
/* 登錄按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
在登錄頁(yè)面點(diǎn)擊找回密碼后跳轉(zhuǎn)到此頁(yè)面
同樣在pages.json文件里配置對(duì)應(yīng)頁(yè)面參數(shù)↑↑↑↑↑↑↑↑↑
效果圖：
點(diǎn)擊通過手機(jī)號(hào)跳轉(zhuǎn)到手機(jī)短信驗(yàn)證頁(yè)面 也就是第四步的頁(yè)面點(diǎn)擊通過郵箱驗(yàn)證跳轉(zhuǎn)到郵箱驗(yàn)證頁(yè)面 也就是第六步的頁(yè)面
-
<!-- 找回密碼 -->
-
<template>
-
<view class="flex-col justify-start flex-auto group_3">
-
<view class="flex-col section">
-
<view class="flex-row justify-between items-center group_4" @click="onPageJump('/pages/login/phoneVerify')">
-
<text class="font_1">通過已綁定手機(jī)號(hào)，用短信驗(yàn)證登錄</text>
-
<image
-
class="image_5"
-
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/637d8bf95a7e3f031010c80e/63e351ec66570000128a304a/16758423632990405565.png"
-
/>
-
</view>
-
<view class="flex-row justify-between items-center group_4" @click="onPageJump('/pages/login/mailFindBack')">
-
<text class="font_1">通過已綁定郵箱重設(shè)密碼</text>
-
<image
-
class="image_5"
-
src="。。。。。。。。。。。。。。。"
-
/>
-
</view>
-
</view>
-
</view>
-
</template>
-
-
<script>
-
export default {
-
components: {},
-
data() {
-
return {
-
-
};
-
-
},
-
-
methods: {
-
onPageJump(url) {
-
uni.navigateTo({
-
url:url
-
})
-
},
-
},
-
};
-
</script>
-
-
<style>
-
@import"../../style/css/findBack.css";
-
</style>
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
-
.font_1 {
-
font-size: 16px;
-
font-family: 'PingFang SC';
-
line-height: 22px;
-
color: #020202;
-
}
-
.group_3 {
-
padding: 10px 0 586px;
-
overflow-y: auto;
-
}
-
.section {
-
padding: 0px 16px;
-
background-color: #ffffff;
-
}
-
.group_4 {
-
padding: 18px 0;
-
border-bottom: solid 1px #979797;
-
}
-
.image_5 {
-
margin-right: 14px;
-
width: 12px;
-
height: 12px;
-
}
效果圖：
-
<!-- 郵件找回密碼 -->
-
<template>
-
<view class="flex-col flex-auto group">
-
<text class="self-center text_2">通過郵箱找回密碼</text>
-
<input type="text" class="self-start font_1 text_3" @input="onInput" placeholder="請(qǐng)輸入您綁定的郵箱地址" v-model="email">
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
-
<view class="flex-col justify-start items-center button" v-if="btnShow">
-
<text class="font_1 text_4" @click="onSubmit()">下一步</text>
-
</view>
-
<!-- 下一步按鈕2 -->
-
<view class="flex-col justify-start items-center button2" v-else>
-
<button class="font_1 text_66">下一步</button>
-
</view>
-
</view>
-
</template>
-
-
<script>
-
export default {
-
components: {
-
-
},
-
data() {
-
return {
-
email:'', //郵箱
-
btnShow:false, //判斷登錄按鈕顯示隱藏
-
timeOut:null, //添加定時(shí)器
-
};
-
},
-
-
methods: {
-
// 判斷顯示下一步按鈕
-
onInput() {
-
this.timeOut && clearTimeout(this.timeOut)
-
this.timeOut = setTimeout(() => {
-
if (this.email) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
}, 100);
-
},
-
// 點(diǎn)擊下一步
-
onSubmit(){
-
if(!this.email){
-
uni.showToast({
-
title: '請(qǐng)輸入郵箱',
-
icon: 'none',
-
});
-
return;
-
}
-
const email= /^\w{3,}@\w{2,}\.(com|cn|net|com\.cn)$/;
-
if(!email.test(this.email)){
-
uni.showToast({
-
title: '郵箱輸入不正確',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '請(qǐng)稍后...',
-
icon: 'loading',
-
-
});
-
// 添加定時(shí)器延時(shí)跳轉(zhuǎn)頁(yè)面
-
setTimeout(function(){
-
uni.navigateTo({
-
url: '/pages/login/emailFinish'
-
});
-
},2000)
-
-
}
-
},
-
};
-
</script>
-
-
<style>
-
@import"../../style/css/mailFindBack.css";
-
</style>
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
/* ------------------------------------------------------------------------------ */
-
-
.group {
-
padding: 25px 40px 127px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
}
-
.font_1 {
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
}
-
.text_3 {
-
margin-top: 42px;
-
margin-bottom: 12px;
-
color: #999999;
-
}
-
/* .section {
-
margin-top: 12px;
-
background-color: #888888;
-
height: 1px;
-
} */
-
.button {
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
}
-
.text_4 {
-
color: #ffffff;
-
}
-
/* 下一步按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
效果圖：
-
<template>
-
<view class="flex-col flex-auto group">
-
<view class="flex-col group_2">
-
<image
-
class="self-center image_5"
-
src="。。。。。。。。。。。。。。"
-
/>
-
<text class="self-center text_2">請(qǐng)?jiān)L問郵件中給出的網(wǎng)頁(yè)鏈接地址，根據(jù)頁(yè)面提示完成密碼重設(shè)。</text>
-
<view class="flex-col justify-start items-center button">
-
<button class="text_3" @click="Back">確定</button>
-
</view>
-
</view>
-
</view>
-
</template>
-
-
<script>
-
export default {
-
components: {
-
-
},
-
data() {
-
return {
-
-
};
-
},
-
-
methods: {
-
// 點(diǎn)擊確定返回上一頁(yè)
-
Back(){
-
// 返回到上一個(gè)頁(yè)面
-
uni.navigateBack({
-
delta:1,//返回層數(shù)，2則上上頁(yè)，默認(rèn)delta:1
-
})
-
},
-
},
-
};
-
-
</script>
-
-
<style>
-
@import"../../style/css/emailFinish.css";
-
</style>
點(diǎn)擊返回上一頁(yè)面可以用uni.navigateBack方法
點(diǎn)擊跳轉(zhuǎn)到指定頁(yè)面可以用uni.navigateTo方法（因?yàn)槎紝儆谔D(zhuǎn)頁(yè)面也可以用這個(gè)方法返回上一頁(yè)自行理解吧）
大概長(zhǎng)這樣：
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
/* ------------------------------------------------------------------------------ */
-
-
.group {
-
padding: 25px 40px 127px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
}
-
.font_1 {
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
}
-
.text_3 {
-
margin-top: 42px;
-
margin-bottom: 12px;
-
color: #999999;
-
}
-
/* .section {
-
margin-top: 12px;
-
background-color: #888888;
-
height: 1px;
-
} */
-
.button {
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
}
-
.text_4 {
-
color: #ffffff;
-
}
-
/* 下一步按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
本章也是自己參考相關(guān)資料和各位大佬的文章自行整理僅供參考，希望可以幫助到和我一樣菜雞的小伙伴
參考資料：
https://blog.csdn.net/weixin_40614372/article/details/101537653
uni-app官網(wǎng)：
https://uniapp.dcloud.net.cn/component/
登錄頁(yè)面完成后我用的是Strophe.js對(duì)接Openfire的接口，然后把Strophe.js的用法加到↑本文的登錄頁(yè)里使用
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
作者：藍(lán)藍(lán)設(shè)計(jì) 圖片來源：花瓣網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
作者：藍(lán)藍(lán)設(shè)計(jì) 圖片來源：花瓣網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com