Merge branch 'master' of https://gitee.com/TDuckApp/tduck-front

4 years ago · 0191398024
8 changed files with 3312 additions and 117 deletions
--- a/.env.production
+++ b/.env.production
@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 填鸭
+VUE_APP_TITLE = tudck-填鸭
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VUE_APP_API_ROOT = /tduck-api
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
--- a/src/App.vue
+++ b/src/App.vue
@ -39,40 +39,4 @@ export default {
    }
 }
 </script>
-<style lang="scss">
-.github-btn {
-  a {
-    font-weight: bold;
-    color: #303133;
-    padding: 4px 12px;
-    border: solid 1px #DCDFE6;
-    margin-left: 8px;
-    position: relative;
-    border-radius: 4px;
-  }
-  a:hover{
-    color: #2C67E3;
-  }
-  a:last-child:before {
-      position: absolute;
-      display: inline-block;
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
-      left: -15px;
-      top: 25%;
-      content: '';
-  }
-  /* 小角的背景填充*/
-  a:last-child:after {
-      position: absolute;
-      display: inline-block;
-      border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
-      border-style: solid;
-      border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
-      left: -12px;
-      top: 25%;
-      content: '';
-  }
-}
-</style>
+
--- a/src/assets/images/indexLogo.svg
+++ b/src/assets/images/indexLogo.svg
--- a/src/views/account/ForgetPwd.vue
+++ b/src/views/account/ForgetPwd.vue
@ -2,7 +2,7 @@
    <div class="app-container">
        <div v-if="retrieveStep===1" class="pwd-container">
            <div>
-                <img class="header-logo-img" src="@/assets/images/indexLogo.png"
+                <img class="header-logo-img" src="@/assets/images/indexLogo.svg"
                     @click="$router.push({path:'/'})"
                >
                <h4 class="title">找回密码</h4>
@ -59,7 +59,7 @@
            </div>
        </div>
        <div v-if="retrieveStep===2" class="reset-pwd-view">
-            <img class="header-logo-img" src="@/assets/images/indexLogo.png"
+            <img class="header-logo-img" src="@/assets/images/indexLogo.svg"
                 @click="$router.push({path:'/'})"
            >
            <div>
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
@ -6,7 +6,7 @@
                    <i class="el-icon-back" @click="$router.back(-1)" />
                </el-col>
                <el-col :span="3">
-                    <img class="header-logo" src="@/assets/images/indexLogo.png" @click="$router.push({path:'/home'})">
+                    <img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})">
                </el-col>
                <el-col :span="1">
                    <el-button type="primary" icon="el-icon-view" @click="previewDialogVisible=true">
