up

backstage/src/pages/content/collection/componets/audio.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="30" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/collection/componets/img.vue

@@ -4,7 +4,7 @@
       <el-input
        class="goodNameInput"
         v-model="form.name"
-        :maxlength="INPUTLENGTH * 5"
+        :maxlength="30"
         show-word-limit
       ></el-input>
     </el-form-item>

backstage/src/pages/content/collection/componets/model.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="30" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

backstage/src/pages/content/collection/componets/video.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width:50%;">
     <el-form-item label="藏品名称：" prop="name">
-      <el-input class="goodNameInput" v-model="form.name" :maxlength="INPUTLENGTH*5" show-word-limit></el-input>
+      <el-input class="goodNameInput" v-model="form.name" :maxlength="30" show-word-limit></el-input>
     </el-form-item>
 
     <el-form-item label="藏品类型：">

code/src/assets/css/reset.css

@@ -407,4 +407,10 @@ body {
     color: #333333;
     font-size: 18px;
     margin-top: 8px;
+}
+
+.goodBotInfo {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

code/src/components/Audio.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="audiocon">
-    <audio id="audioTag" class="noshow" autoplay :src="'http://gdbwg.4dage.com'+adata.filePath"></audio>
+    <audio
+      id="audioTag"
+      class="noshow"
+      autoplay
+      :src="'http://gdbwg.4dage.com' + adata.filePath"
+    ></audio>
     <div class="audiotop">
       <div class="img-con">
-        <span>{{ adata.name }}</span>
-        <p>{{ adata.description }}</p>
+        <div class="videoTxtInfo">
+          <span>{{ adata.name }}</span>
+          <p>{{ adata.description }}</p>
+        </div>
+
         <!-- <img :src="require('@/assets/images/proj2022/icon/voice.png')" alt="" /> -->
       </div>
     </div>
@@ -15,18 +23,25 @@
           <div :style="{ width: currentPosi + '%' }" class="dot"></div>
         </div>
         <div class="time">
-          <span>{{ time }}</span><span> / {{ allTime }}</span>
+          <span>{{ time }}</span
+          ><span> / {{ allTime }}</span>
         </div>
       </div>
 
       <div class="bofang">
         <!-- <img :src="require(`@/assets/images/icon/voice_back.png`)" alt=""> -->
-        <img class="bf" @click="bofang" :src="require(`@/assets/images/icon/${isPlay ? 'voice_stop' : 'voice_play'}.png`)"
-          alt="" />
+        <img
+          class="bf"
+          @click="bofang"
+          :src="
+            require(`@/assets/images/icon/${
+              isPlay ? 'voice_stop' : 'voice_play'
+            }.png`)
+          "
+          alt=""
+        />
         <!-- <img :src="require(`@/assets/images/icon/voice_next.png`)" alt=""> -->
-
       </div>
-
     </div>
   </div>
 </template>
@@ -72,7 +87,8 @@ export default {
       return minute + isM0 + sec;
     },
     updateProgress() {
-      this.currentPosi = (this.i_audio.currentTime / this.i_audio.duration) * 100;
+      this.currentPosi =
+        (this.i_audio.currentTime / this.i_audio.duration) * 100;
       this.time = this.transTime(this.i_audio.currentTime);
     },
 
@@ -139,18 +155,21 @@ export default {
     .img-con {
       align-items: center;
       margin: 20px 0;
-      >span {
-        font-size: 22px;
-        font-weight: bold;
-      }
+      .videoTxtInfo {
+        > span {
+          font-size: 22px;
+          font-weight: bold;
+        }
 
-      >p {
-        margin-top: 12px;
-        color: #D9D9D9;
+        > p {
+          word-break: break-all;
+          margin-top: 12px;
+          color: #d9d9d9;
+        }
       }
     }
 
-    >img {
+    > img {
       width: 18px;
       cursor: pointer;
     }
@@ -161,7 +180,6 @@ export default {
     height: 33%;
     margin: 0 auto;
     padding-left: 13px;
-  
 
     .barcon {
       display: flex;
@@ -184,7 +202,7 @@ export default {
           height: 100%;
           overflow: hidden;
           position: absolute;
-          background: #EBEBEB;
+          background: #ebebeb;
           top: 50%;
           transform: translateY(-50%);
           border-radius: 12px;
@@ -195,7 +213,7 @@ export default {
           display: inline-block;
           position: absolute;
           z-index: 999;
-          background-color: #B61E22;
+          background-color: #b61e22;
           transform: translateY(-50%);
           top: 50%;
           left: 0;
@@ -203,28 +221,27 @@ export default {
           height: 100%;
           cursor: pointer;
           pointer-events: none;
-          &::after{
+          &::after {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             right: -20px;
             border-radius: 50%;
-            content: '';
+            content: "";
             width: 40px;
             height: 40px;
-            background: #EECC63;
-            border: 5px solid #B61E22;
+            background: #eecc63;
+            border: 5px solid #b61e22;
           }
         }
       }
 
-
       .time {
         width: 100px;
         text-align: center;
         margin: 0 auto;
 
-        >span {
+        > span {
           font-size: 12px;
 
           &:first-of-type {
@@ -238,20 +255,20 @@ export default {
       }
     }
 
-    .bofang{
+    .bofang {
       justify-content: center;
       width: 100%;
       display: flex;
       text-align: center;
       align-items: center;
       margin-top: 20px;
-      >img{
+      > img {
         width: 60px;
         height: 60px;
         margin: 0 20px;
         cursor: pointer;
       }
-      .bf{
+      .bf {
         width: 80px;
         height: 80px;
       }
@@ -268,109 +285,107 @@ export default {
 }
 
 @media screen and (max-width: 1000px) {
-  .audiocon{
+  .audiocon {
     width: 100%;
     .audiobtm {
-    width: 100%;
-    height: 33%;
-    margin: 0 auto;
-    padding-left: 13px;
-  
-
-    .barcon {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
       width: 100%;
-      margin: 20px 0;
-      .bar {
-        position: relative;
-        background: none;
-        display: flex;
-        overflow: visible;
-        height: 14px;
-        border-radius: 4px;
-        margin: 0 10px 0 16px;
-        flex: auto;
-
-        .activeLine {
-          cursor: pointer;
-          height: 100%;
-          overflow: hidden;
-          position: absolute;
-          background: #EBEBEB;
-          top: 50%;
-          transform: translateY(-50%);
-          border-radius: 12px;
-          width: 100%;
-        }
+      height: 33%;
+      margin: 0 auto;
+      padding-left: 13px;
 
-        .dot {
-          display: inline-block;
-          position: absolute;
-          z-index: 999;
-          background-color: #B61E22;
-          transform: translateY(-50%);
-          top: 50%;
-          left: 0;
-          border-radius: 12px;
-          height: 100%;
-          cursor: pointer;
-          pointer-events: none;
-          &::after{
+      .barcon {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin: 20px 0;
+        .bar {
+          position: relative;
+          background: none;
+          display: flex;
+          overflow: visible;
+          height: 14px;
+          border-radius: 4px;
+          margin: 0 10px 0 16px;
+          flex: auto;
+
+          .activeLine {
+            cursor: pointer;
+            height: 100%;
+            overflow: hidden;
             position: absolute;
+            background: #ebebeb;
             top: 50%;
             transform: translateY(-50%);
-            right: -20px;
-            border-radius: 50%;
-            content: '';
-            width: 40px;
-            height: 40px;
-            background: #EECC63;
-            border: 5px solid #B61E22;
+            border-radius: 12px;
+            width: 100%;
           }
-        }
-      }
 
+          .dot {
+            display: inline-block;
+            position: absolute;
+            z-index: 999;
+            background-color: #b61e22;
+            transform: translateY(-50%);
+            top: 50%;
+            left: 0;
+            border-radius: 12px;
+            height: 100%;
+            cursor: pointer;
+            pointer-events: none;
+            &::after {
+              position: absolute;
+              top: 50%;
+              transform: translateY(-50%);
+              right: -20px;
+              border-radius: 50%;
+              content: "";
+              width: 40px;
+              height: 40px;
+              background: #eecc63;
+              border: 5px solid #b61e22;
+            }
+          }
+        }
 
-      .time {
-        width: 100px;
-        text-align: center;
-        margin: 0 auto;
+        .time {
+          width: 100px;
+          text-align: center;
+          margin: 0 auto;
 
-        >span {
-          font-size: 12px;
+          > span {
+            font-size: 12px;
 
-          &:first-of-type {
-            color: #fff;
-          }
+            &:first-of-type {
+              color: #fff;
+            }
 
-          &:last-of-type {
-            color: #fff;
+            &:last-of-type {
+              color: #fff;
+            }
           }
         }
       }
-    }
 
-    .bofang{
-      justify-content: center;
-      width: 100%;
-      display: flex;
-      text-align: center;
-      align-items: center;
-      margin-top: 20px;
-      >img{
-        width: 40px;
-        height: 40px;
-        margin: 0 20px;
-        cursor: pointer;
-      }
-      .bf{
-        width: 60px;
-        height: 60px;
+      .bofang {
+        justify-content: center;
+        width: 100%;
+        display: flex;
+        text-align: center;
+        align-items: center;
+        margin-top: 20px;
+        > img {
+          width: 40px;
+          height: 40px;
+          margin: 0 20px;
+          cursor: pointer;
+        }
+        .bf {
+          width: 60px;
+          height: 60px;
+        }
       }
     }
   }
-  }
 }
 </style>

code/src/components/showCollection/index.vue

@@ -1,37 +1,45 @@
 <template>
   <div class="wrapper">
-    <showCollection @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollection>
+    <showCollection
+      @hideSlide="
+        (data) => {
+          showSidebar = data;
+        }
+      "
+      class="ui-broadcast"
+      :item="cItem"
+    ></showCollection>
   </div>
 </template>
 <script>
-import showCollection from './showCollection'
+import showCollection from "./showCollection";
 import { getDetailById } from "@/config/api";
 
 export default {
-  props: ['item'],
+  props: ["item"],
   components: {
-    showCollection
+    showCollection,
   },
   data() {
     return {
       cItem: { ...this.item },
-      showSidebar: false
+      showSidebar: false,
     };
   },
   methods: {
     handleItem(data) {
-      this.cItem = data
+      this.cItem = data;
     },
     getCollectionDetail() {
       getDetailById("goods", { id: this.cItem.id }, (res) => {
         console.log(res.data);
-        this.cItem = res.data
+        this.cItem = res.data;
       });
-    }
+    },
   },
   mounted() {
-    this.getCollectionDetail()
-  }
+    this.getCollectionDetail();
+  },
 };
 </script>
 
@@ -46,11 +54,11 @@ export default {
   .ui-broadcast {
     width: 100%;
     height: 100%;
-    position: fixed;
+    position: absolute;
     z-index: 99999;
     top: 0;
     left: 0;
-    background: rgba(48, 48, 48, 0.8);
+    background: linear-gradient(#595959, #8A8A8A);
   }
 }
 </style>

code/src/components/showCollection/showCollection.vue

@@ -8,6 +8,11 @@
       />
 
       <template v-if="cItem.entity.type == 'img'">
+        <div class="imgTxtInfo">
+          <h3>{{ cItem.entity.name }}</h3>
+          <p>{{ cItem.entity.description }}</p>
+        </div>
+
         <div class="swcon swiper-container" id="imglist">
           <ul class="swiper-wrapper">
             <li
@@ -17,19 +22,21 @@
             >
               <div class="sl-item">
                 <img :src="sub.filePath" />
-                <p>{{ cItem.entity.name }}</p>
               </div>
             </li>
           </ul>
         </div>
         <template v-if="cItem.file.length > 1">
           <img
+            :class="{ noneAc: active === 0 }"
             class="vpagination left"
             :src="require('@/assets/images/icon/left.png')"
             @click="slide('slidePrev')"
             alt=""
           />
           <img
+            v-if="cItem && cItem.file"
+            :class="{ noneAc: active === cItem.file.length - 1 }"
             class="vpagination right"
             :src="require('@/assets/images/icon/right.png')"
             @click="slide('slideNext')"
@@ -48,7 +55,7 @@
       <template v-else>
         <iframe
           v-if="cItem.entity.type == 'model'"
-          :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
+          :src="`/model.html?m=${cItem.entity.filePath}`"
           frameborder="0"
         ></iframe>
         <video
@@ -63,9 +70,17 @@
         ></video>
 
         <vAudio v-else :adata="cItem.entity"></vAudio>
-        <p v-if="cItem.entity.type != 'audio'" class="btmname">
-          {{ cItem.entity.name }}
-        </p>
+        <div
+          v-if="cItem.entity.type != 'audio'"
+          class="txtInfo"
+          :class="{ videoInfo: cItem.entity.type == 'video' }"
+        >
+          <h3 class="btmname">
+            {{ cItem.entity.name }}
+          </h3>
+          <div v-if="cItem.entity.type != 'video'">{{cItem.entity.ageName}}&emsp;{{cItem.entity.textureName}}</div>
+          <p>{{ cItem.entity.description }}</p>
+        </div>
       </template>
     </div>
   </div>
@@ -131,6 +146,59 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.noneAc {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.videoInfo {
+  top: auto !important;
+  width: 80% !important;
+  padding: 0 20px;
+  position: absolute;
+  color: #fff;
+  transform: translateX(-50%);
+  left: 50% !important;
+  bottom: 10px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  h3 {
+    max-width: 30%;
+    word-break: break-all;
+    margin-right: 3%;
+  }
+  p {
+    margin-top: 0 !important;
+    max-width: 65%;
+    word-break: break-all;
+  }
+}
+.imgTxtInfo {
+  top: auto !important;
+  width: 80% !important;
+  padding: 0 20px;
+  position: absolute;
+  color: #fff;
+  transform: translateX(-50%);
+  left: 50% !important;
+  bottom: 40px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  h3 {
+    max-width: 30%;
+    word-break: break-all;
+    margin-right: 3%;
+  }
+  p {
+    margin-top: 0 !important;
+    max-width: 65%;
+    word-break: break-all;
+  }
+}
+
 .img-body {
   width: 100%;
   height: 100%;
@@ -152,13 +220,24 @@ export default {
     width: 50%;
     height: 20%;
   }
-
-  .btmname {
-    transform: translateX(-50%);
-    bottom: 30px;
-    left: 50%;
+  .txtInfo {
     position: absolute;
-    font-size: 24px;
+    top: 50px;
+    left: 60px;
+    width: 240px;
+    &>div{
+      margin-top: 15px;
+      font-size: 16px;
+    }
+    .btmname {
+      word-break: break-all;
+      font-size: 24px;
+    }
+    p {
+      margin-top: 15px;
+      word-break: break-all;
+      font-size: 14px;
+    }
   }
 
   .close {
@@ -172,8 +251,9 @@ export default {
 
   .swcon {
     position: relative;
-    width: 40%;
+    width: 60%;
     height: 100%;
+    cursor: grab;
 
     .swiper-wrapper {
       padding: 0;
@@ -194,22 +274,13 @@ export default {
 
           > img {
             width: auto;
-            max-height: 90vh;
+            max-height: 80%;
             max-width: 100%;
-            cursor: pointer;
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-          }
-
-          > p {
-            color: #fff;
-            position: absolute;
-            bottom: 30px;
-            transform: translateX(-50%);
-            left: 50%;
-            font-size: 24px;
+            object-fit: cover;
           }
         }
       }
@@ -228,12 +299,12 @@ export default {
       width: 10px;
       border-radius: 50%;
       height: 10px;
-      background: rgba(51, 143, 123, 0.24);
+      background: rgba(0, 0, 0, 0.3);
       display: inline-block;
       margin: 0 4px;
 
       &.active {
-        background: #338f7b;
+        background: #fff;
       }
     }
   }
@@ -327,14 +398,6 @@ export default {
       height: 20%;
     }
 
-    .btmname {
-      transform: translateX(-50%);
-      bottom: 30px;
-      left: 50%;
-      position: absolute;
-      font-size: 24px;
-    }
-
     .close {
       position: absolute;
       right: 20px;

code/src/views/collection/index.vue

@@ -75,7 +75,7 @@
           <div class="itemimg">
             <div :style="`background-image:url(${item.thumb})`"></div>
           </div>
-          <p>{{ item.name }}</p>
+          <p class="goodBotInfo">{{ item.name }}</p>
         </div>
       </div>
 

code/src/views/collection/mobile.vue

@@ -18,7 +18,7 @@
           <div class="itemimg">
             <div :style="`background-image:url(${item.thumb})`"></div>
           </div>
-          <p>{{ item.name }}</p>
+          <p class="goodBotInfo">{{ item.name }}</p>
         </div>
       </div>
     </div>

code/src/views/exhibition/exhibition/collections.vue

@@ -74,7 +74,7 @@
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
 

code/src/views/exhibition/exhibition/mobile/collections.vue

@@ -16,7 +16,7 @@
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
   </div>

code/src/views/gdmuseum/exhibition/collections.vue

@@ -64,7 +64,7 @@
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
     <div class="searNone" v-else>

code/src/views/gdmuseum/exhibition/mobile/collections.vue

@@ -16,7 +16,7 @@
         <div class="itemimg">
           <div :style="`background-image:url(${item.thumb})`"></div>
         </div>
-        <p>{{ item.name }}</p>
+        <p class="goodBotInfo">{{ item.name }}</p>
       </div>
     </div>
   </div>