产品消息样式优化

src/assets/style/chat.css

@@ -180,7 +180,8 @@ img.avatarUrl-img[lazy="loading"] {
 }
 .noPadding{
   padding: 0 !important;
-  border-radius: 30rem !important;
+  border-radius: 12rem !important;
+  background: linear-gradient(360deg, #ffffffb3 0%, #f7f8ff 99%) !important;
 }
 .content-left-main.text-folding-box {
   padding: 11rem 14rem 0 14rem !important;

src/components/product/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="product_body">
-      <div :class="{ hiddenMore: showTotal }" class="bg_white" ref="productEl">
+      <div :class="{ hiddenMore: showTotal }" ref="productEl">
         <!-- 产品头部 -->
         <div class="product_top">
           <div class="title_body">
@@ -28,6 +28,7 @@
         <div class="product_main">
           <div class="product_modules">
             <div class="base_module">
+              <div class="tag"></div>
               <!-- 列表集合 -->
               <div class="list" v-for="item in baseModuleData" :key="item.id" v-show="!!item.val">
                 <div class="list_label">{{ item.key }}:</div>
@@ -42,19 +43,25 @@
             <!-- 保险责任 -->
             <div class="more_module">
               <div class="top_right_bg">
+                <div class="tag">保险责任</div>
                 <!-- 列表集合 -->
                 <div class="list" v-for="item in resultData.insDuty" :key="item.key">
                   <div class="list_label">
-                    <span class="list_label_span">
+                    <span class="list_label_span"> {{ item.key }}: </span>
-                      {{ item.key }}:
-                    </span>
                   </div>
                   <div class="list_content" v-if="item.isRender" v-html="item.completedData"></div>
                   <div class="list_content" v-else>
                     <template v-for="(completedItem, cIdx) in item.completedData" :key="cIdx">
-                      <span class="more_text" v-if="typeof completedItem === 'string'"
+                      <span
-                        v-html="completedItem"></span>
+                        class="more_text"
-                      <span class="more_button" v-else @click="showImgPopup(completedItem.urlValue)">
+                        v-if="typeof completedItem === 'string'"
+                        v-html="completedItem"
+                      ></span>
+                      <span
+                        class="more_button"
+                        v-else
+                        @click="showImgPopup(completedItem.urlValue)"
+                      >
                         {{ completedItem.urlkey }}
                       </span>
                     </template>
@@ -68,28 +75,48 @@
         <!-- 产品底部 -->
         <div class="product_bottom">
           <div class="bottom_modules">
-            <div class="img_module" :class="bottomModuleNum ? 'min_witch' : ''" v-show="!!item.url"
+            <div
-              v-for="item in bottomModulesData" :key="item.id">
+              class="img_module"
+              :class="bottomModuleNum ? 'min_witch' : ''"
+              v-show="!!item.url"
+              v-for="item in bottomModulesData"
+              :key="item.id"
+            >
               <img @click="clickBottomBtn(item.name)" :src="item.src" />
             </div>
           </div>
         </div>
         <!-- 关联问 -->
         <div class="content-question-answer" v-if="intents && intents.length > 0">
-          <button :class="hasClicked ? 'answer-items setGrey' : 'answer-items'"
+          <button
-            v-for="(items, index) in intents" :key="index" @click.stop="richCallAnswer(items)">
+            :class="hasClicked ? 'answer-items setGrey' : 'answer-items'"
+            v-for="(items, index) in intents"
+            :key="index"
+            @click.stop="richCallAnswer(items)"
+          >
             {{ items.intent }}
           </button>
         </div>
       </div>
       <!-- 展开拉起 -->
-      <div class="unfold-box" :class="exchangeButton ? 'unfold-bg' : 'unfold-style'" v-if="showExchangeButton">
+      <div
-        <a href="javascript:;" @click="showTotalIntro">{{ exchangeButton ? "展开" : "收起"
+        class="unfold-box"
-          }}<em class="look-more-icon" :class="!exchangeButton ? 'active' : ''"></em></a>
+        :class="exchangeButton ? 'unfold-bg' : 'unfold-style'"
+        v-if="showExchangeButton"
+      >
+        <a href="javascript:;" @click="showTotalIntro"
+          >{{ exchangeButton ? '展开' : '收起'
+          }}<em class="look-more-icon" :class="!exchangeButton ? 'active' : ''"></em
+        ></a>
       </div>
       <!-- 弹出层 -->
-      <van-popup class="popup" :style="{ height: '85%', borderRadius: '10rem 10rem 0rem 0rem' }"
+      <van-popup
-        v-model:show="popUpFlag" teleport="body" position="bottom">
+        class="popup"
+        :style="{ height: '85%', borderRadius: '10rem 10rem 0rem 0rem' }"
+        v-model:show="popUpFlag"
+        teleport="body"
+        position="bottom"
+      >
         <div class="detaill_body">
           <div class="detaill_title">
             {{ detaillTitle }}
@@ -98,8 +125,12 @@
           <div class="detaill_content" v-show="nowPopType === 'tkyw'">
             <div v-html="tkywValue"></div>
           </div>
-          <img :style="{ width: '100%', maxWidth: 'none' }" class="product_img" :src="productImgUrl"
+          <img
-            v-if="!!productImgUrl && nowPopType === 'img'" />
+            :style="{ width: '100%', maxWidth: 'none' }"
+            class="product_img"
+            :src="productImgUrl"
+            v-if="!!productImgUrl && nowPopType === 'img'"
+          />
         </div>
       </van-popup>
     </div>
@@ -292,8 +323,17 @@ function showGraph(item) {
 <style lang="scss" scoped>
 .hiddenMore {
   height: 205rem;
+  overflow: hidden;
+}
+.unfold-box {
+  height: 52rem;
+  background: linear-gradient(0deg, #ffffff 56%, #ffffff4d 103%);
+  backdrop-filter: blur(16rem);
+  font-family: PingFang SC;
+  font-size: 12rem;
+  font-weight: 500;
+  color: #025cea;
 }
-
 .product_body {
   line-height: normal;
   letter-spacing: 0.5rem;
@@ -304,32 +344,32 @@ function showGraph(item) {
   margin-bottom: 6rem;
 
   .bg_white {
-    background: #fff;
     border-radius: 8rem;
     overflow: hidden;
   }
 
   .product_top {
-    color: #fff;
-    border-bottom: #f0ecec 0.01rem solid;
-
     .title_body {
-      font-size: 13rem;
+      font-size: 18rem;
+      font-weight: 600;
       width: 100%;
       min-height: 0.5rem;
-      background-image: url('../../assets/images/product/banner.png');
+      // background: linear-gradient(96deg, #055deae6 4%, #137cfee6 55%, #d5dffbe6 125%);
+      // border-image: linear-gradient(105deg, #c9dcff 47%, #ffffffb0 111%) 1;
       background-size: cover;
       background-repeat: no-repeat;
       border-radius: 0.36rem 0.36rem 0 0;
-      padding: 8rem;
+      padding: 8rem 16rem;
       display: flex;
       align-items: center;
 
       .title {
-        font-size: 15rem;
+        font-size: 16rem;
+        color: #17204d;
+        font-family: PingFang SC;
         display: flex;
         align-items: center;
-        font-weight: 500;
+        font-weight: 600;
         position: relative;
 
         .text_content {
@@ -338,13 +378,15 @@ function showGraph(item) {
         }
 
         .mark {
-          font-size: 12rem;
-          background: #fff;
           letter-spacing: 0rem;
-          color: #4f95fd;
+          background: rgba(76, 101, 245, 0.08);
-          padding: 0rem 4rem 0rem 4rem;
+          color: #025cea;
-          border-radius: 5rem 5rem 5rem 0rem;
+          padding: 2rem 6rem;
-          font-weight: 700;
+          border-radius: 4rem;
+          font-family: PingFang SC;
+          font-size: 12rem;
+          font-weight: 500;
+          line-height: 16rem;
           position: absolute;
           top: 1rem;
           right: -4rem;
@@ -370,8 +412,8 @@ function showGraph(item) {
 
         span {
           flex: 1;
-          font-size: 12rem;
+          font-size: 14rem;
-          color: #777777;
+          color: #7e849f;
           letter-spacing: 0.1rem;
         }
       }
@@ -395,60 +437,75 @@ function showGraph(item) {
     padding: 0.31rem 0rem;
 
     .product_modules {
+      padding: 0 16rem 16rem;
+
       .base_module {
-        background: #fef8ed;
+        background: #ffffff;
-        background-image: url('../../assets/images/product/base.png');
         background-size: 65rem;
-        background-repeat: no-repeat;
+        position: relative;
-        background-position: top right;
+        padding: 16rem 8rem;
-        padding: 16rem;
-        border-radius: 0.3rem;
         margin-bottom: 11rem;
         letter-spacing: 0;
+        border-radius: 12rem;
+        .tag {
+          position: absolute;
+          top: 0rem;
+          right: 0;
+          background: url('../../assets/images/chat/base-tag.svg');
+          height: 24rem;
+          width: 65rem;
+          content: '';
+        }
       }
 
       .more_module {
-        border-radius: 0.3rem;
-
         .top_right_bg {
-          background-image: url('../../assets/images/product/more.png');
+          padding: 16rem 8rem;
-          background-size: 65rem;
+          background: #fff;
-          background-repeat: no-repeat;
-          background-position: top right;
-          padding: 16rem;
           border-radius: 12rem;
+          position: relative;
           letter-spacing: 0;
+          .tag {
+            position: absolute;
+            font-size: 12rem;
+            border-radius: 0rem 12rem 0rem 12rem;
+            background: rgba(2, 92, 234, 0.1);
+            width: 64rem;
+            height: 25rem;
+            top: 0rem;
+            line-height: 26rem;
+            right: 0;
+            font-weight: 500;
+            text-align: center;
+            content: '';
+            color: #025cea;
+          }
         }
-
-        background: #edf4ff;
-        background-image: url('../../assets/images/product/productBg.png');
-        background-size: 470rem;
-        background-repeat: no-repeat;
-        background-position: top right;
-
         .tip {
-          color: #aaa;
+          color: #b5bace;
-          text-align: right;
+          font-size: 14rem;
-          font-size: 12rem;
+          font-weight: normal;
+          font-family: PingFang SC;
         }
       }
 
       .list {
-        color: #5b5b5b;
+        color: #17204d;
         display: flex;
         line-height: 18rem;
 
         .list_label {
-          width: 80rem;
+          width: 96rem;
-          font-weight: 700;
+          font-family: PingFang SC;
-          font-size: 14rem;
+          font-weight: 600;
-          color: #000;
+          font-size: 16rem;
+          color: #17204d;
         }
 
         .list_content {
           flex: 1;
           font-weight: 400;
-          font-size: 14rem;
+          font-size: 16rem;
           display: flex;
           align-items: center;
           word-break: normal;
@@ -482,7 +539,7 @@ function showGraph(item) {
           }
 
           .more_button::after {
-            content: "";
+            content: '';
             width: 0.35rem;
             height: 0.35rem;
             background-image: url('../../assets/images/product/arrow.png');
@@ -511,7 +568,7 @@ function showGraph(item) {
       }
 
       .list:nth-child(n):not(:last-child) {
-        margin-bottom: 15rem;
+        margin-bottom: 8rem;
       }
 
       .top_right_bg > .list:nth-child(n):not(:last-child) {
@@ -530,10 +587,12 @@ function showGraph(item) {
           width: unset;
           line-height: 18rem;
           margin-bottom: 7rem;
+          white-space: nowrap;
 
           .list_label_span {
-            font-weight: 700;
+            font-weight: 400;
-            border-bottom: 1rem solid #000;
+            font-size: 16rem;
+            font-family: PingFang SC;
           }
         }
       }
@@ -610,7 +669,7 @@ function showGraph(item) {
     position: relative;
 
     &::after {
-      content: " ";
+      content: ' ';
       position: absolute;
       bottom: -6rem;
       left: 0;