Merge branch 'ch/ht_3.0' of eta_mini/eta_mini_h5 into debug_ht

src/styles/vars.css

@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #0078E8;
+  --primary-color: #4587FF;
   --primary-color_sub: #dde6ff;
 
   --success-color: #4cd964;

src/views/report/Detail.vue

@@ -124,6 +124,9 @@ function changeFollowState() {
     })
   }
 }
+function showAuthorList() {
+  visible.value = true
+}
 
 function onClose() {
   visible.value = false
@@ -273,28 +276,43 @@ function goDetails(item){
     >
       <div class="title-box">{{ reportInfo.title }}</div>
       <div class="author-box">
-        <div class="img-box">
-          <img
-            :src="authorInfoList?.[0].headImgUrl|| defaultImg"
-          />
-        </div>
-        <div class="author-info">
-          <span class="name">
-            <template  v-for="(item, index) in authorInfoList" :key="index">
-              {{ item.name }} {{ index === authorInfoList.length - 1 ? "" : "、" }}
-            </template>
-          </span>
-          <span class="time">{{ reportInfo.publishTime }}&nbsp;{{reportInfo.riskLevel}}</span>
-        </div>
-        <div
-          @click="changeFollowState"
-          :class="['opt-btn', isFollowed ? 'followed' : '']"
-          v-if="isLogin"
-        >
-          {{ isFollowed ? "取消关注" : "关注" }}
-        </div>
+        <template v-if="authorInfoList && authorInfoList.length > 1">
+          <div :class="index >= 1 ? 'img-box left-box' : 'img-box'" @click="showAuthorList" v-for="(item, index) in authorInfoList" :key="index">
+            <img :src="item?.headImgUrl|| defaultImg"/>
+          </div>
+          <div class="author-info" @click="showAuthorList">
+            <span class="name">
+              <template  v-for="(item, index) in authorInfoList" :key="index">
+                {{ item.name }} {{ index === authorInfoList.length - 1 ? "" : "、" }}
+              </template>
+            </span>
+          </div>
+          <div @click="showAuthorList" v-if="isLogin">
+            <t-icon class="chevron-right" name="chevron-right" size="32" color="#C0C0C0"/>
+          </div>
+        </template>
+        <template v-else>
+          <div class="img-box">
+            <img
+              :src="authorInfoList?.[0].headImgUrl|| defaultImg"
+            />
+          </div>
+          <div class="author-info">
+            <span class="name">
+              {{ authorInfoList?.[0].name || "作者" }}
+            </span>
+          </div>
+          <div
+            @click="changeFollowState"
+            :class="['opt-btn', isFollowed ? 'followed' : '']"
+            v-if="isLogin"
+          >
+            {{ isFollowed ? "取消关注" : "关注" }}
+          </div>
+        </template>
       </div>
       <div class="time-box">
+        <span class="time">{{ reportInfo.publishTime }}&nbsp;{{reportInfo.riskLevel}}</span>
         <span class="btn" @click="isShowMZSM = true">免责声明</span>
       </div>
     </template>
@@ -433,7 +451,7 @@ function goDetails(item){
   <!-- 免责声明 -->
   <disclaimers-wrap v-model:show="isShowMZSM" />
   <!-- 关注弹窗 -->
-  <t-popup v-model="visible" placement="center" style="width: 85%">
+  <t-popup v-model="visible" placement="center" style="width: 80%">
     <t-icon class="close-btn" name="close-circle" size="32" color="#fff" @click="onClose" />
     <div class="author-popup">
       <div class="title">作者详情</div>
@@ -480,8 +498,11 @@ function goDetails(item){
         height: 100%;
       }
     }
+    .left-box {
+      margin-left: -40px;
+    }
     .author-info {
-      margin-left: 30px;
+      margin-left: 20px;
       flex: 1;
       .name {
         /* display: block; */
@@ -501,11 +522,10 @@ function goDetails(item){
     }
     .opt-btn {
       margin-left: auto;
-      align-self: flex-start;
-      min-width: 140px;
+      min-width: 160px;
       height: 40px;
       padding: 5px 10px;
-      border-radius: 8px;
+      border-radius: 40px;
       background-color: var(--primary-color);
       color: var(--text-color-inverse);
       text-align: center;
@@ -516,12 +536,13 @@ function goDetails(item){
     }
   }
   .time-box {
+    margin-top: 20px;
     font-size: var(--font-size-small);
-    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     .btn {
       color: var(--primary-color);
-      position: relative;
-      top: -34px;
     }
   }
   .des-box {
@@ -719,8 +740,9 @@ function goDetails(item){
   top: calc(-1 * (24px  + 32px));
 }
 .title {
-  padding: 30rpx;
+  padding: 20px;
   font-size: 32px;
+  font-weight: 500;
   color: #323233;
   text-align: center;
 }
@@ -749,11 +771,11 @@ function goDetails(item){
       -webkit-line-clamp: 2; /* 限制为2行 */
     }
     .opt-btn {
-      margin-left: 40%;
+      margin-left: 30%;
       min-width: 140px;
       height: 40px;
       padding: 5px 10px;
-      border-radius: 8px;
+      border-radius: 40px;
       background-color: var(--primary-color);
       color: var(--text-color-inverse);
       text-align: center;

src/views/report/PDF.vue

@@ -86,6 +86,9 @@ function changeFollowState() {
     })
   }
 }
+function showAuthorList() {
+  visible.value = true
+}
 
 function onClose() {
   visible.value = false
@@ -168,35 +171,39 @@ function goDetails(item){
     <div class="report-top-box">
       <div class="title-box">{{ reportInfo.title }}</div>
       <div class="author-box">
-        <div class="img-box">
-          <img
-            :src="
-              reportInfo.authorInfo.lenght > 0
-                ? reportInfo.authorInfo[0].headImgUrl
-                : defaultImg
-            "
-          />
-        </div>
-        <div class="author-info">
-          <span class="name">
-            <template  v-for="(item, index) in authorInfoList" :key="index">
-              {{ item.name }} {{ index === authorInfoList.length - 1 ? "" : "、" }}
-            </template>
-          </span>
-          <span class="time">
-            {{dayjs(reportInfo.publishedTime).format("YYYY-MM-DD HH:mm:ss")}}&nbsp;
-            {{reportInfo.riskLevel}}
-          </span>
-        </div>
-        <div
-          @click="changeFollowState"
-          :class="['opt-btn', isFollowed ? 'followed' : '']"
-          v-if="reportInfo.login"
-        >
-          {{ isFollowed ? "取消关注" : "关注" }}
-        </div>
+        <template v-if="authorInfoList && authorInfoList.length > 1">
+          <div :class="index >= 1 ? 'img-box left-box' : 'img-box'"  @click="showAuthorList" v-for="(item, index) in authorInfoList" :key="index">
+            <img :src="item?.headImgUrl || defaultImg"/>
+          </div>
+          <div class="author-info" @click="showAuthorList">
+            <span class="name">
+              <template  v-for="(item, index) in authorInfoList" :key="index">
+                {{ item.name }} {{ index === authorInfoList.length - 1 ? "" : "、" }}
+              </template>
+            </span>
+          </div>
+          <div @click="showAuthorList" v-if="reportInfo.login">
+            <t-icon class="chevron-right" name="chevron-right" size="32" color="#C0C0C0"/>
+          </div>
+        </template>
+        <template v-else>
+          <div class="img-box">
+            <img :src="authorInfoList.length > 0 ? authorInfoList[0].headImgUrl : defaultImg"/>
+          </div>
+          <div class="author-info">
+            <span class="name">
+              <template  v-for="(item, index) in authorInfoList" :key="index">
+                {{ item.name }} {{ index === authorInfoList.length - 1 ? "" : "、" }}
+              </template>
+            </span>
+          </div>
+          <div @click="changeFollowState" :class="['opt-btn', isFollowed ? 'followed' : '']" v-if="reportInfo.login">
+            {{ isFollowed ? "取消关注" : "关注" }}
+          </div>
+        </template>
       </div>
       <div class="time-box">
+        <span class="time">{{dayjs(reportInfo.publishedTime).format("YYYY-MM-DD HH:mm:ss")}}&nbsp;{{reportInfo.riskLevel}}</span>
         <span class="btn" @click="isShowMZSM = true">免责声明</span>
       </div>
     </div>
@@ -277,7 +284,7 @@ function goDetails(item){
   </div>
   <!-- 免责声明 -->
   <disclaimers-wrap v-model:show="isShowMZSM" />
-  <t-popup v-model="visible" placement="center" style="width: 85%">
+  <t-popup v-model="visible" placement="center" style="width: 80%">
     <t-icon class="close-btn" name="close-circle" size="32" color="#fff" @click="onClose" />
     <div class="author-popup">
       <div class="title">作者详情</div>
@@ -327,8 +334,11 @@ function goDetails(item){
         height: 100%;
       }
     }
+    .left-box {
+      margin-left: -40px;
+    }
     .author-info {
-      margin-left: 30px;
+      margin-left: 20px;
       flex: 1;
       .name {
         /* display: block; */
@@ -347,11 +357,10 @@ function goDetails(item){
     }
     .opt-btn {
       margin-left: auto;
-      align-self: flex-start;
-      min-width: 140px;
+      min-width: 160px;
       height: 40px;
       padding: 5px 10px;
-      border-radius: 8px;
+      border-radius: 40px;
       background-color: var(--primary-color);
       color: var(--text-color-inverse);
       text-align: center;
@@ -362,12 +371,13 @@ function goDetails(item){
     }
   }
   .time-box {
+    margin-top: 20px;
     font-size: var(--font-size-small);
-    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     .btn {
       color: var(--primary-color);
-      position: relative;
-      top: -34px;
     }
   }
   .des-box {
@@ -494,7 +504,7 @@ function goDetails(item){
   top: calc(-1 * (24px  + 32px));
 }
 .title {
-  padding: 30rpx;
+  padding: 20px;
   font-size: 32px;
   color: #323233;
   text-align: center;
@@ -524,11 +534,11 @@ function goDetails(item){
       -webkit-line-clamp: 2; /* 限制为2行 */
     }
     .opt-btn {
-      margin-left: 40%;
-      min-width: 140px;
+      margin-left: 30%;
+      min-width: 160px;
       height: 40px;
       padding: 5px 10px;
-      border-radius: 8px;
+      border-radius: 40px;
       background-color: var(--primary-color);
       color: var(--text-color-inverse);
       text-align: center;