提交 e149869f authored 作者: haodaking's avatar haodaking

init

上级 03cd5df1
module.exports = {
semi: false,
singleQuote: true
}
<!DOCTYPE html>
<html lang="en">
<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">
<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>
;(function(win, doc) {
function resizeRoot() {
var wWidth =
screen.width > 0
? win.innerWidth >= screen.width || win.innerWidth == 0
? screen.width
: win.innerWidth
: win.innerWidth,
wFsize
wFsize = ((wWidth > 750 ? 750 : wWidth) / 375) * 100
doc.documentElement.style.fontSize = wFsize + 'px'
}
resizeRoot()
win.addEventListener('resize', resizeRoot, false)
})(window, document)
</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>
<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 -->
......
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
* {
margin: 0;
padding: 0;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
#app {
max-width: 750px;
min-height: 100vh;
margin: 0 auto;
background-color: #fff;
}
</style>
html * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
ul,
ol,
li {
list-style: none;
}
em,
i {
font-style: normal;
}
strong,
b {
font-weight: normal;
}
img {
border: none;
}
input,
img {
vertical-align: middle;
}
a {
color: inherit;
text-decoration: none;
}
input,
button,
select,
textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
border: 0;
border-radius: 0;
}
textarea:focus {
outline: 0;
}
html {
font-size: 100px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-size: 14px;
line-height: 1.4;
color: #333;
font-family: -apple-system-font, 'Helvetica Neue', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
background-color: #f4f4f4;
}
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
// 公共css
import '@/assets/css/base.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}).$mount('#app')
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'
Vue.use(VueRouter);
Vue.use(VueRouter)
const routes = [
// {
// path: '/',
// name: 'Home',
// component: Home
// },
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
path: '/login',
name: 'Login',
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
import(/* webpackChunkName: "login" */ '../views/Login.vue')
}
];
]
const router = new VueRouter({
mode: "history",
mode: 'history',
base: process.env.BASE_URL,
routes
});
})
export default router;
export default router
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="choose">
<h2 class="choose-title">请选择事务</h2>
<div class="choose-list">
<ul>
<li></li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss"></style>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld
}
};
</script>
<template>
<div class="login">
<div class="login-hd">
<div class="logo" title="紫荆教育"></div>
<h2 class="login-title">欢迎回来</h2>
</div>
<div class="login-bd">
<div class="login-form">
<div class="login-form__item">
<input
type="text"
class="login-input"
placeholder="手机/邮箱/用户名"
/>
</div>
<div class="login-form__item">
<input type="password" class="login-input" placeholder="密码" />
</div>
<div class="login-form__item">
<label>
<input type="checkbox" class="login-checkbox" /> 下次自动登录
</label>
</div>
<div class="login-form__item">
<div class="login-button">登录</div>
</div>
</div>
</div>
<div class="login-ft">
<p class="login-tips">
登录遇到困难?请点击<a href="">找回密码</a>
<!-- <router-link :to="{ name: forgetPassword }">找回密码</router-link> -->
</p>
</div>
</div>
</template>
<style lang="scss">
.login {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.logo {
width: 136px;
height: 44px;
background: url('../assets/img/logo.png') no-repeat;
background-size: contain;
}
.login-hd {
min-height: 170px;
padding: 30px 0 0 30px;
background: url('../assets/img/login_bg.png') no-repeat right top;
background-size: 152px 170px;
}
.login-title {
margin-top: 6px;
font-size: 50px;
color: #333;
}
.login-bd {
flex: 1;
}
.login-form {
padding: 40px 0 90px;
overflow: hidden;
}
.login-form__item {
padding: 0 30px;
}
.login-input {
padding: 0 20px;
width: 100%;
height: 40px;
font-size: 15px;
color: #999;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.06);
border-radius: 20px;
box-sizing: border-box;
margin-bottom: 30px;
}
.login-checkbox {
width: 15px;
height: 15px;
border: 1px solid rgba(153, 153, 153, 1);
}
.login-button {
float: right;
height: 60px;
padding-right: 90px;
font-size: 15px;
line-height: 60px;
background: url('../assets/img/login_button.png') no-repeat right center;
background-size: contain;
cursor: pointer;
}
.login-ft {
padding: 40px 0;
}
.login-tips {
text-align: center;
font-size: 12px;
color: #999;
a {
color: #1989fa;
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论