fix: 修改样式

49a0bbea · 无尘 · 2ff3ba9d · 49a0bbea · 2ff3ba9d · 49a0bbea
Commit 49a0bbea authored Sep 04, 2019 by 无尘
12 changed files
--- a/dist/index.html
+++ b/dist/index.html
-<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>达摩开放平台</title><link href=./static/css/app.4a5822e59e9d1c2d0f5d4edc44adf328.css rel=stylesheet></head><body style="min-width: 1400px;" class=damolish><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script>// Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();</script><script type=text/javascript src=./static/js/manifest.d6044d716839c848700e.js></script><script type=text/javascript src=./static/js/vendor.e1e3582ec7c29b190f53.js></script><script type=text/javascript src=./static/js/app.cc4e7365b943746f21b6.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>达摩开放平台</title><link href=./static/css/app.a868601efb2f3595c6189bd0016debbf.css rel=stylesheet></head><body style="min-width: 1400px;" class=damolish><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script>// Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();</script><script type=text/javascript src=./static/js/manifest.0419074f58cf03134d1f.js></script><script type=text/javascript src=./static/js/vendor.e1e3582ec7c29b190f53.js></script><script type=text/javascript src=./static/js/app.8d7cb02a28e765da1dc9.js></script></body></html>
\ No newline at end of file
--- a/dist/static/css/app.4a5822e59e9d1c2d0f5d4edc44adf328.css
+++ b/dist/static/css/app.4a5822e59e9d1c2d0f5d4edc44adf328.css
--- a/dist/static/css/app.a868601efb2f3595c6189bd0016debbf.css
+++ b/dist/static/css/app.a868601efb2f3595c6189bd0016debbf.css
--- a/dist/static/css/public.css
+++ b/dist/static/css/public.css
@@ -89,7 +89,7 @@ input {
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-family: 'PingFang SC','Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1','Microsoft Yahei',tahoma,ari,'\5B8B\4F53';
 }
 /* HTML5 display-role reset for older browsers */
@@ -199,7 +199,7 @@ scrollbarbutton {
 }
 /* 纵向滚动条宽度 */
-scrollbar[orient="vertical"] {
+scrollbar[orient='vertical'] {
  /*min-width: 15px !important;*/
 }
 }
@@ -225,7 +225,7 @@ scrollcorner {
 }
 /* vertical or horizontal */
