dianyang
/
colmo-h5
Watch 3
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

form

李志伟 3 years ago
parent
74ae52840a 2c609bec11
commit
f81734864e
34 changed files with 388 additions and 12235 deletions
Unified View Show Diff Stats
  1. BIN
      build/fourBoxes-image/1.jpg
  2. BIN
      build/fourBoxes-image/客厅.png
  3. BIN
      build/fourBoxes-image/浴室.png
  4. BIN
      build/fourBoxes-image/衣帽间.png
  5. BIN
      build/fourBoxes-image/阳台.png
  6. 4
    0
      build/webpack.base.conf.js
  7. 3
    3
      build/webpack.dev.conf.js
  8. BIN
      build/yushi-image/1.jpg
  9. BIN
      build/yushi-image/2.png
  10. BIN
      build/yushi-image/3.png
  11. BIN
      build/yushi-image/4.png
  12. 22
    10
      index.html
  13. 0
    12216
      package-lock.json
  14. 5
    1
      package.json
  15. 1
    1
      src/App.vue
  16. BIN
      src/assets/buttonImage/1即刻尊享.png
  17. BIN
      src/assets/buttonImage/2左滑.png
  18. BIN
      src/assets/buttonImage/3右滑.png
  19. BIN
      src/assets/buttonImage/4返回.png
  20. BIN
      src/assets/fourBoxes-2/客厅-2.png
  21. BIN
      src/assets/fourBoxes-2/浴室-2.png
  22. BIN
      src/assets/fourBoxes-2/衣帽间-2.png
  23. BIN
      src/assets/fourBoxes-2/阳台-2.png
  24. BIN
      src/assets/index/1.jpg
  25. BIN
      src/assets/index/点击开启.png
  26. 41
    0
      src/components/Swiper/index.vue
  27. 11
    0
      src/components/SwiperSlide/index.vue
  28. 13
    0
      src/layouts/index.vue
  29. 8
    0
      src/main.js
  30. 85
    0
      src/pages/AllPages.vue
  31. 55
    0
      src/pages/IndexImage.vue
  32. 75
    0
      src/pages/Test.vue
  33. 47
    2
      src/pages/index.vue
  34. 18
    2
      src/router/index.js

BIN
build/fourBoxes-image/1.jpg View File


BIN
build/fourBoxes-image/客厅.png View File


BIN
build/fourBoxes-image/浴室.png View File


BIN
build/fourBoxes-image/衣帽间.png View File


BIN
build/fourBoxes-image/阳台.png View File


+ 4
- 0
build/webpack.base.conf.js View File

46 
         loader: 'vue-loader',
 46 
         loader: 'vue-loader',
47 
         options: vueLoaderConfig
 47 
         options: vueLoaderConfig
48 
       },
 48 
       },
49 
+      {
50 
+        test: /\.scss$/,
51 
+        loaders: ['style', 'css', 'sass']
52 
+      },
49 
       {
 53 
       {
50 
         test: /\.js$/,
 54 
         test: /\.js$/,
51 
         loader: 'babel-loader',
 55 
         loader: 'babel-loader',

+ 3
- 3
build/webpack.dev.conf.js View File

82 
       // Add FriendlyErrorsPlugin
 82 
       // Add FriendlyErrorsPlugin
83 
       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
 83 
       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 
         compilationSuccessInfo: {
 84 
         compilationSuccessInfo: {
85 
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
85 
+          messages: [`本地: http://${devWebpackConfig.devServer.host}:${port}`, `终于整出来IP地址了: http://${require('ip').address()}:${port}`,],
86 
         },
 86 
         },
87 
         onErrors: config.dev.notifyOnErrors
 87 
         onErrors: config.dev.notifyOnErrors
88 
-        ? utils.createNotifierCallback()
89 
-        : undefined
88 
+          ? utils.createNotifierCallback()
89 
+          : undefined
90 
       }))
 90 
       }))
91
91
92 
       resolve(devWebpackConfig)
 92 
       resolve(devWebpackConfig)

BIN
build/yushi-image/1.jpg View File


BIN
build/yushi-image/2.png View File


BIN
build/yushi-image/3.png View File


BIN
build/yushi-image/4.png View File


+ 22
- 10
index.html View File

1 
 <!DOCTYPE html>
 1 
 <!DOCTYPE html>
