Skip to content

V
vue-test
提交 e73fbf9d authored 作者: lzh's avatar lzh
浏览文件
操作

clean code

上级 59772dcc
隐藏空白字符变更
内嵌 并排
正在显示 包含 215 行增加 和 116 行删除
src/App.vue
浏览文件 @ e73fbf9d
<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;
html,body{
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
#app {
height: 100%;
}
</style>
src/components/HelloWorld.vue deleted 100644 → 0
浏览文件 @ 59772dcc
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/pages/index.vue 0 → 100644
浏览文件 @ e73fbf9d
<template>
<div class="b">
<div class="b1">
<span class="b2">张小成</span>
<span class="b3">欢迎您！</span>
</div>
<div class="b4">
<span>请选择下一步操作。</span>
</div>
<div class="b5">
<span>打开扫一扫</span>
</div>
<div class="b6"><span>上货</span></div>
<div class="b6"><span>清货</span></div>
<div class="b6"><span>清洁</span></div>
<div class="b7"><span>刷新任务</span></div>
</div>
</template>
<style lang="scss">
.b {
background-color: #f2f2f2;
height: 100%;
margin: 0;
padding: 0;
}
.b2 {
margin-left: 30px;
color: #cc0000;
font-weight: 800;
}
.b3 {
margin-left: 15px;
font-weight: 800;
}
.b4 {
margin-top: 20px;
margin-left: 30px;
}
.b5 {
width: 140px;
height: 140px;
background-color: #169bd5;
text-align: center;
line-height: 140px;
margin-top: 20px;
margin-left: 30px;
font-weight: 800;
color: aliceblue;
border-radius: 10px;
float: left;
}
.b6 {
width: 140px;
height: 140px;
background-color: #ffffff;
text-align: center;
line-height: 140px;
margin-top: 20px;
margin-left: 30px;
border-radius: 10px;
float: left;
border: 1px solid #169bd5;
color: #169bd5;
}
.b7 {
width: 310px;
height: 40px;
background-color: #ffffff;
text-align: center;
line-height: 40px;
margin-top: 50px;
margin-left: 30px;
float: left;
border: 1px solid #169bd5;
color: #169bd5;
border-radius: 5px;
}
</style>
\ No newline at end of file
src/pages/login.vue 0 → 100644
浏览文件 @ e73fbf9d
<template>
<div class="u">
<div class="u0">
<span>售饭机操作员您好！</span>
<p>请您登录</p>
</div>
<div class="u1">
<input type="text" name="" id="" placeholder="请输入账户" />
</div>
<div class="u1">
<input type="text" name="" id="" placeholder="请输入密码" />
</div>
<div class="u2">
<span>登录</span>
</div>
</div>
</template>
<style lang="scss">
.u {
background-color: #f2f2f2;
height: 100%;
margin: 0;
padding: 0;
}
.u0 {
padding-top: 80px;
text-align: center;
margin-bottom: 50px;
}
.u1 {
width: 96%;
height: 50px;
margin: 0 auto;
margin-top: 10px;
text-align: center;
> input {
width: 100%;
height: 100%;
border: none;
outline: none;
box-sizing: border-box;
padding-left: 5px;
}
::-webkit-input-placeholder {
text-align: center;
}
}
.u2 {
background-color: #169bd5;
width: 96%;
height: 50px;
margin: 0 auto;
margin-top: 10px;
text-align: center;
line-height: 50px;
color: seashell;
}
</style>
\ No newline at end of file
src/pages/loginlist.vue 0 → 100644
浏览文件 @ e73fbf9d
<template>
<div class="c">
<div class="c1">
<span> 上货统计：1个地址，10台机器，共计200份餐。 </span>
</div>
<div class="c2"><span>请选择机器</span></div>
<div class="c3"><span>1楼1号机</span><span>选择></span></div>
<div class="c3"><span>3楼1号机</span><span>选择></span></div>
<div class="c3"><span>5楼1号机</span><span>选择></span></div>
<div class="c3"><span>6楼1号机</span><span>选择></span></div>
<div class="c3"><span>7楼1号机</span><span>选择></span></div>
<div class="c3"><span>8楼1号机</span><span>选择></span></div>
<div class="c3"><span>9楼1号机</span><span>选择></span></div>
<div class="c3"><span>10楼1号机</span><span>选择></span></div>
<div class="c3"><span>11楼1号机</span><span>选择></span></div>
<div class="c3"><span>12楼1号机</span><span>选择></span></div>
<div class="c3"><span>12楼1号机</span><span>选择></span></div>
<div class="c3"><span>13楼1号机</span><span>选择></span></div>
<div class="c3"><span>14楼1号机</span><span>选择></span></div>
<div class="c3"><span>15楼1号机</span><span>选择></span></div>
<div class="c3"><span>16楼1号机</span><span>选择></span></div>
</div>
</template>
<style scoped>
.c1 {
height: 41px;
background-color: #e4e4e4;
padding-left: 10px;
line-height: 41px;
}
.c2 {
height: 50px;
background-color: rgba(180, 32, 32, 0.315);
padding-left: 10px;
line-height: 50px;
}
.c3 {
height: 60px;
background-color: #ffffff;
padding-left: 10px;
padding-right: 10px;
line-height: 50px;
display: flex;
justify-content: space-between;
border-top: 1px solid rgb(224, 216, 216);
font-size: 14px;
}
span:nth-of-type(1) {
font-weight: 600;
}
</style>
\ No newline at end of file
src/router/index.ts
浏览文件 @ e73fbf9d
import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import Home from '../views/Home.vue';
// import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes: RouteConfig[] = [
{
path: '/',
name: 'Home',
component: Home,
path: '/login',
name: 'Login',
component: () => import('../pages/login.vue'),
},
{
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.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
path: '/index',
name: 'Index',
component: () => import('../pages/index.vue'),
},
{
path: '/loginlist',
name: 'Loginlist',
component: () => import('../pages/loginlist.vue'),
},
];
......
src/views/About.vue deleted 100644 → 0
浏览文件 @ 59772dcc
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
浏览文件 @ 59772dcc
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({
components: {
HelloWorld,
},
})
export default class Home extends Vue {}
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论