sale-client 3.6.310 → 3.6.311

package/src/components/revenue/Common/uploadFiles.vue

@@ -1,503 +1,503 @@
-<template>
-  <div style="background-color: #FFFFFF;">
-
-      <hr style="width: 90%;margin: 0px auto;border: #999999 1px solid;margin-top: 60px"/>
-      <div class="showList col-sm-12" style="padding: 10px;margin-top: 20px">
-        <div :class="cols ? cols : 'col-sm-6'" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
-             v-for="row in fileInfoData">
-          <div class="showData">
-            <div class="left">
-              <img :src="row.f_downloadURL"/>
-            </div>
-            <div class="right">
-              <div class="top">
-                <div class="">上传时间:&nbsp;<span>{{row.f_uploaddate}}</span></div>
-              </div>
-              <div class="top">
-                <div class="">操作员:&nbsp;<span>{{row.f_username}}</span></div>
-              </div>
-              <div class="top">文件说明:&nbsp;{{row.fremarks}}</div>
-              <ul class="buttonList top">
-                <li>
-                  <a target="_blank" :href="row.f_downloadURL">预览</a>
-                </li>
-                <li v-show="isDelete == '1'" @click="delet($index,row)">删除</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-
-  </div>
-</template>
-<script>
-  export default {
-    title: '附件',
-    props: ['blodid', 'isremark', 'isusetype', 'takeimg', 'defname', 'isupload', 'fusetype', 'cols'],
-    data () {
-      return {
-        isDelete: '1', // 删除按钮，可以进行控制（权限等）
-        fileInfoData: [], // 数据库存储的文件记录对象数组
-        headers: {'username': this.$login.f.name, 'blodid': '', 'fremarks': '', 'defname': '', 'fusetype': this.fusetype ? this.fusetype : ''}, // 调用rs/file/uploadFile 的参数
-        showUpload: false, // 上传模态框控制
-        showhighmeter: false, // 高拍仪组件控制
-        useType: '', // 使用类型
-        fileRemark: '' // 文件说明
-      }
-    },
-    methods: {
-      // 查询按钮事件
-      delet (index, row) {
-        this.$resetdelete('rs/entity/t_files', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
-          this.fileInfoData.splice(index, 1)
-        })
-      },
-      GetRequest () {
-        var url = location.search
-        var theRequest = new Object()
-        if (url.indexOf('?') != -1) {
-          var str = url.substr(1)
-          let strs = str.split('&')
-          for (var i = 0; i < strs.length; i++) {
-            theRequest[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
-          }
-        }
-        return theRequest
-      },
-      upload () {
-        if (this.showhighmeter) {
-          console.log(this, '测试')
-          this.$refs.ltgao.closeVideo()
-        }
-        console.log('测试1')
-        this.showhighmeter = !this.showhighmeter
-      },
-      async load (self) {
-        let condition = `1=1 and f_blobid= '${self.headers.blodid}' `
-        if (this.fusetype) {
-          condition += ` and fusetype='${this.fusetype}'`
-        }
-        let getFile = await this.$resetpost('rs/sql/saleSingleTable', {
-          data: {
-            tablename: 't_files',
-            condition: condition + ` order by f_uploaddate desc `
-          }
-        }, {resolveMsg: null, rejectMsg: '获取附件出错'})
-
-        for (var i = 0; i < getFile.data.length; i++) {
-          // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
-          if (getFile.data[i].fusetype && (getFile.data[i].fusetype.includes('execl导入'))) {
-            getFile.data.splice(i, 1)
-            i--
-            continue
-          }
-          let temp = getFile.data[i].f_downloadpath
-          let URL = temp.substring(temp.lastIndexOf(':\\') + 2)
-          getFile.data[i].f_downloadURL = 'http://' + location.host + '/' + URL
-        }
-        self.fileInfoData = []
-        self.fileInfoData = getFile.data
-      },
-      // 数据库时间格式化
-      formatdate (val) {
-        // 20180914151603   :    2018-09-14 15:16:03
-        if (val.length != 14) { return }
-        let year = val.substr(0, 4)
-        let month = val.substr(4, 2)
-        let day = val.substr(6, 2)
-        let hour = val.substr(8, 2)
-        let min = val.substr(10, 2)
-        let second = val.substr(12, 2)
-        return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second
-      },
-      // 打开文件上传对话框
-      fileUpload () {
-        this.showUpload = true
-      },
-      // 关闭文件上传对话框
-      close () {
-        this.showUpload = false
-        // 将选的文件清空
-        this.$refs.file.$el.querySelector('input').value = ''
-        this.load(this)
-      },
-      convertBase64ToBlob (base64String) {
-        // 将base64解码
-        var bytes = atob(base64String)
-      // var bytes = base64;
-        var bytesCode = new ArrayBuffer(bytes.length)
-      // 转换为类型化数组
-        var byteArray = new Uint8Array(bytesCode)
-
-      // 将base64转换为ascii码
-        for (var i = 0; i < bytes.length; i++) {
-          byteArray[i] = bytes.charCodeAt(i)
-        }
-        // 生成Blob对象（文件对象）
-        return new Blob([bytesCode], {type: 'image/jpeg'})
-      },
-      newPhoto (Imgbase64) {
-        let form = new FormData()
-        let xhr = new XMLHttpRequest()
-        let formDataBoundary = '----WebkitFormBoundary' + 'GaoPaiYi'
-        form.append('Content-Type', 'multipart/form-data;boundary=' + formDataBoundary)
-        form.append('file', this.convertBase64ToBlob(Imgbase64), 'GaoPaiYi.jpg')
-        xhr.open('POST', 'rs/file/uploadFile')
-
-        if (this.headers) {
-          for (var header in this.headers) {
-            xhr.setRequestHeader(header, encodeURIComponent(this.headers[header]))
-          }
-        }
-        xhr.send(form)
-        setTimeout(() => {
-          this.load(this)
-        }, 5000)
-      }
-    },
-    ready () {
-      this.headers.blodid = this.blodid
-      console.log('123222', this.blobid)
-      if (this.blodid) {
-        this.load(this)
-      }
-    },
-    watch: {
-      'blodid' (val) {
-        if (val) {
-          console.log('观察blodid', val)
-          this.headers.blodid = this.blodid
-          this.load(this)
-        }
-      },
-      'useType' () {
-        this.headers.fusetype = this.useType[0] ? this.useType[0] : ''
-      },
-      'defname' () {
-        this.headers.defname = this.defname
-      }
-    },
-    computed: {
-      foptions () {
-        return this.$appdata.getParam('使用类型')
-      }
-    },
-    events: {
-      onFileUpload: function (file, res) {
-        console.log('上传完毕')
-        this.headers.fremarks = ''
-        this.close()
-      }
-    }
-  }
-</script>
-<style scoped>
-
-  * {
-    padding: 0px;
-    margin: 0px;
-  }
-
-  .inpGroup {
-    position: absolute;
-    left: 0px;
-    right: 220px;
-    font-family: "微软雅黑";
-  }
-
-  .navWin {
-    position: relative;
-  }
-
-  .navWin .navShow {
-    margin-top: 5px;
-    height: 34px;
-    font-size: 20px;
-    line-height: 34px;
-    color: rgb(180, 180, 180);
-  }
-
-  .navWin .navShow span {
-    display: inline-block;
-    height: 34px;
-  }
-
-  .navWin .navShow .icon {
-    height: 34px;
-    margin-right: 10px;
-    color: rgb(200, 200, 200);
-  }
-
-  .navWin .navList {
-    position: absolute;
-    width: 100%;
-    z-index: 99;
-    list-style: none;
-    background-color: rgba(241, 241, 241, 0.9);
-    line-height: 34px;
-    color: #8d8d8d;
-    visibility: hidden;
-  }
-
-  .navWin:hover .navList {
-    visibility: visible;
-  }
-
-  .navWin .navList li {
-    font-size: 18px;
-    padding-left: 30px;
-  }
-
-  .navWin .navList li:hover {
-    background-color: rgba(220, 220, 220, 0.9);
-  }
-
-  .inp {
-    box-sizing: border-box;
-    width: 79%;
-    padding: 0px 10px;
-    height: 34px;
-    font-size: 14px;
-    line-height: 36px;
-    color: #999999;
-    border: solid 1px #c1c1c1;
-    border-radius: 2px;
-    background: none;
-    outline: none;
-  }
-
-  .inp::-webkit-input-placeholder {
-    color: #999999;
-  }
-
-  .inp_button {
-    float: right;
-    margin-left: 10px;
-    /*    position: absolute;
-        right: 35px;
-        height: 40px;*/
-    width: 100px;
-    font-size: 14px;
-    line-height: 34px;
-    color: #ffffff;
-    text-align: center;
-    background-color: rgb(90, 180, 90);
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .btn-group {
-    height: 34px;
-  }
-
-  .inp_button2 {
-    float: right;
-    margin-left: 10px;
-    /*    position: absolute;
-        right: 35px;
-        height: 40px;*/
-    width: auto;
-    font-size: 16px;
-    line-height: 34px;
-    color: #ffffff;
-    text-align: center;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .inp_button:hover {
-    /*background-color: rgb(80, 150, 80);*/
-  }
-
-  .inp_button:active {
-    font-size: 20px;
-    /*background-color: rgb(150, 200, 150);*/
-  }
-
-  .showData {
-    height: auto;
-    position: relative;
-    padding-bottom: 7px;
-    border-bottom: solid 1px #c1c1c1;
-    font-family: "微软雅黑";
-  }
-
-  .showData .left {
-    height: 180px;
-    width: 210px;
-    background-color: rgb(240, 240, 240);
-    overflow: hidden;
-    line-height: 180px;
-  }
-
-  .showData .left img {
-    width: 100%;
-    height: auto;
-  }
-
-  .showData .right {
-    position: absolute;
-    top: 0px;
-    left: 220px;
-    right: 0px;
-    height: 180px;
-  }
-
-  .showData .right .top {
-    height: 30px;
-    line-height: 30px;
-    color: rgb(98, 98, 98);
-  }
-
-  .showData .right .top .topleft {
-    float: left;
-    font-size: 16px;
-    margin-right: 20px;
-  }
-
-  .showData .right .top .topright {
-    float: right;
-    margin-left: 20px;
-  }
-
-  .showData .right .text {
-    word-wrap: break-word;
-    overflow: hidden;
-    /*height: 100px;*/
-    color: #999999;
-    /*padding: 8px 0px;*/
-  }
-
-  .showData .right ul {
-    height: 20px;
-    padding: 0px;
-    margin: 0px;
-    font-size: 0px;
-  }
-
-  .showData .right ul li {
-    display: inline-block;
-    height: 20px;
-    list-style: none;
-    font-size: 16px;
-    line-height: 20px;
-    color: #FFFFFF;
-    background-color: #5bb85d;
-    padding: 0px 7px;
-    margin-right: 10px;
-    cursor: pointer;
-  }
-
-  .showData .right ul li:hover {
-    background-color: rgb(80, 150, 80);
-  }
-
-  .showData .right ul li:active {
-    background-color: rgb(150, 200, 150);
-  }
-
-  .showData .right ul li a {
-    width: 100%;
-    height: 100%;
-    text-decoration: none;
-    color: #FFFFFF;
-  }
-
-  body {
-    color: black;
-  }
-
-  .search {
-    width: 75%;
-    margin: 10px auto 30px auto;
-  }
-
-  .search .searchAll {
-    height: 34px;
-    font-size: 18px;
-    color: #999999;
-    line-height: 34px;
-  }
-
-  .search .searchAll span {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    border: #999999 1px solid;
-    position: relative;
-    top: 2px;
-  }
-
-  .search .searchAll .spanAll {
-    background-color: rgb(90, 180, 90);
-  }
-
-  .search .itemList {
-    font-size: 16px;
-    color: #999999;
-    line-height: 34px;
-  }
-
-  .search .itemList .item {
-    height: 34px;
-    position: relative;
-  }
-
-  .search .itemList .item .descript {
-    display: inline-block;
-    width: 80px;
-  }
-
-  .search .itemList .item .inputBox {
-    height: 30px;
-    position: absolute;
-    top: 0px;
-    left: 80px;
-    right: 20px;
-  }
-
-  .search .itemList .item .inputBox input {
-    width: 100%;
-    height: 100%;
-    outline: none;
-    padding: 0px 5px;
-  }
-
-  .search .itemList .item .inputBox input::-webkit-input-placeholder {
-    color: #999999;
-  }
-
-  .searchItem {
-    height: 30px;
-    position: absolute;
-    top: 0px;
-    left: 80px;
-    right: 20px;
-  }
-
-  .searchItem .show {
-    padding-left: 10px;
-  }
-
-  .searchItem ul {
-    position: relative;
-    list-style: none;
-    background-color: rgba(190, 190, 190, 0.9);
-    color: #717171;
-    z-index: 99;
-    visibility: hidden;
-  }
-
-  .searchItem ul li {
-    padding-left: 10px;
-  }
-
-  .searchItem:hover ul {
-    visibility: visible;
-  }
-
-  .searchItem ul li:hover {
-    background-color: rgba(168, 168, 168, 0.8);
-    color: #646464;
-  }
-</style>
+<template>
+  <div style="background-color: #FFFFFF;">
+
+      <hr style="width: 90%;margin: 0px auto;border: #999999 1px solid;margin-top: 60px"/>
+      <div class="showList col-sm-12" style="padding: 10px;margin-top: 20px">
+        <div :class="cols ? cols : 'col-sm-6'" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
+             v-for="row in fileInfoData">
+          <div class="showData">
+            <div class="left">
+              <img :src="row.f_downloadURL"/>
+            </div>
+            <div class="right">
+              <div class="top">
+                <div class="">上传时间:&nbsp;<span>{{row.f_uploaddate}}</span></div>
+              </div>
+              <div class="top">
+                <div class="">操作员:&nbsp;<span>{{row.f_username}}</span></div>
+              </div>
+              <div class="top">文件说明:&nbsp;{{row.fremarks}}</div>
+              <ul class="buttonList top">
+                <li>
+                  <a target="_blank" :href="row.f_downloadURL">预览</a>
+                </li>
+                <li v-show="isDelete == '1'" @click="delet($index,row)">删除</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    title: '附件',
+    props: ['blodid', 'isremark', 'isusetype', 'takeimg', 'defname', 'isupload', 'fusetype', 'cols'],
+    data () {
+      return {
+        isDelete: '1', // 删除按钮，可以进行控制（权限等）
+        fileInfoData: [], // 数据库存储的文件记录对象数组
+        headers: {'username': this.$login.f.name, 'blodid': '', 'fremarks': '', 'defname': '', 'fusetype': this.fusetype ? this.fusetype : ''}, // 调用rs/file/uploadFile 的参数
+        showUpload: false, // 上传模态框控制
+        showhighmeter: false, // 高拍仪组件控制
+        useType: '', // 使用类型
+        fileRemark: '' // 文件说明
+      }
+    },
+    methods: {
+      // 查询按钮事件
+      delet (index, row) {
+        this.$resetdelete('rs/entity/t_files', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
+          this.fileInfoData.splice(index, 1)
+        })
+      },
+      GetRequest () {
+        var url = location.search
+        var theRequest = new Object()
+        if (url.indexOf('?') != -1) {
+          var str = url.substr(1)
+          let strs = str.split('&')
+          for (var i = 0; i < strs.length; i++) {
+            theRequest[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
+          }
+        }
+        return theRequest
+      },
+      upload () {
+        if (this.showhighmeter) {
+          console.log(this, '测试')
+          this.$refs.ltgao.closeVideo()
+        }
+        console.log('测试1')
+        this.showhighmeter = !this.showhighmeter
+      },
+      async load (self) {
+        let condition = `1=1 and f_blobid= '${self.headers.blodid}' `
+        if (this.fusetype) {
+          condition += ` and fusetype='${this.fusetype}'`
+        }
+        let getFile = await this.$resetpost('rs/sql/saleSingleTable', {
+          data: {
+            tablename: 't_files',
+            condition: condition + ` order by f_uploaddate desc `
+          }
+        }, {resolveMsg: null, rejectMsg: '获取附件出错'})
+
+        for (var i = 0; i < getFile.data.length; i++) {
+          // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
+          if (getFile.data[i].fusetype && (getFile.data[i].fusetype.includes('execl导入'))) {
+            getFile.data.splice(i, 1)
+            i--
+            continue
+          }
+          let temp = getFile.data[i].f_downloadpath
+          let URL = temp.substring(temp.lastIndexOf(':\\') + 2)
+          getFile.data[i].f_downloadURL = 'http://' + location.host + '/' + URL
+        }
+        self.fileInfoData = []
+        self.fileInfoData = getFile.data
+      },
+      // 数据库时间格式化
+      formatdate (val) {
+        // 20180914151603   :    2018-09-14 15:16:03
+        if (val.length != 14) { return }
+        let year = val.substr(0, 4)
+        let month = val.substr(4, 2)
+        let day = val.substr(6, 2)
+        let hour = val.substr(8, 2)
+        let min = val.substr(10, 2)
+        let second = val.substr(12, 2)
+        return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second
+      },
+      // 打开文件上传对话框
+      fileUpload () {
+        this.showUpload = true
+      },
+      // 关闭文件上传对话框
+      close () {
+        this.showUpload = false
+        // 将选的文件清空
+        this.$refs.file.$el.querySelector('input').value = ''
+        this.load(this)
+      },
+      convertBase64ToBlob (base64String) {
+        // 将base64解码
+        var bytes = atob(base64String)
+      // var bytes = base64;
+        var bytesCode = new ArrayBuffer(bytes.length)
+      // 转换为类型化数组
+        var byteArray = new Uint8Array(bytesCode)
+
+      // 将base64转换为ascii码
+        for (var i = 0; i < bytes.length; i++) {
+          byteArray[i] = bytes.charCodeAt(i)
+        }
+        // 生成Blob对象（文件对象）
+        return new Blob([bytesCode], {type: 'image/jpeg'})
+      },
+      newPhoto (Imgbase64) {
+        let form = new FormData()
+        let xhr = new XMLHttpRequest()
+        let formDataBoundary = '----WebkitFormBoundary' + 'GaoPaiYi'
+        form.append('Content-Type', 'multipart/form-data;boundary=' + formDataBoundary)
+        form.append('file', this.convertBase64ToBlob(Imgbase64), 'GaoPaiYi.jpg')
+        xhr.open('POST', 'rs/file/uploadFile')
+
+        if (this.headers) {
+          for (var header in this.headers) {
+            xhr.setRequestHeader(header, encodeURIComponent(this.headers[header]))
+          }
+        }
+        xhr.send(form)
+        setTimeout(() => {
+          this.load(this)
+        }, 5000)
+      }
+    },
+    ready () {
+      this.headers.blodid = this.blodid
+      console.log('123222', this.blobid)
+      if (this.blodid) {
+        this.load(this)
+      }
+    },
+    watch: {
+      'blodid' (val) {
+        if (val) {
+          console.log('观察blodid', val)
+          this.headers.blodid = this.blodid
+          this.load(this)
+        }
+      },
+      'useType' () {
+        this.headers.fusetype = this.useType[0] ? this.useType[0] : ''
+      },
+      'defname' () {
+        this.headers.defname = this.defname
+      }
+    },
+    computed: {
+      foptions () {
+        return this.$appdata.getParam('使用类型')
+      }
+    },
+    events: {
+      onFileUpload: function (file, res) {
+        console.log('上传完毕')
+        this.headers.fremarks = ''
+        this.close()
+      }
+    }
+  }
+</script>
+<style scoped>
+
+  * {
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .inpGroup {
+    position: absolute;
+    left: 0px;
+    right: 220px;
+    font-family: "微软雅黑";
+  }
+
+  .navWin {
+    position: relative;
+  }
+
+  .navWin .navShow {
+    margin-top: 5px;
+    height: 34px;
+    font-size: 20px;
+    line-height: 34px;
+    color: rgb(180, 180, 180);
+  }
+
+  .navWin .navShow span {
+    display: inline-block;
+    height: 34px;
+  }
+
+  .navWin .navShow .icon {
+    height: 34px;
+    margin-right: 10px;
+    color: rgb(200, 200, 200);
+  }
+
+  .navWin .navList {
+    position: absolute;
+    width: 100%;
+    z-index: 99;
+    list-style: none;
+    background-color: rgba(241, 241, 241, 0.9);
+    line-height: 34px;
+    color: #8d8d8d;
+    visibility: hidden;
+  }
+
+  .navWin:hover .navList {
+    visibility: visible;
+  }
+
+  .navWin .navList li {
+    font-size: 18px;
+    padding-left: 30px;
+  }
+
+  .navWin .navList li:hover {
+    background-color: rgba(220, 220, 220, 0.9);
+  }
+
+  .inp {
+    box-sizing: border-box;
+    width: 79%;
+    padding: 0px 10px;
+    height: 34px;
+    font-size: 14px;
+    line-height: 36px;
+    color: #999999;
+    border: solid 1px #c1c1c1;
+    border-radius: 2px;
+    background: none;
+    outline: none;
+  }
+
+  .inp::-webkit-input-placeholder {
+    color: #999999;
+  }
+
+  .inp_button {
+    float: right;
+    margin-left: 10px;
+    /*    position: absolute;
+        right: 35px;
+        height: 40px;*/
+    width: 100px;
+    font-size: 14px;
+    line-height: 34px;
+    color: #ffffff;
+    text-align: center;
+    background-color: rgb(90, 180, 90);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .btn-group {
+    height: 34px;
+  }
+
+  .inp_button2 {
+    float: right;
+    margin-left: 10px;
+    /*    position: absolute;
+        right: 35px;
+        height: 40px;*/
+    width: auto;
+    font-size: 16px;
+    line-height: 34px;
+    color: #ffffff;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .inp_button:hover {
+    /*background-color: rgb(80, 150, 80);*/
+  }
+
+  .inp_button:active {
+    font-size: 20px;
+    /*background-color: rgb(150, 200, 150);*/
+  }
+
+  .showData {
+    height: auto;
+    position: relative;
+    padding-bottom: 7px;
+    border-bottom: solid 1px #c1c1c1;
+    font-family: "微软雅黑";
+  }
+
+  .showData .left {
+    height: 180px;
+    width: 210px;
+    background-color: rgb(240, 240, 240);
+    overflow: hidden;
+    line-height: 180px;
+  }
+
+  .showData .left img {
+    width: 100%;
+    height: auto;
+  }
+
+  .showData .right {
+    position: absolute;
+    top: 0px;
+    left: 220px;
+    right: 0px;
+    height: 180px;
+  }
+
+  .showData .right .top {
+    height: 30px;
+    line-height: 30px;
+    color: rgb(98, 98, 98);
+  }
+
+  .showData .right .top .topleft {
+    float: left;
+    font-size: 16px;
+    margin-right: 20px;
+  }
+
+  .showData .right .top .topright {
+    float: right;
+    margin-left: 20px;
+  }
+
+  .showData .right .text {
+    word-wrap: break-word;
+    overflow: hidden;
+    /*height: 100px;*/
+    color: #999999;
+    /*padding: 8px 0px;*/
+  }
+
+  .showData .right ul {
+    height: 20px;
+    padding: 0px;
+    margin: 0px;
+    font-size: 0px;
+  }
+
+  .showData .right ul li {
+    display: inline-block;
+    height: 20px;
+    list-style: none;
+    font-size: 16px;
+    line-height: 20px;
+    color: #FFFFFF;
+    background-color: #5bb85d;
+    padding: 0px 7px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  .showData .right ul li:hover {
+    background-color: rgb(80, 150, 80);
+  }
+
+  .showData .right ul li:active {
+    background-color: rgb(150, 200, 150);
+  }
+
+  .showData .right ul li a {
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: #FFFFFF;
+  }
+
+  body {
+    color: black;
+  }
+
+  .search {
+    width: 75%;
+    margin: 10px auto 30px auto;
+  }
+
+  .search .searchAll {
+    height: 34px;
+    font-size: 18px;
+    color: #999999;
+    line-height: 34px;
+  }
+
+  .search .searchAll span {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border: #999999 1px solid;
+    position: relative;
+    top: 2px;
+  }
+
+  .search .searchAll .spanAll {
+    background-color: rgb(90, 180, 90);
+  }
+
+  .search .itemList {
+    font-size: 16px;
+    color: #999999;
+    line-height: 34px;
+  }
+
+  .search .itemList .item {
+    height: 34px;
+    position: relative;
+  }
+
+  .search .itemList .item .descript {
+    display: inline-block;
+    width: 80px;
+  }
+
+  .search .itemList .item .inputBox {
+    height: 30px;
+    position: absolute;
+    top: 0px;
+    left: 80px;
+    right: 20px;
+  }
+
+  .search .itemList .item .inputBox input {
+    width: 100%;
+    height: 100%;
+    outline: none;
+    padding: 0px 5px;
+  }
+
+  .search .itemList .item .inputBox input::-webkit-input-placeholder {
+    color: #999999;
+  }
+
+  .searchItem {
+    height: 30px;
+    position: absolute;
+    top: 0px;
+    left: 80px;
+    right: 20px;
+  }
+
+  .searchItem .show {
+    padding-left: 10px;
+  }
+
+  .searchItem ul {
+    position: relative;
+    list-style: none;
+    background-color: rgba(190, 190, 190, 0.9);
+    color: #717171;
+    z-index: 99;
+    visibility: hidden;
+  }
+
+  .searchItem ul li {
+    padding-left: 10px;
+  }
+
+  .searchItem:hover ul {
+    visibility: visible;
+  }
+
+  .searchItem ul li:hover {
+    background-color: rgba(168, 168, 168, 0.8);
+    color: #646464;
+  }
+</style>