2 
 <html>
 2 
 <html>
3 
-  <head>
4 
-    <meta charset="utf-8">
5 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 
-    <title>cpmloh5</title>
7 
-  </head>
8 
-  <body>
9 
-    <div id="app"></div>
10 
-    <!-- built files will be auto injected -->
11 
-  </body>
12 
-</html>
3 
+
4 
+<head>
5 
+  <meta charset="utf-8">
6 
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
+  <title>cpmloh5</title>
8 
+
9 
+</head>
10 
+
11 
+<body>
12 
+  <style>
13 
+    html,
14 
+    body {
15 
+      margin: 0;
16 
+      padding: 0;
17 
+      background-color: black;
18 
+    }
19 
+  </style>
20 
+  <div id="app"></div>
21 
+  <!-- built files will be auto injected -->
22 
+</body>
23 
+
24 
+</html>

+ 0
- 12216
package-lock.json
File diff suppressed because it is too large
View File


+ 5
- 1
package.json View File

5 
   "author": "Baozhangchao <3257874327@qq.com>",
 5 
   "author": "Baozhangchao <3257874327@qq.com>",
6 
   "private": true,
 6 
   "private": true,
7 
   "scripts": {
 7 
   "scripts": {
8 
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
8 
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
9 
     "start": "npm run dev",
 9 
     "start": "npm run dev",
10 
     "lint": "eslint --ext .js,.vue src",
 10 
     "lint": "eslint --ext .js,.vue src",
11 
     "build": "node build/build.js"
 11 
     "build": "node build/build.js"
44 
     "postcss-loader": "^2.0.8",
 44 
     "postcss-loader": "^2.0.8",
45 
     "postcss-url": "^7.2.1",
 45 
     "postcss-url": "^7.2.1",
46 
     "rimraf": "^2.6.0",
 46 
     "rimraf": "^2.6.0",
47 
+    "sass": "^1.49.7",
48 
+    "sass-loader": "^7.3.1",
47 
     "semver": "^5.3.0",
 49 
     "semver": "^5.3.0",
48 
     "shelljs": "^0.7.6",
 50 
     "shelljs": "^0.7.6",
51 
+    "style-loader": "^3.3.1",
52 
+    "swiper": "^8.0.5",
49 
     "uglifyjs-webpack-plugin": "^1.1.1",
 53 
     "uglifyjs-webpack-plugin": "^1.1.1",
50 
     "url-loader": "^0.5.8",
 54 
     "url-loader": "^0.5.8",
51 
     "vue-loader": "^13.3.0",
 55 
     "vue-loader": "^13.3.0",

+ 1
- 1
src/App.vue View File

10 
 }
 10 
 }
11 
 </script>
 11 
 </script>
12
12
13 
-<style>
13 
+<style lang="scss" scoped>
14 
 </style>
 14 
 </style>

BIN
src/assets/buttonImage/1即刻尊享.png View File


BIN
src/assets/buttonImage/2左滑.png View File


BIN
src/assets/buttonImage/3右滑.png View File


BIN
src/assets/buttonImage/4返回.png View File


BIN
src/assets/fourBoxes-2/客厅-2.png View File


BIN
src/assets/fourBoxes-2/浴室-2.png View File


BIN
src/assets/fourBoxes-2/衣帽间-2.png View File


BIN
src/assets/fourBoxes-2/阳台-2.png View File


BIN
src/assets/index/1.jpg View File


BIN
src/assets/index/点击开启.png View File


+ 41
- 0
src/components/Swiper/index.vue View File

1 
+<template>
2 
+  <div class="swiper-container">
3 
+    <div class="swiper-wrapper">
4 
+      <slot></slot>
5 
+    </div>
6 
+  </div>
7 
+</template>
8 
+
9 
+<script>
10 
+import Swiper from 'swiper'
11 
+// import SwiperCore, { Autoplay, Pagination } from 'swiper/core'
12 
+
13 
+// SwiperCore.use([Autoplay, Pagination])
14 
+
15 
+export default {
16 
+  name: 'Swiper',
17 
+  props: {
18 
+    options: {
19 
+      type: Object,
20 
+      default: () => ({})
21 
+    }
22 
+  },
23 
+  data() {
24 
+    return {
25 
+      swiper: undefined
26 
+    }
27 
+  },
28 
+  mounted() {
29 
+    this.$nextTick(() => {
30 
+      this.swiper = new Swiper(this.$el, this.options)
31 
+    })
32 
+  }
33 
+}
34 
+</script>
35 
+
36 
+<style>
37 
+.swiper-container {
38 
+  width: 100%;
39 
+  height: 100%;
40 
+}
41 
+</style>

