xcx

config/index.js

@@ -12,12 +12,16 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://192.168.0.11:8080', 
+        target: 'http://192.168.0.11', 
         changeOrigin: true,
         pathRewrite: {
-          '^/api': '/'
+          '^/api': '/api',
         },
       },
+      '/audio': {
+        target: 'http://192.168.0.11', 
+        changeOrigin: true
+      },
     },
 
     // Various Dev Server settings

src/assets/css/reset.css

@@ -1,48 +1,229 @@
 @charset"utf-8";
-html,body{width:100%;height:100%;width:100vw;height:100vh;-webkit-text-size-adjust:100%;position:relative;overflow-x:hidden;font-size:100px;}
-
-@media screen and(max-width:320px){html,body{font-size:85px;}}
-@media screen and(min-width:375px){html,body{font-size:100px;}}
-@media screen and(min-width:414px){html,body{font-size:110px;}}
-
-*{margin:0;padding:0;font-family:"微软雅黑";-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-font-smoothing:antialiased;}
-body *{font-size:.15rem;}
-a{text-decoration:none;}
-a:hover{cursor:pointer;}
-em{font-style:normal;}
-li{list-style:none;}
-img{border:0;vertical-align:middle;}
-table{border-collapse:collapse;border-spacing:0;}
-p{word-wrap:break-word;}
-b{font-weight:normal;}
-input,textarea{border:0;-webkit-appearance:none;}
-input[type=input]{-webkit-appearance:none;}
-input[type=checkbox]{-webkit-appearance:checkbox;}
-input:focus,textarea:focus,select:focus{outline:none;}
-textarea{resize:none;}
-select{direction:rtl;}
-select option{direction:ltr;}
-::-webkit-scrollbar{display:none;}
-
-.text-overflow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-.centerLabel{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
-.flex-h{display:flex;display:-webkit-flex;}
-.flex-v{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;}
-.flex-item{flex:1;-webkit-flex:1;position:relative;overflow:hidden;}
-*[class*="text-overflowEllipsis-line"]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;}
-.text-overflowEllipsis-line2{-webkit-line-clamp:2;}
-.text-overflowEllipsis-line3{-webkit-line-clamp:3;}
-.text-overflowEllipsis-line4{-webkit-line-clamp:4;}
-*[class*="overflow-scroll-y"]{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
-*[class*="overflow-scroll-x"]{overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:touch;}
-.overflow-scroll-y-3d,.overflow-scroll-x-3d{transform:translateZ(0);-webkit-transform:translateZ(0);}
-.overflow-scroll-x::-webkit-scrollbar,.overflow-scroll-x-3d::-webkit-scrollbar{width:0;height:0;color:transparent;display:none;}
-*>img.cover{width:100%;height:100%;object-fit:cover;}
-*>img.contain{width:100%;height:100%;object-fit:contain;}
-
-.mainPage{width:100%;height:100%;position:relative;background:#fff;}
-
-.van-toast div{color:white;}
-.van-toast i{color:white;}
-.van-dialog__message{text-align:center;}
-.van-dialog__message.van-dialog__message--has-title{text-align:center;}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  -webkit-text-size-adjust: 100%;
+  position: relative;
+  overflow-x: hidden;
+  font-size: 100px;
+}
+
+@media screen and(max-width:320px) {
+  html,
+  body {
+    font-size: 85px;
+  }
+}
+
+@media screen and(min-width:375px) {
+  html,
+  body {
+    font-size: 100px;
+  }
+}
+
+@media screen and(min-width:414px) {
+  html,
+  body {
+    font-size: 110px;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "微软雅黑";
+  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
+  -webkit-font-smoothing: antialiased;
+}
+
+body * {
+  font-size: .15rem;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+em {
+  font-style: normal;
+}
+
+li {
+  list-style: none;
+}
+
+img {
+  border: 0;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+p {
+  word-wrap: break-word;
+}
+
+b {
+  font-weight: normal;
+}
+
+input,
+textarea {
+  border: 0;
+  -webkit-appearance: none;
+}
+
+input[type=input] {
+  -webkit-appearance: none;
+}
+
+input[type=checkbox] {
+  -webkit-appearance: checkbox;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}
+
+textarea {
+  resize: none;
+}
+
+select {
+  direction: rtl;
+}
+
+select option {
+  direction: ltr;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.text-overflow-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.centerLabel {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.flex-v {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+}
+
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+*[class*="text-overflowEllipsis-line"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.text-overflowEllipsis-line2 {
+  -webkit-line-clamp: 2;
+}
+
+.text-overflowEllipsis-line3 {
+  -webkit-line-clamp: 3;
+}
+
+.text-overflowEllipsis-line4 {
+  -webkit-line-clamp: 4;
+}
+
+*[class*="overflow-scroll-y"] {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+*[class*="overflow-scroll-x"] {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.overflow-scroll-y-3d,
+.overflow-scroll-x-3d {
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+.overflow-scroll-x::-webkit-scrollbar,
+.overflow-scroll-x-3d::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
+
+*>img.cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+*>img.contain {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.mainPage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #fff;
+}
+
+.van-toast div {
+  color: white;
+}
+
+.van-toast i {
+  color: white;
+}
+
+.van-dialog__message {
+  text-align: center;
+}
+
+.van-dialog__message.van-dialog__message--has-title {
+  text-align: center;
+}

src/pages/page3.vue

@@ -44,7 +44,7 @@
         </div>
       </div>
       <div class="flex-item">
-        <div :hidden="!showSlide" v-if="pageDetail !== null">
+        <div :hidden="!!users.length" v-if="pageDetail !== null">
           <swiper :options="swiperOption" ref="mySwiper">
             <swiper-slide class="swiper-slide" v-for="(item, index) in pageDetail.content" :key="index">
               <img v-if="pageDetail.detail.contentType === 'image'" class="centerLabel" width="100%" height="100%" :src="item.content" alt>
@@ -54,10 +54,20 @@
             </swiper-slide>
           </swiper>
         </div>
-        <div :hidden="showSlide">
-          <ul class="centerLabel userList">
-            <!-- <userList></userList> -->
-          </ul>
+        <div :hidden="!users.length">
+          <transition-group class="centerLabel userList" tag="ul" name="fade">
+            <li v-for="(user, k) in users" :key="k" class="fade-item">
+              <span>{{user.name}}</span>
+              <span>{{user.words}}</span>
+            </li>
+          </transition-group>
+          <div v-if="audios.length > 0" :hidden="true">
+            <div v-for="(audio, k) in audios" :key="k">
+              <audio v-if="audio.isShow" @ended="audioEnd(k)">
+                <source :src="audio.url">
+              </audio>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -69,7 +79,6 @@ import { createNamespacedHelpers } from 'vuex'
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import solarLunar from 'solarLunar'
-import userList from '../components/userList'
 import XWebSocket from '../util/websocket'
 const { mapState: mapPageState, mapActions: mapPageActions, mapMutations: mapPageMutations } = createNamespacedHelpers('newIndex')
 export default {
@@ -77,23 +86,13 @@ export default {
   data () {
     return {
       ws: null,
-      userList: [{
-        firstName: '111',
-        gender: '1',
-        show: false
-      }, {
-        firstName: '111',
-        gender: '1',
-        show: false
-      }, {
-        firstName: '111',
-        gender: '1',
-        show: false
-      }],
+      users: [],
+      audios: [],
+      diffM: 5000,
       currentDate: '',
       currentWeek: '',
       currentChineseDate: '',
-      showSlide: true,
+      showSlide: false,
       currentTimeTamp: Date.now(),
       activeIndex: 0,
       timer: null,
@@ -133,10 +132,20 @@ export default {
   },
   components: {
     swiper,
-    swiperSlide,
-    userList
+    swiperSlide
   },
   created () {
+    const _that = this
+    window.setInterval(() => {
+      let dels = _that.users.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
+      dels.map(x => {
+        _that.users.splice(this.users.findIndex(i => i.createdata === x.createdata), 1)
+      })
+      let delaudios = _that.audios.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
+      delaudios.map(x => {
+        _that.audios.splice(this.audios.findIndex(i => i.createdata === x.createdata), 1)
+      })
+    }, 100)
     this.ws = new XWebSocket({
       message: this.receviedMsg.bind(this),
       delay: 10,
@@ -168,9 +177,40 @@ export default {
     ...mapPageMutations([
       'emptyPageDetail'
     ]),
+    newData (info) {
+      if (info.classId === '1' && this.users.filter(x => x.classId === '1').length > 0) {
+        this.users = this.users.map((x) => {
+          if (x.classId === '1') {
+            return { ...x, createdata: Date.parse(new Date()) }
+          } else {
+            return x
+          }
+        })
+      } else {
+        if (this.users.length >= 3) {
+          this.users.splice(0, 1)
+        }
+        this.users = [...this.users, { ...info, createdata: Date.parse(new Date()) }]
+        this.audios = [...this.audios, { ...info, isShow: true, createdata: Date.parse(new Date()) }]
+      }
+    },
+    audioEnd (index) {
+      let as = this.audios
+      this.audios = as.map((x, i) => {
+        if (i === index) {
+          x.isShow = false
+        }
+      })
+    },
     receviedMsg (e) {
       let res = JSON.parse(e.data)
       console.log(res)
+      this.newData({
+        name: !res.person.name ? '' : res.person.name,
+        classId: res.person.typeId,
+        words: res.taVisitingWords.words,
+        url: res.audio
+      })
     },
     init () { // 初始化
       this.emptyPageDetail()
@@ -275,6 +315,17 @@ export default {
   height: 100%;
   position: relative;
   overflow: hidden;
+  .fade-item {
+    transition: all 1s;
+    display: inline-block;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  .fade-leave-active {
+    position: absolute;
+  }
   .bg {
     z-index: 1;
   }
@@ -438,26 +489,18 @@ export default {
             background: rgba(255, 255, 255, 0.15);
             margin: 1.8vh auto 0;
             padding: 9vh 0;
-            transform: translateY(100vh);
-            -webkit-transform: translateY(100vh);
-            transition: all 0.3s linear;
-            -webkit-transition: all 0.3s linear;
             &:first-child {
               margin-top: 0;
             }
-            &.active {
-              transform: translateY(0);
-              -webkit-transform: translateY(0);
-            }
             span {
               width: 100%;
               display: block;
               color: #fff;
               text-align: center;
               line-height: 1.45;
-              font-size: 2.3vw;
+              font-size: 2.6vw;
               &:first-child {
-                font-size: 2.8vw;
+                font-size: 3.2vw;
                 line-height: 1.3;
               }
             }