8.2.1

src/views/cygx/index.scss

@@ -1,392 +1,418 @@
 .container-cygx {
-   @media screen and (min-width:790px) {
-    width: 1200px;
-    margin:  0 auto;
-  }
-  padding: 0px 34px 150px 34px;
-  padding-bottom: calc(150px + constant(safe-area-inset-bottom));
-  padding-bottom: calc(150px + env(safe-area-inset-bottom));
-  position: relative;
-  z-index: 5;
   @media screen and (min-width:790px) {
-    padding: 25PX 17PX 17PX;
-  }
-  .z-index-content {
-    position: relative;
-    z-index: 5;
-    .deeperReport {
-      width: 280px;
-      height: 70px;
-      background: #1890ff;
-      box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.04);
-      border-radius: 6px;
-      font-size: 30px;
-      color: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 50px auto 0 auto;
-      cursor: pointer;
-    }
-  }
-  .host-collect {
-    margin-top: 20px;
-    h4 {
-      font-size: 28px;
-      @media screen and (min-width:790px) {
-        font-size: 14px;
-      }
-    }
-    @media screen and (min-width:790px) {
-      padding-bottom: 50PX;
-    }
-    background-color: #fff;
-    .host-content {
-      border-top: 1px solid #ECECEC;
-      .host-title {
-        margin: 30px 0;
-        color: #333;
-        font-size: 28px;
-        font-weight: 500;
-        @media screen and (min-width:790px) {
-          margin: 15PX 0;
-          font-size: 14px;
-        }
-      }
-      .item-more {
-        display:flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #CECECE;
-        font-size: 24px;
-        margin-bottom: 30px;
-        @media screen and (min-width:790px) {
-          font-size: 12PX;
-          margin-bottom: 15PX;
-        }
-      }
-      .pv-ollect {
-        display:flex;
-        align-items: center;
-        justify-content: space-between;
-        img {
-          width: 21px;
-          height: 21px;
-          margin-left: 10px;
-          @media screen and (min-width:790px) {
-            width: 12PX;
-            height: 12PX;
-            margin-left: 5PX;
-          }
-        }
-        .pv {
-          height: 16px;
-          @media screen and (min-width:790px) {
-            height: 8PX;
-          }
-        }
-      }
-    }
-  }
-  .search {
-    width: 100%;
-    padding: 20px 20px;
-    line-height: 70px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #fff;
-    z-index: 9;
-    @media screen and (min-width:790px) {
-     padding: 10PX 10PX;
-     line-height: 35PX;
-    }
-    .search-box {
-      display: flex;
-      align-items: center;
-      padding-left: 20px;
-      width: 100%;
-      height: 70px;
-      border-radius: 35px;
-      background: #f6f6f6;
-      color: #8d8d8d;
-      font-size: 24px;
-      @media screen and (min-width:790px) {
-      padding-left: 10PX;
-      height: 25PX;
-      border-radius: 18PX;
-      font-size: 12PX;
-    }
-    }
-  }
-  .content-top {
-    .report-research {
-      display: flex;
-      align-items: center;
-      justify-content:space-between;
-      font-size: 28px;
-      font-weight: 500;
-      color: #333;
-      margin-bottom: 20px;
+   width: 1200px;
+   margin:  0 auto;
+ }
+ padding: 0px 34px 150px 34px;
+ padding-bottom: calc(150px + constant(safe-area-inset-bottom));
+ padding-bottom: calc(150px + env(safe-area-inset-bottom));
+ position: relative;
+ z-index: 5;
+ @media screen and (min-width:790px) {
+   padding: 25PX 17PX 17PX;
+ }
+ .z-index-content {
+   position: relative;
+   z-index: 5;
+   .deeperReport {
+     width: 280px;
+     height: 70px;
+     background: #1890ff;
+     box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.04);
+     border-radius: 6px;
+     font-size: 30px;
+     color: #ffffff;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     margin: 50px auto 0 auto;
+     cursor: pointer;
+   }
+ }
+ .host-collect {
+   margin-top: 20px;
+   h4 {
+     font-size: 28px;
+     @media screen and (min-width:790px) {
+       font-size: 14px;
+     }
+   }
+   @media screen and (min-width:790px) {
+     padding-bottom: 50PX;
+   }
+   background-color: #fff;
+   .host-content {
+     border-top: 1px solid #ECECEC;
+     .host-title {
+       margin: 30px 0;
+       color: #333;
+       font-size: 28px;
+       font-weight: 500;
        @media screen and (min-width:790px) {
-        font-size: 14PX;
-        margin-bottom: 10PX;
-      }
-      img {
-        width: 81px;
-        height: 81px;
-        overflow: hidden;
-        margin-right: 30px;
-        @media screen and (min-width:790px) {
-        width: 40PX;
-        height: 40PX;
-        margin-right: 15PX;
-      }
-      }
-      .time {
-        font-size: 24px;
-        color: #999999;
-        font-weight: 300;
-        @media screen and (min-width:790px) {
-        font-size: 12PX;
-      }
-      }
-      .is-follow {
-        padding: 5px 28px;
-        background-color:#3385FF ;
-        border-radius:59px;
-        color: #fff;
-        @media screen and (min-width:790px) {
-        padding: 3PX 14PX;
-        border-radius:30PX;
-      }
-      }
-      .follow-cancel {
-        background: #F0F0F0;
-        color: #999999;
-      }
-    }
-    .report-title {
-      font-size: 34px;
-      font-weight: bold;
-      color: #4a4a4a;
-      margin: 60px 0 20px;
-  @media screen and (min-width:790px) {
-       margin: 30PX 0 10PX;
-       font-size: 18PX;
-  }
-    }
-    .report-text {
-      color: #999999;
-      font-size: 28px;
-  @media screen and (min-width:790px) {   
+         margin: 15PX 0;
+         font-size: 14px;
+       }
+     }
+     .item-more {
+       display:flex;
+       align-items: center;
+       justify-content: space-between;
+       color: #CECECE;
+       font-size: 24px;
+       margin-bottom: 30px;
+       @media screen and (min-width:790px) {
+         font-size: 12PX;
+         margin-bottom: 15PX;
+       }
+     }
+     .pv-ollect {
+       display:flex;
+       align-items: center;
+       justify-content: space-between;
+       img {
+         width: 21px;
+         height: 21px;
+         margin-left: 10px;
+         @media screen and (min-width:790px) {
+           width: 12PX;
+           height: 12PX;
+           margin-left: 5PX;
+         }
+       }
+       .pv {
+         height: 16px;
+         @media screen and (min-width:790px) {
+           height: 8PX;
+         }
+       }
+     }
+   }
+ }
+ .search {
+   width: 100%;
+   padding: 20px 20px;
+   line-height: 70px;
+   position: fixed;
+   top: 0;
+   left: 0;
+   background: #fff;
+   z-index: 9;
+   @media screen and (min-width:790px) {
+    padding: 10PX 10PX;
+    line-height: 35PX;
+   }
+   .search-box {
+     display: flex;
+     align-items: center;
+     padding-left: 20px;
+     width: 100%;
+     height: 70px;
+     border-radius: 35px;
+     background: #f6f6f6;
+     color: #8d8d8d;
+     font-size: 24px;
+     @media screen and (min-width:790px) {
+     padding-left: 10PX;
+     height: 25PX;
+     border-radius: 18PX;
+     font-size: 12PX;
+   }
+   }
+ }
+ .content-top {
+   .report-research {
+     display: flex;
+     align-items: center;
+     justify-content:space-between;
+     font-size: 28px;
+     font-weight: 500;
+     color: #333;
+     margin-bottom: 20px;
+      @media screen and (min-width:790px) {
        font-size: 14PX;
-  }
-      .seller-list {
-        margin: 20px 0;
+       margin-bottom: 10PX;
+     }
+     img {
+       width: 81px;
+       height: 81px;
+       overflow: hidden;
+       margin-right: 30px;
+       @media screen and (min-width:790px) {
+       width: 40PX;
+       height: 40PX;
+       margin-right: 15PX;
+     }
+     }
+     .time {
+       font-size: 24px;
+       color: #999999;
+       font-weight: 300;
+       @media screen and (min-width:790px) {
+       font-size: 12PX;
+     }
+     }
+     .is-follow {
+       padding: 5px 28px;
+       background-color:#3385FF ;
+       border-radius:59px;
+       color: #fff;
+       @media screen and (min-width:790px) {
+       padding: 3PX 14PX;
+       border-radius:30PX;
+     }
+     }
+     .follow-cancel {
+       background: #F0F0F0;
+       color: #999999;
+     }
+   }
+   .report-title {
+     font-size: 34px;
+     font-weight: bold;
+     color: #4a4a4a;
+     padding: 60px 0 20px;
  @media screen and (min-width:790px) {
-        margin: 10PX 0;
-  }
-      }
-      .report_desc {
-        display: flex;
-        justify-content: space-between;
-      }
-      .tip {
-        color: #3385ff;
-      }
-      .container-abstract {
-        margin: 40px 0 20px;
-        padding-bottom: 40px;
-        border-bottom: 2px dashed #999;
-        position: relative;
-        line-height: 44px;
-        color: #333;
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 8px;
-          height: 44px;
-          background: #2a65f5;
-        }
-    @media screen and (min-width:790px) {
-        margin: 20PX 0 10PX;
-        padding-bottom: 20PX;
-        border-bottom: 1PX dashed #999;
-        position: relative;
-        line-height: 22PX;
-         &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 4PX;
-          height: 22PX;
-          background: #2a65f5;
-        }
-  }
-      }
-    }
-  }
-  .report-link {
-    font-size: 28px;
-    line-height: 80px;
-      @media screen and (min-width:790px) {   
+     padding: 30PX 0 10PX;
+      font-size: 18PX;
+ }
+   }
+   .report-text {
+     color: #999999;
+     font-size: 28px;
+ @media screen and (min-width:790px) {   
       font-size: 14PX;
-     line-height: 40PX;
-    }
-  }
-  .detail-report {
-    @media screen and (min-width:790px) { 
-      padding-bottom: 65PX;
-      font-size: 14PX !important;
-    }
-    
-    p,
-    span {
-      font-size: 28px !important;
-    @media screen and (min-width:790px) {
-      font-size: 14PX !important;
-    }
-    }
-    img {
-      width: 100% !important;
-    }
-    a {
-      color: #333;
-    }
-    table {
-      border-collapse: collapse;
-      width: 100% !important;
-      margin-left: 0 !important;
-    }
-    tr td,
-    th {
-      border: 1px solid #333;
-    @media screen and (min-width:790px) {
-      font-size: 1PX !important;
-    }
-    }
-  }
-  pre {
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    outline: none;
-    border: 0;
-    white-space: pre-wrap;
-    word-break: normal;
-  }
-  .btn-returntop {
-    position: fixed;
-    right: 40px;
-    bottom: 290px;
-    width: 88px;
-    height: 88px;
-    z-index: 10;
-  @media screen and (min-width:790px) {
-    right: 20PX;
-    bottom: 145PX;
-    width: 44PX;
-    height: 44PX;
-  }
-  }
-  .fixed_cont {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: space-around;
-    border-top: 1px solid #ddd;
-    padding-bottom: calc(5px + constant(safe-area-inset-bottom));
-    padding-bottom: calc(5px + env(safe-area-inset-bottom));
-    background-color: #fff;
-    z-index: 9;
-    box-sizing: border-box;
-    .handle-item {
-      padding-top: 14px;
-      text-align: center;
-      line-height: 33px;
-      font-size: 20px;
-      color: #888888;
+ }
+     .seller-list {
+       margin: 20px 0;
+@media screen and (min-width:790px) {
+       margin: 10PX 0;
+ }
+     }
+     .report_desc {
+       display: flex;
+       justify-content: space-between;
+     }
+     .tip {
+       color: #3385ff;
+     }
+     .container-abstract {
+       margin: 40px 0 20px;
+       padding-bottom: 40px;
+       border-bottom: 2px dashed #999;
+       position: relative;
+       line-height: 44px;
+       color: #333;
+       &::before {
+         content: "";
+         position: absolute;
+         top: 0;
+         left: 0;
+         width: 8px;
+         height: 44px;
+         background: #2a65f5;
+       }
+   @media screen and (min-width:790px) {
+       margin: 20PX 0 10PX;
+       padding-bottom: 20PX;
+       border-bottom: 1PX dashed #999;
+       position: relative;
+       line-height: 22PX;
+        &::before {
+         content: "";
+         position: absolute;
+         top: 0;
+         left: 0;
+         width: 4PX;
+         height: 22PX;
+         background: #2a65f5;
+       }
+ }
+     }
+   }
+ }
+ .report-link {
+   font-size: 28px;
+   line-height: 80px;
+     @media screen and (min-width:790px) {   
+     font-size: 14PX;
+    line-height: 40PX;
+   }
+ }
+ .detail-report {
+   @media screen and (min-width:790px) { 
+     padding-bottom: 65PX;
+     font-size: 14PX !important;
+   }
+   
+   p,
+   span {
+     font-size: 28px !important;
+   @media screen and (min-width:790px) {
+     font-size: 14PX !important;
+   }
+   }
+   img {
+     width: 100% !important;
+   }
+   a {
+     color: #333;
+   }
+   table {
+     border-collapse: collapse;
+     width: 100% !important;
+     margin-left: 0 !important;
+   }
+   tr td,
+   th {
+     border: 1px solid #333;
+   @media screen and (min-width:790px) {
+     font-size: 1PX !important;
+   }
+   }
+ }
+ pre {
+   width: 100%;
+   overflow-y: auto;
+   overflow-x: hidden;
+   outline: none;
+   border: 0;
+   white-space: pre-wrap;
+   word-break: normal;
+ }
+ .btn-returntop {
+   position: fixed;
+   right: 40px;
+   bottom: 290px;
+   width: 88px;
+   height: 88px;
+   z-index: 10;
+ @media screen and (min-width:790px) {
+   right: 20PX;
+   bottom: 145PX;
+   width: 44PX;
+   height: 44PX;
+ }
+ }
+ .fixed_cont {
+   position: fixed;
+   bottom: 0;
+   left: 0;
+   right: 0;
+   display: flex;
+   justify-content: space-around;
+   border-top: 1px solid #ddd;
+   padding-bottom: calc(5px + constant(safe-area-inset-bottom));
+   padding-bottom: calc(5px + env(safe-area-inset-bottom));
+   background-color: #fff;
+   z-index: 9;
+   box-sizing: border-box;
+   .handle-item {
+     padding-top: 14px;
+     text-align: center;
+     line-height: 33px;
+     font-size: 20px;
+     color: #888888;
 
-      img {
-        width: 44px;
-        height: 44px;
-        padding: 0;
-        margin: 0;
-      }
-      div {
-        padding: 0;
-        margin: 0;
-      }
-    }
-  }
-  .btn-freecharge {
-        position: fixed;
-        right: 20px;
-        bottom: 380px;
-        z-index: 10;
-        .image {
-          width: 156px;
-          height: 156px;
-        }
-        .remove-icon {
-          width: 31px;
-          height: 31px;
-          position: absolute;
-          right: 0;
-          top: 0;
-        }
-  }
+     img {
+       width: 44px;
+       height: 44px;
+       padding: 0;
+       margin: 0;
+     }
+     div {
+       padding: 0;
+       margin: 0;
+     }
+   }
+ }
+ .btn-freecharge {
+       position: fixed;
+       right: 20px;
+       bottom: 380px;
+       z-index: 10;
+       .image {
+         width: 156px;
+         height: 156px;
+       }
+       .remove-icon {
+         width: 31px;
+         height: 31px;
+         position: absolute;
+         right: 0;
+         top: 0;
+       }
+ }
+ .statement-content {
+   width: calc(100% +  68px);
+   margin-left: -34px;
+   color: #333333;
+   padding: 30px 30px 0 ;
+   background-color: #F0F1F5 !important;
+   .title {
+     font-size: 38px;
+     font-weight: 500;
+   }
+   .content {
+     text-indent: 2em;
+     font-size: 28px;
+     font-weight: 400;
+     line-height: 49px;
+   }
+ }
+}
+.container-cygx-bg {
+ background-color: #F0F1F5 !important;
+ .z-index-content {
+   background-color: #fff;
+   width: calc(100% +  68px);
+   margin-left: -34px;
+   padding:0 30px;
+ }
 }
 .no-cv {
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 #tutorial {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  opacity: 0.1;
-  // transform: translateX(130px) rotate(-38deg);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ opacity: 0.1;
+ // transform: translateX(130px) rotate(-38deg);
 }
 .van-dialog--round-button .van-dialog__footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
