一行换行

components/ItemComponent/activityItem.vue

@@ -1,23 +1,40 @@
 <template>
   <view class="container-activity-item" @click="goDetail(list)">
+    <image v-if="list.IsResearchPoints" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/research_points.png" class="content-img"></image>
+    <block v-else>
+      <image v-if="list.TripStatus == 2" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/trip_icon.png" class="content-img"></image>
+      <image v-if="list.TripStatus == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/Ybm.png" class="content-img"></image>
+    </block>
     <view class="content-sign">
-      <view :class="[list.ActivityType === 0 ? 'is-down' : 'is-up', 'is-up-down']">{{ list.ActivityType === 0 ? "线下" : "线上" }}</view>
-      <view v-if="list.ActiveState == 1 || list.ActiveState == 2" :class="[list.ActiveState == 1 ? 'is-down-state' : 'is-up-state', 'is-up-down', 'state']">
-        {{ list.ActiveState == 1 ? "未开始" : "进行中" }}
-      </view>
+      <view :class="[list.ActivityType === 0 ? 'is-down' : 'is-up', 'is-up-down', 'global_content_center']">{{ list.ActivityType === 0 ? "线下" : "线上" }}</view>
+      <image
+        v-if="list.ActiveState == 1 || list.ActiveState == 2"
+        :src="
+          list.ActiveState == 1 ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_started_activity.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/in_progress_activity.png'
+        "
+      ></image>
       <block v-else>
-        <view v-if="list.TripStatus != 1" :class="['is-end', 'is-up-down', 'state']"> 已结束 </view>
+        <image v-if="list.TripStatus != 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/end_activity.png"></image>
       </block>
     </view>
-    <view class="content-type"> {{ list.ActivityTypeName || "专项产业调研" }}</view>
-    <view :class="['content-title', list.ResearchTheme && 'content-min-hight',
-    list.IsResearchPoints?'yan-xuan-point-tag':list.IsResearch?'yan-xuan-tag':list.IsExternalLabel?'external-label':'']" 
-    v-if="list.ActivityName || list.ResearchTheme">
+    <view class="content-type global_title">
+      <view>
+        {{ list.ActivityTypeName || "专项产业调研" }}
+      </view>
+      <view v-if="list.ResearchTheme && list.City" class="content-city">
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/position.png"></image>
+        {{ list.City }}
+      </view>
+    </view>
+
+    <view class="content-title" v-if="list.ActivityName || list.ResearchTheme">
       <mp-html :content="richTextClamp(3) + (list.ActivityName || list.ResearchTheme) + '</div>'" />
     </view>
-    <view style="display: flex" class="content-text content-min-hight text_twoLine" v-if="list.ActivityTimeText && list.SourceType !== 1">
+
+    <view style="display: flex" class="content-text text_twoLine" v-if="list.ActivityTimeText && list.SourceType !== 1">
       <text> 活动时间：{{ list.ActivityTimeText }}</text>
     </view>
+
     <view class="content-text text-Line" v-else>
       {{ list.Host ? "主持人:" : list.Expert ? "专家背景:" : list.Speaker ? "主讲人:" : list.DistinguishedGuest ? "嘉宾:" : "" }}
       {{ list.Host ? list.Host : list.Expert ? list.Expert : list.Speaker ? list.Speaker : list.DistinguishedGuest ? list.DistinguishedGuest : "" }}
@@ -25,11 +42,11 @@
     <view class="content-time" v-if="list.SourceType == 1">
       {{ list.ActivityTimeText }}
     </view>
-    <view v-if="list.City" class="content-city">
-      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png"></image>
+    <view v-if="list.City && !list.ResearchTheme" class="content-city">
+      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/position.png"></image>
       {{ list.City }}
     </view>
