init

App.vue

@@ -79,223 +79,7 @@ export default {
 
 <style lang="scss">
 @import "uview-ui/index.scss";
-/*每个页面公共css */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-  color: transparent;
-}
-view,
-text {
-  box-sizing: border-box;
-}
-input {
-  box-sizing: border-box;
-}
-button {
-  margin: 0;
-  padding: 0;
-}
-button::after {
-  border: none;
-}
-.container {
-  width: 100%;
-  min-height: 100vh;
-  font-size: 28rpx;
-}
-text {
-  display: block;
-}
-button {
-  text-align: center;
-  border-radius: 8rpx;
-}
-/* border 1px样式 */
-.border_bottom,
-.border_top,
-.border_all {
-  position: relative;
-}
+/* 页面公共样式 */
+@import "./style/common.scss";
 
-.border_top::after {
-  position: absolute;
-  content: "";
-  width: 100%;
-  left: 0;
-  top: 0;
-  height: 1px;
-  padding: 0 32rpx;
-  box-sizing: border-box;
-  background-color: #e5e5e5;
-  -webkit-transform: scale(1, 0.5);
-  transform: scale(1, 0.5);
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-
-.border_bottom::after {
-  position: absolute;
-  content: "";
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  height: 1px;
-  padding: 0 32rpx;
-  box-sizing: border-box;
-  background-color: #e5e5e5;
-  -webkit-transform: scale(1, 0.5);
-  transform: scale(1, 0.5);
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-
-.border_all::before {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  border: 1px solid #d9d9d9;
-  border-radius: 10rpx;
-  transform-origin: 0 0;
-  transform: scale(0.5, 0.5);
-  -webkit-transform: scale(0.5, 0.5);
-  box-sizing: border-box;
-}
-//全屏蒙版
-.mask-diaog {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
-  color: #fff;
-}
-// 底部确认按钮
-.bot-btn-cont {
-  width: 100%;
-  position: fixed;
-  left: 0;
-  bottom: 122rpx;
-  z-index: 9;
-  .bot-btn {
-    margin: 0 auto;
-    width: 694rpx;
-    height: 88rpx;
-    line-height: 88rpx;
-    text-align: center;
-    font-size: 36rpx;
-    color: #fff;
-    background-color: #3385ff;
-  }
-}
-// 无数据
-.nodata {
-  text-align: center;
-  display: block;
-  color: #666666;
-  padding: 200rpx 0;
-  margin: 0 auto;
-  .nodata_ico {
-    width: 374rpx;
-    height: 288rpx;
-    margin-bottom: 30rpx;
-  }
-  .nodata_img {
-    width: 374rpx;
-    height: 288rpx;
-    margin-bottom: 50rpx;
-  }
-}
-.nodata2 {
-  margin-top: 300rpx;
-}
-// 单行省略
-.text_oneLine {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* 2行省略 */
-.text_twoLine {
-  text-overflow: -o-ellipsis-lastline;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-/* 按钮空心样式 */
-.plain-style {
-  background-color: #f2f2f2 !important;
-  color: #07c160 !important;
-}
-
-.select-box {
-  width: 100%;
-  .box {
-    height: 95prx;
-    line-height: 95rpx;
-    text-align: center;
-    font-size: 32rpx;
-    border-bottom: 1rpx solid #ebebeb;
-  }
-
-  .box-bottom {
-    border-bottom: none !important;
-  }
-}
-.slot-content {
-  width: 100%;
-  padding: 50rpx;
-  text-align: center;
-  font-size: 32rpx;
-  color: #0f1826;
-  line-height: 48rpx;
-}
-.forbid-copy {
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.cancel-attention {
-  flex-shrink: 0;
-  padding: 5rpx 28rpx;
-  border-radius: 37rpx 37rpx 37rpx 37rpx;
-  font-weight: 400;
-  font-size: 24rpx;
-  background-color: #f0f0f0;
-  color: #999999;
-}
-.free-charge {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  bottom: 320rpx;
-  right: 41rpx;
-  height: 156rpx;
-  z-index: 888;
-}
-.footer-free-charge {
-  z-index: 99999;
-}
-.report-content-title {
-  font-weight: 500;
-  font-size: 36rpx;
-  line-height: 50rpx;
-  color: #333333;
-}
 </style>

components/ItemComponent/reportItem.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="container-report-item" @click="goDetail(list)">
-    <view class="item-title" 
-		:class="list.CategoryId == '0'?'yan-xuan-tag':'front-vertical-line'" v-if="list.Title" >
+  <view class="container-report-item global_card_content" @click="goDetail(list)">
+    <!-- :class="list.CategoryId == '0'?'yan-xuan-tag':'front-vertical-line'"  这个位置是买方研选 先空着 -->
+    <view class="global_title" v-if="list.Title">
       <mp-html :content="richTextClamp(3) + list.Title + '</div>'" />
     </view>
     <view class="item-image" v-if="list.BodyHtml">
@@ -11,8 +11,8 @@
       <image :src="list.Cover"></image>
     </view>
     <block v-if="(list.Annotation || list.Body[0]) && !list.Cover">
-      <text class="item-content" v-if="!list.Body[0]">{{ list.ArticleResponse == 4 ? "核心观点" : "核心结论" }}:</text>
-      <view class="item-rich-text">
+      <text class="global_content" v-if="!list.Body[0]">{{ list.ArticleResponse == 4 ? "核心观点" : "核心结论" }}:</text>
+      <view class="global_content item-rich-text">
         <mp-html :content="richTextClamp(7) + (list.Annotation || list.Body[0]) + '</div>'" />
       </view>
     </block>
@@ -70,46 +70,28 @@ export default {
   padding: 20rpx;
   margin-bottom: 20rpx;
   overflow: hidden;
-  .item-title {
-    position: relative;
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #333333;
-    line-height: 38rpx;
-    text-indent: 20rpx;
-  }
-	.front-vertical-line{
-		&::before {
-		  content: "";
-		  position: absolute;
-		  top: 6rpx;
-		  left: 4rpx;
-		  width: 6rpx;
-		  height: 31rpx;
-		  background-color: #3385ff;
-		}
-	}
-	.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;
-		}
-	}
 
-  .item-content,
-  .item-rich-text {
-    font-size: 26rpx;
-    font-weight: 400;
-    color: #666666;
+  .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;
+    }
   }
+
+  // .item-content,
+  // .item-rich-text {
+  //   font-size: 26rpx;
+  //   font-weight: 400;
+  //   color: #666666;
+  // }
   .item-content {
     margin-top: 10rpx;
   }
@@ -117,7 +99,7 @@ export default {
     margin-bottom: 20rpx;
   }
   .item-image {
-    height: 242rpx;
+    height: 238rpx;
     margin: 15rpx 0;
     image {
       width: 100%;
@@ -125,10 +107,10 @@ export default {
     }
   }
   .item-abstract {
-    font-size: 28rpx;
+    font-size: 18rpx;
     font-weight: 400;
     color: #333333;
-    line-height: 33rpx;
+    line-height: 30rpx;
     -webkit-line-clamp: 3;
     line-clamp: 3;
     margin-bottom: 20rpx;
@@ -147,15 +129,15 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: #acacac;
-    font-size: 24rpx;
-    line-height: 28rpx;
+    color: #999 ;
+    font-size: 18rpx;
+    line-height: 30rpx;
     .item-examine {
       display: flex;
       align-items: center;
       image {
         width: 30rpx;
-        height: 24rpx;
+        height: 16rpx;
         margin: 0 10rpx 0 15rpx;
       }
     }

pages/index/index.vue

@@ -595,20 +595,22 @@ export default {
 
     .lable-row {
       display: flex;
+      font-size: 24rpx;
     }
     .lable-item {
       flex-shrink: 0;
       padding: 8rpx 40rpx;
       background: #ffffff;
       border: 1rpx solid #dcdfe6;
-      border-radius: 48rpx;
+      border-radius: 39rpx; 
       margin-right: 20rpx;
       white-space: nowrap;
       margin-top: 20rpx;
+      color: #999999;
     }
     .item-active {
-      background: #3385ff;
-      color: #fff;
+      background: #e5efff;
+      color: $uni-color-new;
     }
   }
 }

style/common.scss

@@ -0,0 +1,208 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+view,
+text {
+  box-sizing: border-box;
+}
+input {
+  box-sizing: border-box;
+}
+button {
+  margin: 0;
+  padding: 0;
+}
+button::after {
+  border: none;
+}
+.container {
+  width: 100%;
+  min-height: 100vh;
+  font-size: 28rpx;
+}
+text {
+  display: block;
+}
+button {
+  text-align: center;
+  border-radius: 8rpx;
+}
+/* border 1px样式 */
+.border_bottom,
+.border_top,
+.border_all {
+  position: relative;
+}
+
+.border_top::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 1px;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background-color: #e5e5e5;
+  -webkit-transform: scale(1, 0.5);
+  transform: scale(1, 0.5);
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+
+.border_bottom::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  height: 1px;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background-color: #e5e5e5;
+  -webkit-transform: scale(1, 0.5);
+  transform: scale(1, 0.5);
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+
+.border_all::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  border: 1px solid #d9d9d9;
+  border-radius: 10rpx;
+  transform-origin: 0 0;
+  transform: scale(0.5, 0.5);
+  -webkit-transform: scale(0.5, 0.5);
+  box-sizing: border-box;
+}
+
+// 无数据
+.nodata {
+  text-align: center;
+  display: block;
+  color: #666666;
+  padding: 200rpx 0;
+  margin: 0 auto;
+  .nodata_ico {
+    width: 374rpx;
+    height: 288rpx;
+    margin-bottom: 30rpx;
+  }
+  .nodata_img {
+    width: 374rpx;
+    height: 288rpx;
+    margin-bottom: 50rpx;
+  }
+}
+// 单行省略
+.text_oneLine {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 2行省略 */
+.text_twoLine {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.select-box {
+  width: 100%;
+  .box {
+    height: 95prx;
+    line-height: 95rpx;
+    text-align: center;
+    font-size: 32rpx;
+    border-bottom: 1rpx solid #ebebeb;
+  }
+
+  .box-bottom {
+    border-bottom: none !important;
+  }
+}
+.slot-content {
+  width: 100%;
+  padding: 50rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #0f1826;
+  line-height: 48rpx;
+}
+
+// 禁止拷贝
+.forbid-copy {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cancel-attention {
+  flex-shrink: 0;
+  padding: 5rpx 28rpx;
+  border-radius: 37rpx 37rpx 37rpx 37rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+  background-color: #f0f0f0;
+  color: #999999;
+}
+.free-charge {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  bottom: 320rpx;
+  right: 41rpx;
+  height: 156rpx;
+  z-index: 888;
+}
+.footer-free-charge {
+  z-index: 99999;
+}
+.report-content-title {
+  font-weight: 500;
+  font-size: 36rpx;
+  line-height: 50rpx;
+  color: #333333;
+}
+
+// 统一顶部蓝色的卡片
+.global_card_content {
+  padding: 22rpx 12rpx;
+  border-radius: 8rpx;
+  border-top: 10px solid #376cbb;
+}
+
+// 统一标题
+.global_title {
+  color: #333333;
+  font-size: 28rpx;
+  font-weight: 600;
+  line-height: 40rpx;
+}
+
+// 统一内容
+.global_content {
+  padding: 0 12rpx;
+  font-size: 18rpx;
+  line-height: 30rpx;
+  font-weight: 400;
+  color: #999999;
+}

uni.scss

@@ -20,6 +20,8 @@ $uni-color-primary: #007aff;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
+$uni-color-new:#376CBB;
+
 
 /* 文字基本颜色 */
 $uni-text-color:#333;//基本色
@@ -34,6 +36,7 @@ $uni-bg-color-grey:#f8f8f8;
 $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
+
 /* 边框颜色 */
 $uni-border-color:#c8c7cc;