first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,19 @@
## 1Git 使用注意事项
- 1代码提交一定要先【拉取】后【推送】
- 2如果代码【拉取】后有冲突请手工解决冲突可以合并代码或者对于同个文件决定使用谁的代码来覆盖
- 3代码提交须注意
## 2VsCode 中 Git 仓库的使用
![ssss](doc/img/step1.png)
- 第 1 步点击左侧边栏上的Git图标<img src="doc/img/step1.png" width="50"/>
- 第 2 步:鼠标悬浮【更改】,然后点击 号 暂存所有更改,如图:<img src="doc/img/setp2.png" width="80"/>
- 第 3 步:输入提交备注,然后 `ctrl + enter`提交备注,如图:<img src="doc/img/setp3.png" width="80"/>
- 第 4 步:点击右上角 【...】 菜单,选择【拉取】,如图:<img src="doc/img/setp4.png" width="80"/>
- 第 5 步:最后同样点击右上角 【...】 菜单,然后点击【推送】即可将代码提交到远程仓库中,如图:<img src="doc/img/setp5.png" width="80"/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

View File

@@ -0,0 +1,20 @@
git: 代码管理工具(版本控制)
回滚
git add 暂存更改 (你选择一下哪些文件你需要上传到服务器)
git commit 设置提交备注
git push 正式推送到服务器
同事的代码55
同事的代码44322
同事的代码4434
dev 开发阶段
prod 正式阶段
test 测试阶段

