小程序拼团改版为 vue cii vue.js

从零创建 vue cii项目
第一步创建路由，并修改url模式
router/index.js

import Vue from 'vue' import Router from 'vue-router' import Web from '@/components/Web'Vue.use(Router)export default new Router({ mode: "history", routes: [ { path: '/', name: 'Web', component: Web } ] })

【小程序拼团改版为 vue cii】第二步
components/web.vue

.header {display:flex; align-items: center; justify-content: space-between; padding: 56rem 258rem; max-width: 900px; margin: 0 auto; } .setion {padding: 56rem 258rem; } .login-wrap {display:flex; align-items: center; } .login-label {font-size: 40rem; font-weight: normal; color: #07C160; } .login-icon {margin-right: 10rem; background: url(https://pin.notestore.cn/image/v9/logo.png) no-repeat; background-size: contain; width: 44rem; height: 44rem; } .nav-warp {display:flex; align-items: center; } .nav-item:not(:last-child) {font-size: 30rem; margin-right: 78rem; color: #4A4A4A; } .nav-login {color: #07C160; height: 50rem; border-radius: 25rem; border: 2rem solid #07C160; padding: 0 36rem; font-size: 30rem; } .nav-login {margin-right: 102rem; display: flex; align-items: center; justify-content: center; } .setion {flex-direction: column; display:flex; align-items: center; justify-content: center; padding-top: 180rem; } .setion .title {font-size: 58rem; font-weight: normal; color: #4A4A4A; } .setion .button {font-size: 36rem; font-weight: 400; color: #FFFFFF; display: flex; align-items: center; justify-content: center; height: 78rem; background: #07C160; border-radius: 39rem; padding: 0 88rem; margin-top: 70rem; } .footer .content .item .icon {width: 8rem; height: 8rem; border-radius: 50%; background: #FFFFFF; margin-right: 12rem; } .footer .content .item .label {font-size: 28rem; font-weight: normal; color: #FFFFFF; } .footer .content .item {display:flex; align-items: center; margin-bottom: 15rem; } .footer{display:flex; align-items: center; justify-content: space-between; } .footer .content {flex-direction: column; display:flex; } .footer {height: 417rem; box-sizing: border-box; } .footer .image {z-index: 22; right: 0; position: absolute; overflow: hidden; width: 757rem; height: 446rem; background: url(https://pin.notestore.cn/image/v9/macbook.png) no-repeat; background-size: contain; } .footer .admin {top:32rem; right: 96rem; position: absolute; width: 565rem; height: 387rem; background: url(https://pin.notestore.cn/image/v9/admin.png) no-repeat #fff; background-size: contain; } .footer {display:flex; align-items: center; justify-content: space-between; padding: 56rem 0rem; max-width: 900px; margin: 0 auto; } .bottom {height: 417rem; width: 100%; box-sizing: border-box; background-color: #39CD80; position: fixed; bottom: 0; left: 0; right: 0; } .macbook {position: relative; margin-top: -200rem; height: 446rem; }

第三步 App.vue

view,body,ul,li,div {display: block; margin: 0; padding: 0; } body {background: #FFFFFF; position: relative; } html {font-size: 0.5px; font-family: Source Han Sans SC; } a,a:hover,a:active,a:visited,a:link {text-decoration: none; color: unset; }