-    <view :class="['content-btn', isEndBtnSlide(list) > 2 && 'content-btn-end']" v-if="isUserBindingPhoneNumber ">
+    <view :class="['content-btn', isEndBtnSlide(list) > 2 && 'content-btn-end']" v-if="isUserBindingPhoneNumber">
       <block v-if="list.SourceType === 1">
         <block v-if="list.ActiveState == 1">
           <text class="item-btn btn-solid" v-if="list.IsShowOutboundCall && list.ActivityTypeId == 1" @click.stop="signupIsAddOfCancel(list, 1)">{{
@@ -72,8 +89,6 @@
         </view>
       </view>
     </view>
-    <image v-if="list.TripStatus == 2" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/confirm_XC_new.png" class="content-img"></image>
-    <image v-if="list.TripStatus == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Y_apply_new.png" class="content-img"></image>
     <!-- 所有自定义弹框 -->
     <modalDialog
       :isShow="isShow"
@@ -621,41 +636,38 @@ export default {
   background: #ffffff;
   box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
   border-radius: 8rpx;
-  padding: 20rpx;
+  padding: 0 12rpx 12rpx;
   margin-bottom: 20rpx;
   font-size: 24rpx;
   overflow: hidden;
   .content-sign {
+    margin-top: 12rpx;
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    image {
+      display: block;
+      width: 122rpx;
+      height: 42rpx;
+    }
     .is-up-down {
       width: 110rpx;
+      font-size: 24rpx;
+      font-weight: 500;
       height: 40rpx;
       text-align: center;
-      line-height: 40rpx;
       border-radius: 4rpx;
-      color: #fff;
+      color: #333333;
     }
     .is-up {
-      // background: linear-gradient(90deg, #0151ff 0%, #01b9ff 100%);
-      background-color: #DFE8FF;
-      color: #3385FF;
-    }
-    .is-up-state {
-      background-color: #FFFCF6;
-      color:#F1925C ;  
-    }
-    .is-down-state {
-      background-color: #F6F9FF;
-      color: #3385FF;
+      background-color: #e5efff;
     }
     .is-down {
-      // background: linear-gradient(90deg, #ff8a05 0%, #ffb74d 100%);
-      background-color: #FFFAF2;
-      color: #FF8A00;
+      background-color: #f2e8cc;
     }
     .is-end {
-      color: #C0C0C0;
-      background-color: #EDF2F5;
+      color: #c0c0c0;
+      background-color: #edf2f5;
     }
     .state {
       border-radius: 4rpx 0 4rpx 0;
@@ -663,97 +675,49 @@ export default {
     }
   }
   .content-type {
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #333333;
-    line-height: 38rpx;
-    margin: 10rpx 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 24rpx 0;
   }
   .content-title {
-    font-size: 28rpx;
+    font-size: 24rpx;
     font-weight: 400;
     color: #333333;
-    line-height: 44rpx;
-    position: relative;
-    image {
-      width: 73rpx;
-      height: 30rpx;
-      vertical-align: bottom;
-			padding-bottom: 6rpx;
-      margin-right: 16rpx;
-    }
-  }
-  .yan-xuan-point-tag{
-		text-indent: 82rpx;
-		&::before {
-		  content: "";
-		  position: absolute;
-		  top: 8rpx;
-			background-image: url(https://hzstatic.hzinsights.com/cygx/icon/Research_Points.png);
-			background-size: 100% 100%;
-			background-repeat: no-repeat;
-		  left: 0;
-		  width: 73rpx;
-		  height: 30rpx;
-		}
-	}
-  .yan-xuan-tag{
-		text-indent: 82rpx;
-		&::before {
-		  content: "";
-		  position: absolute;
-		  top: 8rpx;
-			background-image: url(https://hzstatic.hzinsights.com/cygx/icon/Research_normal.png);
-			background-size: 100% 100%;
-			background-repeat: no-repeat;
-		  left: 0;
-		  width: 73rpx;
-		  height: 30rpx;
-		}
-	}
-  .external-label{
-    text-indent: 82rpx;
-		&::before {
-		  content: "";
-		  position: absolute;
-		  top: 8rpx;
-			background-image: url(https://hzstatic.hzinsights.com/cygx/icon/activity_external.png);
-			background-size: 100% 100%;
-			background-repeat: no-repeat;
-		  left: 0;
-		  width: 73rpx;
-		  height: 30rpx;
-		}
+    line-height: 36rpx;
   }
+
   .content-text {
-    font-size: 28rpx;
+    font-size: 22rpx;
     font-weight: 400;
     color: #999999;
-    line-height: 44rpx;
+    line-height: 30rpx;
     margin: 10rpx 0;
   }
 
   .content-time {
-    color: #333333;
+    font-size: 22rpx;
+    font-weight: 400;
+    color: #999999;
+    line-height: 30rpx;
     margin-bottom: 15rpx;
   }
   .content-city {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    color: #3385ff;
+    color: $uni-color-new;
+    font-size: 26rpx;
     image {
-      width: 27rpx;
+      width: 32rpx;
       height: 32rpx;
       margin-right: 8rpx;
     }
   }
   .content-img {
-    position: absolute;
-    top: 49rpx;
-    right: 0;
-    width: 205rpx;
-    height: 119rpx;
+    width: 186rpx;
+    height: 48rpx;
+    margin-left: -12rpx;
   }
 
   .content-btn {
@@ -763,19 +727,19 @@ export default {
     margin-top: 20rpx;
     justify-content: flex-end;
     .item-btn {
-      color: #3385ff;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 113rpx;
+      padding: 0 12rpx;
       height: 42rpx;
       border-radius: 4rpx;
-      border: 1rpx solid #3385ff;
+      color: $uni-color-new;
+      border: 1rpx solid $uni-color-new;
       margin-left: 20rpx;
       flex-shrink: 0;
     }
     .btn-solid {
-      background: #3385ff;
+      background: $uni-color-new;
       border: none;
       color: #fff;
     }
@@ -809,17 +773,5 @@ export default {
       border-bottom: 1rpx solid #ebebeb;
     }
   }
-  .content-min-hight {
-    min-height: 88rpx;
-    text-overflow: -o-ellipsis-lastline;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    word-wrap: break-word;
-    word-break: break-all;
-    -webkit-line-clamp: 2 !important;
-    line-clamp: 2 !important;
-  }
 }
 </style>

components/ItemComponent/chartItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="container-chart-item" @click="goDetail(list)">
-    <view class="chart-title">
+  <view class="container-chart-item global_card_content" @click="goDetail(list)">
+    <view class="global_title">
       <mp-html :content="richTextClamp(2) + list.Title + '</div>'" />
     </view>
     <view class="item-content-img">
@@ -80,8 +80,11 @@ export default {
     border-bottom: 1rpx solid #dcdfe6;
   }
   .item-content-img {
+    margin-top: 20rpx;
     width: 100%;
-    height: 286rpx;
+    height: 228rpx;
+    padding: 10rpx 20rpx;
+    background-color: #f0f1f3;
     image {
       width: 100%;
       height: 100%;
@@ -93,48 +96,47 @@ export default {
     justify-content: space-between;
     padding-bottom: 20rpx;
     .cancel {
-      background: #3385ff;
+      background: $uni-color-new;
       margin-right: 20rpx;
       color: #ffffff;
     }
     .remove {
-      border: 1px solid #3385ff;
-      color: #3385ff;
+      border: 1px solid $uni-color-new;
+      color: $uni-color-new;
     }
     text {
       width: 150rpx;
       height: 46rpx;
       line-height: 46rpx;
-      border-radius: 4rpx;
       text-align: center;
       font-size: 24rpx;
+      border-radius: 8rpx;
     }
   }
   .my-chart-collect {
     position: absolute;
-    top: 0;
+    top: -2rpx;
     left: 0;
     width: 0;
     height: 0;
-    border-top: 60rpx solid #3385ff;
-    border-right: 60rpx solid transparent;
+    border-top: 30rpx solid $uni-color-new;
+    border-right: 30rpx solid transparent;
   }
   .chart-tag {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 78rpx;
-    border-top: 1rpx solid #dcdfe6;
     .tag-item {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 150rpx;
-      height: 38rpx;
-      border-radius: 28rpx;
-      border: 2rpx solid #3189ff;
-      color: #3385ff;
+      height: 44rpx;
+      border-radius: 150rpx;
+      color: $uni-color-new;
       font-size: 24rpx;
+      background-color: #e5efff;
     }
   }
 }

components/ItemComponent/reportItem.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container-report-item global_card_content" @click="goDetail(list)">
-    <!-- :class="list.CategoryId == '0'?'yan-xuan-tag':'front-vertical-line'"  这个位置是买方研选 先空着 -->
+    <image v-if="list.CategoryId == '0'" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/Research_normal.png" class="yan-xuan-tag"></image>
     <view class="global_title" v-if="list.Title">
       <mp-html :content="richTextClamp(3) + list.Title + '</div>'" />
     </view>
@@ -72,18 +72,20 @@ export default {
   overflow: hidden;
 
   .yan-xuan-tag {
-    text-indent: 82rpx;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 6rpx;
-      background-image: url(https://hzstatic.hzinsights.com/cygx/icon/Research_normal.png);
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      left: 0;
-      width: 73rpx;
-      height: 30rpx;
-    }
+    width: 160rpx;
+    height: 48rpx;
+    margin: -20rpx 0 0 -20rpx;
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   top: 6rpx;
+    //   background-image: url(https://hzstatic.hzinsights.com/cygx/icon/Research_normal.png);
+    //   background-size: 100% 100%;
+    //   background-repeat: no-repeat;
+    //   left: 0;
+    //   width: 73rpx;
+    //   height: 30rpx;
+    // }
   }
 
   // .item-content,
@@ -107,7 +109,7 @@ export default {
     }
   }
   .item-abstract {
-    font-size: 18rpx;
+    font-size: 22rpx;
     font-weight: 400;
     color: #333333;
     line-height: 30rpx;
@@ -129,8 +131,8 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: #999 ;
-    font-size: 18rpx;
+    color: #999;
+    font-size: 22rpx;
     line-height: 30rpx;
     .item-examine {
       display: flex;

components/ItemComponent/roadshowItem.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="container-roadshow-item">
-    <view class="title" @click="goDetails">
-       <mp-html :content="richTextClamp(2) + list.Title + '</div>'" />
+  <view class="global_card_content container-roadshow-item">
+    <view class="global_title" @click="goDetails">
+      <mp-html :content="richTextClamp(2) + list.Title + '</div>'" />
     </view>
     <view class="cover-item" :style="{ 'background-image': 'url(' + list.BackgroundImg + ')' }">
       <block v-if="list.Type == 2 || list.Type == 3">
@@ -27,13 +27,13 @@
     </view>
     <view class="title-share">
       <view class="share share-collected">
-        <image @click="myLeavingMessageHandler(list)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
+        <image @click="myLeavingMessageHandler(list)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/leaving_message.png"></image>
         <image
           @click="isCollectionHandeler(list)"
-          :src="list.IsCollect ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'"
+          :src="list.IsCollect ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_collected.png'"
         ></image>
         <button class="share-icon" open-type="share" :data-item="list">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/share-btn-icon.png"></image>
         </button>
       </view>
     </view>
@@ -203,11 +203,10 @@ export default {
   width: 100%;
   background: #ffffff;
   box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
-  padding: 20rpx 14rpx;
-  border-radius: 8rpx;
-  margin-bottom: 20rpx;
   overflow: hidden;
+  padding-top: 10rpx;
   .cover-item {
+    margin-top: 10rpx;
     width: calc(100% + 28rpx);
     height: 250rpx;
     display: flex;
@@ -227,7 +226,7 @@ export default {
       right: 0;
       width: 0;
       height: 0;
-      border-top: 90rpx solid #3385ff;
+      border-top: 90rpx solid $uni-color-new;
       border-left: 90rpx solid transparent;
     }
 
@@ -240,7 +239,7 @@ export default {
     }
 
     .identification-video {
-      border-top: 90rpx solid #ffab31 !important;
+      border-top: 90rpx solid #fa9550 !important;
     }
 
     .img-bg {
@@ -283,12 +282,14 @@ export default {
   .title-share {
     margin-top: 20rpx;
     padding-top: 20rpx;
-    border-top: 1rpx solid #dcdfe6;
+    image {
+      width: 48rpx;
+      height: 48rpx;
+    }
     .share {
       display: flex;
       align-items: center;
       justify-content: space-between;
-
       .share-icon {
         display: flex;
         align-items: center;
@@ -296,23 +297,6 @@ export default {
         width: 50rpx;
         height: 50rpx;
       }
-
-      image {
-        width: 44rpx;
-        height: 44rpx;
-      }
-
-      .share-text {
-        position: flex;
-        align-items: center;
-        padding: 0 10rpx;
-
-        image {
-          width: 20rpx;
-          height: 20rpx;
-          margin-right: 5rpx;
-        }
-      }
     }
 
     .share-collected {

pages/index/components/ItemContent.vue

@@ -1,10 +1,10 @@
 <template>
-  <view class="morning-item" @click="isGoDetalisOfDlgHandler(list)">
+  <view class="morning-item global_card_content" @click="isGoDetalisOfDlgHandler(list)">
     <block v-if="list.Source == 'meetingreviewchapt'">
-      <view class="item-title" v-if="list.IndustryName">
+      <view class="global_title" v-if="list.IndustryName">
         <mp-html :content="richTextClamp(3) + `【${list.IndustryName}】晨会精华 ` + '</div>'" />
       </view>
-      <view class="item-rich-text">
+      <view class="item-rich-text global_content">
         <mp-html :content="richTextClamp(10) + list.Content + '</div>'" />
       </view>
       <view class="item-time">
@@ -12,16 +12,16 @@
       </view>
     </block>
     <block v-else>
-      <view class="item-title" v-if="list.Title">
+      <view class="global_title" v-if="list.Title">
         <mp-html :content="richTextClamp(3) + list.Title + '</div>'" />
       </view>
-      <view class="item-rich-text" v-if="list.MarketStrategy">
+      <view class="item-rich-text global_content" v-if="list.MarketStrategy">
         <mp-html :content="richTextClamp(10) + list.MarketStrategy + '</div>'" />
       </view>
-      <view class="item-rich-text" v-else-if="list.Source == 'productinterior'">
+      <view class="item-rich-text global_content" v-else-if="list.Source == 'productinterior'">
         <mp-html :content="richTextClamp(10) + list.Body + '</div>'" />
       </view>
-      <view class="item-rich-text" v-else>
+      <view class="item-rich-text global_content" v-else>
         <mp-html :content="richTextClamp(10) + list.Abstract + '</div>'" />
       </view>
       <view class="item-time">
@@ -109,9 +109,9 @@ export default {
   .item-time {
     display: flex;
     align-items: center;
-    color: #acacac;
-    font-size: 24rpx;
-    line-height: 28rpx;
+    color: #999;
+    font-size: 22rpx;
+    line-height: 30rpx;
   }
 }
 </style>

pages/index/index.vue

@@ -96,7 +96,7 @@
     </view>
     <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" ref="suspenButton">
       <template slot="center">
-        <image mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/most_confidential.png"> </image>
+        <image mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/most_confidential.png "> </image>
       </template>
       <template slot="top">
         <image @click.stop="goSecretDetail(1)" mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/company_icon.png"> </image>
@@ -602,7 +602,7 @@ export default {
       padding: 8rpx 40rpx;
       background: #ffffff;
       border: 1rpx solid #dcdfe6;
-      border-radius: 39rpx; 
+      border-radius: 39rpx;
       margin-right: 20rpx;
       white-space: nowrap;
       margin-top: 20rpx;

pages/material/material.vue

@@ -4,7 +4,7 @@
       <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="70" />
       <view class="top-tabs">
         <block v-for="item in topTabBars" :key="item.Id">
-          <view v-if="item.IsShow" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
+          <view v-if="item.IsShow" :class="['item', item.Id == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
             {{ showTabBarsText(item.Name) }}
             <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
               <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
@@ -14,7 +14,7 @@
         </block>
       </view>
       <view class="tabs-content">
-        <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
+        <view class="global_two_tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
           <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
             {{ item.PermissionName }}
             <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
@@ -30,9 +30,9 @@
             }}</view>
           </view>
         </block>
-        <view v-if="topTabsActive == '4'" class="medium-ul">
-          <view class="item-content">
-            <view @click="mediumClickHandler(item)" :class="['item', item.isSelect && 'item-act']" v-for="item in mediumSelect" :key="item.value">
+        <view v-if="topTabsActive == '4'">
+          <view class="global_two_tabs">
+            <view @click="mediumClickHandler(item)" :class="['item', item.isSelect && 'tabs-active']" v-for="item in mediumSelect" :key="item.value">
               {{ item.name }}
             </view>
           </view>
@@ -530,6 +530,9 @@ export default {
 .Index-container {
   background-color: #f7f7f7;
   font-size: 30rpx;
+  /deep/ .search-box {
+    margin-left: 30rpx !important;
+  }
   .content-ul {
     display: flex;
     flex-wrap: wrap;
@@ -542,12 +545,13 @@ export default {
     left: 0;
     width: 100%;
     z-index: 9;
+
     .top-tabs {
       width: 100%;
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-size: 34rpx;
+      justify-content: space-between;
+      font-size: 28rpx;
       background-color: #fff;
       padding: 35rpx 0 10rpx;
       &::-webkit-scrollbar {
@@ -557,118 +561,59 @@ export default {
       }
       .item {
         position: relative;
+        display: flex;
+        justify-content: center;
         padding-bottom: 8rpx;
-        margin-right: 60rpx;
+        flex: 1;
         flex-shrink: 0;
         .limit-img {
           position: absolute;
           top: -15rpx;
-          right: -50rpx;
+          right: 50rpx;
           z-index: 99;
         }
         .active {
           position: absolute;
-          left: 0;
+          left: 50%;
           bottom: 0;
-          height: 4rpx;
-          width: 100%;
-          border-radius: 1rpx;
-          background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+          transform: translateX(-50%);
+          width: 32rpx;
+          height: 6rpx;
+          border-radius: 2rpx;
+          background: $uni-color-new;
         }
       }
       .tabs-active {
-        color: #3385ff;
+        color: $uni-color-new;
         font-weight: 500;
       }
     }
   }
-  .nav-bar-wrap {
-    padding-left: 35rpx;
-  }
+
   .tabs-content {
-    padding: 0 30rpx;
-    background-color: #fff;
     .children-ul {
+      padding: 20rpx 20rpx 0;
       display: flex;
       flex-wrap: wrap;
+      background-color: #fff;
       .children-active {
-        background-color: #3385ff;
-        color: #fff;
-      }
-    }
-    .medium-ul {
-      display: flex;
-      padding: 10px 0;
-      .item-content {
-        display: flex;
-        height: 51rpx;
-        border-radius: 64rpx;
-        color: #333333;
-      }
-      .item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 136rpx;
-        height: 44rpx;
-        font-size: 24rpx;
-        background: #f8f8fa;
-        border-radius: 48rpx;
-        margin-right: 20rpx;
-      }
-      .item-act {
-        background-color: #3385ff;
+        background-color: $uni-color-new;
         color: #fff;
       }
     }
     .chart-children {
-      padding: 10rpx 20rpx;
+      display: flex;
+      align-items: center;
+      height: 52rpx;
+      padding: 0 30rpx;
       margin: 0rpx 20rpx 20rpx 0;
-      background-color: #f9f9f9;
+      background-color: #f8f8fa;
       color: #666666;
-      font-size: 26rpx;
-      border-radius: 4rpx;
-    }
-  }
-  .second-tabs {
-    width: 100%;
-    display: flex;
-    overflow-x: auto;
-    background-color: #fff;
-    font-size: 30rpx;
-    color: #999999;
-    padding: 20rpx 0;
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-      display: none;
-    }
-    .item {
-      position: relative;
-      padding-bottom: 16rpx;
-      margin-right: 50rpx;
-      flex-shrink: 0;
-      .limit-img {
-        position: absolute;
-        top: -15rpx;
-        right: -50rpx;
-        z-index: 99;
-      }
-      .active {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 4rpx;
-        width: 100%;
-        border-radius: 1rpx;
-        background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
-      }
-    }
-    .tabs-active {
-      color: #3385ff;
-      font-weight: 500;
+      font-size: 24rpx;
+      border-radius: 100rpx;
     }
   }
+
   .tabs-img {
     width: 46rpx;
     height: 26rpx;

pages/reportForm/index.scss

@@ -1,5 +1,5 @@
 .reportForm-container {
-  background-color: #f6f6f6;
+  background-color: #f3f5f9;
 
   .index-fixed {
     width: 750rpx;
@@ -98,13 +98,22 @@
 
   .forindustry {
     margin-bottom: 10rpx;
+    background-color: #fff;
+    .image-box {
+      display: block;
+      width: 106rpx;
+      height: 48rpx;
+      margin: -22rpx 0 20rpx -12rpx;
+    }
   }
 
   .industrial_eport_one {
     background-color: #f6f6f6;
-    padding-bottom: 10rpx;
+    padding: 0 25rpx 10rpx;
+  }
+  .report_formcard_content {
+    padding: 0 !important;
   }
-
   .strategy {
     background-color: #fff;
 
@@ -163,112 +172,6 @@
       z-index: 90;
     }
 
-    .industry-top {
-      display: flex;
-      background-color: #fff;
-      justify-content: space-between;
-      height: 90rpx;
-      padding: 0 35rpx 0 30rpx;
-      color: #333333;
-      font-weight: 700;
-      font-size: 32rpx;
-      line-height: 90rpx;
-      overflow: hidden;
-
-      .img-top-box {
-        display: flex;
-        align-items: center;
-
-        image {
-          width: 44rpx;
-          height: 44rpx;
-          margin-right: 16rpx;
-        }
-      }
-
-      .menu-items {
-        background-color: #f8f8fa;
-        display: flex;
-        padding: 0rpx 30rpx 20rpx;
-
-        .menu-items-box {
-          flex: 1;
-          display: flex;
-          font-size: 28rpx;
-          font-weight: 400;
-
-          .items-box {
-            width: 40rpx;
-          }
-        }
-      }
-      
-      .checkbox-content {
-        color: #333333;
-        font-size: 28rpx;
-        font-weight: 400;
-        display: flex;
-      }
-      .van-checkbox-group {
-        display: flex;
-      }
-      .checkbox-ui {
-        display: flex;
-        align-items: center;
-      }
-      .menu-items-tow {
-        display: flex;
-        padding: 30rpx 30rpx 20rpx;
-        font-size: 28rpx;
-        color: #333333;
-        font-weight: 400;
-        background-color: #f8f8fa;
-
-        .items-tow {
-          display: flex;
-          flex: 100%;
-
-          view {
-            width: 40rpx;
-          }
-        }
-
-        .items-act {
-          font-weight: bold;
-        }
-      }
-
-      .replacement-box {
-        background-color: #f8f8fa;
-      }
-
-      .replacement {
-        margin: 0rpx 30rpx 20rpx;
-        display: flex;
-        background-color: #2c83ff;
-        opacity: 1;
-        height: 60rpx;
-        line-height: 58rpx;
-        font-size: 28rpx;
-        font-weight: 400;
-        color: #ffffff;
-        border-radius: 30rpx;
-
-        text {
-          flex: 1;
-          text-align: center;
-        }
-
-        .replacement-box {
-          border: 1rpx solid #2c83ff;
-          opacity: 1;
-          color: #2c83ff;
-          background: #ffffff;
-          border-radius: 28rpx 0rpx 28rpx 28rpx;
-        }
-      }
-    }
-
     .industry-box {
       margin-top: 5rpx;
       background-color: #fff;
@@ -312,72 +215,40 @@
     }
 
     .industry-content {
-      background-color: #fff;
-      padding: 0 30rpx;
       display: flex;
-      height: 90rpx;
-      margin: 3rpx 0;
-
+      align-items: center;
+      justify-content: space-between;
       .industry-box-left {
-        width: 50rpx;
         display: flex;
-        align-items: center;
-
-        image {
-          width: 38rpx;
-          height: 34rpx;
+        .industry-follw {
+          height: 42rpx;
+          width: 101rpx;
+          font-size: 24rpx;
+          color: #fff;
+          border-radius: 4rpx;
+          margin-right: 10rpx;
+          background-color: $uni-color-new;
         }
       }
-
-      .industry-box-right {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .ndustry-box-read {
-          display: flex;
-          color: #333;
-          font-size: 30rpx;
-          padding-left: 10rpx;
-          align-items: center;
-
-          image {
-            margin-left: 10rpx;
-            width: 60rpx;
-            height: 30rpx;
-          }
-
-          .hot-icon {
-            width: 30rpx;
-          }
+      .ndustry-box-tiem {
+        font-size: 24rpx;
+        color: #999;
+        .read {
+          width: 14rpx;
+          height: 14rpx;
+          background-color: #ff0000;
+          border-radius: 50%;
+          margin-right: 10rpx;
         }
-
-        .ndustry-box-arrow {
-          display: flex;
-          align-items: center;
-
-          .read {
-            width: 14rpx;
-            height: 14rpx;
-            background-color: #ff0000;
-            border-radius: 50%;
-            margin-right: 10rpx;
-          }
-
-          .ndustry-box-text {
-            padding-right: 20rpx;
-            color: #999999;
-            font-size: 26rpx;
-          }
+        .ndustry-box-text {
+          margin: 0 10rpx;
         }
       }
     }
 
     .content-box {
       background-color: #fff;
-      padding: 20rpx 25rpx 0;
-
+      padding: 20rpx 0;
       .img-box {
         display: flex;
         height: 90rpx;
@@ -401,15 +272,130 @@
       }
     }
   }
+  .industry-top {
+    display: flex;
+    background-color: #f3f5f9;
+    justify-content: space-between;
+    height: 90rpx;
+
+    padding: 0 35rpx 0 30rpx;
+    color: #333333;
+    font-weight: 600;
+    font-size: 32rpx;
+    line-height: 90rpx;
+    overflow: hidden;
+
+    .img-top-box {
+      display: flex;
+      align-items: center;
+
+      image {
+        width: 44rpx;
+        height: 44rpx;
+        margin-right: 16rpx;
+      }
+    }
+
+    .menu-items {
+      background-color: #f8f8fa;
+      display: flex;
+      padding: 0rpx 30rpx 20rpx;
+
+      .menu-items-box {
+        flex: 1;
+        display: flex;
+        font-size: 28rpx;
+        font-weight: 400;
+
+        .items-box {
+          width: 40rpx;
+        }
+      }
+    }
 
+    .checkbox-content {
+      display: flex;
+      align-items: center;
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 130rpx;
+        height: 52rpx;
+        border-radius: 150rpx;
+        font-size: 24rpx;
+        color: #999999;
+        margin-left: 15rpx;
+        background-color: #f0f1f3;
+      }
+      .act-item {
+        background-color: $uni-color-new;
+        color: #fff;
+      }
+    }
+    .checkbox-ui {
+      display: flex;
+      align-items: center;
+    }
+    .menu-items-tow {
+      display: flex;
+      padding: 30rpx 30rpx 20rpx;
+      font-size: 28rpx;
+      color: #333333;
+      font-weight: 400;
+      background-color: #f8f8fa;
+
+      .items-tow {
+        display: flex;
+        flex: 100%;
+
+        view {
+          width: 40rpx;
+        }
+      }
+
+      .items-act {
+        font-weight: bold;
+      }
+    }
+
+    .replacement-box {
+      background-color: #f8f8fa;
+    }
+
+    .replacement {
+      margin: 0rpx 30rpx 20rpx;
+      display: flex;
+      background-color: #2c83ff;
+      opacity: 1;
+      height: 60rpx;
+      line-height: 58rpx;
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #ffffff;
+      border-radius: 30rpx;
+
+      text {
+        flex: 1;
+        text-align: center;
+      }
+
+      .replacement-box {
+        border: 1rpx solid #2c83ff;
+        opacity: 1;
+        color: #2c83ff;
+        background: #ffffff;
+        border-radius: 28rpx 0rpx 28rpx 28rpx;
+      }
+    }
+  }
   .read-more {
-    margin-left: 60rpx;
     display: flex;
     flex-wrap: wrap;
     .industry-video-item {
-      height: 126rpx;
-      width: 170rpx;
-      margin: 0 40rpx 27rpx 0;
+      height: 106rpx;
+      width: 150rpx;
+      margin: 0 10rpx 10rpx 0;
       border-radius: 8rpx;
       background-size: cover;
       background-position: center;
@@ -421,6 +407,7 @@
       padding: 20rpx;
       position: relative;
       overflow: hidden;
+      
       .industry-video-icon {
         height: 0rpx;
         width: 0rpx;
@@ -440,17 +427,12 @@
       }
     }
     .text-box {
-      margin-bottom: 30rpx;
-      margin-right: 40rpx;
       padding: 0;
+      margin: 0 10rpx 10rpx 0;
       font-size: 24rpx;
-      color: #408fff;
-      width: 170rpx;
-      height: 46rpx;
-      line-height: 46rpx;
-      text-align: center !important;
-      background: url(../../static/img/report_bg.png) no-repeat;
-      background-size: 100% 100%;
+      color: $uni-color-new;
+      width: 150rpx;
+      height: 48rpx;
       text-indent: 0em;
     }
   }

pages/reportForm/reportForm.vue

@@ -66,22 +66,31 @@
       <view class="industry" v-if="tradeList">
         <view class="industry-top">
           <view class="img-top-box">
-            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/industry-ico.png"></image>
+            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/industry-ico.png"></image>
             <text>行业综述</text>
           </view>
           <view> </view>
         </view>
-        <view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList" :key="item.CategoryId">
-          <view class="box-left">
-            {{ item.MatchTypeName }}
-            <text v-if="item.IsRed"></text>
-          </view>
-          <view class="box-right">
-            <text>{{ item.UpdateTime }}</text>
-            <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+        <view class="global_card_content report_formcard_content">
+          <view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList" :key="item.CategoryId">
+            <view class="box-left">
+              {{ item.MatchTypeName }}
+              <text v-if="item.IsRed"></text>
+            </view>
+            <view class="box-right">
+              <text>{{ item.UpdateTime }}</text>
+              <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+            </view>
           </view>
         </view>
       </view>
+      <view class="industry-top">
+        <view class="img-top-box">
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/company_ico.png"></image>
+          <text>公司速览</text>
+        </view>
+        <view> </view>
+      </view>
       <view v-if="labelListData.length" :class="[labelListData.length > 9 ? 'label-content-column' : 'label-content']">
         <view @click="strategyLabelHadel(item)" :class="['item', item.Stock.length > 6 && 'item-size', 'text_oneLine']" v-for="item in labelListData" :key="item.ArticleId">
           {{ item.Stock }}
@@ -92,38 +101,30 @@
         <view style="height: 12rpx" v-if="!tradeList"></view>
         <view class="industry-top industry-sticky">
           <view class="img-top-box">
-            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/property_ico.png" style="height: 50rpx"></image>
+            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/property_ico.png" style="height: 50rpx"></image>
             <text class="text-sub">细分产业</text>
           </view>
           <view class="checkbox-content">
-            <van-checkbox-group class="checkbox-ui" :value="deepCoverFocus" @change="checkboxChange">
-              <van-checkbox style="margin-right: 30rpx" name="cover" icon-size="14" shape="square">深度覆盖</van-checkbox>
-              <van-checkbox name="focus" icon-size="14" shape="square">推荐关注</van-checkbox>
-            </van-checkbox-group>
+            <view :class="['item', item.isAct && 'act-item']" v-for="item in deepCoverList" :key="item.value" @click="checkboxChange(item)">{{ item.lable }}</view>
           </view>
         </view>
         <!-- 需要循环的地方 -->
-        <view class="forindustry" v-for="item in industryList" :key="item.IndustrialManagementId">
+        <view class="forindustry global_card_content" v-for="item in industryList" :key="item.IndustrialManagementId" @click="goIndustryReport(item.IndustrialManagementId)">
+          <image class="image-box" v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/new_report.png"></image>
+          <image class="image-box" v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/trip_icon.png"></image>
           <!-- 火锅底料这个位置 -->
           <view class="industry-content">
-            <view class="industry-box-left" @click="reportFllow(item.IndustrialManagementId)">
-              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/attention_act.png" v-if="item.IsFollow"></image>
-              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/attention_icon.png" v-else></image>
+            <view class="industry-box-left">
+              <view class="industry-follw global_content_center" @click.stop="reportFllow(item.IndustrialManagementId)"> {{ item.IsFollow ? "取消关注" : "+关注" }} </view>
+              <view class="global_title">{{ item.IndustryName }} </view>
             </view>
-            <view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
-              <view class="ndustry-box-read">
-                <text>{{ item.IndustryName }}</text>
-                <image class="hot-icon" v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_report.png" mode=""></image>
-                <image v-if="item.IsNew" src="https://hzstatic.hzinsights.com/cygx/icon/new_report.png" mode=""></image>
-              </view>
-              <view class="ndustry-box-arrow">
-                <text v-if="item.IsRed" class="read"></text>
-                <text class="ndustry-box-text">{{ item.UpdateTime }}</text>
-                <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
-              </view>
+            <view class="ndustry-box-tiem global_content_center">
+              <text v-if="item.IsRed" class="read"></text>
+              <text class="ndustry-box-text">{{ item.UpdateTime }}</text>
+              <u-icon name="arrow-right" color="#333" size="28"></u-icon>
             </view>
           </view>
-          <view class="content-box" @click="goIndustryReport(item.IndustrialManagementId)">
+          <view class="content-box">
             <view class="read-more">
               <view class="industry-video-item" @click.stop="handelVideoPlay(item)" :style="{ 'background-image': 'url(' + item.IndustryVideo.BackgroundImg + ')' }" v-if="item.IndustryVideo">
                 5min
@@ -134,14 +135,14 @@
                 </view>
               </view>
               <block v-if="item.IndustrialSubjectList">
-                <view v-if="item.IndustryVideo" style="display: flex; flex-wrap: wrap; width: 420rpx">
-                  <view v-for="val in item.IndustrialSubjectList.slice(0, 4)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+                <view v-if="item.IndustryVideo" style="display: flex; flex-wrap: wrap; width: 502rpx">
+                  <view v-for="val in item.IndustrialSubjectList.slice(0, 6)" :key="val.IndustrialSubjectId" class="text-box global_content_center text_oneLine">{{ val.SubjectName }}</view>
                 </view>
-                <block v-if="item.IndustryVideo && item.IndustrialSubjectList.length > 4">
-                  <view v-for="val in item.IndustrialSubjectList.slice(4)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+                <block v-if="item.IndustryVideo && item.IndustrialSubjectList.length > 6">
+                  <view v-for="val in item.IndustrialSubjectList.slice(6)" :key="val.IndustrialSubjectId" class="text-box global_content_center">{{ val.SubjectName }}</view>
                 </block>
                 <block v-if="!item.IndustryVideo">
-                  <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+                  <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box global_content_center text_oneLine">{{ val.SubjectName }}</view>
                 </block>
               </block>
             </view>
@@ -223,6 +224,18 @@ export default {
       totalPage: "",
       matchTypeName: "",
       deepCoverFocus: [], //深度覆盖 //推荐关注
+      deepCoverList: [
+        {
+          value: "cover",
+          lable: "深度覆盖",
+          isAct: false,
+        },
+        {
+          value: "focus",
+          lable: "推荐关注",
+          isAct: false,
+        },
+      ],
       isScrollShow: false,
       goFollowShow: false,
       accounts: "",
@@ -507,8 +520,15 @@ export default {
       });
     },
     //点击了checkbox
-    checkboxChange(e) {
-      this.deepCoverFocus = e.detail;
+    checkboxChange(item) {
+      item.isAct = !item.isAct;
+      let arr = [];
+      this.deepCoverList.forEach((key) => {
+        if (key.isAct) {
+          arr.push(key.value);
+        }
+      });
+      this.deepCoverFocus = arr;
       this.page_no = 1;
       this.getIndustryList();
     },
@@ -728,10 +748,9 @@ export default {
     flex-wrap: wrap;
     flex-direction: column;
     overflow: hidden;
-    padding: 30rpx 30rpx 0;
+    padding: 20rpx 30rpx 0;
     overflow-x: auto;
-    height: 258rpx;
-    margin: 20rpx 0 0;
+    height: 164rpx;
     background-color: #fff;
     justify-content: space-between;
     &::after {
@@ -745,14 +764,14 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 40rpx;
-    margin-bottom: 10px;
-    width: 170rpx;
-    height: 46rpx;
-    background: #f5f5f5;
-    box-shadow: 0px 2rpx 9rpx 0rpx rgba(0, 0, 0, 0.16), inset 0rpx 4rpx 4rpx 0rpx rgba(255, 255, 255, 0.49);
-    border-radius: 65rpx;
-    font-size: 26rpx;
+    margin-right: 12rpx;
+    margin-bottom: 20rpx;
+    width: 180rpx;
+    height: 52rpx;
+    background: #e5efff;
+    border-radius: 150rpx;
+    font-size: 24rpx;
+    color: $uni-color-new;
   }
   .label-content .item,
   .label-content-column .item-size {

style/common.scss

@@ -193,7 +193,7 @@ button {
 // 统一标题
 .global_title {
   color: #333333;
-  font-size: 28rpx;
+  font-size: 32rpx;
   font-weight: 600;
   line-height: 40rpx;
 }
@@ -201,8 +201,42 @@ button {
 // 统一内容
 .global_content {
   padding: 0 12rpx;
-  font-size: 18rpx;
+  font-size: 22rpx;
   line-height: 30rpx;
   font-weight: 400;
   color: #999999;
 }
+// 居中
+.global_content_center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 统一二级筛选栏
+.global_two_tabs {
+  height: 96rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  border-top: 0.5rpx solid #dcdfe6;
+  border-bottom: 0.5rpx solid #dcdfe6;
+  padding: 0 30rpx;
+  background-color: #fff;
+  .item {
+    display: flex;
+    align-items: center;
+    height: 64rpx;
+    padding: 24rpx;
+    border-radius: 100rpx;
+    color: #333;
+    font-size: 28rpx;
+    background-color: #f8f8fa;
+    flex-shrink: 0;
+  }
+  .tabs-active {
+    background-color: #e5efff;
+    color: #376cbb;
+  }
+}