-scrollbar[orient="vertical"] {
+scrollbar[orient='vertical'] {
  color: silver;
 }
@@ -309,7 +309,7 @@ input:focus {
  display: block;
  visibility: hidden;
  height: 0;
-  content: "";
+  content: '';
  clear: both;
 }
@@ -815,7 +815,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 }
 .border-bottom-1:after {
-  content: " ";
+  content: '';
  position: absolute;
  left: 0;
  bottom: 0;

--- a/dist/static/js/2.4992be2e9cb47f4a6099.js
+++ b/dist/static/js/2.4992be2e9cb47f4a6099.js
--- a/dist/static/js/2.6d63e106c2e0c959322c.js
+++ b/dist/static/js/2.6d63e106c2e0c959322c.js
--- a/dist/static/js/app.cc4e7365b943746f21b6.js
+++ b/dist/static/js/app.cc4e7365b943746f21b6.js
--- a/dist/static/js/manifest.d6044d716839c848700e.js
+++ b/dist/static/js/manifest.d6044d716839c848700e.js
-!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,a){for(var i,u,f,s=0,l=[];s<r.length;s++)u=r[s],t[u]&&l.push(t[u][0]),t[u]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(n&&n(r,c,a);l.length;)l.shift()();if(a)for(s=0;s<a.length;s++)f=o(o.s=a[s]);return f};var r={},t={8:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],a=document.createElement("script");a.type="text/javascript",a.charset="utf-8",a.async=!0,a.timeout=12e4,o.nc&&a.setAttribute("nonce",o.nc),a.src=o.p+"static/js/"+e+"."+{0:"0efadc94c986926b4b34",1:"31182f257a5cbc12d26d",2:"4992be2e9cb47f4a6099",3:"d05f40e51e71f0aa263d",4:"589e7a586bd6c8494740",5:"4c56322b46ced3b0eb93"}[e]+".js";var i=setTimeout(u,12e4);function u(){a.onerror=a.onload=null,clearTimeout(i);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return a.onerror=a.onload=u,c.appendChild(a),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
+!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,a){for(var i,u,f,s=0,d=[];s<r.length;s++)u=r[s],t[u]&&d.push(t[u][0]),t[u]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(n&&n(r,c,a);d.length;)d.shift()();if(a)for(s=0;s<a.length;s++)f=o(o.s=a[s]);return f};var r={},t={8:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],a=document.createElement("script");a.type="text/javascript",a.charset="utf-8",a.async=!0,a.timeout=12e4,o.nc&&a.setAttribute("nonce",o.nc),a.src=o.p+"static/js/"+e+"."+{0:"0efadc94c986926b4b34",1:"31182f257a5cbc12d26d",2:"6d63e106c2e0c959322c",3:"d05f40e51e71f0aa263d",4:"589e7a586bd6c8494740",5:"4c56322b46ced3b0eb93"}[e]+".js";var i=setTimeout(u,12e4);function u(){a.onerror=a.onload=null,clearTimeout(i);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return a.onerror=a.onload=u,c.appendChild(a),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
--- a/src/components/vue-open-footer.vue
+++ b/src/components/vue-open-footer.vue
@@ -9,31 +9,13 @@
          <p class="fonr-14 color-9ba5b4 m-t-9">浙江达摩网络科技有限公司</p>
          <div class="qrcode-content m-t-30 font-0">
            <template v-for="(item, index) in qrcodeList">
-              <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper" :key="index + 'qrcode'">
+              <el-popover placement="bottom" width="70" trigger="hover" popper-class="el-qrcode-popper" :key="index + 'qrcode'">
                <img :src="item.img_qrcode" alt="" style="width: 70px" />
                <span slot="reference" :class="[index != 0 ? 'qrcode-popper' : '']">
-                  <img class="qrcode-wx qrcode-common-img font-12" :src="activeIndex == index ? item.img_active : item.img" alt="" @blur="changeIndex" @click="changeSrc(item, index)" />
+                  <img class="qrcode-wx qrcode-common-img font-12" :src="activeIndex == index ? item.img_active : item.img" alt="" @mouseover="changeIndex($event, index)" @mouseleave="setIndex" />
                </span>
              </el-popover>
            </template>
-            <!-- <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper">
-              <img src="../assets/index/wx_qrcode.png" alt="" style="width: 70px" />
-              <span slot="reference">
-                <img class="qrcode-wx qrcode-common-img font-12" src="../assets/index/wx.png" alt="" />
-              </span>
-            </el-popover>
-            <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper">
-              <img src="../assets/index/app_qrcode.png" alt="" style="width: 70px" />
-              <span slot="reference" class="qrcode-popper">
-                <img class="qrcode-wx qrcode-common-img font-12" src="../assets/index/iOS.png" alt="" />
-              </span>
-            </el-popover>
-            <el-popover placement="bottom" width="70" trigger="click" popper-class="el-qrcode-popper">
-              <img src="../assets/index/app_qrcode.png" alt="" style="width: 70px" />
-              <span slot="reference" class="qrcode-popper">
-                <img class="qrcode-wx qrcode-common-img font-12" src="../assets/index/android.png" alt="" />
-              </span>
-            </el-popover> -->
          </div>
        </div>
        <div class="content clearfix flex flex-space-between">
@@ -92,21 +74,15 @@ export default {
      const that = this;
      that.activeIndex = index;
    },
-    changeIndex(e) {
+    changeIndex(e,index) {
+      const that = this;
+      that.activeIndex = index;
+    },
+    setIndex() {
      const that = this;
-      if (!e.target.className.includes('qrcode-common-img')) {
      that.activeIndex = null;
    }
  }
-  },
-  mounted() {
-    const that = this;
-    document.body.addEventListener('click', that.changeIndex);
-  },
-  beforeDestroy() {
-    const that = this;
-    document.body.removeEventListener('click', that.changeIndex);
-  },
 };
 </script>
 <style lang="less" scoped>