@ -131,7 +131,7 @@ export default {

 .header-container {
  width: 100%;
-  height: 60px;
+  height: 50px;

  .el-icon-back {
    font-size: 22px;
@ -146,7 +146,7 @@ export default {
  }

  .header-logo {
-    height: 60px;
+    height: 45px;
    width: 200px;
  }
 }
--- a/src/views/form/preview/ProjectForm.vue
+++ b/src/views/form/preview/ProjectForm.vue
@ -216,10 +216,13 @@ export default {
            // 计算页数 添加分页
            _.keys(perPageFields).forEach(key => {
                let pageItem = _.get(pageFields, key)
+                if (pageItem) {
                    let fields = _.get(perPageFields, key)
                    pageItem.totalPageNum = len
                    fields.push(pageItem)
                    _.set(perPageFields, key, fields)
+                }
+
            })
            this.perPageFields = perPageFields
        },
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -3,7 +3,7 @@
        <el-container>
            <el-header class="header-container" height="38">
                <div>
-                    <img class="header-logo-img" src="@/assets/images/indexLogo.png"
+                    <img class="header-logo-img" src="@/assets/images/indexLogo.svg"
                         @click="$router.push({path:'/'})"
                    >
                </div>
@ -173,7 +173,7 @@ $menuActiveText: #409eff;
        width: 120px;
        height: 35px;
        float: left;
-        margin-left: 25px;
+        margin-left: 55px;
    }
    .right-header {
        display: flex;
--- a/src/views/official/index.vue
+++ b/src/views/official/index.vue
@ -13,7 +13,7 @@
                    @click="$router.push({path:'/'})"
                >
                    <img
-                        src="https://demo.tduckapp.com/img/TDUCK@2x.8b6c71be.png"
+                        src="@/assets/images/official/TDUCK@2x.png"
                        alt="img"
                    >
                </div>
@ -75,7 +75,7 @@
                    </el-col>
                </el-row>
                <div data-aos="zoom-in" data-aos-duration="1000" class="content-wrapper-image">
-                    <img src="/img/desc1.b1b39e1f.png">
+                    <img src="@/assets/images/official/desc1.png">
                </div>
                <div class="content-wrapper-solutions">
                    <p class="title">我们的解决方案</p>
@ -170,6 +170,7 @@

 <script>
 import store from '@/store'
+
 export default {
    name: 'AppIndex',
    data() {
@ -304,6 +305,7 @@ export default {
                title: '关注下 Star 数',
                duration: 0,
                position: 'bottom-left',
+                customClass: 'notify-success',
                dangerouslyUseHTMLString: true,
                message: '<div style="line-height: 30px">我们需要您的支持，请点击按钮帮助我们增加 gitee star。<span class="github-btn"><a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Start</a></span></div>'
            })
@ -313,41 +315,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.github-btn {
-  a {
-    font-weight: bold;
-    color: #303133;
-    padding: 4px 12px;
-    border: solid 1px #DCDFE6;
-    margin-left: 8px;
-    position: relative;
-    border-radius: 4px;
-  }
-  a:hover{
-    color: #2C67E3;
-  }
-  a:last-child:before {
-      position: absolute;
-      display: inline-block;
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
-      left: -15px;
-      top: 25%;
-      content: '';
-  }
-  /* 小角的背景填充*/
-  a:last-child:after {
-      position: absolute;
-      display: inline-block;
-      border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
-      border-style: solid;
-      border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
-      left: -12px;
-      top: 25%;
-      content: '';
-  }
-}
+
 .header-page {
  max-width: 1280px;
  // box-shadow: rgb(0 0 0 / 5%) 0px 4px 6px;
@ -356,21 +324,25 @@ export default {
  padding: 0 24px;
  justify-content: space-between;
  flex-wrap: wrap;
+
  .header-logo {
    display: inline-block;
    position: relative;
    width: 150px;
    min-width: 150px;
    line-height: 64px;
+
    img {
      width: 100%;
      vertical-align: middle;
      display: inline-block;
    }
  }
+
  .header-btn {
    position: relative;
    text-align: right;
+
    button {
      font-size: 12px;
      font-weight: 400;
@ -387,28 +359,35 @@ export default {
      em:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
+
      em:nth-child(2) {
        opacity: 0;
      }
+
      em:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }
    }
  }
+
  .header-menu {
    a {
      font-weight: 400;
      color: #fff;
      padding: 0 20px;
    }
+
    a:first-child {
      padding-left: 0;
    }
+
    a:last-child {
      padding-right: 0;
    }
+
    .add-contact-me {
      position: relative;
+
      div {
        margin-top: 20px;
        position: absolute;
@ -419,12 +398,14 @@ export default {
        transform: translateY(100px);
        transition: 0.3s;
      }
+
      img {
        width: 100px;
        height: 100px;
      }

    }
+
    :hover {
      div {
        visibility: visible;
@ -433,10 +414,12 @@ export default {
      }
    }
  }
+
  .header-menu-open {
    height: calc(48px * 5);
  }
 }
+
 .back-box {
  color: #fff;
  position: absolute;
@ -449,6 +432,7 @@ export default {
  transform: rotate(-22deg);
  background: linear-gradient(60deg,#1E53F4,#1E53F4,#30cffd,#30cffd,#30cffd);
 }
+
 .content-page {
  height: calc(100vh - 64px);
  color: #fff;
@ -461,6 +445,7 @@ export default {
  // align-items:center;
  // text-align: center;
  position: relative;
+
  .content-explain {
    z-index: 1;
    position: absolute;
@ -471,10 +456,12 @@ export default {
    h1:first-child {
      font-size: 50px;
    }
+
    > div {
      width: 100% !important;
      margin-top: 40px;
      text-align: center;
+
      .banner-button {
        &-start {
          min-width: 140px;
@ -487,12 +474,14 @@ export default {
          line-height: 40px;
          height: 40px;
          transition: transform .3s, box-shadow .3s;
+
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 13px 24px fade(#ffffff, 45);
            // background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%);
          }
        }
+
        &-preview {
          box-shadow: 0 8px 24px fade(#ffffff, 35);
          border-radius: 20px;
@ -503,6 +492,7 @@ export default {
          height: 40px;
          background-color: rgba($color: #000000, $alpha: 0);
          transition: transform .3s, box-shadow .3s;
+
          &:hover {
            color: #2667f5;
            background-color: #FFF;
@ -515,16 +505,19 @@ export default {
      }
    }
  }
+
  .image {
    position: absolute;
    top: 20%;
    right: 0;
    width: 50%;
+
    img {
      width: 100%;
    }
  }
 }
+
 .content-wrapper {
  .title {
    text-align: center;
@ -533,10 +526,12 @@ export default {
    color: #232323;
    line-height: 76px;
  }
+
  max-width: 1280px;
  margin: auto;
  margin-top: 200px;
  text-align: center;
+
  .en-title {
    width: 100%;
    white-space: nowrap;
@ -555,6 +550,7 @@ export default {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
+
  &-features {
    > div {
      p:first-child {
@ -563,6 +559,7 @@ export default {
        color: #222;
        line-height: 68px;
      }
+
      p:last-child {
        font-size: 10px;
        font-weight: 300;
@ -571,12 +568,15 @@ export default {
      }
    }
  }
+
  &-image {
    width: 100%;
+
    img {
      width: 100%;
    }
  }
+
  &-solutions {
    p {
      text-align: center;
@ -600,26 +600,31 @@ export default {
      text-align: center;
      cursor: pointer;
      transition: transform .3s, box-shadow .3s;
+
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54);
      }
+
      img {
        width: 197px;
        height: 147px;
      }
+
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #276ef6;
        line-height: 69px;
      }
+
      .desc {
        font-size: 9px;
        font-weight: 300;
        color: #222;
        line-height: 15px;
      }
+
      :last-child {
        font-size: 10px;
        font-weight: 300;
@ -628,6 +633,7 @@ export default {
      }
    }
  }
+
  &-company {
    display: flex;
    flex-direction: column;
@ -635,34 +641,42 @@ export default {
    align-items: center;
    justify-content: flex-start;
    margin-top: 200px;
+
    img {
      width: 100%;
    }
  }
 }
+
 .footer-page {
  max-width: 1280px;
  margin: auto;
+
  .footer-content {
    padding: 64px 24px 32px 24px;
    color: #FFF;
+
    h1 {
      font-size: 20px;
      margin-bottom: 24px;
    }
+
    a, span, p {
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 400;
    }
+
    .qrcode {
      width: 100%;
      display: flex;
      align-content: center;
+
      div {
        margin: 10px;
      }
+
      img {
        width: 50%;
        margin-top: 30px;
@ -671,17 +685,20 @@ export default {
      }
    }
  }
+
  .footer-copyright {
    padding-bottom: 12px;
    text-align: center;
    color: #FFF;
    font-weight: 300;
+
    p {
      margin-top: 0;
      margin-bottom: 8px;
    }
  }
 }
+
 // @media screen and (max-width: 576px) {
@media screen and (max-width: 600px) {
  #back-box {
@ -700,12 +717,15 @@ export default {
  }
  #content-page {
    padding: 24px 0;
+
    h1:first-child {
      font-size: 30px;
    }
+
    h1:last-child {
      font-size: 24px;
    }
+
    #image {
      top: 53% !important;
      right: 0 !important;
@ -713,6 +733,7 @@ export default {
    }
  }
 }
+
@media screen and (max-width: 767px) {
  .el-header {
    overflow: hidden;
@ -722,6 +743,7 @@ export default {
    width: 100%;
    height: 0;
    order: 5;
+
    a {
      padding: 0 20px !important;
      display: block;
@ -733,6 +755,7 @@ export default {
    button {
      margin-right: 48px;
    }
+
    .header-mobile-menu {
      width: 16px;
      height: 14px;
@ -742,6 +765,7 @@ export default {
      cursor: pointer;
      float: right;
      z-index: 100;
+
      em {
        display: block;
        width: 100%;
@ -750,6 +774,7 @@ export default {
        margin-top: 4px;
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity;
      }
+
      :first-child {
        margin-top: 0;
      }
@ -757,6 +782,7 @@ export default {
  }
  #content-page {
    text-align: center;
+
    > div:first-child {
      width: 100%;
      position: unset !important;
@ -765,6 +791,7 @@ export default {
      padding: 0;
      // top: 10% !important;
    }
+
    #image {
      top: 40%;
      right: 10%;
@ -776,16 +803,19 @@ export default {
  }
  .footer-page {
    text-align: center;
+
    .project-url {
      margin-left: 0;
    }
  }
 }
+
@media screen and (min-width: 950px) {
  .header-btn {
    width: 150px;
  }
 }
+
@media screen and (max-width: 1000px) {
  #content-page {
    div:last-child {
@ -796,3 +826,43 @@ export default {
  }
 }
 </style>
+<style lang="scss">
+.github-btn {
+  a {
+    font-weight: bold;
+    color: #303133;
+    padding: 4px 12px;
+    border: solid 1px #DCDFE6;
+    margin-left: 8px;
+    position: relative;
+    border-radius: 4px;
+  }
+
+  a:hover {
+    color: #2C67E3;
+  }
+
+  a:last-child:before {
+    position: absolute;
+    display: inline-block;
+    border-width: 7px;
+    border-style: solid;
+    border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
+    left: -15px;
+    top: 25%;
+    content: '';
+  }
+
+  /* 小角的背景填充*/
+  a:last-child:after {
+    position: absolute;
+    display: inline-block;
+    border-width: 6px; /*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
+    border-style: solid;
+    border-color: transparent #eee transparent transparent; /*边框颜色（小角的填充色）要与整体元素背景一致*/
+    left: -12px;
+    top: 25%;
+    content: '';
+  }
+}
+</style>