welcome
/
screen
Volgen 0
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 1 Activiteit
Bladeren bron

add feats

张延森 6 jaren geleden
bovenliggende
fcf3b31c55
commit
53038511d9
4 gewijzigde bestanden met toevoegingen van 926 en 890 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 15
    15
      index.html
  2. 294
    282
      src/pages/page1.vue
  3. 607
    593
      src/pages/page2.vue
  4. 10
    0
      static/vconsole.min.js

+ 15
- 15
index.html Bestand weergeven 

@@ -1,15 +1,15 @@
1 
-<!DOCTYPE html>
2 
-<html>
3 
-  <head>
4 
-    <meta charset="utf-8">
5 
-    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
6 
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_948990_7dbjfb2d5yb.css">
7 
-    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.3.0"></script>
8 
-    <script>new VConsole();</script>
9 
-    <title>迎宾系统</title>
10 
-  </head>
11 
-  <body>
12 
-    <div id="app"></div>
13 
-    <!-- built files will be auto injected -->
14 
-  </body>
15 
-</html>
1 
+<!DOCTYPE html>
2 
+<html>
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
6 
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_948990_7dbjfb2d5yb.css">
7 
+    <script src="./static/vconsole.min.js?v=3.3.0"></script>
8 
+    <script> var __vcl__111 = new VConsole();</script>
9 
+    <title>迎宾系统</title>
10 
+  </head>
11 
+  <body>
12 
+    <div id="app"></div>
13 
+    <!-- built files will be auto injected -->
14 
+  </body>
15 
+</html>

+ 294
- 282
src/pages/page1.vue Bestand weergeven 