-  padding: 0 !important;
-  .van-button--warning {
-    color: #333 !important;
-    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
-  }
-  .van-button--danger {
-    color: #3385ff !important;
-  }
-  .van-button--warning,
-  .van-button--danger {
-    height: 80px !important;
-    border-radius: 0 !important;
-  }
-  .van-goods-action-button--first {
-    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
-  }
+ border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
+ padding: 0 !important;
+ .van-button--warning {
+   color: #333 !important;
+   border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+ }
+ .van-button--danger {
+   color: #3385ff !important;
+ }
+ .van-button--warning,
+ .van-button--danger {
+   height: 80px !important;
+   border-radius: 0 !important;
+ }
+ .van-goods-action-button--first {
+   border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+ }
 }
 .van-icon-search {
-  font-size: 28px;
-  margin-right: 10px;
-   @media screen and (min-width:790px) {
-    font-size: 14PX;
-    margin-right: 5PX;
-  }
+ font-size: 28px;
+ margin-right: 10px;
+  @media screen and (min-width:790px) {
+   font-size: 14PX;
+   margin-right: 5PX;
+ }
 }
 .detail-bottom {
-  padding-bottom: 130px;
+ padding-bottom: 130px;
 }

src/views/cygx/raiReportDtl.vue

@@ -1,19 +1,25 @@
 <template>