--- a/src/components/vue-open-header.vue
+++ b/src/components/vue-open-header.vue
@@ -7,9 +7,9 @@
      <div class="open-header-left"><img src="../assets/logo_01.png" alt="" /></div>
      <div class="open-header-right">
        <ul class="flex">
-          <li v-for="(item, index) in openMenuData" :key="index + 'menu'" class="menu-li" @click.stop.prevent="toRedirect(item)">
+          <li v-for="(item, index) in openMenuData" :key="index + 'menu'" class="menu-li border-box" @click.stop.prevent="toRedirect(item)">
            <span>{{ item.menuName }}</span
-            ><span v-if="item.children && item.children.length"><i class="font_family icon-arrow_right color-16214a font-14"></i></span>
+            ><span v-if="item.children && item.children.length"><i class="font_family icon-arrow_right color-16214a font-12"></i></span>
            <div v-if="item.children && item.children.length" class="menu-child">
              <ul class="child-menu-ul">
                <li v-for="(childItem, child) in item.children" :key="child + 'child'" class="child-item-menu" @click.stop.prevent="toRedirect(childItem)">{{ childItem.menuName }}</li>
@@ -99,17 +99,13 @@ export default {
  &-wrap {
    width: 1200px;
    margin: 0 auto;
-    height: 56px;
+    height: 58px;
-    line-height: 56px;
+    line-height: 58px;
    .open-header-left {
      img {
        display: inline-block;
        vertical-align: middle;
        padding-right: 36px;
-        -webkit-transform: translateY(-4px);
-        -moz-transform: translateY(-4px);
-        -ms-transform: translateY(-4px);
-        transform: translateY(-4px);
      }
      span {
        font-size: 17px;
@@ -120,10 +116,15 @@ export default {
        .menu-li {
          position: relative;
          margin-right: 32px;
+          height: 58px;
+          line-height: 58px;
          font-size: 14px;
          color: #16214a;
          cursor: pointer;
          .icon-arrow_right {
+            display: inline-block;
+            padding: 0 4px;
+            font-size: 12px;
            -webkit-transition: 0.3s all;
            -moz-transition: 0.3s all;
            -o-transition: 0.3s all;

--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -19,7 +19,7 @@
                  <ul class="clearfix flex">
                    <template v-for="(item, index) in noticeList">
                      <li class="notice-li clearfix" :key="index + 'notice'">
-                        <a class="color-fff font-14" target="_blank" rel="noopener noreferrer" href="announcement.htm?id=1"
+                        <a class="font-14" target="_blank" rel="noopener noreferrer" href="announcement.htm?id=1"
                          ><span>「{{ item.noticeDate }}」</span>{{ item.noticeTitle }}
                        </a>
                      </li>
@@ -34,6 +34,7 @@
          </div>
        </div>
        <div class="home-content">
+          <div class="home-service">
            <div class="home-content-service commont-width">
              <div class="homepage-title">
                <h2 class="open-service">开放业务</h2>
@@ -45,7 +46,7 @@
                    <template v-for="(item, index) in serviceList">
                      <li :key="index">
                        <img :src="item.serviceIcon" alt="" />
-                      <h3>{{ item.serviceName }}</h3>
+                        <h3 class="font-w-500">{{ item.serviceName }}</h3>
                        <p>{{ item.serviceContent }}</p>
                      </li>
                    </template>
@@ -53,6 +54,7 @@
                </div>
              </div>
            </div>
+          </div>
          <div class="home-content-guide commont-width">
            <div class="homepage-title">
              <h2 class="access-guide">接入指南</h2>
@@ -64,7 +66,7 @@
                  <li>
                    <img src="../../assets/index/banner03.png" alt="" />
                    <div class="inner-li">
-                      <h3>平台服务商</h3>
+                      <h3 class="font-w-500">平台服务商</h3>
                      <p>面向企业内部开发人员和定制服务商，自主开发内部应用，供企业内部使用，对接已有的后台系统。</p>
                      <div>
                        <el-button plain>立即入驻<i class="font_family  icon-jiantou color-000 p-l-8"></i></el-button>
@@ -250,9 +252,23 @@ export default {
                overflow: hidden;
                color: #fff;
                font-size: 14px;
+                a {
+                  color: #fff;
+                }
+                &:hover {
+                  color: #4c70e8;
+                  a {
+                    color: #4c70e8;
+                  }
+                }
              }
              .more-notice {
                margin-left: 236px;
+                &:hover {
+                  a {
+                    color: #4c70e8;
+                  }
+                }
              }
            }
          }
@@ -260,6 +276,10 @@ export default {
      }
      .home-content {
        width: 100%;
+        .home-service {
+          width: 100%;
+          background: #F9FAFF;
+        }
        .home-content-service {
          padding: 40px 0 48px 0;
          text-align: center;
@@ -289,7 +309,7 @@ export default {
        }
        .home-content-guide {
          text-align: center;
-          margin-bottom: 60px;
+          margin: 40px auto 60px auto;
          .access-guide-item {
            li {
              width: 580px;
@@ -298,6 +318,7 @@ export default {
              border-radius: 2.5px;
              cursor: pointer;
              box-shadow: 0px 2px 8px 0px rgba(193,205,241,0.42);
+              transition: all 0.3s;
              img {
                display: inline-block;
                vertical-align: top;
@@ -322,6 +343,11 @@ export default {
                text-align: left;
              }
              &:hover {
+                -webkit-transform: translateY(-10px);
+                -moz-transform: translateY(-10px);
+                -ms-transform: translateY(-10px);
+                -o-transform: translateY(-10px);
+                transform: translateY(-10px);
                .inner-li {
                  border: 1px solid #4C70E8;
                  border-top: 0px;
@@ -343,7 +369,16 @@ export default {
                padding: 0;
                border: none;
                border-radius: 2px;
+                font-size: 16px;
+                color: #0A1633;
+                span {
+                  display: inline-block;
+                  -webkit-transform: translateY(-1px);
+                  -moz-transform: translateY(-1px);
+                  transform: translateY(-1px);
+                }
                &:hover {
+                  color: #4C70E8;
                  border: 1px solid #4C70E8;
                  i {
                    color: #4C70E8;

--- a/static/css/public.css
+++ b/static/css/public.css
@@ -89,7 +89,7 @@ input {
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-family: 'PingFang SC','Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1','Microsoft Yahei',tahoma,ari,'\5B8B\4F53';
 }
 /* HTML5 display-role reset for older browsers */
@@ -199,7 +199,7 @@ scrollbarbutton {
 }
 /* 纵向滚动条宽度 */
-scrollbar[orient="vertical"] {
+scrollbar[orient='vertical'] {
  /*min-width: 15px !important;*/
 }
 }
@@ -225,7 +225,7 @@ scrollcorner {
 }
 /* vertical or horizontal */
-scrollbar[orient="vertical"] {
+scrollbar[orient='vertical'] {
  color: silver;
 }
@@ -309,7 +309,7 @@ input:focus {
  display: block;
  visibility: hidden;
  height: 0;
-  content: "";
+  content: '';
  clear: both;
 }
@@ -815,7 +815,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 }
 .border-bottom-1:after {
-  content: " ";
+  content: '';
  position: absolute;
  left: 0;
  bottom: 0;