+ 11
- 0
src/components/SwiperSlide/index.vue View File

1 
+<template>
2 
+  <div class="swiper-slide">
3 
+    <slot></slot>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+</script>
9 
+
10 
+<style>
11 
+</style>

+ 13
- 0
src/layouts/index.vue View File

1 
+<template>
2 
+  <router-view></router-view>
3 
+</template>
4 
+
5 
+<script>
6 
+
7 
+export default {
8 
+  name: 'AppLayout',
9 
+  data() {
10 
+    return {}
11 
+  }
12 
+}
13 
+</script>

+ 8
- 0
src/main.js View File

2 
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 2 
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 
 import Vue from 'vue'
 3 
 import Vue from 'vue'
4 
 import App from './App'
 4 
 import App from './App'
5 
+import 'regenerator-runtime/runtime'
6 
+import 'swiper/swiper-bundle.css'
7 
+
5 
 import router from './router'
 8 
 import router from './router'
9 
+import Swiper from './components/Swiper'
10 
+import SwiperSlide from './components/SwiperSlide'
11 
+
6 
 Vue.config.productionTip = false
 12 
 Vue.config.productionTip = false
13 
+Vue.component('swiper', Swiper)
14 
+Vue.component('swiper-slide', SwiperSlide)
7 
 /* eslint-disable no-new */
 15 
 /* eslint-disable no-new */