@@ -1,282 +1,294 @@
1 
-<template>
2 
-  <div class="projectIndex">
3 
-    <img src="../assets/images/bg.jpg" class="centerLabel cover bg" alt>
4 
-    <div class="content flex-h">
5 
-      <div class="flex-item">
6 
-        <div :hidden="!showSlide">
7 
-          <swiper :options="swiperOption" ref="mySwiper" class="hj-swiper">
8 
-            <swiper-slide class="swiper-slide" v-for="(item, index) in showPage" :key="index">
9 
-              <img
10 
-                v-if="item.showType === 'image'"
11 
-                class="centerLabel"
12 
-                width="100%"
13 
-                :src="'api' + item.showContent"
14 
-                alt
15 
-              >
16 
-              <video v-if="item.showType === 'video'" width="100%" height="100%" id="hj-vdo" autoplay muted>
17 
-                <source :src="'api' + item.showContent" type="video/mp4" />
18 
-              </video>
19 
-            </swiper-slide>
20 
-          </swiper>
21 
-        </div>
22 
-        <div :hidden="showSlide">
23 
-          <ul class="centerLabel userList">
24 
-            <li v-for="(item, index) in userList" :key="index" :class="{'active': item.show}">
25 
-              <span>{{item.firstName}}</span>
26 
-              <span>{{item.words}}</span>
27 
-            </li>
28 
-          </ul>
29 
-        </div>
30 
-      </div>
31 
-    </div>
32 
-  </div>
33 
-</template>
34 
-
35 
-<script>
36 
-import { createNamespacedHelpers } from 'vuex'
37 
-import 'swiper/dist/css/swiper.css'
38 
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
39 
-// import videojs from 'video.js'
40 
-
41 
-const { mapActions: mapUserActions } = createNamespacedHelpers('user')
42 
-
43 
-const { mapState: mapPageState, mapActions: mapPageActions } = createNamespacedHelpers('page')
44 
-
45 
-const { mapState: mapNewsState, mapActions: mapNewsActions } = createNamespacedHelpers('news')
46 
-export default {
47 
-  name: 'projectIndex',
48 
-  data () {
49 
-    return {
50 
-      userList: [{
51 
-        firstName: '111',
52 
-        gender: '1',
53 
-        show: false
54 
-      }, {
55 
-        firstName: '111',
56 
-        gender: '1',
57 
-        show: false
58 
-      }, {
59 
-        firstName: '111',
60 
-        gender: '1',
61 
-        show: false
62 
-      }],
63 
-      showSlide: true,
64 
-      currentTimeTamp: Date.now(),
65 
-      activeIndex: 0,
66 
-      timer: null,
67 
-      timeNum: 0,
68 
-      swiperOption: {
69 
-        speed: 1000,
70 
-        autoplay: {
71 
-          delay: 6000,
72 
-          disableOnInteraction: false
73 
-        }
74 
-      },
75 
-      num: 1
76 
-    }
77 
-  },
78 
-  computed: {
79 
-    ...mapPageState({
80 
-      pages: x => x.pages
81 
-    }),
82 
-    ...mapNewsState({
83 
-      news: x => x.news
84 
-    }),
85 
-    showNew () {
86 
-      return ((this.news.data || {}).records || []).filter(x => x.status === 1)[0] || {}
87 
-    },
88 
-    showPage () {
89 
-      return ((this.pages.data || {}).records || []).filter(x => x.status === 1) || []
90 
-    },
91 
-    mySwiper () {
92 
-      return this.$refs.mySwiper.swiper
93 
-    }
94 
-  },
95 
-  components: {
96 
-    swiper,
97 
-    swiperSlide
98 
-  },
99 
-  created () {
100 
-    this.init()
101 
-    window.setInterval(() => {
102 
-      this.init()
103 
-    }, 1000)
104 
-    this.getInitData()
105 
-    window.setInterval(() => {
106 
-      this.getInitData()
107 
-    }, 1000 * 60 * 60)
108 
-    this.getPersonList()
109 
-  },
110 
-  updated () {
111 
-    this.$nextTick(() => {
112 
-      const vdo = window.document.getElementById('hj-vdo')
113 
-      if (vdo) {
114 
-        vdo.play()
115 
-      }
116 
-      // videojs('hj-vdo', {
117 
-      //   controls: false,
118 
-      //   autoplay: true,
119 
-      //   loop: true,
120 
-      //   muted: true,
121 
-      //   preload: 'auto'
122 
-      // })
123 
-      // const t = window.setInterval(() => {
124 
-      //   if (this.$refs.vdo) {
125 
-      //     this.$refs.vdo.play()
126 
-      //     window.clearInterval(t)
127 
-      //   }
128 
-      // }, 2000)
129 
-
130 
-      // setTimeout(() => {
131 
-      //   window.clearInterval(t)
132 
-      // }, 60000)
133 
-    })
134 
-  },
135 
-  methods: {
136 
-    ...mapUserActions([
137 
-      'getPersonB'
138 
-    ]),
139 
-    ...mapPageActions([
140 
-      'getPagesList'
141 
-    ]),
142 
-    ...mapNewsActions([
143 
-      'getNewsList'
144 
-    ]),
145 
-    returnUserList (item) { // 返回用户信息
146 
-      this.showSlide = false
147 
-      window.clearInterval(this.timer)
148 
-      this.timeNum = 0
149 
-      window.setTimeout(() => {
150 
-        item.show = true
151 
-      }, 100)
152 
-      if (this.userList.length > 2) {
153 
-        this.userList.splice(0, 1)
154 
-        this.userList.push(item)
155 
-      } else {
156 
-        this.userList.push(item)
157 
-      }
158 
-      this.timer = window.setInterval(() => {
159 
-        if (this.timeNum - 0 >= 5000) {
160 
-          this.timeNum = 0
161 
-          window.clearInterval(this.timer)
162 
-          this.showSlide = true
163 
-          this.userList = []
164 
-        } else {
165 
-          this.timeNum += 100
166 
-        }
167 
-      }, 100)
168 
-    },
169 
-    videoLoad (e) {
170 
-      e.target.play()
171 
-    },
172 
-    init () { // 初始化
173 
-      if (!new Date().getMinutes()) { // 整点更新时间
174 
-        this.currentTimeTamp = Date.now()
175 
-      }
176 
-    },
177 
-    getInitData () {
178 
-      this.getPagesList({
179 
-        pageNum: 1,
180 
-        pageSize: 100
181 
-      })
182 
-      this.getNewsList({
183 
-        pageNum: 1,
184 
-        pageSize: 100
185 
-      })
186 
-    },
187 
-    getPersonList () {
188 
-      this.getPersonB().then(res => {
189 
-        if (res && res.isShow) {
190 
-          const sex = res.sex === '1' ? '先生' : '女士'
191 
-          const wds = (res.words || '').replace('{{name}}', res.personName).replace('{{sex}}', sex)
192 
-
193 
-          this.returnUserList({
194 
-            firstName: (res.classId || res.classId === 1) ? '' : res.personName,
195 
-            words: wds,
196 
-            show: false,
197 
-            audio: `http://ycapi.jcjyhn.com/welcome-api/?t=${wds}`
198 
-          })
199 
-        }
200 
-        this.getPersonList()
201 
-      }).catch(r => {
202 
-        setTimeout(() => {
203 
-          this.getPersonList()
204 
-        }, 1000)
205 
-      })
206 
-    }
207 
-  }
208 
-}
209 
-</script>
210 
-
211 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
212 
-<style lang="scss" scoped>
213 
-.projectIndex {
214 
-  width: 100%;
215 
-  height: 100%;
216 
-  position: relative;
217 
-  overflow: hidden;
218 
-  .bg {
219 
-    z-index: 1;
220 
-  }
221 
-  > div {
222 
-    width: 100%;
223 
-    height: 100%;
224 
-    z-index: 2;
225 
-    position: relative;
226 
-    overflow: hidden;
227 
-    > .flex-item {
228 
-      height: 100%;
229 
-      position: relative;
230 
-
231 
-      > div {
232 
-        width: 100%;
233 
-        height: 100%;
234 
-        position: relative;
235 
-        overflow: hidden;
236 
-        border-radius: 6px;
237 
-        .userList {
238 
-          width: calc(100% - 80px);
239 
-          overflow: hidden;
240 
-          transition: all 0.3s linear;
241 
-          -webkit-transition: all 0.3s linear;
242 
-          text-align: center;
243 
-          font-size: 0;
244 
-          > li {
245 
-            width: 0;
246 
-            display: inline-block;
247 
-            margin-left: 40px;
248 
-            position: relative;
249 
-            overflow: hidden;
250 
-            background: rgba(255, 255, 255, 0.15);
251 
-            padding: 9vh 0;
252 
-            transition: all 0.3s linear;
253 
-            -webkit-transition: all 0.3s linear;
254 
-            &:first-child {
255 
-              margin-left: 0;
256 
-            }
257 
-            &.active {
258 
-              width: calc((100% - 80PX) / 3);
259 
-            }
260 
-            span {
261 
-              width: 100%;
262 
-              display: block;
263 
-              color: #fff;
264 
-              text-align: center;
265 
-              line-height: 1.45;
266 
-              font-size: 2.3vw;
267 
-              &:first-child {
268 
-                font-size: 2.8vw;
269 
-                line-height: 1.3;
270 
-              }
271 
-            }
272 
-          }
273 
-        }
274 
-      }
275 
-
276 
-      .hj-swiper {
277 
-        height: 100%;
278 
-      }
279 
-    }
280 
-  }
281 
-}
282 
-</style>
1 
+<template>
2 
+  <div class="projectIndex">
3 
+    <img src="../assets/images/bg.jpg" class="centerLabel cover bg" alt>
4 
+    <div class="content flex-h">
5 
+      <div class="flex-item">
6 
+        <div :hidden="!showSlide">
7 
+          <swiper :options="swiperOption" ref="mySwiper" class="hj-swiper">
8 
+            <swiper-slide class="swiper-slide" v-for="(item, index) in showPage" :key="index">
9 
+              <img
10 
+                v-if="item.showType === 'image'"
11 
+                class="centerLabel"
12 
+                width="100%"
13 
+                :src="'api' + item.showContent"
14 
+                alt
15 
+              >
16 
+              <video v-if="item.showType === 'video'" width="100%" height="100%" id="hj-vdo" autoplay muted loop>
17 
+                <source :src="'api' + item.showContent" type="video/mp4" />
18 
+              </video>
19 
+            </swiper-slide>
20 
+          </swiper>
21 
+        </div>
22 
+        <div :hidden="showSlide">
23 
+          <ul class="centerLabel userList">
24 
+            <li v-for="(item, index) in userList" :key="index" :class="{'active': item.show}">
25 
+              <span>{{item.firstName}}</span>
26 
+              <span>{{item.words}}</span>
27 
+            </li>
28 
+          </ul>
29 
+        </div>
30 
+      </div>
31 
+    </div>
32 
+  </div>
33 
+</template>
34 
+
35 
+<script>
36 
+import { createNamespacedHelpers } from 'vuex'
37 
+import 'swiper/dist/css/swiper.css'
38 
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
39 
+// import videojs from 'video.js'
40 
+
41 
+const { mapActions: mapUserActions } = createNamespacedHelpers('user')
42 
+
43 
+const { mapState: mapPageState, mapActions: mapPageActions } = createNamespacedHelpers('page')
44 
+
45 
+const { mapState: mapNewsState, mapActions: mapNewsActions } = createNamespacedHelpers('news')
46 
+export default {
47 
+  name: 'projectIndex',
48 
+  data () {
49 
+    return {
50 
+      userList: [{
51 
+        firstName: '111',
52 
+        gender: '1',
53 
+        show: false
54 
+      }, {
55 
+        firstName: '111',
56 
+        gender: '1',
57 
+        show: false
58 
+      }, {
59 
+        firstName: '111',
60 
+        gender: '1',
61 
+        show: false
62 
+      }],
63 
+      showSlide: true,
64 
+      currentTimeTamp: Date.now(),
65 
+      activeIndex: 0,
66 
+      timer: null,
67 
+      timeNum: 0,
68 
+      swiperOption: {
69 
+        speed: 1000,
70 
+        autoplay: {
71 
+          delay: 6000,
72 
+          disableOnInteraction: false
73 
+        }
74 
+      },
75 
+      num: 1,
76 
+      personDelay: null
77 
+    }
78 
+  },
79 
+  computed: {
80 
+    ...mapPageState({
81 
+      pages: x => x.pages
82 
+    }),
83 
+    ...mapNewsState({
84 
+      news: x => x.news
85 
+    }),
86 
+    showNew () {
87 
+      return ((this.news.data || {}).records || []).filter(x => x.status === 1)[0] || {}
88 
+    },
89 
+    showPage () {
90 
+      return ((this.pages.data || {}).records || []).filter(x => x.status === 1) || []
91 
+    },
92 
+    mySwiper () {
93 
+      return this.$refs.mySwiper.swiper
94 
+    }
95 
+  },
96 
+  components: {
97 
+    swiper,
98 
+    swiperSlide
99 
+  },
100 
+  created () {
101 
+    this.init()
102 
+    window.setInterval(() => {
103 
+      this.init()
104 
+    }, 1000)
105 
+    this.getInitData()
106 
+    window.setInterval(() => {
107 
+      this.getInitData()
108 
+    }, 1000 * 60 * 60)
109 
+    this.getPersonList()
110 
+  },
111 
+  updated () {
112 
+    this.$nextTick(() => {
113 
+      const vdo = window.document.getElementById('hj-vdo')
114 
+      if (vdo) {
115 
+        vdo.play()
116 
+      }
117 
+      // videojs('hj-vdo', {
118 
+      //   controls: false,
119 
+      //   autoplay: true,
120 
+      //   loop: true,
121 
+      //   muted: true,
122 
+      //   preload: 'auto'
123 
+      // })
124 
+      // const t = window.setInterval(() => {
125 
+      //   if (this.$refs.vdo) {
126 
+      //     this.$refs.vdo.play()
127 
+      //     window.clearInterval(t)
128 
+      //   }
129 
+      // }, 2000)
130 
+
131 
+      // setTimeout(() => {
132 
+      //   window.clearInterval(t)
133 
+      // }, 60000)
134 
+    })
135 
+  },
136 
+  methods: {
137 
+    ...mapUserActions([
138 
+      'getPersonB'
139 
+    ]),
140 
+    ...mapPageActions([
141 
+      'getPagesList'
142 
+    ]),
143 
+    ...mapNewsActions([
144 
+      'getNewsList'
145 
+    ]),
146 
+    returnUserList (item) { // 返回用户信息
147 
+      this.showSlide = false
148 
+      window.clearInterval(this.timer)
149 
+      this.timeNum = 0
150 
+      window.setTimeout(() => {
151 
+        item.show = true
152 
+      }, 100)
153 
+      if (this.userList.length > 2) {
154 
+        this.userList.splice(0, 1)
155 
+        this.userList.push(item)
156 
+      } else {
157 
+        this.userList.push(item)
158 
+      }
159 
+      this.timer = window.setInterval(() => {
160 
+        if (this.timeNum - 0 >= 5000) {
161 
+          this.timeNum = 0
162 
+          window.clearInterval(this.timer)
163 
+          this.showSlide = true
164 
+          this.userList = []
165 
+        } else {
166 
+          this.timeNum += 100
167 
+        }
168 
+      }, 100)
169 
+    },
170 
+    videoLoad (e) {
171 
+      e.target.play()
172 
+    },
173 
+    init () { // 初始化
174 
+      if (!new Date().getMinutes()) { // 整点更新时间
175 
+        this.currentTimeTamp = Date.now()
176 
+      }
177 
+    },
178 
+    getInitData () {
179 
+      this.getPagesList({
180 
+        pageNum: 1,
181 
+        pageSize: 100
182 
+      })
183 
+      this.getNewsList({
184 
+        pageNum: 1,
185 
+        pageSize: 100
186 
+      })
187 
+    },
188 
+    getPersonList () {
189 
+      this.getPersonB().then(res => {
190 
+        if (res && res.isShow) {
191 
+          const sex = res.sex === '1' ? '先生' : '女士'
192 
+          const wds = (res.words || '').replace('{{name}}', res.personName).replace('{{sex}}', sex)
193 
+
194 
+          this.returnUserList({
195 
+            firstName: (res.classId || res.classId === 1) ? '' : res.personName,
196 
+            words: wds,
197 
+            show: false,
198 
+            audio: `http://ycapi.jcjyhn.com/welcome-api/?t=${wds}`
199 
+          })
200 
+        }
201 
+
202 
+        if (this.personDelay) {
203 
+          window.clearTimeout(this.personDelay)
204 
+        }
205 
+
206 
+        this.personDelay = setTimeout(() => {
207 
+          this.getPersonList()
208 
+        }, 500)
209 
+      }).catch(r => {
210 
+        if (this.personDelay) {
211 
+          window.clearTimeout(this.personDelay)
212 
+        }
213 
+
214 
+        this.personDelay = setTimeout(() => {
215 
+          this.getPersonList()
216 
+        }, 30000)
217 
+      })
218 
+    }
219 
+  }
220 
+}
221 
+</script>
222 
+
223 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
224 
+<style lang="scss" scoped>
225 
+.projectIndex {
226 
+  width: 100%;
227 
+  height: 100%;
228 
+  position: relative;
229 
+  overflow: hidden;
230 
+  .bg {
231 
+    z-index: 1;
232 
+  }
233 
+  > div {
234 
+    width: 100%;
235 
+    height: 100%;
236 
+    z-index: 2;
237 
+    position: relative;
238 
+    overflow: hidden;
239 
+    > .flex-item {
240 
+      height: 100%;
241 
+      position: relative;
242 
+
243 
+      > div {
244 
+        width: 100%;
245 
+        height: 100%;
246 
+        position: relative;
247 
+        overflow: hidden;
248 
+        border-radius: 6px;
249 
+        .userList {
250 
+          width: calc(100% - 80px);
251 
+          overflow: hidden;
252 
+          transition: all 0.3s linear;
253 
+          -webkit-transition: all 0.3s linear;
254 
+          text-align: center;
255 
+          font-size: 0;
256 
+          > li {
257 
+            width: 0;
258 
+            display: inline-block;
259 
+            margin-left: 40px;
260 
+            position: relative;
261 
+            overflow: hidden;
262 
+            background: rgba(255, 255, 255, 0.15);
263 
+            padding: 9vh 0;
264 
+            transition: all 0.3s linear;
265 
+            -webkit-transition: all 0.3s linear;
266 
+            &:first-child {
267 
+              margin-left: 0;
268 
+            }
269 
+            &.active {
270 
+              width: calc((100% - 80PX) / 3);
271 
+            }
272 
+            span {
273 
+              width: 100%;
274 
+              display: block;
275 
+              color: #fff;
276 
+              text-align: center;
277 
+              line-height: 1.45;
278 
+              font-size: 2.3vw;
279 
+              &:first-child {
280 
+                font-size: 2.8vw;
281 
+                line-height: 1.3;
282 
+              }
283 
+            }
284 
+          }
285 
+        }
286 
+      }
287 
+
288 
+      .hj-swiper {
289 
+        height: 100%;
290 
+      }
291 
+    }
292 
+  }
293 
+}
294 
+</style>

+ 607
- 593
src/pages/page2.vue
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 10
- 0
static/vconsole.min.js
Diff onderdrukt omdat het te groot bestand
Bestand weergeven