View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
justify-content: space-around;
height: 45px;
align-items: center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>首页1</li>
<li>咨询2</li>
<li>军事3</li>
<li>首页4</li>
<li>咨询5</li>
<li>军事6</li>
<li>军事7</li>
<li>军事8</li>
<li>军事9</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
flex + rem
flex : 布局的自动适配
13个属性
第一个
display: flex 开启弹性盒子
应用在父元素 6
justify-content 设置水平方向对齐
align-items 设置垂直方法对齐
flex-direction 设置元素的对齐方式(垂直对齐还是水平对齐)
flex-wrap 设置元素是否换行
不常用
flex-flow: <flex-direction> || <flex-wrap>;
align-content 设置多根轴线的对齐方式
应用在子元素 6
order 设置元素的排列位置,数值越小越靠前
flex-grow 根据设置的比例自动占剩余空间
flex-shrink 元素开启弹性盒子后默认数值为1将压缩元素我们希望不压缩的时候可以通过这个属性来设置0
场景:横向滑动
flex-basis 设置元素宽度优先级比width高
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self 运行某个元素设置不同的对齐方式(垂直方向)
rem :尺寸的自动适配
设置一个基准值,你写的 尺寸 * 基准值 == 实际的宽高
10px --> 10rem
默认16px
盒子模型 预留
自动换行
css3 完成
rem 完成
给你们UI图教你们切图 完成
带你们写一个psd剩下的给你们自己写 完成
pc 页面

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
animation: test 0.1s ease infinite;
}
@keyframes test {
0% {
width: 200px;
height: 200px;
background: red;
}
50% {
background: yellow;
}
100% {
width: 400px;
height: 400px;
background: blue;
}
}
/* .box:hover {
width: 300px;
height: 300px;
transform: rotate(360deg);
transform: translate(50px,100px);
} */
</style>
</head>
<body>
<div class="box">www</div>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<script>
window.onload = function () {
getRem(750, 100) //第一位参数和设计图一样大小
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
body {
margin: 0;
padding: 0;
}
.box {
float: left;
}
.box1 {
width: 3.5rem;
height: 3.5rem;
background: blue;
}
.box2 {
width: 2rem;
height: 2rem;
background: brown;
}
.box3 {
width: 2rem;
height: 2rem;
background: yellow;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width: 680px) and (max-width: 980px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 981px) and (max-width: 1200px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
float: left;
}
.box_1 {
background: brown;
}
.box_2 {
background: green;
position: relative;
left: 10px;
top: 30px;
}
.box_3 {
background: yellow;
}
.box_4 {
background: blue;
}
.box_4_1 {
width: 100px;
height: 100px;
background: sienna;
position: absolute;
left: 10px;
top: 40px;
}
.box_5 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_4_1"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"> </div>
<div class="box box_5"></div>
</body>
</html>

View File

@@ -0,0 +1,25 @@
css 定位:
相对定位
元素设置相对定位后:
不会从文档流删除(脱离),原本位置还在。
定位参考对象:参考原本位置
绝对定位
会从文档流删除(脱离),原本位置不在。
定位参考对象:
父元素有没有定位
1有定位参考元素的初始位置进行定位
2没有定位参考浏览器边框body
固定定位
会从文档流删除(脱离),原本位置不在。
定位参考对象就是浏览器窗口

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main button {
}
</style>
</head>
<body>
<p onclick="test()">点我</p>
<div class="main">
<button>点我</button>
</div>
<div class="text"></div>
</body>
<script>
// 事件源
// 事件类型
// 事件处理函数
function test() {
alert("11111")
}
// document.querySelector(".main button").onclick = function () {
// alert("1111")
// }
// document.querySelector(".main button").onclick = function () {
// alert("2222")
// }
document.querySelector(".main button").addEventListener('click', function() {
alert("1111")
})
// document.querySelector(".main button").addEventListener('click', function() {
// alert("2222")
// })
// document.querySelector(".main button").addEventListener('click', function() {
// alert("3333")
// })
</script>
</html>

View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// var a = 1, b = "1"
// console.log(b-a); // 1+"2" 12
// ==(相等) ===(绝对相等)
// console.log(a===b); // false
// x++
// console.log(++a); // 1
// console.log(a); // 2
// console.log( (2 < 3) + a++ );
// console.log(a);
// var b = '<div class="header">' +
// '<div class="header_location">' +
// '<i class="iconfont icon-dingwei"></i>' +
// '<span>' + a + '</span>' +
// '<i class="iconfont icon-xiangxia"></i>' +
// '</div>';
// var c = `
// <div class="header">
// <div class="header_location">
// <i class="iconfont icon-dingwei"></i>
// <span>${a}</span>
// <i class="iconfont icon-xiangxia"></i>
// </div>
// <div class="header_search">
// <i class="iconfont icon-xinbaniconshangchuan-"></i>
// <span>搜索饿了么商家、商品名称</span>
// </div>
// </div>
// `
// console.log(c);
// + 数学运算 +字符串拼接
//
// var n = 78;
// switch (n) {
// case 78:
// console.log("凉");
// break;
// case 2:
// break;
// default:
// }
//for
// js 数组 array
// 1: var arr = new Array();
// arr[0] = 1
// var arr = new Array(1,2,3,4)
// var arr = [1,2,3,4]
// console.log(arr);
// for (var i = 0;i<arr.length;i++) {
// console.log(arr[i]);
// }
// arr.forEach( function(val,index) {
// console.log(index);
// } )
// 类的属性
// 类的方法
// class Utils {
// test() {
// }
// }
// var ddd = new Utils()
// ddd.test()
// es5es6789
// object
// var obj = {
// color: 'red',
// chuang: function() {
// console.log("穿衣服");
// }
// }
// console.log(obj.chuang());
// // obj.chuang()
// var a = function () {
// }
// a()
// function 封装具有相同功能的代码模块,解决代码复用
// var a = 1
// // var ff = "3e233"
// function test () {
// ff = "3e233"
// console.log(a) // 1
// }
// test();
// console.log(ff); //
</script>
</html>

View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<?php
for() {
echo "<li></li>"
}
?>
</ul>
</body>
</html>

View File

@@ -0,0 +1,28 @@
javascript做特效的以前
还能实现各种前端的功能,数据渲染
ajax
web开发
1后端渲染jspphpasp
优势便于seo优化
缺点:代码冗余,页面里面有多种语言的代码,维护成本高
前端工资很低
2前后端分离ajax
后端:处理数据,服务器安全,数据安全
前端:写页面,做功能,处理数据
nodejsjs的后端的运行环境
nodejs 变成前端开发的基本环境
大()前端
deno.js atom 微信小程序开发者工具
js + nodejs + typescript

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #98d8fe url("./img/back.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.people {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
}
span {
}
.leftPeople {
transform: rotateY(180deg) !important;
}
.apple {
width: 40px;
height: 40px;
transition: top 0.1s ease;
}
.boom {
width: 60px;
transition: top 0.1s ease;
}
.fraction {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<!--得分-->
<div class="fraction">0分</div>
<!--爆炸音效-->
<audio class="bombAudio" src="img/bomb.mp3" hidden></audio>
<audio class="appleAudio" src="img/apple.mp3" hidden></audio>
<!--人物-->
<img class="people" src="./img/pepop.png"/>
</body>
<script src="./game.js"></script>
</html>

View File

@@ -0,0 +1,157 @@
var body = document.querySelector("body");
var people = document.querySelector(".people");
var bombAudio = document.querySelector(".bombAudio");
var appleAudio = document.querySelector(".appleAudio");
// 屏幕的宽度
var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;
var fraction = 0;
var gameProbability = 0.4;
var bmobSpeed = 80;
var appleOffset = 20;
function createdEle(type) {
var Img = document.createElement("img");
Img.src = type == 1 ? './img/apple.png' : './img/boom.png';
Img.className = type == 1 ? 'apple' : 'boom';
// 56 84
// 元素的宽度
var SpanWidth = type == 1 ? 40 : 60;
var SpanLeft = Math.random() * (screenWidth - SpanWidth)
if (SpanLeft <= SpanWidth) {
SpanLeft = 0
}
Img.style = `
position: absolute;
left: ${SpanLeft}px;
top: ${type == 1 ? -56 : -84}px;
`;
body.appendChild(Img);
animation(type, Img)
}
function animation(type, span) {
// 苹果🍎
if (type == 1) {
var appleInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
// 判断苹果是否超过苹果最大高度,如果超过,删除苹果并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(appleInterval)
} else {
JudgingCollision(span, appleInterval)
}
},60)
// 炸弹💣
} else {
var boomInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + 20}px`;
//判断炸弹是否超过苹果最大高度,如果超过,删除炸弹并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(boomInterval)
} else {
JudgingCollision(span, boomInterval)
}
},bmobSpeed)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = document.querySelector(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.className == "apple") {
fraction += 10;
// 如果分数超过100分
if (fraction >= 100) {
// 降低苹果出现的概率,也就是提高炸弹数量
gameProbability = 0.2;
// 并且加快炸弹的速度
bmobSpeed = 80;
appleOffset = 40;
}
document.querySelector(".fraction").innerText = `${fraction}`;
appleAudio.play()
body.removeChild(span)
clearInterval(timeout)
} else {
fraction -= 20;
document.querySelector(".fraction").innerText = `${fraction}`;
bombAudio.play();
if (fraction <= 0) {
clearInterval(timeout)
confirm("游戏失败")
location.reload()
} else {
span.src = "./img/bombimg.png"
clearInterval(timeout)
setTimeout(function (){
body.removeChild(span)
},100)
}
}
}
}
function init () {
var probability = Number(Math.random().toFixed(1))
if (probability <= gameProbability) {
createdEle(1)
} else {
createdEle(2)
}
}
setInterval(function (){
init();
},200)
body.onmousemove = function (e) {
if (e.x <= 100) {
people.style.left = `0px`;
} else {
people.style.left = `${e.x - 100}px`;
}
// 判断人物向右移动
if (parseInt(people.style.left) > screenWidth / 2) {
people.className = 'people'
// 判断人物向左移动 添加类名 leftPeople使用css3的水平镜像翻转人物
} else {
people.className = 'people leftPeople'
}
}
// 接到一个苹果加10分
// 接到炸弹减20
// 默认0分
// 结束条件:分数 < 0
// 任务
// 分数 >100 的时候 炸弹速度加快(),炸弹的数量变多(概率)
//

Binary file not shown.

After

Width:  |  Height:  |  Size: 711 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 631 KiB

View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.title_active {
color: red;
}
.tabs_content li{
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var TabsList = [
{
title: '全部',
content: [
{ text: '全部的内容1', id: 1 },
{ text: '全部的内容2', id: 2 },
{ text: '全部的内容3', id: 3 }
]
},
{
title: '安全',
content: [
{ text: '安全的内容1', id: 3 },
{ text: '安全的内容2', id: 4 }
]
},
{
title: '论坛',
content: [
{ text: '论坛的内容1', id: 5 },
{ text: '论坛的内容2', id: 6 }
]
}
];
var tabsTitle = document.querySelector(".tabs_title");
var tabsContent = document.querySelector(".tabs_content");
function RenderTitle() {
TabsList.forEach(function (v,i){
console.log(tabsTitle)
tabsTitle.innerHTML += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
});
RenderContent()
}
function RenderContent() {
TabsList.forEach(function (v,i){
tabsContent.innerHTML +=
`
<li class="${i == 0 ? 'content_active' : ''}">
${
v.content.map(function (val,index){
return ` <div class="item">
<a href="./info.html?id=${val.id}">${val.text}</a>
</div>`
}).toString().replace(/,/ig, "")
}
</li>
`
});
TabsInit()
}
function TabsInit() {
var li = document.querySelectorAll(".tabs_title li");
var contentLi = document.querySelectorAll(".tabs_content li")
li.forEach(function (v,i){
v.onclick = function () {
li.forEach(function (val,index){
val.className = "";
contentLi[index].className = ""
})
v.className = "title_active";
contentLi[i].className = "content_active"
}
})
}
RenderTitle()
</script>
</html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入搜索关键词">
<ul>
</ul>
</body>
<script>
var JianYi = ['html学习', '今天第一个学html', 'js编程入门', '实际案例学习js和html', '垃圾js', 'typescript学习'];
var UserInput = document.querySelector("input");
var Ul = document.querySelector("ul");
var NewArr = [];
UserInput.oninput = function () {
NewArr = []
if (UserInput.value.length != 0) {
JianYi.forEach(function (v) {
if (v.indexOf(UserInput.value) != -1) {
var startIndex = v.indexOf(UserInput.value);
var length = UserInput.value.length;
var str = `<span style="color: red;">${v.substr(startIndex,length)}</span>`;
NewArr.push(v.replace(UserInput.value, str))
console.log(NewArr);
}
});
if (NewArr.length == 0) {
Ul.innerHTML = "<li>没有搜索建议</li>"
} else {
Ul.innerHTML = ""
NewArr.forEach(function (v) {
Ul.innerHTML += `<li>${v}</li>`
})
var Li = document.querySelectorAll("ul li");
Li.forEach(function (v) {
v.onclick = function () {
UserInput.value = v.innerText;
Ul.innerHTML = ""
}
})
}
} else {
Ul.innerHTML = ""
}
}
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px ;height: 100px;background: green;
position: absolute;
}
#div2{
width:100px ;height: 100px;background: yellow;
position: absolute;left: 300px;top: 200px;z-index: -1;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var disX = 0;
var disY = 0;
oDiv.onmousedown = function (ev) {
var ev = ev|| window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var ev = ev|| window.event;
var t1 = oDiv.offsetTop;
var l1 = oDiv.offsetLeft;
var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
var b1 = oDiv.offsetTop + oDiv.offsetHeight;
var t2 = oDiv2.offsetTop;
var l2 = oDiv2.offsetLeft;
var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
}else{
oDiv2.style.background = 'blue';
}
oDiv.style.left = ev.clientX - disX +'px';
oDiv.style.top = ev.clientY - disY +'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<!--<script>-->
<!-- function getData(res) {-->
<!-- console.log(res)-->
<!-- }-->
<!--</script>-->
<!--<script src="http://127.0.0.1:3000/api/json/info?call=getData"></script>-->
<script>
// 拿出电话
var ajax = new XMLHttpRequest();
// 输入号码
ajax.open("GET", "http://127.0.0.1:3000/api/json/index")
// 拨打电话
ajax.send()
// 对拨号的状态进行监听
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var result = JSON.parse(ajax.responseText)
// var a = { name: 1 };
// console.log(JSON.parse(JSON.stringify(a)))
console.log(result.data)
result.data.newest.list.forEach(function (v){
document.querySelector("ul").innerHTML +=
`<li>
<img src="${v.preview}" alt="">
</li>`
})
} else {
console.log("请求错误")
}
}
}
</script>
</html>

View File

@@ -0,0 +1,51 @@
ajax: 是一种无刷新(局部刷新)的前后端数据交互的方式
前端分离:
前端
|
|
ajax
|
|
后端
原生js里面就支持
同源策略
1域名相同
2协议相同(http 80https: 443)
3端口相同
请求跨域Access-Control-Allow-Origin
这三个只要有一个不相同,那么你的请求就发不出去
前端http://localhost:63343/2020-12-28/ajax.html
后端http://127.0.0.1:3000/api/json/index
三种解决:浏览器跨域
1后端设置cors请求头(Access-Control-Allow-Origin)来解决
由后端解决!!!
header("Access-Control-Allow-Origin", "*");
2js资源文件请求绕过浏览器限制 jsonp不是ajax请求
回调
<script>
function getData(res) {
console.log(res)
}
</script>
<script src="http://127.0.0.1:3000/api/json/test?call=getData"></script>
3后端代理实现绕过浏览器
A --- C
A -- B
B -- C

View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component</title>
</head>
<body>
<div class="app">
<about ref="about" title="我是" @setdata="getdata" @getfather="getd"></about>
<love_p :test="geiLove"></love_p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局组件
// 局部组件
// 父组件 -> 子组件 传递数据 props
// 子组件 -> 父组件 传递数据 $emit提交一个事件可以携带数据
// 全局组件
Vue.component('love_p', {
props: ['test'],
template: `
<div>
<h2>{{title}}</h2>
<p>{{ test }}</p>
</div>
`,
data() {
return {
title: '组件 love_p'
}
},
methods: {
}
});
// 局部组件
var about = {
// props: ['title'],
props: {
title: {
type: String,
default: '默认数值',
validator: function(val) {
return val.length < 3;
}
}
},
template: `
<div>
<div>{{title | checkTitle}}</div>
<h1 @click="hello">哈哈哈哈</h1>
</div>
`,
filters: {
checkTitle(res) {
return res + ' - 过滤后的数据';
}
},
data() {
return {
goLoveP: "我是需要给love_p的数据"
}
},
created() {
this.$emit("getfather", this.goLoveP);
},
mounted() {
console.log(this.$parent.$children[1].title = "偷偷修改lovep");
},
methods: {
ceshi() {
console.log("被父亲调用");
},
hello() {
this.$emit('setdata','子组件数据')
}
}
};
new Vue({
el: '.app',
data: {
geiLove: ""
},
mounted() {
this.$refs.about.ceshi()
},
methods: {
getd(val) {
console.log("val ===== ",val);
this.geiLove = val;
},
getdata(res) {
console.log(res);
}
},
components: {
// 'lb_about': about
about
}
})
</script>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background: red;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2>{{msg}}</h2>
<img :src="img" alt="">
<ul>
<li v-for="v,index in list " :key="index">{{index}} | {{v.name}}</li>
</ul>
<ul>
<li v-for="val,key,i in obj" :key="i">{{i}} | {{key}} | {{val}}</li>
</ul>
<h2 v-if="isVip == 1">游客查看内容</h2>
<h2 v-else-if="isVip == 2">普通vip查看内容</h2>
<h2 v-else-if="isVip == 3">超级vip查看内容</h2>
<h2 v-else>错误页面</h2>
<h3 v-show="isShow">isShow</h3>
<div v-html="test"></div>
<div v-text="test"></div>
<button @click="hello('你好')">点我</button>
<div class="box" @click="father">
<button @click.stop.once="child">子元素点击</button>
</div>
<input type="text" v-model="UserName" placeholder="请输入用户名">
<!-- <p>{{UserName}}</p> -->
<span v-once>{{ UserName }}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// v-bind 将变量绑定到标签的属性上
// 简写
// v-for
// v-if 会根据条件真假 对元素进行 增删
// v-show 会根据条件真假 对元素进行display设置
// v-on @
var vm = new Vue({
el: '.app',
data: {
test: '<h2>v-html</h2>',
msg: '这是vue',
img: 'https://www.baidu.com/img/bd_logo1.png',
UserName: '1111',
list: [
{id:1,name:'测试1'},
{id:2,name:'测试2'},
{id:3,name:'测试3'},
],
obj: {
name: '张三',
age: 18
},
isVip: 4,//1游客2普通vip3超级vip
isShow: false,
},
methods: {
father() {
alert("father")
},
child() {
alert("child")
},
hello(name) {
console.log(this.msg);
alert(name)
}
}
});
// var data = {
// age: 18,
// name: '张三'
// };
// document.querySelector("h2").innerText = data.name
// Object.defineProperty(data,"name", {
// get: function() {
// return "李四";
// },
// set: function(newValue) {
// console.log(newValue);
// document.querySelector("h2").innerText = newValue
// },
// })
// console.log(data.name);
</script>
</html>

View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tabstitle {
overflow: hidden;
}
.tabstitle li{
float: left;
margin-right: 20px;
list-style: none;
}
.active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabstitle">
<li v-for="item,index in Tabs"
@click="currentIndex = index"
:class="currentIndex == index ? 'active' : '' "
:key="index">
{{item.title}}
</li>
</ul>
<ul class="tabscontent">
<li v-for="item,index in Tabs[currentIndex].content"
:key="index">
{{ item.name }}
</li>
</ul>
<div class="sss" ref="sss">哈哈哈</div>
<div @click="test">点我 {{hello}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
currentIndex: 0,
Tabs: [
{
title: '社会',
content: [
{ name: '社会1' },
{ name: '社会1' }
]
},
{
title: '军事',
content: [
{ name: '军事1' },
{ name: '军事1' }
]
},
{
title: '财经',
content: [
{ name: '财经1' },
{ name: '财经1' }
]
}
]
},
beforeCreate() {
// console.log(document.querySelector(".sss"));
console.log(this.currentIndex);
},
watch: {
// Tabs(newVal,oldVal) {
// console.log("newVal: ", newVal);
// console.log("oldVal: ", oldVal);
// }
Tabs: {
handler(newVal,oldVal) {
console.log("newVal: ", newVal);
console.log("oldVal: ", oldVal);
},
deep: true
}
},
// 发送ajax请求
created() {
console.log(this.currentIndex);
},
// 一般需要和dom进行交互的操作放在这
mounted() {
console.log(this.$refs.sss);
},
beforeUpdate() {
console.log("beforeUpdate");
},
methods: {
test() {
alert("111")
}
},
computed: {
hello() {
return "qwdwqdwq"
}
}
})
</script>
</html>

View File

@@ -0,0 +1,23 @@
1插槽 多
2混入 实现公共代码的封装可以解决this指向的问题保障this始终指向当前实例
3自定义指令 少
4过滤器 少
明天课程
vue-router
路由懒加载
路由分离打包
APP.JS 2kb 20MB
1.JS
2.JS
100.JS
babel
vuex

View File

@@ -0,0 +1,53 @@
vue react angular
|
尤雨溪
mmodelvviewvmview and model
mmodel vviewccontroller
vue option api (原生js) 2.x
Vue({
data: {
a: "1"
},
methods: {
getdata() {}
}
})
vue class api 2.x
主要是:为了临时实现对 typescript 的支持
class Home extend Vue {
public a: string = "1";
getdata() {
}
}
vue 3 composition api (vue-next vue3.x)
setup() {
var a = ref(1)
const getdata = () => {}
return {
a,
getdata
}
}
vue 优势?
组件系统
响应式系统 页面 <---> 数据
String a = "1";
js + node.js + typescript

View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<div class="header" v-title="'测试标题'"></div>
<love_p>
<template slot-scope="scope" slot="test">
<h2>dqdqwdqw</h2>
<a>{{ scope.text }}</a>
</template>
<template v-slot:zhangsan>
<h2>zhangsan</h2>
</template>
</love_p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('love_p', {
template: `
<div>
<h2>{{title}}</h2>
<slot name="test" :text="biaoto"></slot>
<hr/>
<slot name="zhangsan"></slot>
</div>
`,
data() {
return {
title: '组件 love_p',
biaoto: '哈哈哈哈哈test'
}
},
methods: {
}
});
// 定义一个混入对象
var myMixin = {
data: {
name: '111111'
},
created: function () {
this.a()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
new Vue({
el: '.app',
mixins: [myMixin],
data: {
},
directives: {
title: {
bind(el,binding,vnode,oldnode) {
console.log("el: ", el);
console.log("binding: ", binding.value);
document.title = binding.value
console.log("vnode: ", vnode);
console.log("oldnode: ", oldnode);
},
// 指令的定义
inserted: function (el) {
el.focus()
},
update() {
}
}
},
created: function () {
this.hello()
},
methods: {
a() {
console.log(this.name);
}
}
})
</script>
</html>

View File

@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/index">Go to index</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/me">我的</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<transition name="bounce">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程导入Vue和VueRouter要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
// 参数传递,有两种方式
// query 传参 支持向 path 和 name
// http://a.com ?id=1&page=2
// :to="{ path: '/info', query: { id: v.id, name: v.name } }"
// 获取 query 传参
// this.$route.query.参数名
// params 传参 只支持向 name 进行跳转
// http://a.com/1/2
// :to="{ name: 'info', params: { id: v.id, name: v.name } }"
// path: '/info/:id/:name',
// 获取 params 传参
// this.$route.params.参数名
const Index = {
template: `
<div class="index">
<ul>
<li v-for="v,i in list" :key="i">
<router-link :to="{ name: 'info', params: { id: v.id, name: v.name } }">{{ v.name }}</router-link>
</li>
</ul>
<div @click="goto">点我跳转</div>
</div>
`,
data() {
return {
list: [
{ name: '测试新闻1', id: 1 },
{ name: '测试新闻2', id: 2 },
{ name: '测试新闻3', id: 3 },
{ name: '测试新闻4', id: 4 },
]
}
},
methods: {
goto() {
this.$router.push({
name: 'bar',
query: {
id: 1
}
})
}
}
}
const Bar = { template: '<div>bar</div>' }
const Info = {
template: `
<div class="info">
<h2>{{msg}}</h2>
</div>
`,
created() {
//console.log(this.$route.query.id);
//console.log(this.$route.query.name);
console.log(this.$route.params);
},
data() {
return {
msg: '详情页'
}
}
}
const Login = { template: '<div>Login</div>' }
const Me = { template: '<div>Me</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{
path: '/index',
component: Index,
name: 'index',
meta: {
isLogin: false,
title: '首页'
}
},
{
path: '/bar',
component: Bar,
name: 'bar',
redirect: '/index',
meta: {
isLogin: false,
title: 'Bar页面'
}
},
{
path: '/info/:id/:name',
component: Info,
name: 'info',
meta: {
isLogin: false,
title: '详情'
}
},
{
path: '/login',
component: Login,
name: 'login',
meta: {
isLogin: false,
title: '登录'
}
},
{
path: '/me',
component: Me,
name: 'me',
meta: {
isLogin: true,
title: '我的'
}
}
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title
// true 需要登录
if (to.meta.isLogin) {
// 判断是否登录,登录过了,正常查看页面
// 如果没登录,去登录
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
from: from.fullPath
}
})
}
// false 不需要登录,正常查看页面
} else {
next();
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router,
});
// 导航守卫
// 全局
// 路由独享的守卫
// 组件内的守卫
</script>
</html>

View File

@@ -0,0 +1,44 @@
app 开发
原生开发
android java kotlin
ios object-c Swift
优势:动画流畅,体验好
不足:代码繁琐,更新迭代慢,开发成本高
前端开发
webview ()
uniapp ( mui )
js ------中间层(原生)----------> 原生android ios
uniapp.jar(封装了一系列的方法)
uniapp.js ==> uni.setScreenBrightness()
uniapp 为什么可以编译到多个平台:
ast
mpvue
weex
react native
Text ----> TextView
flutter ui框架
Skia
web pc h5
android ios
macos window linux
操作系统
TextView --> P

View File

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View File

@@ -0,0 +1,19 @@
# zaibaohe
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,34 @@
{
"name": "zaibaohe",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"node-rsa": "^1.1.1",
"vant": "^2.12.3",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"postcss-pxtorem": "^5.1.1",
"pug": "^3.0.0",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.1.0",
"style-resources-loader": "^1.4.1",
"vue-cli-plugin-style-resources-loader": "~0.1.4",
"vue-template-compiler": "^2.6.11"
}
}

View File

@@ -0,0 +1,12 @@
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
//这是基准值在375px的屏幕变大rem的值会变大小于这个大小元素的rem值会变小
propList: ['*']
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 724 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 703 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 983 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 646 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 952 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 910 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 865 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="//at.alicdn.com/t/font_2269051_1j1ibqf3iej.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -0,0 +1,28 @@
<template lang="pug">
#app
keep-alive
router-view(v-if="$route.meta.keepAlive")
router-view(v-if="!$route.meta.keepAlive")
van-tabbar(v-if="$route.meta.isShowTabbar" v-model='active' route)
van-tabbar-item(icon='home-o' to="/") 首页
van-tabbar-item(icon='apps-o' to="/type") 分类
van-tabbar-item(icon='shopping-cart-o' to="/car") 购物车
van-tabbar-item(icon='friends-o' to="/me") 我的
</template>
<script>
export default {
data () {
return {
active: 0
}
}
}
</script>
<style lang="less">
@import "~@common/_.less";
</style>

View File

@@ -0,0 +1,4 @@
@import "normalize.less";
@import "base.less";
@import "colors.less";
@import "mixins.less";

View File

@@ -0,0 +1,46 @@
@import "./normalize.less";
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
input {
outline: none;
}
.content {
margin-top: 45px;
}
img {
width: 100%;
}
.me {
.van-divider {
margin: 0 !important;
}
}
.icon {
width: 16px;
height: 16px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.car {
.list_item {
display: flex;
padding-left: 15px;
}
.van-card {
flex: 1;
}
}

View File

@@ -0,0 +1,2 @@
@themeColor: #ff6700;
@whileColor: #fff;

View File

@@ -0,0 +1,16 @@
.ellipsis() {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
word-wrap: break-word;
}
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}

View File

@@ -0,0 +1,419 @@
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

View File

@@ -0,0 +1,38 @@
@import "../common/_.less";
.home {
h2 {
color: @themeColor;
font-size: 37.5px;
}
.recommen_item {
.van-image {
width: 40px;
height: 40px;
margin-bottom: 15px;
}
span {
font-size: 14px;
}
}
.navbar {
display: flex;
height: 45px;
align-items: center;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
position: fixed;
left: 0;
top: 0;
width: 100%;
border-bottom: 1px solid #f7f8fa;
background: @whileColor;
.logo_text {
font-size: 14px;
}
.van-search {
padding: 0 0.32rem !important;
flex: 1;
}
}
}

View File

@@ -0,0 +1,147 @@
.info {
margin-bottom: 50px;
.header {
display: flex;
height: 40px;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 10px;
width: 100%;
z-index: 999;
padding: 0 15px;
box-sizing: border-box;
i {
width: 35px;
height: 35px;
border-radius: 100%;
text-align: center;
line-height: 35px;
background: #00000080;
color: #fff;
font-size: 14px;
}
}
.info_text {
padding: 0 15px;
.pabcd{
display: flex;
align-items: flex-end;
.abcd {
color: @themeColor;
font-size: 25px;
}
.aabcd{
font-size: 12px;
align-items: flex-end;
margin-bottom: 7px;
margin-left: 9px;
}
}
.title{
font-size: 17px;
margin-top: 8px;
margin-bottom: 8px;
}
.mess{
font-size: 12px;
margin-top: 6px;
margin-bottom: 6px;
border-bottom: 2px solid rgb(241, 241, 241);
height: 37px;
padding: 4px;
}
.config{
display: flex;
justify-content: space-between;
font-size: 12px;
height: 46px;
text-align: center;
line-height: 46px;
box-sizing: border-box;
.spanTxt1{
margin-right: 20px;
}
.span_linee{
border-bottom: 2px solid rgb(241, 241, 241);
flex: 1;
display: flex;
justify-content: space-between;
.van-icon{
line-height: 46px;
}
}
}
.remarks{
display: flex;
justify-content: space-between;
background-color: #fcfcfc;
line-height: 32px;
margin-top: 4px;
.van-icon{
font-size: 12px;
color: #cecece;
line-height: 32px;
}
.van-cell{
padding: 10px 0;
display: flex;
img{
width: 12px;
height: 12px;
margin-right: 4.7px;
}
.remarks_right{
display: flex;
li{
margin-right: 16px;
span{
font-size: 12px;
}
}
}
}
.van-popup{
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
.p1{
font-size: 16px;
text-align: center;
margin-top: 10px;
}
.pp1{
display: flex;
font-size: 12px;
line-height: 15px;
margin-top: 20px;
img{
width: 12px;
height: 12px;
margin-right: 9px;
}
}
}
}
}
.figures{
p{
text-align: center;
}
}
.van-goods-action{
.txtt{
font-size: 16px;
}
}
}

View File

@@ -0,0 +1,68 @@
@import "../common/_.less";
.login {
padding: 0 0.48rem;
.user_header {
margin-bottom: 25px;
text-align: center;
margin-top: 20px;
.logo_header {
width: 80px;
height: 80px;
margin-bottom: 12px;
}
p {
font-size: 18px;
color: #000;
font-weight: 400;
}
}
.user_login {
margin: 20px auto;
position: relative;
}
.user_reg {
position: relative;
.showpwd {
right: 0 !important;
bottom: 3.7rem !important;
}
}
input {
border: none;
border-bottom: 0.02667rem solid #d3d3d3;
width: 100%;
margin-bottom: 13px;
font-size: 16px;
padding-bottom: 15px;
padding-right: 20px;
box-sizing: border-box;
}
.showpwd {
position: absolute;
right: 15px;
bottom: 27px;
}
.submit {
width: 100%;
height: 47px;
border-radius: 20px;
background: @themeColor;
text-align: center;
line-height: 47px;
color: #fff;
font-size: 18px;
}
.action {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
bottom: 15px;
width: calc(100% - 36px);
span {
font-size: 13px;
color: #d3d3d3;
}
}
}

Some files were not shown because too many files have changed in this diff Show More