8 
 new Vue({
 16 
 new Vue({
9 
   el: '#app',
 17 
   el: '#app',

+ 85
- 0
src/pages/AllPages.vue View File

1 
+<template>
2 
+  <div class="index-box">
3 
+    <img src="../../build/fourBoxes-image/1.jpg" class="bg-image" />
4 
+    <div class="index-FourBoxes">
5 
+      <div class="index-FourBoxes-yushi test" @click="goYuShi">
6 
+        <img src="../../build/fourBoxes-image/浴室.png" class="Four-image" />
7 
+        <div style=" width: 108px; position: absolute; left: 10.8vw; top: 35vh;">
8 
+          <img style=" width:100%;" src="../assets/fourBoxes-2/浴室-2.png" />
9 
+        </div>
10 
+      </div>
11 
+      <div class="index-FourBoxes-yimao test">
12 
+        <img src="../../build/fourBoxes-image/衣帽间.png" class="Four-image" />
13 
+        <div style=" width: 108px; position: absolute; left: 59.8vw; top: 35vh;">
14 
+          <img style=" width:100%;" src="../assets/fourBoxes-2/衣帽间-2.png" />
15 
+        </div>
16 
+      </div>
17 
+      <div class="index-FourBoxes-keting test">
18 
+        <img src="../../build/fourBoxes-image/客厅.png" class="Four-image" />
19 
+        <div style=" width: 108px; position: absolute; left: 10.8vw; top: 77vh;">
20 
+          <img style=" width:100%;" src="../assets/fourBoxes-2/客厅-2.png" />
21 
+        </div>
22 
+      </div>
23 
+      <div class="index-FourBoxes-yangtai test">
24 
+        <img src="../../build/fourBoxes-image/阳台.png" class="Four-image" />
25 
+        <div style=" width: 108px; position: absolute; left: 59.8vw; top: 77vh;">
26 
+          <img style=" width:100%;" src="../assets/fourBoxes-2/阳台-2.png" />
27 
+        </div>
28 
+      </div>
29 
+    </div>
30 
+  </div>
31 
+</template>
32 
+
33 
+<script>
34 
+export default {
35 
+  methods: {
36 
+    goYuShi() {
37 
+      this.$router.push({ name: 'Test' })
38 
+    }
39 
+  }
40 
+}
41 
+</script>
42 
+
43 
+<style lang="scss" scoped>
44 
+.index-box {
45 
+  width: 100vw;
46 
+  height: 100vh;
47 
+  display: flex;
48 
+  // justify-content: center;
49 
+  .bg-image {
50 
+    width: 100%;
51 
+    position: absolute;
52 
+  }
53 
+  .index-FourBoxes {
54 
+    position: relative;
55 
+    top: 16vh;
56 
+    // border: 1px solid #fff;
57 
+    width: 98%;
58 
+    height: 84%;
59 
+    margin: 0 auto;
60 
+    display: flex;
61 
+    flex-wrap: wrap;
62 
+    align-items: center;
63 
+    justify-content: center;
64 
+    .test {
65 
+      float: left;
66 
+      width: 48%;
67 
+      height: 49%;
68 
+      // border: 1px solid red;
69 
+      .Four-image {
70 
+        width: 100%;
71 
+        height: 100%;
72 
+      }
73 
+    }
74 
+    &-yushi,
75 
+    &-keting {
76 
+      margin-right: 4px;
77 
+    }
78 
+    &-yimao,
79 
+    &-yangtai {
80 
+      margin-left: 4px;
81 
+    }
82 
+  }
83 
+}
84 
+</style>
85 
+

+ 55
- 0
src/pages/IndexImage.vue View File

1 
+<template>
2 
+  <div class="index-image">
3 
+    <!-- <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" /> -->
4 
+    <div class="index-inner-swiper">
5 
+      <swiper :options="swiperOptions">
6 
+        <swiper-slide class="index-inner-slide">
7 
+          <img src="../../build/yushi-image/2.png" />
8 
+        </swiper-slide>
9 
+
10 
+        <swiper-slide class="index-inner-slide">
11 
+          <img src="../../build/yushi-image/3.png" />
12 
+        </swiper-slide>
13 
+
14 
+        <swiper-slide class="index-inner-slide">
15 
+          <img src="../../build/yushi-image/4.png" />
16 
+        </swiper-slide>
17 
+        <swiper-slide class="index-inner-slide">
18 
+          <img src="../../build/yushi-image/4.png" />
19 
+        </swiper-slide>
20 
+      </swiper>
21 
+    </div>
22 
+  </div>
23 
+</template>
24 
+
25 
+<script>
26 
+export default {
27 
+  name: 'IndexImage',
28 
+  data() {
29 
+    return {
30 
+      swiperOptions: {
31 
+        autoplay: {
32 
+          delay: 100
33 
+        }
34 
+      }
35 
+    }
36 
+  }
37 
+}
38 
+</script>
39 
+
40 
+<style lang="scss" scoped>
41 
+.index-image {
42 
+  .index-inner-swiper {
43 
+    width: 100vw;
44 
+    .index-inner-slide {
45 
+      position: relative;
46 
+      left: -11vw;
47 
+    }
48 
+
49 
+    img {
50 
+      width: 100%;
51 
+      height: 100%;
52 
+    }
53 
+  }
54 
+}
55 
+</style>

+ 75
- 0
src/pages/Test.vue View File

1 
+<template>
2 
+  <div class="index-box">
3 
+    <img src="../../build/yushi-image/1.jpg" class="bg-image" />
4 
+    <!-- 透明返回按钮 -->
5 
+    <div style=" position: absolute;width: 55px;height: 52px;" @click="$router.go(-1)"></div>
6 
+    <!-- 透明返回按钮 -->
7 
+    <div class="body-swiper">
8 
+      <!-- 左滑动 -->
9 
+      <div class="body-swiper-left">
10 
+        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/2左滑.png" />
11 
+      </div>
12 
+
13 
+      <!-- swiper -->
14 
+      <div class="body-swiper-middle">
15 
+        <index-image></index-image>
16 
+      </div>
17 
+      <!-- swiper -->
18 
+
19 
+      <!-- 右滑动 -->
20 
+      <div class="body-swiper-right">
21 
+        <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
22 
+      </div>
23 
+      <div class="button-img">
24 
+        <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
25 
+      </div>
26 
+    </div>
27 
+  </div>
28 
+</template>
29 
+
30 
+<script>
31 
+export default {
32 
+  components: {
33 
+    IndexImage: () => import('./IndexImage.vue')
34 
+  }
35 
+}
36 
+</script>
37 
+
38 
+<style lang="scss" scoped>
39 
+.index-box {
40 
+  width: 100vw;
41 
+  height: 100vh;
42 
+  display: flex;
43 
+  // justify-content: center;
44 
+  .bg-image {
45 
+    width: 100%;
46 
+    position: absolute;
47 
+  }
48 
+  .body-swiper {
49 
+    display: none;
50 
+    position: relative;
51 
+    width: 100%;
52 
+    top: 49vh;
53 
+    height: 45vh;
54 
+    display: flex;
55 
+    &-left,
56 
+    &-right {
57 
+      display: flex;
58 
+      align-items: center;
59 
+      margin: 0 auto;
60 
+      height: 40vh;
61 
+      z-index: 2;
62 
+    }
63 
+    &-middle {
64 
+      width: 84%;
65 
+      overflow: hidden;
66 
+    }
67 
+    .button-img {
68 
+      width: 40%;
69 
+      position: absolute;
70 
+      bottom: -5vh;
71 
+      left: 29vw;
72 
+    }
73 
+  }
74 
+}
75 
+</style>

+ 47
- 2
src/pages/index.vue View File

1 
 <template>
 1 
 <template>
2 
-<div></div>
2 
+  <div>
3 
+    <div class="index-image">
4 
+      <img src="../assets/index/1.jpg" class="bg-image" />
5 
+      <div class="bth-div" @click="$router.push({ name: 'AllPages' })">
6 
+        <img src="../assets/index/点击开启.png" class="bth-image" />
7 
+      </div>
8 
+    </div>
9 
+  </div>
3 
 </template>
 10 
 </template>
11 
+
4 
 <script>
 12 
 <script>
13 
+export default {
14 
+  methods: {
15 
+    goPages() {}
16 
+  }
17 
+}
5 
 </script>
 18 
 </script>
6 
-<style>
19 
+
20 
+<style lang="scss" scoped>
21 
+.index-image {
22 
+  background-color: black;
23 
+
24 
+  // background-color: #1d429d;
25 
+  width: 100vw;
26 
+  height: 100vh;
27 
+  display: flex;
28 
+  align-items: center;
29 
+  overflow: hidden;
30 
+
31 
+  .bg-image {
32 
+    width: 100%;
33 
+    height: 100%;
34 
+  }
35 
+  .bth-div {
36 
+    position: absolute;
37 
+    width: 184px;
38 
+    height: 49px;
39 
+    bottom: 18vh;
40 
+    /* margin: 0 auto; */
41 
+    /* justify-content: center; */
42 
+    /* margin: 0 auto; */
43 
+    display: flex;
44 
+    left: 28vw;
45 
+    align-items: center;
46 
+    .bth-image {
47 
+      width: 100%;
48 
+      height: 100%;
49 
+    }
50 
+  }
51 
+}
7 
 </style>
 52 
 </style>

+ 18
- 2
src/router/index.js View File

1 
 import Vue from 'vue'
 1 
 import Vue from 'vue'
2 
 import Router from 'vue-router'
 2 
 import Router from 'vue-router'
3 
+<<<<<<< HEAD
3 
 import HelloWorld from '@/components/HelloWorld'
 4 
 import HelloWorld from '@/components/HelloWorld'
4 
 import SignUp from '@/components/signup'
 5 
 import SignUp from '@/components/signup'
6 
+=======
7 
+import ColmoIndex from '@/pages'
8 
+import AllPages from '@/pages/AllPages'
9 
+import Test from '@/pages/Test'
10 
+>>>>>>> 2c609bec11ebd93370c950ce842904c31d6c2e0d
5
11
6 
 Vue.use(Router)
 12 
 Vue.use(Router)
7
13
9 
   routes: [
 15 
   routes: [
10 
     {
 16 
     {
11 
       path: '/',
 17 
       path: '/',
12 
-      name: 'HelloWorld',
13 
-      component: HelloWorld
18 
+      name: 'ColmoIndex',
19 
+      component: ColmoIndex
20 
+    },
21 
+    {
22 
+      path: '/pages',
23 
+      name: 'AllPages',
24 
+      component: AllPages
25 
+    },
26 
+    {
27 
+      path: '/pages',
28 
+      name: 'Test',
29 
+      component: Test
14 
     },
 30 
     },
15 
     //报名页
 31 
     //报名页
16 
     {
 32 
     {