资料库

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

@@ -37,8 +37,12 @@ li{list-style:none}
     .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -178px 2px;}
     .document-list .list-item .list-item-top .main {width: 800px;height: 120px;float: left;}
     .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 20px;line-height: 40px;color: #E15616;text-align: left;}
-    .document-list .list-item .list-item-top .main p{font-weight: normal;font-size: 16px;line-height: 34px;color: #666666;text-align: left;}
-    .document-list .list-item .list-item-top .main p span{color: #E15616;cursor: pointer;}
+    .document-list .list-item .list-item-top .main .p{font-weight: normal;font-size: 16px;line-height: 34px;color: #666666;text-align: left;}
+    .document-list .list-item .list-item-top .main .p .label{display: inline-block;float: left;}
+    .document-list .list-item .list-item-top .main h1 span{margin-right: 5px;}
+    .document-list .list-item .list-item-top .main .p span{margin-right: 5px;}
+    .document-list .list-item .list-item-top .main .p .name{ float: left;margin-right:10px;font-weight: normal;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 .more{color: #E15616;cursor: pointer;}
     .document-list .list-item .list-item-bot{width: 100%;min-height: 1185px;padding: 20px 0;border-top: 1px solid #CFDBE2;float: left;margin-bottom: 120px;}
     iframe{width: 1160px !important;height: 1185px !important;}
     .document-footer{width: 100%;height: 120px;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
@@ -63,9 +67,9 @@ li{list-style:none}
     }
     .mIcon:before{transition:none;}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 4vw;}
-    .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 2vw;color: #ffffff;}
-    .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 10px;}
-    .wrap-header .search{width: 56.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 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 .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 img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
@@ -79,10 +83,13 @@ li{list-style:none}
     .document-list .list-item .list-item-top .icon{width: 24px;height: 24px;border-radius: 2px;background-color: #FFF5F1;position: absolute;bottom: 20px;right: 0;cursor: pointer;}
     .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 {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 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 span{color: #E15616;cursor: pointer;}
+    .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;}
+    .document-list .list-item .list-item-top .main span{margin-right: 1vw;}
+    .document-list .list-item .list-item-top .main .p .more{display: inline-block;float: left;color: #E15616;cursor: pointer;width: 15vw;height: 6.5vw;background-color: #FFF5F1;border-radius: 0.5vw;text-align: center;}
     .document-list .list-item .list-item-bot{width: 100%;min-height: 80vw;padding: 2vw 0;border-top: 1px solid #CFDBE2;float: left;}
     .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
     .wrap{color: #999999;font-size: 14px;line-height: 30px;}

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

@@ -67,9 +67,9 @@ li{list-style:none}
     }
     .mIcon:before{transition:none;}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 4vw;}
-    .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 2vw;color: #ffffff;}
-    .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 10px;}
-    .wrap-header .search{width: 56.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 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 .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 img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
@@ -86,13 +86,14 @@ li{list-style:none}
     .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 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-bot .pdf-li{width: 100%;height: 8vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
+    .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;}
+    .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:hover{color: #E15616;}
-    .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;}
+    .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;}
     .wrap{color: #999999;font-size: 14px;line-height: 30px;}
 

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

@@ -54,8 +54,8 @@ li{list-style:none}
     #loginPage{width: 100%;height: 100%;}
     #globalHead{width: 100%;position: fixed;top: 0;left: 0;z-index: 10000;}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 6vw;}
-    .wrap{width: 100%;height: 100%;line-height: 10vw;font-size: 2vw;color: #ffffff;}
-    .wrap .logo{width: 10vw;height: 8.8vw;margin-right: 10px;}
+    .wrap{width: 100%;height: 100%;line-height: 10vw;font-size: 4vw;color: #ffffff;}
+    .wrap .logo{width: 10vw;height: 8.8vw;margin-right: 1vw;}
     .loginForm .showPwd{display:none;}
     .login-contailer{width: 100%;min-height:100%;box-sizing: border-box;padding: 0 10vw;position: relative;padding-top: 17.8vw;}
     .login-image{width: 56.1vw;height: 50.1vw;margin: 0 auto;margin-top: 15vw;margin-bottom: 10vw;}
@@ -70,7 +70,7 @@ li{list-style:none}
     .formLine.code .code-btn.disabled{background: #EBEBEB;color: #999999;}
     .loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
     .loginForm .submit{line-height:11.2vw;font-size:3.4vw;text-align:center;color:#22272e;}
-    .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;border:solid 1px #b8bfca;border-radius:2px;margin-bottom:4.8vw}
+    .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;border-radius:2px;margin-bottom:4.8vw}
     .loginForm .submit .btn{background: linear-gradient(135deg, #F28F31 0%, #E15616 100%);color: #FFFFFF;}
     .loginForm .submit .weChat{display:block;margin:6vw auto;width:50vw;color:#627386;line-height:8vw}
     .loginForm .submit .weChat span{display:inline-block;width:100%}

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

@@ -66,9 +66,9 @@ li{list-style:none}
     }
     .mIcon:before{transition:none;}
     .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 4vw;}
-    .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 2vw;color: #ffffff;}
-    .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 10px;}
-    .wrap-header .search{width: 56.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 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 .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 img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
@@ -86,11 +86,11 @@ li{list-style:none}
     .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 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: 8vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
+    .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;}
+    .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:hover{color: #E15616;}
-    .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;}
+    .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;}
     .wrap{color: #999999;font-size: 14px;line-height: 30px;}
 

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

@@ -47,6 +47,9 @@ var documentList = new Vue({
         MoreDetails:function(){
             var _self = this;
             location.href = '/document/more-content.html?id='+_self.ossArchive.id;
+        },
+        goPathList:function(){
+            location.href = '/document/list.html';
         }
     }
 

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

@@ -31,6 +31,9 @@ var documentList = new Vue({
             }
             location.href = '/document/list.html?keyWord='+encodeURI(_self.keyWord);
         },
+        goPathList:function(){
+            location.href = '/document/list.html';
+        }
     },
     created: function () {
 

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

@@ -9,13 +9,13 @@
 </head>
 <body>
 <!-- 二级页面 -->
-<div id="documentList">
+<div id="documentList" v-cloak>
     <!-- 引用头部 -->
     <div>
         <div class="header document">
             <div class="wrap-header clear">
-                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台"/>
-                <span>采美资料库</span>
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台" @click="goPathList"/>
+                <span @click="goPathList">采美资料库</span>
                 <div class="search">
                     <input class="input"  v-model="keyWord" type="text" placeholder="请输入商品名/资料库名/资料名">
                     <div class="icon-search" @click="searchKeyWord">
@@ -34,9 +34,9 @@
                     <div class="list-item-top">
                         <div class="image"><img :src="ossArchive.mainImage" alt=""></div>
                         <div class="main">
-                            <h1>供应商:{{ ossArchive.shopName }}</h1>
-                            <p>商品名称:{{ ossArchive.productName }}</p>
-                            <p>资料库名称:{{ ossArchive.name }} <span @click="MoreDetails()">更多资料</span></p>
+                            <h1><span>供应商:</span>{{ ossArchive.shopName }}</h1>
+                            <div class="p"><span class="label">商品名称:</span>{{ ossArchive.productName }}</div>
+                            <div class="p"><span class="label">资料库名称: </span><p class="name"> {{ ossArchive.name }} </p><span @click="MoreDetails()" class="more">更多资料</span></div>
                         </div>
                     </div>
                     <div class="list-item-bot" >

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

@@ -8,7 +8,7 @@
 </head>
 <body>
 <!-- 二级页面 -->
-<div id="documentList">
+<div id="documentList" v-cloak>
     <!-- 引用头部 -->
     <div class="header-content">
         <div class="header document">
@@ -33,13 +33,13 @@
                     <div class="list-item-top">
                         <div class="image"><img :src="item.mainImage" alt=""></div>
                         <div class="main">
-                            <h1>供应商:{{ item.shopName }}</h1>
-                            <p>商品名称:{{ item.productName }}</p>
-                            <p>资料库名称:{{ item.name }}</p>
+                            <h1>供应商: <span>{{ item.shopName }}</span> </h1>
+                            <p>商品名称: <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-if="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="">

src/main/resources/templates/document/more-content.html

@@ -8,13 +8,13 @@
 </head>
 <body>
 <!-- 二级页面 -->
-<div id="documentList">
+<div id="documentList" v-cloak>
     <!-- 引用头部 -->
     <div>
         <div class="header document">
             <div class="wrap-header clear">
-                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台"/>
-                <span>采美资料库</span>
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台" @click="goPathList"/>
+                <span @click="goPathList">采美资料库</span>
                 <div class="search">
                     <input class="input" v-model="keyWord" type="text" placeholder="请输入商品名/资料库名/资料名">
                     <div class="icon-search" @click="searchKeyWord">