资料库

src/main/resources/static/css/document/details.css

@@ -69,9 +69,9 @@ li{list-style:none}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 2vw;}
     .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 4vw;color: #ffffff;}
     .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 1vw;}
-    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;}
+    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;position: relative;}
     .wrap-header .search .input{width: 43.9vw;height: 10vw;line-height:10vw;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size:3vw;color: #ffffff;}
-    .wrap-header .search .icon-search{width:8vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;}
+    .wrap-header .search .icon-search{width:10vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;position: absolute;right: 0;top: 0;}
     .wrap-header .search .icon-search img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
     .document-content{width: 100%;min-height:100%;float: left;}
     .document-content .inner{width:100%;margin: 0 auto;}
@@ -84,7 +84,7 @@ li{list-style:none}
     .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -59vw 0;}
     .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -67vw 0;}
     .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 65vw;}
-    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main .p{width: 100%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main .p .label{display: inline-block;float: left;}
     .document-list .list-item .list-item-top .main .p .name{ float: left; width: 49%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}

src/main/resources/static/css/document/list.css

@@ -69,9 +69,9 @@ li{list-style:none}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 2vw;}
     .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size:4vw;color: #ffffff;}
     .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 1vw;}
-    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;}
+    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;position: relative;}
     .wrap-header .search .input{width: 43.9vw;height: 10vw;line-height:10vw;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size:3vw;color: #ffffff;}
-    .wrap-header .search .icon-search{width:8vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;}
+    .wrap-header .search .icon-search{width:10vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;position: absolute;right: 0;top: 0;}
     .wrap-header .search .icon-search img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
     .document-content{width: 100%;min-height:108vw;float: left;}
     .document-content .inner{width:100%;margin: 0 auto;}
@@ -83,15 +83,16 @@ li{list-style:none}
     .document-list .list-item .list-item-top .icon{width: 5.2vw;height:5.2vw;background-color: #FFF5F1;position: absolute;bottom: 4vw;right: 0;cursor: pointer;}
     .document-list .list-item .list-item-top .icon:before{width:5.2vw;height: 5.2vw;background: url("/img/document/icon-down.png");background-size: cover;}
     .document-list .list-item .list-item-top .icon.top:before{width:5.2vw;height: 5.2vw;background: url("/img/document/icon-up.png");background-size: cover;}
-    .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 56vw;}
-    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;}
+    .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 60vw;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main p{width: 100%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main span{margin-left: 1vw;}
     .document-list .list-item .list-item-bot{width: 100%;height: auto;padding: 2vw 0;border-top: 1px solid #CFDBE2;float: left;}
-    .document-list .list-item .list-item-bot.none{border-top: none;}
+    /*.document-list .list-item .list-item-top.none{border-bottom: 1px solid #CFDBE2;}*/
+    /*.document-list .list-item .list-item-bot.none{border-top: none;}*/
     .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 10vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
     .document-list .list-item .list-item-bot .pdf-li .img{width: 7vw;height:8vw;display: block;float: left;margin-top: 0;}
-    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 56vw;line-height: 5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 65vw;line-height: 5vw;}
     .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
     .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;line-height: 5vw;}
     .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}

src/main/resources/static/css/document/more-content.css

@@ -68,9 +68,9 @@ li{list-style:none}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 2vw;}
     .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 4vw;color: #ffffff;}
     .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right:  1vw;}
-    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;}
+    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;position: relative;}
     .wrap-header .search .input{width: 43.9vw;height: 10vw;line-height:10vw;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size:3vw;color: #ffffff;}
-    .wrap-header .search .icon-search{width:8vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;}
+    .wrap-header .search .icon-search{width:10vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;position: absolute;right: 0;top: 0;}
     .wrap-header .search .icon-search img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
     .document-content{width: 100%;min-height:108vw;float: left;}
     .document-content .inner{width:100%;margin: 0 auto;}
@@ -83,12 +83,12 @@ li{list-style:none}
     .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -59vw 0;}
     .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -67vw 0;}
     .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 56vw;}
-    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-top .main p{width: 100%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
     .document-list .list-item .list-item-bot{width: 100%;height: auto;padding: 2vw 0;border-top: 1px solid #CFDBE2;float: left;}
     .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 10vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
     .document-list .list-item .list-item-bot .pdf-li .img{width: 7vw;height:8vw;display: block;float: left;margin-top: 0;}
-    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 56vw;line-height: 5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 65vw;line-height: 5vw;}
     .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
     .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;line-height: 5vw;}
     .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}

src/main/resources/static/js/document/list.js

@@ -45,6 +45,16 @@ var documentList = new Vue({
         PdfDetails:function(id){//跳转
             location.href = '/document/details.html?id='+id;
         },
+        productDetails:function(id){//商品详情
+            if(id){
+                location.href = '/product-'+id+'.html';
+            }
+        },
+        supplierDetails:function(id){//供应商主页
+            if(id){
+                location.href = '/supplier/index.html?id='+id;
+            }
+        },
         keyupSearch: function(event) {
             // 搜索输入框 按回车键搜索
             var keyCode = event.keyCode || event.which;

src/main/resources/templates/document/list.html

@@ -30,16 +30,16 @@
         <div class="inner">
             <div class="document-list">
                 <div class="list-item" v-for="(item,index) in pdfDataList" :key="index">
-                    <div class="list-item-top">
-                        <div class="image"><img :src="item.mainImage" alt=""></div>
+                    <div class="list-item-top" :class="item.isShowDowns ? 'none' : ''">
+                        <div class="image" @click="productDetails(item.productId)"><img :src="item.mainImage" alt=""></div>
                         <div class="main">
-                            <h1>供应商: <span>{{ item.shopName }}</span> </h1>
-                            <p>商品名称: <span>{{ item.productName }}</span> </p>
+                            <h1 @click="supplierDetails(item.shopId)">供应商: <span>{{ item.shopName }}</span> </h1>
+                            <p @click="productDetails(item.productId)">商品名称: <span>{{ item.productName }}</span> </p>
                             <p>资料库名称: <span>{{ item.name }}</span> </p>
                         </div>
                         <i class="icon mIcon" v-if="item.pdfList.length>0.0" @click="showPdfList(item)" :class="item.isShowDowns ? 'top' : ''"></i>
                     </div>
-                    <div class="list-item-bot" v-if="item.isShowDowns" :class="item.isShowDowns ? '' : 'none'">
+                    <div class="list-item-bot" v-show="!item.isShowDowns" :class="item.isShowDowns ? 'none' : ''">
                         <div class="pdf-li" v-for="(pdf,idx) in item.pdfList" :key="idx" @click="PdfDetails(pdf.id)">
                             <img v-if="isPC" class="img" src="/img/document/pdf.png" alt="">
                             <img v-else class="img" src="/img/document/icon-pdfh5.png" alt="">