init: 项目搭建

.postcssrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  "plugins": {
+    "postcss-px-to-viewport": {
+      viewportWidth: 2560, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+      viewportHeight: 1440, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+      unitPrecision: 1, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false // 允许在媒体查询中转换`px`
+    },
+  }
+}

package-lock.json

@@ -0,0 +1,53 @@
+{
+  "name": "beibei-datav",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "nanoid": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.3.tgz",
+      "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.4.12",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz",
+      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.1",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    }
+  }
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
     "@vue/cli-service": "~5.0.0",
     "less": "^4.0.0",
     "less-loader": "^8.0.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/App.vue

@@ -1,32 +1,21 @@
 <template>
-  <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
-  </div>
+  <PageLayout />
 </template>
 
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+<script>
+import PageLayout from '@/layouts'
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+export default {
+  components: {
+    PageLayout
   }
 }
+</script>
+
+<style lang="less">
+html,body,[id$="-layout"] {
+  font-size: 50px;
+  margin: 0;
+  padding: 0;
+}
 </style>

src/assets/styles/config.less

@@ -0,0 +1 @@
+@namespace: bei-data-v;

src/assets/styles/global.less

@@ -0,0 +1,6 @@
+@import "config.less";
+
+@font-face {
+  font-family: DataFont;
+  src: url("@/assets/fonts/YouSheBiaoTiHei.ttf");
+}

src/components/ContainerBorder/index.js

@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils/component'
+import ContainerBorder from './index.vue'
+
+export default withInstall(ContainerBorder)

src/components/ContainerBorder/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :class="`${namespace}-container-border`">
+    <div class="title-box" :style="{ alignItems: pos }">
+      <span class="title">{{title}}</span>
+      <span class="h" v-if="subtitle">/</span>
+      <span class="subtitle" v-if="subtitle">{{subtitle}}</span>
+    </div>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ContainerBorder',
+  inject: ['namespace'],
+  props: {
+    title: {
+      type: String,
+      default: '容器标题'
+    },
+    subtitle: {
+      type: String
+    },
+    pos: {
+      type: String,
+      default: 'flex-end'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/styles/config.less";
+@title-color: #3be1ff;
+@subtitle-color: #93adb2;
+
+  .@{namespace}-container-border {
+    background: url("@/assets/images/container-border.png") no-repeat;
+    background-size: 513px  117px;
+    width: 513px;
+    min-height: 117px;
+    .title-box {
+      width: 513px;
+      height: 117px;
+      display: flex;
+      padding-left: 10px;
+      font-size: 30px;
+
+      .title {
+        color: @title-color;
+      }
+
+      .h {
+        color: @title-color;
+      }
+
+      .subtitle {
+        color: @subtitle-color;
+      }
+    }
+  }
+</style>

src/components/FloatPanel/index.js

@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils/component'
+import FloatPanel  from './index.vue'
+
+export default withInstall(FloatPanel)

src/components/FloatPanel/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="[`${namespace}-float-panel`, pos]">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FloatPanel',
+  inject: ['namespace'],
+  props: {
+    pos: {
+      type: 'left' | 'right',
+      default: 'left'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/styles/config.less";
+
+  .@{namespace}-float-panel {
+    position: absolute;
+    
+    .content {
+      margin-top: 49px;
+    }
+
+    &.left {
+      left: 56px;
+      
+      background: url("@/assets/images/float-panel-left.png") no-repeat;
+      background-size: 513px 49px;
+    }
+    &.right {
+      right: 56px; 
+      background: url("@/assets/images/float-panel-right.png") no-repeat;
+      background-size: 513px 49px;
+    }
+
+  }
+
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<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-router" target="_blank" rel="noopener">router</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>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/index.js

@@ -0,0 +1,8 @@
+import  ContainerBorder from './ContainerBorder'
+import  FloatPanel from './FloatPanel'
+
+
+export {
+  ContainerBorder,
+  FloatPanel
+}

src/layouts/default/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="default-layout">
+    <Header />
+    <router-view />
+  </div>
+</template>
+
+<script>
+import Header from './modules/Header.vue'
+export default {
+  name: 'DefaultLayout',
+  provide() {
+    return {
+      namespace: 'bei-data-v'
+    }
+  },
+  components: {
+    Header
+  }
+}
+</script>
+
+<style lang="less">
+#default-layout {
+  width: 100vw;
+  height: 100vh;
+  background-color: #0A153E;
+  background-image: url("@/assets/images/global-bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/layouts/default/modules/Header.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="`${namespace}-header`">
+    <img src="@/assets/logo.png" class="logo-image" alt="logo" />
+    <div class="title">
+      {{title}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['namespace'],
+  props: {
+    title: {
+      type: String,
+      default: '北碚区消防救援执勤动态',
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+  @import "@/assets/styles/config.less";
+
+  .@{namespace}-header {
+    height: 145px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .logo-image {
+      width: 68px;
+      height: 69px;
+    }
+
+    .title {
+      margin-top: 10px;
+      font-family: DataFont;
+      color: #fff;
+      font-size: 45px;
+    }
+  }
+</style>

src/layouts/index.js

@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils/component'
+import  DefaultLayout from './default/index.vue'
+
+export default withInstall(DefaultLayout)

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import '@/assets/styles/global.less'
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -1,22 +1,20 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Main from '@/views/main/index.vue'
+import Detail from '@/views/detail/index.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView
+    name: 'Main',
+    component: Main
   },
   {
-    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/AboutView.vue')
+    path: '/detail/:id',
+    name: 'Detail',
+    component: Detail
   }
 ]
 

src/utils/component.js

@@ -0,0 +1,6 @@
+export function withInstall(component) {  
+    component.install = function (app) {
+      app.component(component.name, component)
+    }
+    return component
+}

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<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: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/detail/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="detail">
+    详情页
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetailView',
+  components: {
+  }
+}
+</script>
+
+<style>
+</style>

src/views/main/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="main">
+    <FloatPanel pos="left">
+      <ContainerBorder pos="center" subtitle="子菜单">
+        111
+      </ContainerBorder>
+    </FloatPanel>
+  </div>
+</template>
+
+<script>
+import { ContainerBorder, FloatPanel } from '@/components'
+export default {
+  name: 'MainView',
+  components: {
+    ContainerBorder,
+    FloatPanel
+  }
+}
+</script>
+
+
+<style lang="less">
+</style>

yarn.lock

@@ -3835,7 +3835,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@^4.0.1:
+object-assign@>=4.0.1, object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -4288,6 +4288,14 @@ postcss-ordered-values@^5.1.1:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
+postcss-px-to-viewport@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz#a25ca410b553c9892cc8b525cc710da47bf1aa55"
+  integrity sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==
+  dependencies:
+    object-assign ">=4.0.1"
+    postcss ">=5.0.2"
+
 postcss-reduce-initial@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz#fc31659ea6e85c492fb2a7b545370c215822c5d6"
@@ -4331,15 +4339,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^7.0.36:
-  version "7.0.39"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.7:
+postcss@>=5.0.2, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.7:
   version "8.4.12"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
   integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
@@ -4348,6 +4348,14 @@ postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^7.0.36:
+  version "7.0.39"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
 "prettier@^1.18.2 || ^2.0.0":
   version "2.6.2"
   resolved "https://registry.npmmirror.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"