ホーム エクスプローラ ヘルプ
サインイン
caimei365
/
caimei365-www
3
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

采美百科上测试

喻文俊 3 年 前
親
70882668cc
コミット
a686af2278
5 ファイル変更、23 行追加、4 行削除
分割表示 差分情報を表示
  1. 2 2
      src/main/resources/static/css/encyclopedia/common.css
  2. 2 0
      src/main/resources/static/css/encyclopedia/detail.css
  3. 15 2
      src/main/resources/static/js/encyclopedia/detail.js
  4. 2 0
      src/main/resources/templates/encyclopedia/instrument-detail.html
  5. 2 0
      src/main/resources/templates/encyclopedia/product-detail.html

+ 2 - 2
src/main/resources/static/css/encyclopedia/common.css
ファイルの表示 

@@ -8,7 +8,7 @@
 
 .flex-between-center,.navbar .nav li a,.navbar .nav,.navbar .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 
 .container{width:1200px;margin:0 auto}
 
 body{padding-top:80px;min-height: 100vh;}
 
-.navbar{width:100%;background:#fff;position:fixed;top:0;left:0;z-index:99999;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);box-shadow:0 0 5px rgba(0,0,0,0.1)}
 
+.navbar{width:100%;background:#fff;position:fixed;top:0;left:0;z-index:99998;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);box-shadow:0 0 5px rgba(0,0,0,0.1)}
 
 .navbar .logo{width:136px;height:56px;overflow:hidden}
 
 .navbar .logo .menu-btn{display:none}
 
 .navbar .logo h1{font-size:0;margin:0}
 
@@ -56,7 +56,7 @@ body{padding-top:80px;min-height: 100vh;}
 
 .icon.arrowleft{background-position:-42vw 0;-webkit-transform:rotateZ(-90deg);-ms-transform:rotate(-90deg);transform:rotateZ(-90deg)}
 
 .clearfix::after{content:"";display:block;width:0;clear:both}
 
 body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:29.5vw}
 
-.navbar{position:fixed;top:0;z-index:99999;width:100vw;height:29.5vw;background-color:#fff}
 
+.navbar{position:fixed;top:0;z-index:99998;width:100vw;height:29.5vw;background-color:#fff}
 
 .navbar .nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;left:0;z-index:99999;height:100vh;width:100vw;background:rgba(0,0,0,0.7);-webkit-box-sizing:border-box;box-sizing:border-box;display:none}
 
 .navbar .nav li{width:70.2vw;height:12.8vw;line-height:12.8vw;text-align:center;border-top:1px solid rgba(255,255,255,0.4)}
 
 .navbar .nav li.active a{color:#e15616}

+ 2 - 0
src/main/resources/static/css/encyclopedia/detail.css
ファイルの表示 

@@ -1,4 +1,6 @@
 
 @charset "UTF-8";
 
+.viewer-container{z-index: 99999 !important}
 
+img{cursor: pointer;}
 
 @media screen and (min-width:768px){
 
 .flex-between-center,.article .section.description .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 
 .container,.article{width:1200px;margin:0 auto}

+ 15 - 2
src/main/resources/static/js/encyclopedia/detail.js
ファイルの表示 

@@ -1,5 +1,16 @@
 
 "use strict";
 
 
+function initPreviewImage() {
 
+    var imageGroup = {};
 
+    var imageEls = document.querySelectorAll('.content');
 
+    if (imageEls.length <= 0) return;
 
+    imageEls.forEach(function (imageEl, index) {
 
+        console.log(imageEl);
 
+        imageGroup['cm-images-' + index] = new Viewer(imageEl);
 
+    });
 
+    console.log('初始化图片预览成功')
 
+}
 
+
 
 $(function () {
 
     // 页面滚动偏移
 
     var offset = 0;
 
@@ -40,10 +51,11 @@ $(function () {
 
     $('#contactPopupClose').on('click', function () {
 
         $('#contactPopup').hide();
 
     });
 
+
 
     // 切换显示侧边导航
 
     function toggleNavigate(selector, time, maxWidth, offset) {
 
         selector = $(selector);
 
-        if(windowWidth <= middleScreenWidth){
 
+        if (windowWidth <= middleScreenWidth) {
 
             selector.hide();
 
         }
 
         // 鼠标移动事件
 
@@ -60,10 +72,11 @@ $(function () {
 
         $(window).resize(function () {
 
             if ($(this).width() <= maxWidth) {
 
                 selector.hide();
 
-            }else{
 
+            } else {
 
                 selector.show();
 
             }
 
         });
 
     }
 
+    initPreviewImage()
 
     // toggleNavigate('.navigate', 1000, middleScreenWidth, 80);
 
 });

+ 2 - 0
src/main/resources/templates/encyclopedia/instrument-detail.html
ファイルの表示 

@@ -12,6 +12,7 @@
 
     <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
 
     <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
 
     <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}"/>
 
+    <link rel="stylesheet" type="text/css" href="/lib/css/viewer.min.css">
 
 </head>
 
 <body>
 
 <!-- 引用公共头部 -->
 
@@ -215,6 +216,7 @@
 
 
 <!-- 引用公共底部 -->
 
 <template th:replace="encyclopedia/components/footer"></template>
 
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
 
 <script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>
 
 </body>
 
 </html>

+ 2 - 0
src/main/resources/templates/encyclopedia/product-detail.html
ファイルの表示 

@@ -12,6 +12,7 @@
 
     <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
 
     <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
 
     <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}"/>
 
+    <link rel="stylesheet" type="text/css" href="/lib/css/viewer.min.css">
 
 </head>
 
 <body>
 
 <!-- 引用公共头部 -->
 
@@ -196,6 +197,7 @@
 
 </div>
 
 <!-- 引用公共底部 -->
 
 <template th:replace="encyclopedia/components/footer"></template>
 
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
 
 <script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>
 
 </body>
 
 </html>