-  <div class="container-cygx" v-show="haveData" :class="reportInfo.IsResearch ? 'no-cv' : ''">
+  <div :class="['container-cygx', reportInfo.IsResearch && 'no-cv', reportInfo.IsSpecialArticle && 'container-cygx-bg']" v-show="haveData">
     <canvas id="tutorial" ref="tutorial"></canvas>
     <div class="z-index-content">
       <div class="content-top">
         <div class="report-title">{{ reportInfo.Title }}</div>
         <div class="report-text">
           <template v-if="!reportInfo.IsResearch">
-            <div class="report_desc">
-              <span class="author">{{ reportInfo.Department }}</span>
-              <span>{{ reportInfo.PublishDate }}</span>
-            </div>
-            <div class="seller-list">
-              <span>联系人:</span>
-              <span v-for="(item, index) in reportInfo.SellerList" :key="index"> {{ item.SellerName }}({{ item.SellerMobile }})&nbsp;&nbsp; </span>
+            <div v-if="reportInfo.IsSpecialArticle">
+              <span>{{ reportInfo.PublishDate }} &nbsp;&nbsp;&nbsp;&nbsp;</span>
+              <span class="author">{{ reportInfo.SellerAndMobile }}</span>
             </div>
+            <template v-else>
+              <div class="report_desc">
+                <span class="author">{{ reportInfo.Department }}</span>
+                <span>{{ reportInfo.PublishDate }}</span>
+              </div>
+              <div class="seller-list" v-if="reportInfo.IsSpecialArticle">
+                <span>联系人:</span>
+                <span v-for="(item, index) in reportInfo.SellerList" :key="index"> {{ item.SellerName }}({{ item.SellerMobile }})&nbsp;&nbsp; </span>
+              </div>
+            </template>
           </template>
           <template v-else>
             <div class="report-research">
@@ -29,7 +35,7 @@
               </div>
             </div>
           </template>
-          <div>注：请务必阅读<span class="tip" @click="showTips = true"> &nbsp;免责声明</span></div>
+          <div v-if="!reportInfo.IsSpecialArticle">注：请务必阅读<span class="tip" @click="showTips = true"> &nbsp;免责声明</span></div>
           <div class="container-abstract">&nbsp;&nbsp;摘要:&nbsp;{{ reportInfo.Abstract }}</div>
         </div>
       </div>
@@ -61,6 +67,12 @@
           </div>
         </div>
       </div>
+      <div v-if="reportInfo.IsSpecialArticle" class="statement-content">
+        <p class="title">免责声明</p>
+        <p class="content">
+          本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
+        </p>
+      </div>
     </div>
     <div class="btn-returntop">
       <img src="~@/assets/cygx/returntop.png" @click="scrolltop" style="width: 40px" />