Explorar o código

二维码扫码界面调整

qymljy hai 2 meses
pai
achega
6a22de30c0
Modificáronse 4 ficheiros con 207 adicións e 41 borrados
  1. 71 41
      public/codeToFile.html
  2. 136 0
      public/codeToFileCopy.html
  3. BIN=BIN
      public/img/datum.png
  4. BIN=BIN
      public/img/logo.png

+ 71 - 41
public/codeToFile.html

@@ -6,13 +6,21 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <style>
-            .img-margin{
-                margin: 60pt 0 30pt 30pt;
+            .logo-margin{
+                margin: -60pt 0 0 30pt;
+                position: absolute;
+            }
+            .img-div{
+                width: 100%;
+                height: 233pt;
+                background-color: #AAB7CB ;
+                position: relative;
+                margin-top: 95px;
             }
             .title-div{
                 width:100%;
                 height:50px;
-                margin:0 0 60px 30pt
+                margin:60px 0 60px 30pt
             }
             .title-font{
                 font-size: 40pt;
@@ -20,7 +28,7 @@
                 line-height: 50px;
                 vertical-align: auto;
                 text-align: left;
-                color: #333333;
+                color: #FFFFFF;
                 font-weight: bold
             }
             .margin-style{
@@ -45,14 +53,36 @@
                 color: #333333;
                 margin: 30px 20px 0 20px;
             }
+            .content-div{
+                width: 85%;
+                height: 500pt;
+                min-height: 500pt;
+                background-color: #FFFFFF ;
+                opacity: 0.3;
+                margin: auto;
+                max-height: 500pt;
+                overflow: auto;
+                border: 1px solid #707070;
+                border-radius: 10pt;
+            }
         </style>
     </head>
-    <body>
-        <img src="./img/bnBag.png" width="90%" height="20%" class="img-margin">
+    <body style="background-color: #003399 ">
+        <div class="img-div" id="backgroundDiv">
+            <img src="./img/logo.png" width="164pt" height="164pt" class="logo-margin">
+        </div>
         <div class="title-div">
-            <div class="title-font" >产品技术资料</div>
+            <img src="./img/datum.png" width="84pt" height="84pt" class="logo-margin" style="margin-top: -10px">
+            <div class="title-font" style="margin-left: 160px">产品技术资料</div>
+        </div>
+        <div class="content-div" style="margin-top: 30pt">
+            <div class="margin-style" id="dataContainer"></div>
+        </div>
+        <div style="margin-top: 50pt;background-color:  #FFFFFF;opacity: 0.3;height: 150pt;width: 100%">
+            <div style="margin: auto;font-size: 50pt;color: #e31d1d;height: 150pt;text-align: center;">
+                品牌官网·点击跳转
+            </div>
         </div>
-        <div class="margin-style" id="dataContainer"></div>
         <script>
             window.onload = async function(){
                 var loc=location.href;
@@ -83,46 +113,46 @@
                 var urlNew = strNew + '/yos/rest/index'
                 console.log(urlNew)
                 axios.post(urlNew, param)
-                .then(function (response) {
-                    response.data.data.forEach((item,index) => {
-                        item.attinfos.forEach((data,rowindex) => {
-                            const div = document.createElement('div');
-                            div.className = 'div-border';
-                            let iconSrc = '';
-                            if (data.postfix == 'doc' || data.postfix == 'DOC' || data.postfix == 'docx' || data.postfix == 'DOCX') {
-                                iconSrc = './img/word.svg';
-                            } else if (data.postfix == 'pdf' || data.postfix == 'PDF') {
-                                iconSrc = './img/pdfType.svg';
-                            } else if (data.postfix == 'png' || data.postfix == 'PNG' || data.postfix == 'JPG' || data.postfix == 'jpg') {
-                                iconSrc = './img/pngType.svg';
-                            }else if (data.postfix == 'ppt' || data.postfix == 'PPT') {
-                                iconSrc = './img/ppt.svg';
-                            }else if (data.postfix == 'mp3' || data.postfix == 'MP3' || data.postfix == 'MP4' || data.postfix == 'mp4'
-                                || data.postfix == 'mov' || data.postfix == 'MOV') {
-                                iconSrc = './img/mov.svg';
-                            }else if (data.postfix == 'EXCEL' || data.postfix == 'excel' || data.postfix == 'xlsx' || data.postfix == 'XLSX') {
-                                iconSrc = './img/excel.svg';
-                            } else {
-                                iconSrc = './img/default.svg';
-                            }
-                            let remarks = data.document.split('.')[0]
-                            div.innerHTML = `
+                    .then(function (response) {
+                        response.data.data.forEach((item,index) => {
+                            item.attinfos.forEach((data,rowindex) => {
+                                const div = document.createElement('div');
+                                div.className = 'div-border';
+                                let iconSrc = '';
+                                if (data.postfix == 'doc' || data.postfix == 'DOC' || data.postfix == 'docx' || data.postfix == 'DOCX') {
+                                    iconSrc = './img/word.svg';
+                                } else if (data.postfix == 'pdf' || data.postfix == 'PDF') {
+                                    iconSrc = './img/pdfType.svg';
+                                } else if (data.postfix == 'png' || data.postfix == 'PNG' || data.postfix == 'JPG' || data.postfix == 'jpg') {
+                                    iconSrc = './img/pngType.svg';
+                                }else if (data.postfix == 'ppt' || data.postfix == 'PPT') {
+                                    iconSrc = './img/ppt.svg';
+                                }else if (data.postfix == 'mp3' || data.postfix == 'MP3' || data.postfix == 'MP4' || data.postfix == 'mp4'
+                                    || data.postfix == 'mov' || data.postfix == 'MOV') {
+                                    iconSrc = './img/mov.svg';
+                                }else if (data.postfix == 'EXCEL' || data.postfix == 'excel' || data.postfix == 'xlsx' || data.postfix == 'XLSX') {
+                                    iconSrc = './img/excel.svg';
+                                } else {
+                                    iconSrc = './img/default.svg';
+                                }
+                                let remarks = data.document.split('.')[0]
+                                div.innerHTML = `
                             <div class="div-border" >
                                 <img src="${iconSrc}" class="img-style">
                                 <div class="content-style">${data.document.split('.')[0]}</div>
                             </div>
                 `;
-                            dataContainer.appendChild(div);
-                            div.addEventListener('click', function() {
-                                console.log(data.url)
-                                downloadFile(data.url)
-                            });
+                                dataContainer.appendChild(div);
+                                div.addEventListener('click', function() {
+                                    console.log(data.url)
+                                    downloadFile(data.url)
+                                });
+                            })
                         })
                     })
-                })
-                .catch(function (error) {
-                    console.log(error);
-                });
+                    .catch(function (error) {
+                        console.log(error);
+                    });
             }
             function downloadFile(fileUrl, fileType){
                 const link = document.createElement('a');

+ 136 - 0
public/codeToFileCopy.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>商品资料页</title>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+        <style>
+            .img-margin{
+                margin: 60pt 0 30pt 30pt;
+            }
+            .title-div{
+                width:100%;
+                height:50px;
+                margin:0 0 60px 30pt
+            }
+            .title-font{
+                font-size: 40pt;
+                height:50px;
+                line-height: 50px;
+                vertical-align: auto;
+                text-align: left;
+                color: #333333;
+                font-weight: bold
+            }
+            .margin-style{
+                margin:0 30pt 20pt 30pt
+            }
+            .div-border{
+                width: 100%;
+                height: 150px;
+                border-radius: 8pt;
+                border: #cccccc solid 1px;
+                display: flex;
+                justify-content: left;
+                margin-bottom: 20px;
+            }
+            .img-style{
+                width: 90px;
+                height: 90px;
+                margin: 28px 0 0 20px;
+            }
+            .content-style{
+                font-size: 30px;
+                color: #333333;
+                margin: 30px 20px 0 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <img src="./img/bnBag.png" width="90%" height="20%" class="img-margin">
+        <div class="title-div">
+            <div class="title-font" >产品技术资料</div>
+        </div>
+        <div class="margin-style" id="dataContainer"></div>
+        <script>
+            window.onload = async function(){
+                var loc=location.href;
+                var n1=loc.length;
+                var n2=loc.indexOf('=');
+                var code=loc.slice(n2+1,n1)
+                let that = this
+                console.log(code)
+                let param = {
+                    "id": 2025082515112802,
+                    "content": {
+                        "code": code
+                    },
+                }
+                var str = window.location.href;
+                var index = str.indexOf('/');
+                var num = 0;
+                var strNew = ''
+                while(index !== -1) {
+                    num++;
+                    index = str.indexOf('/',index + 1);
+                    if (num++ === 3) {
+                        this.url = str.slice(0, index) + '/yosweb/codeToFile.html'
+                        strNew = str.slice(0, index)
+                    }
+                }
+                console.log(strNew)
+                var urlNew = strNew + '/yos/rest/index'
+                console.log(urlNew)
+                axios.post(urlNew, param)
+                .then(function (response) {
+                    response.data.data.forEach((item,index) => {
+                        item.attinfos.forEach((data,rowindex) => {
+                            const div = document.createElement('div');
+                            div.className = 'div-border';
+                            let iconSrc = '';
+                            if (data.postfix == 'doc' || data.postfix == 'DOC' || data.postfix == 'docx' || data.postfix == 'DOCX') {
+                                iconSrc = './img/word.svg';
+                            } else if (data.postfix == 'pdf' || data.postfix == 'PDF') {
+                                iconSrc = './img/pdfType.svg';
+                            } else if (data.postfix == 'png' || data.postfix == 'PNG' || data.postfix == 'JPG' || data.postfix == 'jpg') {
+                                iconSrc = './img/pngType.svg';
+                            }else if (data.postfix == 'ppt' || data.postfix == 'PPT') {
+                                iconSrc = './img/ppt.svg';
+                            }else if (data.postfix == 'mp3' || data.postfix == 'MP3' || data.postfix == 'MP4' || data.postfix == 'mp4'
+                                || data.postfix == 'mov' || data.postfix == 'MOV') {
+                                iconSrc = './img/mov.svg';
+                            }else if (data.postfix == 'EXCEL' || data.postfix == 'excel' || data.postfix == 'xlsx' || data.postfix == 'XLSX') {
+                                iconSrc = './img/excel.svg';
+                            } else {
+                                iconSrc = './img/default.svg';
+                            }
+                            let remarks = data.document.split('.')[0]
+                            div.innerHTML = `
+                            <div class="div-border" >
+                                <img src="${iconSrc}" class="img-style">
+                                <div class="content-style">${data.document.split('.')[0]}</div>
+                            </div>
+                `;
+                            dataContainer.appendChild(div);
+                            div.addEventListener('click', function() {
+                                console.log(data.url)
+                                downloadFile(data.url)
+                            });
+                        })
+                    })
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+            }
+            function downloadFile(fileUrl, fileType){
+                const link = document.createElement('a');
+                link.href = fileUrl
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+        </script>
+    </body>
+</html>

BIN=BIN
public/img/datum.png


BIN=BIN
public/img/logo.png