Commit af4c1a1e authored by jiangyipeng's avatar jiangyipeng

1

parent 4fb310b8
This diff is collapsed.
......@@ -10,6 +10,8 @@
"build": "node build/build.js"
},
"dependencies": {
"less": "^3.11.1",
"less-loader": "^5.0.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
......
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
......@@ -12,12 +11,12 @@ export default {
</script>
<style>
@import "assets/font.css";
@import "style/app.less";
@import "style/normalize.css";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
@font-face {
font-family: 'icomoon';
src: url('font/icomoon.eot?klz5g9');
src: url('font/icomoon.eot?klz5g9#iefix') format('embedded-opentype'),
url('font/icomoon.ttf?klz5g9') format('truetype'),
url('font/icomoon.woff?klz5g9') format('woff'),
url('font/icomoon.svg?klz5g9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon--1:before {
content: "\e903";
}
.icon--2:before {
content: "\e904";
}
.icon--3:before {
content: "\e905";
}
.icon--4:before {
content: "\e906";
}
.icon--6:before {
content: "\e907";
}
.icon--7:before {
content: "\e908";
}
.icon--8:before {
content: "\e909";
}
.icon--9:before {
content: "\e90a";
}
.icon--10:before {
content: "\e90b";
}
.icon--11:before {
content: "\e90c";
}
.icon--12:before {
content: "\e90d";
}
.icon--13:before {
content: "\e90e";
}
.icon--14:before {
content: "\e90f";
}
.icon--15:before {
content: "\e910";
}
.icon--16:before {
content: "\e911";
}
.icon--17:before {
content: "\e912";
}
.icon--18:before {
content: "\e900";
}
.icon--19:before {
content: "\e901";
}
.icon--20:before {
content: "\e902";
}
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div>
<span class="icon--1"></span>
<div class="ces">测试less</div>
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped lang="less">
.ces{
}
</style>
\ No newline at end of file
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
......@@ -8,8 +7,8 @@ export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
name: 'index',
component: ()=>import('@/pages/index.vue')
}
]
})
html{
font-size:50px;
}
@no:15;
@media screen and (min-width: 320px){
html{
font-size:320px / @no;
}
}
@media screen and (min-width: 360px){
html{
font-size:360px / @no;
}
}
@media screen and (min-width: 375px){
html{
font-size:375px / @no;
}
}
@media screen and (min-width: 384px){
html{
font-size:384px / @no;
}
}
@media screen and (min-width: 400px){
html{
font-size:400px / @no;
}
}
@media screen and (min-width: 414px){
html{
font-size:414px / @no;
}
}
@media screen and (min-width: 424px){
html{
font-size:424px / @no;
}
}
@media screen and (min-width: 480px){
html{
font-size:480px / @no;
}
}
@media screen and (min-width: 540px){
html{
font-size:540px / @no;
}
}
@media screen and (min-width: 720px){
html{
font-size:720px / @no;
}
}
@media screen and (min-width: 750px){
html{
font-size:750px / @no;
}
}
.rem(Company){
font-size:Company /50;
}
.active_op:active{
opacity:.7;
}
.active_col:active{
background-color: #f8f8f8;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. 在所有浏览器中更正行高。
* 2. 在iOS中更改方向后,防止调整字体大小。
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
*{
margin:0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/* Sections
========================================================================== */
/**
* 删除所有浏览器中的边距。
*/
html,body,#app{
height:100%;
}
input::-webkit-input-placeholder{
color:#999999;
}
/**
* 在IE中一致地渲染`main`元素。
*/
main {
display: block;
}
/**
* 更正chrome、firefox和safari中“section”和“article”上下文中“h1”元素的字体大小和边距。
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content(分组内容)
========================================================================== */
/**
* 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 */
}
/**
* 1. 纠正所有浏览器中字体大小的继承和缩放。
* 2. 纠正所有浏览器中奇怪的'em`字体大小。
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics(文本级语义)
========================================================================== */
/**
* Remove the gray background on active links in IE 10.//删除IE 10中活动链接的灰色背景。
*/
a {
background-color: transparent;
text-decoration:none;
color:#333333;
}
/**
* 1. Remove the bottom border in Chrome 57- //移除Chrome 57中的底部边框 -
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.//在Chrome,Edge,IE,Opera和Safari中添加正确的文本修饰。
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.//在Chrome,Edge和Safari中添加正确的字体粗细。
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.//纠正所有浏览器中字体大小的继承和缩放。
* 2. Correct the odd `em` font sizing in all browsers.//纠正所有浏览器中奇怪的'em`字体大小。
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* 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”元素影响所有浏览器中的行高
*/
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.//删除IE 10中链接内图像的边框。
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.//更改所有浏览器的字体样式。
* 2. Remove the margin in Firefox and Safari.//删除Firefox和Safari中的边距。
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.//在IE中显示溢出。
* 1. Show the overflow in Edge.//.在Edge中显示溢出
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.//删除Edge,Firefox和IE中文本转换的继承。
* 1. Remove the inheritance of text transform in Firefox.//删除Firefox中文本转换的继承。
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.//更正在iOS和Safari中无法设置可单击类型的样式
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.//删除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;
}
/**
* Correct the padding in Firefox.//更正Firefox中的填充。
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.//更正Edge和IE中的文本换行。
* 2. Correct the color inheritance from `fieldset` elements in IE.//纠正IE中`fieldset`元素的颜色继承。
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.//删除填充,以便开发人员在所有浏览器中清空“fieldset”元素时不会被捕获。
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.//在Chrome,Firefox和Opera中添加正确的垂直对齐方式。
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.//删除IE 10+中的默认垂直滚动条。
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.//.在IE 10中添加正确的大小调整大小。
* 2. Remove the padding in IE 10.//.删除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.//更正chrome中递增和递减按钮的光标样式。
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.//纠正Chrome和Safari中的奇怪外观。
* 2. Correct the outline style in Safari.//更正Safari中的轮廓样式。
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.//在macOS上删除Chrome和Safari中的内部填充。
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.//纠正无法在iOS和Safari中设置可点击类型的样式。
* 2. Change font properties to `inherit` in Safari.//在Safari中将字体属性更改为`inherit`。
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive//互动
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.//在Edge,IE 10+和Firefox中添加正确的显示。
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.//在所有浏览器中添加正确的显示。
*/
summary {
display: list-item;
}
/* Misc//杂项
========================================================================== */
/**
* Add the correct display in IE 10+.//在IE 10+中添加正确的显示。
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.//在IE 10中添加正确的显示。
*/
[hidden] {
display: none;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment